/* Add custom CSS styles below */ 
/* 1. إعدادات الهوية البصرية */
:root {
    --brand-green: #1B4332;    /* الأخضر الغابة */
    --hover-green: #2D6A4F;    /* أخضر أفتح عند التمرير */
    --dark-bg: #1a1a1a;        /* خلفية المتجر */
    --section-gray: #252525;   /* رمادي الأقسام */
    --price-color: #74c69d;    /* لون السعر الجذاب */
    --text-white: #ffffff;
}

/* 2. تنسيق الخلفية العامة */
body {
    background-color: var(--dark-bg) !important;
    color: var(--text-white) !important;
}

/* 3. تنسيق الأقسام (الرمادي المنحني) */
.s-block {
    background-color: var(--section-gray) !important;
    border-radius: 20px !important;
    padding: 30px 15px !important;
    margin-bottom: 25px !important;
    border: none !important;
    transition: transform 0.3s ease; /* تمهيد لحركة البروز */
}

/* 4. تأثير البروز للأقسام أو بطاقات المنتجات */
.s-block:hover {
    transform: translateY(-5px); /* يرتفع القسم قليلاً عند مرور الماوس */
}

/* 5. تنسيق الأزرار المنحنية (مثل فن الشماع) */
.btn-primary, .s-button-primary, .s-add-to-cart-button {
    background-color: var(--brand-green) !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-weight: bold !important;
    transition: 0.3s all ease !important;
}

.btn-primary:hover, .s-button-primary:hover {
    background-color: var(--hover-green) !important;
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.4); /* ظل خفيف أخضر */
}

/* 6. تنسيق السعر ليكون بارزاً */
.product-price, .s-product-card-price {
    color: var(--price-color) !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}

/* 7. العناوين */
.product-title, h1, h2, h3 {
    color: var(--text-white) !important;
}