added a button group for quick filtering by productLine

src/components/CardGrid.astro

@@ -15,7 +15,7 @@ import BackToTop from "./BackToTop.astro"
         </div>
     </div>
     <div class="col-sm-12 col-md-10 mt-0">
-        <div class="d-flex flex-column gap-1 flex-md-row align-items-center mb-2 w-100 justify-content-start">
+        <div class="d-flex flex-column gap-1 flex-md-row align-items-center mb-3 w-100 justify-content-start">
             <div id="sortBy"></div>
             <div id="totalResults"></div>
             <div id="activeFilters"></div>
@@ -48,12 +48,9 @@ import BackToTop from "./BackToTop.astro"
 (function () {
 
   // ── Sort dropdown ─────────────────────────────────────────────────────────
-  // Plain JS toggle — no dependency on Bootstrap's Dropdown JS initialising.
-  // Uses event delegation so it works after OOB swaps repopulate #sortBy.
   document.addEventListener('click', (e) => {
     const sortBy = document.getElementById('sortBy');
 
-    // Toggle the menu when the button is clicked
     const btn = e.target.closest('#sortBy [data-bs-toggle="dropdown"]');
     if (btn) {
       e.preventDefault();
@@ -64,7 +61,6 @@ import BackToTop from "./BackToTop.astro"
       return;
     }
 
-    // Handle sort option selection
     const opt = e.target.closest('#sortBy .sort-option');
     if (opt) {
       e.preventDefault();
@@ -87,7 +83,6 @@ import BackToTop from "./BackToTop.astro"
       return;
     }
 
-    // Click outside — close any open sort menu
     const menu = document.querySelector('#sortBy .dropdown-menu.show');
     if (menu) {
       menu.classList.remove('show');
@@ -96,6 +91,25 @@ import BackToTop from "./BackToTop.astro"
     }
   });
 
+  // ── Language toggle ───────────────────────────────────────────────────────
+  // Buttons live inside #sortBy which is OOB-swapped from the partial, so the
+  // listener is registered here on document (persistent shell) instead.
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('.language-btn');
+    if (!btn) return;
+    e.preventDefault();
+
+    const input = document.getElementById('languageInput');
+    if (input) input.value = btn.dataset.lang;
+
+    const start = document.getElementById('start');
+    if (start) start.value = '0';
+
+    document.getElementById('searchform').dispatchEvent(
+      new Event('submit', { bubbles: true, cancelable: true })
+    );
+  });
+
   // ── Global helpers ────────────────────────────────────────────────────────
   window.copyImage = async function(img) {
     try {
@@ -201,7 +215,6 @@ import BackToTop from "./BackToTop.astro"
     nextBtn.classList.toggle('d-none', next === null);
   }
 
-  // ── Trigger infinite scroll sentinel ─────────────────────────────────────
   function tryTriggerSentinel() {
     const sentinel = cardGrid.querySelector('[hx-trigger="revealed"]');
     if (!sentinel) return;
@@ -212,7 +225,6 @@ import BackToTop from "./BackToTop.astro"
     }
   }
 
-  // ── Fire card-modal:swapped so the partial's script can init the chart ────
   function initChartAfterSwap(modal) {
     const canvas = modal.querySelector('#priceHistoryChart');
     if (!canvas) return;
@@ -269,11 +281,9 @@ import BackToTop from "./BackToTop.astro"
     if (next) loadCard(next, 'next');
   }
 
-  // ── Nav button clicks ─────────────────────────────────────────────────────
   document.getElementById('modalPrevBtn').addEventListener('click', navigatePrev);
   document.getElementById('modalNextBtn').addEventListener('click', navigateNext);
 
-  // ── Keyboard ──────────────────────────────────────────────────────────────
   document.addEventListener('keydown', (e) => {
     const modal = document.getElementById('cardModal');
     if (!modal.classList.contains('show')) return;
@@ -281,7 +291,6 @@ import BackToTop from "./BackToTop.astro"
     if (e.key === 'ArrowRight') { e.preventDefault(); navigateNext(); }
   });
 
-  // ── Touch / swipe ─────────────────────────────────────────────────────────
   let touchStartX = 0;
   let touchStartY = 0;
   const SWIPE_THRESHOLD = 50;
@@ -299,7 +308,6 @@ import BackToTop from "./BackToTop.astro"
     else navigatePrev();
   }, { passive: true });
 
-  // ── HTMX card-modal opens ─────────────────────────────────────────────────
   document.body.addEventListener('htmx:beforeRequest', async (e) => {
     if (e.detail.elt.getAttribute('hx-target') !== '#cardModal') return;
 
@@ -363,7 +371,6 @@ import BackToTop from "./BackToTop.astro"
     }
   });
 
-  // ── Bootstrap modal events ────────────────────────────────────────────────
   const cardModal = document.getElementById('cardModal');
   cardModal.addEventListener('shown.bs.modal', () => {
     updateNavButtons(cardModal);