Disable sold-out variants in picker; default to first in-stock option

Sold-out variant buttons now show "Sold Out" and can't be selected.
The picker also defaults to the first in-stock variation instead of
always starting on variations[0], which could be out of stock.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

estore/src/components/ColorPicker.tsx

@@ -50,7 +50,9 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
   const [notes,          setNotes]          = useState(editingEntry?.notes ?? '')
   const [activeImg,      setActiveImg]      = useState(0)
   const [userVariationId, setUserVariationId] = useState<string | undefined>(
-    () => editingEntry?.selectedVariationId ?? product.variations[0]?.id
+    () => editingEntry?.selectedVariationId
+      ?? product.variations.find((v) => v.inventory === null || v.inventory > 0)?.id
+      ?? product.variations[0]?.id
   )
 
   // Vinyl state
@@ -285,21 +287,29 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
             <div className="field" style={{ marginBottom: '1.25rem' }}>
               <label className="label is-small">Size / Option</label>
               <div className="buttons">
-                {selectableVariations.map((v) => (
+                {selectableVariations.map((v) => {
+                  const varSoldOut = v.inventory !== null && v.inventory <= 0
+                  return (
                     <button
                       key={v.id}
                       type="button"
                       className={`button is-small${v.id === (userVariation?.id) ? ' is-info' : ''}`}
-                    onClick={() => { setUserVariationId(v.id); setActiveImg(0) }}
+                      disabled={varSoldOut}
+                      style={varSoldOut ? { opacity: 0.5, cursor: 'not-allowed' } : undefined}
+                      onClick={() => { if (!varSoldOut) { setUserVariationId(v.id); setActiveImg(0) } }}
                     >
                       {v.name}
-                    {v.priceCents > 0 && (
+                      {varSoldOut
+                        ? <span style={{ marginLeft: 6, fontSize: '0.78em' }}>Sold Out</span>
+                        : v.priceCents > 0 && (
                           <span style={{ marginLeft: 6, opacity: 0.75, fontSize: '0.78em' }}>
                             {fmt(v.priceCents)}
                           </span>
-                    )}
+                        )
+                      }
                     </button>
-                ))}
+                  )
+                })}
               </div>
             </div>
           )}