Replace hex color codes with friendly color names for customers

- Add colorNames utility with 80+ standard color names
- Map hex codes to human-readable names (Black, Navy, Red, Teal, etc)
- Display color names in product page (with hex tooltip for reference)
- Show selected color name below color swatches
- Update shopping cart to display color names instead of hex codes
- Admin color picker shows both name and hex code for clarity

Improves UX for customers who don't understand hex color codes.
Keeps hex codes for internal data and system tooltips.

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

src/components/ColorPicker.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { getColorName } from '@/lib/colorNames';
 
 function frontFieldName(hex: string) {
   return `colorPhoto__${hex.replace('#', '')}`;
@@ -203,6 +204,7 @@ export default function ColorPicker({
               <div key={`${r.filename}-${i}`} className="flex items-center gap-2 text-xs">
                 <div className="h-4 w-4 shrink-0 rounded-full border border-line" style={{ backgroundColor: r.hex }} />
                 <span className="font-mono text-muted">{r.hex}</span>
+                <span className="text-muted">({getColorName(r.hex)})</span>
                 <span className="truncate text-muted">{r.filename}</span>
                 <span className="tag-label shrink-0 text-muted">{r.variant}</span>
               </div>
@@ -238,7 +240,10 @@ export default function ColorPicker({
           onChange={(e) => setPicked(e.target.value)}
           className="h-9 w-9 cursor-pointer border border-line bg-paper p-0"
         />
-        <span className="font-mono text-xs text-muted">{picked}</span>
+        <div className="flex flex-col gap-0.5">
+          <span className="text-xs font-medium">{getColorName(picked)}</span>
+          <span className="font-mono text-xs text-muted">{picked}</span>
+        </div>
         <button
           type="button"
           onClick={addColor}
@@ -266,7 +271,10 @@ export default function ColorPicker({
                 <div key={hex} className="border border-line p-2">
                   <div className="mb-2 flex items-center gap-2">
                     <div className="h-6 w-6 shrink-0 rounded-full border border-line" style={{ backgroundColor: hex }} />
-                    <span className="font-mono text-xs text-muted">{hex}</span>
+                    <div className="flex flex-col gap-0.5">
+                      <span className="font-medium text-xs">{getColorName(hex)}</span>
+                      <span className="font-mono text-xs text-muted">{hex}</span>
+                    </div>
                   </div>
                   <div className="grid gap-2 sm:grid-cols-2">
                     <div className="flex items-center gap-2">