/* Add custom CSS styles below */ 
.product-card-content-media-promotional-title {
    position: absolute;
    top: 13px;
    right: 14px;
    margin-bottom: 1.125rem;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 189, 12, 1);
    background-color: rgba(255, 189, 12, var(--tw-bg-opacity, 1));
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgba(52, 52, 68, 1);
    color: rgba(52, 52, 68, var(--tw-text-opacity, 1));
}
.product-card-content-media-promotional-title {
    background: var(--color-primary-light) !important;
    color: ##2e5bb8 !important;
    color: #ffffff !important;
}


.product-details-meta-subtitle {
    display: block;                       /* يبقى العنصر كتلة مستقلة */
    margin-bottom: 0.7rem;                /* مسافة أسفل العنصر */
    font-size: 0.95rem;                    /* حجم خط مناسب للعنصر الفرعي */
    font-weight: 500;                      /* وزن متوسط للخط */
    color: #6b7280;                        /* لون رمادي أنيق للنص */
    line-height: 1.45;                     /* مسافة بين الأسطر لتحسين القراءة */
    letter-spacing: 0.2px;                 /* تباعد حروف خفيف للوضوح */
    font-family: "Inter", "Segoe UI", Arial, sans-serif; /* خط عصري وواضح */
    text-transform: none;                   /* لا تحويل للحروف تلقائياً */
    -webkit-font-smoothing: antialiased;   /* تحسين وضوح الخط على المتصفحات */
    text-rendering: optimizeLegibility;    /* تحسين قابلية القراءة */
}

/* تأثير عند المرور بالماوس - اختياري لإضافة لمسة تفاعلية */
.product-details-meta-subtitle:hover {
    color: #111827;                        /* تغيير اللون عند المرور للتمييز */
    transition: color 0.18s ease;          /* انتقال سلس للون */
}

/* تحسين العرض على الشاشات الصغيرة */
@media (max-width: 520px) {
    .product-details-meta-subtitle {
        font-size: 0.9rem;
        line-height: 1.35;
        margin-bottom: 0.6rem;
    }
}