/* STRAILS 選配器 — 白底簡約、全方形（無圓角） */
.strails-cfg{--ink:#11131c;--muted:#8a8a8a;--line:#000;--bg:#eff1f2;--danger:#c0392b;--sel:#11131c;
	color:var(--ink);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Microsoft YaHei","Noto Sans TC",sans-serif;/* 本機系統字(微軟正黑/蘋方)排在 Noto Sans TC 前：Win/Mac 直接用瞬間可用且有正確 400 的本機字，不再被主題延遲載入的 Noto webfont 換掉(該 webfont 缺真 400→替換後看起來變粗)。註：不可加 font-synthesis:none，否則標題(700)在缺真粗體字面時無法合成粗體會變細 */
	max-width:1040px;margin:0 auto;padding:8px;line-height:1.55;letter-spacing:.02em;
	font-size:16px;}/* 錨定字級＝不吃主題的 html 根字級：內部字級全用 em，相對此 16px，換主題不會忽大忽小 */
.strails-cfg *{box-sizing:border-box;border-radius:0 !important;}
/* 2026-10-15 移除大桌機 zoom 放大：在 Elementor 全寬版型下容器變寬會觸發 zoom(1.2/1.3)，
   讓整個配置器被放大 1.3 倍(字 17px 看起來很大)。拿掉後維持 max-width:1040px 的收斂原始大小，各版型一致。 */
.strails-cfg button{font-family:inherit;cursor:pointer;color:inherit;font-weight:400;}/* color:inherit＝防止 iOS/LINE 內建瀏覽器把未設色的按鈕文字上藍（Apple 按鈕 tint）；font-weight:400＝不吃主題把按鈕設粗體(需粗體的按鈕各自有明確 font-weight 會覆蓋) */
.strails-cfg .s-chip-btn,.strails-cfg .s-cat,.strails-cfg .s-clasp,.strails-cfg .s-qopt,.strails-cfg .s-qdir{font-weight:400!important;}/* 鍊款/鍊寬/分類/測驗等選項按鈕：主題(Blocksy)對 button 設粗體且權重較高，故以 class 權重＋!important 明確壓回正常字重(不含 .s-next 等本該粗體者) */
/* 2026-10-15 根因修正：實測按鈕 font-weight:400 但 Rendered Font=「taipei-bold」——網站全域載入的 taipei-bold webfont 本身就是粗體字族(延遲載入約5秒後替換上來→這就是「5秒後變粗」)，字重設再細也沒用。以雙類名(.strails-cfg.strails-cfg)+!important 強制選配器全體改回本機系統字，壓過 taipei-bold；標題仍由 font-weight:700 以本機字粗體字面呈現、不受影響。 */
.strails-cfg.strails-cfg,.strails-cfg.strails-cfg *{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif!important;}

.strails-cfg .s-title{font-size:1.35em;letter-spacing:.05em;text-align:center;margin:40px 0;}
.strails-cfg .s-label{font-size:.68em;letter-spacing:.25em;color:var(--muted);}
.strails-cfg .s-modes-intro{font-size:.92em;color:var(--ink);text-align:center;line-height:1.9;margin:30px 0 2px;}/* 電腦版放大約1-2pt；手機維持原大小(見@820) */
.strails-cfg .s-modes-img{display:block;width:100%;max-width:320px;margin:10px auto 4px;}/* 模式頁說明下方圖片 */
.strails-cfg .s-modes-sep{border:0;border-top:1px solid #000;margin:56px 0 24px;}/* 模式卡與圖片之間的間隔線：上間距再加大 */
.strails-cfg .s-mode-group{margin-bottom:22px;}
.strails-cfg .s-group-h{font-size:.92em;font-weight:700;text-align:center;padding:14px 0 12px;border-top:1px solid var(--line);margin-bottom:12px;}
.strails-cfg .s-mode-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}/* 單一模式卡置中 */
@media(max-width:600px){.strails-cfg .s-mode-card{max-width:none;}}
.strails-cfg .s-mode-card{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;
	width:100%;max-width:340px;
	background:#11131c;color:#fff;border:1px solid #11131c;padding:26px 20px;transition:.15s;}/* 黑底白字 */
.strails-cfg .s-mode-card:hover{background:#656565;}/* 滑鼠移過變灰 */
.strails-cfg .s-mode-card .s-label{color:rgba(255,255,255,.6);}/* 黑底上的英文小標 */
.strails-cfg .s-mode-card .s-h{font-size:1em;font-weight:600;color:#fff;}/* 中文主標縮小約1-2pt */
.strails-cfg .s-mode-card .s-p{font-size:.76em;color:#fff;}/* 中文副標縮小約1-2pt */

.strails-cfg .s-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.strails-cfg .s-current-sel{margin:-6px 2px 4px;font-size:.9em;color:var(--ink);font-weight:600;}/* 重新選擇與步驟1之間：當前款式系列與客製起價 */
.strails-cfg .s-current-note{margin:0 2px 3px;font-size:.76em;color:var(--muted);line-height:1.6;}/* 價格說明(依「。」分段，多行) */
.strails-cfg .s-current-note:last-of-type{margin-bottom:14px;}
.strails-cfg .s-back{background:var(--ink);border:1px solid var(--ink);color:#fff;font-size:.88em;padding:5px 11px;}/* ← 重新選擇：黑底白字 */
.strails-cfg .s-back:hover{color:#fff;}
.strails-cfg .s-mode-name{font-size:.78em;letter-spacing:.15em;color:var(--muted);}

/* 雙欄：左選石 + 右即時預覽 */
.strails-cfg .s-layout{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start;}/* 電腦版右側預覽欄加寬(320→420)，讓手鍊預覽更大；gap 20→56：不拉寬整體(維持 max-width:1040)、改以加大左選擇區與右預覽間距來透氣 */
/* 電腦版：右側預覽一律顯示（不隱藏）。「選到水晶前不顯示」只在手機/平板生效——見檔末 @media(max-width:820px) */
/* 手機版：即時預覽固定在上方、下方選石區可捲動 */
@media(max-width:820px){
	.strails-cfg .s-layout{grid-template-columns:1fr;gap:0;}
	.strails-cfg .s-preview{order:-1;position:sticky;top:0;z-index:20;max-height:48vh;overflow-y:auto;
		border-left:0;border-right:0;box-shadow:0 3px 10px rgba(0,0,0,.08);}
	.strails-cfg .s-steps{padding-top:14px;}
	/* 選項橫向可滑動，避免手機上換行過長 */
	.strails-cfg .s-chips-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
	.strails-cfg .s-steps .s-chain-group{flex-direction:column;align-items:flex-start;gap:4px;}/* 手機：標籤在上且靠左(加 .s-steps 提高權重勝過基礎 align-items:center)、按鈕列取得整列寬度→雙尺寸5個一列、單尺寸4個一列 */
	.strails-cfg .s-chain-group .s-chain-row{width:100%;flex-wrap:wrap;gap:4px;}/* 按鈕自然尺寸(不滿版)，放不下才換行 */
	.strails-cfg .s-chain-group .s-chain-row .s-chip-btn{padding:6px 9px;}/* 手機群組按鈕左右內距略縮，讓雙尺寸5個排一列(僅群組列，鍊寬列不受影響) */
	.strails-cfg .s-chip-btn{flex:0 0 auto;}
	/* 方向(六大類)列改滿版 grid：3欄×2列填滿寬度，不橫向捲動；鍊寬列(.s-chain-row)不受影響 */
	.strails-cfg .s-chips-row:not(.s-chain-row){display:grid;grid-template-columns:repeat(3,1fr);gap:6px;overflow-x:visible;}
	.strails-cfg .s-chips-row:not(.s-chain-row) .s-chip-btn{flex:initial;width:100%;text-align:center;padding-left:4px;padding-right:4px;}
	.strails-cfg .s-ring{max-width:168px;}
	/* 色澤差異大的水晶：手機也在預覽窗顯示(s-varnote，同桌機)，故不再隱藏 s-varnote、也不再於圖卡顯示備註/示意圖 */
	.strails-cfg .s-card .s-info{flex:1 1 auto;min-width:0;}
}

.strails-cfg .s-hint{font-size:.84em;color:var(--muted);margin-bottom:12px;}
.strails-cfg .s-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.strails-cfg .s-cat{background:#fff;border:1px solid #8a8a8a;padding:7px 14px;font-size:.88em;}
.strails-cfg .s-cat.on{border-color:var(--ink);background:var(--ink);color:#fff;}
.strails-cfg .s-needs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
@media(max-width:600px){.strails-cfg .s-needs{grid-template-columns:1fr 1fr;}}
.strails-cfg .s-need{display:flex;flex-direction:column;gap:2px;text-align:left;background:#fff;border:1px solid #8a8a8a;padding:11px 12px;}
.strails-cfg .s-need:hover{border-color:var(--ink);}
.strails-cfg .s-need.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.strails-cfg .s-need.on .s-p{color:#fff;}
.strails-cfg .s-need .s-p{font-size:.72em;color:var(--ink);}

.strails-cfg .s-block{margin:16px 0;}
.strails-cfg .s-block-h{font-size:.98em;font-weight:600;margin-bottom:9px;}
.strails-cfg .s-req{font-size:.7em;color:var(--muted);font-weight:400;margin-left:6px;}
.strails-cfg .s-sub-h{font-size:.76em;color:var(--muted);margin:9px 0 6px;}

/* 水晶卡：方形橫式，左縮圖 + 右資訊 */
.strails-cfg .s-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}/* 手機亦維持一列兩個(移除原 ≤600px 單欄) */
@media(max-width:600px){.strails-cfg .s-grid-solo{grid-template-columns:1fr;}}/* 依寓意版水晶少：手機還原成單顆一列(其餘模式維持兩欄) */
@media(max-width:600px){.strails-cfg .s-grid:not(.s-grid-solo) .s-tag{display:none;}}/* 2欄窄卡隱藏「已選」標籤(選中已由黑底表示)，讓名稱+ST 完整並排不被裁切/撐爆 */
.strails-cfg .s-card{display:flex;gap:10px;align-items:stretch;text-align:left;background:#fff;border:1px solid transparent;padding:8px;transition:.12s;min-width:0;}/* 圖卡預設透明外框(box-sizing:border-box→不佔額外版面)，hover 才顯示外框線以對齊其他互動卡；選中以黑底白字呈現。min-width:0＝身為 grid item 可縮到欄寬內，避免名稱 nowrap 撐爆 2 欄格致整頁水平溢出 */
.strails-cfg .s-card:hover{border-color:#11131c;}
.strails-cfg .s-card.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
.strails-cfg .s-card.is-on .s-name,.strails-cfg .s-card.is-on .s-desc,.strails-cfg .s-card.is-on .s-cnote{color:#fff;}
/* 選滿上限→未選水晶卡封鎖：灰底、文字/縮圖轉灰、不可點 */
.strails-cfg .s-card.is-locked{background:#eceae6;cursor:not-allowed;}
.strails-cfg .s-card.is-locked .s-thumb{filter:grayscale(1);opacity:.4;}
.strails-cfg .s-card.is-locked .s-name,.strails-cfg .s-card.is-locked .s-name-st,.strails-cfg .s-card.is-locked .s-desc,.strails-cfg .s-card.is-locked .s-cnote{color:#b3b1ad;}
.strails-cfg .s-thumb{flex:0 0 52px;width:52px;height:52px;background:#fff;background-size:cover;background-position:center;border:none;}/* 圖卡縮圖：無框（圖卡框線全部拿掉） */
.strails-cfg .s-thumb-empty{background:repeating-linear-gradient(45deg,#f4f2ef,#f4f2ef 6px,#eeece8 6px,#eeece8 12px);}
.strails-cfg .s-info{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;}/* overflow:hidden＝名稱列(nowrap)超出時在卡內裁切，不外溢撐寬頁面 */
.strails-cfg .s-card-top{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;min-width:0;}/* 名稱＋ST 一律並排不換行(手機窄卡靠字級縮小容納) */
.strails-cfg .s-name{font-size:.92em;font-weight:600;}
.strails-cfg .s-name-st{font-size:.68em;font-weight:400;letter-spacing:.04em;color:var(--muted);margin-left:-3px;}/* ST 編號沿用到卡片：字級同硬度備註(.s-cnote)、色 #8a8a8a 灰；負 margin 抵銷 s-card-top 的 gap:6px→約 3px 緊貼名稱 */
.strails-cfg .s-star{font-size:.7em;color:#c9a24b;letter-spacing:1px;}
.strails-cfg .s-desc{font-size:.73em;color:var(--ink);}
.strails-cfg .s-pv-total{text-align:center;font-size:.95em;color:#11131c;margin-top:10px;border-top:1px dashed var(--line);padding-top:8px;}/* 總價：置於預覽舞台底部(原鍊條顯示位置) */
.strails-cfg .s-pv-total b{font-size:1.15em;margin-left:2px;}
.strails-cfg .s-pv-total-note{display:block;margin-top:2px;font-size:.76em;font-weight:400;color:var(--muted);}/* 包含：鍊條加價/水晶加價 */
.strails-cfg .s-conf{font-size:.6em;background:#fbeaea;color:var(--danger);padding:0 5px;}
.strails-cfg .s-role{font-size:.6em;color:var(--muted);border:1px solid var(--line);padding:0 5px;align-self:flex-start;}
.strails-cfg .s-tag{margin-left:auto;font-size:.6em;background:var(--ink);color:#fff;padding:1px 6px;}

/* 即時預覽面板（sticky） */
/* 客戶設計稿：面板往下位移 8px 的「實心」黑色硬陰影（SVG 陰影 rect 未寫 fill＝預設黑，實色非外框） */
.strails-cfg .s-preview{position:sticky;top:12px;border:1px solid #11131c;background:var(--bg);box-shadow:0 8px 0 #11131c;}/* 預覽框：保留最外框黑線＋底部黑色色塊(8px offset)，底色灰、內部舞台白底無框 */
.strails-cfg .s-pv-wrap{padding:14px;}
.strails-cfg .s-pv-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.72em;letter-spacing:.12em;color:var(--muted);margin:12px 0 7px;text-align:center;}
.strails-cfg .s-pv-logo{height:22px;width:auto;flex:0 0 auto;}
.strails-cfg .s-pv-title-r{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.strails-cfg .s-pv-toggle{display:none;width:100%;background:none;border:none;border-top:1px solid var(--line);color:var(--ink);font-size:12px;cursor:pointer;padding:9px 8px 3px;margin-top:8px;letter-spacing:0;}/* 置於面板最下方（黑色陰影上方）；桌機隱藏、手機才顯示（見檔末 @media） */
.strails-cfg .s-pv-title:first-child{margin-top:0;}
.strails-cfg .s-pv-stage{background:url(../img/pv-stage-frame.svg) center/100% 100% no-repeat;border:none;padding:20px 20px 22px;}/* 白框改用設計稿的標籤形外框(四角括號+上下凹槽tab)，隨舞台縮放 */
.strails-cfg .s-pv-beads{display:flex;flex-wrap:wrap;gap:6px;}
.strails-cfg .s-pv-bead{display:flex;flex-direction:column;align-items:center;width:60px;}
.strails-cfg .s-pv-thumb{width:44px;height:44px;background:#eceae6 repeating-linear-gradient(45deg,#f4f2ef,#f4f2ef 5px,#e8e6e2 5px,#e8e6e2 10px);background-size:cover;background-position:center;border:1px solid var(--line);}
.strails-cfg .s-pv-nm{font-size:.66em;text-align:center;margin-top:3px;line-height:1.2;}
.strails-cfg .s-pv-nm em{color:#c9a24b;font-style:normal;}
.strails-cfg .s-ring{display:block;width:100%;max-width:330px;margin:0 auto;}/* 手鍊預覽環放大(224→330)；等比縮放整個排珠 */
.strails-cfg .s-ring .s-bead{cursor:pointer;}
.strails-cfg .s-ring .s-bead:hover{stroke:#11131c;stroke-width:2;}
.strails-cfg .s-pv-chain{font-size:.75em;color:var(--muted);margin-top:10px;border-top:1px dashed var(--line);padding-top:8px;text-align:center;}
.strails-cfg .s-chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
/* 方向(六大類)按鈕滿版：桌機/手機皆 3 欄一列(6 個→2 列)，較好閱讀 */
.strails-cfg .s-chips-row:not(.s-chain-row){display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.strails-cfg .s-chips-row:not(.s-chain-row) .s-chip-btn{width:100%;text-align:center;padding-top:10px;padding-bottom:10px;font-size:.86em;}/* 上下加寬，比照鍊條按鈕 */
/* 鍊條樣式按鈕：桌機一整列等寬排滿(不換行)，字級縮小；手機沿用可橫滑(檔末 @820 還原 flex) */
.strails-cfg .s-chain-row{display:flex;flex-wrap:wrap;gap:6px;}
.strails-cfg .s-chain-row .s-chip-btn{padding:6px 12px;font-size:.86em;}/* 鍊條/鍊寬按鈕：比原版略大、非滿版 */
.strails-cfg .s-chain-group{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:8px 0;}/* 標籤在上、按鈕列在下(避免長標籤擋到按鈕) */
.strails-cfg .s-chain-group .s-chain-row{width:100%;}/* 按鈕列取得整列寬度：基礎款4顆一列、特殊款3顆一列 */
.strails-cfg .s-chain-glabel{font-size:.86em;color:var(--muted);letter-spacing:.05em;}/* 標籤字級同鍊條樣式(.s-field-h .86em) */
/* 鍊條樣式大圖框：顯示目前選到的鍊條圖(於按鈕上方) */
.strails-cfg .s-chain-preview{display:block;width:100%;height:auto;border:1px solid var(--ink);background:#fff;margin:0 0 10px;}/* 圖片滿版寬、高度依原圖比例(寬度不變下盡量大) */
.strails-cfg .s-chain-preview-empty{height:150px;background:repeating-linear-gradient(45deg,#f6f4f1,#f6f4f1 10px,#eeece8 10px,#eeece8 20px);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.82em;letter-spacing:.05em;}
.strails-cfg .s-chip-btn{background:#fff;border:1px solid #8a8a8a;padding:6px 11px;font-size:.8em;}
.strails-cfg .s-chip-btn.s-sm{padding:4px 8px;font-size:.74em;}
.strails-cfg .s-chip-btn.on{border-color:var(--ink);background:var(--ink);color:#fff;}
/* 預覽區已選水晶 chip（.s-main＝目前放置中）：全部按鈕統一灰底+框，選中黑底白字 */
.strails-cfg .s-chip{background:#fff;border:1px solid #8a8a8a;color:var(--ink);padding:5px 10px;font-size:.8em;margin:0 4px 4px 0;}
.strails-cfg .s-chip.s-main{background:var(--ink);border-color:#8a8a8a;color:#fff;}
/* 欲排列水晶區：上方文字＋下方 chip 為一組(.s-tut-switch)；移除連結另置於 chip 下方右側(.s-remove-row) */
.strails-cfg .s-remove-row{text-align:right;margin-top:6px;}
.strails-cfg .s-chip-remove{background:none;border:none;padding:0;color:var(--muted);font-size:.74em;text-decoration:underline;cursor:pointer;white-space:nowrap;}
.strails-cfg .s-chip-remove:hover{color:var(--ink);}
/* 懸浮：黑色外框加粗為 2px（1px 邊框＋1px 內陰影，無位移）；點擊/選擇維持原機制（.on 黑底白字） */
/* hover：外框變黑 1px（不加粗，避免粗線） */
.strails-cfg .s-mode-card:hover,.strails-cfg .s-clasp:hover,.strails-cfg .s-cat:hover,.strails-cfg .s-need:hover,.strails-cfg .s-card:hover,.strails-cfg .s-chip-btn:hover,.strails-cfg .s-qdir:hover,.strails-cfg .s-qopt:hover,.strails-cfg .s-next:hover,.strails-cfg .s-fillbtn:hover,.strails-cfg .s-linkbtn:hover,.strails-cfg .s-back:hover,.strails-cfg .s-q-back2:hover,.strails-cfg .s-chip:hover{border-color:#11131c;}
/* （已移除舊的 :active 白色內陰影規則——它造成點擊時邊框看起來變粗） */
/* 色澤/紋理差異提示（選到指定水晶時，於已選水晶下方顯示備註＋示意圖） */
.strails-cfg .s-varnote{margin-top:10px;font-size:.74em;color:var(--ink);line-height:1.6;}
.strails-cfg .s-varnote-sep{border:0;border-top:1px solid #000;margin:0 0 10px;}/* 資訊區隔線（原差異提示文字位置） */
.strails-cfg .s-varnote-t{margin-top:8px;}/* 差異提示文字移到水晶名稱下方 */
.strails-cfg .s-varnote-imgs{display:flex;flex-wrap:wrap;gap:8px;}
/* 眼緣版水晶質感分區：標題置中 → 間隔線 → 圖卡 */
.strails-cfg .s-tex-group{margin-bottom:18px;}
.strails-cfg .s-tex-title{text-align:center;font-weight:600;font-size:.95em;margin:14px 0 8px;letter-spacing:.04em;}
.strails-cfg .s-tex-sep{border:0;border-top:1px solid #000;margin:0 0 12px;}
.strails-cfg .s-chain-sep{border:0;border-top:1px solid #000;margin:14px 0 12px;}/* 鍊寬上方間隔線 */
/* 步驟3「做個小測驗」CTA：彈窗開啟獨立測驗頁 */
.strails-cfg .s-quiz-cta{display:block;width:100%;margin:14px 0;padding:12px 16px;background:#fff;border:1px solid #11131c;font-size:.9em;text-align:center;cursor:pointer;transition:.12s;}
.strails-cfg .s-quiz-cta:hover{background:#11131c;color:#fff;}
.strails-cfg .s-varfig{margin:0;width:72px;text-align:center;}
.strails-cfg .s-varfig img{width:72px;height:72px;object-fit:cover;border:1px solid #8a8a8a;background:#fff;display:block;}
.strails-cfg .s-varfig figcaption{font-size:1.05em;margin-top:2px;}/* 祖先 .s-varnote 已 .74em，em 相乘：.66em 實測僅約7.8px太小→1.05em≈12px(相對72px圖片舒服、仍不超過水晶卡名) */
.strails-cfg .s-pv-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;}
.strails-cfg .s-pv-label{font-size:.78em;}

.strails-cfg .s-muted{color:var(--muted);font-size:.82em;}
.strails-cfg .s-note{font-size:.78em;color:var(--muted);margin:4px 0;}
.strails-cfg .s-note.s-danger{color:var(--danger);}
.strails-cfg .s-next{margin-top:12px;width:100%;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:13px;font-size:.95em;font-weight:700;letter-spacing:.05em;}
.strails-cfg .s-next:disabled{background:#e4e6e7;color:#9a9a9a;border-color:#c2c4c5;cursor:not-allowed;}
.strails-cfg .s-q-start{background:var(--ink);color:#fff;border-color:var(--ink);}/* 測驗結果「用這顆開始設計」：黑底白字 */

/* 步驟式版面 */
.strails-cfg .s-step{padding:16px 0;border-bottom:1px solid var(--line);}
.strails-cfg .s-step:last-child{border-bottom:0;}
.strails-cfg .s-step-h{font-size:1.02em;font-weight:700;margin-bottom:4px;}
.strails-cfg .s-step-n{display:inline-block;background:var(--ink);color:#fff;font-size:.72em;font-weight:600;padding:1px 7px;margin-right:6px;}
.strails-cfg .s-step-sub{font-size:.82em;color:var(--muted);margin-bottom:10px;}
.strails-cfg .s-field-h{font-size:.86em;font-weight:600;margin:12px 0 7px;}
.strails-cfg .s-place-tip{font-size:.8em;color:#fff;background:#9c9ca0;border:1px solid #9c9ca0;padding:8px 10px;margin:8px 0 12px;}/* 放置提示：#9c9ca0 底白字 */
.strails-cfg .s-place-tip .s-tip-mb{display:none;}/* 桌機顯示「右側空白珠位」；手機(≤820px)改顯示「上方視窗」文案 */
@media(max-width:820px){.strails-cfg .s-place-tip .s-tip-pc{display:none;}.strails-cfg .s-place-tip .s-tip-mb{display:inline;}}
.strails-cfg .s-disclaimer{font-size:.74em;color:var(--muted);line-height:1.7;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);}
.strails-cfg .s-linkbtn{background:#fff;color:var(--ink);border:1px solid #8a8a8a;padding:9px 14px;font-size:.84em;margin-bottom:12px;}
.strails-cfg .s-linkbtn[data-measure]{background:var(--ink);color:#fff;border:1px solid var(--ink);margin:2px 0 12px;}/* 測量方式按鈕：黑底白字，置於淨手圍標題與輸入框之間 */
.strails-cfg .s-q-retry{background:var(--ink);color:#fff;border-color:var(--ink);}/* 重新測驗：黑底白字 */
.strails-cfg .s-card.is-active{box-shadow:none;}
.strails-cfg .s-step.s-locked{opacity:.5;}
.strails-cfg .s-step.s-locked .s-step-sub,.strails-cfg .s-step.s-locked > :not(.s-step-h){pointer-events:none;}
.strails-cfg .s-lock{font-size:.72em;font-weight:400;color:var(--muted);}
.strails-cfg .s-fillbtn{width:100%;margin-top:10px;background:var(--ink);border:1px solid var(--ink);color:#fff;padding:9px;font-size:.82em;}/* 填滿剩餘珠位：黑底白字 */
.strails-cfg .s-fillbtn:hover{border-color:#11131c;}

/* 步驟1：扣頭方式 */
.strails-cfg .s-caption{font-size:.76em;color:#fff;background:#9c9ca0;padding:7px 10px;margin-bottom:12px;}/* 說明框：#9c9ca0 底白字 */
.strails-cfg .s-clasps{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px;}
.strails-cfg .s-clasp{display:flex;flex-direction:column;gap:2px;text-align:left;background:#fff;border:1px solid #8a8a8a;padding:12px 14px;}
.strails-cfg .s-clasp:hover{border-color:var(--ink);}
.strails-cfg .s-clasp.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.strails-cfg .s-clasp.on .s-clasp-n,.strails-cfg .s-clasp.on .s-clasp-t{color:#fff;}
.strails-cfg .s-clasp-n{font-size:.95em;font-weight:600;}
.strails-cfg .s-clasp-t{font-size:.76em;color:var(--ink);}
/* 黃底警示（自動珠徑說明） */
.strails-cfg .s-warn{font-size:.8em;color:#fff;background:#9c9ca0;border:1px solid #9c9ca0;padding:9px 11px;margin:10px 0;}/* 注意事項：#9c9ca0 底白字 */
/* 水晶卡的材質/硬度註記 */
.strails-cfg .s-cnote{display:block;font-size:.68em;color:var(--ink);margin-top:2px;}
/* 色澤差異備註/示意圖已改為統一在預覽窗(s-varnote)顯示；圖卡不再渲染 .s-cardnote/.s-cardimg */
/* 加入購物車前閱讀須知 */
.strails-cfg .s-notice{margin:14px 0;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:12px 14px;}/* 加入購物車前注意事項：黑底白字（其餘注意事項框為 #9c9ca0） */
.strails-cfg .s-notice-h{font-size:.82em;font-weight:600;margin-bottom:6px;color:#fff;}
.strails-cfg .s-notice-d{font-size:.74em;color:#fff;line-height:1.7;margin:0 0 8px;}
.strails-cfg .s-notice-list{margin:0;padding-left:18px;}
.strails-cfg .s-notice-list li{font-size:.74em;color:#fff;line-height:1.7;margin-bottom:4px;}

/* 測驗版 DISCOVER */
.strails-cfg .s-quiz{max-width:560px;margin:0 auto;padding:16px 4px;}
.strails-cfg .s-q-title{font-size:1.08em;letter-spacing:.03em;text-align:center;margin:8px 0 4px;}/* 測驗首頁標題縮小 */
.strails-cfg .s-q-sub{font-size:.78em;color:var(--muted);text-align:center;margin-bottom:20px;}/* 英文副標縮小 */
.strails-cfg .s-qdirs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:560px){.strails-cfg .s-qdirs{grid-template-columns:1fr;}}
.strails-cfg .s-qdir{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;background:#fff;border:1px solid #8a8a8a;padding:16px 18px;transition:.15s;}
.strails-cfg .s-qdir:hover{border-color:var(--ink);}
.strails-cfg .s-qdir-en{font-size:.72em;letter-spacing:.2em;color:var(--ink);}
.strails-cfg .s-qdir-zh{font-size:1.02em;font-weight:600;}
.strails-cfg .s-q-step{font-size:.76em;letter-spacing:.1em;color:var(--muted);text-align:center;margin-top:22px;margin-bottom:10px;}/* 進度顯示與上方選項按鈕拉開間距 */
.strails-cfg .s-q-q{font-size:1.1em;font-weight:600;text-align:center;margin-bottom:32px;line-height:1.5;}/* 問題標題與下方選項按鈕拉開間距 */
.strails-cfg .s-qopts{display:flex;flex-direction:column;gap:10px;align-items:center;}/* 置中，讓選項按鈕不滿版 */
.strails-cfg .s-qopt{background:#fff;border:1px solid #8a8a8a;padding:15px 18px;font-size:.95em;text-align:center;transition:.12s;width:100%;max-width:360px;}/* 收窄＋置中，避免過長 */
.strails-cfg .s-qopt:hover{border-color:#11131c;}
.strails-cfg .s-q-back2{display:block;margin:18px auto 0;background:var(--ink);border:1px solid var(--ink);color:#fff;font-size:.84em;padding:6px 14px;}/* 換個方向：黑底白字 */
/* 結果 */
.strails-cfg .s-qresult{text-align:center;}
.strails-cfg .s-q-trail{font-size:.72em;letter-spacing:.3em;color:var(--muted);margin-top:8px;}
.strails-cfg .s-q-concept{font-size:1.5em;font-weight:700;letter-spacing:.03em;margin:6px 0 16px;}
.strails-cfg .s-q-stone{display:flex;flex-direction:column;align-items:center;gap:8px;margin:12px 0;}
.strails-cfg .s-q-stone .s-thumb{flex:none;width:72px;height:72px;}
.strails-cfg .s-q-stone-n{font-size:1.05em;font-weight:600;}
/* 新版結果圖卡：正方形圖框＝水晶圓圖(底) + 設計PNG疊層(中) + ST編號(上) */
.strails-cfg .s-q-fig{position:relative;width:58%;max-width:200px;margin:6px auto 10px;}/* 整體縮小(測驗結果水晶圖再小一點) */
.strails-cfg .s-q-fig::before{content:"";display:block;padding-top:100%;}/* 正方形(相容舊 WKWebView，不用 aspect-ratio) */
.strails-cfg .s-q-fig-crystal{position:absolute;left:12.4%;top:14.7%;width:73.2%;height:73.2%;border-radius:50%;background-size:cover;background-position:center;}/* 對齊 PNG 透明圓圈(設計稿 cx49%/cy51.3%/直徑73.2%) */
.strails-cfg .s-q-fig-empty{background:repeating-linear-gradient(45deg,#f4f2ef,#f4f2ef 8px,#eeece8 8px,#eeece8 16px);}
.strails-cfg .s-q-fig-overlay{position:absolute;inset:0;background:url(../img/quiz-overlay.png) center/contain no-repeat;pointer-events:none;}
.strails-cfg .s-q-fig .s-q-code{position:absolute;left:5%;top:6.5%;margin:0;z-index:2;font-size:1.35em;font-weight:700;letter-spacing:.06em;color:var(--ink);}/* 左對齊下方成分文字(實測左緣 5.04%)、字加大 */
.strails-cfg .s-q-cnote{font-size:.72em;color:var(--ink);margin-bottom:6px;}
.strails-cfg .s-q-en{font-size:.95em;font-style:italic;color:var(--ink);margin:14px auto 4px;max-width:420px;line-height:1.6;}
.strails-cfg .s-q-zh{font-size:.9em;color:var(--muted);margin:0 auto 20px;max-width:420px;line-height:1.7;}
.strails-cfg .s-qresult .s-next{max-width:320px;margin:12px auto 0;}/* 上邊距＝與上方「重新測驗」鈕留間距(不黏在一起) */
.strails-cfg .s-qresult .s-linkbtn{display:block;margin:10px auto 0;}

/* 右側預覽（僅環＋摘要） */
.strails-cfg .s-pv-hint{font-size:.78em;color:var(--muted);text-align:left;margin:8px 0;}
.strails-cfg .s-pv-hint b{color:var(--ink);}
.strails-cfg .s-pv-count{font-size:.72em;color:var(--ink);font-weight:600;margin:10px 0 4px;text-align:left;}

/* 手圍測量彈窗 */
.strails-cfg .s-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.strails-cfg .s-modal{background:#fff;max-width:720px;width:100%;max-height:86vh;overflow:auto;border:1px solid #11131c;}
.strails-cfg .s-wrist-input{display:block;width:100%;max-width:220px;padding:10px 12px;border:1px solid var(--line);font-size:16px;background:#fff;color:var(--ink);}/* display:block＝輸入框獨立一行，與上方測量鈕上下堆疊(不並排)；font-size 固定 16px＝防 iOS/LINE 聚焦時自動放大頁面(auto-zoom)導致內容超出螢幕 */
.strails-cfg .s-wrist-input:focus{outline:none;border-color:var(--ink);}
/* 框內提示字(placeholder)縮小到約7pt；輸入框本身仍 16px 以保留 iOS/LINE 防自動放大 */
.strails-cfg .s-wrist-input::placeholder{font-size:7pt;}
.strails-cfg .s-input-note{font-size:.74em;color:var(--ink);margin-top:5px;}
.strails-cfg .s-modal-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#11131c;color:#fff;border-bottom:1px solid #11131c;font-weight:600;}
.strails-cfg .s-modal-x{background:none;border:none;font-size:1.1em;color:#fff;}
.strails-cfg .s-measure-ph{padding:36px 20px;text-align:center;font-size:.9em;line-height:1.9;background:repeating-linear-gradient(45deg,#faf9f7,#faf9f7 8px,#f3f1ee 8px,#f3f1ee 16px);}

/* ===== 按鈕互動狀態（置於檔末，統一覆蓋先前規則）=====
   預設：無外框（1px 透明邊框佔位，不位移）；hover：浮現黑色1px外框；選中(.on)：黑底白字＋黑框。 */
.strails-cfg .s-mode-card,.strails-cfg .s-clasp,.strails-cfg .s-cat,.strails-cfg .s-need,.strails-cfg .s-card,.strails-cfg .s-chip-btn,.strails-cfg .s-qdir,.strails-cfg .s-qopt,.strails-cfg .s-next,.strails-cfg .s-fillbtn,.strails-cfg .s-linkbtn,.strails-cfg .s-back,.strails-cfg .s-q-back2,.strails-cfg .s-chip{border-color:transparent;}
.strails-cfg .s-mode-card:hover,.strails-cfg .s-clasp:hover,.strails-cfg .s-cat:hover,.strails-cfg .s-need:hover,.strails-cfg .s-card:hover,.strails-cfg .s-chip-btn:hover,.strails-cfg .s-qdir:hover,.strails-cfg .s-qopt:hover,.strails-cfg .s-next:hover,.strails-cfg .s-fillbtn:hover,.strails-cfg .s-linkbtn:hover,.strails-cfg .s-back:hover,.strails-cfg .s-q-back2:hover,.strails-cfg .s-chip:hover{border-color:#11131c;box-shadow:none;}
.strails-cfg .s-cat.on,.strails-cfg .s-chip-btn.on,.strails-cfg .s-clasp.on,.strails-cfg .s-need.on,.strails-cfg .s-card.is-on,.strails-cfg .s-chip.s-main{border-color:var(--ink);}
/* :active 不另設樣式：按下時沿用 hover 的黑框，點擊完由選中態(.on)呈現黑底白字，不變粗、不加白框 */

/* 手機／平板：字級縮小、更精緻緊湊（參考 MONTAGN）。用 px＝不受網站主題根字級放大影響。整體再 −1px；副標比各自主標約小 0.5px */
@media(max-width:820px){
	.strails-cfg{font-size:14px;}
	.strails-cfg .s-title{font-size:17px;}
	.strails-cfg .s-q-title{font-size:14px;}
	.strails-cfg .s-q-concept{font-size:19px;}
	.strails-cfg .s-mode-card .s-h{font-size:12.5px;}
	.strails-cfg .s-step-h{font-size:14px;}
	.strails-cfg .s-block-h{font-size:13px;}
	.strails-cfg .s-clasp-n{font-size:13px;}
	.strails-cfg .s-name{font-size:11px;}
	.strails-cfg .s-name-st{font-size:9px;}/* 手機窄卡：主標與 ST 都縮小，確保名稱＋ST 同一行並排 */
	.strails-cfg .s-qdir-zh{font-size:13px;}
	.strails-cfg .s-field-h{font-size:11.5px;}
	.strails-cfg .s-clasp-t,.strails-cfg .s-need .s-p{font-size:12.5px;}   /* 主標 13 → 副標 12.5 */
	.strails-cfg .s-mode-card .s-p{font-size:10.5px;}                     /* 手機副標再小1pt */
	/* 手機版總價縮小，與環中心珠徑/鍊寬資訊相當 */
	.strails-cfg .s-pv-total{font-size:11px;}
	.strails-cfg .s-pv-total b{font-size:12px;}
	.strails-cfg .s-pv-total-note{font-size:10px;}
	.strails-cfg .s-modes-intro{font-size:11.5px;}                        /* 手機維持原大小(電腦版才放大) */
	.strails-cfg .s-desc{font-size:11.5px;}                                 /* 主標 12 → 副標 11.5 */
	.strails-cfg .s-cat,.strails-cfg .s-chip-btn,.strails-cfg .s-qopt,.strails-cfg .s-clasp,.strails-cfg .s-back,.strails-cfg .s-next,.strails-cfg .s-fillbtn{font-size:12px;}
	.strails-cfg .s-step-sub,.strails-cfg .s-hint,.strails-cfg .s-caption,.strails-cfg .s-input-note{font-size:11px;}
}

/* 手機/平板預覽：點選第一顆水晶才跳出（.s-picks）、內容完整顯示(不裁切)、可收合(收合鈕 .s-pv-toggle) */
@media(max-width:820px){
	.strails-cfg .s-preview{display:none;max-height:none;overflow:visible;}
	.strails-cfg .s-layout.s-picks .s-preview{display:block;}
	.strails-cfg .s-pv-toggle{display:inline-block;}
	.strails-cfg .s-pv-collapsed .s-pv-stage,.strails-cfg .s-pv-collapsed .s-fillbtn,.strails-cfg .s-pv-collapsed .s-pv-hint,.strails-cfg .s-pv-collapsed .s-varnote{display:none;}/* 收合：只顯示到「已選水晶」(計數+chip)；預覽畫面/填滿鈕/放置說明/差異示意都藏 */
}

/* (原手機圖卡差異備註顯示規則已移除：色澤差異改由預覽窗 s-varnote 呈現) */

/* ── 導引教學（聚光罩）────────────────────────────── */
/* 教學進行時：解除預覽區的裁切與 sticky 釘住，讓聚光目標能捲進視窗（預覽比視窗高時下半部原本會在摺線下） */
.strails-cfg.s-tut-on .s-preview{overflow:visible!important;max-height:none!important;position:static!important;}
/* 聚光：目標元素高亮浮起，四周以超大陰影反黑 */
.strails-cfg .s-tut-spot{position:relative;z-index:10000;border-radius:6px;box-shadow:0 0 0 4px #fff,0 0 0 9999px rgba(0,0,0,.62);}
/* 提示框（fixed，JS 定位）：掛在 document.body、不加 .strails-cfg 範圍，
   以避開 .strails-cfg 的 zoom(1.2/1.3) 對 fixed 元素座標/尺寸的縮放（否則提示會飄出視窗）。color 改寫死值(body 無 --ink)。 */
.s-tut-tip{position:fixed;z-index:100002;box-sizing:border-box;max-width:340px;background:#fff;border:1px solid #11131c;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:12px 14px;border-radius:4px;font-size:.9em;color:#11131c;font-family:inherit;}
.s-tut-text{line-height:1.65;}
.s-tut-actions{margin-top:10px;display:flex;gap:10px;align-items:center;justify-content:flex-end;}
.s-tut-next{background:#11131c;color:#fff;border:1px solid #11131c;padding:7px 18px;font-size:.9em;cursor:pointer;}
/* 桌面提示框未受 .strails-cfg 的 zoom 放大→在此手動放大字級/按鈕，與放大後的 UI 視覺一致 */
@media(min-width:1280px){.s-tut-tip{font-size:1.05em;padding:14px 16px;}.s-tut-next{font-size:1.02em;padding:8px 20px;}}
@media(min-width:1400px){.s-tut-tip{font-size:1.14em;}.s-tut-next{font-size:1.1em;}}