/* ============================================================
   1. تنسيقات عامة لصفحة المنتج (Product Page)
   ============================================================ */

/* إخفاء العناصر غير المرغوب بها (المفضلة، المشاركة، التوفر) */ 
button.btn--wishlist.s-button-element, 
.side-socials, 
.availability-container,   
.availability-svg {  
    display: none !important;
    visibility: hidden ;   
}  
 
/* تحسين عرض الصور والسلايدر وحذف الإطارات الرمادية تماماً */
.details-slider .swiper-slide img {
    border-radius: 16px !important; 
    border: none !important;
    outline: none !important;
    box-shadow: none !important; 
} 
 
/* حذف الإطارات من الحاويات المحيطة بالصور */
.details-slider, 
.details-slider .swiper-container, 
.details-slider .swiper, 
.details-slider .swiper-slide,
.magnify-wrapper,
.s-slider-container { 
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.details-slider .swiper {
    overflow: visible !important; 
}

.details-slider .swiper-slide {
    width: 85% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* التأكد من عدم وجود خلفية رمادية في منطقة الصور */
.product-single__photos, .details-slider-wrapper {
    background: transparent !important;
    border: none !important;
}

.details-slider .swiper {
    overflow: visible !important;
}

.details-slider .swiper-slide {
    width: 85% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* إخفاء الصور المصغرة أسفل المنتج */
.s-slider-thumbs { 
    display: none !important;
}

/* تنسيق تاغ "سينفذ قريبًا" */ .athena-image-container 
.promotion-title {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #d63031 !important;
    font-weight: bold !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    border: 1px solid #eee !important;
}

/* ============================================================
   2. تنسيق السعر والوصف
   ============================================================ */

/* حاوية السعر والضريبة */
.flex.whitespace-nowrap.gap-4.items-center.mb-2\.5 {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 15px 0 25px 0 !important;
}

.font-black.text-2xl.inline-block {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
}

/* نص "الأسعار شاملة الضريبة" */
.flex.whitespace-nowrap.gap-4.items-center.mb-2\.5::after {
    content: "الأسعار شاملة الضريبة";
    display: block !important;
    font-size: 10px !important;
    color: #a0a0a0 !important;
    width: 100% !important;
    text-align: right !important;
    margin-top: -2px !important;
}

/* الوصف وتفاصيل المنتج */
.product__description article {
    max-height: none !important;
    overflow: visible !important;
}

#btn-show-more { display: none !important; }

.product__description ul {
    background: #fdfdfd !important;
    padding: 20px 40px 20px 20px !important;
    border-radius: 12px !important;
    border-right: 3px solid #ba936d !important;
    list-style: none !important;
    direction: rtl !important;
    text-align: right !important;
}

.product__description ul li::before {
    content: "•" !important;
    color: #ba936d !important;
    margin-left: 10px !important;
    margin-right: -25px !important;
}



/* ============================================================
   3. تخصيص منتج معين (دب النبض - ID: 1331201550)
   ============================================================ */

/* إخفاء السعر لهذا المنتج */
.product-details-page[data-product-id="1331201550"] .price-wrapper,
.product-details-page[data-product-id="1331201550"] .total-price,
.product-details-page[data-product-id="1331201550"] .before-price {
    display: none !important;
}

/* تنسيق خيارات المنتج بالصور */
.s-product-options-multiple-options-wrapper:has(input[value="77852189"]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 12px !important;
}

.s-product-options-multiple-options-wrapper:has(input[value="77852189"]) label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px !important;
    border: 2px solid #eee !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: pointer !important;
}

.s-product-options-multiple-options-wrapper:has(input[value="77852189"]) input {
    position: absolute !important;
    opacity: 0 !important;
}

.s-product-options-multiple-options-wrapper:has(input[value="77852189"]) label:has(input:checked) {
    border-color: #aa6a2f !important;
    background-color: #fdf9f5 !important;
}

/* صور الخيارات */
.s-product-options-multiple-options-wrapper:has(input[value="77852189"]) label::before {
    content: "" !important;
    width: 90px !important;
    height: 90px !important;
    background-size: cover !important;
    border-radius: 8px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

label:has(input[value="77852189"])::before { background-image: url('https://cdn.salla.sa/WlKZVX/lkfDTIWc2JrMwuBidUBld9onTFsEiU2kW80NZTMT.png') !important; }
label:has(input[value="1451756830"])::before { background-image: url('https://cdn.salla.sa/WlKZVX/Ayg639iCT6l6ipSK7PPuDsuI0k4HFgHfPltsCBRz.png') !important; }
label:has(input[value="542452767"])::before { background-image: url('https://cdn.salla.sa/WlKZVX/d3ZL5tPAj3y6HEakRbzTEMo4FwgpxFEGc4jUeAVs.jpg') !important; }

/* ============================================================
   4. طرق الدفع (تابي وتمارا)
   ============================================================ */


/* --- تعديل عتيق: إخفاء شريط وسائل الدفع فقط --- */
salla-payments.s-payments-list-wrap {
    display: none ;
}

/* لضمان إخفاء الحاوية الخارجية لو لسه طالعة */
.items-center.justify-center.my-2\.5:has(salla-payments) {
    display: none ;
}

/* --- إخفاء قسم التعليقات والتقييمات بالكامل --- */
salla-comments {
    display: none !important;
}

/* مسافة بسيطة تحت قسم الإهداء */
salla-gifting {
    margin-bottom: 80px;
    display: block;
} 
  
/* ===================================== ======================
   5. زر الشراء المثبت (Sticky Bar)
   ============================================================ */
  

.sticky-product-bar__quantity { display: none !important; }

/* استهداف الزر الفعلي داخل الحاوية */
.cart-submit-wrap .s-button-element {
    background: #aa6a2f !important;
    color: #fff !important;
    border-radius: 12px !important;
    height: 55px !important;
    font-size: 18px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    font-weight: 800 !important;
}

/* إزالة أي خلفيات إضافية قد تظهر حول الزر من الحاوية */
.cart-submit-wrap {
    background: transparent !important;
    padding: 0 !important;
}

/* ============================================================
   6. صفحة السلة (شريط الشحن وصندوق الإهداء)
   ============================================================ */

/* شريط الشحن المجاني */
free-shipping-bar > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row-reverse !important;
    background: #ffffff !important;
    border-radius: 50px !important;
    border: 1px solid #f0f0f0 !important;
    padding: 19px 15px !important;
    margin: 15px auto !important;
    width: 100% !important;
    min-height: 55px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04) !important;
}

free-shipping-bar span {
    color: #aa6a2f !important;
    font-weight: 800 !important;
    margin-right: 4px !important;
}

/* تحسين شكل ملصقات (الأكثر مبيعاً - خصم) فوق الصورة */
.absolute.top-2.left-2.flex.flex-col {
    top: 15px !important; /* إزاحة بسيطة عن الحافة */
    left: 15px !important;
    gap: 5px !important;
}

.absolute.top-2.left-2.flex.flex-col .bg-red-500 {
    background-color: #aa6a2f !important; /* تغيير اللون الأحمر للون البني الفخم حق متجرك */
    color: #fff !important;
    border-radius: 50px !important; /* جعل الزوايا دائرية بالكامل */
    padding: 4px 12px !important; /* زيادة العرض لتبدو كتاج احترافي */
    font-size: 11px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; /* ظل ناعم */
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* إذا كنتِ تريدين الحفاظ على اللون الأحمر لـ "خصم" وتغيير "الأكثر مبيعاً" فقط */
/* يمكنك التحكم بالألوان هنا حسب ذوقك */


/* ============================================================
   تنسيق أزرار التفاعل السريع (المفضلة والمعاينة) على الصورة
   ============================================================ */
/* تنسيق شامل للأزرار وزر القلب بشكل خاص */
.athena-action-buttons button, 
.athena-action-buttons .s-product-card-wishlist-btn,
.athena-action-buttons [data-ready] {
    width: 38px !important;
    height: 38px !important;
    /* درجة الشفافية المطلوبة */
    background: rgba(255, 255, 255, 0.3) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 50% !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* استهداف زر القلب (s-product-card-wishlist-btn) بدقة */
.athena-action-buttons .s-product-card-wishlist-btn {
    background: rgba(255, 255, 255, 0.3) !important;
    padding: 0 !important;
}

/* إزالة الخلفية الافتراضية اللي يضيفها الثيم داخل زر القلب */
.athena-action-buttons .s-product-card-wishlist-btn .s-button-btn {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* تنسيق أيقونة القلب والشنطة (اللون البني) */
.athena-action-buttons i, 
.athena-action-buttons svg,
.athena-action-buttons svg path {
    color: #aa6a2f !important;
    fill: #aa6a2f !important;
    width: 18px !important;
    height: 18px !important;
}

/* تأثير الهوفر (عند مرور الماوس) لجميع الأزرار بما فيها القلب */
.athena-action-buttons button:hover,
.athena-action-buttons .s-product-card-wishlist-btn:hover {
    background: #aa6a2f !important;
    transform: translateY(-3px) !important; /* رفعة بسيطة للفخامة */
}

/* تحول الأيقونات للأبيض عند الهوفر */
.athena-action-buttons button:hover i, 
.athena-action-buttons button:hover svg path,
.athena-action-buttons .s-product-card-wishlist-btn:hover svg path,
.athena-action-buttons .s-product-card-wishlist-btn:hover .s-button-btn svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* استهداف الحاوية الخارجية والزر الداخلي للقلب */
.s-product-card-wishlist-btn, 
.s-product-card-wishlist-btn .s-button-element {
    background: rgba(255, 255, 255, 0.3) !important; /* شفافية */
    backdrop-filter: blur(5px) !important; /* تغبيش */
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* حدود خفيفة جداً */
    border-radius: 50% !important;
    box-shadow: none !important; /* إزالة أي ظلال قديمة */
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* تنظيف الزر الداخلي من أي حدود افتراضية من سلة */
.s-product-card-wishlist-btn .s-button-element {
    border: none !important;
}

/* تنسيق أيقونة القلب باللون البني */
.s-product-card-wishlist-btn .sicon-heart {
    color: #aa6a2f !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
}

/* تأثير مرور الماوس (Hover) */
.s-product-card-wishlist-btn:hover .s-button-element {
    background: #aa6a2f !important; /* يتحول للون البني عند التأشير */
}

.s-product-card-wishlist-btn:hover .sicon-heart {
    color: #ffffff !important; /* يتحول القلب للأبيض عند التأشير */
}

/* إخفاء أي طبقات إضافية قد تظهر خلف الزر */
.s-button-wrap.s-product-card-wishlist-btn {
    background: transparent !important;
}


/* ============================================================
   تحسينات عامة لهيكل الصفحة (Layout Optimization)
   ============================================================ */



/* 3. تنسيق شريط الشحن المجاني (الذي ظهر في كودك) */
free-shipping-bar {
    display: block;
    margin-bottom: 25px;
}

free-shipping-bar > div {
    border: none !important;
    background: #ffffff !important;
    border-radius: 50px !important; /* شكل كبسولة */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    padding: 12px 20px !important;
}



/* 6. تحسين زر إتمام الطلب ليصبح عريضاً وفخماً */
#cart-submit {
    height: 60px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border-radius: 15px !important;
    letter-spacing: 0.5px;
    background-color: #aa6a2f !important; /* لون هويتك */
}



/* ============================================================
   تنسيق تذييل الصفحة (Footer) - ثيم أثينا
   ============================================================ */

/* 1. تغيير لون الخلفية والشكل العام للفوتر */
.store-footer {
    background-color: #1a1a1a !important; /* لون أسود فاخر أو غيره */
    border-top: 4px solid #aa6a2f !important; /* خط بني علوي يميز الهوية */
    padding-top: 50px !important;
    padding-bottom: 20px !important;
    border-radius: 40px 40px 0 0 !important; /* انحناء علوي فخم للفوتر */
    margin-top: 50px !important;
}

/* 2. تغيير لون حاوية الفوتر الداخلية */
.store-footer__inner {
    background-color: transparent !important;
}

/* 3. تنسيق العناوين (روابط مهمة - تواصل معنا) */
.store-footer h3, 
.s-contacts-title {
    color: #aa6a2f !important; /* لون الهوية البني */
    font-size: 19px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid rgba(170, 106, 47, 0.3) !important;
    display: inline-block;
    padding-bottom: 5px;
}

/* 4. تنسيق الروابط (سياسة الاستبدال، العناية بالدببة.. إلخ) */
.s-menu-footer-item {
    color: #eeeeee !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
}

.s-menu-footer-item:hover {
    color: #aa6a2f !important;
    padding-right: 8px !important; /* حركة بسيطة عند التمرير */
}

/* 5. تنسيق أيقونات التواصل الاجتماعي */
.s-social-icon {
    background: rgba(170, 106, 47, 0.1) !important;
    padding: 10px !important;
    border-radius: 50% !important;
    border: 1px solid #aa6a2f !important;
    transition: all 0.3s ease !important;
}

.s-social-icon svg {
    fill: #aa6a2f !important;
    width: 20px !important;
    height: 20px !important;
}

.s-social-link a:hover .s-social-icon {
    background: #aa6a2f !important;
}

.s-social-link a:hover .s-social-icon svg {
    fill: #ffffff !important;
}

/* 6. تنسيق الجزء السفلي (الحقوق وطرق الدفع) */
.store-footer .border-t-2 {
    border-color: rgba(255, 255, 255, 0.05) !important;
    margin-top: 40px !important;
}

.copyright-text p {
    color: #888 !important;
}

/* 7. تحسين صور طرق الدفع */
.s-payments-list-item img {
    filter: grayscale(1) brightness(1.5) !important; /* جعل الأيقونات متناسقة مع الثيم */
    opacity: 0.7;
    transition: 0.3s;
}

.s-payments-list-item img:hover {
    filter: none !important;
    opacity: 1;
}

/* ============================================================
   تنسيق قائمة "روابط مهمة" - ثيم أثينا
   ============================================================ */

/* 1. تنسيق العنوان الرئيسي (روابط مهمة) */
.store-footer h3 {
    color: #aa6a2f !important; /* لون الهوية البني */
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    display: flex;
    align-items: center;
}

/* إضافة خط صغير قبل كلمة روابط مهمة ليعطي شكل مودرن */
.store-footer h3::before {
    content: "";
    width: 15px;
    height: 3px;
    background: #aa6a2f;
    margin-left: 10px;
    border-radius: 2px;
}

/* 2. تنسيق قائمة الروابط نفسها */
.s-menu-footer-list {
    display: flex;
    flex-direction: column;
    gap: 12px !important; /* مسافة بين الروابط */
}

/* 3. تنسيق كل رابط على حدة */
.s-menu-footer-item {
    color: #e0e0e0 !important; /* لون أبيض مطفي */
    font-size: 14.5px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* 4. حركة احترافية عند تمرير الماوس على الرابط */
.s-menu-footer-item:hover {
    color: #aa6a2f !important; /* يتحول للون البني */
    padding-right: 12px !important; /* يندفع لليسار قليلاً */
}

/* إضافة سهم صغير يظهر فقط عند تمرير الماوس */
.s-menu-footer-item:hover::before {
    content: "←" !important;
    margin-left: 8px;
    font-weight: bold;
}

/* 5. إخفاء الرابط الفارغ (رابط المدونة الفاشل) */
.s-menu-footer-item[href*="blog"]:empty {
    display: none !important;
}

/* 6. تحسين العرض على الجوال ليكون في المنتصف إذا كان الفوتر ممركز */
@media (max-width: 768px) {
    .store-footer h3 {
        justify-content: center;
    }
    .store-footer h3::before {
        display: none;
    }
    .s-menu-footer-item {
        justify-content: center;
    }
    .s-menu-footer-item:hover {
        padding-right: 0 !important;
        transform: scale(1.05);
    }
}
/* ============================================================
   تنسيق قسم "تواصل معنا" - ثيم أثينا
   ============================================================ */

/* 1. تنسيق القائمة بالكامل */
.s-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 15px !important; /* مسافة بين الجوال والإيميل */
}

/* 2. تنسيق أيقونة الاتصال والإيميل */
.s-contacts-icon {
    background-color: #aa6a2f !important; /* خلفية بنية للأيقونة */
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important; /* زوايا دائرية ناعمة */
    margin-left: 12px !important;
    transition: transform 0.3s ease !important;
}

/* 3. تصغير حجم الأيقونة داخل الدائرة لتناسب التصميم */
.s-contacts-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: #ffffff !important; /* الأيقونة باللون الأبيض داخل الخلفية البنية */
}

/* 4. تنسيق أرقام التواصل والإيميل */
.s-contacts-item {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important; /* لون النص */
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.s-contacts-item span.unicode {
    font-family: sans-serif !important; /* لجعل الأرقام تظهر بشكل مرتب */
    letter-spacing: 0.5px;
}

/* 5. حركة عند تمرير الماوس */
.s-contacts-item:hover .s-contacts-icon {
    transform: rotate(10deg) scale(1.1) !important; /* ميلان بسيط عند التمرير */
    background-color: #8e5827 !important; /* درجة أغمق قليلاً */
}

.s-contacts-item:hover span.unicode {
    color: #aa6a2f !important; /* يتغير لون الرقم للبني عند التمرير */
}

/* 6. تحسين المظهر على الجوال */
@media (max-width: 768px) {
    .s-contacts-list {
        align-items: center !important;
    }
    .s-contacts-item {
        flex-direction: row-reverse; /* ترتيب الأيقونة والنص للجوال */
    }
    .s-contacts-icon {
        margin-left: 0 !important;
        margin-right: 12px !important;
    }
}
/* ============================================================
   تنسيق هوية المتجر (الشعار والسوشيال ميديا) - ثيم أثينا
   ============================================================ */

/* 1. تنسيق حاوية الشعار */
.store-footer .lg-col-span-2.rtl\:lg\:pl-20 {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* محاذاة لليمين في الكمبيوتر */
}

/* 2. تحسين مظهر الشعار (Logo) */
.store-footer__inner img {
    max-width: 180px !important; /* تحديد حجم أنيق للشعار */
    height: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); /* ظل ناعم خلف اللوجو */
    transition: transform 0.4s ease-in-out !important;
}

.store-footer__inner img:hover {
    transform: scale(1.05); /* تكبير بسيط عند مرور الماوس */
}

/* 3. تنسيق أيقونات التواصل الاجتماعي (Instagram وغيرها) */
.store-footer salla-social.mb-6 {
    margin-top: 25px !important;
    display: block !important;
}

.store-footer .s-social-list {
    display: flex !important;
    gap: 15px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 4. جعل أيقونة الإنستقرام دائرية وبخلفية بنية */
.store-footer .s-social-icon {
    width: 45px !important;
    height: 45px !important;
    background-color: #aa6a2f !important; /* لون الهوية البني */
    border-radius: 50% !important; /* شكل دائري */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(170, 106, 47, 0.3) !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.store-footer .s-social-icon svg {
    width: 22px !important;
    height: 22px !important;
    fill: #ffffff !important; /* لون الأيقونة أبيض */
}

/* 5. تأثير عند تمرير الماوس على أيقونة السوشيال ميديا */
.store-footer .s-social-link a:hover .s-social-icon {
    background-color: transparent !important;
    border-color: #aa6a2f !important;
    transform: translateY(-5px) !important; /* ترتفع للأعلى قليلاً */
}

.store-footer .s-social-link a:hover .s-social-icon svg {
    fill: #aa6a2f !important; /* يتغير لون الأيقونة للبني */
}

/* 6. تحسين المظهر على الجوال (توسيط كل شيء) */
@media (max-width: 768px) {
    .store-footer .lg-col-span-2.rtl\:lg\:pl-20 {
        align-items: center !important; /* توسيط الشعار والأيقونات في الجوال */
        text-align: center !important;
        padding-left: 0 !important;
    }

    .store-footer__inner img {
        max-width: 140px !important;
        margin-bottom: 10px;
    }
}

/* ============================================================
   إجبار الشعار وأيقونات السوشيال على التوسط المطلق - ثيم أثينا
   ============================================================ */

/* 1. استهداف الحاوية وإلغاء أي إزاحة جانبية (pl-20) مبرمجة في الثيم */
.store-footer .lg-col-span-2.rtl\:lg\:pl-20, 
.store-footer .lg-col-span-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* التوسط الأفقي */
    justify-content: center !important;
    text-align: center !important;
    padding-left: 0 !important; /* تصفير الإزاحة اللي كانت تخربه */
    padding-right: 0 !important;
    margin: 0 auto !important; /* ضمان التمركز في المنتصف */
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* 2. تنسيق رابط الشعار لضمان توسطه */
.store-footer .lg-col-span-2 a.athena-slide-down-top {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 3. تنسيق صورة الشعار بشكل انسيابي غير مربع */
.store-footer__inner img {
    max-width: 150px !important; /* حجم متناسق */
    height: auto !important;
    margin: 0 auto !important;
    /* شكل انسيابي فخم */
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    transition: all 0.4s ease !important;
}

.store-footer__inner img:hover {
    transform: scale(1.05) rotate(-2deg) !important;
    border-radius: 50% !important; /* يتحول لدائرة عند اللمس */
}

/* 4. توسيط أيقونات السوشيال ميديا تحت اللوجو */
.store-footer salla-social {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 15px !important;
}

.store-footer .s-social-list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
/* ============================================================
   تنسيق آمن لقسم القصة فقط (بدون انحراف المتجر)
   ============================================================ */

/* 1. تنسيق المحتوى الداخلي فقط دون لمس حاوية الـ section الكبيرة */
.who-we-are-title {
    color: #222 !important;
    font-size: clamp(24px, 5vw, 32px) !important; /* حجم مرن */
    font-weight: 900 !important;
    margin-bottom: 15px !important;
    display: block !important;
    text-align: inherit; /* يتبع محاذاة الثيم الأصلية */
}

.who-we-are-subtitle {
    color: #6d4c31 !important; /* بني دافئ */
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
    max-width: 550px !important;
    /* نلغي أي هوامش قد تسبب انحراف */
    margin-right: 0 !important; 
    margin-left: 0 !important;
}

/* 2. تنسيق الزر بشكل مستقل */
.who-we-are-btn {
    background-color: #aa6a2f !important;
    color: #fff !important;
    padding: 12px 35px !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: none !important;
    text-align: center !important;
}

.who-we-are-btn:hover {
    background-color: #8e5827 !important;
    transform: translateY(-2px) !important;
}

/* 3. تنسيق قسم الصورة داخل القصة فقط */
.image-section img {
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    max-width: 100% !important;
}

/* 4. معالجة الانحراف (إعادة ضبط الحاويات العامة) */
/* هذا السطر يضمن أن أي قسم يحمل كلاس container يبقى في المنتصف تماماً */
.container {
    margin-right: auto !important;
    margin-left: auto !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
}

/* 5. إضفاء طابع "البطاقة" للقصة بدون تغيير الـ Display */
section:has(.who-we-are-title) {
    background: #fdfaf7 !important;
    border-radius: 30px !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    border: 1px solid rgba(170, 106, 47, 0.05) !important;
}

/* منع أي تأثير على الـ Grid الخاص بأثينا */
.md\:flex-row {
    display: flex !important;
}
/* ============================================================
   تقليص حجم قسم القصة - ثيم أثينا
   ============================================================ */

/* 1. تقليل مساحة القسم بالكامل */
section:has(.who-we-are-title) {
    background: #fdfaf7 !important;
    border-radius: 20px !important;
    padding-top: 30px !important; /* تقليل المسافة العلوية */
    padding-bottom: 30px !important; /* تقليل المسافة السفلية */
    margin: 20px auto !important; /* تقليل الهامش الخارجي */
    max-width: 95% !important; /* جعله أضيق قليلاً */
}

/* 2. تصغير العنوان */
.who-we-are-title {
    font-size: 24px !important; /* تصغير من 32px */
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}

/* 3. تقليص مساحة نص القصة */
.who-we-are-subtitle {
    font-size: 15px !important; /* تصغير بسيط للخط */
    line-height: 1.6 !important; /* تقليل التباعد بين الأسطر */
    margin-bottom: 20px !important;
    max-width: 420px !important; /* جعل النص يتركز في مساحة أضيق */
}



/* 5. التحكم في حجم الصورة لتبدو أصغر وأرشق */
.image-section img {
    border-radius: 18px !important;
    max-height: 400px !important; /* تحديد أقصى طول للصورة */
    width: auto !important;
    margin: 0 auto !important;
    object-fit: cover !important;
}

/* تحسين للجوال ليكون القسم مضغوطاً بشكل جميل */
@media (max-width: 768px) {
    section:has(.who-we-are-title) {
        padding: 20px 15px !important;
    }
    .who-we-are-title {
        font-size: 20px !important;
    }
    .image-section img {
        max-height: 250px !important;
    }
}
/* ============================================================
   تكبير اللوجو في ثيم أثينا - نسخة الإجبار القصوى
   ============================================================ */

/* 1. استهداف الصورة مباشرة بأكثر من كلاس لضمان التنفيذ */
header .navbar-brand img, 
.main-header .navbar-brand img, 
[data-v-header] .navbar-brand img {
    width: 220px !important;    /* العرض الذي تريده */
    max-width: 220px !important; /* تأكيد أقصى عرض */
    height: auto !important;     /* الحفاظ على التناسب */
    min-height: 50px !important; /* ضمان عدم انكماشه */
    object-fit: contain !important;
    /* استخدام scale كحل أخير إذا كان الـ width محظوراً */
    transform: scale(1.3) !important; 
    transform-origin: right center !important; /* التكبير يبدأ من اليمين لكي لا يخرج عن الصفحة */
}

/* 2. تكبير الحاوية المحيطة باللوجو لكي لا يظهر مقصوصاً */
header .navbar-brand, 
.main-header .navbar-brand {
    height: auto !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. ضبط الحجم للجوال لكي لا يغطي على أيقونة السلة */
@media (max-width: 768px) {
    header .navbar-brand img {
        width: 140px !important;
        max-width: 140px !important;
        transform: scale(1.1) !important;
        transform-origin: right center !important;
    }
}

/* تصميم البطاقة العائمة لقصة الوفيرا */
section:has(.who-we-are-title) {
    background: #ffffff !important; 
    border: 1px solid #eee !important;
    border-radius: 40px !important; /* حواف دائرية جداً */
    padding: 30px !important;
    margin: 40px auto !important;
    max-width: 850px !important; /* تقليص العرض */
    box-shadow: 0 20px 40px rgba(170, 106, 47, 0.05) !important;
    display: flex !important;
    align-items: center;
}

/* العنوان بشكل مودرن */
.who-we-are-title {
    font-size: 22px !important;
    color: #aa6a2f !important;
    letter-spacing: -0.5px;
    margin-bottom: 10px !important;
}

/* النص بشكل أنيق */
.who-we-are-subtitle {
    font-size: 14.5px !important;
    color: #777 !important;
    line-height: 1.6 !important;
    max-width: 380px !important;
}

/* الصورة بشكل جانبي صغير */
.image-section img {
    border-radius: 30px !important;
    max-height: 280px !important; /* تقليص الارتفاع */
    box-shadow: none !important;
    filter: sepia(0.2); /* لمسة دافئة خفيفة */
}

/* ============================================================
   تنسيق صفحة "قصة الوفيرا" - بناءً على محتوى الملف المرفق
   ============================================================ */

/* 1. تقليص حجم الحاوية وتوسيطها */
.content--single-page {
    max-width: 800px !important; /* حجم ملموم جداً وأنيق */
    margin: 40px auto !important; /* توسيط كامل */
    background: #fdfaf7 !important; /* خلفية كريمية دافئة */
    border-radius: 30px !important;
    padding: 40px !important;
    border: 1px solid rgba(170, 106, 47, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important;
}

/* 2. تنسيق العنوان الرئيسي (قصة الوفيرا) */
.content--single-page h1.font-bold {
    color: #aa6a2f !important;
    font-size: 28px !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    font-weight: 900 !important;
}

/* 3. تنسيق نصوص المحتوى (ql-align-right) */
.content-entry .ql-align-right, 
.content-entry .ql-align-justify {
    color: #5c4029 !important; /* بني دافئ */
    font-size: 17px !important;
    line-height: 2 !important; /* مساحة مريحة للعين */
    margin-bottom: 20px !important;
    text-align: right !important; /* محاذاة صحيحة للغة العربية */
}

/* 4. تمييز العناوين الفرعية (مثل: هنا كانت البداية..) */
.content-entry h1 strong {
    color: #aa6a2f !important;
    font-size: 22px !important;
    display: block;
    margin-top: 30px;
    border-right: 4px solid #aa6a2f; /* خط جانبي فخم */
    padding-right: 15px;
}

/* 5. تنسيق الصورة داخل المحتوى (الدببة) */
.content-entry img {
    border-radius: 20px !important;
    max-width: 90% !important; /* تقليص حجم الصورة */
    height: auto !important;
    margin: 30px auto !important;
    display: block !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.07) !important;
}

/* 6. إخفاء المسافات الزائدة (التي تظهر كفراغات كبيرة في ملفك) */
.content-entry p br {
    display: none !important;
}

/* 7. ضمان استقامة المتجر وعدم الانحراف */
.container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ============================================================
   تنسيق وسام "الأكثر مبييعاً" فوق صورة المنتج
   ============================================================ */

.promotion-title {
    position: absolute !important; /* لجعله يطفو فوق الصورة */
    top: 15px !important;
    right: 15px !important;
    background: linear-gradient(135deg, #aa6a2f 0%, #8e5827 100%) !important; /* تدرج بني ذهبي */
    color: #ffffff !important;
    padding: 5px 15px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border-radius: 50px !important; /* شكل بيضاوي */
    z-index: 10 !important;
    box-shadow: 0 4px 10px rgba(170, 106, 47, 0.3) !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* إضافة أيقونة نار أو نجمة صغيرة قبل النص لإعطاء شكل احترافي */
.promotion-title::before {
    content: "🔥"; /* يمكنك تغييرها لنجمة ⭐ إذا فضلت */
    font-size: 14px;
}

/* تأثير نبضي خفيف لجذب الانتباه */
@keyframes pulse-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.promotion-title {
    animation: pulse-animation 2s infinite ease-in-out;
}

/* تعديل مكانه في الجوال ليكون أصغر قليلاً */
@media (max-width: 768px) {
    .promotion-title {
        top: 10px !important;
        right: 10px !important;
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
}


/* ============================================================
   تعديل زر الإغلاق (X) ليكون دائرياً تماماً
   ============================================================ */

.btn--close.close-mobile-menu, 
.athena-side-menu-close {
    width: 40px !important;    /* عرض ثابت */
    height: 40px !important;   /* ارتفاع ثابت مساوي للعرض لضمان الدائرة */
    border-radius: 50% !important; /* جعل الحواف دائرية 100% */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;     /* إلغاء أي حشوة قد تسبب الشكل البيضاوي */
    background: #ffffff !important; /* خلفية بيضاء */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    
    /* تحديد موقع الزر */
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 999 !important;
}

/* تنسيق أيقونة الـ X داخل الدائرة */
.btn--close.close-mobile-menu svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #aa6a2f !important; /* لون الإغلاق بالبني ليناسب هويتك */
    stroke-width: 2px !important;
}

/* تأثير عند الضغط */
.btn--close.close-mobile-menu:active {
    transform: scale(0.9) !important;
    background-color: #f8f8f8 !important;
}



/* 4. تنسيق رقم عداد السلة (الدائرة الطائرة) */
.s-cart-summary-count {
    background-color: #8b572a !important; /* خلفية أغمق للبروز */
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 17px !important; /* تكبير طفيف جداً للوضوح */
    height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* موقع الرقم فوق الأيقونة مباشرة */
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    
    border: 1.5px solid #ffffff !important; /* إطار أبيض لفصل الرقم */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    z-index: 10 !important;
}

/* تأكيد تثبيت موضع الأيقونة للسماح بظهور الرقم خارجها */
#s-cart-icon, 
.s-cart-summary-wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* ============================================================
   تنسيق زر "تسوق الآن" الشفاف مع نص بلون البراند
   ============================================================ */

.athena_slider_btn.slide-button {
    background-color: rgba(255, 255, 255, 0.4) !important; /* شفافية خفيفة جداً */
    color: #8b572a !important; /* النص بلون البراند الغامق بدلاً من الأبيض */
    
    padding: 12px 40px !important;
    border-radius: 50px !important; /* حواف ناعمة جداً */
    font-size: 19px !important;
    font-weight: 900 !important; /* تغميق الخط لزيادة الوضوح */
    text-decoration: none !important;
    display: inline-block !important;
    html {
    scroll-behavior: smooth !important;
}
    /* إطار بنفس لون النص */
    border: 2px solid #8b572a !important; 
    
    /* تأثير زجاجي ناعم */
    backdrop-filter: blur(4px) !important;
    
    /* ظل خفيف جداً */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease-in-out !important;
}

/* تأثير تفاعلي عند تمرير الماوس */
.athena_slider_btn.slide-button:hover {
    background-color: #8b572a !important; /* يمتلئ باللون عند اللمس */
    color: #ffffff !important; /* ينعكس النص للأبيض عند التعبئة */
    transform: scale(1.05) !important;
}

html {
    scroll-behavior: smooth !important;
}
/* ============================================================
   ترتيب: السعر (فوق) ثم العنوان (تحت) - محاذاة يمين
   ============================================================ */

/* 1. الحاوية التي تجمع العنوان والسعر */
.athena-card-content {
    display: flex !important;
    flex-direction: column-reverse !important; /* عكس الترتيب: السعر يصبح فوق والعنوان تحت */
    align-items: flex-start !important; /* محاذاة كل المحتوى لليمين */
    padding-right: 10px !important;
    padding-top: 10px !important;
}

/* تنسيق العنوان وتصغير حجمه */
.athena-product-title a {
    display: block !important;
    text-align: right !important;
  color: #8b572a !important; 
    /* --- تعديل الحجم هنا --- */
    font-size: 14px !important; /* حجم صغير وأنيق */
    font-weight: 500 !important; /* تقليل عرض الخط ليكون أنعم */
    /* ------------------------ */
    color: #605A55 !important; /* تغيير اللون لرمادي غامق هادئ ليبرز السعر أكثر */
    line-height: 1.4 !important;
    text-decoration: none !important;
}

/* 3. تنسيق السعر (سيظهر في الأعلى الآن) */
.athena-card-content .flex.justify-center {
    justify-content: flex-start !important; /* يمين */
    width: 100% !important;
    margin-bottom: 2px !important; /* مسافة بسيطة عن العنوان تحت */
}

.athena-card-content h4.text-gray-900 {
    color: #8b572a !important; 
    font-size: 1.2rem !important;  
    font-weight: 900 !important;  
    display: flex !important;
    flex-direction: row-reverse !important; /* لترتيب ر.س بعد الرقم */
    align-items: center !important;
    gap: 6px !important;
}

/* 4. أيقونة العملة */
.athena-card-content i.sicon-sar {
    color: #8b572a !important;  
    font-size: 0.85rem !important; 
    opacity: 0.7;
}
/* حذف الإطار والظل من بطاقة المنتج - قالب أثينا */
.athena-card {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important; /* اختياري: لجعل الخلفية شفافة */
}

/* إزالة أي حدود إضافية قد تظهر في محتوى البطاقة السفلي */
.athena-card-content {
    border: none !important;
    padding-top: 10px !important; /* مسافة بسيطة بعد حذف الإطار */
}

/* في حال وجود حدود على حاوية الصورة */
.athena-image-container {
    border: none !important;
}

/* ============================================================
   تنسيق احترافي وجذاب لقائمة المستخدم (Premium Look)
   ============================================================ */

/* 1. تصميم الزر الخارجي - شكل بيضاوي زجاجي */
.s-user-menu-trigger {
    background: rgba(139, 87, 42, 0.05) !important; /* خلفية شفافة من لون البراند */
    border: 1px solid rgba(139, 87, 42, 0.2) !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.s-user-menu-trigger:hover {
    background: #8b572a !important;
    transform: scale(1.02);
}

.s-user-menu-trigger:hover .s-user-menu-trigger-name,
.s-user-menu-trigger:hover .s-user-menu-trigger-hello {
    color: #ffffff !important;
}

/* 2. القائمة المنسدلة - تصميم "النيون الخفي" */
.s-user-menu-dropdown {
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(15px) !important; /* تأثير زجاجي خلف القائمة */
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
}

/* 3. الهيدر الداخلي - تصميم كريمي رخامي وفخم */
.s-user-menu-dropdown-header {
    background: linear-gradient(135deg, #fdfaf7 0%, #f5eee6 100%) !important; /* تدرج كريمي ناعم */
    border: 1px solid rgba(139, 87, 42, 0.15) !important; /* إطار بني خفيف جداً */
    border-radius: 15px !important;
    padding: 18px !important;
    margin-bottom: 10px !important;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5) !important; /* وهج داخلي أبيض */
}

/* تعديل ألوان النصوص لتناسب الخلفية الفاتحة */
.s-user-menu-dropdown-header p {
    color: #8b572a !important; /* اسم المستخدم بالبني الغامق */
    font-weight: 800 !important;
    font-size: 15px !important;
}

.s-user-menu-dropdown-header span {
    color: #a67c52 !important; /* كلمة "مرحباً بك" بلون بني مطفي */
    font-size: 12px !important;
    opacity: 0.9;
}

/* تنسيق صورة المستخدم (Avatar) لتبدو أفخم */
.s-user-menu-dropdown-header img {
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 10px rgba(139, 87, 42, 0.1) !important;
    background-color: #fff;
}

.s-user-menu-dropdown-header img {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* 4. الروابط - تأثير انزلاقي جذاب */
.s-user-menu-dropdown-item-link {
    border-radius: 14px !important;
    margin: 2px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.s-user-menu-dropdown-item-link:hover {
    background: rgba(139, 87, 42, 0.08) !important;
    padding-inline-start: 25px !important; /* حركة انزلاق بسيطة لليمين */
}

/* 5. الأيقونات - ذهبية متوهجة */
.s-user-menu-dropdown-item-prefix svg {
    fill: #8b572a !important;
    transition: 0.3s !important;
}

.s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg {
    transform: rotate(-10deg) scale(1.2) !important; /* حركة أيقونة جذابة */
}

/* 6. خط فاصل ناعم */
.s-user-menu-dropdown-list {
    border-top: none !important;
}


/* ============================================================
   تحسين حاوية الصورة والأزرار العلوية - متجر الوفيرا
   ============================================================ */

/* 1. تنظيف حاوية الصورة وإضافة حواف ناعمة */
.athena-image-container {
width: 100% !important; /* يأخذ عرض العمود المخصص له */
    max-width: 450px !important;
    height: 255px !important; /* الارتفاع المطلوب */
    
    border-radius: 21px !important; /* حواف دائرية كبيرة (مثل فلاورد) */
    overflow: hidden !important;
    background-color: #f7f7f7 !important; /* خلفية رمادية فاتحة جداً */
    border: none !important; /* فلاورد غالباً بدون إطار، يعتمد على الظل */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    

}

/* تأثير بسيط عند مرور الماوس على الصورة */
.athena-image-container:hover .athena-image {
    transform: scale(1.05) !important; /* تكبير بسيط جداً للصورة */
}

.athena-image {
    transition: transform 0.5s ease !important;
}


/* تأثير عند مرور الماوس على الأيقونات */
.athena-action-btn:hover, 
.s-product-card-wishlist-btn button:hover {
    background: #8b572a !important; /* تتحول للون البراند */
}

.athena-action-btn:hover svg, 
.athena-action-btn:hover path,
.s-product-card-wishlist-btn button:hover i {
    fill: #ffffff !important; /* أيقونة بيضاء عند الحوم */
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* 3. إخفاء أي بقايا لزر "إضافة للسلة" التي تظهر فوق الصورة */
.athena-desktop-add-btn {
    display: none !important;
}
/* ============================================================
   تنسيق القائمة الجانبية المدمج (المستطيلات المزدوجة + البطاقات)
   ============================================================ */
/* 1. جعل القائمة تغطي كامل الشاشة */
.mm-ocd__content, .mobile-menu, #mobile-menu {
    width: 100% !important;
    max-width: 100% !important;
}

.mobile-menu ul {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. تنسيق المستطيلات (لحظات والمستلم) */
.mobile-menu li[id="1510605167"], 
.mobile-menu li[id="1416247599"] {
    display: inline-block !important; 
    width: calc(50% - 12px) !important; 
    height: 250px !important;
    margin: 15px 4px !important; 
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    vertical-align: top !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 1 !important; /* ضمان عدم بهتان المستطيل */
}

/* 2. تحويل الروابط داخل المستطيلات إلى صور خلفية */
.mobile-menu li[id="1510605167"] a, 
.mobile-menu li[id="1416247599"] a {
    height: 100% !important;
    width: 100% !important;
}

/* الخلفيات */
.mobile-menu li[id="1510605167"] {
    background-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%), 
                      url('https://cdn.salla.sa/WlKZVX/9xO5TP3zKJ9LpdLjdpTmc0rGszAHcd2lkUXlIklc.jpg') !important;
}
.mobile-menu li[id="1416247599"] {
    background-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%), 
                      url('https://cdn.salla.sa/WlKZVX/categories/IzQpzu3Qb3FVjoYpl2W7WPMdXatXjY51kmLFMz3z.jpg') !important;
}

/* 3. إخفاء أي شيء قديم (نصوص، صور، أيقونات) */
.mobile-menu li[id="1510605167"] a, .mobile-menu li[id="1416247599"] a {
    color: transparent !important;
}
.mobile-menu li[id="1510605167"] span, .mobile-menu li[id="1416247599"] span,
.mobile-menu li[id="1510605167"] img, .mobile-menu li[id="1416247599"] img {
    display: none !important;
}

/* 4. كتابة النصوص الجديدة بوضوح تام وتثبيتها أسفل المستطيل */
.mobile-menu li[id="1510605167"]::after, 
.mobile-menu li[id="1416247599"]::after {
    position: absolute !important;
    bottom: 20px !important; 
    left: 0 !important;
    right: 0 !important;
    color: #ffffff !important; 
    font-weight: 800 !important; 
    font-size: 20px !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,1) !important; 
    z-index: 1 !important;
    opacity: 1 !important; 
    pointer-events: none !important;
    text-align: center !important;
    /* ضمان عدم وجود خط تحت النص الجديد */
    text-decoration: none !important;
    border: none !important;
}

/* تحديد الكلمات لكل مستطيل */
.mobile-menu li[id="1510605167"]::after { content: "هدايا لكل لحظة" !important; }
.mobile-menu li[id="1416247599"]::after { content: "الــدببة" !important; }

/* إخفاء الأيقونات الأصلية للمستطيلات فقط */
.mobile-menu li[id="1510605167"] img, .mobile-menu li[id="1510605167"] svg,
.mobile-menu li[id="1416247599"] img, .mobile-menu li[id="1416247599"] svg {
    display: none !important;
}

/* 3. تنسيق باقي البطاقات البيج (استثناء لحظات والمستلم) */
.mobile-menu ul li:not([id="1510605167"]):not([id="1416247599"]) {
    margin: 10px 10px !important; 
    background-color: #FAF9F6 !important;
    border-radius: 12px !important;
    min-height: 75px !important; 
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 20px) !important; 
}

.mobile-menu ul li:not([id="1510605167"]):not([id="1416247599"]) a,
.mobile-menu ul li:not([id="1510605167"]):not([id="1416247599"]) span {
    color: #8b572a !important;
    font-size: 18px !important; 
    font-weight: 700 !important;
    width: 100% !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. محاذاة نص "كروت الإهداء" ليتساوى مع البقية */
li[id="1605241912"] a, 
li[id="1605241912"] span {
    position: relative !important;
    right: -12px !important; 
    padding-right: 0px !important;
}
li[id="1605241912"] a i, li[id="1605241912"] a svg { display: none !important; }

/* 5. تنسيق الخيارات الفرعية وتذييل القائمة */
.mobile-menu li[id="1510605167"] ul li {
    width: calc(100% - 20px) !important;
    margin: 6px 10px !important;
}
.mobile-menu li[id="1510605167"] ul li a {
    color: #8b572a !important;
    font-size: 15px !important;
    padding: 15px 20px !important;
}text-sm

.mobile-menu ul::after {

    display: block !important;
    text-align: center !important;
    padding: 40px 0 !important;
    font-size: 14px !important;
    color: #8b572a !important;
    opacity: 0.5;
}

/* 5. تنظيف القوائم المنسدلة ومنع تكرار الصور بالداخل */
.mobile-menu li ul {
    background: #ffffff !important;
}

/* إخفاء الخلفية المظلمة للقائمة الجانبية */
.mm-ocd__backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* إخفاء أسهم التنقل الافتراضية داخل مستطيلات لحظات ومستلم */
.mobile-menu li[id="1510605167"]::before, 
.mobile-menu li[id="1416247599"]::before,
.mobile-menu li[id="1510605167"] .mm-spn--next::after,
.mobile-menu li[id="1416247599"] .mm-spn--next::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* زيادة التأكيد بحذف أي أيقونة سهم داخل الرابط المباشر */
.mobile-menu li[id="1510605167"] i, 
.mobile-menu li[id="1416247599"] i,
.mobile-menu li[id="1510605167"] svg:not(.close-mobile-menu svg), 
.mobile-menu li[id="1416247599"] svg {
    display: none !important;
}

.mobile-menu ul::after {
    content: "صنع بكل حب 🧸" !important;
    display: block !important;
    text-align: center !important;
    padding: 40px 0 !important;
    font-size: 14px !important;
    color: #8b572a !important;
    opacity: 0.5;


}



/* إخفاء القائمة المنسدلة لأي خيار يحتوي على كلمة تغليف (سنتحكم بالإخفاء عبر JS لضمان الدقة) */

/* حاوية المربعات - إجبار الاصطفاف بجانب بعض */
.wrapper-packaging {
    display: flex !important;
    flex-direction: row !important; /* صف واحد */
    flex-wrap: nowrap !important; /* ممنوع ينزل سطر جديد */
    gap: 15px !important;
    justify-content: flex-start !important; /* يبدأ من اليمين */
    margin-top: 20px !important;
    overflow-x: auto !important; /* تمرير جانبي لو الشاشة صغيرة */
    padding: 10px 5px !important;
    -webkit-overflow-scrolling: touch; /* تمرير ناعم للجوال */
}



.athena-card-content h4.text-sm {
  
    font-size: 17px !important;  /* 👈 تم تكبير الخط (كان حوالي 19px) */
    font-weight: 900 !important; 
}

/* تحسين مقاس المربع ليتناسب مع الصف الواحد */
.opt-packaging {
    flex: 0 0 160px !important; /* عرض ثابت لكل مربع 160px */
    height: 190px !important;
    border: 2px solid #eee !important;
    border-radius: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.hidden-packaging-select {
    display: none !important;
} 
/* صور التغليف */
.opt-packaging img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
}

/* نصوص التغليف */
.opt-title { 
    font-size: 14px !important; 
    font-weight: 800 !important; 
    line-height: 1.2 !important;
}

.opt-price { 
    font-size: 13px !important; 
    color: #888 !important; 
    margin-top: 4px !important; 
}

/* تأثير الاختيار */
.opt-packaging.active {
    border-color: #aa6a2f !important;
    background-color: #fdf9f5 !important;
    box-shadow: 0 5px 15px rgba(170,106,47,0.15) !important;
}
/* 1. تنسيق خانة الرسالة (Textarea) - لكل المتجر */
.s-product-options-textarea textarea.s-form-control {
    border-radius: 20px !important;
    border: 2px solid #eee !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
    background-color: #fdfdfd !important;
    resize: none !important;
}

.s-product-options-textarea textarea.s-form-control:focus {
    border-color: #aa6a2f !important;
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(170, 106, 47, 0.1) !important;
    outline: none !important;
}

/* 2. تنسيق جميع القوائم المنسدلة (Dropdown/Select) في الخيارات */
.s-product-options-option-content select.s-form-control {
    border-radius: 20px !important;
    border: 1.5px solid #eee !important;
    padding: 12px 15px !important;
    height: 55px !important;
    background-color: #fff !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.s-product-options-option-content select.s-form-control:focus {
    border-color: #aa6a2f !important;
    box-shadow: 0 4px 12px rgba(170, 106, 47, 0.1) !important;
}

/* 3. تنسيق العناوين (الترويسات) لكل خيارات المنتجات */
.s-product-options-option-label {
    display: block !important;
    width: 100% !important;
    background: #f8f8f8 !important;
    padding: 15px !important;
    border-radius: 15px !important;
    border-right: 6px solid #aa6a2f !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box;
}


/* 4. تنسيق خيارات الـ Checkbox (مثل الإضافات الجمالية) لتمدد الشاشة */
.s-product-options-multiple-options-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
}

.s-product-options-multiple-options-wrapper label {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1.5px solid #eee !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* علامة الزائد (+) للخيارات المتعددة */
.s-product-options-multiple-options-wrapper label::before {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    background: #f0f0f0;
    border-radius: 50%;
    color: #aa6a2f;
    font-weight: bold;
    margin-left: 15px;
    font-size: 16px;
}

/* حالة الاختيار (✓) لكل الخيارات المتعددة في المتجر */
.s-product-options-multiple-options-wrapper label:has(input:checked) {
    border-color: #aa6a2f !important;
    background-color: #fdf9f5 !important;
    box-shadow: 0 4px 12px rgba(170, 106, 47, 0.1) !important;
}

.s-product-options-multiple-options-wrapper label:has(input:checked)::before {
    content: '✓';
    background: #aa6a2f;
    color: #fff;
}

/* إخفاء مربعات الصح الأصلية في كل المتجر */
.s-product-options-multiple-options-wrapper input[type="checkbox"] {
    display: none !important;
}

/* --- تعديل عتيق: مستطيلات طولية (صورة فوق ونص تحت) --- */

/* 1. تنسيق الشبكة ليكون المستطيل طولي */
.s-product-options-multiple-options-wrapper:has(input[value="773710157"]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; 
    gap: 12px !important;
}

/* 2. تصميم المستطيل الطولي */
.s-product-options-multiple-options-wrapper:has(input[value="773710157"]) label {
    display: flex !important;
    flex-direction: column !important; /* صورة فوق ونص تحت */
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    min-height: 140px !important; /* ارتفاع كافي عشان ما ينضغط النص */ 
    transition: 0.3s !important;
}

/* 3. إخفاء الدائرة */
.s-product-options-multiple-options-wrapper:has(input[value="773710157"]) input {
    position: absolute !important;
    opacity: 0 !important;
}

/* 4. تمييز عند الاختيار (ألوفيرا) */
.s-product-options-multiple-options-wrapper:has(input[value="773710157"]) label:has(input:checked) {
    border-color: #76a07a !important;
    background-color: #f7faf7 !important;
    box-shadow: 0 4px 10px rgba(118, 160, 122, 0.1) !important;
}

/* 5. تنسيق الصورة في الأعلى */
.s-product-options-multiple-options-wrapper:has(input[value="773710157"]) label::before {
    content: "" !important;
    width: 75px !important; /* حجم الصورة */
    height: 75px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-bottom: 10px !important; /* مسافة بين الصورة والنص اللي تحتها */
    display: block !important;
}

/* 6. تنسيق النص في الأسفل */
.s-product-options-multiple-options-wrapper:has(input[value="773710157"]) label div {
    font-size: 11px !important; 
    line-height: 1.4 !important;
    font-weight: bold !important;
    color: #334155 !important;
    text-align: center !important;
    word-break: break-word !important; /* عشان لو الكلمة طويلة تنزل سطر جديد وما تنضغط */
}