/* Add custom CSS styles below */ 
/* Legacy Beauty - Sephora Style Custom CSS */

/* 1. توحيد شكل الأزرار وتحويلها لستايل فخم وحاد */
.s-button-element, 
.s-product-card-content .s-button-element,
.btn-primary, 
.btn-secondary {
    background-color: #a9744f !important; /* لون البراند الخاص بك */
    color: #ffffff !important;
    border-radius: 0px !important; /* حواف حادة مثل سيفورا */
    border: none !important;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* 2. تأثير عند مرور الماوس على الزر (Hover) */
.s-button-element:hover, 
.btn-primary:hover {
    background-color: #1f3a36 !important; /* لون داكن فخم عند التمرير */
    opacity: 0.9;
    transform: translateY(-1px); /* حركة بسيطة للأعلى عند اللمس */
}

/* 3. تنسيق بطاقات المنتجات لتكون أنيقة وبدون حدود زائدة */
.s-product-card-entry {
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* ظل خفيف جداً وعصري */
    transition: transform 0.3s ease;
}

.s-product-card-entry:hover {
    transform: translateY(-5px); /* حركة البطاقة عند مرور الماوس */
}

/* 4. إخفاء أي خطوط تشتت العين لزيادة الـ White Space */
hr {
    border-top: 1px solid #f1f1f1 !important;
}/* 1. تنسيق عناوين الأقسام والمنتجات - ستايل مجلات الموضة */
h1, h2, h3, .s-product-card-content h3 {
    font-family: 'Montserrat', 'Beiruti', sans-serif !important; /* خطوط عصرية ونظيفة */
    color: #1f3a36 !important; /* لون داكن فخم جداً للعناوين */
    text-transform: capitalize;
    font-weight: 600 !important;
    letter-spacing: -0.5px;
    margin-bottom: 15px !important;
}

/* 2. تنسيق الأسعار - لجعلها واضحة وراقية */
.s-product-card-price, .s-product-card-price-original {
    font-family: 'Montserrat', sans-serif !important;
    color: #a9744f !important; /* لون التان الذهبي الخاص بك */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* 3. تنسيق صور المنتجات - حواف ناعمة جداً وإضاءة أفضل */
.s-product-card-image-wrapper img {
    border-radius: 4px !important; /* حواف ناعمة جداً تكاد لا تُرى */
    transition: all 0.5s ease-in-out !important;
    filter: contrast(105%) brightness(102%); /* لمسة إضاءة بسيطة للصور */
}

/* تأثير "الزووم" الهادئ عند مرور الماوس على الصورة */
.s-product-card-entry:hover .s-product-card-image-wrapper img {
    transform: scale(1.05); /* زووم بسيط جداً يعطي طابع احترافي */
}

/* 4. تعديل "الخلفية العامة" للموقع لتعطي شعور النظافة (Clean Look) */
body {
    background-color: #ffffff !important; /* أبيض نقي */
}

/* 5. تنسيق القائمة العلوية (Header Menu) */
.s-header-menu-link {
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #1f3a36 !important;
    transition: color 0.3s ease !important;
}

.s-header-menu-link:hover {
    color: #a9744f !important; /* يتغير للون البراند عند التمرير */
}