@media (max-width: 767px) {
  .circle-links-2 .s-slider-swiper-wrapper {
    justify-content: center !important;
  }
}




/* تنسيق بانر صفحة المنتج - تحسين المسافات */
.custom-promo-banner {
    width: 100%;
    margin-top: 5px;    /* تقليل المسافة العلوية جداً */
    margin-bottom: 0px; /* إلغاء المسافة السفلية من البانر */
    padding: 0;
    line-height: 0;     /* لإزالة أي مسافات مخفية أسفل الصور */
}

.custom-promo-banner img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: block;
}

/* هام جداً: إجبار شريط التنقل على الصعود للأعلى */
/* هذا الكود يزيل الفراغ الموجود في بداية عنصر (الرئيسية > البكجات) */
.breadcrumbs {
    padding-top: 5px !important; /* تقليل الحشوة العلوية للنصوص */
    margin-top: 0 !important;
}







/* الحاوية الرئيسية */
.custom-top-social {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    margin-right: auto !important; /* دفع لليسار */
    z-index: 99 !important;
    color: inherit;
}

/* تنسيق كلمة تابعنا */
.follow-text {
    font-size: 14px !important;
    font-weight: bold !important;
    margin-left: 5px !important;
    color: inherit;
}

/* تنسيق الأيقونات لتشبه أيقونة السلة والبحث */
.custom-social-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    transition: transform 0.3s ease !important;
}

.custom-social-btn i {
    font-size: 18px !important;
    color: inherit !important;
}

/* 🔴 الحل الجذري للهيدر الشفاف (لتكون واضحة فوق البانر مثل الصورة) 🔴 */
body.trans_header .top-navbar .custom-top-social,
body.trans_header .top-navbar .follow-text,
body.trans_header .top-navbar .custom-social-btn i {
    color: #ffffff !important; /* إجبارها على اللون الأبيض */
    text-shadow: 0px 2px 4px rgba(0,0,0,0.6) !important; /* إضافة ظل قوي لتبرز فوق أي لون */
}

/* تأثير المرور بالماوس */
.custom-social-btn:hover {
    transform: scale(1.15) !important;
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .top-navbar .container {
        display: flex !important;
        justify-content: center !important; /* توسيط في الجوال */
    }
    .custom-top-social {
        margin: 0 auto !important; /* توسيط الحاوية */
        padding: 5px 0 !important;
    }
    .follow-text {
        font-size: 13px !important;
    }
}