/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:0 Unexpected "-"
Line 26:0 Unexpected "-"
Line 26:12 Comments in CSS use "/* ... */" instead of "//"
Line 27:1 Expected identifier but found "%"
Line 37:0 Unexpected "{"
Line 37:1 Expected identifier but found "%"
Line 39:0 Unexpected "-"
Line 45:3 Expected identifier but found whitespace
... and 3 more hidden warnings

**/
{% comment %}
COLOR SWATCH
- insert / take the tag COLOR_ in product page
- use the color name COLOR_white (less COLOR_) white
- add a class .swatch-white > (the name of swatch)
- use background: #hexadecimal-color

eg.
.swatch-black {background: #000}

- see https://www.w3schools.com/cssref/css_colors_legal.asp
{% endcomment %}

.swatch-black {background: black}
.swatch-grey {background: #a0a0a2}
.swatch-yellow {background: #fde834}
.swatch-red {background: #fd203a}
.swatch-anthracite {background: #5b5b5b}
.swatch-ecru {background: #f3f0e9}
.swatch-green {background: #118152}

{% comment %}
BICOLOR
- insert hex color from left to right:
 - #colorleft eg. #000 (black) 
 - #colorright eg. #fff (white)
- 50% is the space portion of the color - 50% + 50% = 100% of swatch color
.swatch-tag-color { background: linear-gradient(90deg, #colorleft 50%, #colorright 50%);}

eg.
.swatch-black-white { background: linear-gradient(90deg, #000 50%, #fff 50%);}

- see https://www.w3schools.com/cssref/css_colors_legal.asp
{% endcomment %}

.swatch-black-white { background: linear-gradient(90deg, black 50%, white 50%);}
.swatch-bluette-white { background: linear-gradient(90deg, #1f53b8 50%, white 50%);}
.swatch-red-white { background: linear-gradient(90deg, #ed1e24 50%, white 50%);}
.swatch-yellow-white { background: linear-gradient(90deg, #fde834 50%, white 50%);}