/* للديسكتوب الحاوية الرئيسية للسلايدر لتلتزم بنسبة 1:1 */
@media (min-width: 768px) {
.ab-slider {
    width: 100% !important;
    aspect-ratio: 19 / 5.5 !important;
    overflow: hidden !important;
    margin: 5px 0;
    border-radius: 5px;  
  }}
/* ضبط الحاوية الرئيسية للسلايدر لتلتزم بنسبة 1:1 */
@media (max-width: 768px) {
.ab-slider {
    width: 100% !important;
    aspect-ratio: 10 / 16 !important;
    overflow: hidden !important;
    margin: 5px 0;
    border-radius: 5px;
}}

/* ضبط المسار الداخلي للشريحة */
.ab-slider-track, 
.ab-slider-slide {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* ضبط عنصر الـ picture والـ img لملء المساحة بالنسبة المطلوبة */
.ab-slider-slide picture,
.ab-slider-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    /* الخاصية الأهم لمنع تمطيط أو تشوه الصورة عند قصها */
    object-fit: cover !important; 
    object-position: center !important;
}
.ab-cat-kicker {
display: none !important;
}

/* ونوع خط الاقسام 1:1 */
.ab-header-category {
    background: #e8d7e8 !important;    
}
h1.text-2xl.font-bold.text-heading.category_section_header_title.inline-flex.pb-1 {
    font-family: "Cairo", ui-monospace, monospace !important;
    font-weight: 600 !important;
    color: #4B0082 !important;
}
.ab-header-category a {
font-family: "Cairo", ui-monospace, monospace !important;
font-weight: 600 !important;
color: #4B0082 !important;
font-size: 15px !important;
}

.ab-pd-description {
    margin: 16px 0 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #4B0082 !important;
}
    .ab-featured-hero {
     display: none !important;
        min-height: 290px !important;
        border-radius: 12px !important;
    }
	/* تظبيط حجم الهيدر في ثيم فينيكس */
	.ab-header {
    width: auto !important;
    top: 0px !important;
    margin: 5px 5px !important;
}

/* تظبيط شكل المتغيرات */
/* استهداف العنوان المخصص لرائحة الهير ميست */
h2.whitespace-nowrap {
    font-size: 0.9rem !important; 
    color: #dc2626 !important;    
    font-weight: 700 !important;
    
    /* التعديل الجديد للسماح بالنص بالنزول لسطر آخر */
    white-space: normal !important; 
    word-wrap: break-word !important; /* لضمان كسر الكلمات الطويلة جداً إن وجدت */
}
h2.variation_name {
    font-size: 0.9rem !important; /* حجم الخط */
    color: #dc2626 !important;    /* اللون الأحمر الحيوي */
    font-weight: 700 !important;   /* خط عريض */
    
    /* جعل النص ينزل لسطر جديد تلقائياً عند الحاجة */
    white-space: normal !important; 
    word-wrap: break-word !important; 
}


/* 2. ضبط البرواز الخارجي ليأخذ ثلث المساحة بالضبط */
.image_variation {
    /* حساب العرض: الثلث ناقص جزء من المسافات الفاصلة لضمان بقاء 3 صور في الصف */
    width: calc(19% - 6px) !important; 
    max-width: calc(19% - 6px) !important;
    min-width: calc(19% - 6px) !important;
    
    /* منع العنصر من التمدد لأكثر من الثلث */
    flex: 0 0 calc(19% - 6px) !important; 
    
    /* الحفاظ على الشكل المربع المثالي */
    aspect-ratio: 1 / 1 !important; 
    height: auto !important;
    
}

/* 3. ضمان ملء الصورة للحاوية الجديدة تماماً بدون تشويه */
.image_variation .relative.overflow-hidden,
.image_variation img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}



@media(max-width:480px){
/* 1. ضبط الحاوية الأم لتوزيع العناصر أفقياً وبشكل كامل */
div[role="radiogroup"] .flex.w-fit {
    display: flex !important;
    flex-direction: row !important; /* ترتيب أفقي */
    flex-wrap: wrap !important;     /* السماح بالنزول لسطر جديد */
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important; 
    gap: 8px !important;            /* مسافة مناسبة بين الـ 3 صور */
}

/* 2. ضبط البرواز الخارجي ليأخذ ثلث المساحة بالضبط */
.image_variation {
    /* حساب العرض: الثلث ناقص جزء من المسافات الفاصلة لضمان بقاء 3 صور في الصف */
    width: calc(33.33% - 6px) !important; 
    max-width: calc(33.33% - 6px) !important;
    min-width: calc(33.33% - 6px) !important;
    
    /* منع العنصر من التمدد لأكثر من الثلث */
    flex: 0 0 calc(33.33% - 6px) !important; 
    
    /* الحفاظ على الشكل المربع المثالي */
    aspect-ratio: 1 / 1 !important; 
    height: auto !important;
}

/* 3. ضمان ملء الصورة للحاوية الجديدة تماماً بدون تشويه */
.image_variation .relative.overflow-hidden,
.image_variation img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}}
</style>
<style>
.ab-header {
    width: auto !important;
    top: 0px !important;
    margin: 5px 5px !important;
}