Fix: Image upload now properly persists through form submission

Changed PhotoPrintAreaField to hide the file input with CSS (display: none)
instead of conditionally removing it from the DOM. This ensures the file
input element remains in the document, preserving the selected file data
when the form is submitted.

Previous issue: When the print area editor opened, React would remove the
file input element from the DOM, causing the file data to be lost before
form submission. This resulted in images not being saved (imageUrl: null).

Result: Images now save correctly to the database as base64 data URLs.
Print area masks are also preserved alongside the images.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/PhotoPrintAreaField.tsx

@@ -110,49 +110,53 @@ export default function PhotoPrintAreaField({
         </div>
       )}
 
-      <div style={{ display: showPrintAreaEditor && currentImageUrl ? 'none' : 'block' }}>
-        <input
-          ref={fileInputRef}
-          id={fieldName}
-          name={fieldName}
-          type="file"
-          accept="image/*"
-          onChange={handleFileChange}
-          className="w-full border border-line bg-paper px-3 py-2 text-sm"
-        />
-        {variant === 'front' ? (
-          <p className="mt-1 text-xs text-muted">
-            Uploading a real photo replaces the illustration everywhere this product is shown. One
-            tradeoff: the color swatches below can no longer recolor a photo the way they recolor the
-            illustration — they&apos;ll still be saved with each order, but the picture itself stays
-            fixed. Leave this blank to keep using the illustration (which does recolor live).
-          </p>
-        ) : (
-          <p className="mt-1 text-xs text-muted">
-            If set, customers get a Front/Back toggle and can add a separate design to the back —
-            drag a print-area box below just like the front.
-          </p>
-        )}
+      <input
+        ref={fileInputRef}
+        id={fieldName}
+        name={fieldName}
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+        className="w-full border border-line bg-paper px-3 py-2 text-sm"
+        style={{ display: showPrintAreaEditor && currentImageUrl ? 'none' : 'block' }}
+      />
 
-        {currentImageUrl && !showPrintAreaEditor && (
-          <div className="mt-3 flex gap-2">
-            <button
-              type="button"
-              onClick={() => setShowPrintAreaEditor(true)}
-              className="text-sm text-clay hover:text-clay-dark font-medium"
-            >
-              Modify print area →
-            </button>
-            <button
-              type="button"
-              onClick={handleClearFile}
-              className="text-sm text-splash-pink hover:text-splash-pink-dark font-medium"
-            >
-              Remove
-            </button>
-          </div>
-        )}
-      </div>
+      {!currentImageUrl || !showPrintAreaEditor ? (
+        <>
+          {variant === 'front' ? (
+            <p className="mt-1 text-xs text-muted">
+              Uploading a real photo replaces the illustration everywhere this product is shown. One
+              tradeoff: the color swatches below can no longer recolor a photo the way they recolor the
+              illustration — they&apos;ll still be saved with each order, but the picture itself stays
+              fixed. Leave this blank to keep using the illustration (which does recolor live).
+            </p>
+          ) : (
+            <p className="mt-1 text-xs text-muted">
+              If set, customers get a Front/Back toggle and can add a separate design to the back —
+              drag a print-area box below just like the front.
+            </p>
+          )}
+
+          {currentImageUrl && !showPrintAreaEditor && (
+            <div className="mt-3 flex gap-2">
+              <button
+                type="button"
+                onClick={() => setShowPrintAreaEditor(true)}
+                className="text-sm text-clay hover:text-clay-dark font-medium"
+              >
+                Modify print area →
+              </button>
+              <button
+                type="button"
+                onClick={handleClearFile}
+                className="text-sm text-splash-pink hover:text-splash-pink-dark font-medium"
+              >
+                Remove
+              </button>
+            </div>
+          )}
+        </>
+      ) : null}
 
       {currentImageUrl && showPrintAreaEditor && (
         <div className="mt-4">