/* ===== بداية تنسيق القائمة الجانبية للجوال ===== */

@media (max-width: 1023px) {

    /*
    ألوان الهوية:
    Blue       : #3F4FB5
    Light Blue : #C7CEFB
    Pink       : #F356A7
    Light Pink : #F6C8DB
    Off White  : #F9F6F3
    */


    /* ========================================
       الحاوية الخارجية التي ينشئها ثيم رائد
    ======================================== */

    .mm-ocd__content {
        width: 88% !important;
        max-width: 370px !important;

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

        background: #F9F6F3 !important;

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

        overflow: hidden !important;

        box-shadow:
            14px 0 40px rgba(63, 79, 181, 0.18);
    }


    /*
    مهم:
    أي حاوية وسيطة داخل mm-ocd
    لا نسمح لها بإنشاء عمود جانبي إضافي
    */

    .mm-ocd__content > div,
    .mm-ocd__content custom-main-menu {
        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

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

        position: relative !important;

        background: transparent !important;
    }


    /* ========================================
       إلغاء زر الإغلاق الخارجي نهائياً
    ======================================== */

    .mm-ocd .btn--close-sm,
    .mm-ocd .btn--close-sm.close-mobile-menu,
    custom-main-menu > .btn--close-sm,
    custom-main-menu > button.btn--close-sm,
    button.btn--close-sm.close-mobile-menu {
        display: none !important;

        width: 0 !important;
        height: 0 !important;

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

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;
    }


    /* ========================================
       القائمة الرئيسية نفسها
    ======================================== */

    #mobile-menu {
        position: relative !important;

        top: 0 !important;
        right: 0 !important;
        left: 0 !important;

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

        height: 100% !important;
        min-height: 100% !important;

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

        transform: none !important;

        background: #F9F6F3 !important;

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

        box-shadow: none !important;

        overflow: hidden !important;
    }


    /* ========================================
       رأس القائمة
    ======================================== */

    #mobile-menu.mm-spn--navbar::after {
        content: "القائمة الرئيسية" !important;

        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        left: 0 !important;

        height: 68px !important;

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

        padding:
            0 20px 0 68px !important;

        background: #F6C8DB !important;

        color: #3F4FB5 !important;

        font-size: 17px !important;
        font-weight: 800 !important;

        line-height: 1 !important;

        opacity: 1 !important;

        border-bottom:
            1px solid rgba(243, 86, 167, 0.12);

        box-shadow:
            0 4px 14px rgba(63, 79, 181, 0.06);

        z-index: 5;
    }


    /*
    هذا pseudo-element يستخدمه mm-spn
    كسهم رجوع في القوائم الفرعية.

    بما أنه لا يوجد عندنا قائمة فرعية
    في نسخة الموبايل هنا نخفيه.
    */

    #mobile-menu.mm-spn--navbar::before {
        display: none !important;
    }


    /* ========================================
       زر الإغلاق الوحيد
    ======================================== */

    #mobile-menu
    > button.btn--close.close-mobile-menu {
        position: absolute !important;

        top: 13px !important;
        left: 16px !important;
        right: auto !important;

        width: 42px !important;
        height: 42px !important;

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

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

        background: #F9F6F3 !important;

        color: #3F4FB5 !important;

        border:
            1px solid rgba(63, 79, 181, 0.10) !important;

        border-radius:
            14px 5px 14px 5px !important;

        box-shadow:
            0 5px 14px rgba(63, 79, 181, 0.10);

        font-size: 15px !important;

        z-index: 30 !important;

        cursor: pointer;

        transition:
            background .22s ease,
            color .22s ease,
            transform .22s ease,
            box-shadow .22s ease;
    }


    #mobile-menu
    > button.btn--close.close-mobile-menu:hover,
    #mobile-menu
    > button.btn--close.close-mobile-menu:active {
        background: #F356A7 !important;

        color: #ffffff !important;

        transform: rotate(90deg);

        box-shadow:
            0 7px 18px rgba(243, 86, 167, 0.20);
    }


    /* ========================================
       منطقة الروابط
    ======================================== */

    #mobile-menu > .main-menu {
        position: absolute !important;

        top: 68px !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

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

        height: auto !important;

        margin: 0 !important;

        padding:
            14px 12px 24px !important;

        background: #F9F6F3 !important;

        transform: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;

        box-sizing: border-box !important;
    }


    /* ========================================
       عناصر الموبايل فقط
    ======================================== */

    #mobile-menu
    > .main-menu
    > li.lg\:hidden {
        display: block !important;

        position: relative !important;

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

        margin: 0 0 8px !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        box-sizing: border-box !important;
    }


    /* ========================================
       إخفاء نسخة الكمبيوتر
    ======================================== */

    #mobile-menu
    > .main-menu
    > li.root-level,

    #mobile-menu
    > .main-menu
    > li[data-menu-item] {
        display: none !important;
    }


    /* ========================================
       بطاقة الرابط
    ======================================== */

    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a {
        position: relative !important;

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

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

        min-height: 50px;

        margin: 0 !important;

        padding:
            11px 15px !important;

        background: #ffffff !important;

        color: #3F4FB5 !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        line-height: 1.6 !important;

        text-align: right !important;

        white-space: normal !important;

        border:
            1px solid rgba(63, 79, 181, 0.07) !important;

        border-radius:
            16px 6px 16px 6px !important;

        box-shadow:
            0 4px 12px rgba(63, 79, 181, 0.05);

        box-sizing: border-box !important;

        text-decoration: none !important;

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


    /* ========================================
       النقطة الزخرفية
    ======================================== */

    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a::before {
        content: "";

        width: 7px;
        height: 7px;

        min-width: 7px;

        margin-left: 11px;

        background: #C7CEFB;

        border-radius: 50%;

        box-shadow:
            0 0 0 4px rgba(199, 206, 251, 0.18);

        transition:
            background .22s ease,
            box-shadow .22s ease,
            transform .22s ease;
    }


    /* نص الرابط */

    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a
    > span {
        display: block !important;

        flex: 1 1 auto;

        min-width: 0;

        color: inherit !important;

        font-size: inherit !important;
        font-weight: inherit !important;

        line-height: inherit !important;

        white-space: normal !important;
    }


    /* ========================================
       Hover / Active
    ======================================== */

    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a:hover,

    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a:active {
        background:
            rgba(246, 200, 219, 0.30) !important;

        color:
            #F356A7 !important;

        border-color:
            rgba(243, 86, 167, 0.16) !important;

        transform:
            translateX(-2px);

        box-shadow:
            0 6px 16px rgba(243, 86, 167, 0.10);
    }


    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a:hover::before,

    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a:active::before {
        background:
            #F356A7;

        box-shadow:
            0 0 0 4px rgba(243, 86, 167, 0.14);

        transform:
            scale(1.15);
    }


    /* ========================================
       التخفيضات
    ======================================== */

    #mobile-menu
    > .main-menu
    > li#offers.lg\:hidden
    > a {
        background: #F6C8DB !important;

        color: #F356A7 !important;

        border-color:
            rgba(243, 86, 167, 0.16) !important;

        font-weight:
            800 !important;

        box-shadow:
            0 5px 14px rgba(243, 86, 167, 0.10);
    }


    #mobile-menu
    > .main-menu
    > li#offers.lg\:hidden
    > a::before {
        background: #F356A7;

        box-shadow:
            0 0 0 4px rgba(243, 86, 167, 0.14);
    }


    #mobile-menu
    > .main-menu
    > li#offers.lg\:hidden
    > a:hover,

    #mobile-menu
    > .main-menu
    > li#offers.lg\:hidden
    > a:active {
        background: #F356A7 !important;

        color: #ffffff !important;

        border-color: #F356A7 !important;
    }


    #mobile-menu
    > .main-menu
    > li#offers.lg\:hidden
    > a:hover::before {
        background: #ffffff;

        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.18);
    }


    /* ========================================
       الخلفية خلف القائمة
    ======================================== */

    .mm-ocd__backdrop {
        background:
            rgba(63, 79, 181, 0.20) !important;

        backdrop-filter:
            blur(3px);

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


    /* ========================================
       Scrollbar ناعم
    ======================================== */

    #mobile-menu > .main-menu {
        scrollbar-width: thin;

        scrollbar-color:
            #F6C8DB transparent;
    }


    #mobile-menu
    > .main-menu::-webkit-scrollbar {
        width: 4px;
    }


    #mobile-menu
    > .main-menu::-webkit-scrollbar-track {
        background: transparent;
    }


    #mobile-menu
    > .main-menu::-webkit-scrollbar-thumb {
        background: #F6C8DB;

        border-radius: 20px;
    }

}


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

@media (max-width: 420px) {

    .mm-ocd__content {
        width: 91% !important;

        max-width: 340px !important;
    }


    #mobile-menu.mm-spn--navbar::after {
        height: 62px !important;

        padding:
            0 16px 0 61px !important;

        font-size:
            16px !important;
    }


    #mobile-menu
    > button.btn--close.close-mobile-menu {
        top: 11px !important;
        left: 13px !important;

        width: 39px !important;
        height: 39px !important;
    }


    #mobile-menu
    > .main-menu {
        top: 62px !important;

        padding:
            12px 10px 20px !important;
    }


    #mobile-menu
    > .main-menu
    > li.lg\:hidden
    > a {
        min-height: 47px;

        padding:
            10px 12px !important;

        font-size:
            13px !important;

        border-radius:
            14px 5px 14px 5px !important;
    }

}


/* ===== نهاية تنسيق القائمة الجانبية للجوال ===== */
/* ===== بداية حركة خلفية القائمة الجانبية ===== */

@media (max-width: 1023px) {

    /* الخلفية عند الفتح والإغلاق */
    .mm-ocd__backdrop {
        background: rgba(63, 79, 181, 0.20) !important;

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

        opacity: 0;

        transition:
            opacity 0.35s ease,
            backdrop-filter 0.35s ease,
            -webkit-backdrop-filter 0.35s ease !important;

        will-change: opacity;

        pointer-events: none;
    }


    /* عند فتح القائمة */
    .mm-ocd--open .mm-ocd__backdrop {
        opacity: 1;

        pointer-events: auto;
    }


    /* حركة القائمة نفسها بنفس التوقيت */
    .mm-ocd__content {
        transition:
            transform 0.35s cubic-bezier(.4, 0, .2, 1) !important;

        will-change: transform;
    }

}


/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {

    .mm-ocd__backdrop,
    .mm-ocd__content {
        transition: none !important;
    }

}

/* ===== نهاية حركة خلفية القائمة الجانبية ===== */
/* ===== بداية تكبير شعار المتجر بدون التأثير على الهيدر ===== */

/* الشعار */
img[alt="مكتبة ريانة الرقمية logo"] {
    transform: scale(2);
    transform-origin: center center;

    /* يحافظ على جودة ونسبة الشعار */
    object-fit: contain;

    /* لا يؤثر التكبير على أبعاد الهيدر */
    transition: transform 0.3s ease;
}


/* الجوال */
@media (max-width: 767px) {

    img[alt="مكتبة ريانة الرقمية logo"] {
        /* تكبير أخف حتى لا يتداخل مع عناصر الهيدر */
        transform: scale(2);
    }

}


/* الشاشات الصغيرة جدًا */
@media (max-width: 420px) {

    img[alt="مكتبة ريانة الرقمية logo"] {
        transform: scale(1.16);
    }

}

/* ===== نهاية تكبير شعار المتجر بدون التأثير على الهيدر ===== */
/* ===== بداية تنسيق هيدر ريانة ===== */

/*
ألوان الهوية الرسمية
Blue       : #3F4FB5
Light Blue : #C7CEFB
Pink       : #F356A7
Light Pink : #F6C8DB
Off White  : #F9F6F3
*/

:root {
    --rayana-blue: #3F4FB5;
    --rayana-light-blue: #C7CEFB;
    --rayana-pink: #F356A7;
    --rayana-light-pink: #F6C8DB;
    --rayana-off-white: #F9F6F3;
}


/* ========================================
   الهيدر العام
======================================== */

.store-header {
    background: #ffffff;
}


/* ========================================
   الشريط العلوي
======================================== */

.store-header .top-navbar {
    background: #F9F6F3;
    border-bottom: 1px solid rgba(63, 79, 181, 0.10);
}


/* روابط الشريط العلوي */

.store-header .top-navbar a,
.store-header .top-navbar .s-menu-topnav-item,
.store-header .s-contacts-topnav-link,
.store-header .s-localization-modal-trigger-btn {
    color: #3F4FB5 !important;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


.store-header .top-navbar a:hover,
.store-header .top-navbar .s-menu-topnav-item:hover,
.store-header .s-contacts-topnav-link:hover {
    color: #F356A7 !important;
}


/* ========================================
   شريط التنقل الرئيسي
======================================== */

.store-header #mainnav {
    background: rgba(255, 255, 255, 0.98) !important;

    border-bottom:
        1px solid rgba(199, 206, 251, 0.40);

    box-shadow:
        0 5px 24px rgba(63, 79, 181, 0.07) !important;
}


/* ========================================
   الشعار
======================================== */

.store-header .navbar-brand img {
    transition:
        transform 0.30s ease,
        opacity 0.30s ease;
}


.store-header .navbar-brand:hover img {
    transform: scale(1.025);
}


/* ========================================
   البحث
======================================== */

.store-header .header-search .s-search-input-wrapper {
    background: #F9F6F3;

    border:
        1px solid rgba(63, 79, 181, 0.12);

    border-radius: 50px;

    box-shadow:
        0 2px 10px rgba(63, 79, 181, 0.03);

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


/* Hover البحث */

.store-header
.header-search
.s-search-input-wrapper:hover {
    background: #ffffff;

    border-color:
        rgba(63, 79, 181, 0.22);
}


/* عند الضغط والكتابة */

.store-header
.header-search
.s-search-input-wrapper:focus-within {
    background: #ffffff;

    border-color: #C7CEFB;

    box-shadow:
        0 0 0 4px rgba(199, 206, 251, 0.22);
}


/* حقل البحث */

.store-header .header-search .s-search-input {
    background: transparent !important;
    color: #3F4FB5 !important;

    font-weight: 500;
}


/* Placeholder */

.store-header
.header-search
.s-search-input::placeholder {
    color: rgba(63, 79, 181, 0.55);
    opacity: 1;
}


/* أيقونة البحث */

.store-header .s-search-icon svg {
    fill: #3F4FB5;

    transition:
        fill 0.25s ease,
        transform 0.25s ease;
}


/* الأيقونة عند التركيز */

.store-header
.header-search
.s-search-input-wrapper:focus-within
.s-search-icon svg {
    fill: #F356A7;
}


/* ========================================
   روابط القائمة الرئيسية
======================================== */

.store-header .main-menu > li > a {
    color: #3F4FB5 !important;

    font-weight: 500;

    transition:
        color 0.25s ease;
}


.store-header .main-menu > li > a:hover {
    color: #F356A7 !important;
}


/* ========================================
   الخط تحت الكلمة
======================================== */

@media (min-width: 1024px) {

    /*
    الخط مربوط بالـ span نفسه
    حتى يظهر أسفل الكلمة مباشرة
    */

    .store-header
    .main-menu > li.root-level > a > span {
        position: relative;
        display: inline-block;

        padding-bottom: 5px;
    }


    .store-header
    .main-menu > li.root-level > a > span::after {
        content: "";

        position: absolute;

        right: 50%;
        bottom: 0;

        width: 0;
        height: 2px;

        background: #F356A7;

        border-radius: 20px;

        transform: translateX(50%);

        transition:
            width 0.25s ease;
    }


    .store-header
    .main-menu > li.root-level > a:hover > span::after {
        width: 85%;
    }
}


/* ========================================
   رابط التخفيضات
======================================== */

.store-header .offers-link {
    color: #F356A7 !important;
    font-weight: 700 !important;
}


/* ========================================
   القائمة المنسدلة "المزيد"
======================================== */

.store-header .sub-menu {
    background: #ffffff;

    border:
        1px solid rgba(199, 206, 251, 0.55);

    border-radius: 14px;

    padding: 8px;

    box-shadow:
        0 15px 35px rgba(63, 79, 181, 0.10);

    overflow: hidden;
}


/* روابط القائمة المنسدلة */

.store-header .sub-menu li a {
    display: block;

    color: #3F4FB5 !important;

    border-radius: 9px;

    padding: 9px 12px;

    transition:
        background 0.20s ease,
        color 0.20s ease,
        transform 0.20s ease;
}


.store-header .sub-menu li a:hover {
    background: #F9F6F3;

    color: #F356A7 !important;

    transform: translateX(-2px);
}


/* ========================================
   أيقونة الحساب
======================================== */

.store-header salla-user-menu button {
    transition:
        transform 0.20s ease;
}


.store-header salla-user-menu button:hover {
    transform: translateY(-2px);
}


.store-header salla-user-menu svg {
    fill: #3F4FB5 !important;

    transition:
        fill 0.20s ease;
}


.store-header
salla-user-menu button:hover svg {
    fill: #F356A7 !important;
}


/* ========================================
   السلة
======================================== */

.store-header .s-cart-summary-wrapper {
    transition:
        transform 0.20s ease;
}


.store-header .s-cart-summary-wrapper:hover {
    transform: translateY(-2px);
}


/* لون أيقونة ومبلغ السلة */

.store-header .header-btn__icon,
.store-header .s-cart-summary-icon,
.store-header .s-cart-summary-total {
    color: #3F4FB5 !important;
}


/* Hover السلة */

.store-header
.s-cart-summary-wrapper:hover
.header-btn__icon,

.store-header
.s-cart-summary-wrapper:hover
.s-cart-summary-icon {
    color: #F356A7 !important;
}


/* ========================================
   عداد السلة
======================================== */

.store-header .s-cart-summary-count {
    background: #F356A7 !important;

    color: #ffffff !important;

    border: 2px solid #ffffff;

    font-weight: 700;

    box-shadow:
        0 2px 7px rgba(243, 86, 167, 0.20);
}


/* ========================================
   قائمة الجوال
======================================== */

@media (max-width: 1023px) {

    .store-header .mobile-menu {
        background: #ffffff !important;
    }


    .store-header
    .mobile-menu
    .main-menu li a {
        color: #3F4FB5 !important;

        border-bottom:
            1px solid rgba(199, 206, 251, 0.25);

        transition:
            background 0.20s ease,
            color 0.20s ease;
    }


    .store-header
    .mobile-menu
    .main-menu li a:hover {
        color: #F356A7 !important;

        background: #F9F6F3;
    }


    /* أيقونة القائمة */

    .store-header .mburger i,
    .store-header .close-mobile-menu {
        color: #3F4FB5 !important;
    }
}


/* ========================================
   تحسينات عامة
======================================== */

.store-header a,
.store-header button {
    -webkit-tap-highlight-color: transparent;
}


/* لون تحديد النص */

.store-header ::selection {
    background: #F6C8DB;
    color: #3F4FB5;
}


/* ===== نهاية تنسيق هيدر ريانة ===== */



/* ===== بداية تنسيق خلفية المتجر ===== */

html,
body {
    background-color: #F9F6F3 !important;
}

/* خلفية المحتوى الرئيسية في ثيم رائد */
.app-inner,
.app-content,
main {
    background-color: #F9F6F3;
}

/* انتقال ناعم بين أقسام الصفحة */
body {
    color: #3F4FB5;
}

/* ===== نهاية تنسيق خلفية المتجر ===== */




/* ===== بداية تنسيق بطاقة المنتج ===== */

/* البطاقة الرئيسية */
.s-product-card-entry,
custom-salla-product-card {
    height: 100%;
}

/* جسم البطاقة */
.s-product-card-entry {
    background: #F9F6F3 !important;
    border: 1px solid rgba(63, 79, 181, 0.08);
    border-radius: 22px !important;

    overflow: hidden;

    box-shadow:
        0 8px 24px rgba(63, 79, 181, 0.07);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


/* حركة البطاقة */
.s-product-card-entry:hover {
    transform: translateY(-5px);

    border-color:
        rgba(243, 86, 167, 0.18);

    box-shadow:
        0 14px 34px rgba(63, 79, 181, 0.11);
}


/* =========================
   صورة المنتج
========================= */

.s-product-card-image {
    overflow: hidden;

    background: #ffffff;

    border-radius:
        22px 22px 0 0;
}


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

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


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


/* =========================
   محتوى البطاقة
========================= */

.s-product-card-content {
    padding: 16px !important;

    display: flex;
    flex-direction: column;

    min-height: 190px;
}


/* الجزء الرئيسي */
.s-product-card-content-main {
    flex-grow: 1;
}


/* عنوان المنتج */
.s-product-card-content-title {
    margin-bottom: 10px !important;
}


.s-product-card-content-title a {
    color: #3F4FB5 !important;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;

    transition:
        color 0.22s ease;
}


.s-product-card-content-title a:hover {
    color: #F356A7 !important;
}


/* =========================
   السعر
========================= */

.s-product-card-price {
    color: #F356A7 !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    margin-top: 6px;
    margin-bottom: 14px;
}


/* =========================
   الفوتر
========================= */

.s-product-card-content-footer {
    margin-top: auto;
    padding-top: 4px;
}


/* =========================
   زر إضافة للسلة
========================= */

.s-product-card-content-footer
.s-button-element {

    background: #F356A7 !important;

    color: #ffffff !important;

    border:
        1px solid #F356A7 !important;

    /*
    الانحناء المميز:
    زاويتان ناعمتان أكثر من الباقي
    */

    border-radius:
        18px 6px 18px 6px !important;

    min-height:
        44px;

    font-weight:
        700;

    box-shadow:
        0 6px 16px rgba(243, 86, 167, 0.20);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* محتوى الزر */
.s-product-card-content-footer
.s-button-text {

    display: flex;

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

    gap: 7px;
}


/* أيقونة الزر */
.s-product-card-content-footer
.s-button-element i {

    color: #ffffff !important;

    transition:
        transform 0.25s ease;
}


/* Hover */
.s-product-card-content-footer
.s-button-element:hover {

    background: #3F4FB5 !important;

    border-color: #3F4FB5 !important;

    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(63, 79, 181, 0.20);
}


/* حركة أيقونة السلة */
.s-product-card-content-footer
.s-button-element:hover i {

    transform:
        translateX(-2px);
}


/* =========================
   زر المفضلة
========================= */

.s-product-card-wishlist-btn
.s-button-element {

    background:
        rgba(249, 246, 243, 0.94) !important;

    border:
        1px solid rgba(243, 86, 167, 0.14) !important;

    color:
        #3F4FB5 !important;

    border-radius:
        50% !important;

    box-shadow:
        0 4px 12px rgba(63, 79, 181, 0.08);

    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}


/* القلب */
.s-product-card-wishlist-btn
.sicon-heart {

    color:
        #3F4FB5 !important;
}


/* Hover المفضلة */
.s-product-card-wishlist-btn
.s-button-element:hover {

    background:
        #F6C8DB !important;

    transform:
        scale(1.06);
}


.s-product-card-wishlist-btn
.s-button-element:hover
.sicon-heart {

    color:
        #F356A7 !important;
}


/* =========================
   توحيد ارتفاع البطاقات
========================= */

@media (min-width: 768px) {

    .s-product-card-entry {
        min-height:
            100%;
    }


    .s-product-card-content-title a {

        display:
            -webkit-box;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;

        overflow:
            hidden;

        min-height:
            54px;
    }

}


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

@media (max-width: 767px) {

    .s-product-card-entry {

        border-radius:
            18px !important;
    }


    .s-product-card-content {

        padding:
            13px !important;

        min-height:
            170px;
    }


    .s-product-card-content-title a {

        font-size:
            14px;

        line-height:
            1.7;
    }


    .s-product-card-price {

        font-size:
            17px !important;
    }


    .s-product-card-content-footer
    .s-button-element {

        min-height:
            42px;

        border-radius:
            15px 5px 15px 5px !important;
    }

}


/* ===== نهاية تنسيق بطاقة المنتج ===== */

/* ===== بداية تنسيق عنوان قسم المنتجات ===== */

/* الحاوية الرئيسية للعنوان */
.s-slider-block__title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 22px;
    padding-bottom: 10px;

    position: relative;
}


/* الجهة اليمنى */
.s-slider-block__title-right {
    position: relative;
}


/* عنوان القسم */
.s-slider-block__title-right h2 {
    position: relative;

    margin: 0;

    color: #3F4FB5;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;

    padding-right: 16px;
}


/* لمسة زخرفية بجانب العنوان */
.s-slider-block__title-right h2::before {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 5px;
    height: 70%;

    background: #F356A7;

    border-radius: 10px;

    transform: translateY(-50%);
}


/* خط زخرفي ناعم أسفل العنوان */
.s-slider-block__title-right h2::after {
    content: "";

    position: absolute;

    right: 16px;
    bottom: -7px;

    width: 54px;
    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #F356A7,
            #C7CEFB
        );
}


/* ========================================
   الجهة اليسرى
======================================== */

.s-slider-block__title-left {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* زر عرض الكل */
.s-slider-block__display-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 7px 16px;

    border-radius: 18px 6px 18px 6px;

    background: #F9F6F3;

    color: #3F4FB5 !important;

    border:
        1px solid rgba(63, 79, 181, 0.15);

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(63, 79, 181, 0.05);

    transition:
        background 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


/* Hover عرض الكل */
.s-slider-block__display-all:hover {
    background: #3F4FB5;

    color: #ffffff !important;

    border-color: #3F4FB5;

    transform: translateY(-2px);

    box-shadow:
        0 7px 16px rgba(63, 79, 181, 0.15);
}


/* ========================================
   أزرار التنقل
======================================== */

.s-slider-block__title-nav {
    display: flex;
    align-items: center;

    gap: 7px;
}


/* زر السهم */
.s-slider-nav-arrow {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;

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

    background: #F9F6F3 !important;

    border:
        1px solid rgba(63, 79, 181, 0.14) !important;

    border-radius: 50% !important;

    box-shadow:
        0 4px 12px rgba(63, 79, 181, 0.05);

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


/* لون الأيقونة */
.s-slider-nav-arrow svg {
    width: 20px;
    height: 20px;

    fill: #3F4FB5 !important;

    transition:
        fill 0.22s ease;
}


/* Hover السهم */
.s-slider-nav-arrow:hover:not(:disabled) {
    background: #F356A7 !important;

    border-color: #F356A7 !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 16px rgba(243, 86, 167, 0.18);
}


.s-slider-nav-arrow:hover:not(:disabled) svg {
    fill: #ffffff !important;
}


/* السهم المعطل */
.s-slider-nav-arrow:disabled,
.s-slider-nav-arrow.swiper-button-disabled {
    opacity: 0.35;

    cursor: default;

    box-shadow: none;
}


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

@media (max-width: 767px) {

    .s-slider-block__title {
        align-items: flex-start;

        gap: 10px;

        margin-bottom: 18px;
    }


    .s-slider-block__title-right h2 {
        font-size: 19px;

        padding-right: 13px;
    }


    .s-slider-block__title-right h2::before {
        width: 4px;
    }


    .s-slider-block__title-right h2::after {
        right: 13px;

        width: 42px;
    }


    .s-slider-block__display-all {
        min-height: 34px;

        padding:
            6px 11px;

        font-size:
            13px;
    }


    .s-slider-nav-arrow {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
    }


    .s-slider-nav-arrow svg {
        width: 18px;
        height: 18px;
    }

}


/* ===== نهاية تنسيق عنوان قسم المنتجات ===== */
/* ===== بداية تنسيق شارة المنتج ===== */

.s-product-card-promotion-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 12px !important;

    background: #F356A7 !important;
    color: #ffffff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4;

    border: 1px solid rgba(255, 255, 255, 0.25);

    /* نفس أسلوب الانحناءات المستخدم بالمتجر */
    border-radius: 12px 4px 12px 4px !important;

    box-shadow:
        0 4px 10px rgba(243, 86, 167, 0.18),
        0 2px 5px rgba(63, 79, 181, 0.08);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


/* حركة خفيفة */
.s-product-card:hover
.s-product-card-promotion-title {
    transform: translateY(-2px);

    box-shadow:
        0 6px 14px rgba(243, 86, 167, 0.24),
        0 3px 7px rgba(63, 79, 181, 0.09);
}


/* الجوال */
@media (max-width: 767px) {

    .s-product-card-promotion-title {
        padding: 5px 10px !important;

        font-size: 11px !important;

        border-radius: 10px 4px 10px 4px !important;
    }

}

/* ===== نهاية تنسيق شارة المنتج ===== */
/* ===== بداية زخرفة بطاقة المنتج - نسخة أوضح ===== */

/*
ألوان الهوية:
Blue       : #3F4FB5
Light Blue : #C7CEFB
Pink       : #F356A7
Light Pink : #F6C8DB
Off White  : #F9F6F3
*/


/* ========================================
   تجهيز البطاقة
======================================== */

.s-product-card-entry {
    position: relative !important;

    /* مهم حتى تبقى الزخارف داخل البطاقة */
    overflow: hidden !important;

    isolation: isolate;
}


/* المحتوى فوق الزخارف */
.s-product-card-content,
.s-product-card-image,
.s-product-card-wishlist-btn {
    position: relative;

    z-index: 2;
}


/* ========================================
   زخرفة زهرية كبيرة - أسفل اليسار
======================================== */

.s-product-card-entry::before {
    content: "";

    position: absolute;

    left: -48px;
    bottom: -50px;

    width: 135px;
    height: 135px;

    /*
    أكثر وضوحاً من النسخة السابقة
    مع حلقة داخلية
    */
    background:
        radial-gradient(
            circle,
            rgba(249, 246, 243, 0.15) 0 28%,
            rgba(243, 86, 167, 0.20) 29% 47%,
            rgba(246, 200, 219, 0.68) 48% 100%
        );

    border:
        1px solid rgba(243, 86, 167, 0.18);

    border-radius: 50%;

    box-shadow:
        0 0 0 7px rgba(246, 200, 219, 0.16);

    pointer-events: none;

    z-index: 0;

    transition:
        transform .35s ease,
        opacity .35s ease;
}


/* ========================================
   زخرفة زرقاء - أعلى اليمين
======================================== */

.s-product-card-entry::after {
    content: "";

    position: absolute;

    right: -31px;
    top: -30px;

    width: 92px;
    height: 92px;

    background:
        radial-gradient(
            circle,
            rgba(249, 246, 243, 0.20) 0 27%,
            rgba(63, 79, 181, 0.16) 28% 45%,
            rgba(199, 206, 251, 0.75) 46% 100%
        );

    border:
        1px solid rgba(63, 79, 181, 0.16);

    border-radius: 50%;

    box-shadow:
        0 0 0 6px rgba(199, 206, 251, 0.17);

    pointer-events: none;

    z-index: 0;

    transition:
        transform .35s ease,
        opacity .35s ease;
}


/* ========================================
   حركة بسيطة عند المرور
======================================== */

.s-product-card-entry:hover::before {
    transform:
        translate(5px, -5px)
        scale(1.08);
}


.s-product-card-entry:hover::after {
    transform:
        translate(-4px, 5px)
        scale(1.10);
}


/* ========================================
   لمسة زخرفية داخل منطقة المحتوى
======================================== */

.s-product-card-content {
    position: relative;

    z-index: 2;
}


/*
خط زخرفي زهري صغير
يفصل المحتوى بطريقة ناعمة
*/
.s-product-card-content::before {
    content: "";

    position: absolute;

    right: 16px;
    top: 0;

    width: 38px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #F6C8DB,
            #F356A7
        );

    border-radius: 20px;

    opacity: .85;
}


/* ========================================
   الجوال
======================================== */

@media (max-width: 767px) {

    /* الزهري */
    .s-product-card-entry::before {
        left: -42px;
        bottom: -43px;

        width: 110px;
        height: 110px;

        box-shadow:
            0 0 0 5px rgba(246, 200, 219, 0.15);
    }


    /* الأزرق */
    .s-product-card-entry::after {
        right: -27px;
        top: -26px;

        width: 75px;
        height: 75px;

        box-shadow:
            0 0 0 5px rgba(199, 206, 251, 0.16);
    }


    /* الخط الزخرفي */
    .s-product-card-content::before {
        right: 13px;

        width: 30px;
    }

}


/* ===== نهاية زخرفة بطاقة المنتج - نسخة أوضح ===== */
/* ===== بداية تنسيق عنوان آراء العملاء ===== */

.s-reviews-header-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    margin-bottom: 22px;
    padding-bottom: 10px;
}


/* عنوان آراء العملاء */
.s-reviews-header {
    position: relative;

    margin: 0;

    color: #3F4FB5 !important;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;

    padding-right: 16px;
}


/* الخط الزهري الجانبي */
.s-reviews-header::before {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 5px;
    height: 70%;

    background: #F356A7;

    border-radius: 10px;

    transform: translateY(-50%);
}


/* الخط الزخرفي أسفل العنوان */
.s-reviews-header::after {
    content: "";

    position: absolute;

    right: 16px;
    bottom: -7px;

    width: 54px;
    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #F356A7,
            #C7CEFB
        );
}


/* تحسين الجوال */
@media (max-width: 767px) {

    .s-reviews-header-wrapper {
        margin-bottom: 18px;
    }

    .s-reviews-header {
        font-size: 19px;
        padding-right: 13px;
    }

    .s-reviews-header::before {
        width: 4px;
    }

    .s-reviews-header::after {
        right: 13px;
        width: 42px;
    }

}

/* ===== نهاية تنسيق عنوان آراء العملاء ===== */

/* ===== بداية تنسيق بطاقات آراء العملاء ===== */

/*
ألوان الهوية:
Blue       : #3F4FB5
Light Blue : #C7CEFB
Pink       : #F356A7
Light Pink : #F6C8DB
Off White  : #F9F6F3
*/


/* ========================================
   خلفية منطقة الآراء
======================================== */

.s-reviews-swiper-slide {
    background: #F9F6F3 !important;

    padding: 10px 8px 18px;

    box-sizing: border-box;
}


.s-reviews-testimonial {
    background: transparent !important;

    height: 100%;

    padding: 0;
}


/* ========================================
   البطاقة
======================================== */

.s-reviews-testimonial__inner {
    position: relative;

    height: 100%;
    min-height: 220px;

    padding: 22px;

    /* نفس لون خلفية المتجر */
    background: #F9F6F3 !important;

    border:
        1px solid rgba(63, 79, 181, 0.08);

    border-radius:
        26px 9px 26px 9px !important;

    overflow: hidden;

    /* نفس أسلوب ظل بطاقات المميزات */
    box-shadow:
        0 5px 14px rgba(63, 79, 181, 0.06),
        0 12px 28px rgba(63, 79, 181, 0.10);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


/* Hover البطاقة */

.s-reviews-testimonial__inner:hover {
    transform: translateY(-6px);

    border-color:
        rgba(243, 86, 167, 0.18);

    box-shadow:
        0 7px 16px rgba(63, 79, 181, 0.08),
        0 18px 36px rgba(63, 79, 181, 0.14);
}


/* ========================================
   صورة العميل
======================================== */

.s-reviews-testimonial__avatar {
    position: relative;

    width: 64px;
    height: 64px;

    padding: 3px;

    background: #F6C8DB;

    border:
        2px solid rgba(243, 86, 167, 0.18);

    border-radius:
        20px 7px 20px 7px;

    overflow: hidden;

    box-shadow:
        0 6px 16px rgba(243, 86, 167, 0.12);

    z-index: 2;

    transition:
        transform 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}


.s-reviews-testimonial__avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius:
        16px 5px 16px 5px;
}


/* Hover الصورة */

.s-reviews-testimonial__inner:hover
.s-reviews-testimonial__avatar {
    background: #F356A7;

    border-color:
        rgba(243, 86, 167, 0.35);

    transform:
        translateY(-3px) rotate(-2deg);

    box-shadow:
        0 8px 20px rgba(243, 86, 167, 0.20);
}


/* ========================================
   نص الرأي
======================================== */

.s-reviews-testimonial__text {
    position: relative;

    margin-top: 16px;

    z-index: 2;
}


.s-reviews-testimonial__text p {
    margin: 0 0 18px;

    color:
        rgba(63, 79, 181, 0.76) !important;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.9;
}


/* ========================================
   الاسم والتقييم
======================================== */

.s-reviews-testimonial__name_wrapper {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-top: 14px;

    border-top:
        1px solid rgba(63, 79, 181, 0.09);
}


.s-reviews-testimonial__info {
    min-width: 0;
}


.s-reviews-testimonial__info h2 {
    position: relative;

    margin: 0;

    color: #3F4FB5 !important;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.5;
}


/* خط صغير تحت الاسم */

.s-reviews-testimonial__info h2::after {
    content: "";

    display: block;

    width: 28px;
    height: 3px;

    margin-top: 6px;

    background: #F356A7;

    border-radius: 20px;

    transition:
        width 0.28s ease;
}


.s-reviews-testimonial__inner:hover
.s-reviews-testimonial__info h2::after {
    width: 42px;
}


/* ========================================
   النجوم
======================================== */

.s-reviews-testimonial__rating {
    flex-shrink: 0;
}


.s-reviews-testimonial__rating
.s-rating-stars-wrapper {
    display: flex;

    align-items: center;

    gap: 2px;
}


.s-reviews-testimonial__rating
.s-rating-stars-btn-star svg,

.s-reviews-testimonial__rating
.s-rating-stars-selected svg {
    width: 18px;
    height: 18px;

    fill: #F356A7 !important;
}


/* ========================================
   علامة الاقتباس
======================================== */

.s-reviews-testimonial__icon {
    position: absolute;

    left: 17px;
    top: 15px;

    z-index: 1;

    opacity: 0.12;

    pointer-events: none;
}


.s-reviews-testimonial__icon svg {
    width: 48px;
    height: 48px;

    fill: #3F4FB5 !important;
}


/* ========================================
   زخرفة خلفية ناعمة
======================================== */

/* دائرة زهرية خفيفة */

.s-reviews-testimonial__inner::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    left: -42px;
    bottom: -42px;

    background:
        rgba(246, 200, 219, 0.24);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;
}


/* دائرة أزرق فاتح */

.s-reviews-testimonial__inner::after {
    content: "";

    position: absolute;

    width: 52px;
    height: 52px;

    right: -25px;
    top: -25px;

    background:
        rgba(199, 206, 251, 0.30);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;
}


/* ========================================
   الجوال
======================================== */

@media (max-width: 767px) {

    .s-reviews-swiper-slide {
        padding:
            8px 5px 16px;
    }


    .s-reviews-testimonial__inner {
        min-height: 195px;

        padding: 18px;

        border-radius:
            21px 7px 21px 7px !important;

        box-shadow:
            0 5px 12px rgba(63, 79, 181, 0.06),
            0 11px 25px rgba(63, 79, 181, 0.11);
    }


    .s-reviews-testimonial__inner:hover {
        transform:
            translateY(-3px);
    }


    .s-reviews-testimonial__avatar {
        width: 56px;
        height: 56px;

        border-radius:
            17px 6px 17px 6px;
    }


    .s-reviews-testimonial__avatar img {
        border-radius:
            13px 4px 13px 4px;
    }


    .s-reviews-testimonial__text {
        margin-top: 14px;
    }


    .s-reviews-testimonial__text p {
        font-size: 14px;

        line-height: 1.8;

        margin-bottom: 15px;
    }


    .s-reviews-testimonial__name_wrapper {
        gap: 8px;

        padding-top: 12px;
    }


    .s-reviews-testimonial__info h2 {
        font-size: 14px;
    }


    .s-reviews-testimonial__rating
    .s-rating-stars-btn-star svg {
        width: 16px;
        height: 16px;
    }


    .s-reviews-testimonial__icon {
        left: 14px;
        top: 13px;
    }


    .s-reviews-testimonial__icon svg {
        width: 40px;
        height: 40px;
    }

}


/* ===== نهاية تنسيق بطاقات آراء العملاء ===== */


 

/* ===== بداية تنسيق بطاقات مميزات المتجر ===== */

/* البطاقة */
.s-block--features__item {
    position: relative;

    height: 100%;
    min-height: 210px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;

    padding: 28px 22px 24px;

    background: #ffffff !important;

    border: 1px solid rgba(63, 79, 181, 0.08);

    /* نفس لغة الانحناءات المعتمدة في المتجر */
    border-radius: 26px 9px 26px 9px;

    box-shadow:
        0 5px 14px rgba(63, 79, 181, 0.05),
        0 12px 28px rgba(63, 79, 181, 0.08);

    overflow: hidden;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


/* Hover البطاقة */
.s-block--features__item:hover {
    transform: translateY(-6px);

    border-color: rgba(243, 86, 167, 0.18);

    box-shadow:
        0 7px 16px rgba(63, 79, 181, 0.07),
        0 18px 36px rgba(63, 79, 181, 0.13);
}


/* ========================================
   الأيقونة
======================================== */

.s-block--features__item .feature-icon {
    position: relative;

    width: 66px;
    height: 66px;

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

    margin-bottom: 18px;

    /* زهري الهوية الفاتح */
    background: #F6C8DB !important;

    border: 1px solid rgba(243, 86, 167, 0.15);

    /* انحناء مميز بدل الدائرة التقليدية */
    border-radius: 20px 7px 20px 7px;

    box-shadow:
        0 6px 16px rgba(243, 86, 167, 0.12);

    z-index: 2;

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


/* الأيقونة نفسها */
.s-block--features__item .feature-icon i {
    color: #3F4FB5 !important;

    font-size: 27px;

    transition:
        color 0.28s ease,
        transform 0.28s ease;
}


/* حركة الأيقونة */
.s-block--features__item:hover .feature-icon {
    background: #F356A7 !important;

    transform:
        translateY(-3px) rotate(-2deg);

    box-shadow:
        0 8px 20px rgba(243, 86, 167, 0.20);
}


.s-block--features__item:hover .feature-icon i {
    color: #ffffff !important;

    transform: scale(1.08);
}


/* ========================================
   عنوان الميزة
======================================== */

.s-block--features__item h2 {
    position: relative;

    margin: 0 0 11px;

    color: #3F4FB5 !important;

    font-size: 18px;
    font-weight: 800;

    line-height: 1.6;

    z-index: 2;
}


/* خط صغير تحت العنوان */
.s-block--features__item h2::after {
    content: "";

    display: block;

    width: 32px;
    height: 3px;

    margin: 7px auto 0;

    background: #F356A7;

    border-radius: 20px;

    transition:
        width 0.28s ease;
}


/* يمتد الخط عند المرور */
.s-block--features__item:hover h2::after {
    width: 48px;
}


/* ========================================
   وصف الميزة
======================================== */

.s-block--features__item p {
    position: relative;

    margin: 0;

    max-width: 290px;

    color: rgba(63, 79, 181, 0.72) !important;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.9;

    z-index: 2;
}


/* ========================================
   زخرفة خلفية ناعمة
======================================== */

.s-block--features__item::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    left: -42px;
    bottom: -42px;

    background: rgba(246, 200, 219, 0.22);

    border-radius: 50%;

    pointer-events: none;
}


/* لمسة أزرق فاتح */
.s-block--features__item::after {
    content: "";

    position: absolute;

    width: 52px;
    height: 52px;

    right: -25px;
    top: -25px;

    background: rgba(199, 206, 251, 0.28);

    border-radius: 50%;

    pointer-events: none;
}


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

@media (max-width: 767px) {

    .s-block--features__item {
        min-height: 190px;

        padding:
            22px 17px 20px;

        border-radius:
            21px 7px 21px 7px;
    }


    .s-block--features__item .feature-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 14px;

        border-radius:
            17px 6px 17px 6px;
    }


    .s-block--features__item .feature-icon i {
        font-size: 24px;
    }


    .s-block--features__item h2 {
        font-size: 16px;

        margin-bottom: 9px;
    }


    .s-block--features__item p {
        font-size: 13px;

        line-height: 1.8;
    }


    .s-block--features__item:hover {
        transform: translateY(-3px);
    }

}

/* ===== نهاية تنسيق بطاقات مميزات المتجر ===== */
/* ===== بداية تنسيق فوتر ريانة ===== */

/*
ألوان الهوية:
Blue       : #3F4FB5
Light Blue : #C7CEFB
Pink       : #F356A7
Light Pink : #F6C8DB
Off White  : #F9F6F3
*/


/* ========================================
   حماية الموقع من الإزاحة الأفقية
======================================== */

/*
هذه لا تغير التصميم أو المقاسات.
فقط تمنع أي عنصر زخرفي من إنشاء
مساحة قابلة للسحب يمين/يسار.
*/

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
}

/* دعم الأجهزة التي لا تدعم overflow: clip */
@supports not (overflow-x: clip) {
    html,
    body {
        overflow-x: hidden !important;
    }
}


/* ========================================
   الفوتر الرئيسي
======================================== */

.store-footer {
    position: relative;

    margin-top: 80px;

    width: 100%;
    max-width: 100%;

    background: #F356A7 !important;

    color: #F9F6F3 !important;

    /*
    نبقي visible لأننا نريد
    ظهور الموجة فوق الفوتر.
    */
    overflow: visible;
}


/* المحتوى الداخلي */
.store-footer__inner {
    position: relative;

    width: 100%;
    max-width: 100%;

    background: #F356A7 !important;

    padding-top: 70px;

    border: 0 !important;
}


/* ========================================
   الموجة أعلى الفوتر
======================================== */

/* الموجة الزهرية */
.store-footer::before {
    content: "";

    position: absolute;

    right: 0;
    left: 0;

    top: -54px;

    width: 100%;
    height: 56px;

    background: #F356A7;

    border-radius:
        50% 50% 0 0 /
        100% 100% 0 0;

    z-index: 1;

    pointer-events: none;
}


/*
الموجة الثانية.

مهم جدًا:
بدل width:110% + right:-5%
التي توسع الصفحة فعليًا،

نستخدم width:100%
ثم scaleX(1.1).

بصريًا تحصل على نفس امتداد 110%
لكن عرض العنصر الأساسي يبقى 100%.
*/

.store-footer::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -73px;

    width: 100%;
    height: 70px;

    background: #F9F6F3;

    border-radius:
        0 0 50% 50% /
        0 0 100% 100%;

    transform: scaleX(1.1);

    transform-origin: center center;

    z-index: 1;

    pointer-events: none;
}


/* المحتوى فوق الموجة */
.store-footer > * {
    position: relative;

    z-index: 2;
}


/* ========================================
   حماية عناصر الفوتر
======================================== */

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


.store-footer .container {
    max-width: 100%;
}


/* ========================================
   العناوين
======================================== */

.store-footer h3,
.store-footer .s-contacts-title {
    position: relative;

    margin-bottom: 18px;

    color: #ffffff !important;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.5;
}


/* الخط تحت العنوان */
.store-footer h3::after,
.store-footer .s-contacts-title::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin-top: 8px;

    background: #C7CEFB;

    border-radius: 20px;

    transition:
        width .25s ease;
}


.store-footer h3:hover::after,
.store-footer .s-contacts-title:hover::after {
    width: 52px;
}


/* ========================================
   اسم المتجر
======================================== */

.store-footer
a[href*="rayana-shop.com/ar/"]
h3 {
    color: #ffffff !important;

    font-size: 21px;

    font-weight: 900;
}


/* ========================================
   وصف المتجر
======================================== */

.store-footer
.max-w-sm {
    max-width: 100%;

    color:
        rgba(249, 246, 243, 0.88) !important;
}


.store-footer
.max-w-sm p {
    color:
        rgba(249, 246, 243, 0.88) !important;

    line-height: 1.9;

    font-size: 14px;
}


.store-footer
.max-w-sm em {
    color: #ffffff;

    font-weight: 700;
}


/* ========================================
   روابط الفوتر
======================================== */

.store-footer
.s-menu-footer-list {
    display: flex;

    flex-direction: column;

    gap: 8px;

    max-width: 100%;
}


.store-footer
.s-menu-footer-item {
    position: relative;

    width: fit-content;
    max-width: 100%;

    color:
        rgba(249, 246, 243, 0.88) !important;

    font-size: 14px;

    white-space: normal;

    overflow-wrap: anywhere;

    transition:
        color .22s ease,
        transform .22s ease;
}


/* النقطة */
.store-footer
.s-menu-footer-item::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-left: 8px;

    background: #C7CEFB;

    border-radius: 50%;

    vertical-align: middle;

    transition:
        background .22s ease,
        transform .22s ease;
}


.store-footer
.s-menu-footer-item:hover {
    color: #ffffff !important;

    transform: translateX(-3px);
}


.store-footer
.s-menu-footer-item:hover::before {
    background: #ffffff;

    transform: scale(1.2);
}


/* ========================================
   بيانات التواصل
======================================== */

.store-footer
.s-contacts-list {
    width: 100%;

    max-width: 100%;

    gap: 10px;
}


.store-footer
.s-contacts-item {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    color:
        rgba(249, 246, 243, 0.90) !important;

    transition:
        color .22s ease,
        transform .22s ease;
}


.store-footer
.s-contacts-item:hover {
    color: #ffffff !important;

    transform: translateX(-3px);
}


/* ========================================
   أيقونات التواصل
======================================== */

.store-footer
.s-contacts-icon {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: flex;

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

    flex-shrink: 0;

    background:
        rgba(249, 246, 243, 0.14);

    border:
        1px solid rgba(249, 246, 243, 0.18);

    border-radius:
        12px 5px 12px 5px;

    transition:
        background .22s ease,
        transform .22s ease;
}


.store-footer
.s-contacts-icon svg {
    width: 18px;
    height: 18px;

    fill: #ffffff !important;
}


.store-footer
.s-contacts-item:hover
.s-contacts-icon {
    background: #3F4FB5;

    transform: translateY(-2px);
}


/* ========================================
   الرقم والإيميل
======================================== */

.store-footer
.s-contacts-item .unicode {
    min-width: 0;

    max-width: 100%;

    color: inherit !important;

    white-space: normal;

    overflow-wrap: anywhere;

    word-break: break-word;
}


/* ========================================
   السوشيال
======================================== */

.store-footer
.s-social-list {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    max-width: 100%;
}


.store-footer
.s-social-link a {
    width: 40px;
    height: 40px;

    display: flex;

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

    background:
        rgba(249, 246, 243, 0.14);

    border:
        1px solid rgba(249, 246, 243, 0.20);

    border-radius:
        14px 5px 14px 5px;

    transition:
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}


.store-footer
.s-social-icon svg {
    width: 19px;
    height: 19px;

    fill: #ffffff !important;
}


.store-footer
.s-social-link a:hover {
    background: #3F4FB5;

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 18px rgba(63, 79, 181, 0.22);
}


/* ========================================
   شارات الثقة
======================================== */

.store-footer
salla-trust-badges {
    max-width: 100%;

    filter:
        drop-shadow(
            0 4px 10px rgba(63, 79, 181, 0.10)
        );
}


/* ========================================
   الجزء السفلي
======================================== */

.store-footer
> .container:last-child {
    position: relative;

    max-width: 100%;

    margin-top: 30px;

    padding-top: 20px !important;

    border-top:
        1px solid rgba(249, 246, 243, 0.18);
}


/* الحقوق */
.store-footer
.copyright-text,

.store-footer
.copyright-text p {
    color:
        rgba(249, 246, 243, 0.78) !important;
}


.store-footer
.copyright-text a {
    color: #ffffff !important;

    font-weight: 700;

    transition:
        color .22s ease;
}


.store-footer
.copyright-text a:hover {
    color: #C7CEFB !important;
}


/* ========================================
   وسائل الدفع
======================================== */

.store-footer
.s-payments-list {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;

    max-width: 100%;
}


.store-footer
.s-payments-list-item {
    display: flex;

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

    flex-shrink: 0;

    padding: 4px 6px;

    background:
        rgba(249, 246, 243, 0.92);

    border-radius: 8px;

    box-shadow:
        0 3px 10px rgba(63, 79, 181, 0.10);

    transition:
        transform .22s ease,
        background .22s ease;
}


.store-footer
.s-payments-list-item:hover {
    background: #ffffff;

    transform:
        translateY(-2px);
}


.store-footer
.s-payments-list-item img {
    max-width: 100%;

    height: auto;
}


/* ========================================
   تحسين المسافات
======================================== */

.store-footer__inner
.container {
    position: relative;

    max-width: 100%;

    z-index: 3;
}


/* ========================================
   الجوال
======================================== */

@media (max-width: 767px) {

    .store-footer {
        margin-top: 65px;

        width: 100%;

        max-width: 100%;
    }


    /* الموجة الزهرية */
    .store-footer::before {
        top: -38px;

        height: 40px;
    }


    /*
    نفس الشكل العريض،
    لكن بدون width أكبر من الشاشة
    */
    .store-footer::after {
        left: 0;
        right: 0;

        top: -51px;

        width: 100%;
        height: 50px;

        transform:
            scaleX(1.10);

        transform-origin:
            center center;
    }


    /* المحتوى */
    .store-footer__inner {
        width: 100%;

        max-width: 100%;

        padding-top: 50px;
    }


    .store-footer__inner
    .container {
        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    /* العناوين */
    .store-footer h3,
    .store-footer .s-contacts-title {
        font-size: 17px;
    }


    /* النصوص */
    .store-footer
    .max-w-sm p,

    .store-footer
    .s-menu-footer-item,

    .store-footer
    .s-contacts-item {
        font-size: 13px;
    }


    /* الروابط */
    .store-footer
    .s-menu-footer-item {
        max-width: 100%;

        white-space: normal;

        overflow-wrap: anywhere;
    }


    /* التواصل */
    .store-footer
    .s-contacts-list {
        width: 100%;

        max-width: 100%;
    }


    .store-footer
    .s-contacts-item {
        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    .store-footer
    .s-contacts-item .unicode {
        min-width: 0;

        max-width: 100%;

        font-size: 12px;

        white-space: normal;

        overflow-wrap: anywhere;

        word-break: break-word;
    }


    /* السوشيال */
    .store-footer
    .s-social-list {
        max-width: 100%;

        flex-wrap: wrap;
    }


    .store-footer
    .s-social-link a {
        width: 38px;

        height: 38px;
    }


    /* الجزء السفلي */
    .store-footer
    > .container:last-child {
        width: 100%;

        max-width: 100%;

        margin-top: 20px;

        padding-top: 16px !important;
    }


    /* وسائل الدفع */
    .store-footer
    .s-payments-list {
        width: 100%;

        max-width: 100%;

        justify-content: center;

        flex-wrap: wrap;
    }

}


/* ========================================
   الجوال الصغير جدًا
======================================== */

@media (max-width: 420px) {

    .store-footer {
        margin-top: 60px;
    }


    .store-footer::before {
        top: -34px;

        height: 36px;
    }


    .store-footer::after {
        top: -46px;

        height: 45px;

        transform:
            scaleX(1.10);
    }


    .store-footer__inner {
        padding-top: 45px;
    }


    .store-footer
    .s-contacts-item {
        gap: 8px;
    }


    .store-footer
    .s-payments-list {
        gap: 5px;
    }

}


/* ===== نهاية تنسيق فوتر ريانة ===== */
/* ===== بداية تنسيق زر الواتساب العائم ===== */

/* الحاوية الخارجية */
div.sc-q8c6tt-1 {
    position: relative;
}


/* زر الواتساب */
a.sc-q8c6tt-0 {
    background: #F356A7 !important;

    border-radius: 50% !important;

    box-shadow:
        0 6px 18px rgba(243, 86, 167, 0.28);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

    animation:
        rayana-whatsapp-pulse 1.8s ease-in-out infinite;
}


/* أيقونة الواتساب */
a.sc-q8c6tt-0 svg {
    fill: #ffffff !important;
}


/* Hover */
a.sc-q8c6tt-0:hover {
    background: #3F4FB5 !important;

    transform: scale(1.06);

    box-shadow:
        0 8px 22px rgba(63, 79, 181, 0.28);
}


/* نبض مستمر */
@keyframes rayana-whatsapp-pulse {

    0% {
        transform: scale(1);

        box-shadow:
            0 0 0 0 rgba(243, 86, 167, 0.35),
            0 6px 18px rgba(243, 86, 167, 0.24);
    }

    50% {
        transform: scale(1.06);

        box-shadow:
            0 0 0 10px rgba(243, 86, 167, 0),
            0 8px 22px rgba(243, 86, 167, 0.30);
    }

    100% {
        transform: scale(1);

        box-shadow:
            0 0 0 0 rgba(243, 86, 167, 0),
            0 6px 18px rgba(243, 86, 167, 0.24);
    }

}


/* تحسين الجوال */
@media (max-width: 767px) {

    a.sc-q8c6tt-0 {
        animation-duration: 2s;
    }

}


/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {

    a.sc-q8c6tt-0 {
        animation: none;
    }

}

/* ===== نهاية تنسيق زر الواتساب العائم ===== */