Redesign offer result card layout

app/components/catalog/InfoPanel.vue

@@ -142,9 +142,13 @@
               <span v-if="loadingOffers" class="loading loading-spinner loading-xs" />
               <span v-else-if="offersWithPrice.length > 0" class="text-white/50">({{ offersWithPrice.length }})</span>
             </h3>
-            <button class="btn btn-ghost btn-xs text-white/60" @click="emit('select-product', null)">
-              <Icon name="lucide:x" size="14" />
-              {{ $t('common.cancel') }}
+            <button
+              class="flex items-center gap-2 px-2 py-1 rounded-full border border-white/15 bg-white/10 text-xs text-white/80 hover:bg-white/20 transition-colors"
+              @click="emit('select-product', null)"
+            >
+              <Icon name="lucide:package" size="12" />
+              <span class="max-w-32 truncate">{{ selectedProductName }}</span>
+              <Icon name="lucide:x" size="12" />
             </button>
           </div>
 
@@ -159,6 +163,7 @@
               :location-name="offer.locationName || offer.locationCountry || offer.locationName"
               :product-name="offer.productName"
               :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+              :quantity="offer.quantity"
               :currency="offer.currency"
               :unit="offer.unit"
               :stages="getOfferStages(offer)"
@@ -341,6 +346,12 @@ const offersWithPrice = computed(() =>
   relatedOffers.value.filter(o => o?.pricePerUnit != null)
 )
 
+const selectedProductName = computed(() => {
+  if (!props.selectedProduct) return ''
+  const match = relatedProducts.value.find(p => p.uuid === props.selectedProduct)
+  return match?.name || props.selectedProduct.slice(0, 8) + '...'
+})
+
 // Entity name
 const entityName = computed(() => {
   return props.entity?.name || props.entity?.productName || props.entityId.slice(0, 8) + '...'