BouquetPicker: balloon swatches for latex color picker, wider modal, sticky mylar tray

- Replace plain round buttons in latex color picker with full balloon swatch
  system (swatch-wrapper/color-swatch/color-shine) matching the rest of the store
- Metallics and chromes now show texture images with hover zoom/lift effect
- Widen modal to 1050px; move mylar summary tray above scroll area

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

estore/src/components/BouquetPicker.tsx

@@ -803,18 +803,31 @@ export default function BouquetPicker({ product, onClose }: Props) {
                                     <div style={{
                                       border: '1px solid #b2e0e4', borderTop: 'none',
                                       borderRadius: '0 0 8px 8px', padding: '0.6rem 0.75rem',
-                                      display: 'flex', flexWrap: 'wrap', gap: 8,
+                                      background: '#fff',
                                     }}>
-                                      {family.colors.map((c) => (
+                                      <div className="swatch-container">
-                                        <button key={c.name} type="button" title={c.name}
+                                        {family.colors.map((c) => {
-                                          onClick={() => selectLatexColor(c.name)}
+                                          const imageSrc = c.image ? `/color/${c.image}` : null
-                                          style={{
+                                          return (
-                                            width: 30, height: 30, borderRadius: '50%', cursor: 'pointer', flexShrink: 0,
+                                            <div key={c.name} className="swatch-wrapper"
-                                            background: c.image ? `url('/color/${c.image}') center/cover` : c.hex,
+                                              onClick={() => selectLatexColor(c.name)}
-                                            border: '2px solid rgba(0,0,0,0.15)',
+                                              role="button" title={c.name}>
-                                          }}
+                                              <div className="color-swatch">
-                                        />
+                                                {imageSrc ? (
-                                      ))}
+                                                  <div className="color-background finish-image"
+                                                    style={{ backgroundImage: `url('${imageSrc}')` }} />
+                                                ) : (
+                                                  <div className="color-background"
+                                                    style={{ backgroundColor: c.hex }} />
+                                                )}
+                                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                <img className="color-shine" src="/color/shine.svg" alt="" aria-hidden="true" />
+                                              </div>
+                                              <span className="color-name">{c.name}</span>
+                                            </div>
+                                          )
+                                        })}
+                                      </div>
                                     </div>
                                   )}
                                 </div>