Added multiple gardens per user upgrade. Pretty cool!!!!

Scripts/Garden/Shop.js

@@ -124,6 +124,7 @@ function RenderGardenUpgrades() {
         CreateGardenExpansionCard(
             "Row"
         ),
+        CreateNewGardenCard(),
         CreatePlantInformationUpgradeCard(),
         CreateGardenOverviewUpgradeCard(),
         CreateMutationHintsUpgradeCard()
@@ -210,6 +211,10 @@ function CreateGardenExpansionCard(
         "ShopItemDetails";
 
     Details.append(
+        CreateShopStat(
+            "Garden",
+            ShopSave.Garden.Name
+        ),
         CreateShopStat(
             "Current size",
             ShopSave.Garden.Width +
@@ -273,6 +278,115 @@ function CreateGardenExpansionCard(
 }
 
 
+function CreateNewGardenCard() {
+    const Cost =
+        GetNewGardenCost(
+            ShopSave
+        );
+
+    const GardensOwned =
+        ShopSave.Gardens.length;
+
+
+    const Card =
+        document.createElement(
+            "article"
+        );
+
+    Card.className =
+        "Panel ShopItem";
+
+
+    const Header =
+        document.createElement(
+            "div"
+        );
+
+    Header.className =
+        "ShopItemHeader";
+
+
+    const Name =
+        document.createElement(
+            "h3"
+        );
+
+    Name.textContent =
+        "Buy new Garden";
+
+    Header.appendChild(Name);
+
+
+    const Description =
+        document.createElement(
+            "p"
+        );
+
+    Description.textContent =
+        "Buy another independent 3×3 Garden. New Gardens can be named and expanded separately.";
+
+
+    const Details =
+        document.createElement(
+            "div"
+        );
+
+    Details.className =
+        "ShopItemDetails";
+
+    Details.append(
+        CreateShopStat(
+            "Gardens owned",
+            GardensOwned.toLocaleString()
+        ),
+        CreateShopStat(
+            "New Garden size",
+            "3×3 (9 plots)"
+        ),
+        CreateShopStat(
+            "Price scaling",
+            "+50% per Garden"
+        )
+    );
+
+
+    const BuyButton =
+        document.createElement(
+            "button"
+        );
+
+    BuyButton.className =
+        "ActionButton ShopBuyButton";
+
+    BuyButton.type = "button";
+
+    BuyButton.textContent =
+        "Buy - " +
+        Cost.toLocaleString() +
+        " Dew";
+
+    BuyButton.disabled =
+        ShopSave.Currency.Dew < Cost ||
+        ShopPurchasePending;
+
+    BuyButton.addEventListener(
+        "click",
+        BuyNewGarden
+    );
+
+
+    Card.append(
+        Header,
+        Description,
+        Details,
+        BuyButton
+    );
+
+
+    return Card;
+}
+
+
 function CreatePlantInformationUpgradeCard() {
     const Cost =
         GetPlantInformationUpgradeCost();
@@ -1188,6 +1302,60 @@ async function BuyGardenExpansion(
 }
 
 
+async function BuyNewGarden() {
+    if (ShopPurchasePending) {
+        return;
+    }
+
+
+    const Cost =
+        GetNewGardenCost(
+            ShopSave
+        );
+
+    if (
+        ShopSave.Currency.Dew <
+        Cost
+    ) {
+        SetShopMessage(
+            "You don't have enough Dew for a new Garden."
+        );
+
+        return;
+    }
+
+
+    ShopPurchasePending = true;
+
+    try {
+        ShopSave.Currency.Dew -=
+            Cost;
+
+        ShopSave.Statistics.CurrencySpent.Dew +=
+            Cost;
+
+        AddNewGarden(
+            ShopSave
+        );
+
+        SetShopMessage(
+            "Bought a new 3×3 Garden for " +
+            Cost.toLocaleString() +
+            " Dew. It is now your active Garden."
+        );
+
+        RenderShop();
+
+        await SaveGame(
+            ShopSave
+        );
+    } finally {
+        ShopPurchasePending = false;
+        RenderShop();
+    }
+}
+
+
 async function BuyPlantInformationUpgrade() {
     if (
         ShopPurchasePending ||