.custom-hero-section {
    position: relative !important;
    width: 100vw !important;
    height: 80vh !important;
    min-height: 500px !important;
    overflow: hidden !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    z-index: 99 !important;
    background-color: #000;
}
.custom-hero-section img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
/* ===== كود جعل الهيدر شفافاً ومدمجاً مع الصورة ===== */

/* 1. شفافية الهيدر الرئيسي */
header, .site-header, .header-container {
    background-color: transparent !important;
    background: transparent !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* 2. شفافية الشريط العلوي والقوائم */
.top-navbar, .header-top, .main-menu, .navbar {
    background-color: transparent !important;
    border-bottom: none !important;
}

/* 3. تحويل ألوان النصوص والأيقونات للأبيض */
header a, header button, .site-header a, .site-header button,
.search-icon, .user-icon, .cart-icon, .account-btn, .search-btn {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* 4. تنسيق حقل البحث ليكون شفافاً */
.search-input, .search-field, input[type="search"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    backdrop-filter: blur(5px) !important;
}

.search-input::placeholder, input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 5. تنسيق خاص للجوال لضمان الوضوح */
@media (max-width: 768px) {
    header, .site-header {
        background-color: rgba(0, 0, 0, 0.4) !important; /* خلفية داكنة خفيفة للجوال */
        backdrop-filter: blur(8px) !important;
    }
}
/* ===== فاصل الوردة (Rose Separator) ===== */
.rose-separator-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    padding: 20px 0;
    width: 100%;
}

.rose-separator-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #a14440, transparent);
    max-width: 250px;
}

.rose-separator-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.rose-separator-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .rose-separator-container { gap: 10px; margin: 20px 0; }
    .rose-separator-line { max-width: 100px; }
    .rose-separator-icon { width: 30px; height: 30px; }
}