{"product_id":"handmade-incense-cone","title":"自家製客製化塔香（製作需時10-14個工作天）","description":"\u003c!-- Shopify 商品資訊欄專用版 (含 10 組一鍵推薦配方小圖示 + 單欄嵌入) --\u003e\n\u003cdiv class=\"custom-incense-builder-inline\"\u003e\n  \n  \u003c!-- 1. 選擇塔香數量與價格 --\u003e\n  \u003cdiv class=\"section-group\"\u003e\n    \u003clabel class=\"section-label\"\u003e1. 選擇塔香數量與規格\u003c\/label\u003e\n    \u003cdiv class=\"option-buttons\" id=\"variant-options\"\u003e\n      \u003cbutton type=\"button\" class=\"opt-btn active\" data-qty=\"5\"\u003e\n        \u003cspan class=\"qty\"\u003e5 粒\u003c\/span\u003e\n        \u003cspan class=\"price\"\u003e$90\u003c\/span\u003e\n      \u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"opt-btn\" data-qty=\"10\"\u003e\n        \u003cspan class=\"qty\"\u003e10 粒\u003c\/span\u003e\n        \u003cspan class=\"price\"\u003e$160\u003c\/span\u003e\n      \u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"opt-btn\" data-qty=\"20\"\u003e\n        \u003cspan class=\"qty\"\u003e20 粒\u003c\/span\u003e\n        \u003cspan class=\"price\"\u003e$280\u003c\/span\u003e\n      \u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"opt-btn\" data-qty=\"50\"\u003e\n        \u003cspan class=\"qty\"\u003e50 粒\u003c\/span\u003e\n        \u003cspan class=\"price\"\u003e$600\u003c\/span\u003e\n      \u003c\/button\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- 2. 店長推薦 10 大經典功效配方 (含小圖示) --\u003e\n  \u003cdiv class=\"section-group\"\u003e\n    \u003clabel class=\"section-label\"\u003e2. 選擇店長推薦經典配方\/自由調配香粉百分比例\u003c\/label\u003e\n    \u003cdiv class=\"preset-buttons\" id=\"preset-options\"\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"1\"\u003e\u003cspan class=\"btn-icon\"\u003e🧹\u003c\/span\u003e 深度空間淨化\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"2\"\u003e\u003cspan class=\"btn-icon\"\u003e🌙\u003c\/span\u003e 深層舒眠安神\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"3\"\u003e\u003cspan class=\"btn-icon\"\u003e💰\u003c\/span\u003e 財運事業加持\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"4\"\u003e\u003cspan class=\"btn-icon\"\u003e🧘\u003c\/span\u003e 靜心冥想專注\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"5\"\u003e\u003cspan class=\"btn-icon\"\u003e🩹\u003c\/span\u003e 心靈情緒修復\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"6\"\u003e\u003cspan class=\"btn-icon\"\u003e🪵\u003c\/span\u003e 大地接地穩定\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"7\"\u003e\u003cspan class=\"btn-icon\"\u003e☯️\u003c\/span\u003e 傳統辟邪除穢\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"8\"\u003e\u003cspan class=\"btn-icon\"\u003e💡\u003c\/span\u003e 靈性啟發創作\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"9\"\u003e\u003cspan class=\"btn-icon\"\u003e🛡️\u003c\/span\u003e 神聖古法保護\u003c\/button\u003e\n      \u003cbutton type=\"button\" class=\"preset-btn\" data-preset=\"10\"\u003e\u003cspan class=\"btn-icon\"\u003e⚖️\u003c\/span\u003e 全效和諧平衡\u003c\/button\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- 3. 香粉配方動態預覽（圓餅圖 + 當前配方清單） --\u003e\n  \u003cdiv class=\"recipe-preview-box\"\u003e\n    \u003cdiv class=\"chart-container\"\u003e\n      \u003csvg id=\"ratio-pie-chart\" viewbox=\"0 0 100 100\"\u003e\u003c\/svg\u003e\n      \u003cdiv class=\"chart-center-text\"\u003e\n        \u003cspan id=\"total-percent\"\u003e100%\u003c\/span\u003e\n        \u003csmall id=\"total-status-label\"\u003e總比例\u003c\/small\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"recipe-summary\"\u003e\n      \u003cdiv class=\"summary-title\"\u003e當前配方比例\u003c\/div\u003e\n      \u003cul id=\"recipe-list\"\u003e\u003c\/ul\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- 4. 9款香粉比例控制條 (以 5% 為單位) --\u003e\n  \u003cdiv class=\"section-group\"\u003e\n    \u003cdiv class=\"slider-header\"\u003e\n      \u003clabel class=\"section-label\"\u003e3. 微調香粉比例 (以 5% 為單位)\u003c\/label\u003e\n      \u003cdiv class=\"sum-indicator\" id=\"sum-indicator\"\u003e總和：100%\u003c\/div\u003e\n    \u003c\/div\u003e\n    \n    \u003cdiv class=\"sliders-list\" id=\"sliders-container\"\u003e\n      \u003c!-- JS 動態生成 9 個獨立 slider --\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- 5. 加入購物車區塊 --\u003e\n  \u003cdiv class=\"action-group\"\u003e\n    \u003cdiv class=\"price-display\"\u003e\n      \u003cspan\u003e總計金額：\u003c\/span\u003e\n      \u003cspan class=\"total-price-text\" id=\"final-price\"\u003e$90\u003c\/span\u003e\n    \u003c\/div\u003e\n    \n    \u003cinput type=\"hidden\" id=\"shopify-variant-id\" name=\"id\" value=\"68135342571563\"\u003e\n    \n    \u003cbutton type=\"button\" id=\"add-to-cart-btn\" class=\"add-to-cart-btn\"\u003e\n      加入購物車\n    \u003c\/button\u003e\n    \u003cdiv id=\"cart-message\" class=\"cart-message\"\u003e\u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- 6. SEO 產品描述與香粉功效說明區塊 --\u003e\n  \u003cdiv class=\"product-description-container\"\u003e\n    \u003cdetails class=\"desc-accordion\" open\u003e\n      \u003csummary\u003e🌿 打造專屬於你的靜心儀式\u003c\/summary\u003e\n      \u003cdiv class=\"accordion-content\"\u003e\n        \u003cp\u003e每一道香氣都是一種心境的延伸。我們的\u003cstrong\u003e自家製客製化塔香\u003c\/strong\u003e打破傳統單一香氣的限制，讓你可以根據個人喜好、能量需求或靜心習慣，\u003cstrong\u003e自由調配 9 款天然植物香粉的百分比例\u003c\/strong\u003e，由我們純手工為你精製成獨一無二的客製塔香。\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/details\u003e\n\n    \u003cdetails class=\"desc-accordion\"\u003e\n      \u003csummary\u003e✨ 9 款純天然香粉原料與功效介紹\u003c\/summary\u003e\n      \u003cdiv class=\"accordion-content\"\u003e\n        \u003cul class=\"powder-guide-list\"\u003e\n          \u003cli\u003e\n\u003cstrong\u003e聖木粉 (Palo Santo)：\u003c\/strong\u003e強效空間淨化、帶來正能量與靈性連結。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e白鼠尾草粉 (White Sage)：\u003c\/strong\u003e清除負能量、淨化氣場與水晶。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e藍鼠尾草粉 (Blue Sage)：\u003c\/strong\u003e溫和淨化、招財迎祥、促進心靈和平。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e雪松粉 (Cedarwood)：\u003c\/strong\u003e大地木質香調、帶來沉穩安心與接地感。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e檀木粉 (Sandalwood)：\u003c\/strong\u003e經典靜心禪香、助冥想沉思、穩定情緒。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e乳香粉 (Frankincense)：\u003c\/strong\u003e神聖高雅香氣、提升靈性、紓緩緊繃神經。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e沒藥粉 (Myrrh)：\u003c\/strong\u003e沉穩甘甜、溫和修復情緒、平衡內在能量。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e薰衣草粉 (Lavender)：\u003c\/strong\u003e清新花香、放鬆助眠、緩解日常壓力。\u003c\/li\u003e\n          \u003cli\u003e\n\u003cstrong\u003e艾草粉 (Mugwort)：\u003c\/strong\u003e傳統溫通辟邪、淨化環境、提升氣血能量。\u003c\/li\u003e\n        \u003c\/ul\u003e\n      \u003c\/div\u003e\n    \u003c\/details\u003e\n\n    \u003cdetails class=\"desc-accordion\"\u003e\n      \u003csummary\u003e📦 產品規格與注意事項\u003c\/summary\u003e\n      \u003cdiv class=\"accordion-content\"\u003e\n        \u003cp class=\"info-text\"\u003e\n          \u003cstrong\u003e原料成分：\u003c\/strong\u003e 100% 純天然植物香粉、天然植物粘粉（無添加人工化學香精、無助燃劑）。\u003cbr\u003e\n          \u003cstrong\u003e適用場景：\u003c\/strong\u003e 瑜伽冥想、空間淨化、水晶消磁、睡前放鬆、工作專注。\u003cbr\u003e\n          \u003cstrong\u003e保存方式：\u003c\/strong\u003e 請放置於陰涼乾燥處，避免潮濕與陽光直射。\n        \u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/details\u003e\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.custom-incense-builder-inline {\n  width: 100%;\n  margin: 16px 0;\n  font-family: inherit;\n  color: #333;\n  box-sizing: border-box;\n}\n\n\/* 區塊標題與按鈕 *\/\n.section-group {\n  margin-bottom: 24px;\n}\n.section-label {\n  display: block;\n  font-weight: 600;\n  font-size: 15px;\n  margin-bottom: 10px;\n  color: #2c2c2c;\n}\n.option-buttons {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.opt-btn {\n  padding: 10px 4px;\n  border: 2px solid #ddd;\n  background: #fff;\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  transition: all 0.2s ease;\n}\n.opt-btn .qty {\n  font-size: 14px;\n  font-weight: bold;\n}\n.opt-btn .price {\n  font-size: 12px;\n  color: #666;\n  margin-top: 2px;\n}\n.opt-btn:hover {\n  border-color: #8c6d46;\n}\n.opt-btn.active {\n  border-color: #8c6d46;\n  background-color: #f7f3ed;\n  color: #8c6d46;\n}\n.opt-btn.active .price {\n  color: #8c6d46;\n}\n\n\/* 推薦配方按鈕網格 (含圖示微調) *\/\n.preset-buttons {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 8px;\n}\n.preset-btn {\n  padding: 8px 10px;\n  background: #fdfbf7;\n  border: 1px solid #eae3d2;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #4a3b2c;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  transition: all 0.2s ease;\n}\n.preset-btn .btn-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.preset-btn:hover {\n  border-color: #8c6d46;\n  background: #f7f3ed;\n}\n.preset-btn.active {\n  background: #8c6d46;\n  color: #fff;\n  border-color: #8c6d46;\n  font-weight: bold;\n}\n\n\/* 配方預覽卡片 *\/\n.recipe-preview-box {\n  background: #fdfbf7;\n  border: 1px solid #eae3d2;\n  border-radius: 12px;\n  padding: 16px;\n  margin-bottom: 24px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n.chart-container {\n  position: relative;\n  width: 100px;\n  height: 100px;\n  flex-shrink: 0;\n}\n.chart-container svg {\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n  border-radius: 50%;\n}\n.chart-center-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  pointer-events: none;\n}\n.chart-center-text span {\n  display: block;\n  font-size: 15px;\n  font-weight: bold;\n  color: #4a3b2c;\n}\n.chart-center-text small {\n  font-size: 10px;\n  color: #888;\n}\n.recipe-summary {\n  flex-grow: 1;\n}\n.summary-title {\n  font-size: 13px;\n  font-weight: 600;\n  margin-bottom: 6px;\n  color: #4a3b2c;\n  border-bottom: 1px solid #eae3d2;\n  padding-bottom: 4px;\n}\n.recipe-summary ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 4px 8px;\n}\n.recipe-summary li {\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.color-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: inline-block;\n  flex-shrink: 0;\n}\n\n\/* Slider 控制區 *\/\n.slider-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n}\n.sum-indicator {\n  font-size: 12px;\n  font-weight: bold;\n  padding: 3px 8px;\n  border-radius: 6px;\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n.sum-indicator.error {\n  background: #ffebee;\n  color: #c62828;\n}\n.sliders-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  background: #fafafa;\n  padding: 14px;\n  border-radius: 12px;\n  border: 1px solid #eee;\n}\n.slider-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.slider-info {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n}\n.slider-name {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n.slider-val {\n  font-weight: bold;\n  color: #8c6d46;\n  min-width: 40px;\n  text-align: right;\n}\n.slider-item input[type=\"range\"] {\n  width: 100%;\n  accent-color: #8c6d46;\n  cursor: pointer;\n  margin: 0;\n}\n\n\/* 下單與價格區 *\/\n.action-group {\n  margin-top: 20px;\n  margin-bottom: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #eee;\n}\n.price-display {\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 10px;\n  display: flex;\n  justify-content: space-between;\n}\n.total-price-text {\n  font-size: 22px;\n  color: #8c6d46;\n}\n.add-to-cart-btn {\n  width: 100%;\n  padding: 14px;\n  background: #8c6d46;\n  color: #fff;\n  font-size: 16px;\n  font-weight: bold;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n.add-to-cart-btn:hover:not(:disabled) {\n  background: #705535;\n}\n.add-to-cart-btn:disabled {\n  background: #ccc;\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n.cart-message {\n  margin-top: 8px;\n  font-size: 13px;\n  text-align: center;\n}\n\n\/* SEO 產品描述折疊選單 *\/\n.product-description-container {\n  border-top: 1px solid #eee;\n  padding-top: 16px;\n}\n.desc-accordion {\n  border-bottom: 1px solid #eee;\n  margin-bottom: 8px;\n  padding-bottom: 8px;\n}\n.desc-accordion summary {\n  font-weight: 600;\n  font-size: 14px;\n  color: #4a3b2c;\n  cursor: pointer;\n  padding: 8px 0;\n  outline: none;\n  list-style-type: '▸ ';\n}\n.desc-accordion[open] summary {\n  list-style-type: '▾ ';\n}\n.accordion-content {\n  padding: 8px 0;\n  font-size: 13px;\n  color: #555;\n  line-height: 1.6;\n}\n.powder-guide-list {\n  padding-left: 18px;\n  margin: 0;\n}\n.powder-guide-list li {\n  margin-bottom: 6px;\n}\n.info-text {\n  margin: 0;\n}\n\u003c\/style\u003e\n\n\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', function() {\n  const STEP = 5;\n\n  const variantMap = {\n    '5': { id: '68135342571563', price: '$90', title: '5 粒' },\n    '10': { id: '68135342604331', price: '$160', title: '10 粒' },\n    '20': { id: '68135342637099', price: '$280', title: '20 粒' },\n    '50': { id: '68135342669867', price: '$600', title: '50 粒' }\n  };\n\n  const powders = [\n    { id: 'p1', name: '聖木粉', color: '#D4A373' },\n    { id: 'p2', name: '白鼠尾草粉', color: '#CCD5AE' },\n    { id: 'p3', name: '藍鼠尾草粉', color: '#A8DADC' },\n    { id: 'p4', name: '雪松粉', color: '#E9EDC9' },\n    { id: 'p5', name: '檀木粉', color: '#FAEDCD' },\n    { id: 'p6', name: '乳香粉', color: '#F4A261' },\n    { id: 'p7', name: '沒藥粉', color: '#E76F51' },\n    { id: 'p8', name: '薰衣草粉', color: '#B5E2FA' },\n    { id: 'p9', name: '艾草粉', color: '#588157' }\n  ];\n\n  const presetRecipes = {\n    '1':  [50, 30, 0,  20, 0,  0,  0,  0,  0],\n    '2':  [0,  0,  0,  0,  40, 20, 0,  40, 0],\n    '3':  [0,  0,  40, 0,  30, 30, 0,  0,  0],\n    '4':  [0,  0,  0,  0,  50, 30, 20, 0,  0],\n    '5':  [0,  0,  30, 0,  0,  0,  40, 30, 0],\n    '6':  [20, 0,  0,  50, 30, 0,  0,  0,  0],\n    '7':  [0,  30, 0,  20, 0,  0,  0,  0,  50],\n    '8':  [30, 0,  30, 0,  0,  40, 0,  0,  0],\n    '9':  [0,  20, 0,  0,  0,  40, 40, 0,  0],\n    '10': [35, 0,  0,  0,  35, 0,  0,  15, 15]\n  };\n\n  let values = [20, 20, 10, 10, 10, 10, 10, 5, 5];\n\n  const container = document.getElementById('sliders-container');\n  const recipeList = document.getElementById('recipe-list');\n  const pieChart = document.getElementById('ratio-pie-chart');\n  const totalPercentEl = document.getElementById('total-percent');\n  const sumIndicator = document.getElementById('sum-indicator');\n  const finalPriceEl = document.getElementById('final-price');\n  const addToCartBtn = document.getElementById('add-to-cart-btn');\n  const cartMessage = document.getElementById('cart-message');\n  const hiddenVariantInput = document.getElementById('shopify-variant-id');\n\n  function initSliders() {\n    container.innerHTML = '';\n    powders.forEach((p, idx) =\u003e {\n      const item = document.createElement('div');\n      item.className = 'slider-item';\n      item.innerHTML = `\n        \u003cdiv class=\"slider-info\"\u003e\n          \u003cspan class=\"slider-name\"\u003e\n            \u003cspan class=\"color-dot\" style=\"background-color: ${p.color}\"\u003e\u003c\/span\u003e\n            ${p.name}\n          \u003c\/span\u003e\n          \u003cspan class=\"slider-val\" id=\"val-${idx}\"\u003e${values[idx]}%\u003c\/span\u003e\n        \u003c\/div\u003e\n        \u003cinput type=\"range\" min=\"0\" max=\"100\" step=\"${STEP}\" value=\"${values[idx]}\" data-index=\"${idx}\"\u003e\n      `;\n      container.appendChild(item);\n    });\n\n    container.querySelectorAll('input[type=\"range\"]').forEach(slider =\u003e {\n      slider.addEventListener('input', handleSliderInput);\n    });\n  }\n\n  function handleSliderInput(e) {\n    const changedIdx = parseInt(e.target.dataset.index, 10);\n    values[changedIdx] = parseInt(e.target.value, 10);\n    document.querySelectorAll('.preset-btn').forEach(b =\u003e b.classList.remove('active'));\n    updateUI();\n  }\n\n  document.querySelectorAll('.preset-btn').forEach(btn =\u003e {\n    btn.addEventListener('click', function() {\n      document.querySelectorAll('.preset-btn').forEach(b =\u003e b.classList.remove('active'));\n      this.classList.add('active');\n\n      const presetId = this.dataset.preset;\n      if (presetRecipes[presetId]) {\n        values = [...presetRecipes[presetId]];\n        \n        container.querySelectorAll('input[type=\"range\"]').forEach((slider, idx) =\u003e {\n          slider.value = values[idx];\n        });\n\n        updateUI();\n      }\n    });\n  });\n\n  function updateUI() {\n    const totalSum = values.reduce((a, b) =\u003e a + b, 0);\n\n    values.forEach((v, idx) =\u003e {\n      const valText = document.getElementById(`val-${idx}`);\n      if (valText) valText.textContent = `${v}%`;\n    });\n\n    recipeList.innerHTML = '';\n    powders.forEach((p, idx) =\u003e {\n      if (values[idx] \u003e 0) {\n        const li = document.createElement('li');\n        li.innerHTML = `\n          \u003cspan class=\"color-dot\" style=\"background-color: ${p.color}\"\u003e\u003c\/span\u003e\n          ${p.name}: \u003cstrong\u003e${values[idx]}%\u003c\/strong\u003e\n        `;\n        recipeList.appendChild(li);\n      }\n    });\n\n    totalPercentEl.textContent = `${totalSum}%`;\n\n    if (totalSum === 100) {\n      sumIndicator.textContent = `總和：100%`;\n      sumIndicator.classList.remove('error');\n      addToCartBtn.disabled = false;\n      cartMessage.textContent = '';\n    } else {\n      const diff = 100 - totalSum;\n      sumIndicator.textContent = diff \u003e 0 ? `總和：${totalSum}% (差${diff}%)` : `總和：${totalSum}% (超${Math.abs(diff)}%)`;\n      sumIndicator.classList.add('error');\n      addToCartBtn.disabled = true;\n      cartMessage.style.color = '#c62828';\n      cartMessage.textContent = '請調整香粉比例至 100%';\n    }\n\n    renderPieChart(totalSum);\n  }\n\n  function renderPieChart(totalSum) {\n    if (totalSum === 0) {\n      pieChart.innerHTML = `\u003ccircle cx=\"50\" cy=\"50\" r=\"28\" fill=\"#fdfbf7\" \/\u003e`;\n      return;\n    }\n\n    let cumulativePercent = 0;\n    let svgContent = '';\n\n    values.forEach((val, idx) =\u003e {\n      if (val \u003c= 0) return;\n      const normalizedVal = (val \/ totalSum) * 100;\n      const startAngle = cumulativePercent * 3.6;\n      cumulativePercent += normalizedVal;\n      const endAngle = cumulativePercent * 3.6;\n\n      const x1 = 50 + 40 * Math.cos(Math.PI * startAngle \/ 180);\n      const y1 = 50 + 40 * Math.sin(Math.PI * startAngle \/ 180);\n      const x2 = 50 + 40 * Math.cos(Math.PI * endAngle \/ 180);\n      const y2 = 50 + 40 * Math.sin(Math.PI * endAngle \/ 180);\n\n      const largeArcFlag = normalizedVal \u003e 50 ? 1 : 0;\n\n      const pathData = [\n        `M 50 50`,\n        `L ${x1} ${y1}`,\n        `A 40 40 0 ${largeArcFlag} 1 ${x2} ${y2}`,\n        `Z`\n      ].join(' ');\n\n      svgContent += `\u003cpath d=\"${pathData}\" fill=\"${powders[idx].color}\" \/\u003e`;\n    });\n\n    svgContent += `\u003ccircle cx=\"50\" cy=\"50\" r=\"28\" fill=\"#fdfbf7\" \/\u003e`;\n    pieChart.innerHTML = svgContent;\n  }\n\n  document.querySelectorAll('#variant-options .opt-btn').forEach(btn =\u003e {\n    btn.addEventListener('click', function() {\n      document.querySelectorAll('#variant-options .opt-btn').forEach(b =\u003e b.classList.remove('active'));\n      this.classList.add('active');\n      \n      const qty = this.dataset.qty;\n      const selectedVariant = variantMap[qty];\n\n      if (selectedVariant) {\n        hiddenVariantInput.value = selectedVariant.id;\n        finalPriceEl.textContent = selectedVariant.price;\n      }\n    });\n  });\n\n  addToCartBtn.addEventListener('click', async function() {\n    const totalSum = values.reduce((a, b) =\u003e a + b, 0);\n    if (totalSum !== 100) return;\n\n    const variantId = hiddenVariantInput.value.trim();\n    const activeBtn = document.querySelector('#variant-options .opt-btn.active');\n    const qtyKey = activeBtn ? activeBtn.dataset.qty : '5';\n    const variantInfo = variantMap[qtyKey] || { title: '5 粒', price: '$90' };\n\n    addToCartBtn.disabled = true;\n    addToCartBtn.textContent = '處理中...';\n    cartMessage.textContent = '';\n\n    const recipeText = powders\n      .map((p, i) =\u003e `${p.name}: ${values[i]}%`)\n      .filter((_, i) =\u003e values[i] \u003e 0)\n      .join(' | ');\n\n    const properties = {\n      '規格選購': variantInfo.title,\n      '客製配方摘要': recipeText\n    };\n\n    powders.forEach((p, i) =\u003e {\n      if (values[i] \u003e 0) {\n        properties[`[配方] ${p.name}`] = `${values[i]}%`;\n      }\n    });\n\n    try {\n      const response = await fetch('\/cart\/add.js', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json', 'Accept': 'application\/json' },\n        body: JSON.stringify({\n          items: [{ id: parseInt(variantId, 10), quantity: 1, properties: properties }]\n        })\n      });\n\n      const data = await response.json();\n      if (!response.ok) throw new Error(data.description || data.message || '加入購物車失敗');\n\n      addToCartBtn.textContent = '成功加入購物車！';\n      cartMessage.style.color = '#2e7d32';\n      cartMessage.textContent = '已成功加入購物車。';\n\n      document.dispatchEvent(new CustomEvent('cart:refresh'));\n      document.dispatchEvent(new CustomEvent('cart:build'));\n\n      setTimeout(() =\u003e { window.location.href=\"\/en-mo\/cart\"; }, 1000);\n\n    } catch (error) {\n      console.error('Cart API Error:', error);\n      cartMessage.style.color = '#c62828';\n      cartMessage.textContent = `加入失敗: ${error.message}`;\n    } finally {\n      setTimeout(() =\u003e {\n        addToCartBtn.disabled = false;\n        addToCartBtn.textContent = '加入購物車';\n      }, 2500);\n    }\n  });\n\n  initSliders();\n  updateUI();\n});\n\u003c\/script\u003e","brand":"The Incense Shop","offers":[{"title":"5pcs","offer_id":68135342571563,"sku":"TIS0114","price":90.0,"currency_code":"HKD","in_stock":true},{"title":"10pcs","offer_id":68135342604331,"sku":"TIS0115","price":160.0,"currency_code":"HKD","in_stock":true},{"title":"20pcs","offer_id":68135342637099,"sku":"TIS0116","price":280.0,"currency_code":"HKD","in_stock":true},{"title":"50pcs","offer_id":68135342669867,"sku":"TIS0117","price":600.0,"currency_code":"HKD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0559\/4886\/9675\/files\/handmadeincensecone.jpg?v=1793896131","url":"https:\/\/www.incenseshophk.com\/en-mo\/products\/handmade-incense-cone","provider":"The Incense Shop","version":"1.0","type":"link"}