/* --- 1. تنظيف السكشن والجريد بالكامل --- */
.s-block--banners .grid {
    display: flex !important;
    flex-wrap: nowrap !important; /* إجبارهم على صف واحد */
    justify-content: center !important; /* وسطنة في نص الشاشة */
    gap: 30px !important; /* مسافة محترمة بين الدوائر */
    overflow-x: auto !important; /* للموبايل */
    background: transparent !important;
    padding: 20px 0 !important;
}

/* --- 2. ضبط الكارت (الرابط) وإزالة القرف الرمادي --- */
.banner-entry.square-photos {
    flex: 0 0 auto !important;
    width: 180px !important; /* عرض الحاوية أكبر قليلاً من الصورة */
    height: auto !important;
    background: transparent !important; /* إزالة الرمادي نهائياً */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important; /* النص تحت الصورة */
    align-items: center !important;
    overflow: visible !important;
    text-decoration: none !important;
}

/* --- 3. الصورة: مقاس 160*160 ودائرة كاملة --- */
.banner-entry.square-photos .lazy__bg {
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    background-size: cover !important; /* الصورة تملا الدائرة */
    background-position: center !important;
    margin-bottom: 15px !important; /* مسافة بين الدائرة والنص */
    flex-shrink: 0 !important;
    border: 2px solid #f0f0f0 !important; /* إطار خفيف جداً للنظافة */
    position: relative !important;
}

/* --- 4. النص: ثابت، تحت الصورة، وبدون خلفية أو بوردر --- */
.banner-entry.square-photos .text-with-border,
.banner-entry.square-photos .text-with-border span,
.banner-entry.square-photos .banner-title,
.banner-entry.square-photos span,
.banner-entry.square-photos h3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important; /* ظهور دائم */
    position: static !important; /* تحت الصورة */
    background: transparent !important; /* شيل الرمادي من ورا النص */
    background-color: transparent !important;
    border: none !important; /* شيل البوردر */
    color: #163A5F !important; /* لون اللوجو الأزرق */
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- 5. قتل أي Overlays أو هوفر غبي من الثيم --- */
.banner-entry.square-photos::before,
.banner-entry.square-photos::after {
    display: none !important;
    content: none !important;
}

/* --- 6. إخفاء أي خطوط أو زوائد في العنوان --- */
.text-with-border::before, 
.text-with-border::after {
    display: none !important;
}

/* تأثير الهوفر على دوائر التصنيفات */
.banner-entry.square-photos .lazy__bg {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* حركة ناعمة جداً */
}

.banner-entry.square-photos:hover .lazy__bg {
    transform: translateY(-8px) !important; /* رفع الدائرة لفوق شوية */
    box-shadow: 0 15px 30px rgba(22, 58, 95, 0.15) !important; /* سوفت شادو بلون اللوجو الأزرق */
    border-color: #2DB1C9 !important; /* تغيير لون الإطار للسايان عند الهوفر */
}

/* حركة خفيفة للنص كمان عشان يماشي الدائرة */
.banner-entry.square-photos:hover span, 
.banner-entry.square-photos:hover .banner-title {
    color: #2DB1C9 !important; /* يقلب سايان مع الدائرة */
    transition: color 0.3s ease !important;
}

/* 1. استهداف السلايدر الثاني في الصفحة فقط */
section.s-block--slider:nth-of-type(2) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* 2. إخفاء الأسهم (Navigation Buttons) */
section.s-block--slider:nth-of-type(2) .swiper-button-next,
section.s-block--slider:nth-of-type(2) .swiper-button-prev {
    display: none !important;
}

/* 3. إخفاء النقاط اللي تحت (Pagination) */
section.s-block--slider:nth-of-type(2) .swiper-pagination {
    display: none !important;
}

/* 4. إلغاء أي تأثير للماوس أو سحب (Grab Cursor) */
section.s-block--slider:nth-of-type(2) .swiper {
    cursor: default !important;
}

/* 5. ضبط الصورة لتكون بعرض الشاشة وبدون حواف غريبة */
section.s-block--slider:nth-of-type(2) img {
    border-radius: 12px !important; /* زوايا ناعمة مثل دار الأميرات */
    object-fit: cover !important; /* عشان الصورة تفرش صح */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* ظل خفيف جداً */
}

/* 6. إلغاء المسافات الجانبية لو السلايدر داخل Container */
section.s-block--slider:nth-of-type(2) .container {
    max-width: 100% !important;
    padding: 0 15px !important; /* مسافة بسيطة من الأطراف */
}

/* 1. ضبط الكونتينر ليكون بورتريه 3:4 */
.s-product-card-image {
    position: relative !important;
    width: 100% !important;
    /* الحسبة دي بتعمل نسبة 3:4 بالظبط */
    padding-bottom: 133.33% !important; 
    height: 0 !important;
    overflow: hidden !important;
    background-color: #f9f9f9 !important;
}

/* 2. إجبار الصورة تملأ الكونتينر (Cover) وتتوسطه */
.s-product-card-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* ده اللي هيخليها تملأ المكان */
    object-position: center top !important; /* عشان يركز على الموديل من فوق */
    transition: transform 0.6s ease-in-out !important;
}

/* 3. تأثير الزوم 10% عند الهوفر */
.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.1) !important;
}

/* 4. تنسيق السعر والزرار ليكونوا تحت بعض زي الصورة */
.s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px !important;
}

.s-product-card-price {
    align-self: flex-end !important; /* السعر على اليمين شوية */
    color: #2DB1C9 !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

.s-product-card-content-footer {
    width: 100% !important;
}

.s-product-card-content-footer .s-button-element {
    width: 100% !important;
    background-color: #163A5F !important;
    color: white !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 12px 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}

.s-product-card-price { font-size: 20px !important; font-weight: 800 !important; color: #2DB1C9 !important; }
.s-product-card-price i { font-size: 14px !important; margin-right: 2px !important; }

/* 1. استهداف حاوية دليل المقاسات بالكامل وتحويلها لبانر ملفت */
div.center-between:has(.sicon-pencil-ruler) {
    background-color: #f8fafc !important; /* خلفية رمادية فاتحة جداً تبرز السيكشن */
    border: 2px dashed #cbd5e1 !important; /* إطار متقطع يعطي إيحاء بالقياس/الخياطة */
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    align-items: center !important;
}

/* 2. إبراز أيقونة المسطرة وكلمة "دليل القياسات" */
div.center-between:has(.sicon-pencil-ruler) b {
    color: #0f172a !important; /* لون داكن وأنيق للنص */
    font-size: 15px !important;
}
div.center-between:has(.sicon-pencil-ruler) b i {
    color: #ef4444 !important; /* لون أحمر للأيقونة عشان تخطف العين */
    font-size: 20px !important;
}

/* 3. تحويل اللينك الافتراضي لزرار (Button) صريح وملفت */
salla-button[onclick*="size-guide"] button {
    background-color: #111827 !important; /* لون الزرار الداكن (تقدر تغيره للون براند تريند) */
    color: #ffffff !important; /* لون النص أبيض */
    padding: 8px 18px !important; /* كسر كلاس سلة اللي كان مصفر المسافات */
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-decoration: none !important; /* إزالة خط اللينك الافتراضي */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* 4. تأثير حركة خفيف عند وقوف الماوس على الزرار */
salla-button[onclick*="size-guide"] button:hover {
    background-color: #ef4444 !important; /* يتغير للأحمر عند اللمس */
    transform: translateY(-2px);
}

/* 1. تجميل رأس النافذة (التاب) وتحويله من زرار غامق لعنوان أنيق */
.s-product-size-guide-modal .s-tabs-header-item.s-tabs-active,
salla-tabs .s-tabs-header-item.s-tabs-active {
    background-color: transparent !important;
    color: #111827 !important; /* لون داكن وفخم للنص */
    border-bottom: 2px solid #ef4444 !important; /* خط سفلي بلون البراند (أحمر) */
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding-bottom: 10px !important;
    box-shadow: none !important;
}

/* 2. إخفاء الخلفية الرمادية لتبويبات سلة */
.s-product-size-guide-modal .s-tabs-bg-normal,
salla-tabs .s-tabs-bg-normal {
    background-color: transparent !important;
    border: none !important;
}

/* 3. تنسيق صور جدول المقاسات لتكون احترافية ومتصلة */
.s-product-size-guide-modal .s-tabs-content img,
salla-tabs .s-tabs-content img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important; /* حواف دائرية عصرية للصور */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; /* ظل خفيف يبرز الجدول */
    display: block !important;
    margin: 0 auto 15px auto !important; /* مسافة متناسقة بين صورة التوب والبنطلون */
}

/* 4. إزالة المسافات العشوائية الناتجة عن محرر النصوص */
.s-product-size-guide-modal .s-tabs-content p,
salla-tabs .s-tabs-content p {
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. تكبير أيقونة المسطرة في الهيدر لتبدو متناسقة */
.s-modal-header-inner svg {
    fill: #111827 !important;
    width: 24px !important;
    height: 24px !important;
}

/* =========================================
   تخصيص خيارات الألوان (Color Swatches)
========================================= */

/* 1. ترتيب حاوية الألوان وتصغير المسافات */
.s-product-options-colors-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 5px 0 !important;
}

/* 2. إخفاء اسم اللون (النص) لتنظيف واجهة المستخدم */
.s-product-options-colors-item label div {
    display: none !important;
}

/* 3. تصميم دائرة اللون الأساسية وإلغاء شكل الكبسولة */
.s-product-options-colors-item label {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    padding: 3px !important; /* مساحة للإطار الخارجي عند التحديد */
    border: 2px solid transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important; /* إلغاء خلفية سلة الرمادية */
    min-width: unset !important; /* كسر عرض سلة الافتراضي */
    transition: all 0.2s ease-in-out !important;
    margin: 0 !important;
}

/* 4. تصميم اللون الداخلي مع إضافة ظل خفيف وإطار للألوان الفاتحة كالبيج */
.s-product-options-colors-item label span {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15) !important;
    border: 1px solid #e2e8f0 !important; 
    margin: 0 !important;
}

/* 5. حالة التحديد (عندما يختار العميل اللون) */
.s-product-options-colors-item input:checked + label {
    border-color: #111827 !important; /* إطار داكن وأنيق حول الدايرة */
    transform: scale(1.05); /* تكبير خفيف للدايرة لإبرازها */
}

/* 6. تأثير مرور الماوس (Hover) */
.s-product-options-colors-item label:hover {
    transform: scale(1.05);
}
@media (max-width: 767px) {
    /* استهداف الحاوية المباشرة للعناصر */
    .s-block--banners .grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-behavior: smooth;
        
        /* إلغاء أي محاذاة للمنتصف */
        justify-content: flex-start !important; 
        
        /* ضبط البداية من اليمين تماماً */
        padding-right: 15px !important; 
        padding-left: 15px !important;
        gap: 12px !important;
        
        /* إخفاء السكرول بار */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .s-block--banners .grid::-webkit-scrollbar {
        display: none;
    }

    /* ضبط حجم الكارت */
    .s-block--banners .banner-entry {
        flex: 0 0 130px !important; /* تثبيت العرض تماماً */
        min-width: 130px !important;
        max-width: 130px !important;
        margin: 0 !important;
        text-align: center;
    }

    /* تصغير الدوائر شوية علشان تناسب الموبايل */
    .banner-entry.square-photos .lazy__bg {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto !important;
        background-size: cover !important; /* عشان الصورة تملا الدايرة */
    }
    
    /* ضبط النص تحت الصورة */
    .text-with-border {
        margin-top: 8px !important;
        white-space: nowrap; /* عشان العنوان ميتكسرش على سطرين */
    }
}