:root {
    /* اللون الأساسي: أزرق داكن (Dark Teal) - تم الحفاظ عليه بناءً على طلبك */
    --color-primary: #314c99;
    /* ظل أغمق للـ Hover والتأكيد */
    --color-primary-dark: #054f64; 
    /* لون فاتح أو رمادي للخلفيات الفاتحة جداً */
    --color-light-bg: #f5f5f5; 
    /* لون النصوص والأزرار العكسي (أبيض) */
    --color-primary-reverse: #fff; 
    /* خلفية شفافة بيضاء أنيقة مع ضبابية لشريط التنقل */
    --bg-clean: rgba(255, 255, 255, 0.9); /* تم زيادة العتامة إلى 90% لزيادة وضوح النص */
    --bg-transparent: transparent;
    /* الزاوية الدائرية القياسية */
    --radius-standard: 8px;
}

/* --- HEADER & NAVIGATION --- */

/* تعديل ارتفاع الشعار بشكل عام (هذا يطبق على الجوال) */
.navbar-brand img {
    max-height: 8rem; /* **تم زيادة الحجم ليناسب الجوال (8rem)** */
    transition: max-height 0.3s ease;
    /* تعيين عرض أقصى لضمان عدم وجود قيود داخلية */
    max-width: 80vw !important; 
}

/* تثبيت حجم الشعار عند تثبيت شريط التنقل (Fixed Pinned) */
.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 15rem !important; /* **تصحيح: تقليل حجم الشعار عند التثبيت للحفاظ على الارتفاع المنخفض** */
}

@media (min-width: 640px) {
    .navbar-brand img {
        /* تم تقليل الحجم ليتناسب مع شريط التنقل النحيف */
        max-height: 15rem !important; /* **تصحيح: الحفاظ على الحجم على الشاشات الكبيرة عند 6rem** */
        width: auto !important;
    }
}

/* شريط التنقل العلوي - مظهر مدمج وشبه شفاف */
.main-nav-container.fixed-header .inner,
.main-nav-container .inner {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    /* تم تقليل الحشوة (Padding) لتقليل ارتفاع شريط التنقل بشكل كبير */
    padding-top: 15px; 
    padding-bottom: 15px; 
    /* تطبيق الخلفية الشفافة وتأثير الزجاج الضبابي */
    background-color: var(--bg-clean); 
    backdrop-filter: blur(8px); /* ضبابية أعلى لمظهر عصري */
    border-bottom: none; /* إزالة الخط السفلي لجعل المظهر أخف */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* ظل خفيف جداً */
}

/* تطبيق الخلفية الشفافة والضبابية على قائمة التصنيفات/التنقل الأخرى */
.categories-menu .s-menu-container,
.main-nav-container.fixed-pinned .s-menu-container {
    background-color: var(--bg-clean) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


/* مركزة الشعار (مخصص للهاتف) */
.navbar-brand {
    position: absolute; 
    left: calc(50% + 15px); /* تم تقليل الإزاحة ليتناسب مع padding الجديد */
    transform: translateX(-50%); 
    margin: 0 !important; 
    z-index: 10; 
}

/* حل مشكلة التداخل: إلغاء التمركز المطلق وإعادة الشعار إلى التدفق الطبيعي على شاشات الحاسوب */
@media (min-width: 640px) {
    .navbar-brand {
        position: static !important; /* لإلغاء التمركز المطلق */
        left: auto !important; 
        transform: none !important; 
        z-index: 1; 
        /* توسيط الشعار ضمن مرونة Flexbox */
        margin: 0 auto !important;
    }
}

/* شريط التنقل المثبت عند التمرير (Fixed Pinned) */
.main-nav-container.fixed-pinned .inner {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* ظل أوضح قليلاً عند التثبيت */
    background-color: var(--bg-clean);
}

/* تحديث أيقونات الحساب والسلة والقائمة لشكل عصري (زر أيقونة دائري) */
.sicon-cart, /* تم تغيير sicon-shopping-bag إلى sicon-cart لتمثيل عربة التسوق */
.sicon-account, /* تم تغيير sicon-user-circle إلى sicon-account لتمثيل ملف شخصي عصري */
.sicon-menu-bar { 
    /* التعديل الأول: جعل الأيقونات تبدو كأزرار دائرية عصرية */
    width: 44px !important; /* حجم لمساحة اللمس */
    height: 44px !important; /* حجم لمساحة اللمس */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    color: var(--color-primary) !important; 
    font-size: 28px !important; 
    line-height: 1; /* ضبط Line Height */
    border-radius: 50%; /* لجعلها دائرية */
    border: 1px solid rgba(49, 76, 153, 0.3); /* إطار خفيف عصري */
    transition: all 0.3s;
}

.sicon-cart:hover, /* تم تغيير sicon-shopping-bag إلى sicon-cart */
.sicon-account:hover, /* تم تغيير sicon-user-circle إلى sicon-account */
.sicon-menu-bar:hover {
    color: var(--color-primary-reverse) !important; /* لون النص يصبح أبيض */
    background-color: var(--color-primary) !important; /* الخلفية تصبح اللون الأساسي */
    border-color: var(--color-primary) !important;
    transform: translateY(-1px); /* رفع خفيف عند التفاعل */
}

/* --- BUTTONS & INTERACTION --- */

/* الأزرار الأساسية (Primary Button) - زوايا ناعمة وتفاعل أنيق */
.s-button-primary {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-primary-reverse); 
    border-radius: var(--radius-standard); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(49, 76, 153, 0.2); /* تم تحديث الظل ليتناسب مع اللون الجديد #314c99 */
}

.s-button-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 6px 10px rgba(49, 76, 153, 0.3); /* تم تحديث الظل ليتناسب مع اللون الجديد #314c99 */
    transform: translateY(-1px);
}

/* الأزرار الأساسية المحددة (Primary Outline Button) */
.s-button-primary-outline {
    color: var(--color-primary);
    background: transparent;
    border: 2px solid var(--color-primary); /* خط أكثر سمكاً للوضوح */
    border-radius: var(--radius-standard);
    fill: var(--color-primary);
    transition: all 0.3s;
    font-weight: 600;
}

.s-button-primary-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-reverse);
    fill: var(--color-primary-reverse);
}

/* --- FOOTER (القسم السفلي) --- */

.footer-is-light .store-footer .store-footer__inner {
    background: var(--color-primary);
    color: white;
    border-radius: 0; 
    padding: 3rem 1.5rem; /* مساحة داخلية واسعة */
}

/* تعديل خط المصمم في أسفل الصفحة */
.store-footer::after {
    /* التعديل الجديد: إضافة توقيع سارة بخط صغير */
    content: "تم التصميم بواسطة سارة"; 
    font-size: 12px; /* خط أصغر ليتناسب مع طلبك */
    color: #ffffff; 
    margin-right: 0 !important;
    display: block; 
    text-align: center;
    padding-top: 1.5rem;
}

/* --- TITLES & HEADINGS --- */

/* عناوين الأقسام الرئيسية */
.s-block__title h2,
.s-slider-block__title h2 {
    font-size: 1.8rem; /* حجم أكبر لجذب الانتباه */
    font-weight: 800; /* خط ثقيل */
    color: var(--color-primary-dark);
}

/* تصميم التدرج اللوني في عناوين الأقسام (RTL) - إحساس عصري باللون */
[dir=rtl] .s-block__title .right-side,
[dir=rtl] .s-slider-block__title-right {
    /* تدرج لوني أعمق وأكثر حيوية */
    background: linear-gradient(307deg, var(--color-primary) 0%, transparent 80%); 
    padding-left: 0; 
}

/* --- PRODUCT & CARD STYLES --- */

/* بطاقة المنتج العمودية - المظهر الأكثر عصرية وجمالية */
.s-product-card-vertical {
    background-color: white;
    border: 1px solid #eee; 
    border-radius: var(--radius-standard); /* تطبيق الزوايا الناعمة */
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
    /* إزالة الظل الافتراضي لتجنب التكرار */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
}

.s-product-card-vertical:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* ظل بارز وجذاب عند المرور */
    transform: translateY(-3px); /* حركة رفع خفيفة لجذب الانتباه */
}

/* --- SLIDERS & BANNERS --- */

/* إزالة أي زوايا مدورة متبقية لجعل التصميم يملأ الشاشة */
.rounded-md,
salla-slider.photos-slider .swiper-slide {
    border-radius: 0 !important;
}

/* إزالة الهوامش الجانبية للبانر وجعله يملأ الصفحة (Full Width) */
section:first-of-type.s-block.s-block--photos-slider {
    margin: 0 !important;
    padding: 0 !important; 
}

/* التأكد من أن حاوية الـ Swiper لا تحتوي على مسافة جانبية */
.swiper.s-slider-container {
    padding: 0 !important;
}

/* تعديل الـ Banner Entry (الصور العريضة) */
.banner-entry {
    width: 100%;
    height: auto !important; 
    max-height: 550px; /* زيادة الارتفاع لـ 550px ليكون تأثيره فخماً */
    border-radius: 0; /* لا زوايا دائرية للبانر العريض */
    background: transparent;
}

/* تعديل الارتفاع للهاتف */
@media only screen and (max-width: 768px) {
    .banner-entry {
        max-height: 150px; /* زيادة بسيطة للهاتف أيضاً */
    }
    
    /* تصحيح التنسيق الداخلي لشبكة البانرات في الهاتف */
    .grid-flow-row {
        grid-template-columns: repeat(2, 1fr); 
    }
    .gap-3 {
        gap: 0.75rem; 
    }
}

/* إخفاء التراكب الأسود (has-overlay) لزيادة وضوح الصور */
.has-overlay:after {
    display: none;
}

/* إخفاء التسمية التوضيحية (h3) في البانر الصغير */
.banner-entry h3 {
    display: none;
}

.dmopMx {
    display: none; /* إخفاء أي عنصر غير مرغوب فيه */
}