/* Search Bar */ #pbl-search{ width:100%; height:64px; border:2px solid #148a88; border-radius:14px; padding:0 24px; font-size:16px; background:#fff; color:#111; margin-bottom:24px; box-shadow: 0 8px 25px rgba(20,138,136,.15), 0 0 0 4px rgba(20,138,136,.08); transition:all .3s ease; } #pbl-search::placeholder{ color:#8a8a8a; } #pbl-search:hover{ border-color:#0f6f6d; box-shadow: 0 12px 30px rgba(20,138,136,.20), 0 0 0 5px rgba(20,138,136,.10); } #pbl-search:focus{ outline:none; border-color:#148a88; box-shadow: 0 15px 35px rgba(20,138,136,.25), 0 0 0 6px rgba(20,138,136,.15); } /* Filter Pills */ .pbl-filters{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:35px; } .pbl-filters button{ background:#fff; color:#111827; border:1px solid #e5e7eb; border-radius:999px; padding:12px 22px; font-size:14px; font-weight:600; line-height:1; cursor:pointer; transition:all .25s ease; box-shadow:0 2px 6px rgba(0,0,0,.03); } .pbl-filters button:hover{ border-color:#148a88; color:#148a88; transform:translateY(-1px); } .pbl-filters button.active{ background:#148a88 !important; color:#fff !important; border-color:#148a88 !important; box-shadow:0 8px 20px rgba(20,138,136,.25); } /* Mobile */ @media(max-width:767px){ .pbl-filters{ gap:10px; } .pbl-filters button{ padding:10px 16px; font-size:12px; } #pbl-search{ height:56px; font-size:12px !important; } } /* Mobile Responsive Fix */ @media (max-width: 767px){ /* Search */ #pbl-search{ height:52px; font-size:15px; margin-bottom:15px; } /* Filter buttons */ .pbl-filters{ gap:8px; margin-bottom:20px; } .pbl-filters button{ padding:10px 14px; font-size:13px; white-space:nowrap; jQuery(document).ready(function($){ $('.pbl-filters button').on('click', function(){ $('.pbl-filters button').removeClass('active'); $(this).addClass('active'); var filter = $(this).data('filter'); $('li.product').each(function(){ if(filter === 'all'){ $(this).show(); return; } if($(this).hasClass('product_cat-' + filter)){ $(this).show(); }else{ $(this).hide(); } }); }); $('#pbl-search').on('keyup', function(){ var value = $(this).val().toLowerCase(); $('li.product').each(function(){ var title = $(this).find('.woocommerce-loop-product__title').text().toLowerCase(); if(title.indexOf(value) > -1){ $(this).show(); }else{ $(this).hide(); } }); }); });