boooomb

src/app/pages/items-list/items-list.component.scss

@@ -140,6 +140,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 
     img {
       width: 100%;
@@ -161,6 +162,47 @@
         height: 48px;
       }
     }
+
+    .out-of-stock-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.55);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.85rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .item-badges {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      .badge {
+        padding: 2px 7px;
+        border-radius: 10px;
+        font-size: 0.7rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        color: #fff;
+
+        &.badge-new       { background: #009688; }
+        &.badge-sale      { background: #e53935; }
+        &.badge-exclusive { background: #7b1fa2; }
+        &.badge-hot       { background: #f4511e; }
+        &.badge-limited   { background: #f9a825; color: #333; }
+        &.badge-bestseller{ background: #1976d2; }
+        &.badge-featured  { background: #3949ab; }
+      }
+    }
   }
 
   .item-info {