/* Add custom CSS styles below */ 
/* كود مكثف لتغيير لون العنوان الترويجي في الصفحة الرئيسية وصفحة المنتج */

/* استهداف العنوان الترويجي في بطاقة المنتج - الصفحة الرئيسية */
.s-product-card__promotion-title,
.s-product-card-promotion,
.product-card__promotion,
.product-card-promotion,
[class*="product-card"] [class*="promotion"] {
    background-color: #1B263B !important;
    background: #1B263B !important;
    color: #FFFFFF !important;
    z-index: 1;
}

/* استهداف العنوان الترويجي داخل صفحة المنتج */
.promotion-title, 
.product-details__title-promotion,
.product-details__promotion {
    background-color: #1B263B !important;
    background: #1B263B !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* تغيير لون زر إضافة للسلة وتنسيقه */
.s-button-primary, 
.add-to-cart-btn {
    background-color: #1B263B !important;
    border-color: #1B263B !important;
    border-radius: 8px !important;
    font-weight: bold !important;
}

/* كود لزيادة عمق الظل خلف صور المنتجات فقط لمتجر Seemly */

/* 1. ضمان ظهور الظل خارج إطار الصورة */
.s-product-card, .product-card {
    overflow: visible !important;
}

/* 2. إضافة ظل عميق وواضح خلف حاوية الصورة */
.s-product-card__image-wrapper, 
[class*="image-wrapper"] {
    /* زيادة قيم التضليل للعمق: (الإزاحة الرأسية، التشتت، القوة) */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important; 
    border-radius: 12px !important;
    background: #ffffff !important;
    transition: all 0.4s ease-in-out !important;
}

/* 3. تأثير "البروز" الإضافي عند مرور الماوس */
.s-product-card__image-wrapper:hover, 
[class*="image-wrapper"]:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.22) !important; /* ظل أعمق عند التفاعل */
    transform: translateY(-5px) !important; /* رفع الصورة قليلاً للأعلى */
}

/* تحسين مظهر أسماء المنتجات */
.s-product-card__title h3, .product-details__title h1 {
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #1B263B !important;
    text-shadow: 0px 0px 1px rgba(27, 38, 59, 0.1) !important;
} 

/* استهداف الهيدر وحاوية الهيدر لضمان الشفافية */
.s-header-container, 
.s-header-wrapper, 
header.main-header {
    background: rgba(255, 255, 255, 0.65) !important; /* شفافية عالية */
    backdrop-filter: blur(15px) !important; /* تأثير التغبيش */
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.1) !important; /* خط ذهبي خفيف جداً */
    transition: all 0.3s ease-in-out !important;
}

/* التأكد من أن الخلفيات الداخلية لا تغطي التأثير */
.s-header-container > div, 
.s-header-wrapper > div {
    background: transparent !important;
}

/* إذا كنت مفعل الهيدر المثبت (Sticky) */
.is-sticky .s-header-container {
    background: rgba(255, 255, 255, 0.8) !important; /* تزيد الكثافة قليلاً عند التمرير */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* كود تمييز السعر الشامل لمتجر Seemly */

/* 1. السعر في البطاقة الخارجية (الرئيسية والقوائم) */
.s-product-card__price, 
[class*="product-card"] [class*="price"],
.product-card__price {
    color: #1B263B !important; /* لونك الكحلي المعتمد */
    font-weight: 800 !important;
    font-size: 1.2rem !important;
}

/* 2. السعر داخل صفحة المنتج */
.product-details__price, 
.s-product-details__price,
[class*="product-details"] [class*="price"] {
    color: #1B263B !important;
    font-weight: 900 !important;
    font-size: 1.6rem !important;
}

/* 3. تنسيق كلمة "ريال" لتظهر بشكل أرشق */
.s-product-card__price-currency, 
.currency, 
[class*="currency"] {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    margin-right: 3px !important;
    opacity: 0.7 !important;
}

/* كود الهيدر الزجاجي المطور لمتجر Seemly */

header, 
.s-header, 
.s-header-wrapper, 
.main-nav-container,
[class*="header-wrapper"] {
    background: rgba(255, 255, 255, 0.7) !important; /* شفافية بيضاء ناعمة */
    backdrop-filter: blur(15px) !important; /* قوة التضبيب الزجاجي */
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(27, 38, 59, 0.05) !important; /* خط كحلي رقيق جداً */
    transition: all 0.3s ease !important;
}

/* التأكد من بقاء الهيدر في الأعلى عند النزول (Sticky) */
header, .s-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* تنسيق ألوان روابط القائمة العلوية لتناسب الهوية الكحلية */
.s-header .main-menu a, 
.s-header .header-icons i,
[class*="header"] a {
    color: #1B263B !important; /* اللون الكحلي الخاص بمتجرك */
    font-weight: 600 !important;
}

ion: artisan-pulse 1.5s infinite !important;
}