<div className="group rounded-2xl border border-slate-200 bg-white p-4 shadow-sm hover:shadow-md transition-all">
  <div className="relative aspect-video rounded-xl overflow-hidden bg-slate-100 mb-3">
    {/* صورة المنتج */}
    <span className="absolute top-2 end-2 bg-emerald-500 text-white text-xs font-bold px-2 py-1 rounded-full">
      45 ر.س
    </span>
  </div>
  <h3 className="font-bold text-base text-slate-800">برجر كلاسيك فاخر</h3>
  <p className="text-xs text-slate-500 line-clamp-2 my-2">شريحة لحم بلاك أنجوس مع صوص خاص وخضار طازجة</p>
  <button className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-bold transition-colors">
    إضافة إلى السلة +
  </button>
</div>