/* =========================================================
   Ekleel Alqoloub - Luxury Architecture (Part 1)
   ========================================================= */
:root {
    --ekleel-primary: #212844; /* كحلي فاخر */
    --ekleel-secondary: #f0e7d5; /* بيج دافئ */
    --ekleel-shadow: 0 12px 30px rgba(33, 40, 68, 0.08); /* ظل هوائي ناعم */
    --ease-luxury: cubic-bezier(0.25, 1, 0.5, 1); /* حركة سائلة */
}

/* 1. هندسة القائمة الرئيسية (الشفافية والطفو) */
.main-nav-container.fixed-pinned .inner {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 4px 20px rgba(33, 40, 68, 0.05) !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(33, 40, 68, 0.03) !important;
}

/* زر قائمة المستخدم (بدون حدود صلبة) */
.s-user-menu-trigger {
    background: transparent !important;
    border: 1px solid rgba(33, 40, 68, 0.1) !important;
    border-radius: 50px !important; /* تصميم Pill الفاخر */
    padding: 0.6rem 1.2rem !important;
    transition: all 0.4s var(--ease-luxury) !important;
}

.s-user-menu-trigger:hover {
    background-color: var(--ekleel-secondary) !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
}

/* 2. هندسة البنرات (الابتعاد عن الصور العشوائية والحدود الفاقعة) */
.banner-entry {
    background-color: var(--ekleel-secondary) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.5s var(--ease-luxury) !important;
    overflow: hidden !important;
}

.banner-entry:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--ekleel-shadow) !important;
}

/* 3. الأيقونات وملخص السلة (التخلص من البرتقالي) */
.header-btn__icon,
.s-cart-summary-count {
    background-color: var(--ekleel-primary) !important;
    color: var(--ekleel-secondary) !important;
    border: none !important;
    transition: all 0.4s var(--ease-luxury) !important;
}

.header-btn__icon:hover,
.s-cart-summary-count:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(33, 40, 68, 0.2) !important;
}

/* 4. العناوين والنصوص (التراتبية البصرية الفاخرة) */
.text-primary, 
.s-slider-block__title h2 {
    color: var(--ekleel-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: opacity 0.3s ease !important;
}

/* أزرار عرض الكل (Display All) */
.s-slider-block__display-all {
    background-color: transparent !important;
    color: var(--ekleel-primary) !important;
    border: 1px solid var(--ekleel-primary) !important;
    border-radius: 50px !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 500 !important;
    transition: all 0.4s var(--ease-luxury) !important;
}

.s-slider-block__display-all:hover {
    background-color: var(--ekleel-primary) !important;
    color: var(--ekleel-secondary) !important;
}

/* 5. الأزرار العامة في المتجر (Salla Buttons) */
salla-button .s-button-btn,
.btn--primary {
    background-color: var(--ekleel-primary) !important;
    color: var(--ekleel-secondary) !important;
    border-radius: 50px !important; /* شكل بيضاوي فخم */
    padding: 12px 28px !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.4s var(--ease-luxury) !important;
}

salla-button .s-button-btn:hover,
.btn--primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(33, 40, 68, 0.2) !important;
}

/* 6. هندسة الفوتر (العمق والهدوء) */
.store-footer .store-footer__inner,
.footer-is-light .store-footer .store-footer__inner {
    background-color: var(--ekleel-primary) !important;
    color: var(--ekleel-secondary) !important;
    border-radius: 24px 24px 0 0 !important; /* زوايا علوية فقط للفوتر */
    padding: 4rem 2rem !important;
}

.store-footer h3 {
    color: var(--ekleel-secondary) !important;
    background: transparent !important;
    text-align: right !important; /* المحاذاة الصحيحة للغة العربية */
    border-bottom: 1px solid rgba(240, 231, 213, 0.1) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* أيقونات مميزات المتجر (ضمان، توصيل...) */
.s-block--features .s-block--features__item .feature-icon {
    background-color: rgba(240, 231, 213, 0.05) !important;
    color: var(--ekleel-secondary) !important;
    border-radius: 50px !important; /* تصميم دائري ناعم */
    transition: all 0.4s var(--ease-luxury) !important;
}

.s-block--features .s-block--features__item:hover .feature-icon {
    background-color: var(--ekleel-secondary) !important;
    color: var(--ekleel-primary) !important;
    transform: translateY(-5px) !important;
}
/* =========================================================
   Ekleel Alqoloub - Luxury Architecture (Part 2)
   ========================================================= */

/* 1. تجريد الأنيمشن المزعج واستبداله بحركة فيزيائية ناعمة */
.header-btn__icon {
    border: none !important;
    border-radius: 50% !important; /* دائرة مثالية */
    background-color: var(--ekleel-secondary) !important; /* بيج */
    color: var(--ekleel-primary) !important; /* كحلي */
    padding: 0.6rem !important;
    transition: transform 0.4s var(--ease-luxury), box-shadow 0.4s var(--ease-luxury) !important;
    animation: none !important; /* إيقاف اللمعان الرخيص */
}

.header-btn__icon:hover {
    background-color: var(--ekleel-primary) !important;
    color: var(--ekleel-secondary) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 15px rgba(33, 40, 68, 0.15) !important;
}

/* 2. هندسة عداد السلة (The Cart Badge) */
.s-cart-summary-count {
    background-color: var(--ekleel-primary) !important;
    color: var(--ekleel-secondary) !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    padding: 0.35rem 0.6rem !important;
    border-radius: 50px !important;
    border: 2px solid #ffffff !important; /* إطار أبيض ناعم للفصل عن الخلفية */
    box-shadow: 0 4px 10px rgba(33, 40, 68, 0.2) !important;
}

/* 3. تنظيف البنرات والشبكات (Grid & Banners) */
.grid-flow-row {
    grid-auto-flow: column !important;
    gap: 20px !important; /* مساحات تنفس مريحة للعين */
}

.banner-entry {
    background-color: var(--ekleel-secondary) !important;
    border: none !important; /* إزالة الحدود الذهبية/البرتقالية */
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.5s var(--ease-luxury) !important;
}

.banner-entry:hover {
    background-color: #eaddc7 !important; /* درجة أغمق قليلاً من البيج عند التمرير */
    transform: translateY(-4px) !important;
}

/* 4. هندسة الفوتر المعماري (بدون أخطاء برمجية) */
.footer-is-light .store-footer .store-footer__inner,
.store-footer {
    background-color: var(--ekleel-primary) !important;
    border-radius: 20px 20px 0 0 !important; /* تقويس علوي فقط */
    border: none !important;
    color: var(--ekleel-secondary) !important;
    padding: 3rem 2rem 1rem !important;
}

.store-footer h3 {
    text-align: right !important; /* احترام اتجاه اللغة العربية */
    color: var(--ekleel-secondary) !important;
    background: transparent !important; /* إزالة الخلفية المربعة من العناوين */
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid rgba(240, 231, 213, 0.1) !important;
    padding-bottom: 10px !important;
}

.store-footer a {
    color: rgba(240, 231, 213, 0.8) !important; /* بيج بشفافية أنيقة للروابط */
    transition: color 0.3s ease, transform 0.3s ease !important;
    display: inline-block !important;
}

.store-footer a:hover {
    color: #ffffff !important;
    transform: translateX(-5px) !important; /* حركة طفيفة لليسار عند التمرير (للعربية) */
}

/* 5. هندسة أيقونات مميزات المتجر (ضمان، جودة، توصيل) */
.s-block--features .s-block--features__item .feature-icon {
    position: relative !important;
    background-color: rgba(240, 231, 213, 0.05) !important; /* خلفية شفافة من البيج */
    height: 4.5rem !important;
    width: 4.5rem !important;
    border-radius: 50% !important; /* دائرة مثالية */
    color: var(--ekleel-secondary) !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.5s var(--ease-luxury) !important;
}

.s-block--features .s-block--features__item:hover .feature-icon {
    background-color: var(--ekleel-secondary) !important;
    color: var(--ekleel-primary) !important;
    transform: translateY(-8px) scale(1.05) !important; /* طفو للأعلى والتكبير */
    box-shadow: var(--ekleel-shadow) !important;
}

/* 6. إصلاح خطأ التوسيط الإجباري الفرعي */
.s-product-card-content-sub {
    justify-content: flex-start !important; /* السماح للمنتجات بالترتيب الطبيعي */
    font-family: inherit !important;
}

/* =========================================================
   Ekleel Alqoloub - Luxury Architecture (Part 3)
   ========================================================= */

/* 1. توحيد الأزرار الإضافية (Primary Buttons) مع هوية إكليل */
.button-primary,
.footer-is-light .store-footer .btn {
    background-color: var(--ekleel-secondary) !important; /* بيج دافئ */
    color: var(--ekleel-primary) !important; /* نص كحلي */
    border: 1px solid transparent !important;
    padding: 12px 30px !important;
    border-radius: 50px !important; /* شكل البيضة الفاخر (Pill) */
    font-weight: 700 !important;
    font-family: inherit !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s var(--ease-luxury) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.button-primary:hover,
.footer-is-light .store-footer .btn:hover {
    background-color: var(--ekleel-primary) !important;
    color: var(--ekleel-secondary) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--ekleel-shadow) !important;
}

/* 2. هندسة النصوص الإضافية (Typography) */
.text-header {
    color: var(--ekleel-primary) !important;
    font-size: clamp(1.5rem, 4vw, 2rem) !important; /* خط متكيف مع حجم الشاشة */
    font-weight: 800 !important;
}

.text-body {
    color: rgba(33, 40, 68, 0.8) !important; /* كحلي شفاف للقراءة المريحة */
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* 3. تنظيف الفوتر وهندسة منحنى الفخامة (The Luxury Curve) */
.footer-is-light .store-footer {
    background-color: var(--ekleel-primary) !important; /* كحلي عميق */
    color: var(--ekleel-secondary) !important; /* نصوص بيج */
    padding: 4rem 2rem 2rem !important;
    border-radius: 40px 40px 0 0 !important; /* منحنى علوي ناعم وواسع يغني عن الموجة المشوهة */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    border: none !important;
    overflow: hidden !important;
}

/* إزالة التأثير المتموج المشوه واستبداله بنظافة بصرية */
.footer-is-light .store-footer::before {
    display: none !important; 
}

/* هندسة نصوص الفوتر */
.footer-is-light .store-footer p {
    color: rgba(240, 231, 213, 0.8) !important;
    line-height: 1.8 !important;
    margin-bottom: 24px !important;
    font-size: 0.95rem !important;
}

/* 4. هندسة أيقونات التواصل الاجتماعي (Social Icons) */
.footer-is-light .store-footer .social-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 30px !important;
}

.footer-is-light .store-footer .social-icons a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important; /* دائرة مثالية */
    background-color: rgba(240, 231, 213, 0.05) !important; /* بيج شفاف جداً */
    color: var(--ekleel-secondary) !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
    transition: all 0.4s var(--ease-luxury) !important;
    border: 1px solid rgba(240, 231, 213, 0.1) !important;
}

.footer-is-light .store-footer .social-icons a:hover {
    background-color: var(--ekleel-secondary) !important;
    color: var(--ekleel-primary) !important;
    transform: translateY(-5px) scale(1.1) !important; /* طفو وتكبير فاخر بدون دوران مزعج */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: transparent !important;
}



/* =========================================================

/* =========================================================
   Ekleel Alqoloub - Ultimate Footer & Social Override
   ========================================================= */

/* 1. اختراق منصات التواصل عبر الروابط (Attribute Selectors) */
footer a[href*="instagram"], footer a[href*="snapchat"], 
footer a[href*="tiktok"], footer a[href*="twitter"], 
footer a[href*="x.com"], footer a[href*="youtube"], 
footer a[href*="wa.me"], footer a[href*="facebook"],
[class*="footer"] a[href*="instagram"], [class*="footer"] a[href*="snapchat"], 
[class*="footer"] a[href*="tiktok"], [class*="footer"] a[href*="wa.me"] {
    background-color: rgba(240, 231, 213, 0.15) !important; /* بيج شفاف بوضوح عالي */
    border: 1px solid rgba(240, 231, 213, 0.3) !important;
    color: #f0e7d5 !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 5px !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    text-decoration: none !important;
}

/* تلوين الأيقونات الداخلية (SVG / i) إن وجدت */
footer a[href*="instagram"] svg, footer a[href*="snapchat"] svg,
footer a[href*="instagram"] i, footer a[href*="snapchat"] i {
    fill: #f0e7d5 !important;
    color: #f0e7d5 !important;
}

/* التفاعل عند التمرير (Hover) */
footer a[href*="instagram"]:hover, footer a[href*="snapchat"]:hover, 
footer a[href*="tiktok"]:hover, footer a[href*="wa.me"]:hover,
[class*="footer"] a[href*="instagram"]:hover {
    background-color: #f0e7d5 !important; /* بيج صلب */
    color: #212844 !important; /* أيقونة كحلية */
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 2. اختراق مكونات سلة المغلقة (Web Components Shadow DOM) */
salla-social::part(social-item), salla-social::part(btn) {
    background-color: rgba(240, 231, 213, 0.15) !important;
    border: 1px solid rgba(240, 231, 213, 0.3) !important;
    border-radius: 50% !important;
}
salla-social::part(social-item):hover {
    background-color: #f0e7d5 !important;
}

/* 3. فرض التناسق والترتيب في الفوتر (Flexbox Override) */
footer > div, .store-footer > div, .store-footer__inner > div {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
    width: 100% !important;
}

/* إصلاح العناوين لتأخذ سطرها الخاص */
.store-footer h3, footer h3, .footer-title {
    width: 100% !important;
    text-align: right !important;
    border-bottom: 1px solid rgba(240, 231, 213, 0.1) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}



/* =========================================================
   Ekleel Alqoloub - Phone & Contact Icons Fix (Protocol Targeting)
   ========================================================= */

/* 1. استهداف بروتوكول الاتصال الهاتفي (tel:) وروابط الواتساب */
footer a[href^="tel:"], 
footer a[href*="whatsapp"], 
[class*="footer"] a[href^="tel:"],
[class*="footer"] a[href*="whatsapp"] {
    background-color: rgba(240, 231, 213, 0.15) !important; /* بيج شفاف يبرز فوق الكحلي */
    border: 1px solid rgba(240, 231, 213, 0.3) !important;
    color: var(--ekleel-secondary, #f0e7d5) !important;
    border-radius: 50% !important; /* دائرة مثالية */
    width: 45px !important;
    height: 45px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 5px !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    text-decoration: none !important;
}

/* 2. تلوين الأيقونة الداخلية (الهاتف/الواتساب) */
footer a[href^="tel:"] svg, 
footer a[href^="tel:"] i,
footer a[href*="whatsapp"] svg, 
footer a[href*="whatsapp"] i,
[class*="footer"] a[href^="tel:"] svg {
    fill: var(--ekleel-secondary, #f0e7d5) !important;
    color: var(--ekleel-secondary, #f0e7d5) !important;
}

/* 3. التفاعل الفاخر عند التمرير أو النقر (Hover State) */
footer a[href^="tel:"]:hover, 
footer a[href*="whatsapp"]:hover,
[class*="footer"] a[href^="tel:"]:hover {
    background-color: var(--ekleel-secondary, #f0e7d5) !important; /* خلفية بيج صلبة */
    color: var(--ekleel-primary, #212844) !important; /* أيقونة كحلية */
    transform: translateY(-5px) scale(1.1) !important; /* طفو للأعلى */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: transparent !important;
}



/* =========================================================
   Ekleel Alqoloub - Ultimate Cinematic Spotlight (Safe Mode)
   ========================================================= */

/* 1. تفعيل الظلام فقط في الرئيسية وبإذن من الجافا سكربت */
.ekleel-cinematic-ready .s-block--products, 
.ekleel-cinematic-ready .s-block--special-products {
    background-color: var(--ekleel-primary, #212844) !important;
    position: relative !important;
    overflow: hidden !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    margin-top: -2px !important;
}

/* 2. هندسة السبوت لايت (ضوء بيج فاخر من الأعلى) */
.ekleel-cinematic-ready .s-block--products::before,
.ekleel-cinematic-ready .s-block--special-products::before {
    content: '' !important;
    position: absolute !important;
    top: -30% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 150% !important;
    height: 150% !important;
    background: radial-gradient(ellipse at center, rgba(240, 231, 213, 0.12) 0%, rgba(33, 40, 68, 0) 60%) !important;
    pointer-events: none !important; 
    z-index: 0 !important;
}

/* 3. إشراق العناوين تحت الضوء */
.ekleel-cinematic-ready .s-block__title h2,
.ekleel-cinematic-ready .s-block__title .title {
    color: var(--ekleel-secondary, #f0e7d5) !important;
    text-shadow: 0 4px 20px rgba(240, 231, 213, 0.15) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 4. هندسة دفاعية: إخفاء المنتجات مؤقتاً (فقط داخل الرئيسية) */
.ekleel-cinematic-ready salla-product-card,
.ekleel-cinematic-ready .s-product-card-entry {
    opacity: 0 !important; 
    transform: translateY(60px) scale(0.95) !important; 
    filter: brightness(0.2) blur(5px) !important; 
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
                filter 1.5s ease-out !important;
    position: relative !important;
    z-index: 2 !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
}

/* 5. حالة الظهور السينمائي الفاخر عند التمرير */
.ekleel-cinematic-ready salla-product-card.is-in-spotlight,
.ekleel-cinematic-ready .s-product-card-entry.is-in-spotlight {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important; 
    filter: brightness(1) blur(0) !important; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; 
}




/* =========================================================

/* =========================================================
   Ekleel Alqoloub - Sticky Immersive Scroll (Product Page)
   ========================================================= */

@media (min-width: 992px) {
    /* 1. تحويل حاوية صفحة المنتج إلى نظام شبكي متطور */
    .s-product-detailed-page .s-product-detailed-page__wrapper {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important; /* توزيع المساحة بين الصورة والتفاصيل */
        gap: 40px !important;
        align-items: start !important;
    }

    /* 2. تثبيت نصف الشاشة الخاص بالصور (Sticky Side) */
    /* استهداف حاوية الصور في ثيم سلة */
    .s-product-detailed-page__images,
    .product-details__images,
    .s-product-detailed-page__slideshow {
        position: sticky !important;
        top: 100px !important; /* المسافة من الأعلى لضمان عدم تداخلها مع الترويسة */
        height: calc(100vh - 120px) !important; /* جعل الارتفاع مناسباً لحجم الشاشة */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* 3. تنظيف النصف الأيسر (تفاصيل المنتج) ليكون انسيابياً في التمرير */
    .s-product-detailed-page__info {
        padding-bottom: 100px !important;
        overflow: visible !important;
    }

    /* 4. لمسة فخامة: إخفاء أي خطوط فاصلة قد تشوه التصميم المنقسم */
    .s-product-detailed-page__wrapper {
        border: none !important;
    }
}

/* 5. تحسينات الجوال (تأكيد العودة للوضع الطبيعي) */
@media (max-width: 991px) {
    .s-product-detailed-page__images {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
    }
}




/* =========================================================
   Ekleel Alqoloub - Mobile Immersive "Floating Sheet"
   ========================================================= */

@media (max-width: 991px) {
    /* 1. تثبيت منطقة الصور في أعلى شاشة الجوال */
    .s-product-detailed-page__images,
    .details-slider-wrapper {
        position: sticky !important;
        top: 0 !important;
        z-index: 1 !important;
        height: 380px !important; /* تحديد ارتفاع منطقة الصورة */
        background: #fff !important;
    }

    /* 2. هندسة "الورقة العائمة" (صندوق المعلومات) */
    .s-product-detailed-page__info {
        position: relative !important;
        z-index: 5 !important; /* ليرتفع فوق الصورة */
        background: #ffffff !important;
        margin-top: -40px !important; /* سحب الصندوق فوق الصورة لإعطاء تأثير التداخل */
        border-radius: 35px 35px 0 0 !important; /* زوايا علوية دائرية فخمة */
        padding: 30px 20px !important;
        box-shadow: 0 -15px 35px rgba(33, 40, 68, 0.1) !important; /* ظل ناعم للأعلى يعطي إحساس العمق */
    }

    /* 3. تنعيم حركة التمرير */
    .s-product-detailed-page {
        overflow-x: hidden !important;
        background-color: #ffffff !important;
    }

    /* 4. تعديل السعر والعنوان ليتناسب مع الورقة العائمة */
    .s-product-detailed-page__info .product-details__title {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
        text-align: right !important;
    }
}




/* =========================================================

/* =========================================================
   Ekleel - Liquid Options Architecture (The Mercury Move)
   ========================================================= */

/* =========================================================
   Ekleel - Organized Liquid Swatches (Identity Colors)
   ========================================================= */

/* 1. تنظيف وترتيب حاوية الخيارات */
.s-product-option-selector-items {
    display: flex !important;
    flex-wrap: nowrap !important; /* منع التكسر لسطور متعددة لضمان السيولة */
    overflow-x: auto !important; /* السماح بالتمرير الجانبي في الجوال */
    gap: 12px !important;
    padding: 8px !important;
    background-color: rgba(33, 40, 68, 0.05) !important; /* خلفية كحلية خفيفة جداً للمسار */
    border-radius: 50px !important;
    position: relative !important;
    border: 1px solid rgba(33, 40, 68, 0.1) !important;
    width: fit-content !important; /* تجنب العشوائية في العرض */
    margin-bottom: 20px !important;
}

/* إخفاء شريط التمرير المزعج */
.s-product-option-selector-items::-webkit-scrollbar { display: none; }

/* 2. هندسة قطرة الهوية (The Identity Pill) */
.ekleel-liquid-pill {
    position: absolute !important;
    background-color: #f0e7d5 !important; /* لون البيج الرسمي */
    border-radius: 50px !important;
    z-index: 1 !important;
    top: 6px !important;
    bottom: 6px !important;
    /* حركة سائلة مطاطية */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    box-shadow: 0 4px 12px rgba(240, 231, 213, 0.5) !important;
}

/* 3. تنسيق الخيارات (الأزرار) لتبدو مرتبة */
.s-product-option-selector-item {
    position: relative !important;
    z-index: 5 !important;
    background: transparent !important; /* إلغاء خلفيات الثيم العشوائية */
    border: none !important;
    padding: 10px 20px !important;
    min-width: 60px !important;
    text-align: center !important;
    color: #212844 !important; /* اللون الكحلي للنص */
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: color 0.4s ease !important;
}

/* لون النص عند التحديد */
.s-product-option-selector-item[class*="selected"],
.s-product-option-selector-item.active {
    color: #212844 !important; /* كحلي غامق فوق البيج */
    font-weight: 700 !important;
}



/* =========================================================




/* =========================================================
   Ekleel - The Unboxing Hover Effect (Luxury Transition)
   ========================================================= */

/* 1. تجهيز حاوية الصورة في بطاقة سلة */
salla-product-card .s-product-card-image-container {
    position: relative !important;
    overflow: hidden !important;
    background-color: #f9f9f9 !important; /* خلفية ناعمة خلف الصندوق */
    border-radius: 12px 12px 0 0 !important;
}

/* 2. هندسة الصورة الأولى (صندوق الهدية) */
salla-product-card ::part(image) {
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 1.2s ease !important;
    z-index: 1 !important;
}

/* 3. هندسة الصورة الثانية (المنتج المعروض - الكشف) */
/* ملاحظة: سلة تضع الصورة الثانية في كلاس hover-image تلقائياً */
salla-product-card .s-product-card-hover-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important; /* مخفية تماماً في البداية */
    transform: scale(1.1) !important; /* كبيرة قليلاً لتعطي إيحاء بالاقتراب عند الظهور */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
}

/* 4. تفعيل سحر "فتح الهدية" عند تمرير الماوس */
salla-product-card:hover .s-product-card-hover-image {
    opacity: 1 !important; /* ظهور ناعم للمنتج */
    transform: scale(1) !important; /* عودة للحجم الطبيعي (إيحاء بالاستقرار) */
}

/* تأثير إضافي على صورة الصندوق الخلفية */
salla-product-card:hover ::part(image) {
    transform: scale(1.05) !important; /* تكبير طفيف جداً للصندوق قبل أن يختفي */
    filter: blur(5px) !important; /* تلاشي ضبابي ليعطي التركيز للصورة الجديدة */
}

/* 5. لمسة الفخامة المحيطة بالبطاقة */
salla-product-card {
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: 1px solid rgba(33, 40, 68, 0.03) !important;
}

salla-product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(33, 40, 68, 0.1) !important;
    border-color: rgba(240, 231, 213, 0.5) !important; /* إطار بيج ناعم عند الاختيار */
}




/* =========================================================
   Ekleel - The Luxury Concierge Cart (Progress Bar)
   ========================================================= */

/* 1. تغيير خلفية وعناوين السلة الجانبية */
.s-cart-summary-wrapper {
    background-color: #ffffff !important;
}

/* 2. هندسة شريط التقدم الفاخر (The Upsell Bar) */
.ekleel-progress-container {
    background-color: rgba(33, 40, 68, 0.05) !important; /* كحلي خفيف جداً للمسار */
    height: 40px !important;
    border-radius: 50px !important;
    margin: 20px 15px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(240, 231, 213, 0.5) !important;
}

.ekleel-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #f0e7d5 0%, #d4bc8d 100%) !important; /* تدرج البيج الذهبي */
    width: 0%; /* سيتغير عبر الجافا سكربت */
    transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ekleel-progress-text {
    position: absolute !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #212844 !important; /* نص كحلي فوق البيج */
    z-index: 2 !important;
}

/* 3. تعديل عنوان السلة ليكون "تشكيلتك الفاخرة" */
.s-cart-summary-title {
    visibility: hidden !important;
    position: relative !important;
}

.s-cart-summary-title::after {
    content: 'تشكيلتك الفاخرة' !important;
    visibility: visible !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    font-family: inherit !important;
    color: #212844 !important;
    letter-spacing: 1px !important;
}



/* =========================================================
   Ekleel - Heart Pulse & Golden Particle Effect
   ========================================================= */

/* 1. تأثير النبضة للقلب (The Heartbeat) */
.ekleel-heart-pulse {
    animation: heartBeat 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* 2. هندسة الذرات الذهبية (The Particles) */
.ekleel-particle {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #f0e7d5 !important; /* لون البيج الرسمي */
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 99 !important;
}

/* 3. تلوين القلب عند التفعيل بلون الهوية */
.s-button-wishlist.active i, 
.s-button-wishlist.is-active i,
[class*="wishlist"].active i {
    color: #f0e7d5 !important;
    filter: drop-shadow(0 0 5px rgba(240, 231, 213, 0.6)) !important;
}



/* =========================================================
   Ekleel - Tactile Button Press (Visual + Haptic)
   ========================================================= */

/* استهداف أزرار إتمام الطلب وإضافة السلة */
salla-button .s-button-btn:active, 
.btn--primary:active,
.s-cart-summary-checkout:active {
    transform: scale(0.96) !important; /* انضغاط الزر للداخل عند اللمس */
    transition: transform 0.1s ease !important;
    filter: brightness(0.9) !important; /* تغميق بسيط جداً للون */
}





/* =========================================================
   Ekleel - Premium Footer Styles (Isolated Physics)
   ========================================================= */

/* مسح أي تداخلات محتملة */
#ekleel-premium-footer * {
    box-sizing: border-box !important;
    font-family: inherit !important;
}

#ekleel-premium-footer {
    background-color: #212844 !important; /* الكحلي الفاخر */
    color: #f0e7d5 !important; /* البيج */
    direction: rtl !important;
    display: block !important;
    width: 100% !important;
    border-top: 1px solid rgba(240, 231, 213, 0.1) !important;
}

.ekleel-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* الشبكة (Grid) */
.ekleel-footer-main {
    padding: 70px 0 50px 0 !important;
}

.ekleel-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 40px !important;
}

/* النصوص والعناوين */
.ekleel-logo-text {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: #f0e7d5 !important;
}

.ekleel-story {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    opacity: 0.8 !important;
    margin-bottom: 25px !important;
}

.ekleel-title {
    font-size: 1.1rem !important;
    margin-bottom: 20px !important;
    position: relative !important;
    display: inline-block !important;
    color: #f0e7d5 !important;
}

.ekleel-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    right: 0 !important;
    width: 25px !important;
    height: 2px !important;
    background-color: rgba(240, 231, 213, 0.5) !important;
}

/* الروابط والتفاعلات */
.ekleel-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ekleel-links li {
    margin-bottom: 12px !important;
}

.ekleel-links a {
    color: rgba(240, 231, 213, 0.7) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    font-size: 0.95rem !important;
}

.ekleel-links a:hover {
    color: #f0e7d5 !important;
    transform: translateX(-5px) !important; /* حركة الانزلاق الفاخرة */
}

/* ترويض السوشيال ميديا المسحوبة من سلة */
.ekleel-social-wrapper .social-icons {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-start !important;
}

.ekleel-social-wrapper a {
    color: #f0e7d5 !important;
    font-size: 1.2rem !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

.ekleel-social-wrapper a:hover {
    opacity: 1 !important;
}

/* الفوتر السفلي */
.ekleel-footer-bottom {
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 20px 0 !important;
    font-size: 0.85rem !important;
    opacity: 0.8 !important;
}

.flex-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* استجابة الجوال (Mobile) */
@media (max-width: 768px) {
    .ekleel-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .flex-bottom {
        justify-content: center !important;
        text-align: center !important;
    }
}