Elevate your lifestyle with PILAT3S

function separarFiltros() {
  const optionTexts = document.querySelectorAll('.brxe-filter-radio .brx-option-text:not([data-processed])');

  optionTexts.forEach(span => {
    const text = span.textContent.trim();
    const match = text.match(/^(.+?)\s*\((\d+)\)$/);
    if (match) {
      const name = match[1];
      const count = match[2];

      span.textContent = name;
      span.dataset.processed = "true";

      const countSpan = document.createElement('span');
      countSpan.className = 'country-count';
      countSpan.textContent = count;

      span.parentElement.appendChild(countSpan);
    }
  });
}

// Roda ao carregar a página
document.addEventListener("DOMContentLoaded", separarFiltros);

// Roda novamente sempre que o Bricks atualizar algo via AJAX
document.addEventListener('bricks/ajax/load', separarFiltros);

// Fallback universal: observa o DOM por mudanças
const observer = new MutationObserver(separarFiltros);
observer.observe(document.body, { childList: true, subtree: true });

<div id="loadMoreContainer" style="text-align:center; margin-top: 40px;">
  <button id="loadMoreBtn" class="custom-load-more" style="display:none;">
    See more
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style="margin-left:8px;">
      <path d="M12 19L12 5" stroke="#566251" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M7 14L12 19" stroke="#566251" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M17 14L12 19" stroke="#566251" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>
</div>

<style>
/* === Botão personalizado === */
.custom-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--Green-Main, #566251);
  color: var(--Green-Main, #566251);
  font-family: "TT Norms Pro";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background: transparent;
  border-radius: 50px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-load-more:hover {
  background: var(--Green-Main, #566251);
  color: #fff;
}

.custom-load-more:hover svg path {
  stroke: #fff;
}

.custom-load-more:hover svg {
  transform: translateY(2px);
  transition: transform 0.3s ease;
}

/* Fade suave */
.product-card {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-card[style*="block"] {
  opacity: 1;
  transform: translateY(0);
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const ITEMS_PER_PAGE = 3;
  const loadMoreBtn = document.getElementById("loadMoreBtn");
  const containerSelector = ".alm-listing, #brxe-yktzpm";

  function initLoadMore() {
    const container = document.querySelector(containerSelector);
    if (!container) return;

    const items = container.querySelectorAll(".product-card");
    if (!items.length) {
      loadMoreBtn.style.display = "none";
      return;
    }

    // Detecta filtro ativo
    const activeFilter = document.querySelector('.brx-option-active input');
    const filterValue = activeFilter ? activeFilter.value : "";

    // Ajuste aqui se o value do AU for outro
    const behavesAsDefault = (filterValue === "" || filterValue === "all");

    // Sempre mostra todos inicialmente
    items.forEach(item => item.style.display = "block");
    loadMoreBtn.style.display = "none";

    // ✅ FILTRO APLICADO (exceto ALL)
    if (!behavesAsDefault) {
      return; // Mostra todos → sem botão
    }

    // ✅ SEM FILTRO ou AU → comportamento LOAD MORE
    let visibleCount = ITEMS_PER_PAGE;

    items.forEach((item, i) => {
      item.style.display = i < ITEMS_PER_PAGE ? "block" : "none";
    });

    toggleButton();

    loadMoreBtn.onclick = function() {
      const nextVisible = visibleCount + ITEMS_PER_PAGE;
      for (let i = visibleCount; i < nextVisible && i < items.length; i++) {
        items[i].style.display = "block";
      }
      visibleCount += ITEMS_PER_PAGE;
      toggleButton();
    };

    function toggleButton() {
      const visibleItems = Array.from(items).filter(el => el.style.display !== "none");
      loadMoreBtn.style.display =
        items.length > visibleItems.length ? "inline-flex" : "none";
    }
  }

  initLoadMore();

  // Reaplica após AJAX
  document.addEventListener("bricks/ajax/load", function() {
    setTimeout(initLoadMore, 100);
  });

  // Observer (caso Bricks re-renderize)
  const observer = new MutationObserver(() => {
    if (document.querySelectorAll(".product-card").length) {
      setTimeout(initLoadMore, 100);
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const filterList = document.querySelector('.brxe-filter-radio');
  if (!filterList) return;

  const select = document.createElement('select');
  select.className = 'country-filter-dropdown';

  const options = filterList.querySelectorAll('li label');
  options.forEach((label) => {
    const text = label.querySelector('.brx-option-text')?.textContent.trim();
    const count = label.querySelector('.country-count')?.textContent.trim() || '';
    const value = label.querySelector('input')?.value || '';

    const option = document.createElement('option');
    option.value = value;
    option.textContent = count ? `${text} (${count})` : text;

    if (label.classList.contains('brx-option-active')) {
      option.selected = true;
    }
    select.appendChild(option);
  });

  filterList.parentNode.insertBefore(select, filterList);

  select.addEventListener('change', function() {
    const radios = filterList.querySelectorAll('input[type="radio"]');
    radios.forEach(radio => {
      if (radio.value === select.value) {
        radio.click();
      }
    });
  });

  document.addEventListener("bricks/ajax/load", () => {
    const activeLabel = filterList.querySelector('.brx-option-active input');
    if (activeLabel) select.value = activeLabel.value;
  });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

  // Função para resetar o dropdown sempre que limpar
  function resetDropdownToAll() {
    const select = document.querySelector(".country-filter-dropdown");
    if (select) {
      select.selectedIndex = 0;
    }
  }

  // Observa mudanças no DOM após reset
  const observer = new MutationObserver(() => {
    // Quando o filtro for resetado, o texto ativo volta para ALL,
    // então sincronizamos o dropdown
    const activeInput = document.querySelector(".brx-option-active input");
    if (activeInput && activeInput.value === "all") {
      resetDropdownToAll();
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  // Captura clique no botão CLEAR (type=reset)
  document.addEventListener("click", function (e) {
    if (e.target.closest(".brxe-filter-submit[type='reset']")) {
      // Pequeno delay para o browser resetar os radios
      setTimeout(() => {
        resetDropdownToAll();
      }, 50);
    }
  });

});
</script>




<style>
.country-filter-dropdown {
  display: none;
}

@media (max-width: 768px) {
  .brxe-filter-radio {
    display: none !important;
  }

  .country-filter-dropdown {
    display: block;
    width: 100%;
    background-color: var(--bricks-color-fappzc);
    border: 1px solid var(--bricks-color-dyuxyf);
    border-radius: 24px;
    padding: 4px 16px;
    color: var(--bricks-color-ubyowm);
    margin-top: 20px;
    font-family: "TT Norms Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    appearance: none;
    cursor: pointer;

    /* Ícone seta preenchida e menor */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='%23566251' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1H1Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px;
  }
}
</style