/* Mobile */
@media (max-width: 767px) {

    /* صورتين جنب بعض */
    .section-gallery .grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:15px !important;
    }

    /* الكارت */
    .section-gallery .group{
        overflow:visible !important;
        background:transparent !important;
        box-shadow:none !important;
        border-radius:12px;
    }

    /* الصورة */
    .section-gallery .media-wrap{
        aspect-ratio:1/1;
        border-radius:12px;
        overflow:hidden;
    }

    /* إلغاء الـ Overlay */
    .section-gallery .group::before{
        display:none !important;
    }

    /* البوكس ينزل تحت الصورة */
    .section-gallery .absolute{
        position:static !important;
        display:block !important;
        padding:10px 0 0 !important;
        text-align:center;
    }

    /* شكل البوكس */
    .section-gallery .btn{
        display:block;
        width:100%;
        background:#fff !important;
        color:#000 !important;
        border:1px solid #e5e5e5 !important;
        border-radius:8px;
        padding:12px !important;
        font-size:15px;
        font-weight:600;
        text-transform:none;
        box-shadow:none;
    }

    .section-gallery .btn:hover{
        color:rgb(231,106,46) !important;
        border-color:rgb(231,106,46) !important;
    }
  /* =========================
   ABOUT US - TAGHLEEF PRO STYLE
========================= */

.section-benefits{
    background:#024664ff !important;
    padding:100px 30px !important;
}

.section-benefits .theme-container{
    max-width:980px !important;
    margin:auto;
}

.section-benefits .grid{
    display:block !important;
}

.section-benefits .flex{
    display:block !important;
}

.section-benefits .space-y-2{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* Heading */

.section-benefits h3{
    font-family:Inter, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:42px !important;
    font-weight:600 !important;
    color:#FFFFFF !important;
    text-align:center;
    line-height:1.2;
    letter-spacing:-0.03em;
    margin:0;
}

/* Paragraph */

.section-benefits p{
    font-family:Inter, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:18px !important;
    font-weight:400 !important;
    color:#FFFFFF !important;
    text-align:center;
    line-height:2;
    letter-spacing:.02em;
    max-width:820px;
    margin:auto;
}

/* Mobile */

@media(max-width:768px){

.section-benefits{
    padding:60px 20px !important;
}

.section-benefits h3{
    font-size:30px !important;
}

.section-benefits p{
    font-size:15px !important;
    line-height:1.9;
}

}
  /* Mobile Reviews */
@media (max-width: 768px) {

    /* إلغاء الـ Slider */
    .embla__container{
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        gap: 20px;
    }

    /* كل Review تاخد عرض كامل */
    .embla__slide{
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* إخفاء الـ Progress والأسهم */
    .embla__progress,
    .embla__prev,
    .embla__next{
        display: none !important;
    }

    /* إلغاء إخفاء المحتوى */
    .embla__viewport{
        overflow: visible !important;
    }
}
  /* ===========================
   MOBILE ONLY
=========================== */
@media (max-width:767px){

/* صورة واحدة فقط */
[data-products-carousel] .products-embla{
    --slide-size:100% !important;
}

/* إخفاء كل النصوص */
[data-products-carousel] h2,
[data-products-carousel] h3,
[data-products-carousel] p,
[data-products-carousel] .flex-1,
[data-products-carousel] .text-foreground,
[data-products-carousel] .flex.items-center.gap-2{
    display:none !important;
}

/* إخفاء كل الأزرار */
[data-products-carousel] button[data-open-quick-view],
[data-products-carousel] [data-quantity-section],
[data-products-carousel] [data-wishlist-btn]{
    display:none !important;
}

/* إزالة المسافات تحت الصورة */
[data-product-card]{
    gap:0 !important;
}

[data-product-card] > div{
    display:none !important;
}

/* إظهار الأسهم */
[data-products-carousel] .md\:flex{
    display:flex !important;
}

[data-products-carousel] .products-embla__prev,
[data-products-carousel] .products-embla__next{
    display:flex !important;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* إخفاء الـ Progress */
[data-products-carousel] .products-embla__progress{
    display:none !important;
}

/* توسيط الأسهم */
[data-products-carousel] .flex.items-center.gap-2{
    justify-content:space-between;
    display:flex !important;
}

}
  :is(h1, h2, h3, h4, h5, h6) {
    font-size: 1.9em !important;
}
  /* جميع الفقرات */
p {
    font-size: 18px !important;
    line-height: 1.4;
}
  /* --- توحيد مظهر بطاقة المنتج على الموبايل والديسكتوب --- */

/* 1. إجبار بطاقة المنتج على الموبايل لتكون مرنة وعمودية مثل الديسكتوب */
[data-product-card] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* 2. ضبط رابط الصورة ليكون كاملاً وفوق النصوص دائمًا */
[data-product-card] > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* 3. إظهار منطقة النصوص (العنوان، النجوم، السعر) وترتيبها */
[data-product-card] .flex-1.flex-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* 4. جعل عنوان المنتج باللون الأسود الواضح وعريض */
[data-product-card] h3,
[data-product-card] h3 a {
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: block !important;
}

/* 5. إجبار النجوم (التقييم) على الظهور */
[data-product-card] .flex.items-center.gap-2 {
    display: flex !important;
}

/* 6. إبراز السعر وتكبير خطه وجعله أسود صريح */
[data-product-card] p.text-foreground.text-sm {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-top: 4px !important;
    display: block !important;
}

/* 7. إجبار زر "Select options" (أو سلة المشتريات والكمية) على الظهور أسفل السعر في الموبايل */
[data-product-card] .mt-auto,
[data-product-card] button.btn-outlined.btn-lg {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 8. في حال وجود حاوية الأزرار مخفية بسبب نظام الشبكة (Grid) للموبايل */
.group\/grid[data-grid="one"] [data-product-card] .mt-auto {
    display: block !important;
}
  /* تحويل الحاوية الرئيسية إلى Flexbox وترتيب العناصر عمودياً */
section.relative {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: min-content !important;
  padding: 24px 16px !important; /* مسافات داخلية مناسبة */
}

/* إلغاء التموضع المطلق عن حاوية الصورة لتأخذ مساحتها الطبيعية في الأعلى */
section.relative .absolute.inset-0.-z-10 {
  position: relative !important;
  z-index: auto !important;
  width: 100% !important;
  height: 300px !important; /* يمكنكِ التحكم في ارتفاع الصورة من هنا */
  order: 1 !important; /* جعلها تظهر أولاً */
}

/* تحسين أبعاد الصورة داخل الحاوية */
section.relative .absolute.inset-0.-z-10 img {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* إلغاء طبقة اللون الأبيض الشفافة أو جعلها متناسقة */
section.relative .absolute.inset-0.bg-white\/20 {
  display: none !important; /* إخفاء الطبقة الشفافة التي كانت فوق الصورة */
}

/* ضبط حاوية النص لتظهر أسفل الصورة */
section.relative .theme-container {
  position: relative !important;
  order: 2 !important; /* جعل النص يظهر ثانياً (تحت الصورة) */
  margin-top: 24px !important; /* مسافة بين الصورة والكلام */
  max-width: 768px !important;
}
  }
/* Desktop & Laptop Only */
@media (min-width: 768px) {

  /* 3 Categories per row */
  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:30px !important;
  }

  /* Category Card */
  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .group{
    display:flex !important;
    flex-direction:column;
    overflow:visible !important;
    background:#fff;
    border-radius:10px;
  }

  /* Image */
  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .media-wrap{
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:10px;
  }

  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Move button below image */
  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .absolute.inset-0{
    position:static !important;
    inset:auto !important;
    display:flex !important;
    justify-content:center;
    align-items:center;
    padding:18px 0 10px;
    background:transparent !important;
  }

  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .space-y-6{
    margin:0 !important;
  }

  /* Button Style */
  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .btn{
    width:220px;
    min-height:48px;
    border-radius:6px;
    font-size:16px;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  /* Remove any overlay */
  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .group::before,
  section[section-id="9afdf722-9ee2-44bb-98f2-ab9cb7b7236e"] .group::after{
    display:none !important;
  }
}
/* جعل الكارت عمودي */
section[section-id="8680af84-fdbb-47b6-9d86-a5c4ec14e16e"] .group{
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* إلغاء الـ Overlay */
section[section-id="8680af84-fdbb-47b6-9d86-a5c4ec14e16e"] .absolute.inset-0{
    position: static !important;
    inset: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    padding: 0;
}

/* تنسيق الزر */
section[section-id="8680af84-fdbb-47b6-9d86-a5c4ec14e16e"] .btn{
    width: fit-content;
    min-width: 220px;
    border-radius: 50px;
    text-align: center;
}

/* إزالة المسافة الداخلية */
section[section-id="8680af84-fdbb-47b6-9d86-a5c4ec14e16e"] .space-y-6{
    row-gap: 0 !important;
  }
@media (min-width:1024px){

[data-products-carousel="8d767f03-4824-460a-977c-433a7085cedb"] .products-embla{
    --slide-size:100% !important;
}

}

/* التعديل مخصص لشاشات اللابتوب والشاشات الكبيرة */
@media (min-width: 1024px) {
    /* 1. تغيير الخلفية للون الأزرق وتوسيط محتوى القسم */
    section[section-id="cec7e885-7d8f-4c20-b971-b1a3c2000fac"] {
        background-color: #024664 !important; /* يمكنك تغيير درجة الأزرق هنا */
    }

    /* 2. إلغاء نظام الأعمدة (Grid) وتوسيط النص في المنتصف تماماً */
    section[section-id="cec7e885-7d8f-4c20-b971-b1a3c2000fac"] .grid {
        display: flex !important;
        justify-content: center !important;
    }

    /* 3. جعل عرض النص مريحاً للقراءة وتغيير لونه للأبيض ليتناسب مع الأزرق */
    section[section-id="cec7e885-7d8f-4c20-b971-b1a3c2000fac"] .space-y-2 {
        max-width: 700px; /* يمنع النص من التمدد بشكل يعيب المظهر */
        margin: 0 auto;
    }

    section[section-id="cec7e885-7d8f-4c20-b971-b1a3c2000fac"] h3,
    section[section-id="cec7e885-7d8f-4c20-b971-b1a3c2000fac"] p {
        color: #ffffff !important; /* تحويل النص للأبيض لوضوح القراءة */
    }
}
/* التعديل مخصص لشاشات اللابتوب والشاشات الكبيرة */
@media (min-width: 1024px) {
    
    /* 1. تحويل السيكشن الرئيسي ليعرض العناصر عمودياً تحت بعضها */
    section.relative.flex.items-center {
        flex-direction: column !important;
        align-items: flex-start !important; /* محاذاة المحتوى للبداية */
        padding: 0 !important; /* إزالة البادينج الافتراضي لضبط المسافات */
        overflow: visible !important;
    }

    /* 2. تحرير حاوية الصورة من الوضع المطلق وإعطائها أبعاداً مناسبة للابتوب */
    section.relative.flex.items-center .absolute.inset-0.-z-10 {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 400px !important; /* يمكنكِ التحكم في ارتفاع الصورة باللابتوب من هنا */
    }

    /* 3. إلغاء الطبقة الشفافة البيضاء التي كانت فوق الصورة */
    section.relative.flex.items-center .absolute.inset-0.bg-white\/20 {
        display: none !important;
    }

    /* 4. تنسيق حاوية النص لتبدأ مباشرة تحت الصورة مع ترك مسافة مريحة */
    section.relative.flex.items-center .theme-container {
        position: relative !important;
        width: 100% !important;
        padding: 2rem 1rem !important; /* مسافة داخلية للنص (فوق وتحت ويمين ويسار) */
    }
    
    /* 5. جعل النص يمتد بكامل العرض المتاح (أو العرض الذي تفضلينه) */
    section.relative.flex.items-center .theme-container .max-w-\[768px\] {
        max-width: 100% !important;
    }
}
/* Desktop فقط */
@media (min-width: 1024px) {

  /* إخفاء اسم المنتج والسعر والتقييم والزر */
  section[section-id="8d767f03-4824-460a-977c-433a7085cedb"] h3,
  section[section-id="8d767f03-4824-460a-977c-433a7085cedb"] p,
  section[section-id="8d767f03-4824-460a-977c-433a7085cedb"] .flex.gap-0\.5,
  section[section-id="8d767f03-4824-460a-977c-433a7085cedb"] .btn-outlined {
    display: none !important;
  }

  /* إخفاء أي جزء تحت الصورة */
  section[section-id="8d767f03-4824-460a-977c-433a7085cedb"] [data-product-card] > div:not(:first-child) {
    display: none !important;
  }

  /* تصغير الصورة */
  section[section-id="8d767f03-4824-460a-977c-433a7085cedb"] [data-product-card] > a {
    width: 65% !important;
    margin: 0 auto !important;
  }