header.bg-secondary {
    background-color: transparent !important;
    position: absolute; /* أو استخدمي fixed لو عاوزة الهيدر يفضل ثابت وأنتِ بتعملي سكرول */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50; /* عشان نضمن إن الهيدر يفضل فوق البانر ومش تحت الصورة */
}
/* 1. تغيير الخلفية للأبيض وتوسيط المحتوى */
section.section-benefits {
    background-color: #ffffff !important;
}

/* 2. عكس الترتيب لجعل الصورة تحت النص */
section.section-benefits .flex-col {
    flex-direction: column-reverse; /* بيعكس العناصر فيخلي الصورة تحت والنص فوق */
    justify-content: center;
    align-items: center;
    text-align: center; /* لضمان توسيط النص تماماً */
}

/* 3. تنسيق النص وجعل الاسم عريض (Bold) */
section.section-benefits .space-y-2 p {
    text-align: center;
    line-height: 1.6; /* لإعطاء النص مظهر منظم ومريح للعين */
}
/* استهداف السكشن وتغيير الخلفية للأبيض وتوسيط النص */
section.section-benefits {
    background-color: #ffffff !important;
}

/* إلغاء نظام الأعمدة (Grid) وتحويله لـ Flexbox مفرود بعرض الشاشة */
section.section-benefits .grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* جعل الحاوية الداخلية مفرودة بالكامل وتأخذ 100% من العرض */
section.section-benefits .flex-col {
    width: 100% !important;
    max-width: 800px; /* تحديد حد أقصى لعرض النص على اللابتوب عشان ميبقاش مفرود بزيادة وشكله مش مريح للعين */
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column-reverse !important; /* عشان يخلي الصورة تحت والنص فوق */
}

/* تنسيق الفقرة لضمان التوسيط الكامل */
section.section-benefits .space-y-2 {
    width: 100% !important;
}

section.section-benefits .space-y-2 p {
    text-align: center !important;
    width: 100% !important;
    font-size: 16px !important; /* حجم خط مناسب ومريح للموبايل واللابتوب */
    line-height: 1.8 !important; /* مسافة مريحة بين السطور */
}
/* 1. إخفاء زر الخيارات وسلة الشراء تماماً */
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] button[data-open-quick-view="true"],
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .qty-input {
    display: none !important;
}

/* 2. إخفاء خط الـ Scroll (شريط التقدم السفلي) */
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .products-embla__progress {
    display: none !important;
}

/* 3. تنسيق الأسهم (اليمين واليسار) بشكل بروفيشنال وعصري */
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .products-embla__prev,
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .products-embla__next {
    display: flex !important; /* لضمان ظهورها لو كانت مخفية */
    background-color: #ffffff !important; /* خلفية بيضاء صريحة ونظيفة */
    color: #1a1a1a !important; /* لون السهم غامق */
    border: 1px solid #e5e7eb !important; /* إطار خفيف جداً ناعم */
    border-radius: 50% !important; /* جعل الزر دائري بالكامل لجمالية أكبر */
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; /* ظل ناعم يعطي عمق وبُعد بروفيشنال */
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

/* 4. تأثير عند تمرير الماوس فوق الأسهم (Hover) */
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .products-embla__prev:hover:not(:disabled),
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .products-embla__next:hover:not(:disabled) {
    background-color: #1a1a1a !important; /* تنعكس الخلفية للون غامق عند الوقوف عليها */
    color: #ffffff !important; /* السهم يتحول للأبيض */
    border-color: #1a1a1a !important;
    transform: scale(1.05); /* تكبير السهم بنسبة بسيطة جداً لإعطاء شعور تفاعلي */
}

/* 5. تنسيق الحاوية الخاصة بالأسهم لتظهر في منتصف أسفل السكشن بشكل متناسق */
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .flex.items-center.gap-2 {
    justify-content: center !important;
    margin-top: 1.5rem !important;
}

/* إظهار كونترول الأسهم في الموبايل أيضاً إذا كان القالب يخفيه تلقائياً */
[data-products-carousel="48214912-30ca-487f-bfe2-80972876ced0"] .hidden.items-center.gap-2.md\:flex {
    display: flex !important;
    gap: 12px !important;
}
/* ==========================================================================
   1. تحويل السكشن إلى Carousel مرن (Scrollable Carousel)
   ========================================================================== */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    white-space: nowrap !important;
    /* تصغير الـ Gap بين الصور جداً بناءً على طلبك */
    gap: 6px !important; 
    padding-bottom: 25px !important; /* مساحة لظهور الـ Dots بالأسفل */
}

/* إخفاء شريط التمرير الافتراضي للمتصفح للحفاظ على المظهر الأنيق */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .grid::-webkit-scrollbar {
    display: none !important;
}

/* ضبط حجم كروت الصور داخل الكاروسيل في الموبايل واللابتوب */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .grid > .group {
    flex: 0 0 75% !important; /* في الموبايل يعرض صورة وجزء من اللي بعدها */
    scroll-snap-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* لتسمح للاسم بالخروج تحت الصورة */
}

@media (min-width: 768px) {
    [section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .grid > .group {
        flex: 0 0 31% !important; /* في اللابتوب يعرض 3 صور بجانب بعضها */
    }
}

/* ضبط أبعاد الصورة داخل الكارت */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .media-wrap {
    aspect-ratio: 4/3 !important;
    width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   2. نقل اسم الكاتجوري من فوق الصورة ليكون تحتها باللون الأسود
   ========================================================================== */
/* إلغاء الوضع المطلق (absolute) القديم الذي كان يضع النص فوق الصورة */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .absolute.inset-0 {
    position: relative !important;
    inset: auto !important;
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    background: transparent !important;
    justify-content: flex-start !important;
    order: 2 !important; /* يضمن مئة بالمئة وجوده تحت الصورة */
}

/* تنسيق الخط ليصبح باللون الأسود الصريح ومنظم */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] h3.text-foreground {
    color: #000000 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    width: 100% !important;
}

/* ==========================================================================
   3. بناء وتنسيق أزرار الـ Dots (Pagination) أسفل السكشن
   ========================================================================== */
/* بما أننا نعدل CSS فقط، سنقوم بإنشاء الـ Dots كعنصر وهمي أسفل الحاوية */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .theme-container::after {
    content: "" !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 15px !important;
}

/* تصميم الـ Bullets على شكل خطوط (Lines) أنيقة بناءً على ستايل الكود المرفق */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .theme-container::after {
    /* إنشاء الـ 3 نقاط المخصصة للصور الثلاثة */
    background-image: 
        linear-gradient(to right, #000 30px, transparent 30px),
        linear-gradient(to right, #ccc 20px, transparent 20px),
        linear-gradient(to right, #ccc 20px, transparent 20px) !important;
    height: 3px !important;
    width: 80px !important;
    margin: 0 auto !important;
}

/* إذا قمتِ بإضافة كود الـ HTML الخاص بالـ Pagination الفعلي للمتجر، فهذا هو تنسيقه الاحترافي: */
.content-cards-slider-pagination-style-lines {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 20px !important;
}

.content-cards-slider-pagination-bullet {
    text-indent: -9999px; /* إخفاء الأرقام 1, 2, 3 ليكون المظهر Dots ناعم */
    width: 20px !important;
    height: 3px !important;
    background-color: #e5e7eb !important; /* اللون الرمادي للنقاط غير النشطة */
    transition: all 0.3s ease !important;
    cursor: pointer;
}

/* ستايل النقطة النشطة (Active) لتكون بارزة وممتدة كخط بروفيشنال */
.content-cards-slider-pagination-bullet.active {
    width: 35px !important; /* ممتدة طولياً */
    background-color: #000000 !important; /* اللون الأسود النشط */
}
/* 1. توحيد أبعاد الحاوية الخارجية للصور بالكامل */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .media-wrap {
    display: block !important;
    width: 100% !important;
    /* تحديد ارتفاع ثابت وموحد للصور في الموبايل */
    height: 500px !important; 
    aspect-ratio: auto !important; /* إلغاء أي نسب تانية مسببة للمشكلة */
}

/* 2. تكبير الارتفاع وتوحيده على الشاشات الكبيرة (اللابتوب والكمبيوتر) */
@media (min-width: 768px) {
    [section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .media-wrap {
        height: 450px !important; /* تقدري تكبري أو تصغري الرقم ده زي ما تحبي لارتفاع الصور */
    }
}

/* 3. إجبار الصور الداخلية على ملء الحاوية بالكامل بدون تشويه */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .media-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-cover: cover !important; /* بيقص الأطراف الزيادة عشان الصورة متتمطش وتفضل بجودتها */
    object-position: center !important; /* لضمان تركيز الصورة في المنتصف دائمًا */
}

/* 4. إلغاء تأثيرات الـ Grid المعقدة المكتوبة في الـ HTML اللي بتبوظ الارتفاع */
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .grid {
    auto-rows: auto !important;
}
[section-id="04b94568-8d10-4e2b-9ca7-5bd1014b6852"] .grid > *:first-child {
    col-span: span 1 !important;
    row-span: span 1 !important;
}
/* 1. إلغاء الهوامش (Padding) من السكشن الأساسي */
section[section-id="89572136-7834-4a0a-a674-ecee3377326f"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important; /* اختياري: شيليه لو عاوزه تسيب مسافة فوق وتحت الفيديو */
    padding-bottom: 0 !important; /* اختياري */
    background-color: transparent !important; /* تغيير الخلفية السوداء */
}

/* 2. إلغاء قيود العرض الأقصى للحاوية (theme-container) */
section[section-id="89572136-7834-4a0a-a674-ecee3377326f"] .video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. إجبار الفيديو على الفرش بكامل العرض والارتفاع وتغطية الحواف */
section[section-id="89572136-7834-4a0a-a674-ecee3377326f"] video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100vh !important; /* لضمان عدم خروجه عن الشاشة طولياً */
    object-fit: cover !important; /* التعديل السحري: بيفرش الفيديو وبيملا الفراغات السوداء تماماً */
    border-radius: 0 !important; /* إلغاء الحواف الدائرية عشان يفرش لآخر الشاشة بشكل ناعم */
}
/* 1. إخفاء زر الخيارات وسلة الشراء تماماً */

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] button[data-open-quick-view="true"],

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .qty-input {

    display: none !important;

}



/* 2. إخفاء خط الـ Scroll (شريط التقدم السفلي) */

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .products-embla__progress {

    display: none !important;

}



/* 3. تنسيق الأسهم (اليمين واليسار) بشكل بروفيشنال وعصري */

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .products-embla__prev,

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .products-embla__next {

    display: flex !important; /* لضمان ظهورها لو كانت مخفية */

    background-color: #ffffff !important; /* خلفية بيضاء صريحة ونظيفة */

    color: #1a1a1a !important; /* لون السهم غامق */

    border: 1px solid #e5e7eb !important; /* إطار خفيف جداً ناعم */

    border-radius: 50% !important; /* جعل الزر دائري بالكامل لجمالية أكبر */

    width: 44px !important;

    height: 44px !important;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; /* ظل ناعم يعطي عمق وبُعد بروفيشنال */

    transition: all 0.2s ease-in-out !important;

    cursor: pointer !important;

}



/* 4. تأثير عند تمرير الماوس فوق الأسهم (Hover) */

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .products-embla__prev:hover:not(:disabled),

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .products-embla__next:hover:not(:disabled) {

    background-color: #1a1a1a !important; /* تنعكس الخلفية للون غامق عند الوقوف عليها */

    color: #ffffff !important; /* السهم يتحول للأبيض */

    border-color: #1a1a1a !important;

    transform: scale(1.05); /* تكبير السهم بنسبة بسيطة جداً لإعطاء شعور تفاعلي */

}



/* 5. تنسيق الحاوية الخاصة بالأسهم لتظهر في منتصف أسفل السكشن بشكل متناسق */

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .flex.items-center.gap-2 {

    justify-content: center !important;

    margin-top: 1.5rem !important;

}



/* إظهار كونترول الأسهم في الموبايل أيضاً إذا كان القالب يخفيه تلقائياً */

[data-products-carousel="abffb466-b14e-4c9d-9514-a3fd4eb264b8"] .hidden.items-center.gap-2.md\:flex {

    display: flex !important;

    gap: 12px !important;

}
/* 1. تنسيق السكشن بالكامل وخلفيته */
[section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] {
    background-color: #f9fafb !important; /* خلفية هادئة مريحة للعين */
}

/* 2. تحويل العناصر إلى كروت (Boxes) احترافية */
[section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] .grid > .flex-col {
    background-color: #ffffff !important; /* خلفية بيضاء ناصعة لكل كارت */
    border: 1px solid #eaeaea !important; /* إطار خفيف وناعم جداً حول الكارت */
    border-radius: 12px !important; /* زوايا منحنية بشكل عصري */
    padding: 24px 16px !important; /* مسافة داخلية مريحة لتنفس العناصر */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important; /* ظل خفيف غير مزعج */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* حركة سلسة عند التفاعل */
}

/* 3. تأثير احترافي عند تمرير الماوس فوق الكارت (Hover Effect) */
[section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] .grid > .flex-col:hover {
    transform: translateY(-6px) !important; /* يرتفع الكارت للأعلى قليلاً بحركة تفاعلية */
    border-color: #111111 !important; /* يتحول الإطار للون الأسود الفخم أو لون البراند */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important; /* الظل يصبح أعمق */
}

/* 4. تنسيق الأيقونة (الصورة) داخل الكارت */
[section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] .grid img {
    height: 48px !important; /* الحفاظ على حجم متناسق للأيقونات */
    width: 48px !important;
    transition: transform 0.3s ease !important;
}

/* تأثير بسيط على الأيقونة عند عمل hover على الكارت */
[section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] .grid > .flex-col:hover img {
    transform: scale(1.08) !important; /* تكبير بسيط جداً للأيقونة لتفاعل أفضل */
}

/* 5. تنسيق العناوين والنصوص لتكون أكثر فخامة */
[section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] h3.text-foreground {
    color: #111111 !important; /* لون الخط أسود ملكي */
    font-size: 13px !important; /* حجم خط ناعم وأنيق للمجوهرات */
    font-weight: 500 !important; /* خط متوسط السمك وليس ضخمًا */
    letter-spacing: 0.05em !important; /* تباعد بسيط بين الحروف اللاتينية للمسة جمالية */
    margin-top: 4px !important;
}

/* ضبط تقسيمات الشبكة (Grid) في حال كانت العناصر 3 فقط لتتوسط الشاشة بشكل ممتاز */
@media (min-width: 1024px) {
    [section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] .grid {
        display: flex !important;
        justify-content: center !important;
        gap: 24px !important;
    }
    [section-id="4c904f15-5943-4cef-af96-003ec3e49ed8"] .grid > .flex-col {
        flex: 0 1 280px !important; /* عرض متناسق وموحد لكل الكروت على اللابتوب */
    }
}
/* 1. تغيير خلفية القائمة الجانبية بالكامل إلى اللون الكحلي */
#mobile-drawer .bg-background, 
#mobile-drawer .flex.h-full.flex-col {
    background-color: #12143B !important; /* درجة كحلي فاخرة ومتناسقة مع المجوهرات */
}

/* 2. تحويل جميع النصوص والأزرار داخل القائمة للون الأبيض */
#mobile-drawer a, 
#mobile-drawer button {
    color: #ffffff !important;
    font-weight: 400 !important;
    transition: all 0.2s ease-in-out !important;
}

/* تأثير خفيف عند الضغط أو تمرير الماوس فوق الروابط */
#mobile-drawer a:hover, 
#mobile-drawer button:hover {
    opacity: 0.8 !important;
    padding-inline-start: 28px !important; /* حركة إزاحة بسيطة تعطي شعوراً احترافياً للمستخدم */
}

/* 3. تنسيق الخط الفاصل بين الأقسام ليتناسب مع الخلفية الغامقة */
#mobile-drawer .border-border-light {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 4. إضافة سهم احترافي (Arrow) بجانب روابط الكولكشن والروابط الرئيسية */
#mobile-drawer .flex.w-full.flex-col a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* إنشاء السهم بالـ CSS (بجانب كل لينك) */
#mobile-drawer .flex.w-full.flex-col a::after {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.7) !important; /* لون السهم أبيض شفاف قليلاً */
    border-right: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    transform: rotate(45deg) !important; /* تدوير المربع ليعطي شكل سهم > */
    margin-inline-end: 4px !important;
    transition: transform 0.2s ease !important;
}

/* دوران السهم قليلاً عند تحريك الماوس أو الضغط ليعطي لمسة تفاعلية */
#mobile-drawer .flex.w-full.flex-col a:hover::after {
    border-color: #ffffff !important;
    transform: rotate(45deg) translateX(2px) !important;
}

/* 5. ضبط لون أيقونة كورة تغيير الدولة لتصبح بيضاء */
#mobile-drawer button svg {
    stroke: #ffffff !important;
}