.add-to-wishlist {
    position: absolute !important;
    right: 10px !important; /* تحكم في بعده عن اليمين من هنا */
    top: 10px !important;   /* تحكم في بعده عن الأعلى من هنا */
    z-index: 5 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 30px !important;  /* صغرنا الحاوية لتناسب القلب فقط */
    height: 30px !important;
    cursor: pointer !important;
    background-color: #ffffff00;    border: none !important;    /* إلغاء أي حدود */
    box-shadow: none !important; /* إلغاء أي ظلال */
}
/* --- 1. تعريف متغيرات الألوان الجديدة (من الصورة المرفقة) --- */
:root {
    /* الألوان المستخرجة من الصورة */
    --brand-brown: #8C7B6C;      /* البني الموجود أعلى اليسار - لللأزرار والعناوين */
    --brand-beige: #EBE5DD;      /* البيج الموجود أعلى اليمين - للخلفيات */
    --brand-sage-light: #C3CAC4; /* الأخضر الفاتح أسفل اليسار - للحدود والظلال */
    --brand-sage-dark: #818F87;  /* الرمادي الزيتوني أسفل اليمين - للنصوص والأسعار */
    
    /* ألوان مساعدة مشتقة */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --text-main: #3E3B36;        /* لون نص غامق جداً للقراءة */
}

body {
    background-color: var(--brand-beige) !important;
    background: radial-gradient(circle at center, var(--brand-beige) 0%, #DZD6CE 100%) !important;
    font-family: 'Cairo', sans-serif !important;
    color: var(--text-main) !important;
    overflow-x: hidden;
}

/* --- 1. تنسيق القسم العام --- */
.home-products-section {
    background-color: #F8F5F2 !important; /* خلفية فاتحة جداً تبرز البطاقات */
    padding: 60px 0 !important;
}

.section-title.theme-title-primary {
    color: #5D534A !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
    text-align: center;
    margin-bottom: 40px !important;
}

/* --- 2. تصميم بطاقة المنتج المعكوفة --- */
.product-item {
    background: #ffffff !important;
    border-radius: 40px 5px 40px 5px !important; /* نفس انحناء الفوتر */
    padding: 15px !important;
    border: 1px solid rgba(140, 123, 108, 0.1) !important;
    transition: all 0.4s ease !important;
    overflow: hidden;
    height: 100%;
}

.product-item:hover {
    box-shadow: 0 10px 25px rgba(140, 123, 108, 0.15) !important;
    transform: translateY(-8px);
}

/* --- 3. الصور داخل البطاقة --- */
.product-item .box-1-1 {
    border-radius: 30px 7px 30px 5px !important;
    overflow: hidden;
    background: #FDFBF9;
}

.product-item img {
    transition: transform 0.8s ease;
}

.product-item:hover img {
    transform: scale(1.3);
}

/* --- 4. العناوين والأسعار --- */
.product-title span {
    color: #3E3B36 !important; /* لون داكن وواضح */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    display: block;
    text-align: center;
}

.product-price {
    color: #8C7B6C !important; /* اللون البني للمتجر */
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    text-align: center;
    margin: 10px 0 !important;
}

/* --- 5. زر "أضف للسلة" المعكوف --- */
.product-card-add-to-cart {
    background-color: #818F87 !important; /* اللون الزيتي */
    color: #ffffff !important;
    border: none !important;
    border-radius: 15px 2px 15px 2px !important; /* حواف معكوفة للزر */
    font-weight: 700 !important;
    padding: 10px 20px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    margin-top: 10px;
}

.product-card-add-to-cart:hover {
    background-color: #5D534A !important; /* بني غامق عند الحوم */
    border-radius: 2px 15px 2px 15px !important; /* عكس الانحناء */
}


/* --- 7. العناوين --- */
.section-title {
    color: var(--brand-brown) !important;
}

.section-title::after {
    background: var(--brand-sage-dark) !important;
    opacity: 0.5;
}

///

/* --- 1. إعدادات الفوتر العامة (الألوان والوضوح) --- */
.footer {
    background-color: #8C7B6C !important; /* اللون البني الأساسي من صورتك */
    padding: 40px 0;
    font-family: 'Cairo', sans-serif !important;
}

/* --- 2. تصميم الصناديق المعكوفة (مثل الصورة تماماً) --- */
.footer-about-us-links-div, 
.footer-about-us-div,
.footer-companies {
    background: #EBE5DD !important; /* لون البيج الفاتح من صورتك للخلفية */
    /* انحناء معكوف: أعلى اليسار وأسفل اليمين دائرية، الباقي زوايا حادة */
    border-radius: 35px 5px 35px 5px !important; 
    padding: 25px !important;
    margin-bottom: 20px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* --- 3. وضوح العناوين والنصوص --- */
.footer h2 {
    color: #5D534A !important; /* بني غامق جداً للوضوح */
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    text-align: center;
    margin-bottom: 15px !important;
}

.footer p, .footer a {
    color: #3E3B36 !important; /* لون نص شبه أسود ليكون واضحاً جداً */
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-align: center;
    text-decoration: none !important;
    display: block;
    line-height: 1.6;
}

.footer a:hover {
    color: #8C7B6C !important; /* يتغير للون المتجر عند التمرير */
}

/* --- 4. أيقونات التواصل (تصميم الأيقونة داخل مربع معكوف) --- */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.social-icons a {
    width: 55px;
    height: 55px;
    background-color: #818F87 !important; /* اللون الزيتي من صورتك */
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 12px 2px 12px 2px !important; /* انحناء معكوف صغير للأيقونات */
    transition: 0.3s;
}

.social-icons a span, 
.social-icons a i {
    color: #FFFFFF !important; /* الأيقونة بيضاء ناصعة لتبرز */
    font-size: 24px !important;
}

.social-icons a:hover {
    background-color: #5D534A !important;
    transform: translateY(-5px);
}

/* --- 5. قسم الدفع والحقوق --- */
.footer-companies {
    display: flex;
    justify-content: center;
    padding: 15px !important;
}

.footer-copyrights-vat-certificate {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 20px;
    padding-top: 15px;
}

.footer-copyrights p, .footer-copyrights a {
    color: #EBE5DD !important; /* البيج الفاتح للحقوق أسفل الفوتر */
    font-size: 0.8rem !important;
}

/* تحسينات للجوال لضمان عدم تداخل الصناديق */
@media (max-width: 991px) {
    .footer-about-us-links-div {
        margin-left: 10px;
        margin-right: 10px;
    }
}
//
/* --- تصميم سكشن منتجاتنا (خطوط جانبية متوازنة) --- */

.home-products-section {
    padding-top: 10px !important;
    margin-top: -40px !important; /* لتقليل الفراغ العلوي */
    background-color: #F8F5F2 !important; /* توحيد الخلفية */
}

.section-title.theme-title-primary {
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    color: #5D5044 !important; /* لون الخط البني */
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 40px !important;
}

/* رسم الخطين (اليمين واليسار) */
.section-title.theme-title-primary::before,
.section-title.theme-title-primary::after {
    content: "" !important;
    flex: 1 !important; /* يجعل الخطوط تتمدد بالتساوي في الجهتين */
    height: 1px !important;
    background: linear-gradient(to var(--direction, right), transparent, #8C7B6C) !important;
}

/* تخصيص اتجاه التدرج للخطين */
.section-title.theme-title-primary::before {
    --direction: left;
    margin-left: 20px !important;
}

.section-title.theme-title-primary::after {
    --direction: right;
    margin-right: 20px !important;
}

/* تحسين شكل بطاقات المنتجات لتناسب التصميم الجديد */
.product-item {
    border-radius: 40px 10px 40px 10px !important; /* شكل ورقة الشجر */
    overflow: hidden;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
    transition: transform 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
}
//
.add-to-wishlist {
    position: absolute !important;
    right: 10px !important; /* تحكم في بعده عن اليمين من هنا */
    top: 10px !important;   /* تحكم في بعده عن الأعلى من هنا */
    z-index: 5 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 30px !important;  /* صغرنا الحاوية لتناسب القلب فقط */
    height: 30px !important;
    cursor: pointer !important;
    background-color: #ffffff00;    border: none !important;    /* إلغاء أي حدود */
    box-shadow: none !important; /* إلغاء أي ظلال */
}