(function(){

/* ── TAB TOGGLE ── */
const btnDigital = document.getElementById(‘zfpg-btn-digital’);
const btnGear = document.getElementById(‘zfpg-btn-gear’);
const tabDigital = document.getElementById(‘zfpg-tab-digital’);
const tabGear = document.getElementById(‘zfpg-tab-gear’);

function showTab(tab) {
if (tab === ‘digital’) {
tabDigital.style.display = ‘block’;
tabGear.style.display = ‘none’;
btnDigital.classList.add(‘zfpg-toggle-active’);
btnGear.classList.remove(‘zfpg-toggle-active’);
} else {
tabGear.style.display = ‘block’;
tabDigital.style.display = ‘none’;
btnGear.classList.add(‘zfpg-toggle-active’);
btnDigital.classList.remove(‘zfpg-toggle-active’);
}
}

btnDigital.addEventListener(‘click’, function(){ showTab(‘digital’); });
btnGear.addEventListener(‘click’, function(){ showTab(‘gear’); });

/* ── DIGITAL FILTER PILLS ── */
document.querySelectorAll(‘[data-filter-d]’).forEach(function(pill) {
pill.addEventListener(‘click’, function() {
document.querySelectorAll(‘[data-filter-d]’).forEach(function(p){ p.classList.remove(‘zfpg-pill-active’); });
pill.classList.add(‘zfpg-pill-active’);
const f = pill.getAttribute(‘data-filter-d’);
document.querySelectorAll(‘#zfpg-digital-grid .zfpg-product’).forEach(function(item){
if (f === ‘all’ || item.getAttribute(‘data-cat-d’) === f) {
item.style.display = ‘flex’;
} else {
item.style.display = ‘none’;
}
});
});
});

/* ── GEAR FILTER PILLS ── */
document.querySelectorAll(‘[data-filter-g]’).forEach(function(pill) {
pill.addEventListener(‘click’, function() {
document.querySelectorAll(‘[data-filter-g]’).forEach(function(p){ p.classList.remove(‘zfpg-pill-active’); });
pill.classList.add(‘zfpg-pill-active’);
const f = pill.getAttribute(‘data-filter-g’);
document.querySelectorAll(‘#zfpg-gear-grid .zfpg-product’).forEach(function(item){
if (f === ‘all’ || item.getAttribute(‘data-cat-g’) === f) {
item.style.display = ‘flex’;
} else {
item.style.display = ‘none’;
}
});
});
});

})();