.elementor-1560 .elementor-element.elementor-element-53906d7{--display:flex;}.elementor-1560 .elementor-element.elementor-element-53906d7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1560 .elementor-element.elementor-element-dee35e2{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;}.elementor-1560 .elementor-element.elementor-element-5f4eafa{--grid-columns:5;}@media(max-width:1024px){.elementor-1560 .elementor-element.elementor-element-5f4eafa{--grid-columns:2;}}@media(max-width:767px){.elementor-1560 .elementor-element.elementor-element-53906d7{--width:653.091px;}.elementor-1560 .elementor-element.elementor-element-5f4eafa{--grid-columns:1;}}/* Start custom CSS for taxonomy-filter, class: .elementor-element-dee35e2 */<!-- =========================================================
  LOOP GRID AUTO-SCROLL + FILTER (Elementor Pro)
  Add this as a separate HTML widget, placed ABOVE or BELOW
  your Loop Grid widget (same page/section).
  No AJAX. No dots/arrows. Works with real WooCommerce products.
========================================================= -->

<!-- ================= FILTER TABS ================= -->
<div class="clw-filters">
  <button class="clw-filter-btn active" data-filter="all">ALL</button>
  <button class="clw-filter-btn" data-filter="decorative-candles">Decorative Candles</button>
  <button class="clw-filter-btn" data-filter="designer-candles">Designer Candles</button>
  <button class="clw-filter-btn" data-filter="aromatic-candles">Scented Candles</button>
  <button class="clw-filter-btn" data-filter="soy-wax-candles">Soy Wax Candles</button>
</div>

<style>
  .clw-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
  }
  .clw-filter-btn {
    padding: 8px 20px;
    border: 1px solid #222;
    border-radius: 30px;
    background: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
  }
  .clw-filter-btn:hover { background: #f2f2f2; }
  .clw-filter-btn.active { background: #111; color: #fff; border-color: #111; }

  /* ---------- TARGET THE LOOP GRID ---------- */
  .clw-loop-grid {
    overflow: hidden !important;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }

  /* Elementor Loop Grid's internal container needs to become a flex row */
  .clw-loop-grid .elementor-loop-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    width: max-content !important;
    animation: clw-scroll 25s linear infinite;
  }

  .clw-loop-grid:hover .elementor-loop-container {
    animation-play-state: paused;
  }

  @keyframes clw-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* each loop item card - fixed width so flex row works */
  .clw-loop-grid .elementor-loop-container > div {
    flex: 0 0 260px;
    width: 260px;
  }

  /* hide card when filtered out */
  .clw-loop-grid .elementor-loop-container > div.clw-hidden {
    display: none !important;
  }
<\/style>

<script>
(function () {

  function initClwLoop() {
    var grid = document.querySelector('.clw-loop-grid .elementor-loop-container');
    if (!grid) {
      // Loop grid not rendered yet, try again shortly
      setTimeout(initClwLoop, 300);
      return;
    }

    // -------- STEP 1: Duplicate all current cards once for seamless loop --------
    if (!grid.getAttribute('data-clw-duplicated')) {
      var originalCards = Array.prototype.slice.call(grid.children);
      originalCards.forEach(function (card) {
        var clone = card.cloneNode(true);
        clone.setAttribute('data-clone', 'true');
        grid.appendChild(clone);
      });
      grid.setAttribute('data-clw-duplicated', 'true');
    }

    // -------- STEP 2: Filter logic (NO AJAX) --------
    var filterBtns = document.querySelectorAll('.clw-filter-btn');
    filterBtns.forEach(function (btn) {
      btn.addEventListener('click', function () {
        var filter = btn.getAttribute('data-filter');

        filterBtns.forEach(function (b) { b.classList.remove('active'); });
        btn.classList.add('active');

        var allCards = grid.querySelectorAll('[data-category]');
        allCards.forEach(function (card) {
          var cat = card.getAttribute('data-category');
          // data-category value may contain multiple terms separated by comma
          var catList = cat ? cat.split(',').map(function(c){ return c.trim(); }) : [];

          if (filter === 'all' || catList.indexOf(filter) !== -1) {
            card.classList.remove('clw-hidden');
          } else {
            card.classList.add('clw-hidden');
          }
        });
      });
    });
  }

  // Run after Elementor frontend + loop grid are ready
  if (window.elementorFrontend && elementorFrontend.hooks) {
    elementorFrontend.hooks.addAction('frontend/element_ready/loop-grid.default', function () {
      initClwLoop();
    });
  }

  // Fallback in case hook doesn't fire (e.g. widget loaded differently)
  window.addEventListener('load', function () {
    setTimeout(initClwLoop, 800);
  });

})();
</script>/* End custom CSS */