x

apps/spa/src/pages/ProductDetailPage.tsx

@@ -304,7 +304,15 @@ export default function ProductDetailPage() {
                       : 'bg-spa-light text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm'
                   }`}
                 >
-                  {[v.option1, v.option2, v.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / ')}
+                  <span className="inline-flex items-center gap-1.5 justify-center">
+                    {v.colorCode && (
+                      <span
+                        className="inline-block w-3 h-3 rounded-full border border-black/20 shadow-xs shrink-0"
+                        style={{ backgroundColor: v.colorCode }}
+                      />
+                    )}
+                    <span>{[v.option1, v.option2, v.option3].filter(Boolean).map(opt => resolveOptionValue(opt, product.options, i18n.language)).join(' / ')}</span>
+                  </span>
                   <span className={`block text-[10px] mt-0.5 ${selectedVariant === i ? 'text-spa-light' : 'text-spa-stone/60'}`}>
                     {formatPrice(v.price)}
                   </span>