Size Guide

FIT: OVERSIZED FIT

IN CM

description:

- SATIN LINED
- OVERSIZED FIT
- OPEN CUFFS AND HEM
- #8 SILVER METAL ZIP
- EMBROIDERED LOGO ON THE BACK NECK

MODEL SIZE: MODEL WEARS A SIZE L

Size	Shoulder	Chest	Sleeve	Back
S	20	23.5	24	26
M	20.5	24	24.5	26
L	21	25	25	28
XL	21.5	27	25.5	29
XXL	22	28	26	30

Size	Shoulder	Chest	Sleeve	Back
S	50.8	59.69	60.96	66.04
M	50.8	60.96	62.23	68.58
L	53.34	63.5	63.5	71.12
XL	54.61	68.58	64.77	73.66
XXL	56.44	69.24	66.01	74.34

<style>
/* Size guide button (optional trigger) */
.size-guide-btn {
  background-color: black;
  color: white;
  border: none;
  paddi

Size Guide

FIT: OVERSIZED FIT

IN CM

description:

- SATIN LINED
- OVERSIZED FIT
- OPEN CUFFS AND HEM
- #8 SILVER METAL ZIP
- EMBROIDERED LOGO ON THE BACK NECK

MODEL SIZE: MODEL WEARS A SIZE L

Size	Shoulder	Chest	Sleeve	Back
S	20	23.5	24	26
M	20.5	24	24.5	26
L	21	25	25	28
XL	21.5	27	25.5	29
XXL	22	28	26	30

Size	Shoulder	Chest	Sleeve	Back
S	50.8	59.69	60.96	66.04
M	50.8	60.96	62.23	68.58
L	53.34	63.5	63.5	71.12
XL	54.61	68.58	64.77	73.66
XXL	56.44	69.24	66.01	74.34

/* Container + title */
.size-guide-content {
  max-width: 550px;
  margin: 0 auto;
  padding: 50px 15px;
  font-family: Helvetica, Arial, sans-serif;
}

.size-guide-content h3 {
  color: var(--Foundations-Base-Black, #000);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.13px;
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

/* Close icon (if you need it) */
.close-size-guide {
  font-size: 0;
  cursor: pointer;
  float: right;
  display: none; /* set to block if you want visible */
}

/* Image */
.size-guide-content .image_wrapper {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.size-guide-content .image_wrapper img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Fit + toggle row */
.fit_size_toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 16px;
}

.left_side_container h4 {
  color: var(--Foundations-Base-Black, #000);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0.11px;
  margin: 0;
  text-transform: uppercase;
}

.right_side_toggle {
  display: flex;
  align-items: center;
  gap: 7px;
}

.right_side_toggle span {
  color: var(--Foundations-Base-Black, #000);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  line-height: 13px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

.right_side_toggle .label-active {
  font-weight: 700;
}

/* Toggle pill – stack SVGs */
.right_side_toggle span.in_cm {
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  position: relative;
  width: 29px;
  height: 15px;
  display: inline-block;
}

.right_side_toggle span.in_cm svg {
  position: absolute;
  inset: 0;
}

/* both hidden by default */
.in_to_cm,
.cm_to_in {
  display: none;
}

/* only active one is visible */
.in_to_cm.is-active,
.cm_to_in.is-active {
  display: block;
}

/* Description */
.size-guide-description h4 {
  color: var(--Foundations-Base-Black, #000);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: 0.11px;
  text-transform: uppercase;
  margin: 0 0 6px 0;
  text-align: left; /* ALIGNED LEFT */
}

.details_desc,
.details_desc p {
  color: var(--Foundations-Base-Black, #000);
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px; /* 170% */
  letter-spacing: 0.1px;
  margin: 0;
  text-transform: uppercase;
  text-align: left; /* ALIGNED LEFT */
}

/* Center the whole description block */
.size-guide-description {
  text-align: left; /* ALIGNED LEFT */
}

/* Model details (if reused elsewhere) */
.model_details h4 {
  color: var(--Foundations-Base-Black, #000);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0.11px;
  text-align: left; /* ALIGNED LEFT */
}

/* Tables */
.size-guide-details {
  margin-top: 20px;
}

.size-guide-details-cm {
  display: none; /* IN is default */
}

.size-table {
  width: 100%;
  border-collapse: collapse;
}

.size-table th {
  background-color: #000000;
  color: var(--Foundations-Base-White, #FFF);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.1px;
  border: none;
  padding: 10px 15px;
  text-align: center;
}

.size-table td {
  border: 1px solid #ddd;
  color: var(--Foundations-Base-Black, #000);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 11px;
  letter-spacing: 0.1px;
  height: 35px;
  padding: 0 15px;
  text-align: center;
}

.size-table tr td:first-child {
  text-align: left;
}

body.size-chart-active {
  overflow: hidden;
}

@media screen and (max-width: 750px) {
  .size-guide-content {
    padding: 36px 15px;
  }
}
</style>

<div class="size-guide-content">
  <span class="close-size-guide" id="close-size-guide">
    <svg fill="none" viewbox="0 0 17 17" height="17" width="17" xmlns="http://www.w3.org/2000/svg">
      <rect fill="black" transform="matrix(0.707105 -0.707108 0.707105 0.707108 0 15.7856)" height="1.71725" width="22.3242"></rect>
      <rect fill="black" transform="matrix(-0.707105 -0.707108 -0.707105 0.707108 17 15.7856)" height="1.71725" width="22.3242"></rect>
    </svg>
  </span>

  <h3>Size Guide</h3>

  <div class="image_wrapper">
    <img src="https://cdn.shopify.com/s/files/1/0356/1943/8727/files/SIZE_GUIDE_RIDER_JACKET.png?v=1729678448" alt="Product size guide">
  </div>

  <div class="fit_size_toggle">
    <div class="left_side_container">
      <h4>
        <b>FIT:</b> OVERSIZED FIT</h4>
      <p> </p>
    </div>

    <div class="right_side_toggle">
      <span class="label-in label-active">IN</span>

      <span class="in_cm">
        <svg class="in_to_cm is-active" fill="none" viewbox="0 0 29 15" height="15" width="29" xmlns="http://www.w3.org/2000/svg">
          <rect fill="#D9D9D9" rx="7.5" height="15" width="29"></rect>
          <circle fill="black" r="6.5" cy="7.5" cx="7.5"></circle>
        </svg>
        <svg class="cm_to_in" xmlns="http://www.w3.org/2000/svg" width="29" height="15" viewbox="0 0 29 15" fill="none">
          <rect width="29" height="15" rx="7.5" fill="#D9D9D9"></rect>
          <circle cx="22.5" cy="7.5" r="6.5" fill="black"></circle>
        </svg>
      </span>

      <span class="label-cm">CM</span>
    </div>
  </div>

  <div class="size-guide-description">
    <h4>description:</h4>
    <div class="details_desc">
      <span style="color: var(--foundations-base-black, #000); letter-spacing: 0.1px;"> - SATIN LINED</span><br>
      <span style="color: var(--foundations-base-black, #000); letter-spacing: 0.1px;"> - OVERSIZED FIT</span><br>
      <span style="color: var(--foundations-base-black, #000); letter-spacing: 0.1px;"> - OPEN CUFFS AND HEM</span><br>
      <span style="color: var(--foundations-base-black, #000); letter-spacing: 0.1px;"> - #8 SILVER METAL ZIP</span><br>
      <span style="color: var(--foundations-base-black, #000); letter-spacing: 0.1px;"> - EMBROIDERED LOGO ON THE BACK NECK</span><br>
      <ul></ul>
      <ul></ul>
      <ul></ul>
      <p>
        <b style="color: var(--foundations-base-black, #000); font-size: 11px; letter-spacing: 0.11px;">MODEL SIZE:</b>
        <span style="color: var(--foundations-base-black, #000); font-size: 11px; letter-spacing: 0.11px;"> MODEL WEARS A SIZE L</span>
      </p>
    </div>
  </div>

  <div class="size-guide-details size-guide-details-in">
    <table class="size-table">
      <thead>
        <tr>
          <th style="width: 59.4479px;">Size</th>
          <th style="width: 94.75px;">Shoulder</th>
          <th style="width: 69.7292px;">Chest</th>
          <th style="width: 77.75px;">Sleeve</th>
          <th style="width: 62.9896px;">Back</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 59.1146px;">S</td>
          <td class="size_value" style="width: 94.0833px;">20</td>
          <td class="size_value" style="width: 69.0625px;">23.5</td>
          <td class="size_value" style="width: 77.0833px;">
            <p>24</p>
          </td>
          <td class="size_value" style="width: 62.6562px;">26</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">M</td>
          <td class="size_value" style="width: 94.0833px;">20.5</td>
          <td class="size_value" style="width: 69.0625px;">24</td>
          <td class="size_value" style="width: 77.0833px;">24.5</td>
          <td class="size_value" style="width: 62.6562px;">26</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">L</td>
          <td class="size_value" style="width: 94.0833px;">21</td>
          <td class="size_value" style="width: 69.0625px;">25</td>
          <td class="size_value" style="width: 77.0833px;">25</td>
          <td class="size_value" style="width: 62.6562px;">28</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">XL</td>
          <td class="size_value" style="width: 94.0833px;">21.5</td>
          <td class="size_value" style="width: 69.0625px;">27</td>
          <td class="size_value" style="width: 77.0833px;">25.5</td>
          <td class="size_value" style="width: 62.6562px;">29</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">XXL</td>
          <td class="size_value" style="width: 94.0833px;">22</td>
          <td class="size_value" style="width: 69.0625px;">28</td>
          <td class="size_value" style="width: 77.0833px;">26</td>
          <td class="size_value" style="width: 62.6562px;">30</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="size-guide-details size-guide-details-cm">
    <table class="size-table">
      <thead>
        <tr>
          <th style="width: 59.4479px;">Size</th>
          <th style="width: 94.75px;">Shoulder</th>
          <th style="width: 69.7292px;">Chest</th>
          <th style="width: 77.75px;">Sleeve</th>
          <th style="width: 62.9896px;">Back</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 59.1146px;">S</td>
          <td class="size_value" style="width: 94.0833px;">50.8</td>
          <td class="size_value" style="width: 69.0625px;">59.69</td>
          <td class="size_value" style="width: 77.0833px;">60.96</td>
          <td class="size_value" style="width: 62.6562px;">66.04</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">M</td>
          <td class="size_value" style="width: 94.0833px;">50.8</td>
          <td class="size_value" style="width: 69.0625px;">60.96</td>
          <td class="size_value" style="width: 77.0833px;">62.23</td>
          <td class="size_value" style="width: 62.6562px;">68.58</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">L</td>
          <td class="size_value" style="width: 94.0833px;">53.34</td>
          <td class="size_value" style="width: 69.0625px;">63.5</td>
          <td class="size_value" style="width: 77.0833px;">63.5</td>
          <td class="size_value" style="width: 62.6562px;">71.12</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">XL</td>
          <td class="size_value" style="width: 94.0833px;">54.61</td>
          <td class="size_value" style="width: 69.0625px;">68.58</td>
          <td class="size_value" style="width: 77.0833px;">64.77</td>
          <td class="size_value" style="width: 62.6562px;">73.66</td>
        </tr>
        <tr>
          <td style="width: 59.1146px;">XXL</td>
          <td class="size_value" style="width: 94.0833px;">56.44</td>
          <td class="size_value" style="width: 69.0625px;">69.24</td>
          <td class="size_value" style="width: 77.0833px;">66.01</td>
          <td class="size_value" style="width: 62.6562px;">74.34</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var toggle = document.querySelector(".right_side_toggle span.in_cm");
  if (!toggle) return;

  var inTable = document.querySelector(".size-guide-details-in");
  var cmTable = document.querySelector(".size-guide-details-cm");
  var inSvg   = document.querySelector(".in_to_cm");
  var cmSvg   = document.querySelector(".cm_to_in");

  // Robustly select the 'IN' and 'CM' labels by their position
  // Note: These elements must exist in the HTML for this to work correctly.
  var labels = document.querySelectorAll(".right_side_toggle span");
  var inLabel = labels[0];
  var cmLabel = labels[2]; 
  
  // Ensure the labels have the correct classes for CSS/JS logic
  if (inLabel) inLabel.classList.add('label-in');
  if (cmLabel) cmLabel.classList.add('label-cm');

  var showingIn = true; // IN is default

  // Ensure initial state is correctly set up
  if (inTable) inTable.style.display = "block";
  if (cmTable) cmTable.style.display = "none";
  
  // Ensure the SVG states match the default: IN is active
  if (inSvg) inSvg.classList.add("is-active");
  if (cmSvg) {
    cmSvg.classList.remove("is-active");
    cmSvg.classList.remove('hide_it'); // Removing legacy class from input HTML
  }

  // Ensure the Label states match the default: IN is active (bolded)
  if (inLabel) {
    inLabel.classList.add("label-active");
  }
  if (cmLabel) {
    cmLabel.classList.remove("label-active");
  }

  toggle.addEventListener("click", function () {
    showingIn = !showingIn; // Flip the state

    if (showingIn) {
      // Show IN (Inches)
      inTable.style.display = "block";
      cmTable.style.display = "none";

      inSvg.classList.add("is-active");
      cmSvg.classList.remove("is-active");

      inLabel.classList.add("label-active");
      cmLabel.classList.remove("label-active");
    } else {
      // Show CM (Centimeters)
      inTable.style.display = "none";
      cmTable.style.display = "block";

      inSvg.classList.remove("is-active");
      cmSvg.classList.add("is-active");

      inLabel.classList.remove("label-active");
      cmLabel.classList.add("label-active");
    }
  });
});
</script>