Choose Flavor

<style>
  .flavor-variant-title {
    margin-bottom: 20px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    margin-top: 20px;
    text-transform: capitalize;
  }

  #flavor-selector {
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: start;
    gap: 20px;
  }

  .flavor-button {
    display: flex;
    padding: 0;
    border: none;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    margin-top: 15px;
    align-items: center;
    background: none;
    height: 120px;
    flex: 1;
  }

  button {
    cursor: pointer;
    font-size: calc(var(--font-size-base)* 1px);
    font-family: var(--font-stack-body);
    font-style: var(--font-style-body);
    font-weight: var(--font-weight-body);
    line-height: 1.5;
  }

  .flavor-button.selected span {
    border: 3px solid #090909;
  }

  .flavor-button span {
    display: block;
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 2px solid #9e9e9e;
  }

  .flavor-name {
    font-size: 12px;
    text-wrap: wrap;
    text-align: center;
    font-weight: 600;
    color: black;
    text-transform: capitalize;
  }

  @media (min-width: 768px) {
    #flavor-selector {
      max-width: 27vw;
    }
  }
</style>

<h4 class="flavor-variant-title">Choose Flavor:</h4>
<div id="flavor-selector"><button class="flavor-button selected" data-url="/products/glutathione-skin-renew-orange"
    data-url_2="/products/skin-renew-glutathione-orange-flavour-vitamin-c"><span
      style="background-image: url('https://cdn.shopify.com/s/files/1/0560/0732/7881/files/orange-1-662f5fcc0d9e2.webp?v=1714380778');"></span>
    <div class="flavor-name">Orange</div>
  </button><button class="flavor-button" data-url="/products/skin-renew-mixed-berry"
    data-url_2="/products/skin-renew-glutathione-mixed-berry-flavour-vitamin-c"><span
      style="background-image: url('https://cdn.shopify.com/s/files/1/0560/0732/7881/files/mixed-berry-1-662f5fcab267c.webp?v=1714380778');"></span>
    <div class="flavor-name">Mixed Berry</div>
  </button><button class="flavor-button" data-url="/products/skin-renew-orange-mixed-berry"><span
      style="background-image: url('https://cdn.shopify.com/s/files/1/0560/0732/7881/files/orange-and-berry-1-662f5fcb28e83.webp?v=1714380778');"></span>
    <div class="flavor-name">Orange+Mixed Berry</div>
  </button></div>