Disable add to bag button if no personalization added and show prompt message

src/components/DesignCanvas.tsx

@@ -845,32 +845,42 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
         </div>
         )}
 
-        <div className="flex items-center gap-4">
+        <div className="flex flex-col gap-3">
-          <div className="flex items-center border border-ink">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center border border-ink">
+              <button
+                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                className="px-3 py-2 text-sm"
+                aria-label="Decrease quantity"
+              >
+                −
+              </button>
+              <span className="w-10 text-center font-mono text-sm">{quantity}</span>
+              <button
+                onClick={() => setQuantity((q) => q + 1)}
+                className="px-3 py-2 text-sm"
+                aria-label="Increase quantity"
+              >
+                +
+              </button>
+            </div>
             <button
-              onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+              onClick={handleAddToBag}
-              className="px-3 py-2 text-sm"
+              disabled={elementsFront.length === 0 && elementsBack.length === 0}
-              aria-label="Decrease quantity"
+              className={`flex-1 px-6 py-3 text-sm font-medium transition-colors ${
+                elementsFront.length === 0 && elementsBack.length === 0
+                  ? 'bg-muted text-muted/50 cursor-not-allowed'
+                  : 'bg-clay text-paper hover:bg-clay-dark'
+              }`}
             >
-              −
+              Add to bag — <Price cents={((elementsFront.length > 0 || elementsBack.length > 0) ? effectivePriceForPersonalised : product.effectivePrice) * quantity} />
-            </button>
-            <span className="w-10 text-center font-mono text-sm">{quantity}</span>
-            <button
-              onClick={() => setQuantity((q) => q + 1)}
-              className="px-3 py-2 text-sm"
-              aria-label="Increase quantity"
-            >
-              +
             </button>
           </div>
-          <button
+          {elementsFront.length === 0 && elementsBack.length === 0 && (
-            onClick={handleAddToBag}
+            <p className="text-xs text-splash-pink">Add text or images to personalize your design before adding to bag</p>
-            className="flex-1 bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
+          )}
-          >
+          {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
-            Add to bag — <Price cents={((elementsFront.length > 0 || elementsBack.length > 0) ? effectivePriceForPersonalised : product.effectivePrice) * quantity} />
-          </button>
         </div>
-        {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
       </div>
 
       <LoginPromptModal isOpen={showLoginPrompt} onClose={() => setShowLoginPrompt(false)} />