/* --- 1. جعل خلفية المتجر والأقسام بالكامل داكنة --- */
html, body, #app, .main-content, .s-block, section, [class*="block"] {
    background-color: #0d0d11 !important;
    color: #ffffff !important;
}

/* --- 2. تحويل خلفية بطاقات المنتجات والأقسام لأسود/رمادي داكن --- */
.product-card, 
.product-det, 
.s-product-card,
.s-block-photos,
.s-block-categories,
[class*="product"], 
[class*="card"] {
    background-color: #16161e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- 3. إجبار كافة النصوص والأزرار داخل البطاقات على اللون الأبيض --- */
.product-card *, 
.s-product-card *, 
[class*="product"] *,
.s-block-photos *,
.s-block-categories * {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* --- 4. معالجة الصناديق والحقول البيضاء داخل البطاقات --- */
div[class*="content"], 
div[class*="body"], 
div[class*="footer"],
.product-card__content,
.product-card__footer {
    background-color: #16161e !important;
}

/* --- 5. تحسين أزرار الشراء والمشاهدة --- */
button, .s-button-element, [class*="btn"] {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;













  /* تعديل كرت المنتج ليصبح مربع الشكل بداكنية أنيقة */
.product-card, 
.salla-product-card {
    background-color: #121212 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* ضبط نسبة الصورة لتكون مربعة تماماً */
.product-card .product-card__image,
.salla-product-card .product-card__image {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* تحسين الزر باللون البنفسجي وتأثير سلس */
.product-card button,
.product-card .s-button,
.salla-product-card button {
    background-color: #8a2be2 !important; /* لون بنفسجي جذاب */
    color: #ffffff !important;
    border-radius: 10px !important;
    transition: all 0.25s ease-in-out !important;
    border: none !important;
}

/* تأثير التمرير السلس على الزر */
.product-card button:hover,
.salla-product-card button:hover {
    background-color: #7b1fa2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4) !important;
}