Виталий

для этого используются

@media

запросы
препроцессоры - это препроцессор CSS, браузер понимает CSS, а не LESS / SASS

метод bind устарел, используйте ON

$('selecor').on('click', function(){
// какой то экшен
});

если элемент был добавлен уже после загрузки документа, то действие на него повесить можно так

$(document).on('click','selector', function(){
// какой то экшен
});

codepen.io
отслеживать клик по родителю или по body

Обычно фильтры - это AJAX запрос к контроллеру ( обработчеку всего это добра ) с уточняющим параметром, тот в свою очередь делает подзапрос в базу данных. Получает ответ , отдаёт на страницу , JS перерисовывает область товаров и вуаля. Фильтр сработал.

Хочу все это сделать на клиентской стороне, без использования сервера.

для этого надо выгружать все товары на страницу , потом прятать по категории, потом показывать ... что не есть гуд