/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:93 Expected identifier but found whitespace
Line 19:16 Expected ":"
Line 19:35 Unexpected "-"
Line 20:16 Expected ":"
Line 20:26 Unexpected "-"
Line 21:1 Expected identifier but found "%"
Line 23:0 Unexpected "{"
Line 23:1 Expected identifier but found "%"
... and 220 more hidden warnings

**/
{%- doc -%}
  Renders a default variant picker, used to display the variant picker in the variants block.

  @param {object} product_resource - The product object.
  @param {object} [block] - The block object
{%- enddoc -%}

{% assign block_settings = block.settings %}

{% unless product_resource.has_only_default_variant %}
  {% liquid
    assign button_background_brightness = section.settings.color_scheme.settings.foreground | color_brightness
    if button_background_brightness < 105
      assign strikethrough_color_mix = '#000'
    else
      assign strikethrough_color_mix = '#fff'
    endif
  %}
  <variant-picker
    class="variant-picker spacing-style variant-picker--{{ block_settings.alignment }}"
    style="--color-strikethrough-mix: {{ strikethrough_color_mix }}; {% render 'spacing-style', settings: block_settings %}"
    data-section-id="{{ section.id }}"
    data-product-id="{{ product_resource.id }}"
    data-block-id="{{ block.id }}"
    data-product-url="{{ product_resource.url }}"
    ref="mainVariantPicker"
    {% if product.id == product_resource.id %}
      data-template-product-match="true"
    {% endif %}
    {{ block.shopify_attributes }}
    {% if request.visual_preview_mode %}
      data-shopify-visual-preview
    {% endif %}
  >
    <form class="variant-picker__form">
      {%- assign soy_sg_dialog_image = '' -%}
      {%- assign soy_sg_dialog_url = '' -%}
      {%- assign soy_sg_dialog_label = '' -%}
      {%- assign soy_sg_dialog_id = 'soy-sg-dialog-' | append: section.id | append: '-' | append: block.id -%}
      {%- for product_option in product_resource.options_with_values -%}
        {%- assign option_name_lower = product_option.name | downcase | strip -%}
        {%- unless option_name_lower contains 'size' -%}
          {%- continue -%}
        {%- endunless -%}
        {%- liquid
          assign swatch_count = product_option.values | map: 'swatch' | compact | size
          assign variant_style = block_settings.variant_style

          if swatch_count > 0 and block_settings.show_swatches
            if block_settings.variant_style == 'dropdown'
              assign variant_style = 'swatch_dropdown'
            else
              assign variant_style = 'swatch'
            endif
          endif

          if variant_style == 'buttons' and settings.variant_button_width == 'equal-width-buttons'
            assign fieldset_id = section.id | append: '-' | append: product_resource.id | append: '-' | append: product_option.name | handleize
            assign option_id_attribute = 'data-option-id="' | append: fieldset_id | append: '"'
            assign longest_value = 0
          endif
        -%}

        {%- if product_option.values.size == 1 and variant_style != 'swatch' -%}
          <div
            class="variant-option"
            data-testid="variant-option-single"
          >
            {{- product_option.name | escape -}}
            <span
              class="variant-option__swatch-value"
              data-testid="variant-option-single-value"
            >
              {{- product_option.selected_value -}}
            </span>
          </div>
        {%- elsif variant_style == 'swatch' or block_settings.variant_style == 'buttons' -%}
          {%- assign fieldset_index = forloop.index0 -%}
          {% liquid
            assign size_guide_on = false
            if block != blank and block_settings.show_size_guide
              assign sg_url = block_settings.size_guide_url | strip
              assign sg_image_url_setting = block_settings.size_guide_image_url | strip
              assign sg_label = block_settings.size_guide_label | strip
              assign sg_opt = block_settings.size_guide_option | default: 'Size' | strip | downcase
              if sg_label != blank
                if sg_url != blank or sg_image_url_setting != blank
                  assign po_lower = product_option.name | strip | downcase
                  if po_lower == sg_opt
                    assign size_guide_on = true
                  endif
                endif
              endif
            endif
          %}
          <fieldset
            class="variant-option variant-option--buttons{% if variant_style == 'swatch' %} variant-option--swatches{% else %} variant-option--{{ settings.variant_button_width }}{% endif %}"
            data-fieldset-index="{{ fieldset_index }}"
            ref="fieldsets[]"
            {{ option_id_attribute }}
          >
            <legend class="variant-option__legend{% if size_guide_on %} variant-option__legend--with-size-guide{% endif %}">
              <span class="variant-option__legend-label">
                {{- product_option.name | escape -}}
                {%- if variant_style == 'swatch' -%}
                  <span class="variant-option__swatch-value">{{ product_option.selected_value }}</span>
                {%- endif -%}
              </span>
              {%- if size_guide_on -%}
                {%- assign sg_image_url = block_settings.size_guide_image_url | strip -%}
                {%- if sg_image_url == blank -%}
                  {%- assign sg_url_lower = sg_url | downcase -%}
                  {%- if sg_url_lower contains '.jpg' or sg_url_lower contains '.jpeg' or sg_url_lower contains '.png' or sg_url_lower contains '.webp' -%}
                    {%- assign sg_image_url = sg_url -%}
                  {%- endif -%}
                {%- endif -%}
                {%- if sg_image_url != blank -%}
                  {%- assign soy_sg_dialog_image = sg_image_url -%}
                  {%- assign soy_sg_dialog_label = sg_label -%}
                  <button
                    type="button"
                    class="variant-option__size-guide-link soy-pdp-size-guide-link soy-size-guide-trigger"
                    data-soy-sg-trigger="{{ soy_sg_dialog_id }}"
                    aria-haspopup="dialog"
                  >
                    {{- sg_label | escape -}}
                  </button>
                {%- elsif sg_url != blank -%}
                  <a
                    href="{{ sg_url }}"
                    class="variant-option__size-guide-link soy-pdp-size-guide-link"
                    rel="noopener"
                  >
                    {{- sg_label | escape -}}
                  </a>
                {%- endif -%}
              {%- endif -%}
            </legend>
            {%- for product_option_value in product_option.values -%}
              {% if product_option_value.size > longest_value and option_id_attribute %}
                {% assign longest_value = product_option_value.size %}
              {% endif %}
              <label
                class="variant-option__button-label{% if variant_style == 'swatch' %} variant-option__button-label--has-swatch{% endif %}"
              >
                <input
                  type="radio"
                  name="{{ product_option.name | escape }}-{{ block.id }}-{{ product_resource.id }}"
                  value="{{ product_option_value | escape }}"
                  aria-label="{{ product_option_value.name }}"
                  {% if product_option_value.available == false %}
                    aria-disabled="true"
                  {% endif %}
                  data-previous-checked="false"
                  data-fieldset-index="{{ fieldset_index }}"
                  data-input-index="{{ forloop.index0 }}"
                  data-input-id="{{ product_option.position }}-{{ forloop.index0 }}"
                  data-option-value-id="{{ product_option_value.id }}"
                  data-option-available="{{ product_option_value.available }}"
                  data-connected-product-url="{{ product_option_value.product_url }}"
                  {% if product_option_value.variant.id %}
                    data-variant-id="{{ product_option_value.variant.id }}"
                  {% endif %}
                  {% if product_option_value.selected %}
                    data-current-checked="true"
                    checked
                  {% else %}
                    data-current-checked="false"
                  {% endif %}
                >
                {% if variant_style == 'swatch' %}
                  {% liquid
                    assign featured_media = product_option_value.variant.featured_media

                    # If the variant has no featured media, and we have a combined listing product, then fall back to
                    # using the featured media of the child product that is linked to this option value.
                    if featured_media == blank and product_option_value.product_url
                      assign featured_media = product_option_value.variant.product.featured_media
                    endif
                  %}

                  {% render 'swatch',
                    swatch: product_option_value.swatch,
                    variant_image: featured_media,
                    mode: 'unscaled'
                  %}
                {% else %}
                  {% if product_option_value.available == true %}
                    <span
                      class="variant-option__button-label__pill"
                      data-key="variant-option-pill"
                    ></span>
                  {% endif %}
                  <span
                    class="variant-option__button-label__text"
                    data-key="variant-option-text"
                  >
                    {{- product_option_value | escape -}}
                  </span>
                {% endif %}
                {% render 'strikethrough-variant', product_option: product_option_value %}
              </label>
            {%- endfor -%}
            {% if option_id_attribute %}
              {% style %}
                [data-option-id="{{ fieldset_id }}"] {
                  --variant-ch: {{ longest_value | times: 0.65 }}em;
                }
              {% endstyle %}
            {% endif %}
          </fieldset>
        {%- elsif block_settings.variant_style == 'dropdowns' -%}
          {%
            # There is an opportunity to build a custom select component that will allow us to style the select element further (animation for dropdown, swatches shown in the dropdown options, etc)
            # It's too bad as it mean rebuilding baked in behaviours but I think we've already done that for the locale selectors
            # in dawn. So it might mean more time spent in setting it up but worth it for future updates/styling.
          %}
          {% liquid
            assign property_being_updated = false
            if settings.variant_swatch_width != settings.variant_swatch_height
              assign property_being_updated = true
              # (original width / original height) x new height (20px at the moment) = new width
              assign new_width = settings.variant_swatch_width | times: 1.0 | divided_by: settings.variant_swatch_height | times: 20
            endif
          %}

          <div class="variant-option variant-option--dropdowns">
            <label for="Option-{{ block.id }}-{{ forloop.index0 }}">{{ product_option.name | escape }}</label>
            <div
              class="variant-option__select-wrapper"
              style="
                {%- if property_being_updated  -%}
                  --variant-picker-swatch-width: clamp(10px,{{ new_width }}px, 50px);
                {%- endif -%}
              "
            >
              <select
                id="Option-{{ block.id }}-{{ forloop.index0 }}"
                name="options[{{ product_option.name | escape }}]"
                class="variant-option__select"
              >
                {%- for product_option_value in product_option.values -%}
                  <option
                    value="{{ product_option_value | escape }}"
                    data-input-id="{{ product_option.position }}-{{ forloop.index0 }}"
                    data-option-value-id="{{ product_option_value.id }}"
                    data-variant-id="{{ product_option_value.variant.id }}"
                    data-connected-product-url="{{ product_option_value.product_url }}"
                    {% if product_option_value.selected %}
                      selected="selected"
                    {% endif %}
                  >
                    {% if product_option_value.available == false %}
                      {{ product_option_value | escape }} - {{ 'content.unavailable' | t }}
                    {% else %}
                      {{ product_option_value | escape }}
                    {% endif %}
                  </option>
                {%- endfor -%}
              </select>
              <svg
                aria-hidden="true"
                focusable="false"
                class="icon icon-caret"
                viewBox="0 0 10 6"
              >
                {%- render 'icon', icon: 'caret' -%}
              </svg>
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}

      <script type="application/json">
        {{ product_resource.selected_or_first_available_variant | json }}
      </script>
    </form>
    {%- if soy_sg_dialog_image != blank -%}
      <dialog
        id="{{ soy_sg_dialog_id }}"
        class="soy-size-guide-dialog"
        aria-label="{{ soy_sg_dialog_label | escape }}"
      >
        <div class="soy-size-guide-dialog__body">

  <button
    type="button"
    class="soy-size-guide-dialog__close"
    data-soy-sg-close
    aria-label="{{ 'accessibility.close_dialog' | t }}"
  >
    &times;
  </button>

    <div class="soy-size-guide">

      <div class="soy-size-guide__content">

        <p class="soy-size-guide__eyebrow">
          SHADES OF YOU • SIZE GUIDE
        </p>

        <h2 class="soy-size-guide__title">
          Find your perfect fit.
        </h2>

        <p class="soy-size-guide__description">
          Compare your body measurements with the chart below – all sizes are in inches.
        </p>

        <p class="soy-size-guide__scroll-hint">← Swipe horizontally to view all measurements →</p>

        <div class="soy-size-guide__table-wrapper">

          <table class="soy-size-guide__table">

            <thead>
              <tr>
                <th>SIZE</th>
                <th>BUST</th>
                <th>UPPER<br>WAIST</th>
                <th>LOWER<br>WAIST</th>
                <th>HIP</th>
                <th>ARMHOLE</th>
              </tr>
            </thead>

            <tbody>
<tr><td>XXS</td><td>32"</td><td>24"</td><td>30"</td><td>36"</td><td>7 3/4"</td></tr>
<tr><td>XS</td><td>34"</td><td>26"</td><td>32"</td><td>38"</td><td>8.5"</td></tr>
<tr><td>S</td><td>36"</td><td>28"</td><td>34"</td><td>40"</td><td>8 3/4"</td></tr>
<tr><td>M</td><td>38"</td><td>30"</td><td>36"</td><td>42"</td><td>9"</td></tr>
<tr><td>L</td><td>40"</td><td>32"</td><td>38"</td><td>44"</td><td>9 1/4"</td></tr>
<tr><td>XL</td><td>42"</td><td>34"</td><td>40"</td><td>46"</td><td>9.5"</td></tr>
<tr><td>2XL</td><td>44"</td><td>36"</td><td>43"</td><td>48"</td><td>10"</td></tr>
<tr><td>3XL</td><td>46"</td><td>38"</td><td>45"</td><td>51"</td><td>10.5"</td></tr>
<tr><td>4XL</td><td>48"</td><td>41"</td><td>48"</td><td>54"</td><td>11"</td></tr>
<tr><td>5XL</td><td>50"</td><td>45"</td><td>50"</td><td>56"</td><td>11.5"</td></tr>
<tr><td>6XL</td><td>52"</td><td>52"</td><td>52"</td><td>58"</td><td>12"</td></tr>
</tbody>

          </table>

        </div>

      </div>

      <div class="soy-size-guide__footer">

        <div class="soy-size-guide__help">
          <strong>Still unsure?</strong>
          <span>We're here to help.</span>
        </div>

        <a
          href="/pages/contact"
          class="soy-size-guide__cta"
        >
          CHAT WITH OUR TEAM
        </a>

      </div>
        </div>
      </dialog>
    {%- endif -%}
  </variant-picker>
{% endunless %}

<script>
  (function () {
    if (window.__soyPdpSizeGuideInit) return;
    window.__soyPdpSizeGuideInit = true;
    document.addEventListener('click', function (event) {
      var trigger = event.target.closest('[data-soy-sg-trigger]');
      if (trigger) {
        event.preventDefault();
        var id = trigger.getAttribute('data-soy-sg-trigger');
        var dialog = document.getElementById(id);
        if (dialog && typeof dialog.showModal === 'function') {
          dialog.showModal();
        }
        return;
      }
      var closer = event.target.closest('[data-soy-sg-close]');
      if (closer) {
        var d = closer.closest('dialog');
        if (d) d.close();
        return;
      }
      var openDialog = event.target.closest('dialog.soy-size-guide-dialog');
      if (openDialog && event.target === openDialog) {
        openDialog.close();
      }
    });
  })();
</script>


{% stylesheet %}
  /* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  /* Size guide trigger button resets */
  .soy-size-guide-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
  }
/* =========================================================
   SOY SIZE GUIDE
========================================================= */

.soy-size-guide-trigger{
    background:none;
    border:0;
    cursor:pointer;
    padding:0;
    font:inherit;
}

/* ---------- Modal ---------- */

.soy-size-guide-dialog{

    width:min(780px,92vw);

    max-width:780px;

    border:0;

    padding:0;

    border-radius:22px;

    background:#F8F5F2;

    overflow:hidden;

    box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.soy-size-guide-dialog::backdrop{

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

}

.soy-size-guide-dialog__body{

    position:relative;

    display:flex;

    flex-direction:column;

    height:720px;

    background:#F8F5F2;

}

/* ---------- Close ---------- */

.soy-size-guide-dialog__close{

    position:absolute;

    top:18px;

    right:18px;

    width:48px;

    height:48px;

    border:none;

    border-radius:999px;

    background:#fff;

    cursor:pointer;

    z-index:5;

    font-size:20px;

}

/* ---------- Layout ---------- */

.soy-size-guide{

    display:flex;

    flex-direction:column;

    height:100%;

}

.soy-size-guide__content{

    flex:1;

    overflow-y:auto;

    padding:40px;

}

.soy-size-guide__eyebrow{

    font-size:12px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#6D584D;

    margin-bottom:18px;

}

.soy-size-guide__title{

    font-size:52px;

    line-height:.95;

    color:#5A4338;

    margin:0 0 20px;

}

.soy-size-guide__description{

    max-width:560px;

    font-size:22px;

    line-height:1.45;

    color:#6B5B53;

    margin-bottom:28px;

}

/* ---------- Table ---------- */


.soy-size-guide__scroll-hint{
    display:none;
}

@media(max-width:768px){
    .soy-size-guide__scroll-hint{
        display:block;
        margin:0 0 12px;
        font-size:12px;
        color:#8B776C;
        text-align:center;
    }
}

.soy-size-guide__table-wrapper{

    border:1px solid #E8DDD4;

    border-radius:18px;

    overflow:hidden;

    background:white;

}

.soy-size-guide__table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;
    table-layout:auto;

}



/* Optimized column widths */
.soy-size-guide__table th:nth-child(1),
.soy-size-guide__table td:nth-child(1){width:12%;}

.soy-size-guide__table th:nth-child(2),
.soy-size-guide__table td:nth-child(2){width:12%;}

.soy-size-guide__table th:nth-child(3),
.soy-size-guide__table td:nth-child(3){width:18%;}

.soy-size-guide__table th:nth-child(4),
.soy-size-guide__table td:nth-child(4){width:18%;}

.soy-size-guide__table th:nth-child(5),
.soy-size-guide__table td:nth-child(5){width:12%;}

.soy-size-guide__table th:nth-child(6),
.soy-size-guide__table td:nth-child(6){width:14%;}

.soy-size-guide__table thead{

    background:#EFE5DC;

}

.soy-size-guide__table th{

    padding:15px 8px;

    text-transform:uppercase;

    font-size:12px;

    letter-spacing:.08em;

    color:#6A584C;
    line-height:1.2;

}

.soy-size-guide__table td{

    padding:15px 8px;

    border-top:1px solid #E7DDD4;

    text-align:center;

    color:#5A4338;

}

.soy-size-guide__table th:first-child,

.soy-size-guide__table td:first-child{

    text-align:left;

    padding-left:24px;

    font-weight:600;

}

/* ---------- Footer ---------- */

.soy-size-guide__footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 32px;

    background:white;

    border-top:1px solid #E7DDD4;

    flex-shrink:0;

}

.soy-size-guide__help{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    line-height:1.1;
    color:#6B5B53;
    font-size:14px;
}

.soy-size-guide__help strong{
    margin:0;
    padding:0;
    font-size:15px;
    font-weight:600;
    color:#3F2D26;
    line-height:1.1;
}

.soy-size-guide__help span{
    display:block;
    margin:0;
    padding:0;
    line-height:1.1;
}

.soy-size-guide__cta{

    display:flex;

    align-items:center;

    justify-content:center;

    width:220px;

    height:46px;

    padding:0 28px;

    border-radius:999px;

    background:#5A3B31;

    color:white !important;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    letter-spacing:.08em;

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

    .soy-size-guide-dialog{
        width:100vw;
        max-width:100vw;
        height:90vh;
        margin:auto 0 0;
        border-radius:24px 24px 0 0;
    }

    .soy-size-guide-dialog__body{
        height:90vh;
    }

    .soy-size-guide__content{
        padding:20px;
        overflow-y:auto;
    }

    .soy-size-guide__table-wrapper{
        width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
    }

    .soy-size-guide__table{
        min-width:680px;
        width:max-content;
    }

    .soy-size-guide__table th,
    .soy-size-guide__table td{
        white-space:nowrap;
    }

    .soy-size-guide__footer{
        flex-direction:column;
        align-items:stretch;
        padding:16px 20px;
    }

    .soy-size-guide__cta{
        width:100%;
    }
}

/* FIX "SizeSize guide"*/

.variant-option__legend.variant-option__legend--with-size-guide{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100%;
    gap:12px;
}

.variant-option__legend.variant-option__legend--with-size-guide
.variant-option__legend-label{
    display:flex;
    align-items:center;
    gap:6px;
    flex:1;
}

.variant-option__legend.variant-option__legend--with-size-guide
.variant-option__size-guide-link{
    margin-left:auto !important;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    flex-shrink:0;
}
{% endstylesheet %}