new ui4

assets/views/shop/_card.html

@@ -16,8 +16,11 @@
   <a href="/shop/{{ product.slug }}" class="flex min-w-0 flex-1"
     :class="view === 'list' ? 'flex-row' : 'flex-col'">
     <!-- Image -->
-    <div class="overflow-hidden bg-surface-alt dark:bg-surface-dark"
+    <div class="relative overflow-hidden bg-surface-alt dark:bg-surface-dark"
       :class="view === 'list' ? 'size-28 shrink-0 sm:size-40' : 'h-44 md:h-64'">
+      {% if product.on_sale and product.percent_off > 0 %}
+      <span class="absolute left-2 top-2 z-10 rounded-full bg-danger px-2 py-0.5 text-[11px] font-bold text-on-danger shadow-sm">−{{ product.percent_off }} %</span>
+      {% endif %}
       {% if product.image %}
       <img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover transition duration-700 ease-out group-hover:scale-105">
       {% endif %}
@@ -44,6 +47,18 @@
       {% else %}
       <span class="break-words text-xl"><span class="sr-only">Price</span>{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ currency_symbol }}</span>
       {% endif %}
+      <!-- stock pill (Kompress design): green "in stock" / red "sold out" -->
+      <div class="mt-0.5">
+        {% if product.in_stock %}
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-success/10 px-2 py-0.5 text-xs font-semibold text-success">
+          <span class="size-1.5 rounded-full bg-success" aria-hidden="true"></span>{{ t(key="in-stock", lang=lang | default(value='sk')) }}
+        </span>
+        {% else %}
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-danger/10 px-2 py-0.5 text-xs font-semibold text-danger">
+          <span class="size-1.5 rounded-full bg-danger" aria-hidden="true"></span>{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}
+        </span>
+        {% endif %}
+      </div>
     </div>
   </a>
   <div class="flex flex-col gap-2"