#tw-size{
  overflow-x:hidden;          /* 任何一塊內容都不該把整個區塊撐出螢幕 */
  /* 色票沿用官網舊版尺寸機器人：米黃卡片、深棕字、白色輸入框 */
  --ink:#2b2623; --sub:#6f655d; --line:#e2d8cf; --paper:#fff;
  --card:#f4efe9; --accent:#2c231d; --soft:#ede8e2; --ok:#5c8d89;
  max-width:1100px; margin:0 auto;
  font-family:Arial,'Noto Sans TC',sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.6;
}
#tw-size *{box-sizing:border-box}

#tw-size .tws-head{text-align:center; margin-bottom:20px}
#tw-size .tws-eyebrow{
  font-size:11px; letter-spacing:.22em; color:var(--accent);
  font-weight:700; margin-bottom:10px;
}
#tw-size .tws-head h2{margin:0 0 6px; font-size:23px; font-weight:800; letter-spacing:-.01em}
#tw-size .tws-head p{margin:0; font-size:13.5px; color:var(--sub)}

#tw-size .tws-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
/* 兩欄等高會讓左邊卡片下方留一大片空白，讓每張卡各自貼齊內容高度 */
#tw-size .tws-grid > *{align-self:start}
/* 格線子項的最小寬度預設是「內容多寬就多寬」，
   所以結果卡片裡的表格與量測圖一出現，整張卡就被撐到超出螢幕。
   明確讓它可以收縮，內容再寬也只在自己那一塊處理。 */
#tw-size .tws-grid > *{min-width:0; max-width:100% }
#tw-size .tws-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; overflow:hidden}
#tw-size .tws-card{transition:.2s}
#tw-size .tws-card:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.06)}
#tw-size .tws-sec{margin-bottom:16px}
#tw-size .tws-pick3{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
#tw-size .tws-pick3 > div, #tw-size .tws-row > div{min-width:0}
#tw-size select, #tw-size input{max-width:100% }
#tw-size .tws-pick3 > div:last-child{grid-column:1 / -1}
#tw-size .tws-toggle{cursor:pointer; user-select:none}
#tw-size .tws-caret{margin-left:6px; font-size:11px; color:var(--sub); transition:transform .2s}
#tw-size .tws-caret.open{transform:rotate(180deg)}
#tw-size .tws-sec-h{
  display:flex; align-items:baseline; gap:8px;
  padding-bottom:9px; margin-bottom:13px; border-bottom:1px solid var(--line);
}
#tw-size .tws-sec-h b{font-size:14px; font-weight:800}
#tw-size .tws-tag{font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:99px}
#tw-size .tws-must{background:#f6e4dc; color:#9a4f2e}
#tw-size .tws-opt{background:#e2d8cf; color:var(--sub)}
#tw-size .tws-sec-h span.why{margin-left:auto; font-size:11px; color:var(--sub)}

#tw-size .tws-row{display:grid; grid-template-columns:1fr 1fr; gap:11px}
#tw-size .tws-row + .tws-row{margin-top:11px}
#tw-size .tws-f{margin-bottom:11px}
#tw-size label{
  display:block; font-size:13px; font-weight:700;
  color:#2f2a27; margin-bottom:6px; letter-spacing:0;
}
#tw-size select, #tw-size input{
  width:100%; height:36px; border:1px solid #ddd2c8; border-radius:8px;
  padding:0 10px; font-size:13px; background:#fff; color:var(--ink);
  font-family:inherit; appearance:none;
  transition:border-color .15s, background .15s;
}
#tw-size select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' stroke='%238d7d70' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}
#tw-size select:focus, #tw-size input:focus{outline:none; border-color:var(--accent); background:#fff}
#tw-size select:disabled{color:#bcb2a8; cursor:not-allowed}
/* 每個欄位自己的公分／英吋切換。有人下胸圍習慣用英吋（內衣的 32、34 就是英吋），
   腰圍臀圍卻用公分，所以做成各自獨立，不是全域一個開關。 */
#tw-size .tws-lbl{display:flex; align-items:center; gap:6px}
#tw-size .tws-unit{
  display:inline-flex; margin-left:auto; border:1px solid var(--line);
  border-radius:99px; overflow:hidden; background:var(--paper);
}
#tw-size .tws-unit b{
  font-size:10px; font-weight:700; padding:2px 7px; cursor:pointer;
  color:var(--sub); transition:.15s; user-select:none; line-height:1.5;
}
#tw-size .tws-unit b.on{background:var(--ink); color:#fff}
#tw-size .tws-picked{font-size:11.5px; color:var(--ok); margin:7px 0 0; font-weight:600}

#tw-size .tws-go{
  width:100%; height:40px; margin-top:14px; border:0; border-radius:999px;
  background:#2c231d; color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit; letter-spacing:.02em;
  transition:transform .12s, opacity .15s;
}
#tw-size .tws-go:hover{transform:translateY(-1px)}
#tw-size .tws-go:disabled{opacity:.45; cursor:wait; transform:none}

#tw-size .tws-prog{display:none; margin-top:15px}
#tw-size .tws-prog.on{display:block}
#tw-size .tws-bar{position:relative; height:6px; border-radius:99px; background:#ddd2c8; overflow:hidden}
#tw-size .tws-bar i{
  position:absolute; left:0; top:0; height:100%; width:0;
  border-radius:99px; background:linear-gradient(90deg,#a5825f,var(--accent));
  transition:width .4s ease;
}
#tw-size .tws-steps{display:flex; justify-content:space-between; margin-top:10px; font-size:10.5px; color:#bcb2a8}
#tw-size .tws-steps b{font-weight:600; transition:color .2s}
#tw-size .tws-steps b.on{color:var(--accent); font-weight:800}
#tw-size .tws-say{display:flex; align-items:center; gap:8px; margin-top:11px; font-size:12.5px; color:var(--sub)}
#tw-size .tws-sloth{font-size:19px; animation:twsway 1.5s ease-in-out infinite}
@keyframes twsway{
  0%{transform:rotate(-8deg)}
  50%{transform:rotate(8deg)}
  100%{transform:rotate(-8deg)}
}

#tw-size .tws-blank{color:var(--sub); font-size:13px; padding:6px 0 2px}
#tw-size .tws-blank-lead{
  font-size:15px; font-weight:700; color:var(--ink);
  margin:14px 0 12px; letter-spacing:.01em;
}
#tw-size .tws-blank-list{list-style:none; margin:0; padding:0}
#tw-size .tws-blank-list li{
  position:relative; padding-left:20px; margin-bottom:9px; line-height:1.7;
}
#tw-size .tws-blank-list li::before{
  content:''; position:absolute; left:4px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
#tw-size .tws-blank-list b{color:var(--ink); font-weight:700}
#tw-size .tws-narrow{display:none}
#tw-size .tws-blank-end{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--soft);
  font-size:12.5px; color:var(--sub);
}
#tw-size .tws-size{font-size:36px; font-weight:800; line-height:1; letter-spacing:-.03em; overflow-wrap:anywhere}
#tw-size .tws-alt{font-size:13px; color:var(--sub); margin-top:9px}
#tw-size .tws-fit{margin:22px 0 6px}
#tw-size .tws-track{position:relative; height:4px; background:#ddd2c8; border-radius:10px}
#tw-size .tws-knob{
  position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  background:#2c231d; transform:translate(-50%,-50%);
  transition:left .5s cubic-bezier(.4,1.3,.5,1);
}
#tw-size .tws-scale{display:flex; justify-content:space-between; font-size:11px; color:var(--sub); margin-top:9px}
#tw-size .tws-text{margin-top:10px; font-size:13px; line-height:1.6; overflow-wrap:anywhere}
#tw-size .tws-note{
  margin-top:11px; padding:11px 13px; background:#ede8e2;
  border-radius:11px; font-size:12.5px; line-height:1.75; color:#5a4c40;
}

#tw-size .tws-figwrap{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); overflow:hidden}
#tw-size .tws-figtitle{font-size:12px; font-weight:700; color:var(--sub); margin-bottom:10px}
#tw-size .tws-stage{position:relative; width:100%; max-width:290px; margin:0 auto; overflow:visible}
#tw-size .tws-stage svg{width:100%; height:auto; display:block}
#tw-size .tws-pins{position:absolute; inset:0; pointer-events:none}
#tw-size .tws-pin{
  position:absolute; transform:translate(-50%,-50%);
  background:#fff; border:2px solid; border-radius:11px;
  padding:3px 6px; text-align:center; white-space:nowrap;
  box-shadow:0 2px 7px rgba(0,0,0,.07);
}
#tw-size .tws-pin em{display:block; font-style:normal; font-size:10px; font-weight:800}
#tw-size .tws-pin i{display:block; font-style:normal; font-size:9.5px; color:var(--sub); margin-top:1px}

/* 標題列與資料列高度要一模一樣。
   光給相同 padding 還不夠——標題字 12px、資料字 13px，
   行高按比例算出來就差了一點多像素，看起來還是不齊。
   解法：行高直接寫死成固定像素，兩邊就完全相同。
   整體高度再收 15%（內距 9→6.5px、行高 17.6→16px）。 */
#tw-size .tws-tw{
  margin-top:18px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%;
}
#tw-size table{width:100%; border-collapse:collapse; font-size:13px; table-layout:auto}
/* Shopify 佈景主題自己也有一套表格樣式，而且常常帶 !important，
   會把這裡的對齊與內距蓋掉——所以這幾項要標記成不可覆寫。 */
#tw-size table th, #tw-size table td{
  padding:7px 12px !important; line-height:16px !important; height:30px !important;
  vertical-align:middle !important; white-space:nowrap !important;
  text-align:center !important; box-sizing:border-box;
}
#tw-size table th{
  font-size:12px !important; font-weight:700; color:var(--sub);
  border-bottom:1px solid var(--line); letter-spacing:.02em;
}
#tw-size table td{border-bottom:1px solid #e2d8cf; font-size:13px !important}
/* 「建議體重」在最後一欄，值最長（例如 51-56 KG），留足寬度不要折行。
   兩側都給同樣的內距，字才不會貼著邊界。 */
#tw-size table th:last-child, #tw-size table td:last-child{min-width:98px}
/* 建議罩杯可能有兩三組，讓它可以折行，不要把表格拉得很長 */
#tw-size table td.cup, #tw-size table th.cup{
  white-space:normal !important; min-width:104px; line-height:1.45 !important;
}
#tw-size table th:first-child, #tw-size table td:first-child{width:54px}
#tw-size tr.on td{background:#e2d8cf; font-weight:700}

@media (prefers-reduced-motion:reduce){
  #tw-size .tws-sloth{animation:none}
  #tw-size .tws-knob, #tw-size .tws-bar i{transition:none}
}
@media(max-width:560px){
  /* 這行說明在窄螢幕會把「三圍　選填」那一列擠到超出邊界 */
  #tw-size .tws-sec-h span.why{display:none}
  #tw-size .tws-unit b{padding:2px 6px}
}
@media(max-width:760px){
  #tw-size .tws-wide{display:none}
  #tw-size .tws-narrow{display:inline}
  #tw-size .tws-grid{grid-template-columns:1fr; gap:16px}
  #tw-size .tws-head h2{font-size:22px}
  #tw-size .tws-size{font-size:30px}
  #tw-size .tws-card{padding:14px}
}