/** Shopify CDN: Minification failed

Line 41:0 Unexpected "1"
Line 41:29 Unexpected "{"
Line 41:38 Expected ":"
Line 41:60 Unexpected "<"
Line 43:5 Expected identifier but found "%"
Line 44:0 Unexpected "4"
Line 48:4 Expected identifier but found "%"
Line 50:1 Expected identifier but found "%"
Line 52:37 Expected identifier but found whitespace
Line 53:1 Expected identifier but found "%"
... and 17 more hidden warnings

**/
ul.color-swatches {
  list-style: none;
  padding: 0;
  margin: 1em 0;
  display: flex;
}
ul.color-swatches li {
  margin-right: 8px;
}
ul.color-swatches input[type="radio"] {
  display: none;
}
ul.color-swatches label.swatch {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
/* outline the checked swatch */
ul.color-swatches input[type="radio"]:checked + label.swatch {
  box-shadow: 0 0 0 2px #000;
}
1 <span class="variant-sku">{{ product.variants.first.sku }}</span>
2 <form action="/cart/add" method="post" … class="product_form">
3   {% if product.options.size > 1 %}
4     <ul class="color-swatches">
      … your old swatch code …
23    </ul>
24  </div>
25 {% elsif product.options.size == 1 and product.variants.size > 1 %}
   …etc…
{%- comment -%}
  Render color swatches for the “Color” option,
  even if there’s only one variant.
{%- endcomment -%}
{% for option in product.options_with_values %}
  {% if option.name == 'Color' %}
    <ul class="color-swatches">
      {% for variant in product.variants %}
        {% assign swatch = variant.metafields.custom.color.value %}
        <li>
          <input
            type="radio"
            id="swatch-{{ variant.id }}"
            name="id"
            value="{{ variant.id }}"
            {% if variant == product.selected_or_first_available_variant %} checked{% endif %} />
          <label
            for="swatch-{{ variant.id }}"
            class="swatch"
            title="{{ variant.title }}"
            style="background-color: {{ swatch }};">
          </label>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endfor %}