(function($){
  function initForm($form){
    if ($form.data('brx_limit_built')) return;
    $form.data('brx_limit_built', true);

    // ---- Detect color attribute per form ----
    var swatchMapAll = $form.data('brxSwatches') || {};
    var dataColor = String($form.data('colorAttr') || '').replace(/^attribute_/,'');
    var firstMapKey = Object.keys(swatchMapAll)[0] || '';
    if (firstMapKey && !/^pa_/.test(firstMapKey)) firstMapKey = 'pa_' + firstMapKey;

    // fallback to first pa_* select if needed
    var firstPa = ($form.find('select[name^="attribute_pa_"]').first().attr('name') || '').replace(/^attribute_/,'');
    var colorAttr = dataColor || firstMapKey || firstPa || 'pa_color';

    // normalize swatch map for that attr
    var colorMap =
      swatchMapAll[colorAttr] ||
      swatchMapAll['pa_'+colorAttr] ||
      swatchMapAll[colorAttr.replace(/^pa_/, '')] || {};

    var sizeAttr  = String($form.data('sizeAttr') || 'pa_size').replace(/^attribute_/,'');
    var $colorSel = $form.find('select[name="attribute_'+colorAttr+'"]');
    if (!$colorSel.length) $colorSel = $form.find('select[name^="attribute_pa_"]').first();
    var $sizeSel  = $form.find('select[name="attribute_'+sizeAttr+'"]');

    if (!$colorSel.length) return;

    var variations = $form.data('product_variations') || [];

    // Card image (don’t touch on load)
    var $card = $form.closest('.product, .brxe-block, .brxe-container, .single-product');
    var $img  = $card.find('img.brxe-image').first();
    if (!$img.length) $img = $card.find('.woocommerce-LoopProduct-link img').first().length ? $card.find('.woocommerce-LoopProduct-link img').first() : $card.find('img').first();

    if ($img.length && !$img.data('orig')) {
      $img.data('orig', 1);
      $img.attr({'data-orig-src':$img.attr('src')||'', 'data-orig-srcset':$img.attr('srcset')||'', 'data-orig-sizes':$img.attr('sizes')||''});
    }

    var productUrl =
      $form.data('productUrl') ||
      $card.find('a.woocommerce-LoopProduct-link, a[href*="/product/"]').first().attr('href') ||
      window.location.href;

    // ---- helpers ----
    function optEnabled($o){ return $o.is(':enabled') && !$o.hasClass('disabled') && $o.hasClass('attached'); }
    function firstEnabledVal($sel){
      var v=''; $sel.find('option').each(function(){ if(!this.value) return; var $o=$(this); if (optEnabled($o)){ v=this.value; return false; } }); return v;
    }
    function ensureSize(){
      if (!$sizeSel.length) return;
      if ($sizeSel.val()) return;
      var v = firstEnabledVal($sizeSel);
      if (v){
        $sizeSel.val(v);
        if ($colorSel.val()){ $sizeSel.trigger('change'); $form.trigger('check_variations'); }
      }
    }
    function findVariation(color,size){
      if (!Array.isArray(variations)) return null;
      if (size){
        var ex = variations.find(function(v){ return v.attributes && v.attributes['attribute_'+colorAttr]===color && v.attributes['attribute_'+sizeAttr]===size; });
        if (ex) return ex;
      }
      return variations.find(function(v){ return v.attributes && v.attributes['attribute_'+colorAttr]===color; }) || null;
    }
    function applyImageObj(img){
      if (!$img.length || !img) return false;
      var src = img.full_src || img.src; if (!src) return false;
      $img.attr('src', src);
      if (img.srcset) $img.attr('srcset', img.srcset); else $img.removeAttr('srcset');
      if (img.sizes)  $img.attr('sizes',  img.sizes);  else $img.removeAttr('sizes');
      return true;
    }
    function applyColorThumb(slug){
      var m = colorMap[slug]; if (!m || !m.url) return false;
      return applyImageObj({src:m.url});
    }
    function swapFromSelection(){
      var c = $colorSel.val()||''; if (!c) return false;
      var s = $sizeSel.length ? ($sizeSel.val()||'') : '';
      var v = findVariation(c,s);
      if (v && v.image && (v.image.src || v.image.full_src)) return applyImageObj(v.image);
      return applyColorThumb(c);
    }

    // ---- build (limit 4) ----
    function buildColorUL(){
      // compute enabled options
      var opts=[]; $colorSel.find('option').each(function(){ var val=this.value; if(!val) return; var $o=$(this); opts.push({val:val,label:$o.text(),enabled:optEnabled($o)}); });
      var enabled = opts.filter(function(o){return o.enabled;});
      var MAX=4, visible = enabled.slice(0,MAX), more = Math.max(enabled.length-MAX,0);

      // if we can’t build at least one chip, keep whatever exists and abort
      if (!visible.length) return false;

      // build in memory first
      var $ul = $('<ul class="bricks-variation-swatches bricks-swatch-image brx-built" role="list" data-attribute_name="attribute_'+colorAttr+'"></ul>');
      var current = $colorSel.val();

      function chip(o){
        var img=colorMap[o.val];
        var $li=$('<li data-value="'+o.val+'"></li>');
        var $a =$('<a href="#" aria-label="'+(o.label||o.val)+'"></a>');
        if (img && img.url){ $a.append('<img src="'+img.url+'" alt="'+(o.label||o.val)+'" loading="lazy" />'); }
        else { $a.append('<span class="brx-swatch-fallback">'+(o.label||o.val)+'</span>'); }
        $li.append($a);
        if (current && current===o.val) $li.addClass('selected');
        return $li;
      }
      visible.forEach(function(o){ $ul.append(chip(o)); });
      if (more>0){ $ul.append('<li class="brx-swatch-more"><a class="brx-swatch-more-btn" href="'+productUrl+'">+ '+more+' MORE</a></li>'); }

      // now that we know we can build, remove any existing swatch ULs next to the select
      $colorSel.nextAll('ul.bricks-variation-swatches').remove();

      // insert and hide select
      $colorSel.after($ul).hide();

      // clicks
      $ul.on('click','li:not(.brx-swatch-more) a', function(e){
        e.preventDefault();
        var $li=$(this).closest('li'), val=$li.data('value');
        $ul.find('li').removeClass('selected'); $li.addClass('selected');
        if ($colorSel.val()!==val){
          $colorSel.val(val).trigger('change');
          $form.trigger('check_variations');
          $colorSel.trigger('woocommerce_variation_has_changed');
        }
        ensureSize();
        swapFromSelection();
      });

      return true;
    }

    // init
    var ok = buildColorUL();
    if ($sizeSel.length){ $sizeSel.closest('tr, .value, .form-row, .bricks-variation-swatches').hide(); }
    ensureSize();

    // prefer Woo image when found
    $form.on('found_variation', function(e, variation){
      if (variation && variation.image && (variation.image.src || variation.image.full_src)) applyImageObj(variation.image);
    });

    // rebuild on availability changes
    $form.on('woocommerce_update_variation_values', function(){
      buildColorUL();
      ensureSize();
      swapFromSelection();
    });
  }

  function boot(){ $('.variations_form').each(function(){ initForm($(this)); }); }
  $(document).ready(function(){ boot(); $(document).on('bricks/ajax/load', boot); });
})(jQuery);

/* ✅ Normalize swatch structure */
.bricks-variation-swatches.bricks-swatch-image li,
.bricks-variation-swatches.bricks-swatch-label li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid grey;
  border-radius: 90px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
}

/* ✅ Fix inner anchor without breaking tooltip */
.bricks-variation-swatches li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none !important;
  background: transparent !important;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  cursor: inherit;
}

/* ✅ Image swatches */
.bricks-swatch-image li,
.bricks-swatch-image li a {
  width: 28px;
  height: 28px;
  
}
.bricks-swatch-image li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* ✅ Size/Label swatches */
.bricks-swatch-label li,
.bricks-swatch-label li a {
  min-width: 28px;
  height: 28px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1px solid #ddd;
  transition: all 0.2s ease;
  background: #fff;
}

/* Hover + Selected states */
.bricks-variation-swatches li:hover {
  border-color: #000;
}
.bricks-variation-swatches li.selected,
.bricks-variation-swatches li.bricks-swatch-selected {
  border-color: #000;
  background: #000;
  color: #fff;
}

/* ✅ Keep tooltip visible */
.bricks-variation-swatches li[data-balloon]:hover::after,
.bricks-variation-swatches li[data-balloon]:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Limit color swatches to 5 on mobile */

  .brx-loop-variation-wrapper .bricks-variation-swatches.bricks-swatch-image li:nth-child(n+5) {
    display: none !important;
  
}

/*Swatches padding*/

form.cart table.variations td, form.woocommerce-cart-form table.variations td {
  padding-top: 5px !important;
  padding-bottom: 0px !important;
}

.bricks-variation-swatches.bricks-swatch-image img {
  border-radius: 90px !important;
}

.bricks-variation-swatches{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0;padding:0;list-style:none}
.bricks-variation-swatches li{line-height:1;cursor:pointer}
.bricks-variation-swatches li.disabled{opacity:.35;pointer-events:none}

/* image swatches */
.bricks-swatch-image li, .bricks-swatch-image li a {width:28px;height:28px;}
.bricks-swatch-image li img{width:100%;height:100%;object-fit:cover;border-radius:6px;border:1px solid rgba(0,0,0,.1);transition:transform .15s ease, box-shadow .15s ease;}
.bricks-swatch-image li:hover img{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.15);}
.bricks-variation-swatches li.selected img{outline:2px solid rgba(0,0,0,.6);}

/* fallback label */
.brx-swatch-fallback{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid rgba(0,0,0,.15);border-radius:6px;font-size:11px}

/* "+ # more" chip */
.brx-swatch-more-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 .6rem;border:1px dashed #aaa;border-radius:8px;
  background:#fff;color:#111;font-size:12px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.brx-swatch-more-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1);border-color:#111;}