<style> .wf-force-outline-none[tabindex="-1"]:focus{outline:none;} </style>


<style>

[data-option-label="color-name-link"] {
background-image: url("image-color-name"); // you get those field from a cms colors collections / put as many data option label field as maximum colors swatch you would like to have
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-2:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-2:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-3:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-3:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-4:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-4:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-5:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-5:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
ֿ/*/ ((--=.lw-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected {
   kjborder: 3px solid  #ffb700;))--
}
/*/
video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;}

</style>

<style>
.color-buttons:focus {
outline: none;
}
.color-buttons{
box-shadow: 0 0 0 1px #1f2d1c;
border: 2.5px solid #faf5f2;
}

.color-buttons:active {
box-shadow: 0 0 0 1px #bababa;
}
.color-buttons:hover {
box-shadow: 0 0 0 1px #bababa;
}

body {
 overflow-x: hidden !important;
  position: relative !important;
  width:100% !important;
  }
  

</style>

<!-- No Highlight Tabs  -->
<style>                                  
.arrow {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */                                  
</style> 

<script>
document.querySelectorAll('[data-node-type="commerce-add-to-cart-pill"]').forEach(el => el.dataset['optionLabel'] = el.textContent)
</script>

<script>
  var FC = FC || {};
 
  FC.onLoad = function () {
    FC.client.on("ready.done", function () {
      document
        .querySelector(".w-commerce-commerceaddtocartbutton")
        .addEventListener("click", (e) => {
          e.preventDefault();
 
          const name = document.querySelector(".foxy-product-name").innerText;
          const price = document.querySelector(".foxy-product-price").innerText;
          const code = document.querySelector(".foxy-product-code").innerText;
          const image = document.querySelector(".foxy-product-image").src;
 
          const quantity = document.querySelector(".w-commerce-commerceaddtocartquantityinput").value;
 
          let cartUrl = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&price=${price}&code=${code ?? encodeURIComponent(code)}&quantity=${quantity ?? 1}&image=${encodeURIComponent(image)}`;
 
          const variantSelect = document.querySelectorAll("[data-node-type='commerce-add-to-cart-option-select']");
 
          const variantName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.previousElementSibling.innerText)
          );
 
          const variantValueName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.options[select.selectedIndex].text)
          );
 
          const variantValue = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.value)
          );
 
          if (variantSelect.length > 0 && variantValue.includes("")) {
            return;
          } else {
            variantName.forEach(
              (name, index) => (cartUrl += `&${name}=${variantValueName[index]}`)
            );
 
            FC.client.event("cart-submit").trigger({
              data: { cart: "add" },
              url: cartUrl,
            });
          }
        });
    });
  };
</script>