bo integration

src/styles.scss

@@ -141,3 +141,58 @@ a, button, input, textarea, select {
 .p-3 { padding: 1.5rem; }
 .p-4 { padding: 2rem; }
 
+// ─── Shared Badge & Tag Styles (from backOffice integration) ───
+
+.item-badges-overlay {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  z-index: 2;
+}
+
+.item-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: #fff;
+  line-height: 1.4;
+
+  &.badge-new       { background: #4caf50; }
+  &.badge-sale       { background: #f44336; }
+  &.badge-exclusive  { background: #9c27b0; }
+  &.badge-hot        { background: #ff5722; }
+  &.badge-limited    { background: #ff9800; }
+  &.badge-bestseller { background: #2196f3; }
+  &.badge-featured   { background: #607d8b; }
+  &.badge-custom     { background: #78909c; }
+}
+
+.item-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.72rem;
+  color: var(--primary-color);
+  background: rgba(73, 118, 113, 0.08);
+  border: 1px solid rgba(73, 118, 113, 0.15);
+}
+
+.item-simple-desc {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  margin: 2px 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+