/* Add custom CSS styles below */
:root {
    /* الألوان الجديدة: البنفسجي والأرجواني */
    --main-color: #9434e2ff;      /* Blue Violet 2 - بنفسجي قوي للمحتوى والنصوص */
    --second-color: #ae5de4ff;    /* Amethyst - أرجواني للمكونات البارزة مثل القوائم */
    --three-color: #ac539bff;     /* Fandango - أرجواني داكن / وردي للأزرار الثانوية */
    --hover-color: #f0ebf4ff;     /* Magnolia - لون فاتح للخلفية والتأثيرات الخفيفة */
    --color-primary: #9434e2ff;
    --color-primary-dark: #9630ddff; /* Blue Violet */
    --color-primary-light: #f1e6fbff; /* Pale Purple */
    --color-primary-reverse: #f0ebf4; /* Magnolia */

}

/* --- الجسم والخلفية والنصوص الأساسية --- */
body {
    color: var(--main-color);
    background-color: var(--hover-color) !important;
}

h1, h2 {
    color: var(--main-color) !important;
}
.s-slider-block__title h2 {
    color: var(--main-color);
}

/* --- القائمة الرئيسية والقوائم الفرعية (Navigation) - تم التعديل هنا --- */
.main-nav-container,
.sub-menu.w-56 ul {
    /* تم استبدال لون الخلفية الثابت بتدرج لوني مطابق للفوتر */
    background: linear-gradient(90deg, var(--second-color) 0%, var(--main-color) 100%);
    color: white; /* لجعل النصوص بيضاء لكي تظهر على التدرج الداكن */
}
  
.main-menu li>a {

    color: white;
}
.main-menu li>a:hover {
    color: var(--hover-color); /* Magnolia */
    background: var(--color-primary-dark); /* Blue Violet */
}

.s-button-btn {
    background-color: var(--three-color); /* Fandango */
    color: white !important;
    border: 1px solid var(--main-color);
}
.s-button-btn::before,
.s-button-btn::after {
    /* تدرج بنفسجي-أرجواني */
    background: linear-gradient(-45deg, var(--main-color), var(--second-color));
}

/* --- بطاقات المنتجات (Product Cards) --- */
.s-product-card-content,
.s-product-card-content a {
    color: var(--main-color);
}
.s-product-card-vertical:hover {
    /* ظل بنفسجي */
    box-shadow: var(--main-color) -1px 2px 16px;
    border-radius: 37% 37% 10% 10%;
}
.s-product-card-vertical .s-product-card-wishlist-btn button {
    background-color: var(--second-color) !important; /* Amethyst */
    color: white !important;
}

/* --- التذييل (Footer) --- */
.store-footer__inner {
    /* تدرج من الارجواني الفاتح الى البنفسجي */
    background: linear-gradient(90deg, var(--second-color) 0%, var(--main-color) 100%);
    color: white;
}
.store-footer a:hover .s-contacts-icon {
    background: white;
    color: var(--main-color);
}