بطاقة المنتج الفاخر Luxury Product Card

<!-- Qahera UI Kit - Luxury Product Card Pattern (Native HTML) -->
<div class="qhr-luxury-product-card" 
     style="background-color: #17120F; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; overflow: hidden; max-width: 340px;">
  
  <div style="position: relative; width: 100%; height: 260px; background-color: #0F0B09; display: flex; align-items: center; justify-content: center; overflow: hidden;">
    <div style="color: rgba(212, 175, 55, 0.4); text-align: center;">
      <svg class="qhr-icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
        <line x1="7" y1="7" x2="7.01" y2="7" />
      </svg>
    </div>

    <div style="position: absolute; top: 12px; inset-inline-end: 12px;">
      <span class="qhr-badge qhr-badge--outline qhr-badge--sm" style="background-color: rgba(15, 11, 9, 0.8); border-color: rgba(212, 175, 55, 0.4); color: #D4AF37;">
        ستيل 316L مقاوم للصدأ
      </span>
    </div>
  </div>

  <div style="padding: 20px;">
    <div style="font-size: 12px; color: #B9A896; margin-bottom: 4px;">مجموعة القاهرة الحصرية</div>
    <h4 style="font-size: 18px; font-weight: 700; color: #F7F3ED; margin: 0 0 8px 0; font-family: var(--qhr-font-family-display, serif);">
      سوار النيل الملكي
    </h4>
    <div style="font-size: 12px; color: #8C7E70; margin-bottom: 16px;">
      Steel 316L · مطلي ذهب عيار 18
    </div>

    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div>
        <span style="font-size: 20px; font-weight: 700; color: #D4AF37; font-family: monospace;">
          1,450 ر.س
        </span>
      </div>

      <button type="button" class="qhr-btn qhr-btn--primary qhr-btn--sm" style="background-color: #D4AF37; color: #0F0B09; font-weight: 600;">
        <svg class="qhr-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="9" cy="21" r="1" />
          <circle cx="20" cy="21" r="1" />
          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
        </svg>
        <span>طلب مقتنى</span>
      </button>
    </div>
  </div>
</div>