/* Add custom CSS styles below */ 
/* ==========================================================================
   تنسيق الألوان، الـ Hover، والـ Scroll الأفقي - متجر مراعي التموين
/* ==========================================================================
   تنسيق الـ Scroll الأفقي وإطار الكارت مع ضبط هوفر القلب هندسياً
   ========================================================================== */

/* 1. تفعيل الـ Scroll الأفقي للسكشن */
.s-products-list-wrapper, 
.s-products-list-vertical-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 20px !important;
    padding: 15px 5px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* إخفاء شريط التمرير السفلي */
.s-products-list-wrapper::-webkit-scrollbar,
.s-products-list-vertical-cards::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. تنسيق الكارت وتخفيف لون الإطار الزيتي */
custom-salla-product-card, 
.s-product-card-entry, 
.s-products-list-vertical-cards > * {
    border: 2px solid rgba(27, 51, 34, 0.08) !important;
    border-radius: 16px !important; 
    box-shadow: 0 4px 12px rgba(27, 51, 34, 0.02) !important;
    overflow: hidden !important;
    flex: 0 0 280px !important;
    max-width: 280px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. تأثير الـ Hover على الكارت (التحول للذهبي والارتفاع) */
custom-salla-product-card:hover, 
.s-product-card-entry:hover {
    transform: translateY(-6px) !important;
    border-color: #c5a880 !important;
    box-shadow: 0 12px 24px rgba(27, 51, 34, 0.08) !important;
}

/* 4. ضمان ظهور زر القلب بشكل طبيعي ودائم */
.s-product-card-wishlist-btn,
salla-button.s-product-card-wishlist-btn,
.s-product-card-image button.s-product-card-wishlist-btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

/* 5. ضبط هوفر القلب (الخلفية بيضاء والأيقونة زيتية لتجنب اختفائها) */
.s-product-card-wishlist-btn:hover,
salla-button.s-product-card-wishlist-btn:hover,
.s-product-card-image button.s-product-card-wishlist-btn:hover,
.s-product-card-wishlist-btn button:hover,
.s-product-card-wishlist-btn .s-button-element:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: rgba(27, 51, 34, 0.1) !important;
}

/* التأكيد على ثبات لون أيقونة القلب الزيتي عند هوفر الزر */
.s-product-card-wishlist-btn button:hover i,
.s-product-card-wishlist-btn .s-button-element:hover i,
.s-product-card-wishlist-btn:hover .sicon-heart {
    color: #1b3322 !important;
}