<style>
.size-chart-container {
  max-width: 100%;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #222;
}
.unit-toggle {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
}
.unit-toggle span {
  padding: 0 12px;
  cursor: pointer;
  color: #b8b8c2;
}
.unit-toggle .active-unit {
  color: #9e8b8e;
  font-weight: 500;
}
.size-table-wrapper {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  overflow-x: auto;
}
.size-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background:#fff;
}
.size-table th,
.size-table td {
  padding: 16px 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}
.size-table th {
  background-color: #ffffff;
  font-weight: 600;
}
.size-table td:first-child {
  font-weight: 600;
  font-size: 17px;
}
.region-select {
  border: 1px solid #ddd;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  background: #fff;
}
.size-notice {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  color:#555;
}
.measure-guide {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  text-align: center;
}
.measure-guide h4 {
  margin: 0 0 12px;
  font-size: 16px;
}
.measure-guide img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}
</style>

<div class="size-chart-container">
  <!-- 单位切换 -->
  <div class="unit-toggle">
    <span class="active-unit" id="cmBtn">CENTIMETERS</span>
    <span>|</span>
    <span id="inchBtn">INCHES</span>
  </div>

  <!-- 厘米表格 默认显示 -->
  <div id="cmBox" class="size-table-wrapper">
    <table class="size-table">
      <thead>
        <tr>
          <th>Brand Size</th>
          <th>
            <select class="region-select">
              <option value="US" selected>US</option>
              <option value="CA">CA</option>
              <option value="UK">UK</option>
              <option value="EU">EU</option>
            </select>
          </th>
          <th>Bust (cm)</th>
          <th>Waist (cm)</th>
          <th>Hip (cm)</th>
          <th>Length (cm)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>S</td>
          <td data-sizekey="S">4-6</td>
          <td>85</td>
          <td>66</td>
          <td>93</td>
          <td>145</td>
        </tr>
        <tr>
          <td>M</td>
          <td data-sizekey="M">8-10</td>
          <td>90</td>
          <td>71</td>
          <td>98</td>
          <td>146</td>
        </tr>
        <tr>
          <td>L</td>
          <td data-sizekey="L">12-14</td>
          <td>95</td>
          <td>76</td>
          <td>103</td>
          <td>147</td>
        </tr>
        <tr>
          <td>XL</td>
          <td data-sizekey="XL">16-18</td>
          <td>100</td>
          <td>82</td>
          <td>108</td>
          <td>148</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 英寸表格 默认隐藏 -->
  <div id="inchBox" class="size-table-wrapper" style="display: none;">
    <table class="size-table">
      <thead>
        <tr>
          <th>Brand Size</th>
          <th>
            <select class="region-select">
              <option value="US" selected>US</option>
              <option value="CA">CA</option>
              <option value="UK">UK</option>
              <option value="EU">EU</option>
            </select>
          </th>
          <th>Bust (in)</th>
          <th>Waist (in)</th>
          <th>Hip (in)</th>
          <th>Length (in)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>S</td>
          <td data-sizekey="S">4-6</td>
          <td>33.5</td>
          <td>26.0</td>
          <td>36.6</td>
          <td>57.1</td>
        </tr>
        <tr>
          <td>M</td>
          <td data-sizekey="M">8-10</td>
          <td>35.4</td>
          <td>28.0</td>
          <td>38.6</td>
          <td>57.5</td>
        </tr>
        <tr>
          <td>L</td>
          <td data-sizekey="L">12-14</td>
          <td>37.4</td>
          <td>29.9</td>
          <td>40.6</td>
          <td>57.9</td>
        </tr>
        <tr>
          <td>XL</td>
          <td data-sizekey="XL">16-18</td>
          <td>39.4</td>
          <td>32.3</td>
          <td>42.5</td>
          <td>58.3</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 尺码误差提示 -->
  <div class="size-notice">
    Measurements are taken manually and may vary by 1–2 cm. Please check the size chart carefully before ordering.<br>
    1 inch = 2.54 centimeters
  </div>

  <!-- 身体测量指引区域 -->
  <div class="measure-guide">
    <h4>How To Measure Yourself</h4>
    <img src="https://cdn.shopify.com/s/files/1/0805/5678/5909/files/Size_Guide_j.png?v=1780900288" alt="Measurement Guide">
  </div>
</div>

<script>
// 厘米/英寸切换逻辑
const cmBtn = document.getElementById('cmBtn');
const inchBtn = document.getElementById('inchBtn');
const cmBox = document.getElementById('cmBox');
const inchBox = document.getElementById('inchBox');

cmBtn.onclick = () => {
  cmBtn.classList.add('active-unit');
  inchBtn.classList.remove('active-unit');
  cmBox.style.display = 'block';
  inchBox.style.display = 'none';
};
inchBtn.onclick = () => {
  inchBtn.classList.add('active-unit');
  cmBtn.classList.remove('active-unit');
  inchBox.style.display = 'block';
  cmBox.style.display = 'none';
};

// 多国尺码换算映射
const sizeMap = {
  S:  { US: "4-6",  CA: "4-6",  UK: "8-10",  EU: "34-36" },
  M:  { US: "8-10", CA: "8-10", UK: "12-14", EU: "38-40" },
  L:  { US: "12-14",CA: "12-14",UK: "16-18", EU: "42-44" },
  XL: { US: "16-18",CA: "16-18",UK: "20-22", EU: "46-48" }
};

const allSelect = document.querySelectorAll('.region-select');
// 同步更新两张表格尺码列
function updateSize(area) {
  document.querySelectorAll('td[data-sizekey]').forEach(cell => {
    let key = cell.getAttribute('data-sizekey');
    cell.textContent = sizeMap[key][area];
  })
}
// 下拉选择联动
allSelect.forEach(sel => {
  sel.addEventListener('change', e => {
    let val = e.target.value;
    allSelect.forEach(s => s.value = val);
    updateSize(val);
  })
})
</script>