{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "600px",
      "height": "auto",
      "background-color": "#f7f9fc",
      "border-radius": "12px",
      "box-shadow": "0 6px 12px rgba(0, 0, 0, 0.1)",
      "padding": "10px",
      "display": "flex",
      "flex-direction": "column",
      "align-items": "center"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "100%",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
          "padding": "10px"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$ImageUrl]",
              "alt": "[$Title]"
            },
            "style": {
              "max-width": "100%",
              "height": "auto",
              "border-radius": "8px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "background-color": "#ffffff",
          "border-radius": "10px",
          "box-shadow": "0 4px 8px rgba(0, 0, 0, 0.2)",
          "padding": "10px",
          "overflow": "hidden",
          "display": "flex",
          "flex-direction": "column"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "background-color": "#7b4397",
              "color": "#ffffff",
              "font-weight": "bold",
              "padding": "6px 12px",
              "font-size": "14px",
              "margin-bottom": "10px",
              "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.2)"
            },
            "txtContent": "[$Offer]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "18px",
              "color": "#333333",
              "font-weight": "bold",
              "margin-bottom": "8px"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "margin-top": "10px",
              "display": "flex",
              "align-items": "center"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "color": "grey",
                  "font-style": "italic",
                  "font-weight": "bold",
                  "font-size": "20px",
                  "padding-right": "30px"
                },
                "txtContent": "Units sold: "
              },{
                "elmType": "span",
                "style": {
                  "color": "grey",
                  "font-style": "italic",
                  "font-size": "20px",
                  "padding-right": "30px"
                },
                "txtContent": "[$QuantitySold]"
              },
              {
                "elmType": "span",
                "style": {
                  "color": "grey",
                  "font-style": "italic",
                  "font-weight": "bold",
                  "font-size": "20px",
                  "padding-right": "15px"
                },
                "txtContent": "Rating:"
              },
              {
                "elmType": "span",
                "style": {
                  "color": "#FFD700",
                  "font-size": "20px",
                  "padding-right": "5px"
                },
                "txtContent": "=if([$Rating] >= 1, '★', '')"
              },
              {
                "elmType": "span",
                "style": {
                  "color": "#FFD700",
                  "font-size": "20px",
                  "padding-right": "5px"
                },
                "txtContent": "=if([$Rating] >= 2, '★', '')"
              },
              {
                "elmType": "span",
                "style": {
                  "color": "#FFD700",
                  "font-size": "20px",
                  "padding-right": "5px"
                },
                "txtContent": "=if([$Rating] >= 3, '★', '')"
              },
              {
                "elmType": "span",
                "style": {
                  "color": "#FFD700",
                  "font-size": "20px",
                  "padding-right": "5px"
                },
                "txtContent": "=if([$Rating] >= 4, '★', '')"
              },
              {
                "elmType": "span",
                "style": {
                  "color": "#FFD700",
                  "font-size": "20px",
                  "padding-right": "5px"
                },
                "txtContent": "=if([$Rating] == 5, '★', '')"
              },
              {
                "elmType": "span",
                "style": {
                  "color": "grey",
                  "font-style": "italic",
                  "font-size": "20px"
                },
                "txtContent": "='(' + [$Rating]+ ')'"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "margin-bottom": "10px",
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "16px",
                  "color": "#333333",
                  "display": "flex",
                  "flex-direction": "column",
                  "font-weight": "bold"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-size": "28px",
                      "color": "green",
                      "font-weight": "bold",
                      "margin": "0",
                      "display": "flex",
                      "align-items": "center"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "style": {
                          "font-size": "16px",
                          "margin-right": "4px"
                        },
                        "txtContent": "$"
                      },
                      {
                        "elmType": "span",
                        "style": {
                          "font-size": "48px"
                        },
                        "txtContent": "[$DollarValue]"
                      },
                      {
                        "elmType": "span",
                        "style": {
                          "font-size": "16px"
                        },
                        "txtContent": "[$CentsValue]"
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "16px",
                  "color": "#666666",
                  "display": "flex",
                  "flex-direction": "column",
                  "padding": "10px",
                  "align-items": "flex-end"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "text-decoration": "line-through",
                      "color": "#999999",
                      "margin-bottom": "4px"
                    },
                    "txtContent": "='Was $' + [$OldPrice]"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "color": "#d32f2f"
                    },
                    "txtContent": "='Save $' + [$PriceDifference]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "space-between",
              "margin-bottom": "12px",
              "width": "100%"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-size": "16px",
                  "color": "#ff6347",
                  "font-weight": "bold"
                },
                "txtContent": "=if([$Shipping] > 0, 'Shipping: $' + [$Shipping], 'Free Shipping')"
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "AddedToCart": "=if([$AddedToCart] == true, false, true)"
                  }
                },
                "txtContent": "=if([$AddedToCart] == true, 'Remove from cart', 'Add to cart')",
                "style": {
                  "background-color": "#0078d4",
                  "color": "#ffffff",
                  "border": "none",
                  "border-radius": "4px",
                  "padding": "8px 16px",
                  "font-size": "16px",
                  "cursor": "pointer"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "color": "#666666",
              "font-size": "16px",
              "margin-bottom": "12px"
            },
            "txtContent": "[$Description]"
          }
        ]
      }
    ]
  }
}