/* ==================================================
   جعل البانر الثابت يمتد لكامل الشاشة (Full Width Fixed Banner)
   ================================================== */

/* 1. استهداف القسم وإلغاء هوامشه */
.s-block--fixed-banner {
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 2. فتح قيد الكونتينر ليأخذ العرض الكامل */
.s-block--fixed-banner .container {
    width: 100% !important;
    max-width: 100% !important; /* إلغاء الحد الأقصى للعرض */
    padding-left: 0 !important; /* إزالة الهوامش الداخلية */
    padding-right: 0 !important;
    margin: 0 !important;
}

/* 3. ضبط رابط البانر */
.s-block--fixed-banner .banner--fixed {
    width: 100% !important;
    display: block !important;
    border-radius: 0 !important; /* إلغاء الحواف الدائرية لتلائم الأطراف */
    box-shadow: none !important;
}

/* 4. تمديد الصورة لتملأ المساحة */
.s-block--fixed-banner img {
    width: 100% !important;
    height: auto !important; /* الحفاظ على الدقة */
    max-width: 100% !important;
    object-fit: cover !important; /* تعبئة الفراغات بشكل متناسق */
    display: block !important; /* إزالة المسافة السفلية الصغيرة */
}

/* ==================================================
   تنسيق شبكة الماركات المدمجة (Unified Brands Grid)
   ================================================== */

/* 1. تنسيق الشبكة الجديدة */
.unified-brands-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 20px !important;
}

/* 2. تنسيق الكرت (مطابق للرئيسية) */
.unified-brands-grid .brand-item {
    height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    grid-row: auto !important;
    grid-column: auto !important;
}

/* تأثير الماوس */
.unified-brands-grid .brand-item:hover {
    border-color: #ff6600 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

/* 3. تنسيق الصورة */
.unified-brands-grid .brand-item img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 4. تنسيق الجوال */
@media (max-width: 991px) {
    .unified-brands-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .unified-brands-grid .brand-item {
        height: 90px !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    .unified-brands-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* --- 3. حل مشكلة الوصف (إظهار كامل المحتوى + تصميم سكشن) --- */
.product__description {
    max-height: none !important; /* إجبار المتصفح على عرض كامل الطول */
    height: auto !important;
    overflow: visible !important;
    background-color: #f9f9f9; /* خلفية رمادية فاتحة جداً لتمييز القسم */
    padding: 20px;
    border-radius: 12px;
    margin-top: 30px;
    border: 1px solid #eee;
    position: relative;
}
/* ==================================================
   ترتيب وتحسين شبكة العلامات التجارية (Brands Grid Fix)
   ================================================== */

/* 1. ضبط الحاوية الشبكية (Grid Container) */
.somou-custom-brand .grid {
    display: grid !important;
    /* الكمبيوتر: 6 أعمدة (مناسب للشعارات) */
    grid-template-columns: repeat(6, 1fr) !important; 
    gap: 15px !important;
    
    /* إلغاء أي خصائص تعويم قديمة */
    grid-auto-flow: row !important; 
    width: 100% !important;
}

/* 2. توحيد شكل الكرت (Card Item) */
.somou-custom-brand .brand-item {
    /* إلغاء تمدد الصفوف (الحل الجذري للمشكلة) */
    grid-row: auto !important; 
    grid-column: auto !important;
    
    /* توحيد الارتفاع */
    height: 110px !important; 
    
    /* توسيط الشعار */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* تجميل المربع */
    background-color: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* تأثير عند مرور الماوس */
.somou-custom-brand .brand-item:hover {
    border-color: #ff6600 !important; /* لون البرتقالي */
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* 3. ضبط حجم الشعار (Image) */
.somou-custom-brand .brand-item img {
    width: auto !important;
    height: auto !important;
    max-width: 85% !important;  /* هوامش داخلية للصورة */
    max-height: 85% !important;
    object-fit: contain !important; /* الحفاظ على أبعاد الشعار */
}

/* 4. تنسيق الجوال (Mobile) */
@media (max-width: 991px) {
    .somou-custom-brand .grid {
        /* الجوال: 3 أعمدة (أفضل من 2 عشان ما يكون كبير مرة) */
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 10px !important;
    }
    
    .somou-custom-brand .brand-item {
        height: 90px !important; /* ارتفاع أصغر للجوال */
        border-radius: 8px !important;
    }
}

/* للجوالات الصغيرة جداً */
@media (max-width: 400px) {
    .somou-custom-brand .grid {
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

/* ==================================================
   تفعيل السكرول الأفقي للقوائم (Horizontal Scroll Fix)
   ================================================== */

/* 1. استهداف الحاوية (التي تحمل المنتجات) */
.s-products-list-wrapper.s-products-list-horizontal-cards,
.horizontal-products .swiper-wrapper {
    /* تفعيل الفليكس لترتيب العناصر بجانب بعض */
    display: flex !important;
    
    /* منع النزول لسطر جديد نهائياً */
    flex-wrap: nowrap !important;
    
    /* السماح بالتمرير (السكرول) يمين ويسار */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    
    /* جعل التمرير ناعماً (Smooth Scroll) */
    scroll-behavior: smooth !important;
    
    /* إخفاء شريط التمرير (اختياري - لجمالية أكثر) */
    scrollbar-width: none; /* لمتصفحات فايرفوكس */
    -ms-overflow-style: none; /* لمتصفحات انترنت اكسبلورر */
    
    /* مسافات وترتيب */
    gap: 15px !important;
    padding-bottom: 20px !important; /* مساحة للظل بالأسفل */
    width: 100% !important;
    justify-content: flex-start !important;
}

/* إخفاء شريط التمرير لمتصفحات كروم وسفاري */
.s-products-list-wrapper.s-products-list-horizontal-cards::-webkit-scrollbar,
.horizontal-products .swiper-wrapper::-webkit-scrollbar {
    display: none;
}

/* 2. ضبط عرض كل منتج (البطاقة) */
.s-products-list-horizontal-cards .s-product-card-entry,
.horizontal-products .swiper-slide {
    /* تحديد عرض ثابت للمنتج
       flex: 0 0 auto => لا تكبر ولا تصغر، خذ حجمك الثابت
    */
    flex: 0 0 auto !important;
    width: 260px !important; /* عرض مثالي للكمبيوتر */
    max-width: 260px !important;
    
    /* إلغاء أي هوامش قديمة */
    margin: 0 !important;
    height: auto !important; /* السماح للطول بالتمدد */
}

/* 3. تنسيق خاص للجوال (تصغير الكرت قليلاً) */
@media (max-width: 768px) {
    .s-products-list-horizontal-cards .s-product-card-entry,
    .horizontal-products .swiper-slide {
        width: 170px !important; /* عرض أصغر للجوال (يظهر منتجين وجزء من الثالث) */
        max-width: 170px !important;
    }
}
/* ==================================================
   منع النزول لسطر جديد (تفعيل السكرول الأفقي)
   ================================================== */

/* استهداف القائمة الأفقية */
.horizontal-products .swiper-wrapper,
.s-products-list-horizontal-cards {
    /* 1. منع النزول لسطر جديد */
    flex-wrap: nowrap !important; 
    
    /* 2. تفعيل السكرول يمين ويسار */
    overflow-x: auto !important; 
    overflow-y: hidden !important;
    
    /* 3. ترتيب العناصر من البداية */
    justify-content: flex-start !important;
    
    /* تحسين تجربة اللمس في الجوال */
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important; /* مسافة عشان ما ينقص الظل */
}

/* ضبط عرض المنتج ليكون مناسباً في السطر الواحد */
.horizontal-products .swiper-slide {
    /* عرض ثابت للمنتج (مثلاً 22% من الشاشة عشان يظهر 4 وجزء من الخامس) */
    flex: 0 0 22% !important; 
    width: 22% !important;
    margin-left: 15px !important; /* مسافة بين المنتجات */
}

/* بالجوال نكبر المنتج شوي */
@media (max-width: 768px) {
    .horizontal-products .swiper-slide {
        flex: 0 0 45% !important; /* منتجين إلا ربع في الشاشة */
        width: 45% !important;
    }
}

.horizontal-products .swiper-slide {
    height: auto !important;
    width: auto !important;
    flex: 0 0 calc(25% - 12px) !important; /* 4 منتجات في الصف */
    margin-right: 0 !important;
}

@media (max-width: 991px) {
    .horizontal-products .swiper-slide {
        flex: 0 0 calc(50% - 8px) !important; /* منتجين في الجوال */
    }
} */


/* ==================================================
   إصلاح مشكلة اختفاء المنتجات (السماح بالنزول لأسطر جديدة)
   ================================================== */

/* نستهدف فقط قوائم المنتجات الأفقية في الرئيسية */
.horizontal-products .swiper-wrapper,
.s-products-list-horizontal-cards {
    /* إلغاء خصائص السلايدر التي تخفي المنتجات */
    transform: none !important; 
    width: 100% !important;
    height: auto !important;
    
    /* تفعيل الالتفاف (Wrapping) */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    
    /* ضمان ظهور المحتوى */
    overflow: visible !important;
}

/* ضمان أن كل منتج يأخذ مساحته الصحيحة */
.horizontal-products .swiper-slide {
    height: auto !important;
    width: auto !important; /* نلغي العرض الثابت للسلايدر */
    flex: 0 0 calc(25% - 12px) !important; /* 4 منتجات في الصف للكمبيوتر */
    margin-right: 0 !important; /* إلغاء هوامش السلايدر */
}

/* إصلاح للجوال (منتجين في الصف) */
@media (max-width: 991px) {
    .horizontal-products .swiper-slide {
        flex: 0 0 calc(50% - 8px) !important; /* منتجين في الصف */
    }
}


/* ==================================================
   جعل أقسام الصفحة الرئيسية بعرض كامل (Full Width Sections)
   ================================================== */

/* تطبيق التعديل على شاشات الكمبيوتر فقط (أكبر من 1024px) */
@media (min-width: 1024px) {
    
    /* 1. استهداف الماركات (Brands) */
    .somou-custom-brand .container,
    /* 2. استهداف بنرات العروض (Offers Rectangle) */
    .somou-banner_rectangle .container,
    /* 3. استهداف النص مع الصورة (Text with Photo) */
    .somou-text-with-photo .container,
    /* 4. استهداف قوائم المنتجات (Products List) */
    section.px-2 .container {
        max-width: 100% !important; /* إلغاء الحد الأقصى للعرض */
        width: 100% !important;
        padding-left: 20px !important;  /* ترك مسافة أمان صغيرة جداً من الحواف */
        padding-right: 20px !important; /* ترك مسافة أمان صغيرة جداً من الحواف */
        margin: 0 !important;

    }

    /* توسيع شبكة المنتجات والماركات لتملأ المساحة الجديدة */
    .somou-custom-brand .grid,
    .somou-banner_rectangle .grid,
    .somou-text-with-photo .grid,
    .s-products-list-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ضمان عدم ظهور شريط تمرير أفقي مزعج */
body, html {
    overflow-x: hidden;
}

/* ==================================================
   توحيد شبكة المنتجات (لجميع صفحات العرض: بحث، أحدث المنتجات، تصنيفات)
   Universal Grid Fix for All Product Lists
   ================================================== */

/* 1. استهداف جميع القوائم التي تعرض المنتجات بشكل عمودي */
/* يشمل: البحث، أحدث المنتجات، الأكثر مبيعاً، التصنيفات */
salla-products-list .s-products-list-wrapper,
.s-products-list-vertical-cards {
    display: grid !important;
    /* الكمبيوتر: 4 أعمدة */
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 15px !important;
    
    /* إلغاء خصائص القائمة القديمة */
    flex-direction: unset !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* استثناء مهم: لا تطبق هذا على الصفحة الرئيسية (السلايدرات) */
/* لأن الرئيسية تستخدم horizontal-cards ونحن نستهدف vertical-cards غالباً،
   لكن لزيادة الأمان نضيف هذا الاستثناء: */
.home-component salla-products-list .s-products-list-wrapper,
.s-products-list-horizontal-cards {
    display: flex !important; /* إبقاء السلايدر كما هو */
    grid-template-columns: none !important;
}

/* 2. إصلاح عرض البطاقة لتملأ المربع */
salla-products-list .s-product-card-entry,
.s-products-list-vertical-cards .s-product-card-entry {
    width: 100% !important;
    max-width: 100% !important;
    /* تصحيح الخطأ السابق (كان display: none وهذا يخفيها) */
    display: flex !important; 
    flex-direction: column !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

/* 3. ضبط الصورة لتكون مربعة (1:1) */
salla-products-list .s-product-card-image,
.s-products-list-vertical-cards .s-product-card-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex-basis: auto !important;
  
}

/* 4. تنسيق النصوص داخل البطاقة */
salla-products-list .s-product-card-content,
.s-products-list-vertical-cards .s-product-card-content {
    width: 100% !important;
    padding: 10px !important;
    text-align: center !important;
}

/* 5. إخفاء الوصف الجانبي الطويل */
salla-products-list .s-product-card-content-sub,
.s-products-list-vertical-cards .s-product-card-content-sub {
    display: none !important;
}

/* 6. تنسيق الجوال (عمودين) */
@media (max-width: 991px) {
    salla-products-list .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين للجوال */
        gap: 10px !important;
    }
    
    /* تصغير الخط للجوال */
    salla-products-list .s-product-card-content-title a,
    .s-products-list-vertical-cards .s-product-card-content-title a {
        font-size: 13px !important;
    }
}

/* =================================================================
   نظام الشبكة والبطاقات الموحد (Universal Grid & Card System)
   ================================================================= */

/* 1. تحويل قوائم المنتجات إلى شبكة (Grid Force) */
/* هذا يحل مشكلة المنتجات التي تظهر تحت بعضها */
.s-products-list-wrapper,
.s-search-results,
.s-products-list-vertical-cards,
.product-entry--horizontal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 15px !important;
    flex-direction: unset !important; /* إلغاء الترتيب العمودي للحاوية */
}

/* 2. توحيد شكل البطاقة (Card Design) */
custom-salla-product-card,
.s-product-card-entry {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 120px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    width: 100% !important; /* ملء خانة الشبكة */
    transition: all 0.3s ease;
}

/* تأثير الماوس */
custom-salla-product-card:hover,
.s-product-card-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #FFBF69 !important;
}

/* 3. الصورة (مربعة 1:1) */
custom-salla-product-card .s-product-card-image,
.s-product-card-entry .s-product-card-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    background-color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

custom-salla-product-card .s-product-card-image img,
.s-product-card-entry .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* كاملة بدون قص */
}

/* إخفاء زر القلب */
.s-product-card-wishlist-btn { display: none !important; }

/* ==================================================
   4. شريط المعلومات الشفاف (Overlay - Always Visible)
   ================================================== */
.tire-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* تدرج لوني لضمان وضوح النص دائماً */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 5px 8px 5px;
    
    /* --- التعديل هنا: الظهور الدائم --- */
    opacity: 1 !important; /* ظاهر دائماً */
    transform: translateY(0) !important; /* مكانه ثابت في الأسفل */
    /* -------------------------------- */
    
    transition: all 0.4s ease;
    z-index: 5;
}

/* قاعدة التمرير لم تعد ضرورية للإظهار لكن نبقيها لضمان الثبات */
.s-product-card-image:hover .tire-info-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* تنسيق النصوص */
.tire-info-overlay .value { 
    font-size: 13px; 
    color: #fff; 
    font-weight: 900; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); 
}

.tire-info-overlay .label { 
    font-size: 11px; 
    color: #ccc; 
    font-weight: normal; 
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .tire-info-overlay { 
        padding: 15px 2px 5px 2px !important; 
        gap: 8px !important; 
    }
    .tire-info-overlay .label { font-size: 9px !important; }
    .tire-info-overlay .value { font-size: 11px !important; }
}


/* 5. المحتوى (العنوان) */
.s-product-card-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    padding: 10px 15px !important;
    width: 100% !important;
}

.s-product-card-content-title a {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    min-height: 42px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* إخفاء الوصف الزائد */
.s-product-card-content-sub { display: none !important; }

/* 6. الأزرار (إزالة الخطوط وتنسيق الزر الأسود) */
.s-product-card-content-footer {
    margin-top: auto !important;
    width: 100% !important;
    padding: 5px 15px !important;
    border: none !important;
}

/* إزالة الخطوط الغريبة من الثيم */
.s-product-card-content-footer::before,
.s-product-card-content-footer::after { display: none !important; }

.s-product-card-content-footer salla-add-product-button,
.s-product-card-content-footer .s-button-element {
    width: 100% !important;
    height: 42px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* اللمعة */
.s-product-card-content-footer .s-button-element::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    transform: skewX(-25deg); transition: none; z-index: 1;
}
.s-product-card-content-footer .s-button-element:hover::after { animation: shine 0.7s ease; }
@keyframes shine { 100% { left: 150%; } }

/* 7. استثناء الماركات (Brands Reset) */
.s-block--brands .s-product-card-entry,
section[class*="brands"] .s-product-card-entry {
    border: none !important; min-height: auto !important; background: transparent !important;
    padding: 0 !important; box-shadow: none !important;
}
.s-block--brands .s-product-card-image,
section[class*="brands"] .s-product-card-image {
    aspect-ratio: auto !important; height: 100px !important; width: auto !important;
    border: 1px solid #eee !important; padding: 10px !important;
}
.s-block--brands .s-product-card-content, .s-block--brands .s-product-card-content-footer { display: none !important; }

/* 8. الجوال */
@media (max-width: 768px) {
    .s-products-list-wrapper, .s-search-results, .s-products-list-vertical-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .tire-info-overlay { padding: 5px !important; }
    .tire-info-overlay .value { font-size: 10px !important; }
    .tire-info-overlay .label { font-size: 8px !important; }
    
    /* إصلاح نص الزر المقصوص على الجوال */
    .s-product-card-content-footer .s-button-element {
        font-size: 11px !important; /* تصغير الخط ليناسب */
        padding: 0 5px !important;
        height: 38px !important;
    }
    .s-product-card-content-footer .s-button-element i {
        display: none !important; /* إخفاء أيقونة السلة في الجوال لتوفير مساحة */
    }
}


/* صفحة المنتج

/* =================================================================
   إصلاح صور المصغرات فقط (Only Fix Thumbnails Image Quality)
   ================================================================= */

/* 1. جعل الصورة كاملة داخل المربع (بدون قص) */
.s-slider-thumbs img,
.swiper-slide img {
    object-fit: contain !important; /* السر هنا: يظهر الصورة كاملة */
    width: 100% !important;
    height: 100% !important;
    background-color: #fff !important; /* خلفية بيضاء نظيفة */
    border: 1px solid #f0f0f0 !important; /* إطار رمادي خفيف جداً */
    border-radius: 8px !important; /* زوايا ناعمة */
    padding: 3px !important; /* مسافة داخلية لكي لا تلتصق بالحواف */
}

/* 2. تمييز الصورة التي يختارها العميل */
.swiper-slide-thumb-active img {
    border: 2px solid #FFBF69 !important; /* إطار بلون الهوية */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 3. تحسين حجم شريط الصور في الجوال */
@media (max-width: 768px) {
    .s-slider-thumbs .swiper-slide {
        height: 70px !important; /* ارتفاع مناسب للإصبع */
        width: 70px !important;
    }
}

/* ==================================================
   تنسيق جدول المواصفات (Professional Specs Table)
   ================================================== */

/* 1. الحاوية الخارجية للجدول */
/* .s-metadata-box {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important; /* لضمان انحناء الزوايا */
    background: #fff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* 2. رأس الجدول (العنوان) */
.s-metadata-box-header {
    background-color: #000 !important; /* أسود فخم */
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 15px 20px !important;
    border-bottom: 4px solid #FFBF69 !important; /* خط أصفر سفلي */
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* تلوين أيقونة القائمة في الرأس */
.s-metadata-box-header i {
    color: #FFBF69 !important;
    font-size: 18px !important;
}

/* 3. الصفوف (Rows) - تنسيق ونظام فليكس */
.s-metadata-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f3f3f3 !important;
    transition: background 0.3s ease;
}

/* إزالة الخط من آخر صف */
.s-metadata-row:last-child {
    border-bottom: none !important;
}

/* 4. تلوين الصفوف بالتناوب (Zebra Effect) */
/* الصفوف الزوجية تأخذ لون رمادي فاتح جداً */
.s-metadata-row:nth-child(even) {
    background-color: #fafafa !important;
}

/* تأثير عند مرور الماوس على الصف */
.s-metadata-row:hover {
    background-color: #fff9ed !important; /* إضاءة صفراء خفيفة جداً */
}

/* 5. تنسيق اسم الخاصية (يمين) */
.s-metadata-row-name {
    color: #666 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    margin: 0 !important;
    flex-shrink: 0 !important; /* منع النص من الانكماش */
}

/* 6. تنسيق القيمة (يسار) */
.s-metadata-row-value {
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 800 !important; /* خط عريض وواضح */
    margin: 0 !important;
    text-align: left !important; /* محاذاة الرقم لليسار */
} */



/* ==================================================
   1. إعادة ترتيب عناصر صفحة المنتج (السر في Flexbox)
   ================================================== */

/* تحويل الحاوية الرئيسية إلى فليكس للتحكم بالترتيب */
.main-content {
    display: flex !important;
    flex-direction: column !important;
}

/* الترتيب 1: الماركة (أعلى شيء) */
.product-brand {
    order: 1 !important;
}

/* الترتيب 2: عنوان المنتج */
.main-content h1 {
    order: 2 !important;
}

/* الترتيب 3: السعر */
.price-wrapper,
.main-content .flex.whitespace-nowrap {
    order: 3 !important;
}

/* الترتيب 4: جدول المواصفات (هنا مكانه الجديد!) */
.s-metadata-wrapper {
    order: 4 !important;
    margin-bottom: 15px !important; /* مسافة تفصله عن الوصف */
    margin-top: 10px !important;
    width: 100% !important;
}

/* الترتيب 5: الوصف وباقي العناصر */
.product__description {
    order: 5 !important;
}

/* ضمان أن باقي العناصر تأتي في الأسفل */
.s-product-options-wrapper,
.product-form,
.s-social-share,
.bg-white.py-2\.5 {
    order: 10 !important;
}


/* ==================================================
   2. تحويل جدول المواصفات إلى شارات أفقية (Tags Style)
   ================================================== */

/* الحاوية الخارجية للجدول */
.s-metadata-box {
    display: flex !important;
    flex-direction: row !important; /* ترتيب أفقي */
    flex-wrap: wrap !important;     /* السماح بالنزول لسطر جديد إذا لم تكف المساحة */
    gap: 8px !important;            /* مسافة صغيرة بين المربعات */
    
    /* إزالة حدود الجدول القديمة */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* إخفاء "عنوان الجدول" (كلمة مواصفات الإطار) لتوفير المساحة */
.s-metadata-box-header {
    display: none !important;
}

/* تصميم المربع الواحد (الصناعة، السرعة، إلخ) */
.s-metadata-row {
    display: flex !important;
    flex-direction: column !important; /* العنوان فوق والقيمة تحت */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* ألوان وتنسيق المربع */
    background-color: #f9f9f9 !important; /* رمادي فاتح جداً */
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    
    /* التحكم بالحجم */
    flex-grow: 1 !important; /* يتمدد لملء الفراغ */
    min-width: 80px !important; /* أقل عرض للمربع */
    max-width: 30% !important; /* عشان ما يصير عريض جداً */
}

/* تمييز مربع "مؤشر السرعة" ليظهر بشكل جذاب */
.s-metadata-row:last-child {
    border-bottom: 1px solid #e5e7eb !important; /* استعادة الحدود */
}

/* تنسيق اسم الخاصية (صغير وباهت) */
.s-metadata-row-name {
    font-size: 10px !important;
    color: #888 !important;
    margin-bottom: 2px !important;
}

/* تنسيق القيمة (كبير وواضح) */
.s-metadata-row-value {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #000 !important;
}

/* تنسيق للجوال: السماح بعرض مربعين أو ثلاثة في السطر */
@media (max-width: 768px) {
    .s-metadata-row {
        flex-basis: 30% !important; /* 3 مربعات بالسطر */
        padding: 5px !important;
    }
}

/* تأثير عند مرور الماوس */
.s-metadata-row:hover {
    border-color: #ff6600 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 5. تنسيق اسم الخاصية (مثل: الصناعة) */
.s-metadata-row-name {
    color: #888 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    margin-bottom: 4px !important; /* مسافة صغيرة تحت الاسم */
}

/* 6. تنسيق القيمة (مثل: كوري) */
.s-metadata-row-value {
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* إخفاء حدود الصف الأخير القديمة */
.s-metadata-row:last-child {
    border-bottom: 1px solid #e5e7eb !important;
}

/* 7. للجوال: جعل المربعات أصغر قليلاً */
@media (max-width: 768px) {
    .s-metadata-row {
        min-width: 30% !important; /* لكي يسع 3 بجنب بعض أو 2 */
        padding: 8px !important;
    }
}
/* ==================================================
   تنسيق زر "إضافة للسلة" ليطابق زر "اشتري الآن"
   (نمط الحدود + زوايا دائرية)
   ================================================== */

.s-add-product-button-main .s-button-element,
.s-add-product-button-main button {
    /* 1. الألوان (خلفية بيضاء وحدود برتقالية) */
    background-color: #fff !important;
    color: #ff6600 !important; /* تأكد أن هذا كود البرتقالي المستخدم في متجرك */
    border: 1px solid #ff6600 !important; /* سماكة الحدود */

    /* 2. الشكل (زوايا دائرية بالكامل) */
    border-radius: 10px !important; /* رقم كبير لضمان الدوران الكامل من الجوانب */
    
    /* 3. تنظيف الستايل القديم */
    box-shadow: none !important;
    font-weight: bold !important;
    height: 40px !important; /* ارتفاع مطابق للزر الآخر */
    transition: all 0.3s ease !important;
}

/* 4. تأثير عند مرور الماوس (يتحول للبرتقالي الكامل) */
.s-add-product-button-main .s-button-element:hover,
.s-add-product-button-main button:hover {
    background-color: #ff6600 !important;
    color: #fff !important;
}

/* 5. إزالة أي تأثيرات لمعة سابقة */
.s-add-product-button-main .s-button-element::after,
.s-add-product-button-main button::after {
    display: none !important;
}



.mb-4 .items-center,
.mb-4 .mb-1,
.mb-4 .text-unicode {
  display:none;
}

.steps-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f9f9f9; /* لون خلفية خفيف */
    padding: 20px 10px;
    margin: 20px 0;
    border-radius: 8px;
    flex-wrap: wrap; /* يسمح بالعرض الجيد على الجوال */
}

.step-item {
    text-align: center;
    flex: 1;
    min-width: 120px; /* أقل عرض للعنصر */
    margin: 10px;
}

.step-item img {
    height: 50px; /* حجم الأيقونة */
    width: auto;
    margin-bottom: 10px;
    object-fit: contain;
}

.step-item p {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin: 0;
}