Fixed shop seed card.

Signed-off-by: Sarahtonin <[email protected]>

Scripts/Garden/Shop.js

@@ -116,17 +116,6 @@ function CreateShopSeedCard(
             "span"
         );
 
-    Number.className =
-        "ShopItemNumber";
-
-    Number.textContent =
-        "No. " +
-        String(Plant.Id).padStart(
-            3,
-            "0"
-        );
-
-
     const Name =
         document.createElement(
             "h3"
@@ -137,7 +126,6 @@ function CreateShopSeedCard(
 
 
     Header.append(
-        Number,
         Name
     );
 
@@ -291,6 +279,15 @@ function CreateShopPlantVisual(
         "ShopPlantVisual";
 
 
+    const ImageFrame =
+        document.createElement(
+            "div"
+        );
+
+    ImageFrame.className =
+        "ShopPlantImageFrame";
+
+
     const PlantKey =
         GetPlantKeyById(
             Plant.Id
@@ -316,14 +313,10 @@ function CreateShopPlantVisual(
         Missing.textContent =
             "No image";
 
-        Visual.appendChild(
+        ImageFrame.appendChild(
             Missing
         );
-
-        return Visual;
-    }
-
-
+    } else {
         const Image =
             document.createElement(
                 "img"
@@ -340,9 +333,33 @@ function CreateShopPlantVisual(
         Image.alt =
             Plant.Name;
 
-    Visual.appendChild(
+        ImageFrame.appendChild(
             Image
         );
+    }
+
+
+    const Number =
+        document.createElement(
+            "span"
+        );
+
+    Number.className =
+        "ShopItemNumber";
+
+    Number.textContent =
+        String(
+            Plant.Id
+        ).padStart(
+            3,
+            "0"
+        );
+
+
+    Visual.append(
+        ImageFrame,
+        Number
+    );
 
 
     return Visual;

Styles/Style.css

@@ -1201,13 +1201,11 @@ select {
     margin: 0;
 }
 
-.ShopItemNumber {
-    color: var(--Overlay2);
-}
-
 .ShopItemBody {
     display: grid;
-    grid-template-columns: 5rem minmax(0, 1fr);
+    grid-template-columns:
+        5.75rem
+        minmax(0, 1fr);
     gap: 0.75rem;
 
     align-items: start;
@@ -1215,9 +1213,19 @@ select {
 
 .ShopPlantVisual {
     display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
 
-    width: 5rem;
-    height: 5rem;
+    width: 5.75rem;
+
+    align-items: center;
+}
+
+.ShopPlantImageFrame {
+    display: flex;
+
+    width: 5.75rem;
+    height: 5.75rem;
 
     align-items: center;
     justify-content: center;
@@ -1238,6 +1246,14 @@ select {
     image-rendering: pixelated;
 }
 
+.ShopItemNumber {
+    width: 100%;
+
+    color: var(--Overlay2);
+
+    text-align: center;
+}
+
 .ShopPlantMissing {
     padding: 0.35rem;
 
@@ -1348,12 +1364,18 @@ select {
     }
 
     .ShopItemBody {
-        grid-template-columns: 4.5rem minmax(0, 1fr);
+        grid-template-columns:
+            5.25rem
+            minmax(0, 1fr);
     }
 
     .ShopPlantVisual {
-        width: 4.5rem;
-        height: 4.5rem;
+        width: 5.25rem;
+    }
+
+    .ShopPlantImageFrame {
+        width: 5.25rem;
+        height: 5.25rem;
     }
 }