/*
   ألنجوج — المرحلة الأولى: CSS REFACTOR + SHARED VISUAL SYSTEM
   المرجع الوحيد: ملف CSS المرفق والمعتمد لهذه المرحلة.

   A - SETTINGS / BRANDING: الألوان، نسب الصور، الاستدارة، الظلال والحدود البصرية.
   B - SHARED: خلفية المتجر، المنتجات، المميزات، العناوين، الآراء، تصميم التصنيفات،
       Hero، تصميم البنرات، حركة الإعلان، مبلغ السلة والعرض الأفقي المشترك أصلًا.
   C - TABLET + DESKTOP: موضع الاختلافات من 768px؛ لا توجد قيم جديدة في هذه المرحلة.
   D - MOBILE: شبكات الجوال وأحجام الخط المقيدة به، والهيدر وأيقوناته والبحث والحساب
       والعملة والسلة والتثبيت والزجاج والقائمة، ومسافة الإعلان والقص الحساس.

   قواعد الصيانة:
   - المتغيرات أدناه تساوي القيم السابقة؛ لم تُخترع ألوان أو نسب أو مقاسات جديدة.
   - نُقلت الخصائص البصرية المعتمدة، ولم تُترك نسخ منها داخل Mobile.
   - بقيت جميع أسماء المحددات وbody.index و!important ونطاقات الهيدر الحساسة.
   - لم يُعدّل JavaScript، ولم يُفعّل هيدر الجوال أو قائمته على الكمبيوتر.
   - تبقى --alanjoj-* متغيرات تشغيل يكتبها JavaScript؛ لا تغيّر أسماءها.
   - استبدل CSS الحالي كاملًا بهذا الملف، ولا تضفه أسفل نسخة سابقة.
*/

/* ==========================================================
   A - SETTINGS / BRANDING
   إعدادات الهوية بالقيم المعتمدة الحالية فقط
   ========================================================== */

:root {
    /* ألوان الهوية الحالية */
    --theme-background: #c3d8e7;
    --theme-primary: #17344F;
    --theme-accent: #D6B35A;
    --theme-text-light: #EAF4FF;
  --theme-sale-price: #d84a4a;
    --theme-testimonials-bg: #28597A;
    --theme-icon-base: #ffffff;
    --theme-header-glass-bg: rgba(23, 52, 79, 0.58);
    --theme-search-bg: rgba(245, 250, 253, .94);

    /* نسب الصور الحالية؛ لا توجد نسبة جديدة لصور المنتجات */
    --theme-category-ratio: 1 / 1;
    --theme-hero-ratio: 1 / 1;
    --theme-banner-ratio: 3 / 2;

    /* الاستدارة بحسب المكوّن؛ القيم ليست بدائل متكافئة */
    --theme-radius-flat: 0;
    --theme-category-image-radius: 12px;
    --theme-category-section-radius: 14px;
    --theme-banner-grid-radius: 0px;
    --theme-search-radius: 16px;

    /* الظلال والحدود البصرية الحالية؛ لا تغيّر التثبيت أو ترتيب الطبقات */
    --theme-shadow-none: none;
    --theme-search-shadow: 0 8px 24px rgba(23,55,78,.15);
    --theme-header-glass-shadow: 0 5px 22px rgba(9, 26, 42, 0.16);
    --theme-icon-filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
    --theme-search-border: 1px solid rgba(255,255,255,.55);
    --theme-header-glass-border: 1px solid rgba(255, 255, 255, 0.13);
}

/* ==========================================================
   B - SHARED
   التصميم المشترك لجميع مقاسات الشاشة مع حفظ نطاق الصفحات
   ========================================================== */

/* ==================================================
   01 - خلفية المتجر
   ================================================== */

body,
#app,
.app-inner,
main#main-content {
    background: var(--theme-background) !important;
}

/* ==================================================
   02 - بطاقات المنتجات: الشفافية والإطارات والظلال
   ================================================== */

.s-product-card-entry,
.product-entry,
.s-product-card-vertical,
.s-product-card-fit-height,
.s-products-slider-card,
.s-product-card,
.product-block {
    background: transparent !important;
    border: none !important;
    box-shadow: var(--theme-shadow-none) !important;
    border-radius: var(--theme-radius-flat) !important;
    padding: 0 !important;
}

.s-product-card-content,
.s-product-card-image,
.s-product-card-image-wrap,
.s-product-card-info {
    background: transparent !important;
    border: none !important;
    box-shadow: var(--theme-shadow-none) !important;
}

/* ==================================================
   03 - صور المنتجات وإصلاح صور الرئيسية
   ================================================== */

/* أُبقي body.index وارتفاع الصورة 100% في إصلاح الرئيسية كما هما؛ لم يُعمم هذا الإصلاح على الصفحات الداخلية. */

.s-product-card-image img,
.product-entry img,
.s-product-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: var(--theme-radius-flat) !important;
    background: transparent !important;
}

body.index .s-product-card-fit-height .s-product-card-image {
    overflow: hidden !important;
}

body.index .s-product-card-fit-height .s-product-card-image > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

body.index .s-product-card-fit-height .s-product-card-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ==================================================
   04 - معرض صفحة المنتج والمنتجات المقترحة
   ================================================== */

salla-slider.details-slider,
salla-slider.details-slider .swiper,
salla-slider.details-slider .swiper-wrapper,
salla-slider.details-slider .swiper-slide,
salla-slider.details-slider .swiper-slide a,
salla-slider.details-slider .magnify-wrapper {
    border: none !important;
    outline: none !important;
    box-shadow: var(--theme-shadow-none) !important;
    background: transparent !important;
    background-color: transparent !important;
}

salla-slider.details-slider img {
    border: none !important;
    outline: none !important;
    box-shadow: var(--theme-shadow-none) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ==================================================
   جميع صور المنتجات — نسبة مربعة 1:1
================================================== */

/* حاوية الصورة في جميع بطاقات المنتجات */
.s-product-card-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* رابط صورة بطاقة المنتج */
.s-product-card-image > a {
    display: flex !important;
    align-items: center !important;
 pencils
    justify-content: center !important;

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

/* الصورة داخل جميع بط Herselfاقات المنتجات */
.s-product-card-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

/* ==================================================
   معرض الصورة الرئيسية داخل صفحة المنتج — 1:1
================================================== */

a[data-fslightbox^="product_"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* الصورة الأصلية داخل معرض المنتج */
a[data-fslightbox^="product_"] img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

/* رابط الصورة يملأ المربع كاملًا */
body:not(.index)
salla-products-slider .s-product-card-image > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* إظهار الصورة كاملة من دون قص */
body:not(.index)
salla-products-slider .s-product-card-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

/* ==================================================
   05 - مميزات المتجر
   ================================================== */

/* ألوان مشتركة بين المقاسات، مع إبقاء نطاق الصفحات الأصلي لكل محدد. */

body.index section[data-testid="store-home-features"] .s-block--features__item {
    background: var(--theme-primary) !important;
}

body.index section[data-testid="store-home-features"] .s-block--features__item h2,
body.index section[data-testid="store-home-features"] .s-block--features__item p {
    color: var(--theme-text-light) !important;
}

section[data-testid="store-home-features"] .s-block--features__item :is(h1,h2,h3,h4,p,span) {
    color: var(--theme-text-light) !important;
}

/* ==================================================
   06 - ألوان أسماء المنتجات وعناوين المجموعات والتصنيفات
   ================================================== */

/* ألوان فقط؛ لا توجد أحجام خط جديدة لأسماء المنتجات أو عناوين المجموعات. */

body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border,
body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border span,
.s-product-card-content-title,
.s-product-card-content-title a,
.s-slider-block__title-right h2 {
    color: var(--theme-primary) !important;
}

/* ==================================================
   07 - آراء العملاء: البطاقات والنصوص
   ================================================== */

/* تبقى المحددات العامة والمقيدة بأولويتها الحالية؛ لم تتغير إعدادات السلايدر أو عدد العناصر. */

section[data-testid="store-home-testimonials"] .s-reviews-testimonial {
    background: var(--theme-testimonials-bg) !important;
}

section[data-testid="store-home-testimonials"] .s-reviews-testimonial :is(h1,h2,h3,h4,p,span) {
    color: var(--theme-text-light) !important;
}

.s-reviews-testimonial {
    background: var(--theme-testimonials-bg) !important;
}

.s-reviews-testimonial__text,
.s-reviews-testimonial__text p,
.s-reviews-testimonial__info,
.s-reviews-testimonial__info h2 {
    color: var(--theme-text-light) !important;
}

/* ==================================================
   08 - التصنيفات: تصميم البطاقة والصورة والعنوان
   ================================================== */

/* تصميم البطاقة مشترك. الأعمدة والفواصل وأحجام الخط المقيدة سابقًا بالجوال في القسم D. لا تدمج radius وoverflow بين المحددات المختلفة. */

body.index .square-photos-grid .banner-entry.square-photos {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    text-align: center !important;
    border-radius: var(--theme-radius-flat) !important;
}

body.index .square-photos-grid .banner-entry.square-photos .lazy__bg {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--theme-category-ratio) !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: var(--theme-category-image-radius) !important;
    order: 1 !important;
}

body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 5px 2px 0 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
    order: 2 !important;
}

body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border span {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    line-height: inherit !important;
}

body.index .square-photos-grid .banner-entry.square-photos::after {
    display: none !important;
    content: none !important;
}

body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border::before,
body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border::after {
    display: none !important;
    content: none !important;
}

body.index section[data-testid="store-home-square-photos"] .banner-entry {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: var(--theme-shadow-none) !important;
    border-radius: var(--theme-category-section-radius) !important;
    overflow: hidden !important;
}

/* ==================================================
   09 - الواجهة الرئيسية Hero: التصميم البصري فقط
   ================================================== */

/* النسبة والعرض والخلفية وإزالة الزخارف مشتركة. لم تُنقل قواعد Overlay الهيدر أو Sticky/Glass أو موضع الإعلان. */

section[data-testid="store-home-parallax-banner"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

section[data-testid="store-home-parallax-banner"] .full-banner-entry {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: var(--theme-hero-ratio) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: var(--theme-radius-flat) !important;
}

body.index section[data-testid="store-home-parallax-banner"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.index section[data-testid="store-home-parallax-banner"] .full-banner-entry {
    width: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: var(--theme-radius-flat) !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body.index section[data-testid="store-home-parallax-banner"] .full-banner-entry::before,
body.index section[data-testid="store-home-parallax-banner"] .full-banner-entry::after {
    content: none !important;
    display: none !important;
}

/* ==================================================
   10 - البنرات الشبكية: شكل البطاقة والحاوية
   ================================================== */

/* النسبة 3 / 2 والشفافية وشكل البطاقة مشتركة؛ ارتفاع auto وإلغاء حدود الارتفاع يحافظان على النسبة. أعمدة الشبكة وفواصلها وحاويتها الخارجية وامتداد الخامس في القسم D. */

body.index section[data-testid="store-home-square-banners"] > .grid {
    background: transparent !important;
    border-radius: var(--theme-banner-grid-radius) !important;
    overflow: hidden !important;
}

body.index section[data-testid="store-home-square-banners"] .banner-entry {
    width: 100% !important;
    aspect-ratio: var(--theme-banner-ratio) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: var(--theme-radius-flat) !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: var(--theme-shadow-none) !important;
}

/* ==================================================
   11 - شريط الإعلان: المظهر والمسار والحركة
   ================================================== */

/* نُقلت الحركة كاملة لجميع المقاسات. أسماء --alanjoj-* وقيمها الاحتياطية باقية؛ يكتب JavaScript قيم التشغيل عليها. لا تشمل هذه الوحدة نقل الإعلان أسفل Hero. */

.s-advertisement {
    overflow: hidden !important;
}

.s-advertisement-content {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

.s-advertisement-content-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.s-advertisement-content-main a.alanjoj-marquee-link {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.alanjoj-marquee-viewport {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    direction: ltr !important;
}

.alanjoj-marquee-track {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    white-space: nowrap !important;
    gap: var(--alanjoj-gap, 30px) !important;
    will-change: transform !important;
    animation: alanjoj-marquee-move var(--alanjoj-duration, 6000ms) linear infinite !important;
}

.alanjoj-marquee-item {
    display: inline-block !important;
    white-space: nowrap !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    padding-inline: 15px !important;
    flex: 0 0 auto !important;
}

@keyframes alanjoj-marquee-move {
    from {
        transform: translate3d(calc(-1 * var(--alanjoj-shift, 300px)), 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* ==================================================
   12 - السلة: إخفاء المبلغ في الهيدر فقط
   ================================================== */

/* قاعدة مشتركة موجودة أصلًا؛ أُبقيت كما هي، دون نقل بقية السلة إلى Shared. */

header[data-testid="store-header"] salla-cart-summary .s-cart-summary-content {
    display: none !important;
}

/* ==================================================
   13 - العرض الأفقي: القواعد العامة الموجودة أصلًا
   ================================================== */

/* لم تُنقل إلى هنا قاعدة القص المشتركة بين الهيدر والـHero؛ بقيت في الجوال. */

html,
body,
#app,
.app-inner {
    max-width: 100% !important;
    overflow-x: clip !important;
}

/* /* ==================================================
   1) قائمة البحث
   الخلفية الرئيسية داكنة
   مربع البحث أفتح مثل آراء العملاء
   ================================================== */

.s-search-modal .s-modal-body,
.s-search-modal .s-search-panel {
    background: #17344F !important;
    color: #EAF4FF !important;
}

.s-search-modal input,
.s-search-modal .s-search-input {
    background: #28597A !important;
    color: #EAF4FF !important;
    border-color: #17344F !important;
}

.s-search-modal input::placeholder {
    color: rgba(234, 244, 255, 0.72) !important;
}


/* ==================================================
   2) قائمة العملة
   الخلفية الخارجية داكنة
   مربع الاختيار الداخلي أفتح
   ================================================== */

salla-modal:has(.s-localization-modal-inner) .s-modal-body,
salla-modal:has(.s-localization-modal-inner) .s-modal-header,
.s-localization-modal-inner {
    background: #17344F !important;
    color: #EAF4FF !important;
}

.s-localization-modal-title {
    color: #EAF4FF !important;
}

.s-localization-modal-section,
.s-localization-modal-section-inner,
.s-localization-modal-select {
    background: #28597A !important;
    color: #EAF4FF !important;
    border-color: #17344F !important;
}

.s-localization-modal-select option {
    background: #28597A !important;
    color: #EAF4FF !important;
}

salla-modal:has(.s-localization-modal-inner) .s-modal-close {
    color: #EAF4FF !important;
}

/* ==================================================
   قائمة الحساب — جميع الصفحات والشاشات
================================================== */

/* الصندوق الرئيسي للقائمة */
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown {
    background: var(--theme-primary, #17344f) !important;
    background-color: var(--theme-primary, #17344f) !important;
    color: var(--theme-text-light, #eaf4ff) !important;

    border: 1px solid rgba(214, 179, 90, 0.22) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28) !important;
}

/* رأس القائمة والقائمة الداخلية والعناصر */
salla-user-menu[data-testid="store-header-user-menu"]
:is(
    .s-user-menu-dropdown-header,
    .s-user-menu-dropdown-list,
    .s-user-menu-dropdown-item
) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--theme-text-light, #eaf4ff) !important;
}

/* جميع النصوص داخل القائمة */
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown :is(
    a,
    button,
    div,
    span,
    p,
    strong
) {
    color: var(--theme-text-light, #eaf4ff) !important;
}

/* أيقونات عناصر الحساب */
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown-item:not(.s-user-menu-dropdown-item-logout)
:is(i, svg) {
    color: var(--theme-accent, #d6b35a) !important;
}

/* الفواصل بين الخيارات */
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown-item {
    border-color: rgba(214, 179, 90, 0.18) !important;
}

/* لون العنصر عند المرور عليه */
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown-item:hover {
    background: rgba(40, 89, 122, 0.75) !important;
    background-color: rgba(40, 89, 122, 0.75) !important;
}

/* زر إغلاق القائمة */
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown-header-close,
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown-header-close :is(i, svg) {
    color: #ff4d4f !important;
}

/* تسجيل الخروج يبقى أحمر */
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown-item-logout,
salla-user-menu[data-testid="store-header-user-menu"]
.s-user-menu-dropdown-item-logout :is(a, button, span, i, svg) {
    color: #ff4d4f !important;
}

/* ==================================================
   3) قائمة ترتيب المنتجات في صفحات التصنيفات
   مثل: مقترح لك - الأكثر مبيعاً - الأعلى تقييماً
   ================================================== */

#product-filter {
    background: #28597A !important;
    color: #EAF4FF !important;
    border-color: #17344F !important;
}

#product-filter option {
    background: #28597A !important;
    color: #EAF4FF !important;
}

label[for="product-filter"] {
    color: #EAF4FF !important;
}


/* ==================================================
   4) قائمة الكمية وخيارات المنتج
   الصندوق الرئيسي داكن
   الاختيار الداخلي أفتح
   ================================================== */

salla-product-options[data-testid="store-product-options"],
.s-product-options-wrapper,
.s-product-options-option-container,
.s-product-options-option {
    background: #17344F !important;
    color: #EAF4FF !important;
}

.s-product-options-option-label,
.s-product-options-option-label b,
.s-product-options-option-label small {
    color: #EAF4FF !important;
}

.s-product-options-option-content {
    background: #28597A !important;
    color: #EAF4FF !important;
    border-color: #17344F !important;
}

.s-product-options-option-content select,
.s-product-options-option-content input {
    background: #28597A !important;
    color: #EAF4FF !important;
    border-color: #17344F !important;
}

.s-product-options-option-content option {
    background: #28597A !important;
    color: #EAF4FF !important;
}


/* ==================================================
   5) الملاحظات والمرفقات
   الصندوق الرئيسي داكن
   المربعات الداخلية أفتح مثل آراء العملاء
   ================================================== */

section[data-testid^="store-cart-item-"],
section:has([data-testid="store-product-add-note"]),
section:has([data-testid="store-product-attach-file"]) {
    background: #17344F !important;
    color: #EAF4FF !important;
}

section:has([data-testid="store-product-add-note"]) .form-label,
section:has([data-testid="store-product-add-note"]) .form-label b,
section:has([data-testid="store-product-attach-file"]) .form-label,
section:has([data-testid="store-product-attach-file"]) .form-label b {
    color: #EAF4FF !important;
}

section:has([data-testid="store-product-add-note"]) .btn-tab,
section:has([data-testid="store-product-attach-file"]) .btn-tab {
    background: #28597A !important;
    color: #EAF4FF !important;
    border-color: #17344F !important;
}

section:has([data-testid="store-product-add-note"]) .btn-tab span,
section:has([data-testid="store-product-attach-file"]) .btn-tab span,
section:has([data-testid="store-product-add-note"]) .btn-tab i,
section:has([data-testid="store-product-attach-file"]) .btn-tab i {
    color: #EAF4FF !important;
}

section:has([data-testid="store-product-add-note"]) .collapse-content,
section:has([data-testid="store-product-attach-file"]) .collapse-content,
section:has([data-testid="store-product-add-note"]) .collapse-content > div,
section:has([data-testid="store-product-attach-file"]) .collapse-content > div {
    background: #28597A !important;
    color: #EAF4FF !important;
    border-color: #17344F !important;
}

/* ==================================================
   صفحة المنتج — توحيد ألوان الصناديق
   جميع الشاشات
================================================== */

/* صندوق السعر */
form.product-form
> section.flex.bg-white.p-5:not(.sticky-product-bar):has(> .center-between) {
    background: var(--theme-primary, #17344f) !important;
    background-color: var(--theme-primary, #17344f) !important;
    color: var(--theme-text-light, #eaf4ff) !important;
    border-color: rgba(214, 179, 90, 0.20) !important;
}

/* منع وجود طبقة بيضاء داخل صندوق السعر */
form.product-form
> section.flex.bg-white.p-5:not(.sticky-product-bar):has(> .center-between)
> div {
    background: transparent !important;
    background-color: transparent !important;
}

/* تفتيح النصوص الداكنة داخل صندوق السعر فقط */
form.product-form
> section.flex.bg-white.p-5:not(.sticky-product-bar):has(> .center-between)
:is(
    [class*="text-gray"],
    [class*="text-black"],
    [class*="text-dark"]
) {
    color: var(--theme-text-light, #eaf4ff) !important;
}

/* ==================================================
   تقييمات المنتج — نفس لون آراء العملاء
================================================== */

salla-comments[data-testid="store-product-comments"]
.s-comments-container {
    background: var(--theme-testimonials-bg, #28597a) !important;
    background-color: var(--theme-testimonials-bg, #28597a) !important;
    color: var(--theme-text-light, #eaf4ff) !important;

    border-color: rgba(214, 179, 90, 0.20) !important;
}

/* النصوص الداكنة والرمادية داخل التقييمات */
salla-comments[data-testid="store-product-comments"]
.s-comments-container :is(
    [class*="text-gray"],
    [class*="text-black"],
    [class*="text-dark"]
) {
    color: var(--theme-text-light, #eaf4ff) !important;
}

/* خانة كتابة التقييم */
salla-comments[data-testid="store-product-comments"]
.s-comments-container textarea {
    background: var(--theme-primary, #17344f) !important;
    background-color: var(--theme-primary, #17344f) !important;
    color: var(--theme-text-light, #eaf4ff) !important;
    border-color: rgba(234, 244, 255, 0.35) !important;
}

/* النص الإرشادي داخل خانة التقييم */
salla-comments[data-testid="store-product-comments"]
.s-comments-container textarea::placeholder {
    color: rgba(234, 244, 255, 0.70) !important;
}

/* ==================================================
   شريط الكمية والإضافة والشراء
   نفس درجة لون آراء العملاء
================================================== */

form.product-form > section.sticky-product-bar {
    background: var(--theme-testimonials-bg, #28597a) !important;
    background-color: var(--theme-testimonials-bg, #28597a) !important;
    color: var(--theme-text-light, #eaf4ff) !important;

    border-color: rgba(214, 179, 90, 0.22) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16) !important;
}

/* مربع رقم الكمية — مطابق لصفحة السلة */
form.product-form
> section.sticky-product-bar
.s-quantity-input-input {
    background-color: var(--theme-testimonials-bg, #28597a) !important;
    color: var(--theme-text-light, #eaf4ff) !important;
    border-color: rgba(234, 244, 255, 0.55) !important;
}

/* زرا الزيادة والنقص */
form.product-form
> section.sticky-product-bar
salla-quantity-input button {
    background-color: var(--theme-primary, #17344f) !important;
    color: var(--theme-text-light, #eaf4ff) !important;
    border-color: rgba(234, 244, 255, 0.35) !important;
}

/* ==================================================
   سلة المشتريات - ألوان محصورة داخل بطاقات السلة فقط
   - تفتيح اسم المنتج على الخلفية الداكنة
   - تلوين مربع رقم الكمية بالأزرق المتوسط
   - لا يغيّر أي زر ذهبي أو أحمر
   - لا يؤثر على صفحة المنتج
   ================================================== */

/* اسم المنتج داخل سلة المشتريات فقط */
section[data-testid^="store-cart-item-"] h1.text-gray-900,
section[data-testid^="store-cart-item-"] h1.text-gray-900 a {
    color: #EAF4FF !important;
}


/* مربع الرقم بين + و - داخل سلة المشتريات فقط */
section[data-testid^="store-cart-item-"]
.s-quantity-input-input {
    background-color: #28597A !important;
    color: #EAF4FF !important;

    /* خلفية غامقة = حد فاتح */
    border-color: rgba(234, 244, 255, 0.55) !important;
}

/* ==================================================
   سلة المشتريات - ألوان محصورة داخل بطاقات السلة فقط
   - تفتيح اسم المنتج على الخلفية الداكنة
   - تلوين مربع رقم الكمية بالأزرق المتوسط
   - لا يغيّر أي زر ذهبي أو أحمر
   - لا يؤثر على صفحة المنتج
   ================================================== */

/* اسم المنتج داخل سلة المشتريات فقط */
section[data-testid^="store-cart-item-"] h1.text-gray-900,
section[data-testid^="store-cart-item-"] h1.text-gray-900 a {
    color: #EAF4FF !important;
}

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

/* خلفية مربع المنتجات المتعلقة */
salla-basket-gap.s-basket-gap-entry {
    background-color: #17344F !important;
    color: #EAF4FF !important;
}


/* عنوان: منتجات متعلقة */
salla-basket-gap.s-basket-gap-entry .s-basket-gap-title {
    color: #EAF4FF !important;
}


/* أسماء المنتجات داخل هذا المربع فقط */
salla-basket-gap.s-basket-gap-entry .s-basket-gap-card-name,
salla-basket-gap.s-basket-gap-entry .s-basket-gap-card-name a {
    color: #EAF4FF !important;
    -webkit-text-fill-color: #EAF4FF !important;
}


/* السعر القديم الرمادي المشطوب فقط */
salla-basket-gap.s-basket-gap-entry .s-basket-gap-card-sale-price del,
salla-basket-gap.s-basket-gap-entry .s-basket-gap-card-sale-price del i {
    color: rgba(234, 244, 255, 0.70) !important;
    -webkit-text-fill-color: rgba(234, 244, 255, 0.70) !important;
}

/* ==================================================
   سلة المشتريات - مربع الشحن المجاني + مربع الكوبون
   - الخلفية: الأزرق الغامق المعتمد
   - النصوص: فاتحة
   - الحقول على الخلفية الغامقة: أزرق متوسط وحد فاتح
   - لا يغيّر أي عنصر ذهبي أو أحمر
   ================================================== */


/* =========================
   1 - مربع الشحن المجاني
   ========================= */

#free-shipping {
    background-color: #17344F !important;
    color: #EAF4FF !important;
}

/* عنوان شحن مجاني */
#free-shipping .shipping-item.font-bold {
    color: #EAF4FF !important;
}

/* النص الرمادي تحت العنوان */
#free-shipping .shipping-item.text-gray-500,
#free-shipping #free-shipping-msg {
    color: rgba(234, 244, 255, 0.72) !important;
}

/*
   متعمد لا نغيّر:
   - الدائرة الذهبية
   - أيقونة الشحن
   - شريط التقدم
*/


/* =========================
   2 - مربع الكوبون
   ========================= */

/* الخلفية الخارجية لمربع الكوبون */
div:has(> salla-cart-coupons[data-testid="store-cart-coupons"]) {
    background-color: #17344F !important;
    color: #EAF4FF !important;
}

/* عنوان: لديك كوبون خصم؟ */
salla-cart-coupons[data-testid="store-cart-coupons"]
.s-cart-coupons-coupon-label {
    color: #EAF4FF !important;
}

/* خانة إدخال رمز الكوبون */
salla-cart-coupons[data-testid="store-cart-coupons"]
#coupon-input {
    background-color: #28597A !important;
    color: #EAF4FF !important;

    /* خلفية غامقة = حد فاتح */
    border-color: rgba(234, 244, 255, 0.55) !important;
}

/* الكلام داخل خانة الإدخال قبل الكتابة */
salla-cart-coupons[data-testid="store-cart-coupons"]
#coupon-input::placeholder {
    color: rgba(234, 244, 255, 0.70) !important;
}

/*
   زر "تطبيق" متعمد ما لمسناه
   حتى يبقى ذهبي مثل ما هو
*/

/* ==================================================
   ملخص السلة السفلي
   - توحيد الجزأين باللون الأزرق الغامق
   - جميع نصوص الملخص بلون فاتح موحد
   - الحدود فاتحة لأن الخلفية غامقة
   - لا يغيّر زر إتمام الطلب الذهبي
   - لا يغيّر أي عنصر أحمر أو ذهبي
   ================================================== */


/* الحاوية العامة */
salla-cart-summary-card {
    background-color: #28597A !important;
}


/* الجزء العلوي: الإجمالي + العدد + المبلغ */
salla-cart-summary-card .s-cart-summary-card-bar {
    background-color: #28597A !important;
   border-color: #28597A !important;
}


/* الجزء السفلي الذي يحتوي زر إتمام الطلب */
salla-cart-summary-card .s-cart-summary-card-action {
    background-color: #28597A !important;
    border-color: #28597A !important;
}


/* جميع نصوص الملخص فقط - لون فاتح موحد */
salla-cart-summary-card .s-cart-summary-card-bar-label-text,
salla-cart-summary-card .s-cart-summary-card-bar-count,
salla-cart-summary-card .s-cart-summary-card-bar-total,
salla-cart-summary-card .s-cart-summary-card-chevron,
salla-cart-summary-card .s-cart-summary-card-chevron-icon {
    color: #EAF4FF !important;
    -webkit-text-fill-color: #EAF4FF !important;
}


/* خط الفصل إن وُجد */
salla-cart-summary-card .s-cart-summary-card-action {
   border-top: 0 !important;
}

/* مربع الرقم بين + و - داخل سلة المشتريات فقط */
section[data-testid^="store-cart-item-"]
.s-quantity-input-input {
    background-color: #28597A !important;
    color: #EAF4FF !important;
}

/* ==================================================
   تعديل مظهر الهيدر للصفحات الداخلية فقط

   - لا يتدخل في حركة أو تموضع الهيدر
   - خلفية زجاجية ضبابية
   - تفريغ خلفيات الأيقونات
   - لا يغيّر ألوان الأيقونات الذهبية أو الحمراء
================================================== */

/* خلفية الهيدر الخارجية */
body:not(.index) #mainnav {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* الخلفية الزجاجية للحاوية الداخلية */
body:not(.index) #mainnav .inner {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* منع الحاوية الداخلية من تغطية الزجاج بلون آخر */
body:not(.index) #mainnav .inner > .container {
    background: transparent !important;
}

/* تفريغ خلفيات أزرار وأيقونات الهيدر */
body:not(.index) #mainnav .alanjoj-search-toggle,
body:not(.index) #mainnav .s-localization-modal-trigger-btn,
body:not(.index) #mainnav .s-user-menu-trigger,
body:not(.index) #mainnav salla-cart-summary,
body:not(.index) #mainnav salla-cart-summary .s-cart-summary-wrapper,
body:not(.index) #mainnav [data-testid="store-header-mobile-toggle"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    border-color: transparent !important;
}

/* حصر الزجاج داخل الهيدر وإبقاؤه فوق محتوى الصفحة */
body:not(.index).alanjoj-home-mobile-ready
#mainnav:not(.fixed-header) {
    position: relative !important;
    isolation: auto !important;
    overflow: visible !important;
    z-index: 100 !important;
}

/* إبقاء الهيدر وقائمة الحساب فوق المنتجات بعد التثبيت */
body:not(.index).alanjoj-home-mobile-ready
#mainnav.fixed-header {
    isolation: auto !important;
    overflow: visible !important;
    z-index: 100 !important;
}

/* إظهار الزجاج في الصفحات الداخلية */
body:not(.index).alanjoj-home-mobile-ready
#mainnav::before {
    opacity: 1 !important;
}

/* إخفاء الشريط العلوي الأسود في جميع الشاشات */
body.alanjoj-home-mobile-ready
header[data-testid="store-header"] .top-navbar {
    display: none !important;
}

/* إزالة الفراغ الداخلي أسفل شريط الإعلان */
body:not(.index) salla-advertisement {
    height: fit-content !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body:not(.index) salla-advertisement .s-advertisement {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==================================================
   ألوان عناوين وأسعار البحث والسلة وصفحة المنتج
   ================================================== */

/* عنوان المنتج داخل نتائج البحث فقط */
.s-search-modal
.s-search-product-card-content-title,
.s-search-modal
.s-search-product-card-content-title a {
    color: var(--theme-text-light, #eaf4ff) !important;
}

/* سعر المنتج بعد الخصم داخل نتائج البحث */
.s-search-modal
.s-search-product-card-sale-price,
.s-search-modal
.s-search-product-card-sale-price * {
    color: var(--theme-sale-price, #d84a4a) !important;
}

/* السعر القديم المشطوب داخل نتائج البحث */
.s-search-modal
.s-search-product-card-regular-price,
.s-search-modal
.s-search-product-card-regular-price  {
    color: var(--theme-text-light, #eaf4ff) !important;
    opacity: 0.82 !important;
}

/* ==================================================
   أسعار المنتجات داخل صفحة السلة
================================================== */

/* السعر الحالي بعد الخصم داخل البحث */
.s-search-modal
.s-search-product-card-sale-price
.s-search-product-card-price-value,
.s-search-modal
.s-search-product-card-sale-price
.s-search-product-card-price-value * {
    color: var(--theme-sale-price, #d84a4a) !important;
}

/* السعر السابق المشطوب داخل البحث */
.s-search-modal
.s-search-product-card-sale-price > span,
.s-search-modal
.s-search-product-card-sale-price > span * {
    color: var(--theme-text-light, #eaf4ff) !important;
    opacity: 0.82 !important;
}

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

form.product-form
> section.flex.bg-white.p-5:not(.sticky-product-bar):has(> .center-between)
.form-label,
form.product-form
> section.flex.bg-white.p-5:not(.sticky-product-bar):has(> .center-between)
.form-label b {
    color: var(--theme-text-light, #eaf4ff) !important;
}

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

/* الخلفية الكحلية شديدة القتامة */
footer[data-testid="store-footer"],
footer[data-testid="store-footer"] .store-footer__inner,
footer[data-testid="store-footer"] .store-footer__bottom,
footer[data-testid="store-footer"] .store-footer__copyright {
    background: #071521 !important;
    background-color: #071521 !important;
    color: var(--theme-accent, #d6b35a) !important;
}

/* منع الطبقات الداخلية من إظهار لون مختلف */
footer[data-testid="store-footer"] > div,
footer[data-testid="store-footer"] .container,
footer[data-testid="store-footer"] salla-menu,
footer[data-testid="store-footer"] salla-contacts,
footer[data-testid="store-footer"] salla-social {
    background: transparent !important;
    background-color: transparent !important;
}

/* جميع عناوين ونصوص وروابط الفوتر */
footer[data-testid="store-footer"] :is(
    h1,
    h2,
    h3,
    h4,
    p,
    a,
    span,
    strong,
    li
) {
    color: var(--theme-accent, #d6b35a) !important;
}

/* أيقونات التواصل والاتصال */
footer[data-testid="store-footer"]
:is(
    salla-social,
    salla-contacts
) :is(i, svg) {
    color: var(--theme-accent, #d6b35a) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* الفواصل والحدود */
footer[data-testid="store-footer"] :is(
    [class*="border"],
    .store-footer__bottom,
    .store-footer__copyright
) {
    border-color: rgba(214, 179, 90, 0.22) !important;
}

/* ==========================================================
   C - TABLET + DESKTOP
   768px فما فوق — اختلافات التخطيط فقط
   ========================================================== */

@media (min-width: 768px) {

    /* جعل خلفيات الهيدر شفافة على الكمبيوتر */
    body.alanjoj-home-mobile-ready
    header[data-testid="store-header"] {
        width: 100% !important;
        background: transparent !important;
        box-shadow: var(--theme-shadow-none) !important;
        border: none !important;
    }

  

    body.alanjoj-home-mobile-ready #mainnav,
    body.alanjoj-home-mobile-ready #mainnav .inner,
    body.alanjoj-home-mobile-ready #mainnav .container {
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    /* وضع عناصر الهيدر في صف واحد */
    body.alanjoj-home-mobile-ready
    #mainnav .container >
    .flex.items-stretch.justify-between.relative {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    body.alanjoj-home-mobile-ready
    #mainnav .alanjoj-header-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 !important;
    }

    /* حصر طبقة الزجاج داخل هيدر الرئيسية قبل التثبيت */
    body.index.alanjoj-home-mobile-ready
    #mainnav:not(.fixed-header) {
        position: relative !important;
        overflow: visible !important;
    }

  

  /* ==================================================
   هيدر الرئيسية فوق الـHero على الكمبيوتر
================================================== */

/* يصبح header مرجعًا لموضع mainnav */
body.index.alanjoj-home-mobile-ready
header[data-testid="store-header"] {
    position: relative !important;
    z-index: 100 !important;
    background: transparent !important;
}

/* وضع mainnav فوق واجهة الرئيسية */
body.index.alanjoj-home-mobile-ready
#mainnav:not(.fixed-header) {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 100 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* إزالة الخلفية البيضاء من جميع طبقات الهيدر */
body.index.alanjoj-home-mobile-ready #mainnav .inner,
body.index.alanjoj-home-mobile-ready #mainnav .container,
body.index.alanjoj-home-mobile-ready
#mainnav .container > .flex.items-stretch.justify-between.relative {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}




/* ==================================================
   ألوان قوائم التصنيفات في الهيدر
================================================== */

/* خلفيات القوائم المنسدلة — نفس ألوان قائمة الجوال */
body.alanjoj-home-mobile-ready #mainnav .main-menu .sub-menu,
body.alanjoj-home-mobile-ready #mainnav .main-menu li.mega-menu .container {
    background-color: var(--theme-primary) !important;
    border-color: rgba(234, 244, 255, 0.12) !important;
    box-shadow: var(--theme-search-shadow) !important;
}

/* روابط القوائم المنسدلة */
body.alanjoj-home-mobile-ready #mainnav .main-menu .sub-menu a {
    background-color: transparent !important;
    color: var(--theme-text-light) !important;
}

/* المرور على عناصر القائمة */
body.alanjoj-home-mobile-ready #mainnav .main-menu .sub-menu a:hover {
    background-color: rgba(234, 244, 255, 0.08) !important;
    color: var(--theme-text-light) !important;
}
}

/* ==========================================================
   D - MOBILE
   767px فأقل — التخطيط الحالي والقواعد الحساسة المؤجلة
   ========================================================== */

@media (max-width: 767px) {

    /* ==================================================
       01 - شبكة التصنيفات: الأعمدة والفواصل الحالية
       ================================================== */

    /* أُبقيت صيغة auto-fit الحالية كما هي؛ لا تُستبدل بعدد أعمدة ثابت. */

    body.index .square-photos-grid {
        display: grid !important;
        grid-template-columns: repeat( auto-fit, minmax(calc((100% - 16px) / 3), 1fr) ) !important;
        column-gap: 8px !important;
        row-gap: 14px !important;
        align-items: start !important;
    }

    /* ==================================================
       02 - عناوين التصنيفات: أحجام الخط الأصلية للجوال
       ================================================== */

    /* أُبقي 13px وinherit داخل الجوال امتثالًا لشرط عدم تعميم أحجام النصوص. باقي شكل العنوان في Shared. */

    body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border {
        font-size: 13px !important;
    }

    body.index .square-photos-grid .banner-entry.square-photos h3.text-with-border span {
        font-size: inherit !important;
    }

    /* ==================================================
       03 - البنرات الشبكية: تخطيط الجوال
       ================================================== */

    /* نفس عرض ومسافات الحاوية الخارجية، وعمودان بلا فواصل، وامتداد الخامس إن كان الأخير. */

    body.index section[data-testid="store-home-square-banners"] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    body.index section[data-testid="store-home-square-banners"] > .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
    }

    body.index section[data-testid="store-home-square-banners"] .banner-entry:nth-child(5):last-child {
        grid-column: 1 / -1 !important;
    }

    /* ==================================================
       04 - الهيدر: التموضع والوضع الطبيعي والحركة
       ================================================== */

    body.index.alanjoj-home-mobile-ready header[data-testid="store-header"] {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 100 !important;
        background: transparent !important;
        box-shadow: var(--theme-shadow-none) !important;
        border: none !important;
    }

   

    body.alanjoj-home-mobile-ready #mainnav {
        height: 76px !important;
        background: transparent !important;
        box-shadow: var(--theme-shadow-none) !important;
        border: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-bottom-color: transparent !important;
    }

    body.index.alanjoj-home-mobile-ready #mainnav .inner {
        background: transparent !important;
    }

    body.alanjoj-home-mobile-ready #mainnav .container {
        position: relative !important;
        background: transparent !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.alanjoj-home-mobile-ready #mainnav .container > .flex.items-stretch.justify-between.relative {
        min-height: 76px !important;
        align-items: center !important;
    }

    body #mainnav .container > .flex.items-stretch.justify-between.relative > div:last-child {
        transform: none !important;
        position: relative !important;
        left: -40px !important;
        right: auto !important;
    }

    body header[data-testid="store-header"],
    body #mainnav {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
    }

    body #mainnav {
        transition: top .22s ease, opacity .18s ease !important;
    }

  }
    /* ==================================================
       05 - أيقونات الهيدر: الأساس والمسافات
       ================================================== */

    #mainnav .alanjoj-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    #mainnav .alanjoj-search-toggle,
    #mainnav .s-localization-modal-trigger-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: var(--theme-radius-flat) !important;
        background: transparent !important;
        box-shadow: var(--theme-shadow-none) !important;
        color: var(--theme-icon-base) !important;
        cursor: pointer;
    }

    #mainnav .alanjoj-search-toggle svg,
    #mainnav .s-localization-modal-trigger-btn svg,
    #mainnav .alanjoj-user-svg {
        width: 23px !important;
        height: 23px !important;
        filter: var(--theme-icon-filter);
    }

    body #mainnav .alanjoj-header-actions {
        gap: 7px !important;
        align-items: center !important;
    }

    /* ==================================================
       06 - اللغة والعملات: أيقونة الكرة
       ================================================== */

    #mainnav salla-localization-modal[data-testid="store-header-localization"] .s-localization-modal-trigger-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: var(--theme-shadow-none) !important;
        border-radius: var(--theme-radius-flat) !important;
        font-size: 0 !important;
        color: transparent !important;
        position: relative !important;
    }

    #mainnav salla-localization-modal[data-testid="store-header-localization"] .s-localization-modal-trigger-btn > span {
        display: none !important;
    }

    #mainnav salla-localization-modal[data-testid="store-header-localization"] .s-localization-modal-trigger-btn::before {
        content: "" !important;
        display: block !important;
        width: 23px !important;
        height: 23px !important;
        background-color: var(--theme-accent) !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9S14.5 18.5 12 21M12 3C9.5 5.5 8.2 8.5 8.2 12S9.5 18.5 12 21'/%3E%3C/svg%3E") center / contain no-repeat !important;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9S14.5 18.5 12 21M12 3C9.5 5.5 8.2 8.5 8.2 12S9.5 18.5 12 21'/%3E%3C/svg%3E") center / contain no-repeat !important;
    }

    /* ==================================================
       07 - الحساب: الأيقونة والصورة
       ================================================== */

    #mainnav .s-user-menu-trigger-avatar {
        display: none !important;
    }

    #mainnav .s-user-menu-avatar-wrap {
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: var(--theme-radius-flat) !important;
        box-shadow: var(--theme-shadow-none) !important;
        color: var(--theme-icon-base) !important;
    }

    #mainnav .s-user-menu-trigger {
        background: transparent !important;
        border: 0 !important;
        box-shadow: var(--theme-shadow-none) !important;
    }

    #mainnav salla-user-menu[data-testid="store-header-user-menu"] .s-user-menu-trigger-avatar {
        display: none !important;
    }

    #mainnav salla-user-menu[data-testid="store-header-user-menu"] .s-user-menu-avatar-wrap {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: var(--theme-shadow-none) !important;
        border-radius: var(--theme-radius-flat) !important;
        position: relative !important;
    }

    #mainnav .alanjoj-user-svg {
        display: none !important;
    }

    #mainnav salla-user-menu[data-testid="store-header-user-menu"] .s-user-menu-avatar-wrap::before {
        content: "" !important;
        width: 23px !important;
        height: 23px !important;
        background-color: var(--theme-accent) !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c.8-4.2 3.3-6.5 7.5-6.5s6.7 2.3 7.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c.8-4.2 3.3-6.5 7.5-6.5s6.7 2.3 7.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
    }

    /* ==================================================
       08 - البحث: اللوحة وحالة الفتح والأيقونة
       ================================================== */

    /* قواعد حساسة محفوظة: لم تتغير الأصناف أو الإظهار والإخفاء أو التموضع أو الحركة. رُبطت القيم البصرية فقط بمتغيرات مساوية للقيم السابقة. */

    #mainnav .alanjoj-search-panel {
        display: block !important;
        position: absolute !important;
        top: 70px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        z-index: 120 !important;
        padding: 7px !important;
        background: var(--theme-search-bg) !important;
        border: var(--theme-search-border) !important;
        border-radius: var(--theme-search-radius) !important;
        box-shadow: var(--theme-search-shadow) !important;
        backdrop-filter: blur(12px);
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        transition: opacity .20s ease, transform .20s ease, visibility .20s ease !important;
    }

    #mainnav.alanjoj-search-open .alanjoj-search-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    #mainnav .alanjoj-search-toggle {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        color: var(--theme-accent) !important;
        padding: 0 !important;
    }

    #mainnav .alanjoj-search-toggle svg {
        width: 23px !important;
        height: 23px !important;
        stroke: var(--theme-accent) !important;
    }

    /* ==================================================
       09 - السلة: الأيقونة والعداد
       ================================================== */

    #mainnav salla-cart-summary .s-cart-summary-wrapper {
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: var(--theme-shadow-none) !important;
    }

    #mainnav #s-cart-icon {
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: var(--theme-shadow-none) !important;
    }

    #mainnav #s-cart-icon::before,
    #mainnav #s-cart-icon::after {
        border: 0 !important;
        background: transparent !important;
        box-shadow: var(--theme-shadow-none) !important;
    }

    #mainnav salla-cart-summary .header-btn__icon {
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: var(--theme-shadow-none) !important;
        color: var(--theme-icon-base) !important;
    }

    #mainnav .s-cart-summary-count {
        z-index: 5 !important;
    }

    header[data-testid="store-header"] salla-cart-summary .sicon-shopping-bag,
    header[data-testid="store-header"] salla-cart-summary .sicon-shopping-bag::before {
        color: var(--theme-accent) !important;
    }

    /* ==================================================
       10 - تثبيت الهيدر: القاعدة الأصلية
       ================================================== */

    /* أُبقيت هذه القاعدة قبل تجاوز الزجاج التالي. لا تنقلها إلى Shared أو تعكس ترتيبها في هذه المرحلة. */

    body.alanjoj-home-mobile-ready #mainnav.fixed-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 50 !important;
        background: var(--theme-header-glass-bg) !important;
        -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
        backdrop-filter: blur(14px) saturate(120%) !important;
    }

    /* ==================================================
       11 - زجاج الهيدر: الطبقة والتجاوز المقصود
       ================================================== */

    /* يبقى الزجاج على ::before ويُلغى التغبيش المباشر عن #mainnav.fixed-header بالقواعد اللاحقة كما في المرجع. */

    body.alanjoj-home-mobile-ready #mainnav::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        background: var(--theme-header-glass-bg) !important;
        -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
        backdrop-filter: blur(16px) saturate(130%) !important;
        border-bottom: var(--theme-header-glass-border) !important;
        box-shadow: var(--theme-header-glass-shadow) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }
  
  /* إظهار طبقة الزجاج في الصفحات الداخلية */


    body.alanjoj-home-mobile-ready #mainnav > .inner {
        position: relative !important;
        z-index: 1 !important;
    }

    body.alanjoj-home-mobile-ready #mainnav.fixed-header {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.alanjoj-home-mobile-ready #mainnav.fixed-header::before {
        opacity: 1 !important;
    }

  @media (max-width: 767px) {
    /* ==================================================
       12 - القائمة الجانبية الحالية
       ================================================== */

    /* بقي النطاق والمحدد #mobile-menu.mm-spn.mm-spn--light كما هما؛ لم تُفعّل قائمة الكمبيوتر. */

    #mobile-menu.mm-spn.mm-spn--light {
        background-color: var(--theme-primary) !important;
        color: var(--theme-text-light) !important;
    }

    #mobile-menu.mm-spn.mm-spn--light a,
    #mobile-menu.mm-spn.mm-spn--light span,
    #mobile-menu.mm-spn.mm-spn--light::before {
        color: var(--theme-text-light) !important;
    }

    /* ==================================================
       13 - مسافة الإعلان عندما يأتي بعد Hero
       ================================================== */

    /* هذه ليست حركة الإعلان؛ إنها قاعدة المسافة المرتبطة بترتيب DOM الحالي. بقيت للجوال ولم يُنقل الإعلان بالجافاسكربت. */

    body.index section[data-testid="store-home-parallax-banner"] + salla-advertisement {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ==================================================
       14 - القص والعرض المرتبطان بالهيدر والـHero
       ================================================== */

    /* قاعدة حساسة محفوظة كاملة في مكان متأخر: max-width:100vw وoverflow-x:clip. */

   /* الهيدر في جميع الصفحات */
body header[data-testid="store-header"],
body #mainnav {
    max-width: 100vw !important;
    overflow-x: clip !important;
}

/* البنر في الرئيسية فقط */
body.index section[data-testid="store-home-parallax-banner"] {
    max-width: 100vw !important;
    overflow-x: clip !important;
}
    }

@media (min-width: 1025px) {
    #mainnav [data-testid="store-header-mobile-toggle"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 0 16px !important;
        color: var(--theme-accent) !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #mainnav custom-main-menu {
        display: none !important;
    }
}

.alanjoj-desktop-menu {
    position: fixed;
    inset: 0;
    z-index: 99990;
    visibility: hidden;
    pointer-events: none;
}

.alanjoj-desktop-menu.is-open {
    visibility: visible;
    pointer-events: auto;
}

.alanjoj-desktop-menu-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.48);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.alanjoj-desktop-menu.is-open .alanjoj-desktop-menu-overlay {
    opacity: 1;
}

.alanjoj-desktop-menu-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    min-width: 200px;
    max-width: 440px;
    overflow: hidden;
    direction: rtl;
    color: var(--theme-text-light);
    background: var(--theme-primary);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.alanjoj-desktop-menu.is-open .alanjoj-desktop-menu-drawer {
    transform: translateX(0);
}

.alanjoj-desktop-menu-header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px 0 58px;
    border-bottom: 1px solid rgba(234, 244, 255, 0.14);
    background: var(--theme-primary);
}

.alanjoj-desktop-menu-title {
    flex: 1;
    color: var(--theme-text-light);
    font-size: 15px;
    text-align: right;
}

.alanjoj-desktop-menu-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    color: #fff;
    background: #bd2d31;
    font-size: 28px;
    font-weight: 300;
    line-height: 52px;
}

.alanjoj-desktop-menu-back {
    display: none;
    width: 30px;
    height: 40px;
    padding: 0;
    border: 0;
    color: var(--theme-text-light);
    background: transparent;
    font-size: 27px;
}

.alanjoj-desktop-menu-back.is-visible {
    display: block;
}

.alanjoj-desktop-menu-panels {
    height: calc(100% - 52px);
    overflow-y: auto;
    background: var(--theme-primary);
}

.alanjoj-desktop-menu-panel {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--theme-primary);
}

.alanjoj-desktop-menu-panel.is-active {
    display: block;
}

.alanjoj-desktop-menu-panel > li {
  display: block !important;
    position: relative;
    min-height: 73px;
    margin: 0;
    border-bottom: 1px solid rgba(234, 244, 255, 0.14);
    background: var(--theme-primary);
}

.alanjoj-desktop-menu-panel > li > a,
.alanjoj-desktop-menu-panel > li > span {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 73px;
    padding: 10px 18px !important;
    color: var(--theme-text-light) !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.alanjoj-desktop-menu-panel img {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px;
    border-radius: 999px !important;
    object-fit: cover !important;
}

.alanjoj-desktop-menu-has-children::after {
    content: "‹";
    position: absolute;
    top: 50%;
    left: 20px;
    color: rgba(234, 244, 255, 0.55);
    font-size: 25px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* بنرات صفحات التصنيفات بنسبة 1200 × 300 */
.alanjoj-category-banner {
    width: 100%;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.alanjoj-category-banner .banner {
    width: 100%;
    aspect-ratio: 4 / 2;
    overflow: hidden;
}

.alanjoj-category-banner img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: 0;
  border-radius: 0 !important;
}

/* =========================================================
   جميع عناصر البنر العريض — جميع الشاشات
   مربع 1:1 وملتصق بالجوانب
   ========================================================= */

section[data-testid="store-home-fixed-banner"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

section[data-testid="store-home-fixed-banner"] > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

section[data-testid="store-home-fixed-banner"] .banner--fixed {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

section[data-testid="store-home-fixed-banner"] picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

section[data-testid="store-home-fixed-banner"] img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* =========================================================
   ألنجوج — الصور المتحركة
   عرض كامل ونسبة 3:1 في جميع الشاشات
   ========================================================= */

/* إخراج العنصر من حدود الحاوية حتى يلامس طرفي الشاشة */
section[data-testid="store-home-photos-slider"] {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
}

/* إزالة المسافات الداخلية التي يضيفها الثيم */
section[data-testid="store-home-photos-slider"] > .container,
section[data-testid="store-home-photos-slider"]
.s-block--photos-slider-inner {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/* تمديد مكوّن السلايدر */
section[data-testid="store-home-photos-slider"] salla-slider {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

section[data-testid="store-home-photos-slider"]
.s-slider-container,
section[data-testid="store-home-photos-slider"]
.swiper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

section[data-testid="store-home-photos-slider"]
.swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* جعل كل شريحة تملأ منطقة الصور */
section[data-testid="store-home-photos-slider"]
.swiper-slide {
    width: 100% !important;
    height: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

section[data-testid="store-home-photos-slider"]
.swiper-slide > a,
section[data-testid="store-home-photos-slider"]
.swiper-slide picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* الصورة */
section[data-testid="store-home-photos-slider"]
.swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* =========================================================
   إظهار حاوية أسهم البنر في جميع الشاشات
   ========================================================= */

section[data-testid="store-home-photos-slider"]
salla-slider:has(.swiper-slide:nth-child(2))
.s-slider-block__title-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 30 !important;
}
section[data-testid="store-home-photos-slider"]
.s-slider-prev,
section[data-testid="store-home-photos-slider"]
.s-slider-next,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev,
section[data-testid="store-home-photos-slider"]
.swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

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

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

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    background: rgba(40, 89, 122, 0.48) !important;
    background-color: rgba(40, 89, 122, 0.48) !important;

    color: var(--theme-accent, #d6b35a) !important;

   border: none !important;
    border-radius: 50% !important;

    box-shadow: 0 2px 8px rgba(7, 21, 33, 0.25) !important;
    backdrop-filter: none !important;

    z-index: 30 !important;
}

/* وضع زر الرجوع داخل يسار الصورة */
section[data-testid="store-home-photos-slider"]
.s-slider-prev,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev {
    right: auto !important;
    left: 10px !important;
}

/* وضع زر الانتقال داخل يمين الصورة */
section[data-testid="store-home-photos-slider"]
.s-slider-next,
section[data-testid="store-home-photos-slider"]
.swiper-button-next {
   right: 10px !important;
    left: auto !important;
}

/* سهم سلة الأصلي */
section[data-testid="store-home-photos-slider"]
.s-slider-prev::after,
section[data-testid="store-home-photos-slider"]
.s-slider-next::after,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev::after,
section[data-testid="store-home-photos-slider"]
.swiper-button-next::after {
    color: var(--theme-accent, #d6b35a) !important;
    font-size: 16px !important;
}

/* السهم إذا كان مرسومًا بصيغة SVG */
section[data-testid="store-home-photos-slider"]
.s-slider-prev svg,
section[data-testid="store-home-photos-slider"]
.s-slider-next svg,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev svg,
section[data-testid="store-home-photos-slider"]
.swiper-button-next svg {
    width: 11px !important;
    height: 20px !important;

    color: var(--theme-accent, #d6b35a) !important;
    fill: currentColor !important;
    stroke: currentColor !important;

    visibility: visible !important;
    opacity: 1 !important;
  transform: scaleX(-1) !important;
}

/* تثبيت اللون الذهبي على رسم السهم */
section[data-testid="store-home-photos-slider"]
.s-slider-prev svg path,
section[data-testid="store-home-photos-slider"]
.s-slider-next svg path,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev svg path,
section[data-testid="store-home-photos-slider"]
.swiper-button-next svg path {
    fill: var(--theme-accent, #d6b35a) !important;
    stroke: var(--theme-accent, #d6b35a) !important;
}

/* تفاعل بسيط عند مرور المؤشر */
section[data-testid="store-home-photos-slider"]
.s-slider-prev:hover,
section[data-testid="store-home-photos-slider"]
.s-slider-next:hover,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev:hover,
section[data-testid="store-home-photos-slider"]
.swiper-button-next:hover {
    background: rgba(40, 89, 122, 0.68) !important;
}

/* زوايا الصور المتحركة حادة تمامًا */
section[data-testid="store-home-photos-slider"],
section[data-testid="store-home-photos-slider"] salla-slider,
section[data-testid="store-home-photos-slider"] .s-slider-container,
section[data-testid="store-home-photos-slider"] .swiper,
section[data-testid="store-home-photos-slider"] .swiper-wrapper,
section[data-testid="store-home-photos-slider"] .swiper-slide,
section[data-testid="store-home-photos-slider"] .swiper-slide > a,
section[data-testid="store-home-photos-slider"] .swiper-slide picture,
section[data-testid="store-home-photos-slider"] .swiper-slide img {
    border-radius: 0 !important;
}

/* =========================================================
   ألنجوج — مربعات التنقل داخل صورة السلايدر
   ========================================================= */

/* حاوية مربعات التنقل */
section[data-testid="store-home-photos-slider"]
.swiper-pagination.swiper-pagination-horizontal {
    position: absolute !important;

    right: auto !important;
    left: 50% !important;
    bottom: 8px !important;

    transform: translateX(-50%) !important;

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

    width: auto !important;
    height: auto !important;

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

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    z-index: 25 !important;
}

/* المربعات العادية */
section[data-testid="store-home-photos-slider"]
.swiper-pagination-bullet {
    display: block !important;

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

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

    background: rgba(40, 89, 122, 0.62) !important;

    border: 1px solid rgba(214, 179, 90, 0.55) !important;
    border-radius: 3px !important;

    box-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* مربع الصورة المعروضة حاليًا */
section[data-testid="store-home-photos-slider"]
.swiper-pagination-bullet-active {
    background: var(--theme-accent, #d6b35a) !important;
    border-color: var(--theme-accent, #d6b35a) !important;
}

/* مقاس مربعات التنقل في الجوال */
@media (max-width: 767px) {
    section[data-testid="store-home-photos-slider"]
    .swiper-pagination.swiper-pagination-horizontal {
        bottom: 7px !important;
        gap: 5px !important;
    }

    section[data-testid="store-home-photos-slider"]
    .swiper-pagination-bullet {
        width: 9px !important;
        height: 9px !important;
        min-width: 9px !important;
        min-height: 9px !important;
        border-radius: 3px !important;
    }

  /* إخفاء مربعات التنقل عند وجود بنر واحد أو عدم وجود بنرات */
section[data-testid="store-home-photos-slider"]
.swiper-pagination:not(:has(.swiper-pagination-bullet:nth-child(2))) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

  /* =========================================================
   ألنجوج — إظهار وضبط أسهم السلايدر في الجوال
   ========================================================= */

section[data-testid="store-home-photos-slider"]
.s-slider-prev,
section[data-testid="store-home-photos-slider"]
.s-slider-next,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev,
section[data-testid="store-home-photos-slider"]
.swiper-button-next {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
}

section[data-testid="store-home-photos-slider"]
.s-slider-prev,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev {
    left: 7px !important;
}

section[data-testid="store-home-photos-slider"]
.s-slider-next,
section[data-testid="store-home-photos-slider"]
.swiper-button-next {
    right: 7px !important;
}

  section[data-testid="store-home-photos-slider"]
.s-slider-prev,
section[data-testid="store-home-photos-slider"]
.swiper-button-prev {
    left: 7px !important;
    right: auto !important;
}

section[data-testid="store-home-photos-slider"]
.s-slider-next,
section[data-testid="store-home-photos-slider"]
.swiper-button-next {
    right: 7px !important;
    left: auto !important;
}
}

/* إخفاء زر البنر وتحويل مساحته إلى رابط يغطي الصورة كاملة */
section[data-testid="store-home-parallax-banner"]
.full-banner-entry {
    position: relative !important;
}

section[data-testid="store-home-parallax-banner"]
.full-banner-entry a[href],
section[data-testid="store-home-parallax-banner"]
.full-banner-entry salla-button[href] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;

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

    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* توحيد المسافة أعلى وأسفل البنر الثابت */
section[data-testid="store-home-fixed-banner"] {
    margin-top: 32px !important;
}

/* المسافة القياسية في الشاشات الأكبر */
@media (min-width: 640px) {
    section[data-testid="store-home-fixed-banner"] {
        margin-top: 64px !important;
    }
}

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

/* بنرات المتجر الرئيسية والداخلية */
section[data-testid*="banner"],
section[data-testid*="banner"] > .container,
section[data-testid*="banner"] > .grid,
section[data-testid*="banner"] .banner-entry,
section[data-testid*="banner"] .full-banner-entry,
section[data-testid*="banner"] .banner--fixed,

/* بنرات التصنيفات المضافة بواسطة JavaScript */
.alanjoj-category-banner,
.alanjoj-category-banner .banner,

/* حاويات سلايدر البنرات فقط — من دون الأسهم ونقاط التنقل */
section[data-testid="store-home-photos-slider"],
section[data-testid="store-home-photos-slider"] > .container,
section[data-testid="store-home-photos-slider"] .s-block--photos-slider-inner,
section[data-testid="store-home-photos-slider"] salla-slider,
section[data-testid="store-home-photos-slider"] .s-slider-container,
section[data-testid="store-home-photos-slider"] .swiper,
section[data-testid="store-home-photos-slider"] .swiper-wrapper,
section[data-testid="store-home-photos-slider"] .swiper-slide {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* إزالة طبقة اللون أو التعتيم فوق صورة البنر فقط */
section[data-testid*="banner"] .banner-entry::before,
section[data-testid*="banner"] .banner-entry::after,
section[data-testid*="banner"] .full-banner-entry::before,
section[data-testid*="banner"] .full-banner-entry::after,
.alanjoj-category-banner .banner::before,
.alanjoj-category-banner .banner::after {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   مميزات المتجر — أيقونات ظاهرة، بلا مربعات، في صف واحد
   ========================================================= */

body.index section[data-testid="store-home-features"] {
    width: 100% !important;
    padding-inline: 6px !important;
}

/* فرض العناصر الثلاثة في صف واحد */
body.index section[data-testid="store-home-features"] > .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

/* إزالة المربعات الداكنة */
body.index section[data-testid="store-home-features"]
.s-block--features__item {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 33.333% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

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

    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;

    text-align: center !important;
}

/* إظهار الأيقونات وتصغيرها */
body.index section[data-testid="store-home-features"]
.s-block--features__item .feature-icon {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

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

    color: var(--theme-primary) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
}

/* إظهار رسم الأيقونة نفسه */
body.index section[data-testid="store-home-features"]
.s-block--features__item .feature-icon i,
body.index section[data-testid="store-home-features"]
.s-block--features__item .feature-icon i::before {
    display: inline-block !important;
    color: var(--theme-primary) !important;
    font-size: 21px !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* عنوان الميزة */
body.index section[data-testid="store-home-features"]
.s-block--features__item h2 {
    margin: 0 0 2px !important;
    padding: 0 !important;

    color: var(--theme-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* وصف الميزة */
body.index section[data-testid="store-home-features"]
.s-block--features__item p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--theme-primary) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* تحويل أيقونات مميزات المتجر إلى اللون الذهبي */
body.index section[data-testid="store-home-features"]
.s-block--features__item .feature-icon,
body.index section[data-testid="store-home-features"]
.s-block--features__item .feature-icon i,
body.index section[data-testid="store-home-features"]
.s-block--features__item .feature-icon i::before {
    color: var(--theme-accent, #D6B35A) !important;
}

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

.alanjoj-smoke-wrapper {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;

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

    overflow: hidden !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* =========================================================
   ألنجوج — الخصائص المشتركة لصور الدخان الجديدة فقط
   ========================================================= */

.alanjoj-smoke {
    --alanjoj-smoke-current-width:
        var(--alanjoj-smoke-width);

    --alanjoj-smoke-current-opacity:
        var(--alanjoj-smoke-opacity);

    position: absolute !important;

    left: var(--alanjoj-smoke-left) !important;
    top: var(--alanjoj-smoke-top) !important;

    display: block !important;
    width: var(--alanjoj-smoke-current-width) !important;
    max-width: none !important;
    height: auto !important;

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

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    opacity: var(--alanjoj-smoke-current-opacity);

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;

    transform-origin: 50% 100%;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    animation-name: alanjoj-smoke-drift;
    animation-duration:
        var(--alanjoj-smoke-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}

/* =========================================================
   ألنجوج — حركة الدخان باستخدام transform وopacity فقط
   ========================================================= */

@keyframes alanjoj-smoke-drift {
    0% {
        transform:
            var(--alanjoj-smoke-base-transform)
            translate3d(0, 0, 0)
            scale(var(--alanjoj-smoke-scale-from))
            rotate(var(--alanjoj-smoke-rotate-from));

        opacity:
            calc(
                var(--alanjoj-smoke-current-opacity) * 0.72
            );
    }

    50% {
        transform:
            var(--alanjoj-smoke-base-transform)
            translate3d(
                calc(var(--alanjoj-smoke-x-move) / 2),
                calc(var(--alanjoj-smoke-y-move) / 2),
                0
            )
            scale(
                calc(
                    (
                        var(--alanjoj-smoke-scale-from) +
                        var(--alanjoj-smoke-scale-to)
                    ) / 2
                )
            )
            rotate(0deg);

        opacity:
            var(--alanjoj-smoke-current-opacity);
    }

    100% {
        transform:
            var(--alanjoj-smoke-base-transform)
            translate3d(
                var(--alanjoj-smoke-x-move),
                var(--alanjoj-smoke-y-move),
                0
            )
            scale(var(--alanjoj-smoke-scale-to))
            rotate(var(--alanjoj-smoke-rotate-to));

        opacity:
            calc(
                var(--alanjoj-smoke-current-opacity) * 0.82
            );
    }
}

/* =========================================================
   ألنجوج — مقاس وشفافية الدخان على الجوال فقط
   ========================================================= */

@media (max-width: 767px) {
    .alanjoj-smoke {
        --alanjoj-smoke-current-width:
            var(--alanjoj-smoke-mobile-width);

        --alanjoj-smoke-current-opacity:
            var(--alanjoj-smoke-mobile-opacity);
    }
}

/* =========================================================
   ألنجوج — احترام إعداد تقليل الحركة
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .alanjoj-smoke {
        animation: none !important;

        transform:
            var(--alanjoj-smoke-base-transform)
            translate3d(0, 0, 0)
            scale(var(--alanjoj-smoke-scale-from))
            rotate(var(--alanjoj-smoke-rotate-from)) !important;

        opacity:
            var(--alanjoj-smoke-current-opacity) !important;
    }
}