x

apps/website/src/app/[lang]/products/[slug]/page.tsx

@@ -181,12 +181,11 @@ function ProductMainSection({
         </nav>
       )}
 
-      <section className="grid gap-10 md:grid-cols-2 md:items-stretch md:gap-16">
+      <section className="grid gap-10 md:grid-cols-2 md:items-start md:gap-16">
         <ProductGallery
           images={galleryImages}
           productName={productName}
           categoryName={categoryName}
-          stretchDesktop
         />
 
         <AddToCartSection product={product} showBrandMeta={showBrandMeta} />

apps/website/src/components/AddToCartSection.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useRef, useEffect } from 'react'
 import Image from 'next/image'
 import Link from './LocalizedLink'
 import { getCategoryImage, formatPrice, type Product } from '@homaroma/types'
@@ -17,7 +17,11 @@ import {
   Truck, 
   ShieldCheck, 
   RotateCcw, 
-  MessageCircle 
+  MessageCircle,
+  Search,
+  ChevronDown,
+  Check,
+  X
 } from 'lucide-react'
 
 function getBaseString(val: any): string {
@@ -219,6 +223,461 @@ const UI_TRANSLATIONS: Record<string, {
   },
 }
 
+function SearchableOptionSelect({
+  optionName,
+  values,
+  selectedValue,
+  onSelect,
+  isOptionAvailable,
+  lang,
+  optionsMeta,
+}: {
+  optionName: string
+  values: any[]
+  selectedValue: string
+  onSelect: (val: string) => void
+  isOptionAvailable: (val: string) => boolean
+  lang: string
+  optionsMeta: any[] | null | undefined
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen])
+
+  const selectedDisplayVal = useMemo(() => {
+    if (!selectedValue) return ''
+    return resolveOptionValue(selectedValue, optionsMeta, lang)
+  }, [selectedValue, optionsMeta, lang])
+
+  const isCurrentAvailable = useMemo(() => {
+    if (!selectedValue) return false
+    return isOptionAvailable(selectedValue)
+  }, [selectedValue, isOptionAvailable])
+
+  const filteredValues = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase()
+    return values
+      .map(val => {
+        const baseVal = getBaseString(val)
+        const displayVal = resolveLocalized(val, lang)
+        const available = isOptionAvailable(baseVal)
+        return { baseVal, displayVal, available }
+      })
+      .filter(item => {
+        if (!q) return true
+        return (
+          item.displayVal.toLowerCase().includes(q) ||
+          item.baseVal.toLowerCase().includes(q)
+        );
+      });
+  }, [values, searchQuery, lang, isOptionAvailable])
+
+  const placeholderText = useMemo(() => {
+    switch (lang.slice(0, 2)) {
+      case 'th': return `ค้นหา หรือเลือกรุ่น (${values.length} รายการ)...`
+      case 'ja': return `オプションを検索または選択 (${values.length}件)...`
+      case 'zh': return `搜索或选择规格 (${values.length} 项)...`
+      default: return `Search or select option (${values.length} items)...`
+    }
+  }, [lang, values.length])
+
+  const emptyText = useMemo(() => {
+    switch (lang.slice(0, 2)) {
+      case 'th': return 'ไม่พบตัวเลือกที่ตรงกับคำค้นหา'
+      case 'ja': return '該当するオプションが見つかりません'
+      case 'zh': return '未找到匹配的规格'
+      default: return 'No matching options found'
+    }
+  }, [lang])
+
+  return (
+    <div ref={containerRef} className="relative w-full space-y-2">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(prev => !prev)}
+        className={`w-full flex items-center justify-between gap-3 px-4 py-3 rounded-2xl border transition-all text-left shadow-sm ${
+          isOpen
+            ? 'border-brand-primary bg-surface-card ring-2 ring-brand-primary/20'
+            : 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-text-main'
+        }`}
+      >
+        <div className="flex items-center gap-2.5 min-w-0 flex-1">
+          <span className="text-xs uppercase font-bold tracking-wider text-muted-text shrink-0">
+            {optionName}:
+          </span>
+          <span className={`text-xs md:text-sm font-bold truncate ${selectedDisplayVal ? 'text-text-main' : 'text-muted-text/60 italic'}`}>
+            {selectedDisplayVal || placeholderText}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {selectedValue && (
+            isCurrentAvailable ? (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-brand-success/10 text-brand-success border border-brand-success/20">
+                <span className="w-1.5 h-1.5 rounded-full bg-brand-success" />
+                พร้อมส่ง
+              </span>
+            ) : (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">
+                หมด
+              </span>
+            )
+          )}
+          <span className="text-[11px] font-bold px-2 py-0.5 rounded-md bg-surface-page border border-line-primary/10 text-muted-text">
+            {values.length} รุ่น
+          </span>
+          <ChevronDown className={`w-4 h-4 text-muted-text transition-transform duration-200 ${isOpen ? 'rotate-180 text-brand-primary' : ''}`} />
+        </div>
+      </button>
+
+      {/* Floating Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute z-40 left-0 right-0 mt-1.5 bg-surface-card border border-line-primary/30 rounded-2xl shadow-2xl p-3 space-y-2.5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-150">
+          {/* Search Box */}
+          <div className="relative">
+            <Search className="w-4 h-4 text-muted-text absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={placeholderText}
+              className="w-full pl-9 pr-8 py-2 bg-surface-page border border-line-primary/20 rounded-xl text-xs text-text-main placeholder:text-muted-text/50 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition"
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-text hover:text-text-main p-1 rounded-md"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+
+          {/* Counter info */}
+          <div className="flex items-center justify-between text-[11px] text-muted-text px-1">
+            <span>
+              {searchQuery ? `พบ ${filteredValues.length} จาก ${values.length} รายการ` : `ตัวเลือกทั้งหมด ${values.length} รายการ`}
+            </span>
+            <span className="text-[10px] text-muted-text/60">คลิกเพื่อเลือก</span>
+          </div>
+
+          {/* Options Scroll List */}
+          <div className="max-h-64 overflow-y-auto space-y-1 pr-1 custom-scrollbar">
+            {filteredValues.length > 0 ? (
+              filteredValues.map(({ baseVal, displayVal, available }) => {
+                const isSelected = selectedValue === baseVal;
+                return (
+                  <button
+                    key={baseVal}
+                    type="button"
+                    disabled={!available}
+                    onClick={() => {
+                      onSelect(baseVal)
+                      setIsOpen(false)
+                      setSearchQuery('')
+                    }}
+                    className={`w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl text-left text-xs transition-all ${
+                      isSelected
+                        ? 'border border-brand-primary/30 bg-brand-primary/15 font-bold text-brand-primary shadow-xs'
+                        : available
+                        ? 'font-medium text-text-main hover:bg-surface-page hover:text-brand-primary'
+                        : 'cursor-not-allowed bg-surface-page/30 opacity-35 text-muted-text'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2 min-w-0 pr-2">
+                      <span className={`w-2 h-2 rounded-full shrink-0 ${isSelected ? 'bg-brand-primary ring-2 ring-brand-primary/30' : available ? 'bg-line-primary/40' : 'bg-transparent'}`} />
+                      <span className="truncate">{displayVal}</span>
+                    </div>
+
+                    <div className="flex items-center gap-2 shrink-0">
+                      {!available && (
+                        <span className="text-[10px] font-semibold text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded">
+                          หมด
+                        </span>
+                      )}
+                      {isSelected && (
+                        <Check className="w-4 h-4 text-brand-primary shrink-0" />
+                      )}
+                    </div>
+                  </button>
+                );
+              })
+            ) : (
+              <div className="py-8 text-center text-xs text-muted-text space-y-1">
+                <p className="font-semibold">{emptyText}</p>
+                <p className="text-[11px] text-muted-text/60">ลองพิมพ์คำค้นหาอื่น เช่น ชื่อรุ่นรถ ยี่ห้อ หรือขนาด</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function OptionModalSelect({
+  optionName,
+  values,
+  selectedValue,
+  onSelect,
+  isOptionAvailable,
+  lang,
+  optionsMeta,
+}: {
+  optionName: string
+  values: any[]
+  selectedValue: string
+  onSelect: (val: string) => void
+  isOptionAvailable: (val: string) => boolean
+  lang: string
+  optionsMeta: any[] | null | undefined
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+      window.addEventListener('keydown', handleKeyDown)
+      setTimeout(() => inputRef.current?.focus(), 80)
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen])
+
+  const selectedDisplayVal = useMemo(() => {
+    if (!selectedValue) return ''
+    return resolveOptionValue(selectedValue, optionsMeta, lang)
+  }, [selectedValue, optionsMeta, lang])
+
+  const isCurrentAvailable = useMemo(() => {
+    if (!selectedValue) return false
+    return isOptionAvailable(selectedValue)
+  }, [selectedValue, isOptionAvailable])
+
+  const filteredValues = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase()
+    return values
+      .map(val => {
+        const baseVal = getBaseString(val)
+        const displayVal = resolveLocalized(val, lang)
+        const available = isOptionAvailable(baseVal)
+        return { baseVal, displayVal, available }
+      })
+      .filter(item => {
+        if (!q) return true
+        return (
+          item.displayVal.toLowerCase().includes(q) ||
+          item.baseVal.toLowerCase().includes(q)
+        )
+      })
+  }, [values, searchQuery, lang, isOptionAvailable])
+
+  const placeholderText = useMemo(() => {
+    switch (lang.slice(0, 2)) {
+      case 'th': return `ค้นหาตัวเลือก หรือชื่อรุ่น (${values.length} รายการ)...`
+      case 'ja': return `オプションまたはモデルを検索 (${values.length}件)...`
+      case 'zh': return `搜索规格或型号 (${values.length} 项)...`
+      default: return `Search options or model (${values.length} items)...`
+    }
+  }, [lang, values.length])
+
+  return (
+    <div className="w-full space-y-2">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className="w-full flex items-center justify-between gap-3 px-4 py-3.5 rounded-2xl border border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-text-main shadow-xs transition-all group"
+      >
+        <div className="flex items-center gap-2.5 min-w-0 flex-1">
+          <span className="text-xs uppercase font-bold tracking-wider text-muted-text shrink-0">
+            {optionName}:
+          </span>
+          <span className={`text-xs md:text-sm font-bold truncate ${selectedDisplayVal ? 'text-text-main' : 'text-muted-text/60 italic'}`}>
+            {selectedDisplayVal || 'คลิกเพื่อเลือก'}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {selectedValue && (
+            isCurrentAvailable ? (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-brand-success/10 text-brand-success border border-brand-success/20">
+                <span className="w-1.5 h-1.5 rounded-full bg-brand-success" />
+                พร้อมส่ง
+              </span>
+            ) : (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">
+                หมด
+              </span>
+            )
+          )}
+          <span className="text-[11px] font-bold px-2 py-0.5 rounded-md bg-surface-page border border-line-primary/10 text-muted-text">
+            {values.length} รุ่น
+          </span>
+          <span className="text-xs font-semibold text-brand-primary group-hover:translate-x-0.5 transition-transform flex items-center gap-1">
+            เลือก <ChevronDown className="w-4 h-4 -rotate-90" />
+          </span>
+        </div>
+      </button>
+
+      {/* Modal Dialog (Desktop) / Bottom Sheet (Mobile) */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/70 backdrop-blur-md animate-in fade-in duration-200"
+          onClick={() => setIsOpen(false)}
+        >
+          <div 
+            className="w-full sm:max-w-2xl bg-surface-card border border-line-primary/30 rounded-t-3xl sm:rounded-3xl shadow-2xl p-4 sm:p-6 space-y-4 max-h-[85vh] flex flex-col animate-in slide-in-from-bottom sm:zoom-in-95 duration-200"
+            onClick={e => e.stopPropagation()}
+          >
+            {/* Mobile Sheet Handle */}
+            <div className="w-12 h-1.5 bg-line-primary/30 rounded-full mx-auto sm:hidden" />
+
+            {/* Modal Header */}
+            <div className="flex items-center justify-between gap-3 pb-3 border-b border-line-primary/15">
+              <div>
+                <h3 className="text-base font-bold text-text-main">
+                  {optionName}
+                </h3>
+                <p className="text-xs text-muted-text">
+                  ตัวเลือกทั้งหมด {values.length} รายการ (คลิกที่ตัวเลือกเพื่อเลือกทันที)
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setIsOpen(false)}
+                className="p-2 rounded-xl text-muted-text hover:text-text-main hover:bg-surface-page transition-all"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Search Input */}
+            <div className="relative shrink-0">
+              <Search className="w-4 h-4 text-muted-text absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={placeholderText}
+                className="w-full pl-10 pr-9 py-2.5 bg-surface-page border border-line-primary/20 rounded-xl text-xs md:text-sm text-text-main placeholder:text-muted-text/50 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-text hover:text-text-main p-1 rounded-md"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+
+            {/* Counter info */}
+            <div className="flex items-center justify-between text-xs text-muted-text px-1 shrink-0">
+              <span>
+                {searchQuery ? `พบ ${filteredValues.length} จาก ${values.length} รายการ` : `รายการทั้งหมด ${values.length} ตัวเลือก`}
+              </span>
+              <span className="text-[11px] text-muted-text/70">กด ESC เพื่อปิด</span>
+            </div>
+
+            {/* Grid of Options (2 cols on desktop, 1 col on mobile) */}
+            <div className="overflow-y-auto space-y-1.5 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-2 pr-1 custom-scrollbar flex-1 min-h-0">
+              {filteredValues.length > 0 ? (
+                filteredValues.map(({ baseVal, displayVal, available }) => {
+                  const isSelected = selectedValue === baseVal;
+                  return (
+                    <button
+                      key={baseVal}
+                      type="button"
+                      disabled={!available}
+                      onClick={() => {
+                        onSelect(baseVal)
+                        setIsOpen(false)
+                        setSearchQuery('')
+                      }}
+                      className={`w-full flex items-center justify-between p-3 rounded-xl text-left text-xs transition-all ${
+                        isSelected
+                          ? 'border border-brand-primary/40 bg-brand-primary/15 font-bold text-brand-primary shadow-xs'
+                          : available
+                          ? 'border border-line-primary/10 bg-surface-page/50 font-medium text-text-main hover:bg-surface-page hover:border-brand-primary/40 hover:text-brand-primary'
+                          : 'cursor-not-allowed bg-surface-page/20 opacity-35 text-muted-text border border-line-primary/5'
+                      }`}
+                    >
+                      <div className="flex items-center gap-2.5 min-w-0 pr-2">
+                        <span className={`w-2 h-2 rounded-full shrink-0 ${isSelected ? 'bg-brand-primary ring-2 ring-brand-primary/30' : available ? 'bg-line-primary/40' : 'bg-transparent'}`} />
+                        <span className="truncate">{displayVal}</span>
+                      </div>
+
+                      <div className="flex items-center gap-2 shrink-0">
+                        {!available && (
+                          <span className="text-[10px] font-semibold text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded">
+                            หมด
+                          </span>
+                        )}
+                        {isSelected && (
+                          <Check className="w-4 h-4 text-brand-primary shrink-0" />
+                        )}
+                      </div>
+                    </button>
+                  );
+                })
+              ) : (
+                <div className="sm:col-span-2 py-12 text-center text-xs text-muted-text space-y-1">
+                  <p className="font-semibold text-text-main">ไม่พบตัวเลือกที่ตรงกับคำค้นหา</p>
+                  <p className="text-[11px] text-muted-text/60">ลองพิมพ์คำค้นหาอื่น เช่น ชื่อรุ่นรถ ยี่ห้อ หรือขนาด</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+
 export default function AddToCartSection({
   product,
   showBrandMeta = true,
@@ -424,79 +883,108 @@ export default function AddToCartSection({
                 return Boolean(sw.imageUrl || sw.colorCode);
               });
 
+              const displayType = ((option as any).displayType || 'auto') as string;
+              const isLargeList = option.values.length > 8 && !hasAnySwatch;
+              const shouldRenderModal = displayType === 'modal';
+              const shouldRenderDropdown = displayType === 'dropdown' || (displayType === 'auto' && isLargeList);
+
               return (
                 <div key={optNameBase} className="space-y-3">
-                  <p className="text-xs font-bold uppercase tracking-widest text-muted-text">
-                    {t.selectPrefix(optNameDisplay)}
-                  </p>
+                  {shouldRenderModal ? (
+                    <OptionModalSelect
+                      optionName={t.selectPrefix(optNameDisplay)}
+                      values={option.values}
+                      selectedValue={selectedOptions[optIndex] || ''}
+                      onSelect={(val) => handleOptionChange(optIndex, val)}
+                      isOptionAvailable={(val) => isOptionAvailable(optIndex, val)}
+                      lang={lang}
+                      optionsMeta={product.options}
+                    />
+                  ) : shouldRenderDropdown ? (
+                    <SearchableOptionSelect
+                      optionName={t.selectPrefix(optNameDisplay)}
+                      values={option.values}
+                      selectedValue={selectedOptions[optIndex] || ''}
+                      onSelect={(val) => handleOptionChange(optIndex, val)}
+                      isOptionAvailable={(val) => isOptionAvailable(optIndex, val)}
+                      lang={lang}
+                      optionsMeta={product.options}
+                    />
+                  ) : (
+                    <>
+                      <p className="text-xs font-bold uppercase tracking-widest text-muted-text">
+                        {t.selectPrefix(optNameDisplay)}
+                      </p>
 
-                  <div className="flex flex-wrap gap-3">
-                    {option.values.map(val => {
-                      const baseVal = getBaseString(val);
-                      const displayVal = resolveLocalized(val, lang);
-                      const isSelected = selectedOptions[optIndex] === baseVal;
-                      const isAvailable = isOptionAvailable(optIndex, baseVal);
-                      const swatch = getOptionSwatch(optIndex, baseVal);
+                      <div className="flex flex-wrap gap-3">
+                        {option.values.map(val => {
+                          const baseVal = getBaseString(val);
+                          const displayVal = resolveLocalized(val, lang);
+                          const isSelected = selectedOptions[optIndex] === baseVal;
+                          const isAvailable = isOptionAvailable(optIndex, baseVal);
+                          const swatch = getOptionSwatch(optIndex, baseVal);
 
-                      if (hasAnySwatch) {
-                        return (
-                          <button
-                            key={baseVal}
-                            disabled={!isAvailable}
-                            onClick={() => handleOptionChange(optIndex, baseVal)}
-                            className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
-                              isSelected
-                                ? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
-                                : isAvailable
-                                ? 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-muted-text'
-                                : 'border-line-primary/10 bg-surface-card/40 opacity-40 cursor-not-allowed'
-                            }`}
-                          >
-                            <div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-surface-page border border-line-primary/10 flex items-center justify-center">
-                              {swatch.imageUrl ? (
-                                <Image
-                                  src={swatch.imageUrl}
-                                  alt={displayVal}
-                                  fill
-                                  sizes="64px"
-                                  className="object-cover transition-transform group-hover:scale-105"
-                                />
-                              ) : swatch.colorCode ? (
-                                <div
-                                  className="w-full h-full rounded-md shadow-inner transition-transform group-hover:scale-105"
-                                  style={{ backgroundColor: swatch.colorCode }}
-                                />
-                              ) : (
-                                <span className="text-xs font-semibold text-text-main">{displayVal}</span>
-                              )}
-                            </div>
-                            <span className={`text-[11px] font-medium tracking-wide ${
-                              isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
-                            }`}>
+                          if (hasAnySwatch) {
+                            return (
+                              <button
+                                key={baseVal}
+                                disabled={!isAvailable}
+                                onClick={() => handleOptionChange(optIndex, baseVal)}
+                                className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
+                                  isSelected
+                                    ? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
+                                    : isAvailable
+                                    ? 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-muted-text'
+                                    : 'border-line-primary/10 bg-surface-card/40 opacity-40 cursor-not-allowed'
+                                }`}
+                              >
+                                <div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-surface-page border border-line-primary/10 flex items-center justify-center">
+                                  {swatch.imageUrl ? (
+                                    <Image
+                                      src={swatch.imageUrl}
+                                      alt={displayVal}
+                                      fill
+                                      sizes="64px"
+                                      className="object-cover transition-transform group-hover:scale-105"
+                                    />
+                                  ) : swatch.colorCode ? (
+                                    <div
+                                      className="w-full h-full rounded-md shadow-inner transition-transform group-hover:scale-105"
+                                      style={{ backgroundColor: swatch.colorCode }}
+                                    />
+                                  ) : (
+                                    <span className="text-xs font-semibold text-text-main">{displayVal}</span>
+                                  )}
+                                </div>
+                                <span className={`text-[11px] font-medium tracking-wide ${
+                                  isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
+                                }`}>
+                                  {displayVal}
+                                </span>
+                              </button>
+                            );
+                          }
+
+                          return (
+                            <button
+                              key={baseVal}
+                              disabled={!isAvailable}
+                              onClick={() => handleOptionChange(optIndex, baseVal)}
+                              className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
+                                isSelected
+                                  ? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
+                                  : isAvailable
+                                  ? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary/50 hover:text-text-main'
+                                  : 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
+                              }`}
+                            >
                               {displayVal}
-                            </span>
-                          </button>
-                        );
-                      }
-
-                      return (
-                        <button
-                          key={baseVal}
-                          disabled={!isAvailable}
-                          onClick={() => handleOptionChange(optIndex, baseVal)}
-                          className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
-                            isSelected
-                              ? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
-                              : isAvailable
-                              ? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary/50 hover:text-text-main'
-                              : 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
-                          }`}
-                        >
-                          {displayVal}
-                        </button>
-                      );
-                    })}
-                  </div>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </>
+                  )}
                 </div>
               );
             })}

apps/website/src/components/ProductGallery.tsx

@@ -24,7 +24,7 @@ function ResponsiveProductImage({ image, alt, className, fetchPriority, sizes }:
     src: image.url,
     alt,
     width: 1200,
-    height: 1600,
+    height: 1200,
     sizes,
     fetchPriority,
   }).props
@@ -82,9 +82,7 @@ export default function ProductGallery({ productName, categoryName, images, stre
   const frameClass = stretchDesktop
     ? 'relative aspect-square w-full overflow-hidden rounded-3xl bg-surface-card shadow-card md:aspect-auto md:h-full md:min-h-0'
     : 'relative aspect-square w-full overflow-hidden rounded-3xl bg-surface-card shadow-card'
-  const mainImageClass = stretchDesktop
-    ? 'h-full w-full object-cover md:object-contain'
-    : 'h-full w-full object-cover'
+  const mainImageClass = 'h-full w-full object-contain p-4 md:p-6'
 
   if (imageCount === 1) {
     return (
@@ -101,7 +99,7 @@ export default function ProductGallery({ productName, categoryName, images, stre
 
   return (
     <div className={`flex w-full flex-col-reverse gap-4 md:flex-row ${stretchDesktop ? 'md:h-full md:min-h-0 md:items-stretch' : 'items-start'}`}>
-      <div className={`hide-scrollbar flex w-full flex-none snap-x snap-mandatory flex-row gap-2 overflow-x-auto pb-2 md:w-20 md:snap-y md:flex-col md:gap-3 md:overflow-y-auto md:pb-0 md:pr-2 lg:w-24 ${stretchDesktop ? 'md:h-full md:min-h-0' : ''}`}>
+      <div className={`hide-scrollbar flex w-full flex-none snap-x snap-mandatory flex-row gap-2 overflow-x-auto pb-2 md:w-20 md:snap-y md:flex-col md:gap-3 md:overflow-y-auto md:pb-0 md:pr-2 lg:w-24 ${stretchDesktop ? 'md:h-full md:min-h-0' : 'md:max-h-[500px]'}`}>
         {sortedImages.map((image, idx) => (
           <button
             key={image.id || `${image.url}-${idx}`}