diff --git a/backend/src/index.ts b/backend/src/index.ts
index def069b..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,17 +36,33 @@ const typeDefs = `#graphql
   type Query {
     products(
       search: String
-      category: ID
+      categories: [ID!]
+      storeCodes: [String!]
+      sort: String = "relevance"
       limit: Int = 20
       offset: Int = 0
     ): [Product!]!
 
+    productsCount(
+      search: String
+      categories: [ID!]
+      storeCodes: [String!]
+    ): Int!
+
     product(ean: String!): Product
 
     categories: [Category!]!
     shoppingList(id: ID!): ShoppingList
 
+    categoryFilterCounts(
+      search: String
+      storeCodes: [String!]
+    ): [FilterCount!]!
 
+    storeFilterCounts(
+      search: String
+      categories: [ID!]
+    ): [FilterCount!]!
   }
   
   type ShoppingListItem {
@@ -72,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
@@ -103,44 +243,190 @@ const resolvers = {
       return result.rows[0] ?? null;
     },
 
-
+    
     products: async (
       _parent: unknown,
       args: {
         search?: string;
-        category?: string;
+        categories?: string[];
+        storeCodes?: string[];
+        sort?: string;
         limit?: number;
         offset?: number;
       },
     ) => {
       const search = args.search ?? null;
-      const category = args.category ?? null;
-      const limit = args.limit ?? 20;
-      const offset = args.offset ?? 0;
+      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(
         `
+        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
+        ),
+        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 (
+                  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 || '%'
+            )
+            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,
-          image_url AS "imageUrl",
-          category_id AS "categoryId"
-        FROM products
-        WHERE
-          ($1::text IS NULL OR name ILIKE '%' || $1 || '%')
-          AND
-          ($2::integer IS NULL OR category_id = $2)
-        ORDER BY name
-        LIMIT $3
-        OFFSET $4
+          "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, limit, offset],
+        [
+          search,
+          categories,
+          storeCodes,
+          limit,
+          offset,
+          sort,
+        ],
       );
 
       return result.rows;
     },
 
+    productsCount: async (
+      _parent: unknown,
+      args: {
+        search?: string;
+        categories?: string[];
+        storeCodes?: string[];
+      },
+    ) => {
+      const search = args.search ?? 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 = ANY($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 (
+            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[])
+            )
+          )
+        `,
+        [search, categories, storeCodes],
+      );
+
+      return result.rows[0].count;
+    },
 
     shoppingList: async (
       _parent: unknown,
diff --git a/frontend/src/pages/SearchResults/SearchEmptyState.tsx b/frontend/src/pages/SearchResults/SearchEmptyState.tsx
new file mode 100644
index 0000000..bf5510d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f7eb772
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchFilters.tsx
@@ -0,0 +1,134 @@
+
+import type { FilterCount } from "./searchTypes";
+
+type SearchFiltersProps = {
+  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({
+  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">
+          KATEGORI
+        </legend>
+
+        {sortedCategories.map((category) => (
+          <label
+            className="search-filter-option"
+            key={category.value}
+          >
+            <span className="search-filter-option-name">
+              <input
+                type="checkbox"
+                checked={selectedCategories.includes(
+                  category.value,
+                )}
+                onChange={(event) =>
+                  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">
+          BUTIKKJEDE
+        </legend>
+
+        {sortedStores.map((store) => (
+          <label
+            className="search-filter-option"
+            key={store.value}
+          >
+            <span className="search-filter-option-name">
+              <input
+                type="checkbox"
+                checked={selectedStores.includes(store.value)}
+                onChange={(event) =>
+                  toggle(
+                    selectedStores,
+                    store.value,
+                    event.target.checked,
+                    onStoresChange,
+                  )
+                }
+              />
+              <span>
+                {storeNames[store.value] ?? store.label}
+              </span>
+            </span>
+            <span className="search-filter-count">
+              {store.count}
+            </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/SearchProductList.tsx b/frontend/src/pages/SearchResults/SearchProductList.tsx
new file mode 100644
index 0000000..5814869
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchProductList.tsx
@@ -0,0 +1,131 @@
+
+import type {
+  SearchProduct,
+  ProductPrice,
+} from "./searchTypes";
+
+type SearchProductListProps = {
+  products: SearchProduct[];
+  selectedStores?: string[];
+  startIndex?: number;
+  onAddProduct?: (product: SearchProduct) => void;
+};
+
+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[],
+  selectedStores: string[],
+): ProductPrice | null {
+  const availablePrices =
+    selectedStores.length === 0
+      ? prices
+      : prices.filter((price) =>
+          selectedStores.includes(price.storeCode),
+        );
+
+  if (availablePrices.length === 0) {
+    return null;
+  }
+
+  return availablePrices.reduce((lowest, current) =>
+    current.price < lowest.price ? current : lowest,
+  );
+}
+
+export default function SearchProductList({
+  products,
+  selectedStores = [],
+  startIndex = 0,
+  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,
+            selectedStores,
+          );
+
+          return (
+            <li
+              className="search-product-row"
+              key={product.ean}
+            >
+              <span className="search-product-number">
+                {String(
+                  startIndex + 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
+                  ? formatter.format(displayPrice.unitPrice)
+                  : "—"}
+              </span>
+
+              <span className="search-product-price">
+                {displayPrice
+                  ? formatter.format(displayPrice.price)
+                  : "Pris mangler"}
+
+                {displayPrice && (
+                  <span className="search-product-store">
+                    {storeNames[displayPrice.storeCode] ??
+                      displayPrice.storeCode}
+                  </span>
+                )}
+              </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..e2399ab
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.css
@@ -0,0 +1,1315 @@
+/* ==========================================================================
+   HANDLELAPPEN – SØKERESULTATER
+   Issue #37
+
+   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;
+  margin: 0 auto;
+  padding: 48px 40px 80px;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  text-align: left;
+}
+
+/* Felles utseende for overskrifter (h1–h3) på siden */
+.search-results-page h1,
+.search-results-page h2,
+.search-results-page h3 {
+  margin-top: 0;
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+}
+
+/* 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);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  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);
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  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);
+  font-style: italic;
+  font-weight: 400;
+}
+
+/* Tekst som viser antall treff under tittelen */
+.search-results-count {
+  margin: 0;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+
+/* ==========================================================================
+   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;
+  gap: 32px;
+  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;
+}
+
+/* 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;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-hairline);
+}
+
+/* Tittelen i verktøylinjen */
+.search-results-toolbar h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+
+/* ==========================================================================
+   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;
+}
+
+/* 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);
+}
+
+/* ---- 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-sort-select:hover {
+  border-color: var(--border-brand);
+}
+
+/* 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;
+}
+
+
+/* ==========================================================================
+   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;
+  gap: 30px;
+  text-align: left;
+}
+
+/* Én gruppe (en <fieldset>). Nullstiller nettleserens standardstil */
+.search-filter-group {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* Gruppeoverskrift (monospace) med strek under */
+.search-filter-heading {
+  width: 100%;
+  padding-bottom: 10px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--border-hairline);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  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;
+  align-items: center;
+  gap: 12px;
+  padding: 7px 0;
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+/* Boks og navn ved siden av hverandre */
+.search-filter-option-name {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+/* 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;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  background: var(--bg-surface);
+  border: 1.25px solid var(--border-brand);
+  border-radius: 3px;
+  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;
+  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);
+}
+
+/* Synlig fokus for tastaturbrukere */
+.search-filter-option input:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 2px;
+}
+
+/* Knappen som åpner filtrene på mobil. Skjult på desktop,
+   vises igjen i seksjon 14 (mobil). */
+.search-mobile-filter-toggle {
+  display: none;
+}
+
+
+/* ==========================================================================
+   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;
+  grid-template-columns:
+    32px minmax(0, 1fr) 80px 90px 145px;
+  column-gap: 12px;
+  align-items: center;
+}
+
+/* Overskriftsraden over listen */
+.search-product-table-header {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-strong);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  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;
+  gap: 4px;
+  min-width: 0;
+}
+
+/* Produktnavn */
+.search-product-info strong {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+/* Merkenavn under produktnavnet */
+.search-product-brand {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  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;
+  font-weight: 500;
+  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);
+  color: var(--text-primary);
+  border: 1px solid var(--border-hairline);
+  border-radius: 7px;
+  font: 500 12px var(--font-ui);
+  cursor: pointer;
+}
+
+.search-product-add-button:hover:not(:disabled) {
+  background: var(--bg-tint);
+  border-color: var(--border-brand);
+}
+
+/* Deaktivert tilstand (for eksempel mens varen legges til) */
+.search-product-add-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.search-product-add-button:focus-visible {
+  outline: 2px solid var(--text-accent);
+  outline-offset: 3px;
+}
+
+
+/* ==========================================================================
+   10. PAGINERING
+   «Viser X av N»-tekst og sideknapper under produktlisten.
+   ========================================================================== */
+
+/* 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;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  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;
+  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);
+}
+
+/* Knappen for siden brukeren er på nå */
+.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;
+}
+
+/* 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);
+}
+
+
+/* ==========================================================================
+   11. TOMT SØKERESULTAT
+   Vises når søk eller filtre ikke gir treff.
+   ========================================================================== */
+
+/* ---- 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;
+  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;
+}
+
+/* Én butikk som knapp: navn til venstre, antall til høyre */
+.search-empty-state-store {
+  display: flex;
+  align-items: center;
+  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-empty-state-store:hover {
+  border-color: var(--border-brand);
+  background: var(--bg-tint);
+}
+
+/* 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-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;
+}
+
+
+/* ==========================================================================
+   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-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
new file mode 100644
index 0000000..ada644a
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchResultsPage.tsx
@@ -0,0 +1,653 @@
+
+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 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() {
+  // Hent lagrede innstillinger kun ved første rendering.
+  const [initialPreferences] = useState(
+    loadSearchPreferences,
+  );
+
+  const [searchTerm, setSearchTerm] = useState(
+    initialPreferences.searchTerm,
+  );
+
+  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 handleStoresChange = (
+    values: string[],
+  ) => {
+    preservePosition();
+    setSelectedStores(values);
+    setCurrentPage(1);
+  };
+
+  const handleSortChange = (value: SearchSort) => {
+    preservePosition();
+    setSort(value);
+    setCurrentPage(1);
+  };
+
+  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 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 firstProduct =
+    (currentPage - 1) * PAGE_SIZE + 1;
+
+  const lastProduct = Math.min(
+    currentPage * PAGE_SIZE,
+    totalProducts,
+  );
+
+  const hasActiveFilters =
+    selectedCategories.length > 0 ||
+    selectedStores.length > 0;
+
+  const sortedSelectedCategories = [
+    ...selectedCategories,
+  ].sort((a, b) =>
+    collator.compare(
+      getCategoryName(a),
+      getCategoryName(b),
+    ),
+  );
+
+  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">
+      <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>
+
+        <h1>
+          {hasSearch ? (
+            <>
+              Treff for <em>«{searchTerm}»</em>
+              {storeHeading}
+            </>
+          ) : (
+            "Søk etter matvarer"
+          )}
+        </h1>
+
+        <p className="search-results-count">
+          {hasSearch && !loading && !error
+            ? `${totalProducts} produkter funnet`
+            : "Søkeresultater"}
+        </p>
+      </header>
+
+      <div className="search-results-layout">
+        <aside
+          className={`search-results-filters ${
+            mobileFiltersOpen ? "is-open" : ""
+          }`}
+          aria-label="Filtrer søkeresultater"
+        >
+          <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
+          className="search-results-content"
+          aria-label="Produkter"
+        >
+          <div className="search-results-toolbar">
+            <h2>Produkter</h2>
+
+            <SearchSortSelect
+              value={sort}
+              onChange={handleSortChange}
+            />
+          </div>
+
+          {hasActiveFilters && (
+            <div
+              className="search-active-filters"
+              aria-label="Aktive filtre"
+            >
+              {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>
+                ),
+              )}
+
+              {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={resetFilters}
+              >
+                Nullstill
+              </button>
+            </div>
+          )}
+
+          <div
+            ref={resultsRef}
+            className="search-results-list"
+            aria-live="polite"
+            aria-busy={loading}
+            style={{
+              minHeight:
+                loading && loadingMinHeight !== null
+                  ? `${loadingMinHeight}px`
+                  : undefined,
+            }}
+          >
+            {!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.
+              </p>
+            ) : products.length > 0 ? (
+              <>
+                <SearchProductList
+                  products={products}
+                  selectedStores={selectedStores}
+                  startIndex={
+                    (currentPage - 1) * PAGE_SIZE
+                  }
+                />
+
+                <p className="search-pagination-count">
+                  Viser {firstProduct}–{lastProduct} av{" "}
+                  {totalProducts} produkter
+                </p>
+
+                <SearchPagination
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  onPageChange={handlePageChange}
+                />
+              </>
+            ) : (
+              
+              <SearchEmptyState
+                searchTerm={searchTerm}
+                hasActiveFilters={hasActiveFilters}
+                selectedStores={selectedStores}
+                alternativeStores={storeCounts}
+                onSelectStore={(storeCode) => {
+                  preservePosition();
+                  setSelectedStores([storeCode]);
+                  setCurrentPage(1);
+                }}
+                onResetFilters={resetFilters}
+              />
+            )}
+          </div>
+        </section>
+
+        <aside
+          className="search-results-shopping-list"
+          aria-label="Handleliste"
+        >
+          <h2>Min handleliste</h2>
+          <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
new file mode 100644
index 0000000..973f0db
--- /dev/null
+++ b/frontend/src/pages/SearchResults/searchQueries.ts
@@ -0,0 +1,79 @@
+
+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<
+  SearchProductsData,
+  SearchProductsVariables
+> = gql`
+  query SearchProducts(
+    $search: String
+    $categories: [ID!]
+    $storeCodes: [String!]
+    $sort: String
+    $limit: Int
+    $offset: Int
+  ) {
+    products(
+      search: $search
+      categories: $categories
+      storeCodes: $storeCodes
+      sort: $sort
+      limit: $limit
+      offset: $offset
+    ) {
+      ean
+      name
+      brand
+      imageUrl
+      categoryId
+      prices {
+        storeCode
+        price
+        unitPrice
+      }
+    }
+
+    productsCount(
+      search: $search
+      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
new file mode 100644
index 0000000..0e44811
--- /dev/null
+++ b/frontend/src/pages/SearchResults/searchTypes.ts
@@ -0,0 +1,51 @@
+
+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 SearchSort =
+  | "relevance"
+  | "price_asc"
+  | "price_desc";
+
+export type SearchProductsData = {
+  products: SearchProduct[];
+  productsCount: number;
+};
+
+export type SearchProductsVariables = {
+  search?: 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[];
+};