/* =================================================== */
/* 1. قسم اللوك بوك (Products Lookbook) */
/* =================================================== */

.products-lookbook__content {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    height: 744px !important; /* تعديلك الخاص للارتفاع */
}

.products-lookbook__content .products-lookbook__item {
    width: 250px !important; /* تعديلك الخاص للعرض */
    flex: 0 0 250px !important;
    height: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.products-lookbook__content .products-lookbook__item:hover,
.products-lookbook__content .products-lookbook__item.active {
    width: 400px !important; /* تعديلك الخاص عند الهوفر */
    flex: 0 0 400px !important;
}

.products-lookbook__content .products-lookbook__img,
.products-lookbook__content .products-lookbook__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}

.products-lookbook__content .products-lookbook__item:hover .products-lookbook__img img {
    transform: scale(1.04) !important;
}


/* =================================================== */
/* 2. قسم من نحن (About Section) */
/* =================================================== */

#about-2 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

#about-2 .md\:w-5\/12 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.4s ease !important;
}

#about-2 .md\:w-5\/12 img:hover {
    transform: translateY(-5px) !important;
}

#about-2 h3 {
    font-size: 1.1rem !important;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem !important;
}

#about-2 h2 {
    font-size: 2.2rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.5rem !important;
}

#about-2 p {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    color: #555 !important;
    text-align: justify !important;
}

/* التعديلات الخاصة بالشاشات الكبيرة مدمجة هنا */
@media (min-width: 768px) {
    #about-2 .container > div {
        display: flex !important;
        flex-direction: row-reverse !important; /* الصورة يمين والنص شمال */
        align-items: center !important;
        gap: 4rem !important;
    }

    #about-2 .md\:w-7\/12 {
        flex: 0 0 35% !important;
        width: 35% !important;
        max-width: 35% !important;
    }

    #about-2 .md\:w-5\/12 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    transform: translateX(28px) !important; /* تحريك فعلي لليمين بقوة الـ GPU */
   }
}

/* 1. الحواف الدائرية والمظهر الفخم للسكشن بالكامل */
.product-single__slider__inner, 
.product-single__info {
    border-radius: 24px !important; /* حواف دائرية ناعمة وعصرية */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important; /* ظل خفيف جداً يدي إحساس إن الكارد طاير */
    background: #ffffff !important;
    padding: 30px !important;
    border: 1px solid #f3ebe3 !important;
}

/* 2. تنعيم حواف الصور والمشغل */
.details-slider, 
.swiper-slide img, 
.s-slider-thumbs img,
.product-single__main-media {
    border-radius: 16px !important; /* حواف دائرية للصور عشان تريح العين */
}

/* 3. زر الإضافة للسلة (عشان يبيع لازم يكون مغري للضغط) */
.s-button-primary, 
[product-status="sale"] button.s-button-primary {
    background: linear-gradient(135deg, #59320d 0%, #422306 100%) !important; /* تدرج لوني فخم */
    color: #ffffff !important;
    border-radius: 50px !important; /* أزرار دائرية Pill-shaped بتزود نسبة النقر (CTR) */
    padding: 16px 32px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    box-shadow: 0 6px 20px rgba(89, 50, 13, 0.25) !important;
    transition: all 0.3s ease !important;
}

.s-button-primary:hover {
    transform: translateY(-2px) !important; /* حركة خفيفة عند الوقوف بالماوس تدي حياة للزر */
    box-shadow: 0 8px 25px rgba(89, 50, 13, 0.35) !important;
}

/* 4. زر الشراء السريع */
.s-fast-checkout-button, 
.s-mini-checkout button {
    border-radius: 50px !important;
    border: 2px solid #59320d !important;
    background: #fffaf5 !important;
    color: #59320d !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.s-fast-checkout-button:hover {
    background: #f7e9dd !important;
}

/* 5. عداد الوقت والكمية بلمسة مودرن */
.countdown-single, 
.s-count-down-list {
    border-radius: 12px !important;
    background: #fff8f2 !important;
    border: 1px solid #f3d6bd !important;
}

.s-quantity-input-container {
    border-radius: 50px !important; /* حواف دائرية لمدخل الكمية */
    border: 1px solid #d9c1ac !important;
    overflow: hidden;
}

/* 6. استيكر "متوفر" في المخزن عشان يبان احترافي */
#variant-inventory {
    border-radius: 50px !important;
    background: #e8f5e9 !important;
    color: #1b5e20 !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* استهداف الحاوية الرئيسية */
.lg\:w-1\/3.flex.items-center.justify-center {
    /* إضافة مسافة من اليسار (خارجية) */
    margin-left: 20px; 
    
    /* جعل الحواف مدورة */
    border-radius: 20px;
    
    /* لضمان أن الصورة بداخلها لا تخرج عن الحواف المدورة */
    overflow: hidden; 
}

/* إذا أردت التأكد من أن الصورة أيضاً تأخذ نفس الانحناء */
.lg\:w-1\/3 img {
    border-radius: 20px;
}

/* --- 1. استيراد خط أنيق (اختياري لكن يُنصح به) --- */
/* سنستخدم خط Tajawal كمثال لجماله ووضوحه */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* --- 2. تنسيقات الحاوية الرئيسية --- */
.product-banner-container {
    font-family: 'Tajawal', sans-serif; /* تطبيق الخط الجديد */
    border-radius: 12px; /* حواف مدورة ناعمة للحاوية نفسها */
    overflow: hidden; /* لضمان انحناء الصورة مع الحاوية */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* ظل ناعم لإعطاء عمق */
    transition: box-shadow 0.3s ease; /* حركة ناعمة عند التحويم */
}

/* --- 3. تحسين الصورة الخلفية وتأثير الـ Hover --- */
.product-banner-img {
    transition: transform 0.5s ease; /* حركة ناعمة لتكبير الصورة */
}

.product-banner-container:hover .product-banner-img {
    transform: scale(1.03); /* تكبير بسيط جداً عند التحويم لعنصر التفاعل */
}

/* --- 4. تنسيقات المحتوى النصي --- */
.content-overlay {
    background: linear-gradient(to bottom, rgba(13, 12, 12, 0.4), rgba(13, 12, 12, 0.7)); /* تدرج لضمان وضوح النص */
}

/* --- 5. تحسين العناوين --- */
.banner-title {
    color: #ffffff;
    letter-spacing: -0.5px; /* تضييق المسافة بين الحروف لتعطي مظهراً فخماً */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* ظل خفيف للنص لزيادة البروز */
}

/* --- 6. تحسين النص الوصفي --- */
.banner-description {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300; /* أنحف لتعطي تباين مع العنوان */
    line-height: 1.6;
}

/* --- 7. تحسين تصميم الزر (مثل الـ mockup) --- */
.banner-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    border: 2px solid #ffffff; /* حدود أعرض قليلاً */
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px; /* حواف مدورة ناعمة */
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 8. تأثير التحويم على الزر (Hover effect) --- */
.banner-button:hover {
    background-color: #ffffff; /* يمتلئ باللون الأبيض */
    color: #0d0c0c; /* يتغير لون النص للأسود */
    transform: translateY(-3px); /* يرتفع قليلاً */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); /* ظل أبيض ناعم */
}

/* 1. الحالة الافتراضية: شفاف تماماً في أعلى الصفحة */
.inner.bg-inherit.w-full {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: all 0.3s ease-in-out; /* حركة ناعمة عند التحول */
}

/* 2. الحالة عند الحركة: تحويله إلى Dark Blur (عند ظهور كلاس fixed-header) */
.fixed-header .inner.bg-inherit.w-full {
    /* لون أسود شفاف بنسبة 60% ليعطي تأثير الدارك */
    background-color: rgba(0, 0, 0, 0.6) !important; 
    
    /* قوة التغبيش */
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    
    /* إضافة خط سفلي نحيف جداً لزيادة الفخامة */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. تغيير ألوان النصوص والأيقونات للأبيض "فقط" عند الحركة */
.fixed-header .inner i, 
.fixed-header .inner p, 
.fixed-header .inner span,
.fixed-header .inner .menu-label,
.fixed-header .inner svg path,
.fixed-header .inner .s-cart-summary-total {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 4. معالجة عداد السلة (الرقم الصغير) ليكون واضحاً */
.fixed-header .s-cart-summary-count {
    background-color: #ffffff !important; /* خلفية العداد بيضاء */
    color: #000000 !important; /* الرقم أسود */
}

/* تنسيق كامل لعنصر السلة عند السكرول */
.fixed-header salla-cart-summary {
    color: #ffffff !important;
}

/* 1. لون أيقونة السلة */
.fixed-header salla-cart-summary svg path {
    fill: #ffffff !important;
}

/* 2. دائرة الرقم (العداد) */
.fixed-header .s-cart-summary-count {
    background-color: #ffffff !important; /* خلفية بيضاء للدائرة */
    color: #000000 !important; /* الرقم بالأسود للوضوح */
    border: 1px solid #000000; /* تحديد بسيط */
}

/* 3. إجمالي السعر */
.fixed-header .s-cart-summary-total {
    color: #ffffff !important;
}

/* 4. لون رمز العملة (ريال) داخل السلة */
.fixed-header .sicon-sar {
    color: #ffffff !important;
}
/* تثبيت لون دائرة رقم السلة باللون الأحمر دائماً */
.s-cart-summary-count {
    /* لون الخلفية أحمر صريح */
    background-color: #ff0000 !important; 
    
    /* لون الرقم بداخلها أبيض للوضوح */
    color: #ffffff !important; 
    
    /* التأكد من أن الخلفية ليست شفافة */
    opacity: 1 !important;
    
    /* إضافة تحديد بسيط ليبرز الرقم */
    border: 1px solid #ffffff !important;
    
    /* تنسيق الحجم والخط ليكون احترافياً */
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* لضمان ثبات اللون حتى عند حركة الهيدر (fixed-header) */
.fixed-header .s-cart-summary-count {
    background-color: #ff0000 !important;
    color: #ffffff !important;
}