/* Menu Button */
#mobile-drawer-dialog button{
    color:#fff !important;
}

/* Search */
header button{
    color:#fff !important;
}

/* Badge */
[data-cart-badge]{
    background:#fff !important;
    color:#000 !important;
}

/* ================================
   Scroll Header
================================ */

header.scrolled{
    background:#000 !important;
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

/* أثناء الـ Scroll يفضل اللون أبيض */
header.scrolled a,
header.scrolled svg,
header.scrolled button{
    color:#fff !important;
    fill:#fff !important;
}
/* خلفية المنيو */
#mobile-drawer .bg-background{
    background: #000 !important;
}

/* جميع روابط المنيو */
#mobile-drawer a,
#mobile-drawer button{
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
    position: relative;
    padding: 16px 24px !important;
    font-size: 15px;
    font-weight: 500;
}

/* إضافة سهم لكل عنصر */
#mobile-drawer a::after,
#mobile-drawer button::after{
    content: "›";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #fff;
    transition: .3s;
}

/* حركة السهم عند الـ Hover */
#mobile-drawer a:hover::after,
#mobile-drawer button:hover::after{
    right: 18px;
}

/* Hover */
#mobile-drawer a:hover,
#mobile-drawer button:hover{
    background: rgba(255,255,255,.08);
}

/* الخط الفاصل */
#mobile-drawer .border-border-light{
    border-color: rgba(255,255,255,.15) !important;
}
/* القسم بالكامل */
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"]{
    display:flex;
    align-items:flex-end !important;   /* أسفل الصورة */
    justify-content:center !important; /* منتصف الصورة */
}

/* الكونتينر */
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"] .theme-container{
    width:100%;
    max-width:100% !important;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    text-align:center;
    padding-bottom:60px;
}

/* الكلام */
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"] .theme-container > div{
    width:100%;
    max-width:100% !important;
    align-items:center;
}

/* الزر */
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"] .btn{
    background:#000 !important;
    border:1px solid #fff !important;
    color:#fff !important;   /* SHOP NOW أبيض */
    padding:14px 38px;
    font-weight:600;
    text-transform:uppercase;
}

/* النص داخل الزر */
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"] .btn,
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"] .btn *{
    color:#fff !important;
}

/* النص فوق الزر */
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"] p{
    color:#fff !important;
    text-align:center;
}

/* Hover */
[section-id="a6cc0035-2ebc-45ea-b9d3-f75dd0726bc7"] .btn:hover{
    background:#fff !important;
    color:#000 !important;
}
/* 1. تنسيق وتوسيط العنوان والـ Hint */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .flex.items-center.justify-between {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-center: center;
    text-align: center;
    gap: 4px;
    width: 100%;
}

/* إضافة النص الفرعي (Hint) عبر الـ CSS دون تعديل الـ HTML */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .text-foreground.text-xl::after {
    content: "Shop now, Most popular Items";
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-style: italic;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 4px;
    text-transform: none;
    letter-spacing: normal;
}

/* 2. التحكم في عدد المنتجات حسب الشاشة */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla {
    --slide-spacing: 1rem;
    /* الموبايل: منتجين في الشاشة (100% / 2) */
    --slide-size: 50%; 
    position: relative;
}

[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
  }
  /* 1. إخفاء زر Select Options تماماً من جميع المنتجات */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] button[data-open-quick-view="true"] {
    display: none !important;
}

/* 2. توسيط العنوان الرئيسي والـ Hint */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* إضافة نص الـ Hint المائل تحت كلمة BEST SELLERS باستخدام الـ CSS */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .flex.items-center.justify-between h2::after {
    content: "Shop now, Most popular Items";
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-transform: none !important;
    color: #6b7280; /* لون رمادي خفيف مناسب للـ Hint */
    margin-top: 4px !important;
    opacity: 0.8;
}

/* 3. إظهار الأسهم (يمين وشمال) بشكل واضح وتثبيتها فوق الكاروسيل */
/* أولاً: جعل الحاوية الرئيسية بوضعية relative لتثبيت الأسهم عليها */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] {
    position: relative !important;
}

/* ثانياً: إلغاء كلاس الـ hidden الافتراضي الذي يخفي الأسهم في الموبايل */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .hidden.items-center.gap-2.md\:flex {
    display: flex !important; /* إظهار حاوية الأسهم دائماً */
    position: absolute !notimportant;
    width: 100% !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    justify-content: space-between !important;
    pointer-events: none !important; /* لمنع حجب الضغط على المنتجات */
    z-index: 30 !important;
    padding: 0 5px !important;
}

/* ثالثاً: تنسيق الأزرار (الأسهم) لتظهر بشكل دائري بارز على الأطراف */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla__prev,
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla__next {
    pointer-events: auto !important; /* إعادة تفعيل الضغط على الأسهم */
    background-color: rgb(255 255 255 / 0.95) !important; /* خلفية بيضاء بارزة */
    color: #1a1a1a !important; /* لون السهم داخلياً */
    border-radius: 9999px !important; /* جعل السهم دائري تماماً */
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.15) !important; /* إضافة ظل ليظهر بوضوح */
    transition: all 0.2s ease !important;
}

[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla__prev:hover,
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla__next:hover {
    background-color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* 4. التحكم في ريسبرونسيف المنتجات (2 في الموبايل و4 في اللابتوب) */
[data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla {
    --slide-spacing: 1rem;
    --slide-size: 50% !important; /* منتجين في الموبايل بشكل افتراضي */
}

/* شاشات اللابتوب والكمبيوتر (ابتداءً من 1024 بكسل) */
@media (min-width: 1024px) {
    [data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .products-embla {
        --slide-size: 25% !important; /* 4 منتجات في اللابتوب */
    }
    [data-products-carousel="aaae4225-5749-4685-8311-404f32f7d2b4"] .hidden.items-center.gap-2.md\:flex {
        padding: 0 15px !important; /* زيادة المسافة الجانبية للأسهم في اللابتوب */
    }
}
/* 1. توسيط العنوان الرئيسي (CLASSIC SHOES) */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* 2. إضافة نص الـ Hint المائل تحت العنوان تلقائياً */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .flex.items-center.justify-between h2::after {
    content: "Shop now, Most popular Items";
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-transform: none !important;
    color: #6b7280; /* لون رمادي هادئ مناسب */
    margin-top: 6px !important;
    opacity: 0.8;
}

/* 3. تهيئة الحاوية لتثبيت الأسهم بشكل طائر على الأطراف */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] {
    position: relative !important;
}

/* 4. إلغاء إخفاء حاوية الأسهم في الموبايل وجعلها مرئية وعائمة دائماً */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .hidden.items-center.gap-2.md\:flex {
    display: flex !important; /* إظهار الأسهم على الموبايل واللابتوب */
    position: absolute !important;
    width: 100% !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    justify-content: space-between !important;
    pointer-events: none !important; /* لضمان عدم حجب الضغط عن الكروت خلفها */
    z-index: 30 !important;
    padding: 0 5px !important;
}

/* 5. تصميم وتنسيق أزرار الأسهم لتصبح دائرية وواضحة جداً */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__prev,
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__next {
    pointer-events: auto !important; /* إعادة تفعيل الضغط على السهم */
    background-color: rgb(255 255 255 / 0.95) !important; /* خلفية بيضاء صريحة */
    color: #1a1a1a !important; /* لون أيقونة السهم */
    border-radius: 9999px !important; /* شكل دائري */
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15) !important; /* ظل واضح لإبراز السهم */
    transition: all 0.2s ease-in-out !important;
}

/* حركة بسيطة تفاعلية عند تمرير الماوس فوق السهم */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__prev:hover,
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__next:hover {
    background-color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* 6. تحديد عدد المنتجات: 2 في الموبايل و 4 في اللابتوب */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla {
    --slide-spacing: 1rem;
    --slide-size: 50% !important; /* 50% تعني ظهور منتجين في الشاشة */
}

/* عند الانتقال لشاشات اللابتوب والكمبيوتر المكتبي (أكبر من 1024px) */
@media (min-width: 1024px) {
    [data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla {
        --slide-size: 25% !important; /* 25% تعني ظهور 4 منتجات في الشاشة */
    }
    [data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .hidden.items-center.gap-2.md\:flex {
        padding: 0 15px !important; /* إبعاد الأسهم قليلاً عن المنتجات في الشاشات الواسعة */
    }
}
/* 1. إخفاء زر Add to cart تماماً من جميع منتجات هذا السيكشن */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] button[data-add-to-cart] {
    display: none !important;
}

/* 2. توسيط العنوان الرئيسي (CLASSIC SHOES) */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* 3. إضافة نص الـ Hint المائل تحت عنوان CLASSIC SHOES تلقائياً */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .flex.items-center.justify-between h2::after {
    content: "Shop now, Most popular Items";
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-transform: none !important;
    color: #6b7280; /* لون رمادي خفيف متناسق */
    margin-top: 6px !important;
    opacity: 0.8;
}

/* 4. تهيئة موضع الحاوية الأساسية لتثبيت الأسهم بشكل طائر على الأطراف */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] {
    position: relative !important;
}

/* 5. إجبار حاوية الأسهم (التي كانت تحتوي على كلاس hidden) على الظهور دائماً فوق الكاروسيل */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .hidden.items-center.gap-2.md\:flex {
    display: flex !important; /* إظهار الأسهم على الموبايل واللابتوب */
    position: absolute !important;
    width: 100% !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    justify-content: space-between !important;
    pointer-events: none !important; /* لعدم حجب الضغط على الكروت */
    z-index: 30 !important;
    padding: 0 5px !important;
}

/* 6. تنسيق الأزرار (الأسهم الجانبية) لتكون دائرية، بارزة، وواضحة جداً */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__prev,
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__next {
    pointer-events: auto !important; /* تفعيل الضغط على الأسهم مجدداً */
    background-color: rgb(255 255 255 / 0.95) !important; /* خلفية بيضاء ناصعة */
    color: #1a1a1a !important; /* لون السهم الداخلي */
    border-radius: 9999px !important; /* دائري بالكامل */
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15) !important; /* تأثير الظل لبروز ممتاز */
    transition: all 0.2s ease-in-out !important;
}

/* حركة تفاعلية مرنة عند تمرير الماوس فوق السهم */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__prev:hover,
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla__next:hover {
    background-color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* 7. ريسبرونسيف عرض المنتجات (2 في الموبايل و 4 في اللابتوب) */
[data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla {
    --slide-spacing: 1rem;
    --slide-size: 50% !important; /* تعادل منتجين كعرض افتراضي للموبايل */
}

/* شاشات اللابتوب والكمبيوتر (ابتداءً من حجم 1024px) */
@media (min-width: 1024px) {
    [data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .products-embla {
        --slide-size: 25% !important; /* تعادل 4 منتجات في الشاشة للابتوب */
    }
    [data-products-carousel="14b15beb-64b3-44d0-9cdc-00ca363d09d8"] .hidden.items-center.gap-2.md\:flex {
        padding: 0 15px !important; /* تحسين أبعاد توزيع الأسهم الجانبية للابتوب */
    }
}
/* 1. إخفاء زر Add to cart تماماً من جميع منتجات هذا السيكشن */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] button[data-add-to-cart] {
    display: none !important;
}

/* 2. توسيط العنوان الرئيسي (CASUAL SHOES) */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* 3. إضافة نص الـ Hint المائل تحت عنوان CASUAL SHOES تلقائياً */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .flex.items-center.justify-between h2::after {
    content: "Shop now, Most popular Items";
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-transform: none !important;
    color: #6b7280; /* لون رمادي ناعم ومتناسق */
    margin-top: 6px !important;
    opacity: 0.8;
}

/* 4. تهيئة موضع الحاوية الأساسية لتثبيت الأسهم بشكل طائر على الأطراف */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] {
    position: relative !important;
}

/* 5. إجبار حاوية الأسهم الجانبية على الظهور دائماً في الموبايل واللابتوب */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .hidden.items-center.gap-2.md\:flex {
    display: flex !important; 
    position: absolute !important;
    width: 100% !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    justify-content: space-between !important;
    pointer-events: none !important; /* لمنع حجب الضغط عن كروت المنتجات */
    z-index: 30 !important;
    padding: 0 5px !important;
}

/* 6. تنسيق أزرار الأسهم لتكون دائرية، بارزة، وواضحة جداً فوق العناصر */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .products-embla__prev,
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .products-embla__next {
    pointer-events: auto !important; /* تفعيل الضغط على الأسهم */
    background-color: rgb(255 255 255 / 0.95) !important; /* خلفية بيضاء صريحة */
    color: #1a1a1a !important; /* لون السهم الداخلي */
    border-radius: 9999px !important; /* دائري بالكامل */
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15) !important; /* ظل لإبراز السهم */
    transition: all 0.2s ease-in-out !important;
}

/* تأثير مرن وتفاعلي عند تمرير الماوس فوق السهم */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .products-embla__prev:hover,
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .products-embla__next:hover {
    background-color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* 7. ضبط تجاوب عرض المنتجات (منتجين في الموبايل و 4 في اللابتوب) */
[data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .products-embla {
    --slide-spacing: 1rem;
    --slide-size: 50% !important; /* تعني ظهور منتجين على الشاشات الصغيرة */
}

/* شاشات اللابتوب والكمبيوتر المكتبي (ابتداءً من حجم 1024px) */
@media (min-width: 1024px) {
    [data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .products-embla {
        --slide-size: 25% !important; /* تعني ظهور 4 منتجات في الشاشة */
    }
    [data-products-carousel="7fcc3fab-40fa-4ff4-8727-f59d3376d3f4"] .hidden.items-center.gap-2.md\:flex {
        padding: 0 15px !important; /* إبعاد الأسهم قليلاً عن حواف المنتجات */
    }
}
/* 1. إخفاء زر Add to cart تماماً من جميع منتجات هذا السيكشن */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] button[data-add-to-cart] {
    display: none !important;
}

/* 2. توسيط العنوان الرئيسي (ACCESSORIES) */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* 3. إضافة نص الـ Hint المائل تحت عنوان ACCESSORIES تلقائياً */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .flex.items-center.justify-between h2::after {
    content: "Shop now, Most popular Items";
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-transform: none !important;
    color: #6b7280; /* لون رمادي ناعم ومتناسق */
    margin-top: 6px !important;
    opacity: 0.8;
}

/* 4. تهيئة موضع الحاوية الأساسية لتثبيت الأسهم بشكل طائر على الأطراف */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] {
    position: relative !important;
}

/* 5. إجبار حاوية الأسهم الجانبية على الظهور دائماً في الموبايل واللابتوب */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .hidden.items-center.gap-2.md\:flex {
    display: flex !important; 
    position: absolute !important;
    width: 100% !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    justify-content: space-between !important;
    pointer-events: none !important; /* لمنع حجب الضغط عن كروت المنتجات */
    z-index: 30 !important;
    padding: 0 5px !important;
}

/* 6. تنسيق أزرار الأسهم لتكون دائرية، بارزة، وواضحة جداً فوق العناصر */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .products-embla__prev,
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .products-embla__next {
    pointer-events: auto !important; /* تفعيل الضغط على الأسهم */
    background-color: rgb(255 255 255 / 0.95) !important; /* خلفية بيضاء صريحة */
    color: #1a1a1a !important; /* لون السهم الداخلي */
    border-radius: 9999px !important; /* دائري بالكامل */
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15) !important; /* ظل لإبراز السهم */
    transition: all 0.2s ease-in-out !important;
}

/* تأثير مرن وتفاعلي عند تمرير الماوس فوق السهم */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .products-embla__prev:hover,
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .products-embla__next:hover {
    background-color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* 7. ضبط تجاوب عرض المنتجات (منتجين في الموبايل و 4 في اللابتوب) */
[data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .products-embla {
    --slide-spacing: 1rem;
    --slide-size: 50% !important; /* تعني ظهور منتجين على الشاشات الصغيرة */
}

/* شاشات اللابتوب والكمبيوتر المكتبي (ابتداءً من حجم 1024px) */
@media (min-width: 1024px) {
    [data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .products-embla {
        --slide-size: 25% !important; /* تعني ظهور 4 منتجات في الشاشة */
    }
    [data-products-carousel="7097757b-21a9-4e05-b0a6-2b24228f6518"] .hidden.items-center.gap-2.md\:flex {
        padding: 0 15px !important; /* إبعاد الأسهم قليلاً عن حواف المنتجات */
    }
}
/* Section Background */
.section-benefits {
    background: #FFFFFF !important;
    padding: 60px 20px !important;
}

/* Center Content */
.section-benefits .theme-container,
.section-benefits .grid,
.section-benefits .flex {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column !important;
    text-align: center;
}

/* ترتيب العناصر: الكلام الأول ثم الصورة */
.section-benefits .flex {
    gap: 25px !important;
}

.section-benefits .space-y-2 {
    order: 1;
    max-width: 700px;
}

.section-benefits picture {
    order: 2;
}

.section-benefits img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain;
}

/* شكل النص */
.section-benefits p {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.8;
    margin: 0 auto;
}
/* إضافة عنوان ABOUT US */
.section-benefits .flex::before {
    content: "ABOUT US";
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: #471212;
    letter-spacing: 3px;
    margin-bottom: 30px;
    font-family: inherit;
}

/* تكبير الصورة */
.section-benefits picture {
    order: 2;
    margin-top: 30px;
}

.section-benefits img {
    width: 180px !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
}

/* النص */
.section-benefits .space-y-2 {
    order: 1;
}

.section-benefits p {
    font-size: 18px !important;
    line-height: 2;
    color: #000000 !important;
    max-width: 750px;
    margin: auto;
}
/* كل النصوص باللون الأبيض */
#footer,
#footer p,
#footer h3,
#footer a,
#footer li,
#footer span {
    color: #fff !important;
}

/* أيقونات السوشيال والإيميل والتليفون */
#footer svg {
    color: #fff !important;
    fill: currentColor !important;
}

/* تكبير اللوجو */
#footer img[alt="cucashoes"] {
    width: 140px !important;
    height: auto !important;
}

/* تأثير بسيط على الروابط */
#footer a:hover {
    color: #e76a2e !important;
    transition: 0.3s;
}
button[commandfor="features-details"] {
    color: #fff !important;
}

button[commandfor="features-details"] span,
button[commandfor="features-details"] svg {
    color: #fff !important;
}
/* =================================================== */
/* 1. التعديلات السابقة (العنوان وإخفاء الأزرار) */
/* =================================================== */

/* إخفاء زر Select options من المنتجات */
.section-products [data-open-quick-view="true"] {
    display: none !important;
}

/* توسيط منطقة العنوان بالكامل */
.section-products .flex.items-center.justify-between {
    justify-content: center !important;
    text-align: center !important;
}

/* جعل كلمة BOOTS عمودية لتسمح بالنص المائل تحتها */
.section-products h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px;
}

/* إضافة خط الـ Hint المائل تحت كلمة BOOTS */
.section-products h2::after {
    content: "SHOP NOW, MOST POPULAR ITEMS";
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    color: #6b7280;
    letter-spacing: 0.05em;
}

/* =================================================== */
/* 2. تعديل مكان الأسهم لتصبح يمين ويسار المنتجات */
/* =================================================== */

/* جعل حاوية السيكشن الأساسية مرجعاً لتحديد الأبعاد */
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] {
    position: relative;
}

/* إعادة تموضع الحاوية التي تحتوي على الأسهم */
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] .flex.items-center.gap-2:last-child {
    position: static; /* لفك الارتباط الافتراضي */
}

/* إخفاء شريط التقدم الطويل للحفاظ على نظافة التصميم (اختياري) */
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] .products-embla__progress {
    display: none !important;
}

/* إظهار حاوية الأسهم بشكل منفصل وإعطائها موضعاً مطلقاً */
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] .hidden.items-center.gap-2.md\:flex {
    display: block !important; /* إظهارها دائماً حتى على الموبايل إذا رغبتِ */
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none; /* لمنع الأسهم من حجب الضغط على المنتجات */
    z-index: 10;
}

/* تنسيق السهمين (يمين ويسار) */
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] .products-embla__prev,
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] .products-embla__next {
    position: absolute;
    pointer-events: auto; /* إعادة تفعيل الضغط على الأزرار نفسها */
    background: rgba(255, 255, 255, 0.8) !important; /* خلفية بيضاء شفافة لتظهر فوق الصور */
    color: #000 !important; /* لون السهم أسود */
    border: 1px solid #e5e7eb;
    border-radius: 50% !important; /* جعل الأزرار دائرية بشكل أنيق */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* ظل خفيف خلف الزر */
    transition: all 0.2s ease;
}

/* تحديد مكان السهم اليسار */
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] .products-embla__prev {
    left: -10px; /* يمكنكِ تعديل الرقم لتقريبه أو إبعاده عن المنتجات */
}

/* تحديد مكان السهم اليمين */
[data-products-carousel="e82375f6-3bed-4462-9574-befddcb129eb"] .products-embla__next {
    right: -10px;
 }
/* توسيط اللوجو */
#footer .space-y-4 > img {
    display: block;
    margin: 0 auto 20px;
    width: 180px !important; /* غيري الرقم حسب الحجم اللي عايزاه */
    height: auto !important;
}

/* توسيط محتويات أول عمود */
#footer .space-y-4 {
    text-align: center;
}

#footer .space-y-4 .flex {
    justify-content: center;
}

/* إخفاء الإيميل */
#footer a[href^="mailto:"] {
    display: none !important;
}

/* إخفاء أيقونة الإيميل */
#footer li:has(a[href^="mailto:"]) {
    display: none !important;
}

/* تكبير النصوص */
#footer h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
}

#footer a,
#footer p,
#footer li,
#footer span {
    font-size: 17px !important;
    line-height: 1.8;
}
/* تحويل ألوان نصوص القائمة الأساسية والأيقونات والروابط إلى الأبيض */
header, 
header a, 
header button, 
header svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* لضمان تغيير لون أيقونة السيرش وأيقونات السلة وحسابي */
header svg path {
  stroke: #ffffff !important;
  fill: #ffffff !important;
}

/* الحفاظ على لون رقم السلة باللون الأبيض لكي يظهر بوضوح داخل دائرته الحمراء */
header [data-cart-badge] {
  color: #ffffff !important;
}