From 95e88780ab5198ba121370d72b4f04e9d0a1d404 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Wed, 24 Jun 2026 10:09:52 -0400
Subject: [PATCH] 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 | 35 +++++++++++++++++--------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/estore/src/components/BouquetPicker.tsx b/estore/src/components/BouquetPicker.tsx
index 72f98e8..ffc9ad1 100644
--- a/estore/src/components/BouquetPicker.tsx
+++ b/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) => (
-                                        <button key={c.name} type="button" title={c.name}
-                                          onClick={() => selectLatexColor(c.name)}
-                                          style={{
-                                            width: 30, height: 30, borderRadius: '50%', cursor: 'pointer', flexShrink: 0,
-                                            background: c.image ? `url('/color/${c.image}') center/cover` : c.hex,
-                                            border: '2px solid rgba(0,0,0,0.15)',
-                                          }}
-                                        />
-                                      ))}
+                                      <div className="swatch-container">
+                                        {family.colors.map((c) => {
+                                          const imageSrc = c.image ? `/color/${c.image}` : null
+                                          return (
+                                            <div key={c.name} className="swatch-wrapper"
+                                              onClick={() => selectLatexColor(c.name)}
+                                              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>