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,7 +110,6 @@ export default function PhotoPrintAreaField({
         </div>
       )}
 
-      <div style={{ display: showPrintAreaEditor && currentImageUrl ? 'none' : 'block' }}>
       <input
         ref={fileInputRef}
         id={fieldName}
@@ -119,7 +118,11 @@ export default function PhotoPrintAreaField({
         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 ? (
+        <>
           {variant === 'front' ? (
             <p className="mt-1 text-xs text-muted">
               Uploading a real photo replaces the illustration everywhere this product is shown. One
@@ -152,7 +155,8 @@ export default function PhotoPrintAreaField({
               </button>
             </div>
           )}
-      </div>
+        </>
+      ) : null}
 
       {currentImageUrl && showPrintAreaEditor && (
         <div className="mt-4">