Enhance product display with custom names and improved styling; update table headers

layout/style.scss

@@ -1,6 +1,7 @@
 $cBlue: #6690F4;
 $cRed: #aa0505;
 $cGreen: #43833f;
+$cGreenLight: #57b951;
 $cBlack: #4e5e6a;
 
 .animate {
@@ -1236,4 +1237,36 @@ body>.top {
       background: #eee;
     }
   }
+}
+
+table {
+  &#products {
+    .table-product-title {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .edit-product-title {
+      display: flex;
+      height: 25px;
+      align-items: center;
+      justify-content: center;
+      width: 25px;
+      cursor: pointer;
+      background: #fff;
+      border: 1px solid #9b9b9b;
+      color: #9b9b9b;
+
+      &:hover {
+        background: #9b9b9b;
+        color: #fff;
+      }
+    }
+
+    a {
+      &.custom_name {
+        color: $cGreenLight !important;
+      }
+    }
+  }
 }