/* ==========================================================================
   1. تنسيق الموبايل (عنصرين بجانب بعضهما في كل صف - Grid 2 Columns)
   ========================================================================== */

/* ضبط السيكشن الخارجي وإعطائه مسافة جانبية خفيفة متناسقة */
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* إظهار كافة العناصر وإلغاء إخفاء الأطراف الخاص بالسلايدر */
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .embla,
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .embla__viewport {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* تحويل الحاوية إلى Grid مقسمة إلى عمودين بالتساوي */
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .embla__container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* عمودين بالتساوي */
    gap: 16px !important; /* المسافة بين الكروت (أفقياً ورأسياً) */
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important; /* إلغاء حركة الجافاسكريبت للسلايدر */
}

/* إجبار الكارت على ملء المساحة المخصصة له في الشبكة وتصفير قيم السلايدر القديمة */
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .embla__slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    transform: none !important;
}

/* إخفاء شريط التقدم وأزرار التنقل لأن التصميم تحول لشبكة ثابتة مريحة للعين */
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .embla__progress,
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .flex.items-center.gap-2 {
    display: none !important;
}


/* ==========================================================================
   2. تنسيق اللابتوب والشاشات الكبيرة (4 عناصر بجانب بعضها - Grid 4 Columns)
   ========================================================================== */
@media (min-width: 1024px) {
    /* إعادة الهوامش الجانبية المريحة للشاشات الكبيرة */
    section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] {
        padding-left: 4rem !important; /* ما يعادل md:px-16 */
        padding-right: 4rem !important;
    }

    /* تحويل الشبكة لتعرض 4 عناصر بجانب بعضها بالتساوي */
    section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .embla__container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 أعمدة بالتساوي */
        gap: 24px !important; /* مسافة أكبر قليلاً بين الكروت لتناسب اللابتوب */
    }
}
/* ==========================================================================
   تنسيق اسم الكاتجوري داخل بوكس بروفيشنال وأنيق
   ========================================================================== */

/* تحويل الـ h3 إلى بوكس بتصميم عصري */
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] h3 {
    display: block !important;
    text-align: center !important;
    margin-top: 12px !important;      /* مسافة متناسقة بين الصورة والبوكس */
    padding: 10px 16px !important;     /* مساحة داخلية (حشو) مريحة للنص */
    
    /* ألوان وتنسيق البوكس */
    background-color: #ffffff !important; /* خلفية بيضاء صافية */
    border: 1px solid #e2e8f0 !important; /* إطار رمادي خفيف جداً وراقي */
    border-radius: 8px !important;        /* زوايا دائرية ناعمة تماشي التصاميم الحديثة */
    
    /* تأثير ظل خفيف جداً يعطي عمق ثلاثي الأبعاد (Soft Shadow) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    
    /* ضبط الخط */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;            /* لون نص داكن وأنيق مريح للعين */
    
    /* حركة ناعمة عند تفاعل المستخدم */
    transition: all 0.25s ease-in-out !important;
}

/* تأثير تفاعلي (Hover Effect) عند تمرير الماوس على الكارت بالكامل */
section[section-id="848f8a16-22a1-47ca-baeb-feee91021ee4"] .group:hover h3 {
    background-color: #f8fafc !important; /* تغيير لون الخلفية لرمادي ناعم جداً */
    border-color: #cbd5e1 !important;     /* جعل الإطار الخارجي أوضح قليلاً */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06) !important; /* زيادة الظل ليعطي إيحاء بارتفاع البوكس للأعلى */
    transform: translateY(-2px) !important; /* رفعة خفيفة جداً لأعلى لمظهر تفاعلي مميز */
}
/* ==========================================================================
   تنسيق سيكشن المنتجات الأكثر مبيعاً (BEST SELLER) بشكل بروفيشنال وعصري
   ========================================================================== */

/* 1. ضبط التباعد العام للسيكشن */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] {
    background-color: #faf9f6 !important; /* خلفية كريمية هادئة وفخمة تبرز المنتجات */
}

/* 2. تنسيق كارت المنتج بالكامل (الـ Slide) */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] .products-embla__slide > .group {
    background-color: #ffffff !important; /* كروت بيضاء ناصعة */
    border: 1px solid #f1f0eb !important; /* إطار رمادي خفيف جداً متناسق مع الخلفية */
    border-radius: 16px !important;       /* زوايا دائرية ناعمة وحديثة */
    padding: 12px !important;             /* مسافة داخلية (حشو) تفصل العناصر عن حواف الكارت */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important; /* ظل خفيف جداً يمنح الكارت عمقاً */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* حركة تفاعلية فائقة النعومة */
}

/* تأثير الارتفاع اللطيف للكارت والظل الواضح عند تمرير الماوس (Hover) */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] .products-embla__slide > .group:hover {
    transform: translateY(-6px) !important; /* رفع الكارت لأعلى قليلاً */
    box-shadow: 0 12px 24px rgba(140, 130, 118, 0.12) !important; /* ظل دافئ وناعم يعطي طابع ثلاثي الأبعاد */
    border-color: #e2dfd5 !important;
}

/* 3. تنسيق صورة المنتج وتأثير الزوم الهادئ */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] .products-embla__slide img {
    border-radius: 12px !important;       /* جعل زوايا الصورة دائرية لتناسب الكارت */
    transition: transform 0.5s ease !important;
}
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] .products-embla__slide > .group:hover img {
    transform: scale(1.04) !important;    /* تقريب الصورة بشكل خفيف جداً غير مزعج */
}

/* 4. تنسيق عنوان المنتج والخط */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] h3 a {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] h3 a:hover {
    color: #B38F4F !important; /* تحول لون اسم المنتج للذهبي الفخم عند الإشارة عليه */
}

/* 5. تنسيق زر "أضف للسلة / تفاصيل" ليصبح بروفيشنال */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] .btn-outlined,
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] button[data-add-to-cart],
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] button[data-open-quick-view] {
    background-color: #1a1a1a !important; /* تحويل الزر للون داكن فخم جداً بدل الخط الخارجي */
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;       /* حواف متناسقة مع زوايا الكارت */
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    transition: all 0.25s ease !important;
}

/* تأثير التفاعل على أزرار الشراء */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] .btn-outlined:hover,
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] button[data-add-to-cart]:hover,
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] button[data-open-quick-view]:hover {
    background-color: #B38F4F !important; /* يتحول للذهبي الأنيق عند التمرير */
    box-shadow: 0 4px 12px rgba(179, 143, 79, 0.3) !important;
}

/* 6. زر قائمة الأمنيات (Wishlist Heart) */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] button[data-wishlist-btn] {
    background: rgba(255, 255, 255, 0.8) !important; /* خلفية بيضاء معتمة جزئياً ومموهة */
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 50% !important;        /* شكل دائري مثالي */
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.25s ease !important;
}
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] button[data-wishlist-btn]:hover {
    background: #ffffff !important;
    transform: scale(1.1) !important;
    color: #e11d48 !important; /* يتحول لون القلب للوردي/الأحمر الجذاب عند تمرير الماوس */
}

/* 7. بادج التخفيضات (Discount Badge) */
section[section-id="88030be5-2088-4111-8dc8-a65adbeb66ba"] .bg-success\/20 {
    background-color: #fef2f2 !important; /* خلفية وردية هادئة بدل الأخضر القوي */
    color: #dc2626 !important;             /* لون أحمر براندات فاخر */
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
    border: 1px solid rgba(220, 38, 38, 0.1) !important;
}