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

src/components/DesignCanvas.tsx

@@ -845,6 +845,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
         </div>
         )}
 
+        <div className="flex flex-col gap-3">
           <div className="flex items-center gap-4">
             <div className="flex items-center border border-ink">
               <button
@@ -865,13 +866,22 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
             </div>
             <button
               onClick={handleAddToBag}
-            className="flex-1 bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
+              disabled={elementsFront.length === 0 && elementsBack.length === 0}
+              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>
           </div>
+          {elementsFront.length === 0 && elementsBack.length === 0 && (
+            <p className="text-xs text-splash-pink">Add text or images to personalize your design before adding to bag</p>
+          )}
           {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
         </div>
+      </div>
 
       <LoginPromptModal isOpen={showLoginPrompt} onClose={() => setShowLoginPrompt(false)} />
     </div>