From efd11fc84aa89eaf088d64921237065b352e1fe8 Mon Sep 17 00:00:00 2001
From: Tara Aqeel <taraa@stud.ntnu.no>
Date: Tue, 13 Oct 2026 16:54:56 +0200
Subject: [PATCH 01/17] feat: add initial product details page layout

---
 .../src/productDetails/ProductDetailsPage.css | 70 +++++++++++++++++++
 .../src/productDetails/ProductDetailsPage.tsx | 29 ++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 frontend/src/productDetails/ProductDetailsPage.css
 create mode 100644 frontend/src/productDetails/ProductDetailsPage.tsx

diff --git a/frontend/src/productDetails/ProductDetailsPage.css b/frontend/src/productDetails/ProductDetailsPage.css
new file mode 100644
index 0000000..d48e663
--- /dev/null
+++ b/frontend/src/productDetails/ProductDetailsPage.css
@@ -0,0 +1,70 @@
+.product-details-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 24px;
+}
+
+.product-details-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 52px;
+}
+
+.product-image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border: 1px solid #780b2b;
+  border-radius: 10px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: #fafafa;
+  background-image:
+    linear-gradient(#e8e8e8 1px, transparent 1px),
+    linear-gradient(90deg, #e8e8e8 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+.product-image p {
+  font-size: 12px;
+  color: #666;
+  letter-spacing: 2px;
+}
+
+.product-brand {
+  color: #d3045d;
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 2px;
+}
+
+.product-name {
+  font-size: 44px;
+  font-weight: 600;
+  margin: 10px 0;
+}
+
+.product-category {
+  font-size: 12px;
+  color: #777;
+  letter-spacing: 2px;
+}
+
+.product-price {
+  font-size: 38px;
+  font-weight: 500;
+  margin-top: 32px;
+}
+
+@media (max-width: 768px) {
+  .product-details-layout {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .product-name {
+    font-size: 32px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/productDetails/ProductDetailsPage.tsx b/frontend/src/productDetails/ProductDetailsPage.tsx
new file mode 100644
index 0000000..d51886f
--- /dev/null
+++ b/frontend/src/productDetails/ProductDetailsPage.tsx
@@ -0,0 +1,29 @@
+import "./ProductDetailsPage.css";
+
+export default function ProductDetailsPage() {
+  return (
+    <main className="product-details-page">
+      <div className="product-details-layout">
+
+        {/* Venstre side: Produktbilde */}
+        <section className="product-details-left">
+          <div className="product-image">
+            <p>Mangler bilde</p>
+          </div>
+        </section>
+
+        {/* Høyre side: Produktinformasjon */}
+        <section className="product-details-right">
+          <p className="product-brand">TINE</p>
+
+          <h1 className="product-name">Norvegia 26 %</h1>
+
+          <p className="product-category">500 G · OST</p>
+
+          <h2 className="product-price">79,90 kr</h2>
+        </section>
+
+      </div>
+    </main>
+  );
+}
\ No newline at end of file

From 4403db97f56edab7bb874f74ded803d101cc6129 Mon Sep 17 00:00:00 2001
From: Tara Aqeel <taraa@stud.ntnu.no>
Date: Tue, 13 Oct 2026 17:09:51 +0200
Subject: [PATCH 02/17] feat: add ingredients, allergens and nutrition info to
 product details

---
 .../src/productDetails/ProductDetailsPage.css | 144 ++++++++++++++++++
 .../src/productDetails/ProductDetailsPage.tsx |  96 +++++++++++-
 2 files changed, 235 insertions(+), 5 deletions(-)

diff --git a/frontend/src/productDetails/ProductDetailsPage.css b/frontend/src/productDetails/ProductDetailsPage.css
index d48e663..719f166 100644
--- a/frontend/src/productDetails/ProductDetailsPage.css
+++ b/frontend/src/productDetails/ProductDetailsPage.css
@@ -67,4 +67,148 @@
   .product-name {
     font-size: 32px;
   }
+}
+
+/* Prissammenligning */
+
+.store-prices {
+  margin-top: 28px;
+  border: 1px solid #780b2b;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.store-prices-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+}
+
+.store-prices-header h2 {
+  margin: 0;
+  font-size: 11px;
+  letter-spacing: 1px;
+}
+
+.store-prices-header span {
+  color: #777;
+  font-size: 10px;
+}
+
+.store-price-row {
+  display: grid;
+  grid-template-columns: 25px 1fr 100px 90px;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  border-top: 1px solid #eee;
+}
+
+.store-price-row.cheapest {
+  background-color: #fce8ef;
+}
+
+.store-number {
+  color: #d3045d;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.store-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.store-difference {
+  font-size: 10px;
+  color: #777;
+  text-align: right;
+}
+
+.cheapest .store-difference {
+  color: #d3045d;
+  font-weight: bold;
+}
+
+.store-price {
+  font-size: 14px;
+  font-weight: 600;
+  text-align: right;
+}
+
+@media (max-width: 600px) {
+  .store-price-row {
+    grid-template-columns: 20px minmax(0, 1fr) auto;
+    gap: 6px;
+    padding: 12px;
+  }
+
+  .store-difference {
+    grid-column: 2;
+    text-align: left;
+  }
+
+  .store-price {
+    grid-column: 3;
+    grid-row: 1 / 3;
+  }
+}
+
+.product-details-left {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.product-image {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-image figcaption {
+  font-size: 11px;
+  margin-top: 12px;
+  color: #777;
+}
+
+.product-ingredients,
+.product-allergens,
+.product-nutrition {
+  border-top: 1px solid #ddd;
+  padding-top: 16px;
+}
+
+.product-ingredients h2,
+.product-allergens h2,
+.product-nutrition h2 {
+  font-size: 12px;
+  letter-spacing: 1px;
+  margin-bottom: 12px;
+}
+
+.product-ingredients p,
+.product-allergens p {
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.product-nutrition dl {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.product-nutrition dt {
+  color: #555;
+}
+
+.product-nutrition dd {
+  margin: 0;
+  font-weight: 600;
+  text-align: right;
 }
\ No newline at end of file
diff --git a/frontend/src/productDetails/ProductDetailsPage.tsx b/frontend/src/productDetails/ProductDetailsPage.tsx
index d51886f..bcae7cc 100644
--- a/frontend/src/productDetails/ProductDetailsPage.tsx
+++ b/frontend/src/productDetails/ProductDetailsPage.tsx
@@ -1,15 +1,63 @@
 import "./ProductDetailsPage.css";
 
+type StorePrice = {
+  store: string;
+  price: number;
+};
+
+const storePrices: StorePrice[] = [
+  { store: "Kiwi", price: 79.9 },
+  { store: "Rema 1000", price: 81.4 },
+  { store: "Extra", price: 84.9 },
+  { store: "Meny", price: 92.9 },
+  { store: "Spar", price: 94.5 },
+];
+
 export default function ProductDetailsPage() {
   return (
     <main className="product-details-page">
-      <div className="product-details-layout">
+      <section className="product-details-layout">
 
         {/* Venstre side: Produktbilde */}
         <section className="product-details-left">
-          <div className="product-image">
+        <figure className="product-image">
             <p>Mangler bilde</p>
-          </div>
+            <figcaption>FIG. 5 — NORVEGIA 26 %, 500 G</figcaption>
+        </figure>
+
+        <section className="product-ingredients">
+            <h2>A — INGREDIENSER</h2>
+            <p>Pasteurisert kumelk, salt, syrekultur, løpe.</p>
+        </section>
+
+        <section className="product-allergens">
+            <h2>B — ALLERGENER</h2>
+            <p>MELK</p>
+        </section>
+
+        <section className="product-nutrition">
+            <h2>C — NÆRINGSINNHOLD PER 100 G</h2>
+
+            <dl>
+            <dt>Energi</dt>
+            <dd>1 469 kJ / 353 kcal</dd>
+
+            <dt>Fett</dt>
+            <dd>26 g</dd>
+
+            <dt>Hvorav mettede fettsyrer</dt>
+            <dd>17 g</dd>
+
+            <dt>Karbohydrater</dt>
+            <dd>0 g</dd>
+
+            <dt>Protein</dt>
+            <dd>27 g</dd>
+
+            <dt>Salt</dt>
+            <dd>1,2 g</dd>
+            </dl>
+        </section>
         </section>
 
         {/* Høyre side: Produktinformasjon */}
@@ -20,10 +68,48 @@ export default function ProductDetailsPage() {
 
           <p className="product-category">500 G · OST</p>
 
-          <h2 className="product-price">79,90 kr</h2>
+          <p className="product-price">79,90 kr</p>
+          <section className="store-prices" aria-labelledby="store-prices-title">
+            <header className="store-prices-header">
+                <h2 id="store-prices-title">PRIS I BUTIKKENE</h2>
+                <span>{storePrices.length} KJEDER</span>
+            </header>
+
+            <ol className="store-prices-list">
+                {[...storePrices]
+                .sort((a, b) => a.price - b.price)
+                .map((item, index, sortedPrices) => {
+                    const cheapestPrice = sortedPrices[0].price;
+                    const difference = item.price - cheapestPrice;
+
+                    return (
+                    <li
+                        className={`store-price-row ${index === 0 ? "cheapest" : ""}`}
+                        key={item.store}
+                    >
+                        <span className="store-number">
+                        {String(index + 1).padStart(2, "0")}
+                        </span>
+
+                        <span className="store-name">{item.store}</span>
+
+                        <span className="store-difference">
+                        {index === 0
+                            ? "BILLIGST"
+                            : `+${difference.toFixed(2).replace(".", ",")} KR`}
+                        </span>
+
+                        <span className="store-price">
+                        {item.price.toFixed(2).replace(".", ",")} kr
+                        </span>
+                    </li>
+                    );
+                })}
+            </ol>
+            </section>
         </section>
 
-      </div>
+      </section>
     </main>
   );
 }
\ No newline at end of file

From 253228fd48652af282bfd606f44e5c181db8d4b7 Mon Sep 17 00:00:00 2001
From: Tara Aqeel <taraa@stud.ntnu.no>
Date: Tue, 13 Oct 2026 17:40:31 +0200
Subject: [PATCH 03/17] feat: add shopping list controls to product details

---
 .../src/productDetails/ProductDetailsPage.tsx | 60 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/frontend/src/productDetails/ProductDetailsPage.tsx b/frontend/src/productDetails/ProductDetailsPage.tsx
index bcae7cc..141a4ec 100644
--- a/frontend/src/productDetails/ProductDetailsPage.tsx
+++ b/frontend/src/productDetails/ProductDetailsPage.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import "./ProductDetailsPage.css";
 
 type StorePrice = {
@@ -14,6 +15,9 @@ const storePrices: StorePrice[] = [
 ];
 
 export default function ProductDetailsPage() {
+    const [quantity, setQuantity] = useState(1);
+    const [isInList, setIsInList] = useState(true);
+    const [note, setNote] = useState("");
   return (
     <main className="product-details-page">
       <section className="product-details-layout">
@@ -107,8 +111,62 @@ export default function ProductDetailsPage() {
                 })}
             </ol>
             </section>
-        </section>
+            <section
+            className="shopping-list-controls"
+            aria-label="Handleliste"
+            >
+            <header className="shopping-list-header">
+                <h2>
+                {isInList ? "Står på lappen din" : "Ikke på lappen din"}
+                </h2>
+
+                <section className="quantity-controls" aria-label="Antall">
+                <button
+                    type="button"
+                    aria-label="Reduser antall"
+                    disabled={!isInList || quantity <= 1}
+                    onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                >
+                    −
+                </button>
+
+                <output aria-live="polite">{isInList ? quantity : 0}</output>
+
+                <button
+                    type="button"
+                    aria-label="Øk antall"
+                    onClick={() => {
+                    setQuantity((q) => (isInList ? q + 1 : 1));
+                    setIsInList(true);
+                    }}
+                >
+                    +
+                </button>
+                </section>
+            </header>
 
+            {isInList && (
+                <button
+                type="button"
+                className="remove-product"
+                onClick={() => setIsInList(false)}
+                >
+                Fjern fra lappen
+                </button>
+            )}
+
+            <label htmlFor="product-note">
+                NOTAT TIL LAPPEN (VALGFRITT)
+            </label>
+
+            <textarea
+                id="product-note"
+                placeholder="f.eks. skivet, hvis de har"
+                value={note}
+                onChange={(event) => setNote(event.target.value)}
+            />
+            </section>
+        </section>
       </section>
     </main>
   );

From 34deeaf2cd987f9a3210b1247a3186490794ff73 Mon Sep 17 00:00:00 2001
From: Annisa Alexis Muljono <annisaam@stud.ntnu.no>
Date: Wed, 14 Oct 2026 06:15:25 +0200
Subject: [PATCH 04/17] wip: implement search results page for issue #37

---
 frontend/search-preview.html                  |  12 +
 .../pages/SearchResults/SearchEmptyState.tsx  |   0
 .../src/pages/SearchResults/SearchFilters.tsx |  63 ++++
 .../pages/SearchResults/SearchProductList.tsx |  98 +++++
 .../pages/SearchResults/SearchResultsPage.css | 341 ++++++++++++++++++
 .../pages/SearchResults/SearchResultsPage.tsx |  71 ++++
 .../src/pages/SearchResults/searchQueries.ts  |  37 ++
 .../src/pages/SearchResults/searchTypes.ts    |  26 ++
 frontend/src/search-preview.tsx               |  15 +
 9 files changed, 663 insertions(+)
 create mode 100644 frontend/search-preview.html
 create mode 100644 frontend/src/pages/SearchResults/SearchEmptyState.tsx
 create mode 100644 frontend/src/pages/SearchResults/SearchFilters.tsx
 create mode 100644 frontend/src/pages/SearchResults/SearchProductList.tsx
 create mode 100644 frontend/src/pages/SearchResults/SearchResultsPage.css
 create mode 100644 frontend/src/pages/SearchResults/SearchResultsPage.tsx
 create mode 100644 frontend/src/pages/SearchResults/searchQueries.ts
 create mode 100644 frontend/src/pages/SearchResults/searchTypes.ts
 create mode 100644 frontend/src/search-preview.tsx

diff --git a/frontend/search-preview.html b/frontend/search-preview.html
new file mode 100644
index 0000000..6f42d7e
--- /dev/null
+++ b/frontend/search-preview.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="no">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Handlelappen – Søkeresultater</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/search-preview.tsx"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/frontend/src/pages/SearchResults/SearchEmptyState.tsx b/frontend/src/pages/SearchResults/SearchEmptyState.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/pages/SearchResults/SearchFilters.tsx b/frontend/src/pages/SearchResults/SearchFilters.tsx
new file mode 100644
index 0000000..606a41d
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchFilters.tsx
@@ -0,0 +1,63 @@
+
+type FilterOption = {
+  label: string;
+  count: number;
+};
+
+const categories: FilterOption[] = [
+  { label: "Ost", count: 148 },
+  { label: "Pålegg", count: 41 },
+  { label: "Meieri", count: 17 },
+  { label: "Frysevarer", count: 8 },
+];
+
+const stores: FilterOption[] = [
+  { label: "Kiwi", count: 132 },
+  { label: "Rema 1000", count: 158 },
+  { label: "Extra", count: 121 },
+  { label: "Meny", count: 196 },
+  { label: "Spar", count: 143 },
+  { label: "Bunnpris", count: 64 },
+];
+
+const labels: FilterOption[] = [
+  { label: "Økologisk", count: 12 },
+  { label: "Laktosefri", count: 23 },
+  { label: "Norskprodusert", count: 131 },
+];
+
+type FilterGroupProps = {
+  title: string;
+  letter: string;
+  options: FilterOption[];
+};
+
+function FilterGroup({ title, letter, options }: FilterGroupProps) {
+  return (
+    <fieldset className="search-filter-group">
+      <legend className="search-filter-heading">
+        <span>{letter}</span> {title}
+      </legend>
+
+      {options.map((option) => (
+        <label className="search-filter-option" key={option.label}>
+          <span className="search-filter-option-name">
+            <input type="checkbox" />
+            <span>{option.label}</span>
+          </span>
+          <span className="search-filter-count">{option.count}</span>
+        </label>
+      ))}
+    </fieldset>
+  );
+}
+
+export default function SearchFilters() {
+  return (
+    <div className="search-filters">
+      <FilterGroup title="Kategori" letter="A" options={categories} />
+      <FilterGroup title="Butikkjede" letter="B" options={stores} />
+      <FilterGroup title="Merking" letter="C" options={labels} />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/SearchResults/SearchProductList.tsx b/frontend/src/pages/SearchResults/SearchProductList.tsx
new file mode 100644
index 0000000..aeea7cf
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchProductList.tsx
@@ -0,0 +1,98 @@
+
+import type { SearchProduct, ProductPrice } from "./searchTypes";
+
+type SearchProductListProps = {
+  products: SearchProduct[];
+  selectedStore?: string | null;
+  onAddProduct?: (product: SearchProduct) => void;
+};
+
+const priceFormatter = new Intl.NumberFormat("nb-NO", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+function getDisplayPrice(
+  prices: ProductPrice[],
+  selectedStore?: string | null,
+): ProductPrice | null {
+  if (selectedStore) {
+    return (
+      prices.find((price) => price.storeCode === selectedStore) ?? null
+    );
+  }
+
+  if (prices.length === 0) {
+    return null;
+  }
+
+  return prices.reduce((lowest, current) =>
+    current.price < lowest.price ? current : lowest,
+  );
+}
+
+export default function SearchProductList({
+  products,
+  selectedStore,
+  onAddProduct,
+}: SearchProductListProps) {
+  return (
+    <div className="search-product-table">
+      <div className="search-product-table-header" aria-hidden="true">
+        <span>#</span>
+        <span>Vare</span>
+        <span>Kr/kg</span>
+        <span>Pris</span>
+        <span></span>
+      </div>
+
+      <ol className="search-product-items">
+        {products.map((product, index) => {
+          const displayPrice = getDisplayPrice(
+            product.prices,
+            selectedStore,
+          );
+
+          return (
+            <li className="search-product-row" key={product.ean}>
+              <span className="search-product-number">
+                {String(index + 1).padStart(3, "0")}
+              </span>
+
+              <div className="search-product-info">
+                <strong>{product.name}</strong>
+                {product.brand && (
+                  <span className="search-product-brand">
+                    {product.brand}
+                  </span>
+                )}
+              </div>
+
+              <span className="search-product-unit-price">
+                {displayPrice?.unitPrice != null
+                  ? priceFormatter.format(displayPrice.unitPrice)
+                  : "—"}
+              </span>
+
+              <span className="search-product-price">
+                {displayPrice
+                  ? priceFormatter.format(displayPrice.price)
+                  : "Pris mangler"}
+              </span>
+
+              <button
+                type="button"
+                className="search-product-add-button"
+                onClick={() => onAddProduct?.(product)}
+                disabled={!onAddProduct}
+                aria-label={`Legg ${product.name} på handlelisten`}
+              >
+                + Legg på lappen
+              </button>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.css b/frontend/src/pages/SearchResults/SearchResultsPage.css
new file mode 100644
index 0000000..a35d6a6
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.css
@@ -0,0 +1,341 @@
+/* Grunnstruktur for søkeresultatsiden */
+
+.search-results-page,
+.search-results-page * {
+  box-sizing: border-box;
+}
+
+.search-results-page {
+  font-family: var(--font-ui);
+  text-align: left;
+}
+
+.search-results-page h1,
+.search-results-page h2,
+.search-results-page h3 {
+  font-family: var(--font-ui);
+}
+
+.search-results-page {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 48px 40px 80px;
+  color: #202020;
+}
+
+.search-results-page h1,
+.search-results-page h2,
+.search-results-page h3 {
+  color: #202020;
+}
+
+.search-results-page .search-results-header h1 em {
+  color: #750021;
+}
+
+.search-results-header {
+  padding-bottom: 32px;
+  margin-bottom: 32px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.search-results-section-label {
+  margin: 0 0 12px;
+  color: #d60055;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+}
+
+.search-results-header h1 {
+  margin: 0 0 12px;
+  font-size: clamp(32px, 4vw, 48px);
+  font-weight: 500;
+  letter-spacing: -0.04em;
+}
+
+.search-results-header h1 em {
+  color: #750021;
+  font-family: Georgia, serif;
+  font-weight: 400;
+}
+
+.search-results-count {
+  margin: 0;
+  color: #777;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.search-results-layout {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr) 300px;
+  gap: 32px;
+  align-items: start;
+}
+
+.search-results-filters,
+.search-results-content,
+.search-results-shopping-list {
+  min-width: 0;
+}
+
+.search-results-filters h2,
+.search-results-shopping-list h2 {
+  margin-top: 0;
+  font-size: 16px;
+}
+
+.search-results-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.search-results-toolbar h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.search-results-list {
+  min-height: 300px;
+}
+
+.search-results-shopping-list {
+  border: 1px solid #750021;
+  padding: 24px;
+  background: #fff;
+  box-shadow: 6px 6px 0 #f6dce6;
+}
+
+@media (max-width: 1100px) {
+  .search-results-layout {
+    grid-template-columns: 180px minmax(0, 1fr);
+  }
+
+  .search-results-shopping-list {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 700px) {
+  .search-results-page {
+    padding: 24px 16px 48px;
+  }
+
+  .search-results-layout {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .search-results-header {
+    margin-bottom: 24px;
+  }
+
+  .search-results-filters,
+  .search-results-shopping-list {
+    grid-column: 1;
+  }
+}
+
+
+/* Filterpanel */
+
+.search-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  text-align: left;
+}
+
+.search-filter-group {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+.search-filter-heading {
+  width: 100%;
+  padding-bottom: 10px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #e5e5e5;
+  color: #222;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.search-filter-heading span {
+  color: #d60055;
+  margin-right: 6px;
+}
+
+.search-filter-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 7px 0;
+  font-size: 13px;
+  color: #222;
+  cursor: pointer;
+}
+
+.search-filter-option-name {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.search-filter-option input {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: #750021;
+  cursor: pointer;
+}
+
+.search-filter-count {
+  color: #888;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.search-filter-option:hover {
+  color: #a0003d;
+}
+
+.search-filter-option:focus-within {
+  outline: 2px solid #d60055;
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+
+/* Produktliste */
+
+.search-product-table {
+  width: 100%;
+}
+
+.search-product-table-header,
+.search-product-row {
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr) 80px 90px 145px;
+  column-gap: 12px;
+  align-items: center;
+}
+
+.search-product-table-header {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--blekk);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.search-product-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.search-product-row {
+  min-height: 70px;
+  padding: 12px 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.search-product-number {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: #999;
+}
+
+.search-product-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.search-product-info strong {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--blekk);
+}
+
+.search-product-brand {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: #888;
+  text-transform: uppercase;
+}
+
+.search-product-unit-price {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: #888;
+}
+
+.search-product-price {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--blekk);
+  font-variant-numeric: tabular-nums;
+}
+
+.search-product-add-button {
+  padding: 10px 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 7px;
+  background: var(--hvit);
+  color: var(--blekk);
+  font: 500 12px var(--font-ui);
+  cursor: pointer;
+}
+
+.search-product-add-button:hover:not(:disabled) {
+  background: var(--rosa);
+  border-color: var(--burgunder);
+}
+
+.search-product-add-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.search-product-add-button:focus-visible {
+  outline: 2px solid var(--bringebaer);
+  outline-offset: 3px;
+}
+
+@media (max-width: 900px) {
+  .search-product-table-header,
+  .search-product-row {
+    grid-template-columns: 28px minmax(0, 1fr) 80px;
+    gap: 10px;
+  }
+
+  .search-product-table-header span:nth-child(3),
+  .search-product-table-header span:nth-child(5),
+  .search-product-unit-price {
+    display: none;
+  }
+
+  .search-product-add-button {
+    grid-column: 2 / -1;
+    justify-self: start;
+  }
+}
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.tsx b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
new file mode 100644
index 0000000..e77dc64
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
@@ -0,0 +1,71 @@
+import "./SearchResultsPage.css";
+import SearchFilters from "./SearchFilters";
+import SearchProductList from "./SearchProductList";
+import { useQuery } from "@apollo/client/react";
+import { SEARCH_PRODUCTS_QUERY } from "./searchQueries";
+
+export default function SearchResultsPage() {
+  const { data, loading, error } = useQuery(SEARCH_PRODUCTS_QUERY, {
+    variables: {
+      search: "ost",
+      limit: 20,
+      offset: 0,
+    },
+  });
+
+  const products = data?.products ?? [];
+  return (
+    <main className="search-results-page">
+      <header className="search-results-header">
+        <p className="search-results-section-label">02 — SØK</p>
+        <h1>
+          Treff for <em>«ost»</em>
+        </h1>
+        <p className="search-results-count">
+          Søkeresultater
+        </p>
+      </header>
+
+      <div className="search-results-layout">
+        <aside
+            className="search-results-filters"
+            aria-label="Filtrer søkeresultater"
+        >
+            <SearchFilters />
+        </aside>
+
+        <section
+          className="search-results-content"
+          aria-label="Produkter"
+        >
+          <div className="search-results-toolbar">
+            <h2>Produkter</h2>
+            <p>Sortering kommer her.</p>
+          </div>
+
+          <div className="search-results-list" aria-live="polite">
+            {loading ? (
+              <p>Laster produkter...</p>
+            ) : error ? (
+              <p role="alert">
+                Kunne ikke hente produkter. Prøv igjen senere.
+              </p>
+            ) : products.length > 0 ? (
+              <SearchProductList products={products} />
+            ) : (
+              <p>Ingen produkter funnet for «ost».</p>
+            )}
+          </div>
+        </section>
+
+        <aside
+          className="search-results-shopping-list"
+          aria-label="Handleliste"
+        >
+          <h2>Min handleliste</h2>
+          <p>Handlelistekomponenten integreres senere.</p>
+        </aside>
+      </div>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/SearchResults/searchQueries.ts b/frontend/src/pages/SearchResults/searchQueries.ts
new file mode 100644
index 0000000..cdacffd
--- /dev/null
+++ b/frontend/src/pages/SearchResults/searchQueries.ts
@@ -0,0 +1,37 @@
+import { gql } from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+
+import type {
+  SearchProductsData,
+  SearchProductsVariables,
+} from "./searchTypes";
+
+export const SEARCH_PRODUCTS_QUERY: TypedDocumentNode<
+  SearchProductsData,
+  SearchProductsVariables
+> = gql`
+  query SearchProducts(
+    $search: String
+    $category: ID
+    $limit: Int
+    $offset: Int
+  ) {
+    products(
+      search: $search
+      category: $category
+      limit: $limit
+      offset: $offset
+    ) {
+      ean
+      name
+      brand
+      imageUrl
+      categoryId
+      prices {
+        storeCode
+        price
+        unitPrice
+      }
+    }
+  }
+`;
diff --git a/frontend/src/pages/SearchResults/searchTypes.ts b/frontend/src/pages/SearchResults/searchTypes.ts
new file mode 100644
index 0000000..9db0202
--- /dev/null
+++ b/frontend/src/pages/SearchResults/searchTypes.ts
@@ -0,0 +1,26 @@
+
+export type ProductPrice = {
+  storeCode: string;
+  price: number;
+  unitPrice: number | null;
+};
+
+export type SearchProduct = {
+  ean: string;
+  name: string;
+  brand: string | null;
+  imageUrl: string | null;
+  categoryId: string | null;
+  prices: ProductPrice[];
+};
+
+export type SearchProductsData = {
+  products: SearchProduct[];
+};
+
+export type SearchProductsVariables = {
+  search?: string;
+  category?: string;
+  limit?: number;
+  offset?: number;
+};
diff --git a/frontend/src/search-preview.tsx b/frontend/src/search-preview.tsx
new file mode 100644
index 0000000..5821d60
--- /dev/null
+++ b/frontend/src/search-preview.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ApolloProvider } from "@apollo/client/react";
+
+import { apolloClient } from "./apolloClient";
+import SearchResultsPage from "./pages/SearchResults/SearchResultsPage";
+import "./tema.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ApolloProvider client={apolloClient}>
+      <SearchResultsPage />
+    </ApolloProvider>
+  </React.StrictMode>,
+);

From bcaf1d140516dc0a685cb193e52d186d4b2ae7dd Mon Sep 17 00:00:00 2001
From: Annisa Alexis Muljono <annisaam@stud.ntnu.no>
Date: Wed, 14 Oct 2026 08:02:48 +0200
Subject: [PATCH 05/17] feat: add store filtering for issue #37

---
 backend/src/index.ts                          |  80 ++++-
 .../src/pages/SearchResults/SearchFilters.tsx | 127 ++++---
 .../src/pages/SearchResults/SearchInput.tsx   |  39 +++
 .../pages/SearchResults/SearchPagination.tsx  |  76 ++++
 .../pages/SearchResults/SearchResultsPage.css | 330 ++++++++++++------
 .../pages/SearchResults/SearchResultsPage.tsx | 143 +++++++-
 .../src/pages/SearchResults/searchQueries.ts  |   8 +
 .../src/pages/SearchResults/searchTypes.ts    |   2 +
 8 files changed, 632 insertions(+), 173 deletions(-)
 create mode 100644 frontend/src/pages/SearchResults/SearchInput.tsx
 create mode 100644 frontend/src/pages/SearchResults/SearchPagination.tsx

diff --git a/backend/src/index.ts b/backend/src/index.ts
index def069b..6dee500 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -31,10 +31,17 @@ const typeDefs = `#graphql
     products(
       search: String
       category: ID
+      storeCode: String
       limit: Int = 20
       offset: Int = 0
     ): [Product!]!
 
+    productsCount(
+      search: String
+      category: ID
+      storeCode: String
+    ): Int!
+
     product(ean: String!): Product
 
     categories: [Category!]!
@@ -103,44 +110,91 @@ const resolvers = {
       return result.rows[0] ?? null;
     },
 
-
     products: async (
       _parent: unknown,
       args: {
         search?: string;
         category?: string;
+        storeCode?: string;
         limit?: number;
         offset?: number;
       },
     ) => {
       const search = args.search ?? null;
       const category = args.category ?? null;
+      const storeCode = args.storeCode ?? null;
       const limit = args.limit ?? 20;
       const offset = args.offset ?? 0;
 
       const result = await pool.query(
         `
         SELECT
-          ean,
-          name,
-          brand,
-          image_url AS "imageUrl",
-          category_id AS "categoryId"
-        FROM products
+          p.ean,
+          p.name,
+          p.brand,
+          p.image_url AS "imageUrl",
+          p.category_id AS "categoryId"
+        FROM products p
         WHERE
-          ($1::text IS NULL OR name ILIKE '%' || $1 || '%')
+          ($1::text IS NULL OR p.name ILIKE '%' || $1 || '%')
           AND
-          ($2::integer IS NULL OR category_id = $2)
-        ORDER BY name
-        LIMIT $3
-        OFFSET $4
+          ($2::integer IS NULL OR p.category_id = $2)
+          AND
+          (
+            $3::text IS NULL
+            OR EXISTS (
+              SELECT 1
+              FROM prices pr
+              WHERE pr.ean = p.ean
+                AND pr.store_code = $3
+            )
+          )
+        ORDER BY p.name, p.ean
+        LIMIT $4
+        OFFSET $5
         `,
-        [search, category, limit, offset],
+        [search, category, storeCode, limit, offset],
       );
 
       return result.rows;
     },
 
+    productsCount: async (
+      _parent: unknown,
+      args: {
+        search?: string;
+        category?: string;
+        storeCode?: string;
+      },
+    ) => {
+      const search = args.search ?? null;
+      const category = args.category ?? null;
+      const storeCode = args.storeCode ?? null;
+
+      const result = await pool.query(
+        `
+        SELECT COUNT(*)::integer AS count
+        FROM products p
+        WHERE
+          ($1::text IS NULL OR p.name ILIKE '%' || $1 || '%')
+          AND
+          ($2::integer IS NULL OR p.category_id = $2)
+          AND
+          (
+            $3::text IS NULL
+            OR EXISTS (
+              SELECT 1
+              FROM prices pr
+              WHERE pr.ean = p.ean
+                AND pr.store_code = $3
+            )
+          )
+        `,
+        [search, category, storeCode],
+      );
+
+      return result.rows[0].count;
+    },
 
     shoppingList: async (
       _parent: unknown,
diff --git a/frontend/src/pages/SearchResults/SearchFilters.tsx b/frontend/src/pages/SearchResults/SearchFilters.tsx
index 606a41d..f40d052 100644
--- a/frontend/src/pages/SearchResults/SearchFilters.tsx
+++ b/frontend/src/pages/SearchResults/SearchFilters.tsx
@@ -1,63 +1,106 @@
 
 type FilterOption = {
   label: string;
-  count: number;
+  value: string;
+  count?: number;
 };
 
 const categories: FilterOption[] = [
-  { label: "Ost", count: 148 },
-  { label: "Pålegg", count: 41 },
-  { label: "Meieri", count: 17 },
-  { label: "Frysevarer", count: 8 },
+  { label: "Ost", value: "ost" },
+  { label: "Pålegg", value: "palegg" },
+  { label: "Meieri", value: "meieri" },
+  { label: "Frysevarer", value: "frysevarer" },
 ];
 
 const stores: FilterOption[] = [
-  { label: "Kiwi", count: 132 },
-  { label: "Rema 1000", count: 158 },
-  { label: "Extra", count: 121 },
-  { label: "Meny", count: 196 },
-  { label: "Spar", count: 143 },
-  { label: "Bunnpris", count: 64 },
+  { label: "Kiwi", value: "KIWI" },
+  { label: "Meny", value: "MENY_NO" },
+  { label: "Spar", value: "SPAR_NO" },
+  { label: "Bunnpris", value: "BUNNPRIS" },
+  { label: "Coop", value: "COOP_NO" },
+  { label: "Joker", value: "JOKER_NO" },
+  { label: "Oda", value: "ODA_NO" },
+  { label: "Europris", value: "EUROPRIS_NO" },
 ];
 
 const labels: FilterOption[] = [
-  { label: "Økologisk", count: 12 },
-  { label: "Laktosefri", count: 23 },
-  { label: "Norskprodusert", count: 131 },
+  { label: "Økologisk", value: "organic" },
+  { label: "Laktosefri", value: "lactose-free" },
+  { label: "Norskprodusert", value: "norwegian" },
 ];
 
-type FilterGroupProps = {
-  title: string;
-  letter: string;
-  options: FilterOption[];
+type SearchFiltersProps = {
+  selectedStore: string | null;
+  onStoreChange: (store: string | null) => void;
 };
 
-function FilterGroup({ title, letter, options }: FilterGroupProps) {
-  return (
-    <fieldset className="search-filter-group">
-      <legend className="search-filter-heading">
-        <span>{letter}</span> {title}
-      </legend>
-
-      {options.map((option) => (
-        <label className="search-filter-option" key={option.label}>
-          <span className="search-filter-option-name">
-            <input type="checkbox" />
-            <span>{option.label}</span>
-          </span>
-          <span className="search-filter-count">{option.count}</span>
-        </label>
-      ))}
-    </fieldset>
-  );
-}
-
-export default function SearchFilters() {
+export default function SearchFilters({
+  selectedStore,
+  onStoreChange,
+}: SearchFiltersProps) {
   return (
     <div className="search-filters">
-      <FilterGroup title="Kategori" letter="A" options={categories} />
-      <FilterGroup title="Butikkjede" letter="B" options={stores} />
-      <FilterGroup title="Merking" letter="C" options={labels} />
+      <fieldset className="search-filter-group">
+        <legend className="search-filter-heading">
+          <span>A</span> Kategori
+        </legend>
+
+        {categories.map((category) => (
+          <label
+            className="search-filter-option"
+            key={category.value}
+          >
+            <span className="search-filter-option-name">
+              <input type="checkbox" disabled />
+              <span>{category.label}</span>
+            </span>
+          </label>
+        ))}
+      </fieldset>
+
+      <fieldset className="search-filter-group">
+        <legend className="search-filter-heading">
+          <span>B</span> Butikkjede
+        </legend>
+
+        {stores.map((store) => (
+          <label
+            className="search-filter-option"
+            key={store.value}
+          >
+            <span className="search-filter-option-name">
+              <input
+                type="checkbox"
+                checked={selectedStore === store.value}
+                onChange={(event) =>
+                  onStoreChange(
+                    event.target.checked ? store.value : null,
+                  )
+                }
+              />
+              <span>{store.label}</span>
+            </span>
+          </label>
+        ))}
+      </fieldset>
+
+      <fieldset className="search-filter-group">
+        <legend className="search-filter-heading">
+          <span>C</span> Merking
+        </legend>
+
+        {labels.map((label) => (
+          <label
+            className="search-filter-option"
+            key={label.value}
+          >
+            <span className="search-filter-option-name">
+              <input type="checkbox" disabled />
+              <span>{label.label}</span>
+            </span>
+          </label>
+        ))}
+      </fieldset>
     </div>
   );
 }
diff --git a/frontend/src/pages/SearchResults/SearchInput.tsx b/frontend/src/pages/SearchResults/SearchInput.tsx
new file mode 100644
index 0000000..2fa680a
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchInput.tsx
@@ -0,0 +1,39 @@
+
+import { useEffect, useState } from "react";
+import "../../components/searchfield/Searchfield.css";
+
+type SearchInputProps = {
+  value: string;
+  onSearchChange: (value: string) => void;
+};
+
+export default function SearchInput({
+  value,
+  onSearchChange,
+}: SearchInputProps) {
+  const [inputValue, setInputValue] = useState(value);
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      onSearchChange(inputValue.trim());
+    }, 350);
+
+    return () => window.clearTimeout(timeout);
+  }, [inputValue, onSearchChange]);
+
+  return (
+    <div className="search-field">
+      <span className="search-field__icon" aria-hidden="true" />
+
+      <input
+        className="search-field__input"
+        type="search"
+        value={inputValue}
+        onChange={(event) => setInputValue(event.target.value)}
+        placeholder="Søk etter matvarer..."
+        aria-label="Søk etter matvarer"
+      />
+    </div>
+  );
+}
+
diff --git a/frontend/src/pages/SearchResults/SearchPagination.tsx b/frontend/src/pages/SearchResults/SearchPagination.tsx
new file mode 100644
index 0000000..c28b03c
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchPagination.tsx
@@ -0,0 +1,76 @@
+
+type SearchPaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+};
+
+export default function SearchPagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: SearchPaginationProps) {
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  const pages = Array.from(
+    new Set([
+      1,
+      2,
+      currentPage - 1,
+      currentPage,
+      currentPage + 1,
+      totalPages,
+    ]),
+  )
+    .filter((page) => page >= 1 && page <= totalPages)
+    .sort((a, b) => a - b);
+
+  return (
+    <nav
+      className="search-pagination"
+      aria-label="Sider med søkeresultater"
+    >
+      <button
+        type="button"
+        disabled={currentPage === 1}
+        onClick={() => onPageChange(currentPage - 1)}
+        aria-label="Forrige side"
+      >
+        ←
+      </button>
+
+      {pages.map((page, index) => (
+        <span key={page} className="search-pagination-item">
+          {index > 0 && page > pages[index - 1] + 1 && (
+            <span aria-hidden="true">…</span>
+          )}
+
+          <button
+            type="button"
+            className={
+              page === currentPage ? "is-active" : ""
+            }
+            aria-label={`Side ${page}`}
+            aria-current={
+              page === currentPage ? "page" : undefined
+            }
+            onClick={() => onPageChange(page)}
+          >
+            {page}
+          </button>
+        </span>
+      ))}
+
+      <button
+        type="button"
+        disabled={currentPage === totalPages}
+        onClick={() => onPageChange(currentPage + 1)}
+        aria-label="Neste side"
+      >
+        →
+      </button>
+    </nav>
+  );
+}
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.css b/frontend/src/pages/SearchResults/SearchResultsPage.css
index a35d6a6..61bc247 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.css
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.css
@@ -1,51 +1,54 @@
-/* Grunnstruktur for søkeresultatsiden */
+
+/* =========================================
+   HANDLELAPPEN – SØKERESULTATER
+   Issue #37
+
+   Farger og fonter hentes fra theme.css.
+   Fungerer i både light og dark mode.
+   ========================================= */
+
+/* Grunnstruktur */
 
 .search-results-page,
 .search-results-page * {
   box-sizing: border-box;
 }
 
-.search-results-page {
-  font-family: var(--font-ui);
-  text-align: left;
-}
-
-.search-results-page h1,
-.search-results-page h2,
-.search-results-page h3 {
-  font-family: var(--font-ui);
-}
-
 .search-results-page {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
   padding: 48px 40px 80px;
-  color: #202020;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  text-align: left;
 }
 
 .search-results-page h1,
 .search-results-page h2,
 .search-results-page h3 {
-  color: #202020;
+  margin-top: 0;
+  color: var(--text-primary);
+  font-family: var(--font-ui);
 }
 
-.search-results-page .search-results-header h1 em {
-  color: #750021;
-}
+/* Overskrift */
 
 .search-results-header {
   padding-bottom: 32px;
   margin-bottom: 32px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--border-hairline);
 }
 
 .search-results-section-label {
   margin: 0 0 12px;
-  color: #d60055;
+  color: var(--text-accent);
+  font-family: var(--font-mono);
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
 .search-results-header h1 {
@@ -53,22 +56,27 @@
   font-size: clamp(32px, 4vw, 48px);
   font-weight: 500;
   letter-spacing: -0.04em;
+  line-height: 1.15;
 }
 
 .search-results-header h1 em {
-  color: #750021;
-  font-family: Georgia, serif;
+  color: var(--text-brand);
+  font-family: var(--font-accent);
+  font-style: italic;
   font-weight: 400;
 }
 
 .search-results-count {
   margin: 0;
-  color: #777;
-  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
+/* Hovedlayout */
+
 .search-results-layout {
   display: grid;
   grid-template-columns: 200px minmax(0, 1fr) 300px;
@@ -82,19 +90,16 @@
   min-width: 0;
 }
 
-.search-results-filters h2,
-.search-results-shopping-list h2 {
-  margin-top: 0;
-  font-size: 16px;
-}
+/* Verktøylinje */
 
 .search-results-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 16px;
   margin-bottom: 20px;
   padding-bottom: 12px;
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: 1px solid var(--border-hairline);
 }
 
 .search-results-toolbar h2 {
@@ -107,45 +112,30 @@
   min-height: 300px;
 }
 
+/* Midlertidig handlelisteområde.
+   Erstattes senere med Lindes komponent. */
+
 .search-results-shopping-list {
-  border: 1px solid #750021;
   padding: 24px;
-  background: #fff;
-  box-shadow: 6px 6px 0 #f6dce6;
+  background: var(--note-paper);
+  color: var(--note-ink);
+  border: 1px solid var(--border-strong);
+  box-shadow: 6px 6px 0 var(--note-tint);
 }
 
-@media (max-width: 1100px) {
-  .search-results-layout {
-    grid-template-columns: 180px minmax(0, 1fr);
-  }
-
-  .search-results-shopping-list {
-    grid-column: 1 / -1;
-  }
+.search-results-shopping-list h2 {
+  margin: 0 0 12px;
+  color: var(--note-ink);
+  font-size: 16px;
 }
 
-@media (max-width: 700px) {
-  .search-results-page {
-    padding: 24px 16px 48px;
-  }
-
-  .search-results-layout {
-    grid-template-columns: 1fr;
-    gap: 24px;
-  }
-
-  .search-results-header {
-    margin-bottom: 24px;
-  }
-
-  .search-results-filters,
-  .search-results-shopping-list {
-    grid-column: 1;
-  }
+.search-results-shopping-list p {
+  color: var(--text-secondary);
 }
 
-
-/* Filterpanel */
+/* =========================================
+   FILTERPANEL
+   ========================================= */
 
 .search-filters {
   display: flex;
@@ -155,27 +145,28 @@
 }
 
 .search-filter-group {
-  border: 0;
+  min-width: 0;
   margin: 0;
   padding: 0;
-  min-width: 0;
+  border: 0;
 }
 
 .search-filter-heading {
   width: 100%;
   padding-bottom: 10px;
   margin-bottom: 12px;
-  border-bottom: 1px solid #e5e5e5;
-  color: #222;
+  border-bottom: 1px solid var(--border-hairline);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
 .search-filter-heading span {
-  color: #d60055;
   margin-right: 6px;
+  color: var(--text-accent);
 }
 
 .search-filter-option {
@@ -184,8 +175,8 @@
   align-items: center;
   gap: 12px;
   padding: 7px 0;
+  color: var(--text-primary);
   font-size: 13px;
-  color: #222;
   cursor: pointer;
 }
 
@@ -195,32 +186,55 @@
   gap: 9px;
 }
 
+/* Samme visuelle prinsipp som Lindes Checkbox */
+
 .search-filter-option input {
-  width: 15px;
-  height: 15px;
+  appearance: none;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
   margin: 0;
-  accent-color: #750021;
+  background: var(--bg-surface);
+  border: 1.25px solid var(--border-brand);
+  border-radius: 3px;
   cursor: pointer;
 }
 
+.search-filter-option input:checked {
+  background: var(--bg-brand);
+  border-color: var(--bg-brand);
+}
+
+.search-filter-option input:checked::after {
+  content: "";
+  width: 8px;
+  height: 4px;
+  border-left: 1.8px solid var(--text-on-dark);
+  border-bottom: 1.8px solid var(--text-on-dark);
+  transform: translateY(-1px) rotate(-45deg);
+}
+
+.search-filter-option input:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 2px;
+}
+
 .search-filter-count {
-  color: #888;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
   font-size: 11px;
   font-variant-numeric: tabular-nums;
 }
 
 .search-filter-option:hover {
-  color: #a0003d;
+  color: var(--text-accent);
 }
 
-.search-filter-option:focus-within {
-  outline: 2px solid #d60055;
-  outline-offset: 3px;
-  border-radius: 2px;
-}
-
-
-/* Produktliste */
+/* =========================================
+   PRODUKTLISTE
+   ========================================= */
 
 .search-product-table {
   width: 100%;
@@ -229,37 +243,38 @@
 .search-product-table-header,
 .search-product-row {
   display: grid;
-  grid-template-columns: 32px minmax(0, 1fr) 80px 90px 145px;
+  grid-template-columns:
+    32px minmax(0, 1fr) 80px 90px 145px;
   column-gap: 12px;
   align-items: center;
 }
 
 .search-product-table-header {
   padding: 12px 0;
-  border-bottom: 1px solid var(--blekk);
+  border-bottom: 1px solid var(--border-strong);
+  color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 10px;
-  color: #888;
-  text-transform: uppercase;
   letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .search-product-items {
-  list-style: none;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .search-product-row {
   min-height: 70px;
   padding: 12px 0;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--border-hairline);
 }
 
 .search-product-number {
+  color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 11px;
-  color: #999;
 }
 
 .search-product-info {
@@ -270,45 +285,45 @@
 }
 
 .search-product-info strong {
+  color: var(--text-primary);
   font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--blekk);
 }
 
 .search-product-brand {
+  color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 10px;
-  color: #888;
   text-transform: uppercase;
 }
 
 .search-product-unit-price {
+  color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 11px;
-  color: #888;
 }
 
 .search-product-price {
+  color: var(--text-primary);
   font-size: 15px;
   font-weight: 500;
-  color: var(--blekk);
   font-variant-numeric: tabular-nums;
 }
 
 .search-product-add-button {
   padding: 10px 8px;
-  border: 1px solid #e5e5e5;
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border-hairline);
   border-radius: 7px;
-  background: var(--hvit);
-  color: var(--blekk);
   font: 500 12px var(--font-ui);
   cursor: pointer;
 }
 
 .search-product-add-button:hover:not(:disabled) {
-  background: var(--rosa);
-  border-color: var(--burgunder);
+  background: var(--bg-tint);
+  border-color: var(--border-brand);
 }
 
 .search-product-add-button:disabled {
@@ -317,10 +332,24 @@
 }
 
 .search-product-add-button:focus-visible {
-  outline: 2px solid var(--bringebaer);
+  outline: 2px solid var(--text-accent);
   outline-offset: 3px;
 }
 
+/* =========================================
+   RESPONSIVT DESIGN
+   ========================================= */
+
+@media (max-width: 1100px) {
+  .search-results-layout {
+    grid-template-columns: 180px minmax(0, 1fr);
+  }
+
+  .search-results-shopping-list {
+    grid-column: 1 / -1;
+  }
+}
+
 @media (max-width: 900px) {
   .search-product-table-header,
   .search-product-row {
@@ -339,3 +368,106 @@
     justify-self: start;
   }
 }
+
+@media (max-width: 700px) {
+  .search-results-page {
+    padding: 24px 16px 48px;
+  }
+
+  .search-results-layout {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .search-results-header {
+    margin-bottom: 24px;
+  }
+
+  .search-results-filters,
+  .search-results-shopping-list {
+    grid-column: 1;
+  }
+}
+
+/* Søkefelt på søkeresultatsiden */
+
+.search-results-searchbar {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 36px;
+}
+
+.search-results-searchbar .search-field {
+  width: 100%;
+  max-width: 640px;
+}
+
+@media (max-width: 700px) {
+  .search-results-searchbar {
+    margin-bottom: 24px;
+  }
+}
+
+
+/* Paginering */
+
+.search-pagination-count {
+  margin: 24px 0 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+
+.search-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.search-pagination-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-pagination button {
+  min-width: 36px;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border-hairline);
+  border-radius: 7px;
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font: 500 12px var(--font-mono);
+  cursor: pointer;
+}
+
+.search-pagination button:hover:not(:disabled) {
+  background: var(--bg-tint);
+  border-color: var(--border-brand);
+}
+
+.search-pagination button.is-active {
+  background: var(--bg-brand);
+  color: var(--text-on-dark);
+  border-color: var(--bg-brand);
+}
+
+.search-pagination button:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 3px;
+}
+
+.search-pagination button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.search-pagination-item > span {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.tsx b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
index e77dc64..4b50101 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.tsx
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
@@ -1,37 +1,117 @@
-import "./SearchResultsPage.css";
+
+import { useCallback, useState } from "react";
+import { useQuery } from "@apollo/client/react";
+
 import SearchFilters from "./SearchFilters";
+import SearchInput from "./SearchInput";
+import SearchPagination from "./SearchPagination";
 import SearchProductList from "./SearchProductList";
-import { useQuery } from "@apollo/client/react";
 import { SEARCH_PRODUCTS_QUERY } from "./searchQueries";
 
+import "./SearchResultsPage.css";
+
+const PAGE_SIZE = 20;
+
 export default function SearchResultsPage() {
-  const { data, loading, error } = useQuery(SEARCH_PRODUCTS_QUERY, {
-    variables: {
-      search: "ost",
-      limit: 20,
-      offset: 0,
+  const [searchTerm, setSearchTerm] = useState("ost");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedStore, setSelectedStore] = useState<string | null>(null);
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1);
+  }, []);
+
+  const handleStoreChange = (store: string | null) => {
+    setSelectedStore(store);
+    setCurrentPage(1);
+  };
+
+  const { data, loading, error } = useQuery(
+    SEARCH_PRODUCTS_QUERY,
+    {
+      variables: {
+        search: searchTerm,
+        storeCode: selectedStore ?? undefined,
+        limit: PAGE_SIZE,
+        offset: (currentPage - 1) * PAGE_SIZE,
+      },
+      skip: searchTerm.length === 0,
+      
     },
-  });
+  );
 
   const products = data?.products ?? [];
+  const totalProducts = data?.productsCount ?? 0;
+  const totalPages = Math.ceil(totalProducts / PAGE_SIZE);
+
+  const firstProduct = (currentPage - 1) * PAGE_SIZE + 1;
+  const lastProduct = Math.min(
+    currentPage * PAGE_SIZE,
+    totalProducts,
+  );
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  const storeNames: Record<string, string> = {
+    KIWI: "Kiwi",
+    MENY_NO: "Meny",
+    SPAR_NO: "Spar",
+    BUNNPRIS: "Bunnpris",
+    COOP_NO: "Coop",
+    JOKER_NO: "Joker",
+    ODA_NO: "Oda",
+    EUROPRIS_NO: "Europris",
+  };
+
+  const selectedStoreName = selectedStore
+    ? storeNames[selectedStore]
+    : null;
+
   return (
     <main className="search-results-page">
+      <div className="search-results-searchbar">
+        <SearchInput
+          value={searchTerm}
+          onSearchChange={handleSearchChange}
+        />
+      </div>
+
       <header className="search-results-header">
-        <p className="search-results-section-label">02 — SØK</p>
+        <p className="search-results-section-label">
+          02 — SØK
+        </p>
+
         <h1>
-          Treff for <em>«ost»</em>
+          {searchTerm ? (
+            <>
+              Treff for <em>«{searchTerm}»</em>
+              {selectedStoreName && ` hos ${selectedStoreName}`}
+            </>
+          ) : (
+            "Søk etter matvarer"
+          )}
         </h1>
+
         <p className="search-results-count">
-          Søkeresultater
+          {searchTerm && !loading && !error
+            ? `${totalProducts} produkter funnet`
+            : "Søkeresultater"}
         </p>
       </header>
 
       <div className="search-results-layout">
         <aside
-            className="search-results-filters"
-            aria-label="Filtrer søkeresultater"
+          className="search-results-filters"
+          aria-label="Filtrer søkeresultater"
         >
-            <SearchFilters />
+          <SearchFilters
+            selectedStore={selectedStore}
+            onStoreChange={handleStoreChange}
+          />
         </aside>
 
         <section
@@ -43,17 +123,42 @@ export default function SearchResultsPage() {
             <p>Sortering kommer her.</p>
           </div>
 
-          <div className="search-results-list" aria-live="polite">
-            {loading ? (
+          <div
+            className="search-results-list"
+            aria-live="polite"
+            aria-busy={loading}
+          >
+            {!searchTerm ? (
+              <p>Skriv inn et søkeord for å finne matvarer.</p>
+            ) : loading ? (
               <p>Laster produkter...</p>
             ) : error ? (
               <p role="alert">
                 Kunne ikke hente produkter. Prøv igjen senere.
               </p>
             ) : products.length > 0 ? (
-              <SearchProductList products={products} />
+              <>
+                <SearchProductList
+                  products={products}
+                  selectedStore={selectedStore}
+                />
+
+                <p className="search-pagination-count">
+                  Viser {firstProduct}–{lastProduct} av{" "}
+                  {totalProducts} produkter
+                </p>
+
+                <SearchPagination
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  onPageChange={handlePageChange}
+                />
+              </>
             ) : (
-              <p>Ingen produkter funnet for «ost».</p>
+              <p>
+                Ingen produkter funnet for «{searchTerm}».
+                Prøv et annet søkeord.
+              </p>
             )}
           </div>
         </section>
@@ -68,4 +173,4 @@ export default function SearchResultsPage() {
       </div>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/SearchResults/searchQueries.ts b/frontend/src/pages/SearchResults/searchQueries.ts
index cdacffd..4cf9838 100644
--- a/frontend/src/pages/SearchResults/searchQueries.ts
+++ b/frontend/src/pages/SearchResults/searchQueries.ts
@@ -13,12 +13,14 @@ export const SEARCH_PRODUCTS_QUERY: TypedDocumentNode<
   query SearchProducts(
     $search: String
     $category: ID
+    $storeCode: String
     $limit: Int
     $offset: Int
   ) {
     products(
       search: $search
       category: $category
+      storeCode: $storeCode
       limit: $limit
       offset: $offset
     ) {
@@ -33,5 +35,11 @@ export const SEARCH_PRODUCTS_QUERY: TypedDocumentNode<
         unitPrice
       }
     }
+
+    productsCount(
+      search: $search
+      category: $category
+      storeCode: $storeCode
+    )
   }
 `;
diff --git a/frontend/src/pages/SearchResults/searchTypes.ts b/frontend/src/pages/SearchResults/searchTypes.ts
index 9db0202..628f382 100644
--- a/frontend/src/pages/SearchResults/searchTypes.ts
+++ b/frontend/src/pages/SearchResults/searchTypes.ts
@@ -16,11 +16,13 @@ export type SearchProduct = {
 
 export type SearchProductsData = {
   products: SearchProduct[];
+  productsCount: number;
 };
 
 export type SearchProductsVariables = {
   search?: string;
   category?: string;
+  storeCode?: string;
   limit?: number;
   offset?: number;
 };

From e34ab3fb4dbbff0d2b0cbd84da88ea627bedab22 Mon Sep 17 00:00:00 2001
From: Annisa Alexis Muljono <annisaam@stud.ntnu.no>
Date: Wed, 14 Oct 2026 08:13:28 +0200
Subject: [PATCH 06/17] feat: add hierarchical category filtering for issue #37

---
 backend/src/index.ts                          | 57 ++++++++++++++---
 .../src/pages/SearchResults/SearchFilters.tsx | 54 +++++++---------
 .../pages/SearchResults/SearchProductList.tsx | 32 ++++++++--
 .../pages/SearchResults/SearchResultsPage.css | 61 +++++++++++++++++++
 .../pages/SearchResults/SearchResultsPage.tsx | 58 +++++++++++++++++-
 5 files changed, 214 insertions(+), 48 deletions(-)

diff --git a/backend/src/index.ts b/backend/src/index.ts
index 6dee500..31d6b13 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -123,11 +123,23 @@ const resolvers = {
       const search = args.search ?? null;
       const category = args.category ?? null;
       const storeCode = args.storeCode ?? null;
-      const limit = args.limit ?? 20;
-      const offset = args.offset ?? 0;
+      const limit = Math.min(Math.max(args.limit ?? 20, 1), 100);
+      const offset = Math.max(args.offset ?? 0, 0);
 
       const result = await pool.query(
         `
+        WITH RECURSIVE selected_categories AS (
+          SELECT id
+          FROM categories
+          WHERE id = $2::integer
+
+          UNION
+
+          SELECT c.id
+          FROM categories c
+          INNER JOIN selected_categories sc
+            ON c.parent_id = sc.id
+        )
         SELECT
           p.ean,
           p.name,
@@ -136,11 +148,17 @@ const resolvers = {
           p.category_id AS "categoryId"
         FROM products p
         WHERE
-          ($1::text IS NULL OR p.name ILIKE '%' || $1 || '%')
-          AND
-          ($2::integer IS NULL OR p.category_id = $2)
-          AND
           (
+            $1::text IS NULL
+            OR p.name ILIKE '%' || $1 || '%'
+          )
+          AND (
+            $2::integer IS NULL
+            OR p.category_id IN (
+              SELECT id FROM selected_categories
+            )
+          )
+          AND (
             $3::text IS NULL
             OR EXISTS (
               SELECT 1
@@ -159,6 +177,7 @@ const resolvers = {
       return result.rows;
     },
 
+    
     productsCount: async (
       _parent: unknown,
       args: {
@@ -173,14 +192,32 @@ const resolvers = {
 
       const result = await pool.query(
         `
+        WITH RECURSIVE selected_categories AS (
+          SELECT id
+          FROM categories
+          WHERE id = $2::integer
+
+          UNION
+
+          SELECT c.id
+          FROM categories c
+          INNER JOIN selected_categories sc
+            ON c.parent_id = sc.id
+        )
         SELECT COUNT(*)::integer AS count
         FROM products p
         WHERE
-          ($1::text IS NULL OR p.name ILIKE '%' || $1 || '%')
-          AND
-          ($2::integer IS NULL OR p.category_id = $2)
-          AND
           (
+            $1::text IS NULL
+            OR p.name ILIKE '%' || $1 || '%'
+          )
+          AND (
+            $2::integer IS NULL
+            OR p.category_id IN (
+              SELECT id FROM selected_categories
+            )
+          )
+          AND (
             $3::text IS NULL
             OR EXISTS (
               SELECT 1
diff --git a/frontend/src/pages/SearchResults/SearchFilters.tsx b/frontend/src/pages/SearchResults/SearchFilters.tsx
index f40d052..28f5852 100644
--- a/frontend/src/pages/SearchResults/SearchFilters.tsx
+++ b/frontend/src/pages/SearchResults/SearchFilters.tsx
@@ -2,14 +2,12 @@
 type FilterOption = {
   label: string;
   value: string;
-  count?: number;
 };
 
 const categories: FilterOption[] = [
-  { label: "Ost", value: "ost" },
-  { label: "Pålegg", value: "palegg" },
-  { label: "Meieri", value: "meieri" },
-  { label: "Frysevarer", value: "frysevarer" },
+  { label: "Ost", value: "19" },
+  { label: "Pålegg & frokost", value: "13" },
+  { label: "Meieri & egg", value: "8" },
 ];
 
 const stores: FilterOption[] = [
@@ -23,18 +21,16 @@ const stores: FilterOption[] = [
   { label: "Europris", value: "EUROPRIS_NO" },
 ];
 
-const labels: FilterOption[] = [
-  { label: "Økologisk", value: "organic" },
-  { label: "Laktosefri", value: "lactose-free" },
-  { label: "Norskprodusert", value: "norwegian" },
-];
-
 type SearchFiltersProps = {
+  selectedCategory: string | null;
+  onCategoryChange: (category: string | null) => void;
   selectedStore: string | null;
   onStoreChange: (store: string | null) => void;
 };
 
 export default function SearchFilters({
+  selectedCategory,
+  onCategoryChange,
   selectedStore,
   onStoreChange,
 }: SearchFiltersProps) {
@@ -51,7 +47,19 @@ export default function SearchFilters({
             key={category.value}
           >
             <span className="search-filter-option-name">
-              <input type="checkbox" disabled />
+              <input
+                type="checkbox"
+                checked={
+                  selectedCategory === category.value
+                }
+                onChange={(event) =>
+                  onCategoryChange(
+                    event.target.checked
+                      ? category.value
+                      : null,
+                  )
+                }
+              />
               <span>{category.label}</span>
             </span>
           </label>
@@ -74,7 +82,9 @@ export default function SearchFilters({
                 checked={selectedStore === store.value}
                 onChange={(event) =>
                   onStoreChange(
-                    event.target.checked ? store.value : null,
+                    event.target.checked
+                      ? store.value
+                      : null,
                   )
                 }
               />
@@ -83,24 +93,6 @@ export default function SearchFilters({
           </label>
         ))}
       </fieldset>
-
-      <fieldset className="search-filter-group">
-        <legend className="search-filter-heading">
-          <span>C</span> Merking
-        </legend>
-
-        {labels.map((label) => (
-          <label
-            className="search-filter-option"
-            key={label.value}
-          >
-            <span className="search-filter-option-name">
-              <input type="checkbox" disabled />
-              <span>{label.label}</span>
-            </span>
-          </label>
-        ))}
-      </fieldset>
     </div>
   );
 }
diff --git a/frontend/src/pages/SearchResults/SearchProductList.tsx b/frontend/src/pages/SearchResults/SearchProductList.tsx
index aeea7cf..dfbe1c1 100644
--- a/frontend/src/pages/SearchResults/SearchProductList.tsx
+++ b/frontend/src/pages/SearchResults/SearchProductList.tsx
@@ -74,11 +74,33 @@ export default function SearchProductList({
                   : "—"}
               </span>
 
-              <span className="search-product-price">
-                {displayPrice
-                  ? priceFormatter.format(displayPrice.price)
-                  : "Pris mangler"}
-              </span>
+              <div className="search-product-price-column">
+                <span className="search-product-price">
+                  {displayPrice
+                    ? priceFormatter.format(displayPrice.price)
+                    : "Pris mangler"}
+                </span>
+
+                {selectedStore && displayPrice && (
+                  <span className="search-product-store-name">
+                    {selectedStore === "KIWI"
+                      ? "Kiwi"
+                      : selectedStore === "MENY_NO"
+                        ? "Meny"
+                        : selectedStore === "SPAR_NO"
+                          ? "Spar"
+                          : selectedStore === "BUNNPRIS"
+                            ? "Bunnpris"
+                            : selectedStore === "COOP_NO"
+                              ? "Coop"
+                              : selectedStore === "JOKER_NO"
+                                ? "Joker"
+                                : selectedStore === "ODA_NO"
+                                  ? "Oda"
+                                  : "Europris"}
+                  </span>
+                )}
+              </div>
 
               <button
                 type="button"
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.css b/frontend/src/pages/SearchResults/SearchResultsPage.css
index 61bc247..df396b8 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.css
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.css
@@ -471,3 +471,64 @@
   color: var(--text-muted);
   font-family: var(--font-mono);
 }
+
+
+/* Aktive filtre */
+
+.search-active-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+.search-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: var(--bg-tint);
+  color: var(--text-brand);
+  font: 500 11px var(--font-mono);
+  cursor: pointer;
+}
+
+.search-filter-chip:hover {
+  border-color: var(--border-brand);
+}
+
+.search-filter-reset {
+  border: 0;
+  padding: 8px;
+  background: transparent;
+  color: var(--text-accent);
+  font: 500 11px var(--font-mono);
+  cursor: pointer;
+}
+
+.search-filter-chip:focus-visible,
+.search-filter-reset:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 3px;
+}
+
+
+.search-product-price-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  min-width: 0;
+}
+
+.search-product-store-name {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-accent);
+}
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.tsx b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
index 4b50101..d4783e9 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.tsx
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
@@ -16,6 +16,7 @@ export default function SearchResultsPage() {
   const [searchTerm, setSearchTerm] = useState("ost");
   const [currentPage, setCurrentPage] = useState(1);
   const [selectedStore, setSelectedStore] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   const handleSearchChange = useCallback((value: string) => {
     setSearchTerm(value);
@@ -27,17 +28,22 @@ export default function SearchResultsPage() {
     setCurrentPage(1);
   };
 
+  const handleCategoryChange = (category: string | null) => {
+    setSelectedCategory(category);
+    setCurrentPage(1);
+  };
+
   const { data, loading, error } = useQuery(
     SEARCH_PRODUCTS_QUERY,
     {
       variables: {
         search: searchTerm,
+        category: selectedCategory ?? undefined,
         storeCode: selectedStore ?? undefined,
         limit: PAGE_SIZE,
         offset: (currentPage - 1) * PAGE_SIZE,
       },
-      skip: searchTerm.length === 0,
-      
+      skip: searchTerm.trim().length === 0,
     },
   );
 
@@ -109,6 +115,8 @@ export default function SearchResultsPage() {
           aria-label="Filtrer søkeresultater"
         >
           <SearchFilters
+            selectedCategory={selectedCategory}
+            onCategoryChange={handleCategoryChange}
             selectedStore={selectedStore}
             onStoreChange={handleStoreChange}
           />
@@ -123,6 +131,52 @@ export default function SearchResultsPage() {
             <p>Sortering kommer her.</p>
           </div>
 
+          {(selectedCategory || selectedStore) && (
+            <div
+              className="search-active-filters"
+              aria-label="Aktive filtre"
+            >
+              {selectedCategory && (
+                <button
+                  type="button"
+                  className="search-filter-chip"
+                  onClick={() => handleCategoryChange(null)}
+                >
+                  Kategori:{" "}
+                  {selectedCategory === "19"
+                    ? "Ost"
+                    : selectedCategory === "13"
+                      ? "Pålegg & frokost"
+                      : "Meieri & egg"}
+                  <span aria-hidden="true"> ×</span>
+                </button>
+              )}
+
+              {selectedStore && (
+                <button
+                  type="button"
+                  className="search-filter-chip"
+                  onClick={() => handleStoreChange(null)}
+                >
+                  Kjede: {selectedStoreName}
+                  <span aria-hidden="true"> ×</span>
+                </button>
+              )}
+
+              <button
+                type="button"
+                className="search-filter-reset"
+                onClick={() => {
+                  setSelectedCategory(null);
+                  setSelectedStore(null);
+                  setCurrentPage(1);
+                }}
+              >
+                Nullstill
+              </button>
+            </div>
+          )}
+
           <div
             className="search-results-list"
             aria-live="polite"

From 32bfd08e8d5a1ba78397063797cab3369448cab4 Mon Sep 17 00:00:00 2001
From: Annisa Alexis Muljono <annisaam@stud.ntnu.no>
Date: Wed, 14 Oct 2026 08:20:12 +0200
Subject: [PATCH 07/17] chore: update search results preview for issue #37

---
 frontend/src/search-preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/search-preview.tsx b/frontend/src/search-preview.tsx
index 5821d60..9a8576d 100644
--- a/frontend/src/search-preview.tsx
+++ b/frontend/src/search-preview.tsx
@@ -4,7 +4,7 @@ import { ApolloProvider } from "@apollo/client/react";
 
 import { apolloClient } from "./apolloClient";
 import SearchResultsPage from "./pages/SearchResults/SearchResultsPage";
-import "./tema.css";
+import "./theme.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

From cc3dcaa08bb01f699060ddb4f68206e5e8390058 Mon Sep 17 00:00:00 2001
From: Ingrihka <ingrihka@stud.ntnu.no>
Date: Thu, 15 Oct 2026 15:27:33 +0200
Subject: [PATCH 08/17] =?UTF-8?q?feat:=20hero-del=20p=C3=A5=20startsiden?=
 =?UTF-8?q?=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/home/HomePage.css | 72 ++++++++++++++++++++++++++++
 frontend/src/pages/home/HomePage.tsx | 44 +++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 frontend/src/pages/home/HomePage.css
 create mode 100644 frontend/src/pages/home/HomePage.tsx

diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css
new file mode 100644
index 0000000..432c9aa
--- /dev/null
+++ b/frontend/src/pages/home/HomePage.css
@@ -0,0 +1,72 @@
+.home {
+  min-height: 100vh;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  text-align: left;
+}
+
+/* Innholdet holdes innenfor samme bredde som i Figma (1312px) */
+.home__hero {
+  max-width: 1312px;
+  margin: 0 auto;
+  padding: 64px 48px;
+  box-sizing: border-box;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 660px;
+}
+
+.hero__eyebrow {
+  margin: 0;
+  font: 500 11px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-accent);
+}
+
+.hero__title {
+  margin: 0;
+  font-size: 78px;
+  font-weight: 500;
+  line-height: 82px;
+  letter-spacing: -0.04em;
+}
+
+/* «lappen»: kursiv serif. Farge og font kommer fra theme.css (h1 em) */
+.hero__title em {
+  font-size: 92px;
+  letter-spacing: -0.01em;
+}
+
+.hero__lead {
+  max-width: 520px;
+  margin: 0 0 4px;
+  font-size: 18px;
+  line-height: 28px;
+  color: var(--text-secondary);
+}
+
+.hero__stats {
+  margin: 0;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
+/* Mobil: mindre overskrift og luft */
+@media (max-width: 600px) {
+  .home__hero {
+    padding: 32px 16px;
+  }
+  .hero__title {
+    font-size: 44px;
+    line-height: 48px;
+  }
+  .hero__title em {
+    font-size: 52px;
+  }
+}
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
new file mode 100644
index 0000000..1caaa4e
--- /dev/null
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -0,0 +1,44 @@
+import "./HomePage.css";
+import "../../components/searchfield/Searchfield.css";
+import "../../components/button/Button.css";
+
+function HomePage() {
+  return (
+    <main className="home">
+      <section className="home__hero">
+        <div className="hero">
+          <p className="hero__eyebrow">HANDLELAPPEN · VOL. 01 · HØST 2026</p>
+
+          <h1 className="hero__title">
+            Hva skal på <br />
+            <em>lappen</em> i dag?
+          </h1>
+
+          <p className="hero__lead">
+            Søk etter en vare, eller bla deg gjennom en kategori. Lappen holder
+            styr på resten, og viser hva det koster i hver kjede.
+          </p>
+
+          <form className="search-field search-field--large" role="search">
+            <span className="search-field__icon" aria-hidden="true" />
+            <input
+              className="search-field__input"
+              type="search"
+              placeholder="Søk etter matvarer, f.eks. havregryn"
+              aria-label="Søk etter matvarer"
+            />
+            <button className="button button--primary button--l" type="submit">
+              Søk
+            </button>
+          </form>
+
+          <p className="hero__stats">
+            12 400 VARER · 6 KJEDER · OPPDATERT DAGLIG
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export default HomePage;

From e99bccae73535536c670f8fcc7bf84e4e42f94ff Mon Sep 17 00:00:00 2001
From: Ingrihka <ingrihka@stud.ntnu.no>
Date: Thu, 15 Oct 2026 15:34:53 +0200
Subject: [PATCH 09/17] =?UTF-8?q?feat:=20aktiv=20handlelapp=20p=C3=A5=20st?=
 =?UTF-8?q?artsiden=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/home/HomePage.css | 137 +++++++++++++++++++++++++++
 frontend/src/pages/home/HomePage.tsx |  59 ++++++++++++
 2 files changed, 196 insertions(+)

diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css
index 432c9aa..9d4683f 100644
--- a/frontend/src/pages/home/HomePage.css
+++ b/frontend/src/pages/home/HomePage.css
@@ -12,6 +12,9 @@
   margin: 0 auto;
   padding: 64px 48px;
   box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 64px;
 }
 
 .hero {
@@ -56,6 +59,140 @@
   letter-spacing: 0.06em;
   color: var(--text-muted);
 }
+/* ---------- Den aktive lappen ---------- */
+.active-note {
+  width: 340px;
+  max-width: 100%;
+}
+
+.active-note__fig {
+  margin: 0 0 24px;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--annotation);
+}
+
+.active-note__stack {
+  position: relative;
+}
+
+/* Arket som ligger bak, litt skjevt */
+.active-note__back {
+  position: absolute;
+  inset: 30px -8px -12px 8px;
+  background: var(--note-tint);
+  border: 1.25px solid var(--border-strong);
+  border-radius: 2px;
+  transform: rotate(4deg);
+}
+
+/* Selve lappen */
+.active-note__paper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 34px 26px 26px 46px;
+  background: var(--note-paper);
+  border: 1.25px solid var(--border-strong);
+  border-radius: 2px;
+  transform: rotate(-2deg);
+  box-shadow: 3px 16px 22px -10px rgba(64, 5, 18, 0.1);
+}
+
+/* Den røde margen til venstre */
+.active-note__paper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 30px;
+  width: 1.25px;
+  background: var(--note-margin);
+}
+
+/* Tapen øverst */
+.active-note__tape {
+  position: absolute;
+  top: -13px;
+  left: 50%;
+  width: 78px;
+  height: 20px;
+  background: var(--note-tape);
+  transform: translateX(-50%) rotate(4deg);
+}
+
+.active-note__label,
+.active-note__meta {
+  margin: 0;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+}
+
+.active-note__label {
+  color: var(--text-accent);
+}
+
+.active-note__meta {
+  color: var(--text-muted);
+}
+
+.active-note__title {
+  margin: 0;
+  font: 700 34px/42px var(--font-note);
+  color: var(--note-ink);
+}
+
+.active-note__list {
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.active-note__list .note-item {
+  cursor: pointer;
+}
+
+/* Avkrysset vare blir grå og strøket ut */
+.note-item:has(.checkbox:checked) .note-item__name {
+  color: var(--text-muted);
+  text-decoration: line-through;
+}
+
+.active-note__more {
+  margin: 0;
+  font: 400 17px var(--font-note);
+  color: var(--text-muted);
+}
+
+.active-note__total {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-top: 10px;
+}
+
+.active-note__sum {
+  font: 700 28px/32px var(--font-note);
+  color: var(--note-ink);
+}
+
+.active-note__button {
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* Smal skjerm: lappen legger seg under teksten */
+@media (max-width: 1000px) {
+  .home__hero {
+    grid-template-columns: 1fr;
+  }
+
+  .active-note {
+    justify-self: center;
+  }
+}
 
 /* Mobil: mindre overskrift og luft */
 @media (max-width: 600px) {
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index 1caaa4e..3a7973c 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -1,6 +1,17 @@
 import "./HomePage.css";
 import "../../components/searchfield/Searchfield.css";
 import "../../components/button/Button.css";
+import "../../components/noteItem/NoteItem.css";
+import "../../components/checkbox/Checkbox.css";
+
+// Midlertidige data. Byttes ut med ekte data fra backend senere.
+const noteItems = [
+  { name: "Lettmelk", count: "×2" },
+  { name: "Norvegia 26 %" },
+  { name: "Mozzarella", count: "×2" },
+  { name: "Bananer", checked: true },
+  { name: "Tomater", count: "×4" },
+];
 
 function HomePage() {
   return (
@@ -36,6 +47,54 @@ function HomePage() {
             12 400 VARER · 6 KJEDER · OPPDATERT DAGLIG
           </p>
         </div>
+        <aside className="active-note" aria-labelledby="active-note-title">
+          <p className="active-note__fig">FIG. 1 — DIN AKTIVE LAPP</p>
+
+          <div className="active-note__stack">
+            <div className="active-note__back" aria-hidden="true" />
+
+            <div className="active-note__paper">
+              <span className="active-note__tape" aria-hidden="true" />
+              <p className="active-note__label">DIN AKTIVE LAPP</p>
+              <h2 id="active-note-title" className="active-note__title">
+                Fredagshandel
+              </h2>
+              <p className="active-note__meta">8 VARER · FREDAG 25.09</p>
+
+              <ul className="active-note__list">
+                {noteItems.map((item) => (
+                  <li key={item.name}>
+                    <label className="note-item">
+                      <input
+                        type="checkbox"
+                        className="checkbox"
+                        defaultChecked={item.checked}
+                      />
+                      <span className="note-item__name">{item.name}</span>
+                      {item.count && (
+                        <span className="note-item__count">{item.count}</span>
+                      )}
+                    </label>
+                  </li>
+                ))}
+              </ul>
+
+              <p className="active-note__more">+ 3 til …</p>
+
+              <div className="active-note__total">
+                <span className="active-note__meta">ESTIMERT</span>
+                <span className="active-note__sum">≈ 386,40 kr</span>
+              </div>
+
+              <button
+                className="button button--primary button--m active-note__button"
+                type="button"
+              >
+                Åpne lappen
+              </button>
+            </div>
+          </div>
+        </aside>
       </section>
     </main>
   );

From a5c141fa8cb3ecde452ed7843e26132ae1d77b22 Mon Sep 17 00:00:00 2001
From: Ingrihka <ingrihka@stud.ntnu.no>
Date: Thu, 15 Oct 2026 18:30:38 +0200
Subject: [PATCH 10/17] =?UTF-8?q?feat:=20kategorier=20og=20bunntekst=20p?=
 =?UTF-8?q?=C3=A5=20startsiden=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/home/HomePage.css | 93 ++++++++++++++++++++++++++++
 frontend/src/pages/home/HomePage.tsx | 71 +++++++++++++++++++++
 2 files changed, 164 insertions(+)

diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css
index 9d4683f..4f4e1f4 100644
--- a/frontend/src/pages/home/HomePage.css
+++ b/frontend/src/pages/home/HomePage.css
@@ -182,6 +182,80 @@
   width: 100%;
   margin-top: 10px;
 }
+/* ---------- Kategorier ---------- */
+.home__categories {
+  border-top: 1px solid var(--border-hairline);
+  border-bottom: 1px solid var(--border-hairline);
+}
+
+.categories {
+  max-width: 1312px;
+  margin: 0 auto;
+  padding: 32px 48px 42px;
+  box-sizing: border-box;
+}
+
+.categories__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 28px;
+}
+
+.categories__title {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  margin: 0;
+  font-size: 32px;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+}
+
+.categories__number {
+  font: 500 12px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-accent);
+}
+
+.categories__link {
+  margin: 0;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
+.categories__grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 24px 20px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.categories__grid .category-card {
+  width: 100%;
+  max-width: none;
+}
+
+/* ---------- Bunntekst ---------- */
+.home__footer {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1312px;
+  margin: 0 auto;
+  padding: 16px 48px 32px;
+  box-sizing: border-box;
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
+.home__footer p {
+  margin: 0;
+}
 
 /* Smal skjerm: lappen legger seg under teksten */
 @media (max-width: 1000px) {
@@ -192,6 +266,10 @@
   .active-note {
     justify-self: center;
   }
+
+  .categories__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 /* Mobil: mindre overskrift og luft */
@@ -206,4 +284,19 @@
   .hero__title em {
     font-size: 52px;
   }
+
+  .categories,
+  .home__footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .categories__header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .categories__grid {
+    grid-template-columns: 1fr;
+  }
 }
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index 3a7973c..a557a81 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -3,6 +3,7 @@ import "../../components/searchfield/Searchfield.css";
 import "../../components/button/Button.css";
 import "../../components/noteItem/NoteItem.css";
 import "../../components/checkbox/Checkbox.css";
+import "../../components/categoryCard/CategoryCard.css";
 
 // Midlertidige data. Byttes ut med ekte data fra backend senere.
 const noteItems = [
@@ -13,6 +14,29 @@ const noteItems = [
   { name: "Tomater", count: "×4" },
 ];
 
+const categories = [
+  {
+    name: "Frukt og grønt",
+    description: "Frukt, grønnsaker, urter",
+    count: 214,
+  },
+  { name: "Meieri og egg", description: "Melk, yoghurt, egg", count: 96 },
+  { name: "Ost", description: "Hvitost, brunost, smøreost", count: 148 },
+  {
+    name: "Brød og bakst",
+    description: "Brød, knekkebrød, lefser",
+    count: 122,
+  },
+  {
+    name: "Kjøtt og fisk",
+    description: "Kylling, kjøttdeig, laks",
+    count: 187,
+  },
+  { name: "Tørrvarer", description: "Pasta, ris, havregryn", count: 263 },
+  { name: "Frysevarer", description: "Pizza, grønnsaker, is", count: 91 },
+  { name: "Drikke", description: "Kaffe, te, juice", count: 175 },
+];
+
 function HomePage() {
   return (
     <main className="home">
@@ -96,6 +120,53 @@ function HomePage() {
           </div>
         </aside>
       </section>
+      <section
+        className="home__categories grid-pattern"
+        aria-labelledby="categories-title"
+      >
+        <div className="categories">
+          <div className="categories__header">
+            <h2 id="categories-title" className="categories__title">
+              <span className="categories__number">01</span>
+              Kategorier
+            </h2>
+            <p className="categories__link">
+              {categories.length} AVDELINGER · BLA I KATALOGEN →
+            </p>
+          </div>
+
+          <ul className="categories__grid">
+            {categories.map((category, index) => (
+              <li key={category.name}>
+                <button type="button" className="category-card">
+                  <span className="category-card__top">
+                    <span>{String(index + 1).padStart(2, "0")}</span>
+                    <span>{category.count} varer</span>
+                  </span>
+                  <span className="category-card__bottom">
+                    <span>
+                      <span className="category-card__name">
+                        {category.name}
+                      </span>
+                      <span className="category-card__description">
+                        {category.description}
+                      </span>
+                    </span>
+                    <span className="category-card__arrow" aria-hidden="true">
+                      →
+                    </span>
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <footer className="home__footer">
+        <p>HANDLELAPPEN — IT2810 · GRUPPE 27</p>
+        <p>SIDE 01 / 11</p>
+      </footer>
     </main>
   );
 }

From a63b02604e145c5c15d2a5b9267fa1342c232982 Mon Sep 17 00:00:00 2001
From: Tara Aqeel <taraa@stud.ntnu.no>
Date: Thu, 15 Oct 2026 19:04:11 +0200
Subject: [PATCH 11/17] style: refine product details page to match Figma
 design

---
 frontend/src/App.tsx                          |   4 +
 .../src/productDetails/ProductDetailsPage.css | 515 ++++++++++++++----
 .../src/productDetails/ProductDetailsPage.tsx |  76 ++-
 3 files changed, 465 insertions(+), 130 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fd4dd23..ceda46b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import type { TypedDocumentNode } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { useEffect, useState } from "react";
 import "./App.css";
+import ProductDetailsPage from "./productDetails/ProductDetailsPage";
 
 type Price = {
   storeCode: string;
@@ -62,6 +63,9 @@ function App() {
     variables: { search: search || undefined, limit: 20 },
   });
 
+  // Midlertidig testing av produktdetaljsiden
+  return <ProductDetailsPage />;
+  
   return (
     <main>
       <h1>Handle<em>lappen</em></h1>
diff --git a/frontend/src/productDetails/ProductDetailsPage.css b/frontend/src/productDetails/ProductDetailsPage.css
index 719f166..a24eb10 100644
--- a/frontend/src/productDetails/ProductDetailsPage.css
+++ b/frontend/src/productDetails/ProductDetailsPage.css
@@ -1,18 +1,85 @@
+
+/* ===== PRODUKTDETALJSIDE ===== */
+
 .product-details-page {
+  width: 100%;
   max-width: 1100px;
   margin: 0 auto;
-  padding: 48px 24px;
+  padding: 48px 24px 80px;
+  box-sizing: border-box;
+  color: #171717;
+  text-align: left;
+}
+
+.product-details-page *,
+.product-details-page *::before,
+.product-details-page *::after {
+  box-sizing: border-box;
+}
+
+.product-details-page h1,
+.product-details-page h2,
+.product-details-page p,
+.product-details-page figure,
+.product-details-page ol,
+.product-details-page dl {
+  margin: 0;
+}
+
+.product-details-page h1,
+.product-details-page h2 {
+  color: #171717;
+  text-align: left;
+}
+
+/* ===== TILBAKE-LENKE ===== */
+
+.product-details-page .product-back-navigation {
+  margin-bottom: 26px;
+}
+
+.product-details-page .product-back-navigation a {
+  color: #d3045d;
+  text-decoration: none;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+.product-details-page .product-back-navigation a:hover {
+  text-decoration: underline;
 }
 
-.product-details-layout {
+/* ===== HOVEDLAYOUT ===== */
+
+.product-details-page .product-details-layout {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 52px;
+  align-items: start;
+}
+
+.product-details-page .product-details-left,
+.product-details-page .product-details-right {
+  min-width: 0;
+  text-align: left;
 }
 
-.product-image {
+.product-details-page .product-details-left {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* ===== PRODUKTBILDE ===== */
+
+.product-details-page .product-figure {
+  margin: 0;
+}
+
+.product-details-page .product-image {
   width: 100%;
-  aspect-ratio: 4 / 3;
+  aspect-ratio: 1.2 / 1;
   border: 1px solid #780b2b;
   border-radius: 10px;
 
@@ -27,188 +94,434 @@
   background-size: 20px 20px;
 }
 
-.product-image p {
+.product-details-page .product-image p {
+  color: #777;
   font-size: 12px;
-  color: #666;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
+}
+
+.product-details-page .product-figure figcaption {
+  margin-top: 12px;
+  color: #777;
+  font-size: 10px;
+  letter-spacing: 1px;
+}
+
+/* ===== INGREDIENSER OG ALLERGENER ===== */
+
+.product-details-page .product-ingredients h2,
+.product-details-page .product-allergens h2,
+.product-details-page .product-nutrition h2 {
+  padding-bottom: 12px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid #ddd;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
 }
 
-.product-brand {
+.product-details-page .section-letter {
   color: #d3045d;
-  font-size: 12px;
-  font-weight: bold;
-  letter-spacing: 2px;
+  margin-right: 5px;
+}
+
+.product-details-page .product-ingredients p {
+  font-size: 14px;
+  line-height: 1.7;
+  color: #555;
 }
 
-.product-name {
-  font-size: 44px;
+.product-details-page .product-allergens p {
+  display: inline-block;
+  padding: 7px 10px;
+  border-radius: 4px;
+  background: #fce8ef;
+  color: #780b2b;
+  font-size: 11px;
   font-weight: 600;
-  margin: 10px 0;
 }
 
-.product-category {
-  font-size: 12px;
+/* ===== PRODUKTINFORMASJON ===== */
+
+.product-details-page .product-info {
+  margin-bottom: 28px;
+}
+
+.product-details-page .product-brand {
+  color: #d3045d;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  margin-bottom: 8px;
+}
+
+.product-details-page .product-name {
+  color: #171717;
+  font-size: 42px;
+  font-weight: 600;
+  line-height: 1.12;
+  letter-spacing: -1px;
+}
+
+.product-details-page .product-category {
+  margin-top: 10px;
   color: #777;
-  letter-spacing: 2px;
+  font-size: 11px;
+  letter-spacing: 1px;
+}
+
+/* Prisområde */
+
+.product-details-page .product-price-container {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 30px;
+  margin-bottom: 28px;
+}
+
+.product-details-page .product-price {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  margin: 0;
+  white-space: nowrap;
+  line-height: 1;
 }
 
-.product-price {
-  font-size: 38px;
+.product-details-page .price-number {
+  font-size: 42px;
   font-weight: 500;
-  margin-top: 32px;
+  color: #171717;
 }
 
-@media (max-width: 768px) {
-  .product-details-layout {
-    grid-template-columns: 1fr;
-    gap: 24px;
-  }
+.product-details-page .price-currency {
+  font-family: "Brush Script MT", "Apple Chancery", cursive;
+  font-size: 60px;       /* Større */
+  font-weight: 300;      /* Tynnere */
+  font-style: italic;
+  color: #780b2b;
+  line-height: 1;
+}
 
-  .product-name {
-    font-size: 32px;
-  }
+.product-details-page .product-cheapest-store {
+  margin: 0;
+  color: #777;
+  font-family: monospace;
+  font-size: 9px;
+  letter-spacing: 0.3px;
+}
+
+.product-details-page .product-cheapest-store {
+  margin-top: 8px;
+  color: #777;
+  font-size: 10px;
+  letter-spacing: 0.5px;
 }
 
-/* Prissammenligning */
+/* ===== PRISSAMMENLIGNING ===== */
 
-.store-prices {
-  margin-top: 28px;
+.product-details-page .store-prices {
   border: 1px solid #780b2b;
   border-radius: 10px;
   overflow: hidden;
+  box-shadow: 0 3px 0 rgba(120, 11, 43, 0.12);
 }
 
-.store-prices-header {
+.product-details-page .store-prices-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 16px;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
 }
 
-.store-prices-header h2 {
+.product-details-page .store-prices-header h2 {
   margin: 0;
+  padding: 0;
+  border: none;
   font-size: 11px;
+  font-weight: 600;
   letter-spacing: 1px;
 }
 
-.store-prices-header span {
+.product-details-page .store-prices-header span {
   color: #777;
   font-size: 10px;
+  white-space: nowrap;
 }
 
-.store-price-row {
+.product-details-page .store-prices-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.product-details-page .store-price-row {
   display: grid;
-  grid-template-columns: 25px 1fr 100px 90px;
+  grid-template-columns: 24px minmax(0, 1fr) 88px 90px;
   align-items: center;
   gap: 8px;
-  padding: 16px;
+  min-height: 46px;
+  padding: 12px 16px;
   border-top: 1px solid #eee;
 }
 
-.store-price-row.cheapest {
-  background-color: #fce8ef;
+.product-details-page .store-price-row.cheapest {
+  background: #fce8ef;
 }
 
-.store-number {
+.product-details-page .store-number {
   color: #d3045d;
-  font-size: 11px;
-  font-weight: bold;
+  font-size: 10px;
+  font-weight: 700;
 }
 
-.store-name {
-  font-size: 14px;
+.product-details-page .store-name {
+  color: #171717;
+  font-size: 13px;
   font-weight: 500;
 }
 
-.store-difference {
+.product-details-page .store-difference {
+  color: #888;
   font-size: 10px;
-  color: #777;
   text-align: right;
+  white-space: nowrap;
 }
 
-.cheapest .store-difference {
-  color: #d3045d;
-  font-weight: bold;
+.product-details-page .cheapest .store-difference {
+  justify-self: end;
+  padding: 5px 7px;
+  border-radius: 3px;
+  background: #d3045d;
+  color: white;
+  font-size: 9px;
+  font-weight: 700;
 }
 
-.store-price {
-  font-size: 14px;
+.product-details-page .store-price {
+  color: #171717;
+  font-size: 13px;
   font-weight: 600;
   text-align: right;
+  white-space: nowrap;
 }
 
-@media (max-width: 600px) {
-  .store-price-row {
-    grid-template-columns: 20px minmax(0, 1fr) auto;
-    gap: 6px;
-    padding: 12px;
-  }
+/* ===== HANDLELISTE ===== */
+.product-details-page .shopping-list-controls {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 12px;
+  align-items: center;
 
-  .store-difference {
-    grid-column: 2;
-    text-align: left;
-  }
+  margin-top: 38px;
+  padding: 26px 26px 24px;
 
-  .store-price {
-    grid-column: 3;
-    grid-row: 1 / 3;
-  }
+  border: 1px solid #171717;
+  border-left: 3px solid #d3045d;
+  background: white;
+  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.08);
 }
 
-.product-details-left {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+.product-details-page .shopping-list-controls::before {
+  content: "";
+  position: absolute;
+  width: 68px;
+  height: 16px;
+  top: -9px;
+  left: 50%;
+  transform: translateX(-50%) rotate(2deg);
+  background: #f6cada;
 }
 
-.product-image {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.product-details-page .shopping-list-header {
+  grid-column: 1 / -1;
 }
 
-.product-image figcaption {
-  font-size: 11px;
+
+.product-details-page .shopping-list-header h2 {
+  color: #780b2b;
+  font-style: italic;
+  font-weight: 600;
+  line-height: 1.3;
+  font-size: 21px;
+}
+
+.product-details-page .quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 14px;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  overflow: hidden;
+  grid-column: 1;
   margin-top: 12px;
-  color: #777;
 }
 
-.product-ingredients,
-.product-allergens,
-.product-nutrition {
-  border-top: 1px solid #ddd;
-  padding-top: 16px;
+.product-details-page .quantity-controls button {
+  min-width: 32px;
+  min-height: 32px;
+  padding: 4px;
+  background: white;
+  border: none;
+  color: #171717;
+  cursor: pointer;
+}
+
+.product-details-page .quantity-controls button:hover:not(:disabled) {
+  background: #fce8ef;
+}
+
+.product-details-page .quantity-controls button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-.product-ingredients h2,
-.product-allergens h2,
-.product-nutrition h2 {
+.product-details-page .quantity-controls output {
+  min-width: 24px;
+  text-align: center;
   font-size: 12px;
+  color: #171717;
+}
+
+.product-details-page .remove-product {
+  grid-column: 2;
+  justify-self: start;
+
+  margin: 12px 0 0;
+  padding: 9px 12px;
+
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  background: white;
+  color: #171717;
+
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.product-details-page .remove-product:hover {
+  background: #fce8ef;
+}
+
+.product-details-page .shopping-list-controls label {
+  display: block;
+  margin-top: 24px;
+  margin-bottom: 10px;
+  color: #777;
+  font-size: 10px;
   letter-spacing: 1px;
-  margin-bottom: 12px;
 }
 
-.product-ingredients p,
-.product-allergens p {
+.product-details-page .shopping-list-controls textarea {
+  display: block;
+  width: 100%;
+  min-height: 42px;
+  padding: 8px 0;
+  border: none;
+  border-bottom: 1px solid #f3b4cc;
+  border-radius: 0;
+  background: transparent;
+  color: #171717;
+  font: inherit;
   font-size: 14px;
-  line-height: 1.6;
+  resize: vertical;
+  min-height: 40px;
+  height: 45px;
+}
+
+.product-details-page .shopping-list-controls textarea::placeholder {
+  color: #888;
+  font-style: italic;
+}
+
+.product-details-page .shopping-list-controls label,
+.product-details-page .shopping-list-controls textarea {
+  grid-column: 1 / -1;
+}
+
+.product-details-page button:focus-visible,
+.product-details-page textarea:focus-visible,
+.product-details-page a:focus-visible {
+  outline: 2px solid #780b2b;
+  outline-offset: 3px;
+}
+
+/* ===== NÆRINGSINNHOLD ===== */
+
+.product-details-page .product-nutrition {
+  margin-top: 38px;
 }
 
-.product-nutrition dl {
+.product-details-page .product-nutrition dl {
   display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 12px;
-  font-size: 13px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 16px;
+  row-gap: 10px;
+  margin: 0;
+  font-size: 12px;
 }
 
-.product-nutrition dt {
-  color: #555;
+.product-details-page .product-nutrition dt {
+  color: #666;
 }
 
-.product-nutrition dd {
+.product-details-page .product-nutrition dd {
   margin: 0;
+  color: #171717;
   font-weight: 600;
   text-align: right;
-}
\ No newline at end of file
+}
+
+.product-details-page .nutrition-subitem {
+  padding-left: 12px;
+  color: #999 !important;
+}
+
+/* ===== RESPONSIVT DESIGN ===== */
+
+@media (max-width: 768px) {
+  .product-details-page {
+    padding: 28px 16px 60px;
+  }
+
+  .product-details-page .product-details-layout {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .product-details-page .product-name {
+    font-size: 34px;
+  }
+
+  .product-details-page .product-price {
+    font-size: 32px;
+  }
+}
+
+@media (max-width: 480px) {
+  .product-details-page .store-price-row {
+    grid-template-columns: 20px minmax(0, 1fr) auto;
+    gap: 6px;
+    padding: 12px;
+  }
+
+  .product-details-page .store-difference {
+    grid-column: 2;
+    grid-row: 2;
+    text-align: left;
+    justify-self: start;
+  }
+
+  .product-details-page .store-price {
+    grid-column: 3;
+    grid-row: 1 / 3;
+  }
+
+  .product-details-page .shopping-list-controls {
+    padding: 20px 16px;
+  }
+}
diff --git a/frontend/src/productDetails/ProductDetailsPage.tsx b/frontend/src/productDetails/ProductDetailsPage.tsx
index 141a4ec..aace43a 100644
--- a/frontend/src/productDetails/ProductDetailsPage.tsx
+++ b/frontend/src/productDetails/ProductDetailsPage.tsx
@@ -24,9 +24,14 @@ export default function ProductDetailsPage() {
 
         {/* Venstre side: Produktbilde */}
         <section className="product-details-left">
-        <figure className="product-image">
-            <p>Mangler bilde</p>
-            <figcaption>FIG. 5 — NORVEGIA 26 %, 500 G</figcaption>
+       <figure className="product-figure">
+            <section className="product-image" aria-label="Produktbilde">
+                <p>Mangler bilde</p>
+            </section>
+
+            <figcaption>
+                FIG. 5 — NORVEGIA 26 %, 500 G
+            </figcaption>
         </figure>
 
         <section className="product-ingredients">
@@ -39,29 +44,7 @@ export default function ProductDetailsPage() {
             <p>MELK</p>
         </section>
 
-        <section className="product-nutrition">
-            <h2>C — NÆRINGSINNHOLD PER 100 G</h2>
-
-            <dl>
-            <dt>Energi</dt>
-            <dd>1 469 kJ / 353 kcal</dd>
-
-            <dt>Fett</dt>
-            <dd>26 g</dd>
-
-            <dt>Hvorav mettede fettsyrer</dt>
-            <dd>17 g</dd>
-
-            <dt>Karbohydrater</dt>
-            <dd>0 g</dd>
-
-            <dt>Protein</dt>
-            <dd>27 g</dd>
-
-            <dt>Salt</dt>
-            <dd>1,2 g</dd>
-            </dl>
-        </section>
+    
         </section>
 
         {/* Høyre side: Produktinformasjon */}
@@ -72,7 +55,16 @@ export default function ProductDetailsPage() {
 
           <p className="product-category">500 G · OST</p>
 
-          <p className="product-price">79,90 kr</p>
+          <section className="product-price-container" aria-label="Produktpris">
+            <p className="product-price">
+                <span className="price-number">79,90</span>
+                <span className="price-currency">kr</span>
+            </p>
+
+            <p className="product-cheapest-store">
+                BILLIGST HOS KIWI · 159,80 KR/KG
+            </p>
+            </section>
           <section className="store-prices" aria-labelledby="store-prices-title">
             <header className="store-prices-header">
                 <h2 id="store-prices-title">PRIS I BUTIKKENE</h2>
@@ -115,11 +107,12 @@ export default function ProductDetailsPage() {
             className="shopping-list-controls"
             aria-label="Handleliste"
             >
+                
             <header className="shopping-list-header">
                 <h2>
                 {isInList ? "Står på lappen din" : "Ikke på lappen din"}
                 </h2>
-
+            </header> 
                 <section className="quantity-controls" aria-label="Antall">
                 <button
                     type="button"
@@ -143,8 +136,9 @@ export default function ProductDetailsPage() {
                     +
                 </button>
                 </section>
-            </header>
+                 
 
+            
             {isInList && (
                 <button
                 type="button"
@@ -166,6 +160,30 @@ export default function ProductDetailsPage() {
                 onChange={(event) => setNote(event.target.value)}
             />
             </section>
+
+            <section className="product-nutrition">
+                <h2>C — NÆRINGSINNHOLD PER 100 G</h2>
+
+                <dl>
+                <dt>Energi</dt>
+                <dd>1 469 kJ / 353 kcal</dd>
+
+                <dt>Fett</dt>
+                <dd>26 g</dd>
+
+                <dt>Hvorav mettede fettsyrer</dt>
+                <dd>17 g</dd>
+
+                <dt>Karbohydrater</dt>
+                <dd>0 g</dd>
+
+                <dt>Protein</dt>
+                <dd>27 g</dd>
+
+                <dt>Salt</dt>
+                <dd>1,2 g</dd>
+                </dl>
+            </section>  
         </section>
       </section>
     </main>

From ca4379faaad5924d8f31ee148d6ca87e72fb873b Mon Sep 17 00:00:00 2001
From: Tara Aqeel <taraa@stud.ntnu.no>
Date: Thu, 15 Oct 2026 19:12:06 +0200
Subject: [PATCH 12/17] fix: remove temporary product details test changes from
 App

---
 frontend/src/App.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ceda46b..fd4dd23 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,6 @@ import type { TypedDocumentNode } from "@apollo/client";
 import { useQuery } from "@apollo/client/react";
 import { useEffect, useState } from "react";
 import "./App.css";
-import ProductDetailsPage from "./productDetails/ProductDetailsPage";
 
 type Price = {
   storeCode: string;
@@ -63,9 +62,6 @@ function App() {
     variables: { search: search || undefined, limit: 20 },
   });
 
-  // Midlertidig testing av produktdetaljsiden
-  return <ProductDetailsPage />;
-  
   return (
     <main>
       <h1>Handle<em>lappen</em></h1>

From 57beaf935a2a37d511585292f734767815dab781 Mon Sep 17 00:00:00 2001
From: Tara Aqeel <taraa@stud.ntnu.no>
Date: Thu, 15 Oct 2026 19:23:12 +0200
Subject: [PATCH 13/17] =?UTF-8?q?Fjerner=20strekene=20p=C3=A5=20siden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index f987250..b8f5958 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2,9 +2,10 @@
    Farger og skrift kommer fra tema.css. */
 
 #root {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 48px 24px;
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
 }
 
 /* Søkefelt + knapp */

From 475aa8878ffff98f39cc079469bd5d66220f1437 Mon Sep 17 00:00:00 2001
From: Tara Aqeel <taraa@stud.ntnu.no>
Date: Thu, 15 Oct 2026 19:41:48 +0200
Subject: [PATCH 14/17] Posisjonerte skriften mer sentralt

---
 frontend/src/App.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index b8f5958..168dec1 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -8,6 +8,14 @@
   padding: 0;
 }
 
+main {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 32px;
+  box-sizing: border-box;
+}
+
 /* Søkefelt + knapp */
 .search {
   display: flex;

From 629b07146ae76b78b061a8792b6680c8954ada71 Mon Sep 17 00:00:00 2001
From: Annisa Alexis Muljono <annisaam@stud.ntnu.no>
Date: Thu, 15 Oct 2026 22:15:34 +0200
Subject: [PATCH 15/17] feat(#37): mobiltilpasning, filterknapp og kategorinavn
 i filterbrikker

---
 backend/src/index.ts                          |  289 ++++-
 .../pages/SearchResults/SearchEmptyState.tsx  |  144 +++
 .../src/pages/SearchResults/SearchFilters.tsx |  128 +-
 .../pages/SearchResults/SearchProductList.tsx |   93 +-
 .../pages/SearchResults/SearchResultsPage.css | 1093 ++++++++++++++---
 .../pages/SearchResults/SearchResultsPage.tsx |  609 +++++++--
 .../pages/SearchResults/SearchSortSelect.tsx  |  212 ++++
 .../pages/SearchResults/searchPreferences.ts  |   90 ++
 .../src/pages/SearchResults/searchQueries.ts  |   46 +-
 .../src/pages/SearchResults/searchTypes.ts    |   27 +-
 10 files changed, 2340 insertions(+), 391 deletions(-)
 create mode 100644 frontend/src/pages/SearchResults/SearchSortSelect.tsx
 create mode 100644 frontend/src/pages/SearchResults/searchPreferences.ts

diff --git a/backend/src/index.ts b/backend/src/index.ts
index 31d6b13..f5aca64 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -10,6 +10,12 @@ const typeDefs = `#graphql
     name: String!
   }
 
+  type FilterCount {
+    value: String!
+    label: String!
+    count: Int!
+  }
+
   type Price {
     storeCode: String!
     price: Float!
@@ -30,16 +36,17 @@ const typeDefs = `#graphql
   type Query {
     products(
       search: String
-      category: ID
-      storeCode: String
+      categories: [ID!]
+      storeCodes: [String!]
+      sort: String = "relevance"
       limit: Int = 20
       offset: Int = 0
     ): [Product!]!
 
     productsCount(
       search: String
-      category: ID
-      storeCode: String
+      categories: [ID!]
+      storeCodes: [String!]
     ): Int!
 
     product(ean: String!): Product
@@ -47,7 +54,15 @@ const typeDefs = `#graphql
     categories: [Category!]!
     shoppingList(id: ID!): ShoppingList
 
+    categoryFilterCounts(
+      search: String
+      storeCodes: [String!]
+    ): [FilterCount!]!
 
+    storeFilterCounts(
+      search: String
+      categories: [ID!]
+    ): [FilterCount!]!
   }
   
   type ShoppingListItem {
@@ -79,6 +94,124 @@ const typeDefs = `#graphql
 
 const resolvers = {
   Query: {
+    categoryFilterCounts: async (
+      _parent: unknown,
+      args: {
+        search?: string;
+        storeCodes?: string[];
+      },
+    ) => {
+      const search = args.search ?? null;
+      const storeCodes = args.storeCodes ?? [];
+
+      const result = await pool.query(
+        `
+        WITH RECURSIVE category_tree AS (
+          SELECT
+            id,
+            name,
+            parent_id,
+            id AS root_id,
+            name AS root_name
+          FROM categories
+          WHERE parent_id IS NULL
+
+          UNION
+
+          SELECT
+            c.id,
+            c.name,
+            c.parent_id,
+            ct.root_id,
+            ct.root_name
+          FROM categories c
+          INNER JOIN category_tree ct
+            ON c.parent_id = ct.id
+        )
+        SELECT
+          ct.root_id::text AS value,
+          ct.root_name AS label,
+          COUNT(DISTINCT p.ean)::integer AS count
+        FROM category_tree ct
+        INNER JOIN products p
+          ON p.category_id = ct.id
+        WHERE
+          (
+            $1::text IS NULL
+            OR p.name ILIKE '%' || $1 || '%'
+          )
+          AND (
+            cardinality($2::text[]) = 0
+            OR EXISTS (
+              SELECT 1
+              FROM prices pr
+              WHERE pr.ean = p.ean
+                AND pr.store_code = ANY($2::text[])
+            )
+          )
+        GROUP BY ct.root_id, ct.root_name
+        HAVING COUNT(DISTINCT p.ean) > 0
+        ORDER BY count DESC, label
+        `,
+        [search, storeCodes],
+      );
+
+      return result.rows;
+    },
+
+    
+    storeFilterCounts: async (
+      _parent: unknown,
+      args: {
+        search?: string;
+        categories?: string[];
+      },
+    ) => {
+      const search = args.search ?? null;
+      const categories = args.categories ?? [];
+
+      const result = await pool.query(
+        `
+        WITH RECURSIVE selected_categories AS (
+          SELECT id
+          FROM categories
+          WHERE id = ANY($2::integer[])
+
+          UNION
+
+          SELECT c.id
+          FROM categories c
+          INNER JOIN selected_categories sc
+            ON c.parent_id = sc.id
+        )
+        SELECT
+          pr.store_code AS value,
+          pr.store_code AS label,
+          COUNT(DISTINCT p.ean)::integer AS count
+        FROM prices pr
+        INNER JOIN products p
+          ON p.ean = pr.ean
+        WHERE
+          (
+            $1::text IS NULL
+            OR p.name ILIKE '%' || $1 || '%'
+          )
+          AND (
+            cardinality($2::integer[]) = 0
+            OR p.category_id IN (
+              SELECT id FROM selected_categories
+            )
+          )
+        GROUP BY pr.store_code
+        HAVING COUNT(DISTINCT p.ean) > 0
+        ORDER BY count DESC, value
+        `,
+        [search, categories],
+      );
+
+      return result.rows;
+    },
+
     categories: async () => {
       const result = await pool.query(`
         SELECT
@@ -110,20 +243,37 @@ const resolvers = {
       return result.rows[0] ?? null;
     },
 
+    
     products: async (
       _parent: unknown,
       args: {
         search?: string;
-        category?: string;
-        storeCode?: string;
+        categories?: string[];
+        storeCodes?: string[];
+        sort?: string;
         limit?: number;
         offset?: number;
       },
     ) => {
       const search = args.search ?? null;
-      const category = args.category ?? null;
-      const storeCode = args.storeCode ?? null;
-      const limit = Math.min(Math.max(args.limit ?? 20, 1), 100);
+      const categories = args.categories ?? [];
+      const storeCodes = args.storeCodes ?? [];
+
+      const allowedSorts = [
+        "relevance",
+        "price_asc",
+        "price_desc",
+      ];
+
+      const sort = allowedSorts.includes(args.sort ?? "")
+        ? args.sort
+        : "relevance";
+
+      const limit = Math.min(
+        Math.max(args.limit ?? 20, 1),
+        100,
+      );
+
       const offset = Math.max(args.offset ?? 0, 0);
 
       const result = await pool.query(
@@ -131,7 +281,7 @@ const resolvers = {
         WITH RECURSIVE selected_categories AS (
           SELECT id
           FROM categories
-          WHERE id = $2::integer
+          WHERE id = ANY($2::integer[])
 
           UNION
 
@@ -139,63 +289,108 @@ const resolvers = {
           FROM categories c
           INNER JOIN selected_categories sc
             ON c.parent_id = sc.id
-        )
-        SELECT
-          p.ean,
-          p.name,
-          p.brand,
-          p.image_url AS "imageUrl",
-          p.category_id AS "categoryId"
-        FROM products p
-        WHERE
-          (
-            $1::text IS NULL
-            OR p.name ILIKE '%' || $1 || '%'
-          )
-          AND (
-            $2::integer IS NULL
-            OR p.category_id IN (
-              SELECT id FROM selected_categories
-            )
-          )
-          AND (
-            $3::text IS NULL
-            OR EXISTS (
-              SELECT 1
+        ),
+        matching_products AS (
+          SELECT
+            p.ean,
+            p.name,
+            p.brand,
+            p.image_url AS "imageUrl",
+            p.category_id AS "categoryId",
+            (
+              SELECT MIN(pr.price)
               FROM prices pr
               WHERE pr.ean = p.ean
-                AND pr.store_code = $3
+                AND (
+                  cardinality($3::text[]) = 0
+                  OR pr.store_code = ANY($3::text[])
+                )
+            ) AS sort_price
+          FROM products p
+          WHERE
+            (
+              $1::text IS NULL
+              OR p.name ILIKE '%' || $1 || '%'
             )
-          )
-        ORDER BY p.name, p.ean
+            AND (
+              cardinality($2::integer[]) = 0
+              OR p.category_id IN (
+                SELECT id FROM selected_categories
+              )
+            )
+            AND (
+              cardinality($3::text[]) = 0
+              OR EXISTS (
+                SELECT 1
+                FROM prices pr
+                WHERE pr.ean = p.ean
+                  AND pr.store_code = ANY($3::text[])
+              )
+            )
+        )
+        SELECT
+          ean,
+          name,
+          brand,
+          "imageUrl",
+          "categoryId"
+        FROM matching_products
+        ORDER BY
+          CASE
+            WHEN $6::text = 'relevance' THEN
+              CASE
+                WHEN LOWER(name) = LOWER($1::text) THEN 0
+                WHEN name ILIKE $1::text || '%' THEN 1
+                ELSE 2
+              END
+          END ASC NULLS LAST,
+
+          CASE
+            WHEN $6::text = 'price_asc'
+            THEN sort_price
+          END ASC NULLS LAST,
+
+          CASE
+            WHEN $6::text = 'price_desc'
+            THEN sort_price
+          END DESC NULLS LAST,
+
+          name ASC,
+          ean ASC
         LIMIT $4
         OFFSET $5
         `,
-        [search, category, storeCode, limit, offset],
+        [
+          search,
+          categories,
+          storeCodes,
+          limit,
+          offset,
+          sort,
+        ],
       );
 
       return result.rows;
     },
 
-    
     productsCount: async (
       _parent: unknown,
       args: {
         search?: string;
-        category?: string;
-        storeCode?: string;
+        categories?: string[];
+        storeCodes?: string[];
       },
     ) => {
       const search = args.search ?? null;
-      const category = args.category ?? null;
-      const storeCode = args.storeCode ?? null;
+      const categories = args.categories ?? [];
+      const storeCodes = args.storeCodes ?? [];
 
       const result = await pool.query(
         `
         WITH RECURSIVE selected_categories AS (
           SELECT id
           FROM categories
-          WHERE id = $2::integer
+          WHERE id = ANY($2::integer[])
 
           UNION
 
@@ -212,22 +407,22 @@ const resolvers = {
             OR p.name ILIKE '%' || $1 || '%'
           )
           AND (
-            $2::integer IS NULL
+            cardinality($2::integer[]) = 0
             OR p.category_id IN (
               SELECT id FROM selected_categories
             )
           )
           AND (
-            $3::text IS NULL
+            cardinality($3::text[]) = 0
             OR EXISTS (
               SELECT 1
               FROM prices pr
               WHERE pr.ean = p.ean
-                AND pr.store_code = $3
+                AND pr.store_code = ANY($3::text[])
             )
           )
         `,
-        [search, category, storeCode],
+        [search, categories, storeCodes],
       );
 
       return result.rows[0].count;
diff --git a/frontend/src/pages/SearchResults/SearchEmptyState.tsx b/frontend/src/pages/SearchResults/SearchEmptyState.tsx
index e69de29..bf5510d 100644
--- a/frontend/src/pages/SearchResults/SearchEmptyState.tsx
+++ b/frontend/src/pages/SearchResults/SearchEmptyState.tsx
@@ -0,0 +1,144 @@
+
+import type { FilterCount } from "./searchTypes";
+
+type SearchEmptyStateProps = {
+  searchTerm: string;
+  hasActiveFilters: boolean;
+  selectedStores: string[];
+  alternativeStores: FilterCount[];
+  onSelectStore: (storeCode: string) => void;
+  onResetFilters: () => void;
+};
+
+const storeNames: Record<string, string> = {
+  KIWI: "Kiwi",
+  MENY_NO: "Meny",
+  SPAR_NO: "Spar",
+  BUNNPRIS: "Bunnpris",
+  COOP_NO: "Coop",
+  JOKER_NO: "Joker",
+  ODA_NO: "Oda",
+  EUROPRIS_NO: "Europris",
+  ENGROSSNETT_NO: "Engrosnett",
+  HAVARISTEN: "Havaristen",
+};
+
+export default function SearchEmptyState({
+  searchTerm,
+  hasActiveFilters,
+  selectedStores,
+  alternativeStores,
+  onSelectStore,
+  onResetFilters,
+}: SearchEmptyStateProps) {
+  const selectedStoreNames = selectedStores.map(
+    (code) => storeNames[code] ?? code,
+  );
+
+  const storeDescription =
+    selectedStoreNames.length === 1
+      ? ` hos ${selectedStoreNames[0]}`
+      : selectedStoreNames.length > 1
+        ? ` hos de ${selectedStoreNames.length} valgte butikkene`
+        : "";
+
+  const visibleAlternatives = alternativeStores
+    .filter(
+      (store) =>
+        !selectedStores.includes(store.value) &&
+        store.count > 0,
+    )
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 5);
+
+  return (
+    <div className="search-empty-state">
+      <div
+        className="search-empty-state-icon"
+        aria-hidden="true"
+      >
+        <svg
+          width="42"
+          height="42"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="10.5" cy="10.5" r="6.5" />
+          <path d="m16 16 5 5" />
+          <path d="m8 8 5 5" />
+          <path d="m13 8-5 5" />
+        </svg>
+      </div>
+
+      <p className="search-empty-state-label">
+        INGEN TREFF
+      </p>
+
+      <h3 className="search-empty-state-title">
+        Ingen produkter funnet
+      </h3>
+
+      <p className="search-empty-state-description">
+        Vi fant ingen produkter for «{searchTerm}»
+        {storeDescription} med de valgte filtrene.
+      </p>
+
+      {visibleAlternatives.length > 0 && (
+        <div className="search-empty-state-alternatives">
+          <h4>
+            Prøv en annen butikkjede
+          </h4>
+
+          <p>
+            Søket gir treff hos disse butikkene:
+          </p>
+
+          <div className="search-empty-state-store-list">
+            {visibleAlternatives.map((store) => (
+              <button
+                key={store.value}
+                type="button"
+                className="search-empty-state-store"
+                onClick={() =>
+                  onSelectStore(store.value)
+                }
+              >
+                <span>
+                  {storeNames[store.value] ??
+                    store.label}
+                </span>
+
+                <span className="search-empty-state-store-count">
+                  {store.count} treff
+                </span>
+
+                <span aria-hidden="true">→</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {hasActiveFilters && (
+        <button
+          type="button"
+          className="search-empty-state-reset"
+          onClick={onResetFilters}
+        >
+          Nullstill alle filtre
+        </button>
+      )}
+
+      {!hasActiveFilters && (
+        <p className="search-empty-state-hint">
+          Prøv et annet søkeord eller en kortere
+          søkefrase.
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/SearchResults/SearchFilters.tsx b/frontend/src/pages/SearchResults/SearchFilters.tsx
index 28f5852..f7eb772 100644
--- a/frontend/src/pages/SearchResults/SearchFilters.tsx
+++ b/frontend/src/pages/SearchResults/SearchFilters.tsx
@@ -1,47 +1,73 @@
 
-type FilterOption = {
-  label: string;
-  value: string;
-};
-
-const categories: FilterOption[] = [
-  { label: "Ost", value: "19" },
-  { label: "Pålegg & frokost", value: "13" },
-  { label: "Meieri & egg", value: "8" },
-];
-
-const stores: FilterOption[] = [
-  { label: "Kiwi", value: "KIWI" },
-  { label: "Meny", value: "MENY_NO" },
-  { label: "Spar", value: "SPAR_NO" },
-  { label: "Bunnpris", value: "BUNNPRIS" },
-  { label: "Coop", value: "COOP_NO" },
-  { label: "Joker", value: "JOKER_NO" },
-  { label: "Oda", value: "ODA_NO" },
-  { label: "Europris", value: "EUROPRIS_NO" },
-];
+import type { FilterCount } from "./searchTypes";
 
 type SearchFiltersProps = {
-  selectedCategory: string | null;
-  onCategoryChange: (category: string | null) => void;
-  selectedStore: string | null;
-  onStoreChange: (store: string | null) => void;
+  categories: FilterCount[];
+  stores: FilterCount[];
+  selectedCategories: string[];
+  onCategoriesChange: (values: string[]) => void;
+  selectedStores: string[];
+  onStoresChange: (values: string[]) => void;
 };
 
+const storeNames: Record<string, string> = {
+  KIWI: "Kiwi",
+  MENY_NO: "Meny",
+  SPAR_NO: "Spar",
+  BUNNPRIS: "Bunnpris",
+  COOP_NO: "Coop",
+  JOKER_NO: "Joker",
+  ODA_NO: "Oda",
+  EUROPRIS_NO: "Europris",
+  ENGROSSNETT_NO: "Engrosnett",
+};
+
+const collator = new Intl.Collator("nb-NO", {
+  sensitivity: "base",
+});
+
 export default function SearchFilters({
-  selectedCategory,
-  onCategoryChange,
-  selectedStore,
-  onStoreChange,
+  categories,
+  stores,
+  selectedCategories,
+  onCategoriesChange,
+  selectedStores,
+  onStoresChange,
 }: SearchFiltersProps) {
+  const sortedCategories = [...categories].sort((a, b) => {
+    if (a.label === "Ukategorisert") return 1;
+    if (b.label === "Ukategorisert") return -1;
+    return collator.compare(a.label, b.label);
+  });
+
+  const sortedStores = [...stores].sort((a, b) =>
+    collator.compare(
+      storeNames[a.value] ?? a.label,
+      storeNames[b.value] ?? b.label,
+    ),
+  );
+
+  const toggle = (
+    current: string[],
+    value: string,
+    checked: boolean,
+    onChange: (values: string[]) => void,
+  ) => {
+    onChange(
+      checked
+        ? Array.from(new Set([...current, value]))
+        : current.filter((item) => item !== value),
+    );
+  };
+
   return (
     <div className="search-filters">
       <fieldset className="search-filter-group">
         <legend className="search-filter-heading">
-          <span>A</span> Kategori
+          KATEGORI
         </legend>
 
-        {categories.map((category) => (
+        {sortedCategories.map((category) => (
           <label
             className="search-filter-option"
             key={category.value}
@@ -49,29 +75,33 @@ export default function SearchFilters({
             <span className="search-filter-option-name">
               <input
                 type="checkbox"
-                checked={
-                  selectedCategory === category.value
-                }
+                checked={selectedCategories.includes(
+                  category.value,
+                )}
                 onChange={(event) =>
-                  onCategoryChange(
-                    event.target.checked
-                      ? category.value
-                      : null,
+                  toggle(
+                    selectedCategories,
+                    category.value,
+                    event.target.checked,
+                    onCategoriesChange,
                   )
                 }
               />
               <span>{category.label}</span>
             </span>
+            <span className="search-filter-count">
+              {category.count}
+            </span>
           </label>
         ))}
       </fieldset>
 
       <fieldset className="search-filter-group">
         <legend className="search-filter-heading">
-          <span>B</span> Butikkjede
+          BUTIKKJEDE
         </legend>
 
-        {stores.map((store) => (
+        {sortedStores.map((store) => (
           <label
             className="search-filter-option"
             key={store.value}
@@ -79,16 +109,22 @@ export default function SearchFilters({
             <span className="search-filter-option-name">
               <input
                 type="checkbox"
-                checked={selectedStore === store.value}
+                checked={selectedStores.includes(store.value)}
                 onChange={(event) =>
-                  onStoreChange(
-                    event.target.checked
-                      ? store.value
-                      : null,
+                  toggle(
+                    selectedStores,
+                    store.value,
+                    event.target.checked,
+                    onStoresChange,
                   )
                 }
               />
-              <span>{store.label}</span>
+              <span>
+                {storeNames[store.value] ?? store.label}
+              </span>
+            </span>
+            <span className="search-filter-count">
+              {store.count}
             </span>
           </label>
         ))}
diff --git a/frontend/src/pages/SearchResults/SearchProductList.tsx b/frontend/src/pages/SearchResults/SearchProductList.tsx
index dfbe1c1..5814869 100644
--- a/frontend/src/pages/SearchResults/SearchProductList.tsx
+++ b/frontend/src/pages/SearchResults/SearchProductList.tsx
@@ -1,44 +1,65 @@
 
-import type { SearchProduct, ProductPrice } from "./searchTypes";
+import type {
+  SearchProduct,
+  ProductPrice,
+} from "./searchTypes";
 
 type SearchProductListProps = {
   products: SearchProduct[];
-  selectedStore?: string | null;
+  selectedStores?: string[];
+  startIndex?: number;
   onAddProduct?: (product: SearchProduct) => void;
 };
 
-const priceFormatter = new Intl.NumberFormat("nb-NO", {
+const formatter = new Intl.NumberFormat("nb-NO", {
   minimumFractionDigits: 2,
   maximumFractionDigits: 2,
 });
 
+const storeNames: Record<string, string> = {
+  KIWI: "Kiwi",
+  MENY_NO: "Meny",
+  SPAR_NO: "Spar",
+  BUNNPRIS: "Bunnpris",
+  COOP_NO: "Coop",
+  JOKER_NO: "Joker",
+  ODA_NO: "Oda",
+  EUROPRIS_NO: "Europris",
+  ENGROSSNETT_NO: "Engrosnett",
+};
+
 function getDisplayPrice(
   prices: ProductPrice[],
-  selectedStore?: string | null,
+  selectedStores: string[],
 ): ProductPrice | null {
-  if (selectedStore) {
-    return (
-      prices.find((price) => price.storeCode === selectedStore) ?? null
-    );
-  }
+  const availablePrices =
+    selectedStores.length === 0
+      ? prices
+      : prices.filter((price) =>
+          selectedStores.includes(price.storeCode),
+        );
 
-  if (prices.length === 0) {
+  if (availablePrices.length === 0) {
     return null;
   }
 
-  return prices.reduce((lowest, current) =>
+  return availablePrices.reduce((lowest, current) =>
     current.price < lowest.price ? current : lowest,
   );
 }
 
 export default function SearchProductList({
   products,
-  selectedStore,
+  selectedStores = [],
+  startIndex = 0,
   onAddProduct,
 }: SearchProductListProps) {
   return (
     <div className="search-product-table">
-      <div className="search-product-table-header" aria-hidden="true">
+      <div
+        className="search-product-table-header"
+        aria-hidden="true"
+      >
         <span>#</span>
         <span>Vare</span>
         <span>Kr/kg</span>
@@ -50,13 +71,18 @@ export default function SearchProductList({
         {products.map((product, index) => {
           const displayPrice = getDisplayPrice(
             product.prices,
-            selectedStore,
+            selectedStores,
           );
 
           return (
-            <li className="search-product-row" key={product.ean}>
+            <li
+              className="search-product-row"
+              key={product.ean}
+            >
               <span className="search-product-number">
-                {String(index + 1).padStart(3, "0")}
+                {String(
+                  startIndex + index + 1,
+                ).padStart(3, "0")}
               </span>
 
               <div className="search-product-info">
@@ -70,37 +96,22 @@ export default function SearchProductList({
 
               <span className="search-product-unit-price">
                 {displayPrice?.unitPrice != null
-                  ? priceFormatter.format(displayPrice.unitPrice)
+                  ? formatter.format(displayPrice.unitPrice)
                   : "—"}
               </span>
 
-              <div className="search-product-price-column">
-                <span className="search-product-price">
-                  {displayPrice
-                    ? priceFormatter.format(displayPrice.price)
-                    : "Pris mangler"}
-                </span>
+              <span className="search-product-price">
+                {displayPrice
+                  ? formatter.format(displayPrice.price)
+                  : "Pris mangler"}
 
-                {selectedStore && displayPrice && (
-                  <span className="search-product-store-name">
-                    {selectedStore === "KIWI"
-                      ? "Kiwi"
-                      : selectedStore === "MENY_NO"
-                        ? "Meny"
-                        : selectedStore === "SPAR_NO"
-                          ? "Spar"
-                          : selectedStore === "BUNNPRIS"
-                            ? "Bunnpris"
-                            : selectedStore === "COOP_NO"
-                              ? "Coop"
-                              : selectedStore === "JOKER_NO"
-                                ? "Joker"
-                                : selectedStore === "ODA_NO"
-                                  ? "Oda"
-                                  : "Europris"}
+                {displayPrice && (
+                  <span className="search-product-store">
+                    {storeNames[displayPrice.storeCode] ??
+                      displayPrice.storeCode}
                   </span>
                 )}
-              </div>
+              </span>
 
               <button
                 type="button"
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.css b/frontend/src/pages/SearchResults/SearchResultsPage.css
index df396b8..e2399ab 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.css
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.css
@@ -1,19 +1,54 @@
-
-/* =========================================
+/* ==========================================================================
    HANDLELAPPEN – SØKERESULTATER
    Issue #37
 
-   Farger og fonter hentes fra theme.css.
-   Fungerer i både light og dark mode.
-   ========================================= */
-
-/* Grunnstruktur */
-
+   Farger og fonter hentes fra theme.css (CSS-variabler som --bg-page,
+   --text-primary, --font-ui osv.). Fungerer i både light og dark mode.
+
+   OVERSIKT OVER FILEN
+   --------------------------------------------------------------------------
+   DEL 1: DESKTOP (standard-styling som gjelder alle skjermstørrelser)
+     1.  Grunnstruktur og side
+     2.  Overskrift (tittel, seksjonsetikett, antall treff)
+     3.  Hovedlayout (filter | resultater | handleliste)
+     4.  Søkefelt på søkeresultatsiden
+     5.  Verktøylinje (toolbar)
+     6.  Sortering – enkel <select> og egendefinert nedtrekksmeny
+     7.  Aktive filtre (chips)
+     8.  Filterpanel (venstre kolonne)
+     9.  Produktliste (tabell, rader, pris, butikk, legg til-knapp)
+     10. Paginering
+     11. Tomt søkeresultat
+     12. Midlertidig handlelisteområde (høyre kolonne)
+
+   DEL 2: NETTBRETT OG MOBIL (alle @media-regler samlet)
+     13. Nettbrett (opptil 1100px og 900px)
+     14. Mobil (opptil 700px)
+     15. Liten mobil (opptil 600px)
+     16. Mobil – nye tilpasninger (tom seksjon, klar til å fylles ut)
+
+   Merk: Alle @media-regler ligger nederst med vilje. De skal overstyre
+   desktop-stylingen, og da må de komme etter den i filen.
+   ========================================================================== */
+
+
+/* ==========================================================================
+   DEL 1: DESKTOP – STANDARD-STYLING
+   ========================================================================== */
+
+
+/* ==========================================================================
+   1. GRUNNSTRUKTUR OG SIDE
+   Felles regler for hele søkeresultatsiden.
+   ========================================================================== */
+
+/* Gjør at padding og border regnes med i bredden på alle elementer på siden */
 .search-results-page,
 .search-results-page * {
   box-sizing: border-box;
 }
 
+/* Selve siden: sentrert container med maks bredde, bakgrunn og tekstfarge */
 .search-results-page {
   width: 100%;
   max-width: 1440px;
@@ -25,6 +60,7 @@
   text-align: left;
 }
 
+/* Felles utseende for overskrifter (h1–h3) på siden */
 .search-results-page h1,
 .search-results-page h2,
 .search-results-page h3 {
@@ -33,14 +69,30 @@
   font-family: var(--font-ui);
 }
 
-/* Overskrift */
+/* Lange ord uten mellomrom (for eksempel et langt søkeord) brytes
+   i stedet for å gå utenfor skjermen. Gjelder alle skjermstørrelser. */
+.search-results-page h1,
+.search-results-page h2,
+.search-results-page h3,
+.search-results-page p,
+.search-empty-state {
+  overflow-wrap: anywhere;
+}
+
+
+/* ==========================================================================
+   2. OVERSKRIFT
+   Toppen av siden: liten seksjonsetikett, stor tittel og antall treff.
+   ========================================================================== */
 
+/* Beholder for hele overskriften, med strek under */
 .search-results-header {
   padding-bottom: 32px;
   margin-bottom: 32px;
   border-bottom: 1px solid var(--border-hairline);
 }
 
+/* Liten etikett over tittelen (monospace, store bokstaver) */
 .search-results-section-label {
   margin: 0 0 12px;
   color: var(--text-accent);
@@ -51,6 +103,7 @@
   text-transform: uppercase;
 }
 
+/* Hovedtittel. Størrelsen skalerer mellom 32px og 48px etter skjermbredde */
 .search-results-header h1 {
   margin: 0 0 12px;
   font-size: clamp(32px, 4vw, 48px);
@@ -59,6 +112,7 @@
   line-height: 1.15;
 }
 
+/* Uthevet ord i tittelen (kursiv, merkefarge, egen font) */
 .search-results-header h1 em {
   color: var(--text-brand);
   font-family: var(--font-accent);
@@ -66,6 +120,7 @@
   font-weight: 400;
 }
 
+/* Tekst som viser antall treff under tittelen */
 .search-results-count {
   margin: 0;
   color: var(--text-muted);
@@ -75,8 +130,13 @@
   text-transform: uppercase;
 }
 
-/* Hovedlayout */
 
+/* ==========================================================================
+   3. HOVEDLAYOUT
+   Tre kolonner på desktop: filter (200px) | resultater (fleksibel) | liste (300px).
+   ========================================================================== */
+
+/* Grid som plasserer de tre kolonnene ved siden av hverandre */
 .search-results-layout {
   display: grid;
   grid-template-columns: 200px minmax(0, 1fr) 300px;
@@ -84,14 +144,50 @@
   align-items: start;
 }
 
+/* min-width: 0 hindrer at innhold presser kolonnene bredere enn grid-en */
 .search-results-filters,
 .search-results-content,
 .search-results-shopping-list {
   min-width: 0;
 }
 
-/* Verktøylinje */
+/* Minimumshøyde på resultatlisten, så siden ikke hopper når listen er kort */
+.search-results-list {
+  min-height: 300px;
+}
+
+
+/* ==========================================================================
+   4. SØKEFELT PÅ SØKERESULTATSIDEN
+   Sentrert søkefelt over hovedlayouten.
+   ========================================================================== */
+
+/* Ytre beholder som sentrerer søkefeltet */
+.search-results-searchbar {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 36px;
+}
+
+/* Selve søkefeltet: full bredde opp til 640px */
+.search-results-searchbar .search-field {
+  width: 100%;
+  max-width: 640px;
+}
+
+/* min-width: 0 lar søkefeltet krympe i stedet for å presse siden bredere */
+.search-results-searchbar,
+.search-results-searchbar .search-field {
+  min-width: 0;
+}
+
 
+/* ==========================================================================
+   5. VERKTØYLINJE (TOOLBAR)
+   Raden over produktlisten med tittel til venstre og sortering til høyre.
+   ========================================================================== */
+
+/* Raden med strek under */
 .search-results-toolbar {
   display: flex;
   justify-content: space-between;
@@ -102,41 +198,274 @@
   border-bottom: 1px solid var(--border-hairline);
 }
 
+/* Tittelen i verktøylinjen */
 .search-results-toolbar h2 {
   margin: 0;
   font-size: 14px;
   font-weight: 600;
 }
 
-.search-results-list {
-  min-height: 300px;
+
+/* ==========================================================================
+   6. SORTERING
+   To varianter ligger i filen:
+   6a. Enkel <select> (.search-sort-select)
+   6b. Egendefinert nedtrekksmeny (.search-sort-dropdown)
+   Begge deler beholderen .search-sort og etiketten .search-sort-label.
+   ========================================================================== */
+
+/* ---- 6a. Felles: beholder og etikett ---- */
+
+/* Beholder som legger etikett og nedtrekk på én linje */
+.search-sort {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-/* Midlertidig handlelisteområde.
-   Erstattes senere med Lindes komponent. */
+/* Liten etikett («Sorter»), monospace med store bokstaver */
+.search-sort-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
 
-.search-results-shopping-list {
-  padding: 24px;
-  background: var(--note-paper);
-  color: var(--note-ink);
-  border: 1px solid var(--border-strong);
-  box-shadow: 6px 6px 0 var(--note-tint);
+/* ---- 6b. Enkel <select> med egen pil (tegnet med to gradienter) ---- */
+
+.search-sort-select {
+  appearance: none;
+  -webkit-appearance: none;
+
+  width: 190px;
+  padding: 10px 38px 10px 14px;
+
+  border: 1px solid var(--border-hairline);
+  border-radius: 6px;
+
+  background-color: var(--bg-surface);
+  background-image:
+    linear-gradient(
+      45deg,
+      transparent 50%,
+      var(--text-primary) 50%
+    ),
+    linear-gradient(
+      135deg,
+      var(--text-primary) 50%,
+      transparent 50%
+    );
+
+  background-position:
+    calc(100% - 21px) 50%,
+    calc(100% - 16px) 50%;
+
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
 }
 
-.search-results-shopping-list h2 {
-  margin: 0 0 12px;
-  color: var(--note-ink);
-  font-size: 16px;
+.search-sort-select:hover {
+  border-color: var(--border-brand);
 }
 
-.search-results-shopping-list p {
-  color: var(--text-secondary);
+/* Synlig fokus for tastaturbrukere (tilgjengelighet) */
+.search-sort-select:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 3px;
+}
+
+/* ---- 6c. Egendefinert sorteringsmeny: ytre beholder ---- */
+
+/* position: relative gjør at menyen kan plasseres rett under knappen */
+.search-sort-dropdown {
+  position: relative;
+  width: 190px;
+  flex-shrink: 0;
+}
+
+/* ---- 6d. Egendefinert sorteringsmeny: knappen som åpner menyen ---- */
+
+.search-sort-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+
+  width: 100%;
+  min-height: 42px;
+  padding: 10px 18px 10px 14px;
+
+  border: 1px solid var(--border-hairline);
+  border-radius: 7px;
+
+  background: var(--bg-surface);
+  color: var(--text-primary);
+
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  text-align: left;
+
+  cursor: pointer;
+}
+
+.search-sort-trigger:hover {
+  border-color: var(--border-brand);
+}
+
+.search-sort-trigger:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 3px;
+}
+
+/* ---- 6e. Egendefinert sorteringsmeny: pilen (chevron) i knappen ---- */
+
+/* Pilen lages av to kanter på en firkant som roteres 45 grader */
+.search-sort-chevron {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+
+  transform: translateY(-2px) rotate(45deg);
+  transition: transform 0.15s ease;
+}
+
+/* Pilen snur seg når menyen er åpen */
+.search-sort-chevron--open {
+  transform: translateY(2px) rotate(225deg);
+}
+
+/* ---- 6f. Egendefinert sorteringsmeny: selve menyen ---- */
+
+/* Menyen åpnes rett under knappen og ligger over annet innhold (z-index) */
+.search-sort-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 100;
+
+  width: 100%;
+  padding: 5px;
+
+  border: 1px solid var(--border-hairline);
+  border-radius: 8px;
+
+  background: var(--bg-surface);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+
+/* ---- 6g. Egendefinert sorteringsmeny: alternativene i menyen ---- */
+
+.search-sort-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  width: 100%;
+  padding: 11px 10px;
+
+  border: none;
+  border-radius: 5px;
+
+  background: transparent;
+  color: var(--text-primary);
+
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-align: left;
+
+  cursor: pointer;
+}
+
+/* Hover og tastaturfokus får samme utseende */
+.search-sort-option:hover,
+.search-sort-option:focus-visible {
+  background: var(--bg-tint);
+  color: var(--text-brand);
+  outline: none;
+}
+
+/* Alternativet som er valgt nå */
+.search-sort-option--selected {
+  color: var(--text-accent);
+  font-weight: 600;
+}
+
+/* Hake ved valgt alternativ */
+.search-sort-check {
+  color: var(--text-accent);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+
+/* ==========================================================================
+   7. AKTIVE FILTRE (CHIPS)
+   Små knapper som viser hvilke filtre som er valgt, og en «nullstill»-knapp.
+   ========================================================================== */
+
+/* Raden som holder alle chips */
+.search-active-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+/* Én chip (et valgt filter som kan klikkes for å fjernes) */
+.search-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: var(--bg-tint);
+  color: var(--text-brand);
+  font: 500 11px var(--font-mono);
+  cursor: pointer;
+}
+
+.search-filter-chip:hover {
+  border-color: var(--border-brand);
+}
+
+/* Tekstknapp for å nullstille alle filtre */
+.search-filter-reset {
+  border: 0;
+  padding: 8px;
+  background: transparent;
+  color: var(--text-accent);
+  font: 500 11px var(--font-mono);
+  cursor: pointer;
+}
+
+/* Synlig fokus for tastaturbrukere (gjelder både chip og nullstill) */
+.search-filter-chip:focus-visible,
+.search-filter-reset:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 3px;
 }
 
-/* =========================================
-   FILTERPANEL
-   ========================================= */
 
+/* ==========================================================================
+   8. FILTERPANEL (VENSTRE KOLONNE)
+   Grupper med avkrysningsbokser, for eksempel kategori og butikk.
+   ========================================================================== */
+
+/* Beholder som stabler alle filtergruppene vertikalt */
 .search-filters {
   display: flex;
   flex-direction: column;
@@ -144,6 +473,7 @@
   text-align: left;
 }
 
+/* Én gruppe (en <fieldset>). Nullstiller nettleserens standardstil */
 .search-filter-group {
   min-width: 0;
   margin: 0;
@@ -151,6 +481,7 @@
   border: 0;
 }
 
+/* Gruppeoverskrift (monospace) med strek under */
 .search-filter-heading {
   width: 100%;
   padding-bottom: 10px;
@@ -164,11 +495,14 @@
   text-transform: uppercase;
 }
 
+/* Nummer eller symbol foran overskriften */
 .search-filter-heading span {
   margin-right: 6px;
   color: var(--text-accent);
 }
 
+/* ---- Ett filteralternativ: navn til venstre, antall til høyre ---- */
+
 .search-filter-option {
   display: flex;
   justify-content: space-between;
@@ -180,13 +514,28 @@
   cursor: pointer;
 }
 
+/* Boks og navn ved siden av hverandre */
 .search-filter-option-name {
   display: flex;
   align-items: center;
   gap: 9px;
 }
 
-/* Samme visuelle prinsipp som Lindes Checkbox */
+/* Antall treff for alternativet */
+.search-filter-count {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.search-filter-option:hover {
+  color: var(--text-accent);
+}
+
+/* ---- Avkrysningsboksen ----
+   Samme visuelle prinsipp som Lindes Checkbox.
+   Standard utseende fjernes (appearance: none) og tegnes på nytt. */
 
 .search-filter-option input {
   appearance: none;
@@ -202,11 +551,13 @@
   cursor: pointer;
 }
 
+/* Valgt: fylt bakgrunn */
 .search-filter-option input:checked {
   background: var(--bg-brand);
   border-color: var(--bg-brand);
 }
 
+/* Valgt: haken tegnes med to kanter på et lite element som roteres */
 .search-filter-option input:checked::after {
   content: "";
   width: 8px;
@@ -216,30 +567,32 @@
   transform: translateY(-1px) rotate(-45deg);
 }
 
+/* Synlig fokus for tastaturbrukere */
 .search-filter-option input:focus-visible {
   outline: 2px solid var(--text-accent);
   outline-offset: 2px;
 }
 
-.search-filter-count {
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
+/* Knappen som åpner filtrene på mobil. Skjult på desktop,
+   vises igjen i seksjon 14 (mobil). */
+.search-mobile-filter-toggle {
+  display: none;
 }
 
-.search-filter-option:hover {
-  color: var(--text-accent);
-}
 
-/* =========================================
-   PRODUKTLISTE
-   ========================================= */
+/* ==========================================================================
+   9. PRODUKTLISTE
+   Tabell med kolonner: nummer | produkt | enhetspris | pris | legg til-knapp.
+   ========================================================================== */
+
+/* ---- 9a. Tabellen og kolonneoppsettet ---- */
 
 .search-product-table {
   width: 100%;
 }
 
+/* Overskriftsraden og hver produktrad deler samme kolonner:
+   32px nummer | fleksibel produktinfo | 80px enhetspris | 90px pris | 145px knapp */
 .search-product-table-header,
 .search-product-row {
   display: grid;
@@ -249,6 +602,7 @@
   align-items: center;
 }
 
+/* Overskriftsraden over listen */
 .search-product-table-header {
   padding: 12px 0;
   border-bottom: 1px solid var(--border-strong);
@@ -259,24 +613,29 @@
   text-transform: uppercase;
 }
 
+/* Listen med produktrader (nullstiller standard listestil) */
 .search-product-items {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+/* ---- 9b. Én produktrad ---- */
+
 .search-product-row {
   min-height: 70px;
   padding: 12px 0;
   border-bottom: 1px solid var(--border-hairline);
 }
 
+/* Radnummer */
 .search-product-number {
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 11px;
 }
 
+/* Navn og merke stablet vertikalt */
 .search-product-info {
   display: flex;
   flex-direction: column;
@@ -284,6 +643,7 @@
   min-width: 0;
 }
 
+/* Produktnavn */
 .search-product-info strong {
   color: var(--text-primary);
   font-size: 14px;
@@ -291,6 +651,7 @@
   line-height: 1.3;
 }
 
+/* Merkenavn under produktnavnet */
 .search-product-brand {
   color: var(--text-muted);
   font-family: var(--font-mono);
@@ -298,12 +659,16 @@
   text-transform: uppercase;
 }
 
+/* ---- 9c. Pris, enhetspris og butikk ---- */
+
+/* Enhetspris (for eksempel kr/kg) */
 .search-product-unit-price {
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 11px;
 }
 
+/* Hovedpris */
 .search-product-price {
   color: var(--text-primary);
   font-size: 15px;
@@ -311,6 +676,36 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* Prisen og butikknavnet stablet vertikalt i prisfeltet */
+.search-product-price-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  min-width: 0;
+}
+
+/* Butikknavn i prisfeltet */
+.search-product-store-name {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-accent);
+}
+
+/* Butikketikett under pris */
+.search-product-store {
+  display: block;
+  margin-top: 4px;
+  color: var(--text-accent);
+  font: 500 10px var(--font-mono);
+  text-transform: uppercase;
+}
+
+/* ---- 9d. «Legg til»-knappen ---- */
+
 .search-product-add-button {
   padding: 10px 8px;
   background: var(--bg-surface);
@@ -326,6 +721,7 @@
   border-color: var(--border-brand);
 }
 
+/* Deaktivert tilstand (for eksempel mens varen legges til) */
 .search-product-add-button:disabled {
   opacity: 0.55;
   cursor: not-allowed;
@@ -336,89 +732,22 @@
   outline-offset: 3px;
 }
 
-/* =========================================
-   RESPONSIVT DESIGN
-   ========================================= */
 
-@media (max-width: 1100px) {
-  .search-results-layout {
-    grid-template-columns: 180px minmax(0, 1fr);
-  }
+/* ==========================================================================
+   10. PAGINERING
+   «Viser X av N»-tekst og sideknapper under produktlisten.
+   ========================================================================== */
 
-  .search-results-shopping-list {
-    grid-column: 1 / -1;
-  }
-}
-
-@media (max-width: 900px) {
-  .search-product-table-header,
-  .search-product-row {
-    grid-template-columns: 28px minmax(0, 1fr) 80px;
-    gap: 10px;
-  }
-
-  .search-product-table-header span:nth-child(3),
-  .search-product-table-header span:nth-child(5),
-  .search-product-unit-price {
-    display: none;
-  }
-
-  .search-product-add-button {
-    grid-column: 2 / -1;
-    justify-self: start;
-  }
-}
-
-@media (max-width: 700px) {
-  .search-results-page {
-    padding: 24px 16px 48px;
-  }
-
-  .search-results-layout {
-    grid-template-columns: 1fr;
-    gap: 24px;
-  }
-
-  .search-results-header {
-    margin-bottom: 24px;
-  }
-
-  .search-results-filters,
-  .search-results-shopping-list {
-    grid-column: 1;
-  }
-}
-
-/* Søkefelt på søkeresultatsiden */
-
-.search-results-searchbar {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 36px;
-}
-
-.search-results-searchbar .search-field {
-  width: 100%;
-  max-width: 640px;
-}
-
-@media (max-width: 700px) {
-  .search-results-searchbar {
-    margin-bottom: 24px;
-  }
-}
-
-
-/* Paginering */
-
-.search-pagination-count {
-  margin: 24px 0 12px;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
+/* Tekst som viser hvor mange varer som vises */
+.search-pagination-count {
+  margin: 24px 0 12px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
 }
 
+/* Raden med sideknapper (brytes til flere linjer ved behov) */
 .search-pagination {
   display: flex;
   align-items: center;
@@ -428,12 +757,14 @@
   margin-top: 16px;
 }
 
+/* Hvert element i pagineringen (knapp eller «...») */
 .search-pagination-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
 
+/* Sideknapper */
 .search-pagination button {
   min-width: 36px;
   height: 36px;
@@ -451,6 +782,7 @@
   border-color: var(--border-brand);
 }
 
+/* Knappen for siden brukeren er på nå */
 .search-pagination button.is-active {
   background: var(--bg-brand);
   color: var(--text-on-dark);
@@ -462,73 +794,522 @@
   outline-offset: 3px;
 }
 
+/* Deaktivert knapp (for eksempel «forrige» på første side) */
 .search-pagination button:disabled {
   opacity: 0.35;
   cursor: not-allowed;
 }
 
+/* Tekst mellom knappene (for eksempel «...») */
 .search-pagination-item > span {
   color: var(--text-muted);
   font-family: var(--font-mono);
 }
 
 
-/* Aktive filtre */
+/* ==========================================================================
+   11. TOMT SØKERESULTAT
+   Vises når søk eller filtre ikke gir treff.
+   ========================================================================== */
 
-.search-active-filters {
+/* ---- 11a. Enkel tomtilstand ---- */
+
+.search-no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 24px 0;
+  color: var(--text-primary);
+}
+
+/* ---- 11b. Utvidet tomtilstand: boks, ikon og tekster ---- */
+
+/* Selve boksen */
+.search-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 48px 24px;
+  border: 1px solid var(--border-hairline);
+  border-radius: 10px;
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+
+/* Rund ikonsirkel øverst */
+.search-empty-state-icon {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  margin-bottom: 6px;
+  border-radius: 50%;
+  background: var(--bg-tint);
+  color: var(--text-accent);
+}
+
+/* Liten etikett over tittelen */
+.search-empty-state-label {
+  font: 500 10px var(--font-mono);
+  letter-spacing: 0.12em;
+  color: var(--text-accent);
+}
+
+/* Tittel. Størrelsen skalerer mellom 22px og 30px */
+.search-empty-state-title {
+  margin: 0;
+  font-family: var(--font-ui);
+  font-size: clamp(22px, 3vw, 30px);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+}
+
+/* Beskrivelse og hjelpetekst */
+.search-empty-state-description,
+.search-empty-state-hint {
+  max-width: 420px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* ---- 11c. Utvidet tomtilstand: alternativer i andre butikker ---- */
+
+/* Område med strek over som foreslår andre butikker */
+.search-empty-state-alternatives {
+  width: 100%;
+  margin-top: 14px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-hairline);
+}
+
+.search-empty-state-alternatives h4 {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.search-empty-state-alternatives > p {
+  margin-bottom: 16px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* Liste med butikkene */
+.search-empty-state-store-list {
+  display: flex;
+  flex-direction: column;
   gap: 8px;
-  margin-bottom: 18px;
 }
 
-.search-filter-chip {
-  display: inline-flex;
+/* Én butikk som knapp: navn til venstre, antall til høyre */
+.search-empty-state-store {
+  display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  border: 1px solid transparent;
-  border-radius: 5px;
-  background: var(--bg-tint);
-  color: var(--text-brand);
-  font: 500 11px var(--font-mono);
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 13px 16px;
+  border: 1px solid var(--border-hairline);
+  border-radius: 7px;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font: 500 13px var(--font-ui);
+  text-align: left;
   cursor: pointer;
 }
 
-.search-filter-chip:hover {
+.search-empty-state-store:hover {
   border-color: var(--border-brand);
+  background: var(--bg-tint);
 }
 
-.search-filter-reset {
-  border: 0;
-  padding: 8px;
-  background: transparent;
-  color: var(--text-accent);
-  font: 500 11px var(--font-mono);
+/* Antall treff i butikken (skyves helt til høyre) */
+.search-empty-state-store-count {
+  margin-left: auto;
+  color: var(--text-muted);
+  font: 500 10px var(--font-mono);
+}
+
+/* ---- 11d. Utvidet tomtilstand: nullstill-knappen ---- */
+
+.search-empty-state-reset {
+  margin-top: 12px;
+  padding: 11px 16px;
+  border: 1px solid var(--border-brand);
+  border-radius: 7px;
+  background: var(--bg-surface);
+  color: var(--text-brand);
+  font: 500 12px var(--font-ui);
   cursor: pointer;
 }
 
-.search-filter-chip:focus-visible,
-.search-filter-reset:focus-visible {
+.search-empty-state-reset:hover {
+  background: var(--bg-tint);
+}
+
+/* Synlig fokus for tastaturbrukere (butikkknapp og nullstill-knapp) */
+.search-empty-state-store:focus-visible,
+.search-empty-state-reset:focus-visible {
   outline: 2px solid var(--text-accent);
   outline-offset: 3px;
 }
 
 
-.search-product-price-column {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 3px;
-  min-width: 0;
+/* ==========================================================================
+   12. MIDLERTIDIG HANDLELISTEOMRÅDE (HØYRE KOLONNE)
+   Plassholder som erstattes senere med Lindes komponent.
+   ========================================================================== */
+
+/* Boks i «lapp»-stil med skygge forskjøvet nedover og til høyre */
+.search-results-shopping-list {
+  padding: 24px;
+  background: var(--note-paper);
+  color: var(--note-ink);
+  border: 1px solid var(--border-strong);
+  box-shadow: 6px 6px 0 var(--note-tint);
 }
 
-.search-product-store-name {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-accent);
+.search-results-shopping-list h2 {
+  margin: 0 0 12px;
+  color: var(--note-ink);
+  font-size: 16px;
+}
+
+.search-results-shopping-list p {
+  color: var(--text-secondary);
+}
+
+
+/* ==========================================================================
+   DEL 2: NETTBRETT OG MOBIL – ALLE @MEDIA-REGLER
+   --------------------------------------------------------------------------
+   Alt under gjelder BARE når skjermen er smal. Bredde, høyde, padding, antall
+   kolonner og skjulte elementer i denne delen er tilpasninger for nettbrett
+   og mobil. Desktop-stylingen ligger i DEL 1 over.
+
+   Rekkefølgen er fra bredest til smalest (1100 → 900 → 700 → 600), slik at
+   de smaleste reglene vinner når flere gjelder samtidig.
+   ========================================================================== */
+
+
+/* ==========================================================================
+   13. NETTBRETT (OPPTIL 1100px OG 900px)
+   ========================================================================== */
+
+/* ---- 13a. Opptil 1100px: hovedlayout går fra 3 til 2 kolonner ---- */
+@media (max-width: 1100px) {
+  /* Filter (180px) og resultater. Handlelisten flyttes under */
+  .search-results-layout {
+    grid-template-columns: 180px minmax(0, 1fr);
+  }
+
+  /* Handlelisten strekker seg over alle kolonnene, under resultatene */
+  .search-results-shopping-list {
+    grid-column: 1 / -1;
+  }
+}
+
+/* ---- 13b. Opptil 900px: produkttabellen forenkles ---- */
+@media (max-width: 900px) {
+  /* Tabellen får 3 kolonner: nummer | produkt | pris */
+  .search-product-table-header,
+  .search-product-row {
+    grid-template-columns: 28px minmax(0, 1fr) 80px;
+    gap: 10px;
+  }
+
+  /* Skjuler kolonneoverskrift 3 og 5 samt enhetsprisen for å spare plass */
+  .search-product-table-header span:nth-child(3),
+  .search-product-table-header span:nth-child(5),
+  .search-product-unit-price {
+    display: none;
+  }
+
+  /* Legg til-knappen flyttes til egen linje under produktinfoen */
+  .search-product-add-button {
+    grid-column: 2 / -1;
+    justify-self: start;
+  }
+}
+
+
+/* ==========================================================================
+   14. MOBIL (OPPTIL 700px)
+   Én kolonne, mindre marger og tilpasninger for søkefelt og aktive filtre.
+   ========================================================================== */
+
+/* ---- 14a. Side og hovedlayout ---- */
+@media (max-width: 700px) {
+  /* Mindre padding rundt hele siden */
+  .search-results-page {
+    padding: 24px 16px 48px;
+  }
+
+  /* Alt stables i én kolonne med mindre mellomrom */
+  .search-results-layout {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  /* Mindre luft under overskriften */
+  .search-results-header {
+    margin-bottom: 24px;
+  }
+
+  /* Filter og handleliste legges i den ene kolonnen */
+  .search-results-filters,
+  .search-results-shopping-list {
+    grid-column: 1;
+  }
+}
+
+/* ---- 14b. Søkefelt ---- */
+@media (max-width: 700px) {
+  /* Mindre luft under søkefeltet */
+  .search-results-searchbar {
+    margin-bottom: 24px;
+  }
+}
+
+/* ---- 14c. Aktive filtre (chips) ---- */
+@media (max-width: 700px) {
+  /* Tettere mellom chips */
+  .search-active-filters {
+    gap: 6px;
+  }
+
+  /* Lange chips får bryte til flere linjer i stedet for å sprenge bredden */
+  .search-filter-chip {
+    max-width: 100%;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
+/* ---- 14d. Filterknapp og skjult filterpanel på mobil ---- */
+@media (max-width: 700px) {
+  /* Knappen vises og får samme stil som sorteringsknappen */
+  .search-mobile-filter-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 44px;
+    padding: 10px 14px;
+    border: 1px solid var(--border-hairline);
+    border-radius: 7px;
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    font: 500 12px var(--font-mono);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .search-mobile-filter-toggle:hover {
+    border-color: var(--border-brand);
+  }
+
+  /* Synlig fokus for tastaturbrukere */
+  .search-mobile-filter-toggle:focus-visible {
+    outline: 2px solid var(--text-accent);
+    outline-offset: 3px;
+  }
+
+  /* Filterpanelet er skjult til brukeren trykker på knappen */
+  .search-mobile-filter-panel {
+    display: none;
+    margin-top: 16px;
+  }
+
+  /* Åpent: React legger klassen is-open på <aside> */
+  .search-results-filters.is-open .search-mobile-filter-panel {
+    display: block;
+  }
+}
+
+
+/* ==========================================================================
+   15. LITEN MOBIL (OPPTIL 600px)
+   Verktøylinje, sortering og tomtilstand.
+   ========================================================================== */
+
+/* ---- 15a. Verktøylinje og enkel sortering ---- */
+@media (max-width: 600px) {
+  /* Elementene i verktøylinjen får bryte til ny linje */
+  .search-results-toolbar {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  /* Sorteringen tar full bredde */
+  .search-sort {
+    width: 100%;
+  }
+
+  /* Nedtrekket vokser og fyller bredden som er igjen */
+  .search-sort-select {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+/* ---- 15b. Egendefinert sorteringsmeny ---- */
+@media (max-width: 600px) {
+  /* Menyen tar full bredde i stedet for faste 190px */
+  .search-sort-dropdown {
+    width: 100%;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .search-sort-trigger {
+    width: 100%;
+  }
+
+  .search-sort-menu {
+    width: 100%;
+  }
+}
+
+/* ---- 15c. Tomt søkeresultat ---- */
+@media (max-width: 600px) {
+  /* Mindre padding i boksen */
+  .search-empty-state {
+    padding: 28px 16px;
+  }
+
+  /* Butikkens navn og antall får bryte til ny linje */
+  .search-empty-state-store {
+    flex-wrap: wrap;
+  }
+}
+
+
+/* ==========================================================================
+   16. MOBIL – NYE TILPASNINGER (KLAR TIL Å FYLLES UT)
+   --------------------------------------------------------------------------
+   Seksjonen er med vilje tom. Her legger vi alt nytt som gjelder mobilvisning:
+   bredder, høyder, padding, skriftstørrelser, skjulte elementer osv.
+   Alt i denne seksjonen skal ligge inne i en @media-regel.
+
+   Mal for nye regler (fjern kommentartegnene når du bruker den):
+
+   @media (max-width: 480px) {
+     /* Eksempel: .search-product-add-button { width: 100%; } *\/
+   }
+
+   Tips:
+   - Ligger nye regler her nederst, vinner de over reglene i seksjon 13–15
+     når de gjelder samme bredde.
+   - Legg til en kort kommentar over hver regel som forklarer hva den gjør.
+   ========================================================================== */
+
+  /* ---- 16-0. Hindrer sidelengs scrolling på mobil ---- */
+  @media (max-width: 700px) {
+    /* minmax(0, 1fr) lar kolonnen være smalere enn innholdet.
+      Vanlig 1fr vokser etter det bredeste ordet og sprenger skjermen. */
+    .search-results-layout {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    /* Sikkerhetsnett: klipper alt som likevel stikker ut til siden */
+    .search-results-page {
+      overflow-x: clip;
+    }
+  }
+
+  /* ---- 16a. Mobil (opptil 700px): større trykkflater og scrollbart filterpanel ---- */
+  @media (max-width: 700px) {
+  /* Åpent filterpanel får maks høyde og scroller internt,
+     slik at ikke hele siden skyves langt ned */
+  .search-mobile-filter-panel {
+    max-height: 60vh;
+    overflow-y: auto;
+    overscroll-behavior: contain; /* hindrer at siden scroller når panelet når enden */
+  }
+
+  /* Filteralternativer: høyere rader, lettere å treffe med tommel */
+  .search-filter-option {
+    padding: 12px 0;
+  }
+
+  /* Avkrysningsboks: større på mobil (haken justeres tilsvarende) */
+  .search-filter-option input {
+    width: 20px;
+    height: 20px;
+  }
+
+  .search-filter-option input:checked::after {
+    width: 10px;
+    height: 5px;
+  }
+
+  /* Sideknapper i pagineringen: 40px i stedet for 36px */
+  .search-pagination button {
+    min-width: 40px;
+    height: 40px;
+  }
+
+  /* Søkefeltet: 16px skrift hindrer at iPhone zoomer inn ved fokus */
+  .search-results-searchbar input {
+    font-size: 16px;
+  }
 }
+
+/* ---- 16b. Liten mobil (opptil 480px, dekker 390px, 360px og 320px) ---- */
+@media (max-width: 480px) {
+  /* Mindre padding på siden, så innholdet får mer plass */
+  .search-results-page {
+    padding: 20px 12px 40px;
+  }
+
+  /* Tettere overskrift */
+  .search-results-header {
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+  }
+
+  /* Mindre tittel, og lange søkeord får brytes i stedet for å sprenge bredden */
+  .search-results-header h1 {
+    font-size: 28px;
+    overflow-wrap: anywhere;
+  }
+
+  /* Tabell: smalere nummer-kolonne og fast bredde på prisen */
+  .search-product-table-header,
+  .search-product-row {
+    grid-template-columns: 24px minmax(0, 1fr) 76px;
+    column-gap: 8px;
+  }
+
+  /* Lange produktnavn brytes i stedet for å gå utenfor skjermen */
+  .search-product-info strong,
+  .search-product-brand {
+    overflow-wrap: anywhere;
+  }
+
+  /* «Legg på lappen» går over hele bredden og er minst 44px høy */
+  .search-product-add-button {
+    justify-self: stretch;
+    min-height: 44px;
+  }
+
+  /* Tomtilstand: mindre padding og mindre ikon */
+  .search-empty-state {
+    padding: 24px 14px;
+  }
+
+  .search-empty-state-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  /* Handlelisteboksen: mindre padding */
+  .search-results-shopping-list {
+    padding: 16px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/SearchResults/SearchResultsPage.tsx b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
index d4783e9..ada644a 100644
--- a/frontend/src/pages/SearchResults/SearchResultsPage.tsx
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
@@ -1,81 +1,419 @@
 
-import { useCallback, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+import { gql } from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+
 import { useQuery } from "@apollo/client/react";
 
 import SearchFilters from "./SearchFilters";
 import SearchInput from "./SearchInput";
 import SearchPagination from "./SearchPagination";
 import SearchProductList from "./SearchProductList";
-import { SEARCH_PRODUCTS_QUERY } from "./searchQueries";
+import SearchSortSelect from "./SearchSortSelect";
+
+import {
+  SEARCH_PRODUCTS_QUERY,
+  SEARCH_FILTER_COUNTS_QUERY,
+} from "./searchQueries";
+
+import {
+  loadSearchPreferences,
+  saveSearchPreferences,
+} from "./searchPreferences";
+
+import type {
+  SearchSort,
+  SearchProduct,
+  FilterCount,
+} from "./searchTypes";
 
 import "./SearchResultsPage.css";
 
+import SearchEmptyState from "./SearchEmptyState";
+
 const PAGE_SIZE = 20;
 
+// Typer for spørringen som henter alle kategorinavn
+type CategoryNamesData = {
+  categories: { id: string; name: string }[];
+};
+
+// Henter alle kategorinavn én gang, slik at filterbrikkene alltid kan vise
+// navn (også etter refresh og når søket gir null treff)
+const CATEGORY_NAMES_QUERY: TypedDocumentNode<CategoryNamesData> = gql`
+  query CategoryNames {
+    categories {
+      id
+      name
+    }
+  }
+`;
+
+const storeNames: Record<string, string> = {
+  KIWI: "Kiwi",
+  MENY_NO: "Meny",
+  SPAR_NO: "Spar",
+  BUNNPRIS: "Bunnpris",
+  COOP_NO: "Coop",
+  JOKER_NO: "Joker",
+  ODA_NO: "Oda",
+  EUROPRIS_NO: "Europris",
+  ENGROSSNETT_NO: "Engrosnett",
+  HOLDBART: "Holdbart",
+  HAVARISTEN: "Havaristen",
+  FUDI: "Fudi",
+  PERREROBERT: "Perrerobert",
+};
+
+const collator = new Intl.Collator("nb-NO", {
+  sensitivity: "base",
+});
+
+function normalizeCounts(
+  items:
+    | ReadonlyArray<{
+        value?: string;
+        label?: string;
+        count?: number;
+      } | null>
+    | null
+    | undefined,
+): FilterCount[] {
+  return (items ?? []).flatMap((item) => {
+    if (
+      item &&
+      typeof item.value === "string" &&
+      typeof item.label === "string" &&
+      typeof item.count === "number"
+    ) {
+      return [{
+        value: item.value,
+        label: item.label,
+        count: item.count,
+      }];
+    }
+
+    return [];
+  });
+}
+
+function normalizeProducts(
+  items: ReadonlyArray<{
+    ean?: string;
+    name?: string;
+    brand?: string | null;
+    imageUrl?: string | null;
+    categoryId?: string | null;
+    prices?: ReadonlyArray<{
+      storeCode?: string;
+      price?: number;
+      unitPrice?: number | null;
+    } | null>;
+  } | null> | null | undefined,
+): SearchProduct[] {
+  return (items ?? []).flatMap((product) => {
+    if (
+      !product ||
+      typeof product.ean !== "string" ||
+      typeof product.name !== "string"
+    ) {
+      return [];
+    }
+
+    const prices = (product.prices ?? []).flatMap(
+      (price) => {
+        if (
+          !price ||
+          typeof price.storeCode !== "string" ||
+          typeof price.price !== "number"
+        ) {
+          return [];
+        }
+
+        return [{
+          storeCode: price.storeCode,
+          price: price.price,
+          unitPrice:
+            typeof price.unitPrice === "number"
+              ? price.unitPrice
+              : null,
+        }];
+      },
+    );
+
+    return [{
+      ean: product.ean,
+      name: product.name,
+      brand: product.brand ?? null,
+      imageUrl: product.imageUrl ?? null,
+      categoryId: product.categoryId ?? null,
+      prices,
+    }];
+  });
+}
+
 export default function SearchResultsPage() {
-  const [searchTerm, setSearchTerm] = useState("ost");
-  const [currentPage, setCurrentPage] = useState(1);
-  const [selectedStore, setSelectedStore] = useState<string | null>(null);
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  // Hent lagrede innstillinger kun ved første rendering.
+  const [initialPreferences] = useState(
+    loadSearchPreferences,
+  );
+
+  const [searchTerm, setSearchTerm] = useState(
+    initialPreferences.searchTerm,
+  );
 
-  const handleSearchChange = useCallback((value: string) => {
-    setSearchTerm(value);
+  const [currentPage, setCurrentPage] = useState(
+    initialPreferences.currentPage,
+  );
+
+  const [sort, setSort] = useState<SearchSort>(
+    initialPreferences.sort,
+  );
+
+  const [selectedCategories, setSelectedCategories] =
+    useState<string[]>(
+      initialPreferences.selectedCategories,
+    );
+
+  const [selectedStores, setSelectedStores] =
+    useState<string[]>(
+      initialPreferences.selectedStores,
+    );
+
+  const [knownCategoryNames, setKnownCategoryNames] =
+    useState<Record<string, string>>({});
+  
+  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
+
+  // Brukes til å bevare scrollposisjonen når filtre endres.
+  const scrollPositionRef = useRef<number | null>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+
+  const [loadingMinHeight, setLoadingMinHeight] =
+    useState<number | null>(null);
+
+  const preservePosition = () => {
+    scrollPositionRef.current = window.scrollY;
+
+    if (resultsRef.current) {
+      setLoadingMinHeight(
+        resultsRef.current.getBoundingClientRect().height,
+      );
+    }
+  };
+
+  // Gjenopprett scrollposisjon etter at React har
+  // oppdatert innholdet.
+  useLayoutEffect(() => {
+    if (scrollPositionRef.current !== null) {
+      const previousPosition = scrollPositionRef.current;
+
+      window.scrollTo({
+        top: previousPosition,
+        behavior: "instant",
+      });
+
+      scrollPositionRef.current = null;
+    }
+  });
+
+  // Lagre søkeinnstillingene automatisk.
+  useEffect(() => {
+    saveSearchPreferences({
+      searchTerm,
+      selectedCategories,
+      selectedStores,
+      sort,
+      currentPage,
+    });
+  }, [
+    searchTerm,
+    selectedCategories,
+    selectedStores,
+    sort,
+    currentPage,
+  ]);
+
+  // Fjern midlertidig minimumshøyde når lasting er ferdig.
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchTerm(value);
+      setCurrentPage(1);
+    },
+    [],
+  );
+
+  const handleCategoriesChange = (
+    values: string[],
+  ) => {
+    preservePosition();
+    setSelectedCategories(values);
     setCurrentPage(1);
-  }, []);
+  };
 
-  const handleStoreChange = (store: string | null) => {
-    setSelectedStore(store);
+  const handleStoresChange = (
+    values: string[],
+  ) => {
+    preservePosition();
+    setSelectedStores(values);
     setCurrentPage(1);
   };
 
-  const handleCategoryChange = (category: string | null) => {
-    setSelectedCategory(category);
+  const handleSortChange = (value: SearchSort) => {
+    preservePosition();
+    setSort(value);
     setCurrentPage(1);
   };
 
-  const { data, loading, error } = useQuery(
-    SEARCH_PRODUCTS_QUERY,
-    {
-      variables: {
-        search: searchTerm,
-        category: selectedCategory ?? undefined,
-        storeCode: selectedStore ?? undefined,
-        limit: PAGE_SIZE,
-        offset: (currentPage - 1) * PAGE_SIZE,
-      },
-      skip: searchTerm.trim().length === 0,
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const resetFilters = () => {
+    preservePosition();
+    setSelectedCategories([]);
+    setSelectedStores([]);
+    setCurrentPage(1);
+  };
+
+  const hasSearch = searchTerm.trim().length > 0;
+
+  // Hent produkter.
+  const {
+    data,
+    loading,
+    error,
+  } = useQuery(SEARCH_PRODUCTS_QUERY, {
+    variables: {
+      search: searchTerm.trim(),
+      categories: selectedCategories,
+      storeCodes: selectedStores,
+      sort,
+      limit: PAGE_SIZE,
+      offset: (currentPage - 1) * PAGE_SIZE,
+    },
+    skip: !hasSearch,
+  });
+
+  // Hent dynamiske filtertall.
+  const {
+    data: filterData,
+    previousData: previousFilterData,
+    loading: filtersLoading,
+    error: filtersError,
+  } = useQuery(SEARCH_FILTER_COUNTS_QUERY, {
+    variables: {
+      search: searchTerm.trim(),
+      categories: selectedCategories,
+      storeCodes: selectedStores,
     },
+    skip: !hasSearch,
+  });
+
+  // Mens nye filtertall lastes, viser vi de forrige. Da beholder filterlisten
+  // samme høyde, og siden hopper ikke til toppen når du velger et filter.
+  const filterSource = filterData ?? previousFilterData;
+
+  const categoryCounts = normalizeCounts(
+    filterSource?.categoryFilterCounts,
   );
 
-  const products = data?.products ?? [];
+  const storeCounts = normalizeCounts(
+    filterSource?.storeFilterCounts,
+  );
+
+    // Henter alle kategorinavn én gang (brukes når navnet ikke finnes i filtertallene)
+  const { data: categoryNameData } = useQuery(CATEGORY_NAMES_QUERY);
+
+  // Gjør listen om til et oppslag: kategori-id -> navn
+  const allCategoryNames: Record<string, string> = Object.fromEntries(
+    (categoryNameData?.categories ?? []).map((category) => [
+      category.id,
+      category.name,
+    ]),
+  );
+
+    // Prøver først filtertallene, så navn vi har sett tidligere, så alle kategorinavn.
+    // «Kategori X» vises bare hvis navnet ikke finnes noe sted.
+    const getCategoryName = (value: string) =>
+      categoryCounts.find(
+        (category) => category.value === value,
+      )?.label ??
+      knownCategoryNames[value] ??
+      allCategoryNames[value] ??
+      `Kategori ${value}`;
+
+  const updateCategories = (values: string[]) => {
+    const names = Object.fromEntries(
+      categoryCounts.map(
+        (category) => [
+          category.value,
+          category.label,
+        ],
+      ),
+    );
+
+    setKnownCategoryNames((previous) => ({
+      ...previous,
+      ...names,
+    }));
+
+    handleCategoriesChange(values);
+  };
+
+  const products = normalizeProducts(data?.products);
+
   const totalProducts = data?.productsCount ?? 0;
-  const totalPages = Math.ceil(totalProducts / PAGE_SIZE);
+  const totalPages = Math.ceil(
+    totalProducts / PAGE_SIZE,
+  );
+
+  const firstProduct =
+    (currentPage - 1) * PAGE_SIZE + 1;
 
-  const firstProduct = (currentPage - 1) * PAGE_SIZE + 1;
   const lastProduct = Math.min(
     currentPage * PAGE_SIZE,
     totalProducts,
   );
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  };
+  const hasActiveFilters =
+    selectedCategories.length > 0 ||
+    selectedStores.length > 0;
 
-  const storeNames: Record<string, string> = {
-    KIWI: "Kiwi",
-    MENY_NO: "Meny",
-    SPAR_NO: "Spar",
-    BUNNPRIS: "Bunnpris",
-    COOP_NO: "Coop",
-    JOKER_NO: "Joker",
-    ODA_NO: "Oda",
-    EUROPRIS_NO: "Europris",
-  };
+  const sortedSelectedCategories = [
+    ...selectedCategories,
+  ].sort((a, b) =>
+    collator.compare(
+      getCategoryName(a),
+      getCategoryName(b),
+    ),
+  );
 
-  const selectedStoreName = selectedStore
-    ? storeNames[selectedStore]
-    : null;
+  const sortedSelectedStores = [
+    ...selectedStores,
+  ].sort((a, b) =>
+    collator.compare(
+      storeNames[a] ?? a,
+      storeNames[b] ?? b,
+    ),
+  );
+
+  const storeHeading =
+    selectedStores.length === 1
+      ? ` hos ${
+          storeNames[selectedStores[0]] ??
+          selectedStores[0]
+        }`
+      : selectedStores.length > 1
+        ? ` hos ${selectedStores.length} butikker`
+        : "";
 
   return (
     <main className="search-results-page">
@@ -92,10 +430,10 @@ export default function SearchResultsPage() {
         </p>
 
         <h1>
-          {searchTerm ? (
+          {hasSearch ? (
             <>
               Treff for <em>«{searchTerm}»</em>
-              {selectedStoreName && ` hos ${selectedStoreName}`}
+              {storeHeading}
             </>
           ) : (
             "Søk etter matvarer"
@@ -103,7 +441,7 @@ export default function SearchResultsPage() {
         </h1>
 
         <p className="search-results-count">
-          {searchTerm && !loading && !error
+          {hasSearch && !loading && !error
             ? `${totalProducts} produkter funnet`
             : "Søkeresultater"}
         </p>
@@ -111,15 +449,53 @@ export default function SearchResultsPage() {
 
       <div className="search-results-layout">
         <aside
-          className="search-results-filters"
+          className={`search-results-filters ${
+            mobileFiltersOpen ? "is-open" : ""
+          }`}
           aria-label="Filtrer søkeresultater"
         >
-          <SearchFilters
-            selectedCategory={selectedCategory}
-            onCategoryChange={handleCategoryChange}
-            selectedStore={selectedStore}
-            onStoreChange={handleStoreChange}
-          />
+          <button
+            type="button"
+            className="search-mobile-filter-toggle"
+            aria-expanded={mobileFiltersOpen}
+            aria-controls="search-mobile-filter-panel"
+            onClick={() =>
+              setMobileFiltersOpen((previous) => !previous)
+            }
+          >
+            <span>
+              Filtrer
+              {selectedCategories.length +
+                selectedStores.length > 0
+                ? ` (${selectedCategories.length +
+                    selectedStores.length})`
+                : ""}
+            </span>
+          </button>
+
+          <div
+            id="search-mobile-filter-panel"
+            className="search-mobile-filter-panel"
+          >
+            {filtersError && (
+              <p role="alert">
+                Kunne ikke hente filteralternativer.
+              </p>
+            )}
+
+            {filtersLoading && !filterSource && (
+              <p>Henter filtre...</p>
+            )}
+
+            <SearchFilters
+              categories={categoryCounts}
+              stores={storeCounts}
+              selectedCategories={selectedCategories}
+              onCategoriesChange={updateCategories}
+              selectedStores={selectedStores}
+              onStoresChange={handleStoresChange}
+            />
+          </div>
         </aside>
 
         <section
@@ -128,49 +504,72 @@ export default function SearchResultsPage() {
         >
           <div className="search-results-toolbar">
             <h2>Produkter</h2>
-            <p>Sortering kommer her.</p>
+
+            <SearchSortSelect
+              value={sort}
+              onChange={handleSortChange}
+            />
           </div>
 
-          {(selectedCategory || selectedStore) && (
+          {hasActiveFilters && (
             <div
               className="search-active-filters"
               aria-label="Aktive filtre"
             >
-              {selectedCategory && (
-                <button
-                  type="button"
-                  className="search-filter-chip"
-                  onClick={() => handleCategoryChange(null)}
-                >
-                  Kategori:{" "}
-                  {selectedCategory === "19"
-                    ? "Ost"
-                    : selectedCategory === "13"
-                      ? "Pålegg & frokost"
-                      : "Meieri & egg"}
-                  <span aria-hidden="true"> ×</span>
-                </button>
+              {sortedSelectedCategories.map(
+                (value) => (
+                  <button
+                    key={`category-${value}`}
+                    type="button"
+                    className="search-filter-chip"
+                    onClick={() => {
+                      preservePosition();
+
+                      handleCategoriesChange(
+                        selectedCategories.filter(
+                          (item) => item !== value,
+                        ),
+                      );
+                    }}
+                    aria-label={`Fjern kategorifilter ${getCategoryName(value)}`}
+                  >
+                    Kategori: {getCategoryName(value)}
+                    <span aria-hidden="true">
+                      {" "}×
+                    </span>
+                  </button>
+                ),
               )}
 
-              {selectedStore && (
-                <button
-                  type="button"
-                  className="search-filter-chip"
-                  onClick={() => handleStoreChange(null)}
-                >
-                  Kjede: {selectedStoreName}
-                  <span aria-hidden="true"> ×</span>
-                </button>
+              {sortedSelectedStores.map(
+                (value) => (
+                  <button
+                    key={`store-${value}`}
+                    type="button"
+                    className="search-filter-chip"
+                    onClick={() => {
+                      preservePosition();
+
+                      handleStoresChange(
+                        selectedStores.filter(
+                          (item) => item !== value,
+                        ),
+                      );
+                    }}
+                    aria-label={`Fjern butikkfilter ${storeNames[value] ?? value}`}
+                  >
+                    Kjede: {storeNames[value] ?? value}
+                    <span aria-hidden="true">
+                      {" "}×
+                    </span>
+                  </button>
+                ),
               )}
 
               <button
                 type="button"
                 className="search-filter-reset"
-                onClick={() => {
-                  setSelectedCategory(null);
-                  setSelectedStore(null);
-                  setCurrentPage(1);
-                }}
+                onClick={resetFilters}
               >
                 Nullstill
               </button>
@@ -178,23 +577,36 @@ export default function SearchResultsPage() {
           )}
 
           <div
+            ref={resultsRef}
             className="search-results-list"
             aria-live="polite"
             aria-busy={loading}
+            style={{
+              minHeight:
+                loading && loadingMinHeight !== null
+                  ? `${loadingMinHeight}px`
+                  : undefined,
+            }}
           >
-            {!searchTerm ? (
-              <p>Skriv inn et søkeord for å finne matvarer.</p>
+            {!hasSearch ? (
+              <p>
+                Skriv inn et søkeord for å finne matvarer.
+              </p>
             ) : loading ? (
               <p>Laster produkter...</p>
             ) : error ? (
               <p role="alert">
-                Kunne ikke hente produkter. Prøv igjen senere.
+                Kunne ikke hente produkter.
+                Prøv igjen senere.
               </p>
             ) : products.length > 0 ? (
               <>
                 <SearchProductList
                   products={products}
-                  selectedStore={selectedStore}
+                  selectedStores={selectedStores}
+                  startIndex={
+                    (currentPage - 1) * PAGE_SIZE
+                  }
                 />
 
                 <p className="search-pagination-count">
@@ -209,10 +621,19 @@ export default function SearchResultsPage() {
                 />
               </>
             ) : (
-              <p>
-                Ingen produkter funnet for «{searchTerm}».
-                Prøv et annet søkeord.
-              </p>
+              
+              <SearchEmptyState
+                searchTerm={searchTerm}
+                hasActiveFilters={hasActiveFilters}
+                selectedStores={selectedStores}
+                alternativeStores={storeCounts}
+                onSelectStore={(storeCode) => {
+                  preservePosition();
+                  setSelectedStores([storeCode]);
+                  setCurrentPage(1);
+                }}
+                onResetFilters={resetFilters}
+              />
             )}
           </div>
         </section>
@@ -222,7 +643,9 @@ export default function SearchResultsPage() {
           aria-label="Handleliste"
         >
           <h2>Min handleliste</h2>
-          <p>Handlelistekomponenten integreres senere.</p>
+          <p>
+            Handlelistekomponenten integreres senere.
+          </p>
         </aside>
       </div>
     </main>
diff --git a/frontend/src/pages/SearchResults/SearchSortSelect.tsx b/frontend/src/pages/SearchResults/SearchSortSelect.tsx
new file mode 100644
index 0000000..5422d61
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchSortSelect.tsx
@@ -0,0 +1,212 @@
+
+import { useEffect, useId, useRef, useState } from "react";
+import type { KeyboardEvent } from "react";
+import type { SearchSort } from "./searchTypes";
+
+type SearchSortSelectProps = {
+  value: SearchSort;
+  onChange: (value: SearchSort) => void;
+};
+
+const sortOptions: { value: SearchSort; label: string }[] = [
+  { value: "relevance", label: "Relevans" },
+  { value: "price_asc", label: "Pris: lavest først" },
+  { value: "price_desc", label: "Pris: høyest først" },
+];
+
+export default function SearchSortSelect({
+  value,
+  onChange,
+}: SearchSortSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const menuId = useId();
+
+  const selectedOption =
+    sortOptions.find((option) => option.value === value) ??
+    sortOptions[0];
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleOutsideClick = (event: PointerEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("pointerdown", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener(
+        "pointerdown",
+        handleOutsideClick,
+      );
+    };
+  }, [isOpen]);
+
+  const openMenu = (index: number) => {
+    setActiveIndex(index);
+    setIsOpen(true);
+
+    requestAnimationFrame(() => {
+      optionRefs.current[index]?.focus();
+    });
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+
+  const selectOption = (selectedValue: SearchSort) => {
+    onChange(selectedValue);
+    closeMenu();
+  };
+
+  const handleTriggerKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>,
+  ) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openMenu(0);
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      openMenu(sortOptions.length - 1);
+    }
+  };
+
+  const handleOptionKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>,
+    index: number,
+  ) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeMenu();
+    }
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const nextIndex = (index + 1) % sortOptions.length;
+      setActiveIndex(nextIndex);
+      optionRefs.current[nextIndex]?.focus();
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const previousIndex =
+        (index - 1 + sortOptions.length) % sortOptions.length;
+      setActiveIndex(previousIndex);
+      optionRefs.current[previousIndex]?.focus();
+    }
+
+    if (event.key === "Home") {
+      event.preventDefault();
+      setActiveIndex(0);
+      optionRefs.current[0]?.focus();
+    }
+
+    if (event.key === "End") {
+      event.preventDefault();
+      const lastIndex = sortOptions.length - 1;
+      setActiveIndex(lastIndex);
+      optionRefs.current[lastIndex]?.focus();
+    }
+
+    if (event.key === "Tab") {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div className="search-sort">
+      <span className="search-sort-label">
+        SORTER:
+      </span>
+
+      <div
+        className="search-sort-dropdown"
+        ref={containerRef}
+      >
+        <button
+          ref={triggerRef}
+          type="button"
+          className="search-sort-trigger"
+          aria-haspopup="true"
+          aria-expanded={isOpen}
+          aria-controls={isOpen ? menuId : undefined}
+          onClick={() => {
+            if (isOpen) {
+              closeMenu();
+            } else {
+              const selectedIndex = sortOptions.findIndex(
+                (option) => option.value === value,
+              );
+              openMenu(Math.max(selectedIndex, 0));
+            }
+          }}
+          onKeyDown={handleTriggerKeyDown}
+        >
+          <span>{selectedOption.label}</span>
+
+          <span
+            className={`search-sort-chevron ${
+              isOpen ? "search-sort-chevron--open" : ""
+            }`}
+            aria-hidden="true"
+          />
+        </button>
+
+        {isOpen && (
+          <div
+            id={menuId}
+            className="search-sort-menu"
+            role="group"
+            aria-label="Velg sortering"
+          >
+            {sortOptions.map((option, index) => (
+              <button
+                key={option.value}
+                ref={(element) => {
+                  optionRefs.current[index] = element;
+                }}
+                type="button"
+                className={`search-sort-option ${
+                  option.value === value
+                    ? "search-sort-option--selected"
+                    : ""
+                }`}
+                tabIndex={activeIndex === index ? 0 : -1}
+                aria-pressed={option.value === value}
+                onClick={() => selectOption(option.value)}
+                onKeyDown={(event) =>
+                  handleOptionKeyDown(event, index)
+                }
+              >
+                <span>{option.label}</span>
+
+                {option.value === value && (
+                  <span
+                    className="search-sort-check"
+                    aria-hidden="true"
+                  >
+                    ✓
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/SearchResults/searchPreferences.ts b/frontend/src/pages/SearchResults/searchPreferences.ts
new file mode 100644
index 0000000..11a0cae
--- /dev/null
+++ b/frontend/src/pages/SearchResults/searchPreferences.ts
@@ -0,0 +1,90 @@
+
+import type { SearchSort } from "./searchTypes";
+
+export type SearchPreferences = {
+  searchTerm: string;
+  selectedCategories: string[];
+  selectedStores: string[];
+  sort: SearchSort;
+  currentPage: number;
+};
+
+const STORAGE_KEY = "handlelappen-search-preferences";
+
+const defaultPreferences: SearchPreferences = {
+  searchTerm: "ost",
+  selectedCategories: [],
+  selectedStores: [],
+  sort: "relevance",
+  currentPage: 1,
+};
+
+export function loadSearchPreferences(): SearchPreferences {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+
+    if (!stored) {
+      return defaultPreferences;
+    }
+
+    const parsed: unknown = JSON.parse(stored);
+
+    if (!parsed || typeof parsed !== "object") {
+      return defaultPreferences;
+    }
+
+    const data = parsed as Partial<SearchPreferences>;
+
+    return {
+      searchTerm:
+        typeof data.searchTerm === "string"
+          ? data.searchTerm
+          : defaultPreferences.searchTerm,
+
+      selectedCategories:
+        Array.isArray(data.selectedCategories)
+          ? data.selectedCategories.filter(
+              (value): value is string =>
+                typeof value === "string",
+            )
+          : [],
+
+      selectedStores:
+        Array.isArray(data.selectedStores)
+          ? data.selectedStores.filter(
+              (value): value is string =>
+                typeof value === "string",
+            )
+          : [],
+
+      sort:
+        data.sort === "price_asc" ||
+        data.sort === "price_desc" ||
+        data.sort === "relevance"
+          ? data.sort
+          : "relevance",
+
+      currentPage:
+        typeof data.currentPage === "number" &&
+        Number.isInteger(data.currentPage) &&
+        data.currentPage > 0
+          ? data.currentPage
+          : 1,
+    };
+  } catch {
+    return defaultPreferences;
+  }
+}
+
+export function saveSearchPreferences(
+  preferences: SearchPreferences,
+): void {
+  try {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify(preferences),
+    );
+  } catch {
+    // Lagring kan være deaktivert i nettleseren.
+  }
+}
diff --git a/frontend/src/pages/SearchResults/searchQueries.ts b/frontend/src/pages/SearchResults/searchQueries.ts
index 4cf9838..973f0db 100644
--- a/frontend/src/pages/SearchResults/searchQueries.ts
+++ b/frontend/src/pages/SearchResults/searchQueries.ts
@@ -1,9 +1,12 @@
+
 import { gql } from "@apollo/client";
 import type { TypedDocumentNode } from "@apollo/client";
 
 import type {
   SearchProductsData,
   SearchProductsVariables,
+  SearchFilterCountsData,
+  SearchFilterCountsVariables,
 } from "./searchTypes";
 
 export const SEARCH_PRODUCTS_QUERY: TypedDocumentNode<
@@ -12,15 +15,17 @@ export const SEARCH_PRODUCTS_QUERY: TypedDocumentNode<
 > = gql`
   query SearchProducts(
     $search: String
-    $category: ID
-    $storeCode: String
+    $categories: [ID!]
+    $storeCodes: [String!]
+    $sort: String
     $limit: Int
     $offset: Int
   ) {
     products(
       search: $search
-      category: $category
-      storeCode: $storeCode
+      categories: $categories
+      storeCodes: $storeCodes
+      sort: $sort
       limit: $limit
       offset: $offset
     ) {
@@ -38,8 +43,37 @@ export const SEARCH_PRODUCTS_QUERY: TypedDocumentNode<
 
     productsCount(
       search: $search
-      category: $category
-      storeCode: $storeCode
+      categories: $categories
+      storeCodes: $storeCodes
     )
   }
 `;
+
+export const SEARCH_FILTER_COUNTS_QUERY: TypedDocumentNode<
+  SearchFilterCountsData,
+  SearchFilterCountsVariables
+> = gql`
+  query SearchFilterCounts(
+    $search: String
+    $storeCodes: [String!]
+    $categories: [ID!]
+  ) {
+    categoryFilterCounts(
+      search: $search
+      storeCodes: $storeCodes
+    ) {
+      value
+      label
+      count
+    }
+
+    storeFilterCounts(
+      search: $search
+      categories: $categories
+    ) {
+      value
+      label
+      count
+    }
+  }
+`;
diff --git a/frontend/src/pages/SearchResults/searchTypes.ts b/frontend/src/pages/SearchResults/searchTypes.ts
index 628f382..0e44811 100644
--- a/frontend/src/pages/SearchResults/searchTypes.ts
+++ b/frontend/src/pages/SearchResults/searchTypes.ts
@@ -14,6 +14,11 @@ export type SearchProduct = {
   prices: ProductPrice[];
 };
 
+export type SearchSort =
+  | "relevance"
+  | "price_asc"
+  | "price_desc";
+
 export type SearchProductsData = {
   products: SearchProduct[];
   productsCount: number;
@@ -21,8 +26,26 @@ export type SearchProductsData = {
 
 export type SearchProductsVariables = {
   search?: string;
-  category?: string;
-  storeCode?: string;
+  categories?: string[];
+  storeCodes?: string[];
+  sort?: SearchSort;
   limit?: number;
   offset?: number;
 };
+
+export type FilterCount = {
+  value: string;
+  label: string;
+  count: number;
+};
+
+export type SearchFilterCountsData = {
+  categoryFilterCounts: FilterCount[];
+  storeFilterCounts: FilterCount[];
+};
+
+export type SearchFilterCountsVariables = {
+  search?: string;
+  storeCodes?: string[];
+  categories?: string[];
+};

From d7a013cafad63e3ee95c4cdcef3e9952734e9fd3 Mon Sep 17 00:00:00 2001
From: Annisa Alexis Muljono <annisaam@stud.ntnu.no>
Date: Thu, 15 Oct 2026 22:18:45 +0200
Subject: [PATCH 16/17] chore(#37): fjern preview-filer

---
 frontend/search-preview.html    | 12 ------------
 frontend/src/search-preview.tsx | 15 ---------------
 2 files changed, 27 deletions(-)
 delete mode 100644 frontend/search-preview.html
 delete mode 100644 frontend/src/search-preview.tsx

diff --git a/frontend/search-preview.html b/frontend/search-preview.html
deleted file mode 100644
index 6f42d7e..0000000
--- a/frontend/search-preview.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="no">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Handlelappen – Søkeresultater</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/search-preview.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/frontend/src/search-preview.tsx b/frontend/src/search-preview.tsx
deleted file mode 100644
index 9a8576d..0000000
--- a/frontend/src/search-preview.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { ApolloProvider } from "@apollo/client/react";
-
-import { apolloClient } from "./apolloClient";
-import SearchResultsPage from "./pages/SearchResults/SearchResultsPage";
-import "./theme.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <ApolloProvider client={apolloClient}>
-      <SearchResultsPage />
-    </ApolloProvider>
-  </React.StrictMode>,
-);

From 91d87d326ab0261fc62f5b549c7562615d7a2379 Mon Sep 17 00:00:00 2001
From: Linde Vrenne <lindeav@stud.ntnu.no>
Date: Fri, 16 Oct 2026 13:14:38 +0200
Subject: [PATCH 17/17] Oppdatert README til innlevering 2

---
 README.md | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 1b207e9..9d6f133 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
 
 Repository for team IT2810-H26-T27 i IT2810-H26.
 
-> **Status: Andre underveisinnlevering.** Backend med GraphQL (Apollo Server) og PostgreSQL er satt opp, og varer fra Kassalapp importeres til databasen. Frontend henter og viser varer via Apollo Client. Handlelister kan opprettes og fylles med varer gjennom API-et. Se [Kjøre prosjektet lokalt](#kjøre-prosjektet-lokalt) for oppsett.
+> **Status: Andre underveisinnlevering.** Backend med GraphQL (Apollo Server) og PostgreSQL er satt opp, og varer fra Kassalapp importeres til databasen. Frontend henter og viser varer via Apollo Client. Handlelister kan opprettes og fylles med varer gjennom API-et. Se [Kjøre prosjektet lokalt](#kjøre-prosjektet-lokalt) for oppsett. Vi har allerede satt det opp på VM så hvis dere ikke vil kjøre det lokalt kan dere klikke på linken under.
+
+Link til nettsiden: http://it2810-27.idi.ntnu.no/project2/
 
 ## Idé
 
@@ -35,46 +37,33 @@ Handlelappen er en digital handleliste. Du søker opp dagligvarer eller blar i k
 
 ## Design (første utkast)
 
-Designet er laget i Figma. Disse skjermbildene er et første utkast og kan endre seg.
+Designet er laget i Figma. Disse skjermbildene er et første utkast og kan endre seg. Vi legger til link til figma. 
+Link til figma https://www.figma.com/design/cjDVbDbednm8qHobizzFji/Handlelappen-%E2%80%93-notatbok--Copy-?node-id=2-2&m=dev
 
-### Hjem og søk
+Under er beskrivelse av flyten:
 
+### Hjem og søk
 Forsiden har søkefelt, kategorier og den aktive lappen. På søkesiden kan man filtrere på kategori, pris og merking (økologisk, laktosefri, norskprodusert) og sortere resultatene. Varer legges rett på lappen fra resultatlista, og lappen vises ved siden av.
 
-![Hjem og søk](docs/design/hjem-og-sok.png)
-
 #### Søk og filtrering
-
 Hva du får opp når du filtrerer på en bestemt butikk hvis den har produktet og hvis den ikke har produktet.
 
-![Søk og filtrering](docs/design/sok-filtrert-pa-butikk.png)
 
 ### Produktside og meny
-
 Produktsiden viser pris, kilopris, ingredienser, allergener og næringsinnhold. Her kan man endre antall og legge til et notat, for eksempel «skivet, hvis de har». Menyen gir tilgang til alle delene av appen.
 
-![Produktside og meny](docs/design/produkt-og-meny.png)
-
 ### Mine handlelister og aktiv liste
-
 Man kan ha flere aktive lister, og den man bruker nå er merket. På den aktive lista kan man endre antall, fjerne varer, sortere etter butikkavdeling og se estimert sum.
 
-![Handlelister](docs/design/handlelister.png)
-
 ### Tidligere handlelister
-
 Ferdige lister er gruppert etter måned. Man kan søke i dem og laste inn eldre lister. Fra en tidligere liste kan man bruke den på nytt eller legge varene på den aktive lappen.
 
-![Tidligere lister](docs/design/tidligere-lister.png)
 
 ### Handletur (mobil)
-
 Handleturen er laget for mobil, siden den brukes i butikken. Varene er gruppert etter avdeling, og en fremdriftslinje viser hvor mange som er krysset av.
 
-![Handletur på mobil](docs/design/handletur-mobil.png)
 
 ## Data
-
 **Kilde:** [Kassalapp API](https://kassal.app/api), et API med norske dagligvarer og priser fra de fleste kjedene, blant annet Rema 1000, Kiwi, Meny, Coop, Joker, Spar og Bunnpris.
 
 Feltene vi har tenkt å bruke: