diff --git a/app/components/cart/AddProductToast.tsx b/app/components/cart/AddProductToast.tsx
index 65a88cd..9dd678c 100644
--- a/app/components/cart/AddProductToast.tsx
+++ b/app/components/cart/AddProductToast.tsx
@@ -15,7 +15,7 @@ interface ToastProduct {
   isOnSale?: boolean;
   quantity: number;
   url: string;
-  options: Array<{ name: string; value: string; hideValue?: boolean }>;
+  options: { name: string; value: string; hideValue?: boolean }[];
 }
 
 interface ProductAddedEntry {
@@ -25,7 +25,7 @@ interface ProductAddedEntry {
 
 interface AddItemResponse {
   data?: {
-    cart?: { items?: Array<{ id: string | number; product_id?: string | number }> };
+    cart?: { items?: { id: string | number; product_id?: string | number }[] };
     events?: { 'twilight::api'?: { events?: { 'Product Added'?: ProductAddedEntry[] } } };
   };
 }
@@ -194,10 +194,10 @@ export function AddProductToast() {
 
   // `Product Added` lists every cart line; `cart::item.added` names the product that was added.
   useEffect(() => {
-    type EventBus = {
+    interface EventBus {
       on?: (name: string, cb: (...args: unknown[]) => void) => void;
       off?: (name: string, cb: (...args: unknown[]) => void) => void;
-    };
+    }
     // The emitter the listeners were added to. Cleanup removes them from this
     // one, not from whatever `window.salla.event` is by then — after an SDK
     // re-init a fresh lookup would `off` a different emitter and leave these bound.
diff --git a/app/components/cart/CartPage.tsx b/app/components/cart/CartPage.tsx
index 788648b..0a07285 100644
--- a/app/components/cart/CartPage.tsx
+++ b/app/components/cart/CartPage.tsx
@@ -34,7 +34,7 @@ function CartPageContent({ page }: CartPageProps) {
   const cartId = cartIdQuery.data;
 
   const cartQuery = useQuery({
-    ...cart.queries.detail(cartId!),
+    ...cart.queries.detail(cartId ?? 0),
     enabled: !!cartId,
   });
   const cartData = cartQuery.data;
diff --git a/app/components/common/BottomSheet.tsx b/app/components/common/BottomSheet.tsx
index 9255696..a395310 100644
--- a/app/components/common/BottomSheet.tsx
+++ b/app/components/common/BottomSheet.tsx
@@ -49,12 +49,10 @@ export function BottomSheet({
 
   useScrollLock(open);
 
+  if (open && !mounted) setMounted(true);
+
   useEffect(() => {
-    if (open) {
-      setMounted(true);
-      return;
-    }
-    setEntered(false);
+    if (open) return;
     const unmount = setTimeout(() => setMounted(false), TRANSITION_MS);
     return () => clearTimeout(unmount);
   }, [open]);
@@ -62,7 +60,11 @@ export function BottomSheet({
   useEffect(() => {
     if (!mounted || !open) return;
     void sheetRef.current?.offsetWidth;
-    return afterNextPaint(() => setEntered(true));
+    const cancelEnter = afterNextPaint(() => setEntered(true));
+    return () => {
+      cancelEnter();
+      setEntered(false);
+    };
   }, [mounted, open]);
 
   // Move focus into the sheet on open, trap Tab, restore it to the trigger on close.
diff --git a/app/components/home/EnhancedSlider.tsx b/app/components/home/EnhancedSlider.tsx
index 6ba3650..2213082 100644
--- a/app/components/home/EnhancedSlider.tsx
+++ b/app/components/home/EnhancedSlider.tsx
@@ -1,6 +1,7 @@
 import { memo, useCallback, useEffect, useRef, useState, type RefObject } from 'react';
 import { SallaSlider } from '@salla.sa/twilight-components-react/slider';
 import { Link } from '@salla.sa/twilight-theme-engine/common';
+import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';
 import { parseSlideVideo, youtubeEmbedUrl } from '../../lib/slideVideo';
 import { useMotionAllowed } from '../../hooks/useMotionAllowed';
 
@@ -99,6 +100,7 @@ const YOUTUBE_PLAYING = 1;
  * the page says it is listening, and the frame answers with its state.
  */
 function YouTubeBackground({ id }: { id: string }) {
+  const { t } = useTranslation();
   const ref = useRef<HTMLIFrameElement>(null);
   const [state, setState] = useState<'loading' | 'playing' | 'failed'>('loading');
 
@@ -151,13 +153,12 @@ function YouTubeBackground({ id }: { id: string }) {
 
   if (state === 'failed') return null;
   return (
-    // eslint-disable-next-line jsx-a11y/iframe-has-title -- decorative background video; the empty title is intentional
     <iframe
       ref={ref}
       className="enhanced-slider__video enhanced-slider__video--embed"
       data-state={state}
-      src={youtubeEmbedUrl(id, window.location.origin)}
-      title=""
+      src={youtubeEmbedUrl(id, window.origin)}
+      title={t('blocks.slider.background_video', 'Background video')}
       loading="lazy"
       allow="autoplay; encrypted-media"
       referrerPolicy="strict-origin-when-cross-origin"
diff --git a/app/components/home/FeaturedProducts.tsx b/app/components/home/FeaturedProducts.tsx
index 0f28703..6f6ad0c 100644
--- a/app/components/home/FeaturedProducts.tsx
+++ b/app/components/home/FeaturedProducts.tsx
@@ -46,7 +46,7 @@ interface FeaturedProductsSection {
   /** Legacy (pre-custom-component) payload: tab name and pre-hydrated stubs. */
   label?: string;
   title?: string;
-  products?: Array<{ id?: unknown }>;
+  products?: { id?: unknown }[];
   type?: PickerValue | PickerValue[];
   category?: PickerValue | PickerValue[];
   tag?: PickerValue | PickerValue[];
@@ -182,10 +182,15 @@ function TabProductGrid({
 /** Highlighted product: used as-is when hydrated, otherwise fetched by id. */
 function SpecialProduct({ value }: { value: FeaturedProductsData['main_product'] }) {
   const ids = isFullProduct(value) ? [] : toIds(value);
+  const idsKey = ids.join(',');
   const loader = useCallback(
-    () => product.list({ source: 'selected', sourceValue: ids, perPage: 1 }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
-    [ids.join(',')]
+    () =>
+      product.list({
+        source: 'selected',
+        sourceValue: idsKey ? idsKey.split(',').map(Number) : [],
+        perPage: 1,
+      }),
+    [idsKey]
   );
 
   if (isFullProduct(value)) return <ProductCard product={value} layout="special" withShadow />;
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index 2f2d5bd..5549110 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -167,10 +167,7 @@ export function Header({ navOpen: navOpenProp, onNavOpenChange }: HeaderProps =
   //    place when the bar goes `position: fixed`, since `__bar-outer` reserves
   //    the height).
   useEffect(() => {
-    if (!stickyEnabled) {
-      setScrolled(false);
-      return;
-    }
+    if (!stickyEnabled) return;
 
     if (!isDefaultLayout) {
       const onScroll = () => setScrolled(window.scrollY > 4);
@@ -225,7 +222,7 @@ export function Header({ navOpen: navOpenProp, onNavOpenChange }: HeaderProps =
       )}
 
       <div className="site-header__bar-outer">
-        <div className={`site-header__bar${scrolled ? ' is-scrolled' : ''}`}>
+        <div className={`site-header__bar${stickyEnabled && scrolled ? ' is-scrolled' : ''}`}>
           <div className="container site-header__bar-inner">
             <div className="site-header__nav-toggle">
               <button
diff --git a/app/components/layout/HeaderMainMenu.tsx b/app/components/layout/HeaderMainMenu.tsx
index 36ccc9e..c51a444 100644
--- a/app/components/layout/HeaderMainMenu.tsx
+++ b/app/components/layout/HeaderMainMenu.tsx
@@ -161,8 +161,7 @@ function OneLineMenu({ items, moreTitle }: { items: MenuItem[]; moreTitle: strin
       {/* Sizes the "More" item before it exists, styled like a root item. */}
       <ul className="main-menu site-header__more-probe" aria-hidden="true">
         <li ref={probeRef} className="s-menu-root-level s-menu-has-children">
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- hidden, aria-hidden measuring probe; never navigable */}
-          <a tabIndex={-1}>
+          <a href="#main-menu-more" tabIndex={-1}>
             <span>{moreTitle}</span>
           </a>
         </li>
@@ -235,8 +234,7 @@ function MenuEntry({ item, root }: { item: MenuItem; root: boolean }) {
       {...(hasChildren ? { onMouseEnter: onOpen, onFocus: onOpen } : {})}
     >
       {isMore ? (
-        // eslint-disable-next-line jsx-a11y/anchor-is-valid -- "More" disclosure trigger; href="#" is kept as-is to preserve runtime behaviour
-        <a href="#" role="button" aria-haspopup="true" onClick={preventJump}>
+        <a href="#main-menu-more" role="button" aria-haspopup="true" onClick={preventJump}>
           <span>{item.title}</span>
         </a>
       ) : (
diff --git a/app/components/layout/HeaderNav.tsx b/app/components/layout/HeaderNav.tsx
index e63f2f9..e41f469 100644
--- a/app/components/layout/HeaderNav.tsx
+++ b/app/components/layout/HeaderNav.tsx
@@ -46,7 +46,7 @@ interface HeaderNavProps {
 const TRANSITION_MS = 320;
 
 /** Nothing to subscribe to: `document.body` only ever differs between server and client. */
-const subscribeNothing = () => () => {};
+const subscribeNothing = () => () => undefined;
 
 /** A menu item opens a sub-column only when its children are actually present. */
 const hasChildren = (item: MenuItem): boolean =>
@@ -225,7 +225,10 @@ function NavHead({ canGoBack, onBack, onClose }: NavHeadProps) {
   );
 }
 
-type Column = { parent: MenuItem | null; items: MenuItem[] };
+interface Column {
+  parent: MenuItem | null;
+  items: MenuItem[];
+}
 
 interface NavColumnsProps {
   columns: Column[];
@@ -366,13 +369,10 @@ function useDrawerTransition(open: boolean) {
 
   useScrollLock(open);
 
+  if (open && !mounted) setMounted(true);
+
   useEffect(() => {
-    if (open) {
-      setMounted(true);
-      return;
-    }
-    setEntered(false);
-    setItemsIn(false);
+    if (open) return;
     const unmount = setTimeout(() => setMounted(false), TRANSITION_MS);
     return () => clearTimeout(unmount);
   }, [open]);
@@ -385,6 +385,8 @@ function useDrawerTransition(open: boolean) {
     return () => {
       cancelEnter();
       clearTimeout(stagger);
+      setEntered(false);
+      setItemsIn(false);
     };
   }, [mounted, open]);
 
diff --git a/app/components/layout/MobileAccountSheet.tsx b/app/components/layout/MobileAccountSheet.tsx
index 3f31111..0170610 100644
--- a/app/components/layout/MobileAccountSheet.tsx
+++ b/app/components/layout/MobileAccountSheet.tsx
@@ -347,12 +347,12 @@ export function MobileAccountSheet({
   // replays from the top next time the sheet opens.
   const [itemsIn, setItemsIn] = useState(false);
   useEffect(() => {
-    if (!open) {
-      setItemsIn(false);
-      return;
-    }
+    if (!open) return;
     const stagger = setTimeout(() => setItemsIn(true), ROWS_IN_DELAY_MS);
-    return () => clearTimeout(stagger);
+    return () => {
+      clearTimeout(stagger);
+      setItemsIn(false);
+    };
   }, [open]);
 
   // A link to the current page doesn't change the route, which is what closes the sheet otherwise.
diff --git a/app/components/layout/MobileBottomBar.tsx b/app/components/layout/MobileBottomBar.tsx
index 5c11095..144bc94 100644
--- a/app/components/layout/MobileBottomBar.tsx
+++ b/app/components/layout/MobileBottomBar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
 import type { ReactNode } from 'react';
 import { useRouterState } from '@tanstack/react-router';
 import { Link } from '@salla.sa/twilight-theme-engine/common';
@@ -27,8 +27,10 @@ interface MobileBottomBarProps {
   onCloseSecondSheet?: () => void;
 }
 
-type CartSummary = { count?: number | string | null };
-type CartSdk = {
+interface CartSummary {
+  count?: number | string | null;
+}
+interface CartSdk {
   storage?: { get?: <T>(key: string, fallback?: T) => T };
   helpers?: { number?: (value: number) => string };
   // Root on/off: onUpdated registers a wrapper that only offUpdated can remove.
@@ -36,7 +38,7 @@ type CartSdk = {
     on?: (event: string, cb: (summary?: CartSummary) => void) => void;
     off?: (event: string, cb: (summary?: CartSummary) => void) => void;
   };
-};
+}
 
 function getCartSdk(): CartSdk | undefined {
   if (typeof window === 'undefined') return undefined;
@@ -52,18 +54,18 @@ function getCartSdk(): CartSdk | undefined {
    stacked behind a backdrop) and the tapped tab's icon lights while its own
    overlay is open.
 
-   The build's `no-manual-dom` check flags the `document.querySelector` calls
+   The build's `no-manual-dom` check flags the `document.body.querySelector` calls
    below. They stay: the search modal and the user menu are rendered by Salla
    web components elsewhere on the page, so there is no ref or React state
    that reaches them. */
 
 type Tab = 'home' | 'categories' | 'search' | 'cart' | 'account';
 
-const searchModal = (): Element | null => document.querySelector('salla-modal.s-search-modal');
+const searchModal = (): Element | null => document.body.querySelector('salla-modal.s-search-modal');
 
 const userMenu = (): (HTMLElement & { opened?: boolean }) | null =>
-  (document.querySelector('salla-user-menu.header-action') ??
-    document.querySelector('salla-user-menu')) as (HTMLElement & { opened?: boolean }) | null;
+  (document.body.querySelector('salla-user-menu.header-action') ??
+    document.body.querySelector('salla-user-menu')) as (HTMLElement & { opened?: boolean }) | null;
 
 /** Open the Salla search modal — the same event the header's search button fires. */
 function openSearch() {
@@ -122,8 +124,8 @@ function activeTab(
   return null;
 }
 
-const isSearchOpen = () => !!document.querySelector('salla-modal.s-search-modal[visible]');
-const isMenuOpen = () => !!document.querySelector('.s-user-menu-toggler.opened');
+const isSearchOpen = () => !!document.body.querySelector('salla-modal.s-search-modal[visible]');
+const isMenuOpen = () => !!document.body.querySelector('.s-user-menu-toggler.opened');
 
 /**
  * Reflect a DOM condition into React state. Used for the two overlays the bar
@@ -143,43 +145,28 @@ const isMenuOpen = () => !!document.querySelector('.s-user-menu-toggler.opened')
  * viewport.
  */
 function useDomFlag(test: () => boolean, enabled: boolean): boolean {
-  const [on, setOn] = useState(false);
-
-  useEffect(() => {
-    if (!enabled) {
-      setOn(false);
-      return;
-    }
-
-    let current = test();
-    setOn(current);
-
-    // Only push a state update on an actual transition — the observer fires for
-    // every mutation under `<body>`, and a no-op `setOn` each time would trip
-    // React's act() warnings in tests and churn needlessly in the app.
-    const check = () => {
-      const next = test();
-      if (next === current) return;
-      current = next;
-      setOn(next);
-    };
-
-    const obs = new MutationObserver(check);
-    obs.observe(document.body, {
-      subtree: true,
-      childList: true,
-      attributes: true,
-      attributeFilter: ['class', 'visible'],
-    });
-    document.addEventListener('theme::ready', check);
-
-    return () => {
-      obs.disconnect();
-      document.removeEventListener('theme::ready', check);
-    };
-  }, [test, enabled]);
-
-  return on;
+  const subscribe = useCallback(
+    (notify: () => void) => {
+      if (!enabled) return () => undefined;
+      // The store only re-renders when `test()` actually changes, so notifying on every
+      // mutation under `<body>` is cheap.
+      const obs = new MutationObserver(notify);
+      obs.observe(document.body, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['class', 'visible'],
+      });
+      document.addEventListener('theme::ready', notify);
+      return () => {
+        obs.disconnect();
+        document.removeEventListener('theme::ready', notify);
+      };
+    },
+    [enabled]
+  );
+  const getSnapshot = useCallback(() => enabled && test(), [test, enabled]);
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
 }
 
 const useSearchOpen = (enabled: boolean) => useDomFlag(isSearchOpen, enabled);
diff --git a/app/components/layout/MobilePageTitleBar.tsx b/app/components/layout/MobilePageTitleBar.tsx
index 1137a77..c9c4e8a 100644
--- a/app/components/layout/MobilePageTitleBar.tsx
+++ b/app/components/layout/MobilePageTitleBar.tsx
@@ -1,11 +1,17 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 import { useRouterState } from '@tanstack/react-router';
+import { useNavigate } from '@salla.sa/twilight-theme-engine/providers';
 import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';
 import { ArrowRightIcon } from '../icons';
 import { HOME_ROUTE_ID, PRODUCT_ROUTE_ID } from '../../lib/routeIds';
 
-type MaybePage = { page?: { title?: string } };
-type Match = { routeId: string; loaderData?: unknown };
+interface MaybePage {
+  page?: { title?: string };
+}
+interface Match {
+  routeId: string;
+  loaderData?: unknown;
+}
 
 /** Deepest matched route that carries a `page.title` in its loader data. */
 function routePageTitle(state: { matches: Match[] }): string | undefined {
@@ -35,6 +41,12 @@ function cleanDocumentTitle(): string {
   return document.title.split(/\s+[|–—-]\s+/)[0].trim();
 }
 
+function subscribeDocumentTitle(notify: () => void): () => void {
+  const observer = new MutationObserver(notify);
+  observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+  return () => observer.disconnect();
+}
+
 /**
  * Mobile page-title bar — shown at the top of every route except the home page
  * and the product page (which run their own headers). The site header is
@@ -53,16 +65,17 @@ function cleanDocumentTitle(): string {
  */
 export function MobilePageTitleBar() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const {
     title: routeTitle,
     isProductPage,
     isHomePage,
   } = useRouterState({ select: pageTitleState });
-  const [docTitle, setDocTitle] = useState('');
-
-  useEffect(() => {
-    setDocTitle(routeTitle ? '' : cleanDocumentTitle());
-  }, [routeTitle]);
+  const docTitle = useSyncExternalStore(
+    subscribeDocumentTitle,
+    () => (routeTitle ? '' : cleanDocumentTitle()),
+    () => ''
+  );
 
   if (isProductPage || isHomePage) return null;
 
@@ -76,7 +89,7 @@ export function MobilePageTitleBar() {
         className="mobile-page-title__back"
         onClick={() => {
           if (window.history.length > 1) window.history.back();
-          else window.location.assign('/');
+          else navigate('/');
         }}
         aria-label={t('blocks.header.back', 'Back')}
       >
diff --git a/app/components/layout/ThemeLayout.tsx b/app/components/layout/ThemeLayout.tsx
index c9f20e0..62308cc 100644
--- a/app/components/layout/ThemeLayout.tsx
+++ b/app/components/layout/ThemeLayout.tsx
@@ -132,11 +132,13 @@ export function ThemeLayout({ children }: ThemeLayoutProps) {
   // Cart) or a link inside one of them navigates without touching their own
   // state, so they would otherwise stay open over the new page.
   const pathname = useRouterState({ select: (s) => s.location.pathname });
-  useEffect(() => {
+  const [prevPathname, setPrevPathname] = useState(pathname);
+  if (prevPathname !== pathname) {
+    setPrevPathname(pathname);
     setNavOpen(false);
     setAccountOpen(false);
     setImportantLinksOpen(false);
-  }, [pathname]);
+  }
 
   // Fill the web components' strings the store's pack lacks from the theme's
   // locale files, each time a pack loads (`subscribe` also runs at once when one already has).
diff --git a/app/components/product/ProductDetails.tsx b/app/components/product/ProductDetails.tsx
index af9ede9..445768a 100644
--- a/app/components/product/ProductDetails.tsx
+++ b/app/components/product/ProductDetails.tsx
@@ -285,7 +285,9 @@ function ProductQuantityInfo({ product }: { product: Product }) {
         <div className="px-4 only:px-0 !text-red-800">
           <i className="sicon-fire rtl:ml-1.5 ltr:mr-1.5"></i> {t('pages.products.sold')}{' '}
           {/* Salla ships `sold_times` in Laravel plural format; resolve it for the count. */}
-          <span>{formatSallaPlural(t('pages.products.sold_times'), product.sold_quantity!)}</span>
+          <span>
+            {formatSallaPlural(t('pages.products.sold_times'), product.sold_quantity ?? 0)}
+          </span>
         </div>
       )}
       {product.can_show_remained_quantity &&
diff --git a/app/components/product/ProductGallery.tsx b/app/components/product/ProductGallery.tsx
index 9bdd237..7e48e68 100644
--- a/app/components/product/ProductGallery.tsx
+++ b/app/components/product/ProductGallery.tsx
@@ -1,7 +1,7 @@
 import { type ComponentRef, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { SallaSlider } from '@salla.sa/twilight-components-react/slider';
 import { SallaSocialShare } from '@salla.sa/twilight-components-react/social-share';
-import { useTwilight } from '@salla.sa/twilight-theme-engine/providers';
+import { useNavigate, useTwilight } from '@salla.sa/twilight-theme-engine/providers';
 import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';
 import { useWishlist } from '@salla.sa/twilight-theme-engine/hooks/useWishlist';
 import { Image } from '@salla.sa/twilight-theme-engine/common';
@@ -16,11 +16,14 @@ export interface ProductGalleryProps {
   product: Product;
 }
 
-type GalleryMedia = { url: string; type: 'image' | 'video' | '3d-image' };
+interface GalleryMedia {
+  url: string;
+  type: 'image' | 'video' | '3d-image';
+}
 // The engine's `SallaMobile` type lists `openGallery` only from twilight-platform #439.
-type NativeGalleryBridge = {
+interface NativeGalleryBridge {
   openGallery?: (images: ProductImage[], selected?: ProductImage) => boolean;
-};
+}
 
 /**
  * The engine's own `mobile::gallery.open` payload from before `salla.mobile.openGallery`: a video's
@@ -61,6 +64,7 @@ export function ProductGallery({ product }: ProductGalleryProps) {
   const sliderRef = useRef<ComponentRef<typeof SallaSlider>>(null);
   const objectFit = theme.settings.slider_background_size ?? 'cover';
   const hydrated = useHydrated();
+  const navigate = useNavigate();
   const isMobile = useMobileViewport();
   // `onAfterInit` fires once Swiper actually finishes laying the slider out —
   // later than `hydrated` (which only means React has mounted; the slider web
@@ -135,7 +139,7 @@ export function ProductGallery({ product }: ProductGalleryProps) {
           className="product-gallery__bar-btn"
           onClick={() => {
             if (window.history.length > 1) window.history.back();
-            else window.location.assign('/');
+            else navigate('/');
           }}
           aria-label={t('blocks.header.back', 'Back')}
         >
diff --git a/app/components/product/ProductListPage.tsx b/app/components/product/ProductListPage.tsx
index 72b8c06..014092a 100644
--- a/app/components/product/ProductListPage.tsx
+++ b/app/components/product/ProductListPage.tsx
@@ -1,4 +1,12 @@
-import { useState, useRef, useEffect, useMemo, useCallback, type ReactNode } from 'react';
+import {
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
 import { HookSlot } from '@salla.sa/twilight-theme-engine/hooks';
 import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';
 import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';
@@ -44,22 +52,28 @@ function usePref<T extends string>(
   values: readonly T[],
   initial: T
 ): [T, (v: T) => void] {
-  const [value, setValue] = useState<T>(initial);
-  useEffect(() => {
-    try {
-      const stored = window.localStorage.getItem(key) as T | null;
-      // This fills the hook's own state from localStorage; no parent is
-      // involved: see .react-doctor/false-positives.md.
-      // react-doctor-disable-next-line react-doctor/no-pass-data-to-parent
-      if (stored && values.includes(stored)) setValue(stored);
-    } catch {
-      /* private mode */
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key]);
+  const subscribe = useCallback((notify: () => void) => {
+    window.addEventListener('storage', notify);
+    return () => window.removeEventListener('storage', notify);
+  }, []);
+  const stored = useSyncExternalStore(
+    subscribe,
+    () => {
+      try {
+        const saved = window.localStorage.getItem(key) as T | null;
+        return saved && values.includes(saved) ? saved : null;
+      } catch {
+        return null; // private mode
+      }
+    },
+    () => null
+  );
+  // Set once the shopper picks; covers private mode, where storage can't hold it.
+  const [picked, setPicked] = useState<T | null>(null);
+  const value = picked ?? stored ?? initial;
   const set = useCallback(
     (v: T) => {
-      setValue(v);
+      setPicked(v);
       try {
         window.localStorage.setItem(key, v);
       } catch {
@@ -101,7 +115,12 @@ function useCatalogLoader(
   }, [source.type, source.value, selectedSort, filters]);
 }
 
-type BrandEntity = { name: string; banner?: string; logo?: string; description?: string };
+interface BrandEntity {
+  name: string;
+  banner?: string;
+  logo?: string;
+  description?: string;
+}
 
 /** Banner + logo + description above the listing, for a `/brands/{id}` page. Renders
  * nothing for any other source type. */
diff --git a/app/hooks/useAppSafeAreaTop.ts b/app/hooks/useAppSafeAreaTop.ts
index b26c1fa..af1dc97 100644
--- a/app/hooks/useAppSafeAreaTop.ts
+++ b/app/hooks/useAppSafeAreaTop.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 
 const VAR = '--app-safe-area-top';
 
@@ -7,6 +7,12 @@ function read(): number {
   return Number.isFinite(value) ? value : 0;
 }
 
+function subscribe(notify: () => void): () => void {
+  const observer = new MutationObserver(notify);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
+  return () => observer.disconnect();
+}
+
 /**
  * The Salla app's top inset (status bar / notch) in pixels, as the engine
  * writes it to `--app-safe-area-top` on `<html>` from `mobile::ui.safearea`.
@@ -14,14 +20,5 @@ function read(): number {
  * reports, which the app can send at any time.
  */
 export function useAppSafeAreaTop(): number {
-  const [top, setTop] = useState(0);
-
-  useEffect(() => {
-    setTop(read());
-    const observer = new MutationObserver(() => setTop(read()));
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-    return () => observer.disconnect();
-  }, []);
-
-  return top;
+  return useSyncExternalStore(subscribe, read, () => 0);
 }
diff --git a/app/hooks/useHydrated.ts b/app/hooks/useHydrated.ts
index dab4d66..262a72b 100644
--- a/app/hooks/useHydrated.ts
+++ b/app/hooks/useHydrated.ts
@@ -1,6 +1,6 @@
 import { useSyncExternalStore } from 'react';
 
-const subscribeNothing = () => () => {};
+const subscribeNothing = () => () => undefined;
 
 /**
  * `false` on the server and through hydration, then `true` once mounted on
diff --git a/app/hooks/useStaggeredRows.ts b/app/hooks/useStaggeredRows.ts
index a34a32b..ee1dffd 100644
--- a/app/hooks/useStaggeredRows.ts
+++ b/app/hooks/useStaggeredRows.ts
@@ -22,7 +22,7 @@ export const ROWS_IN_DELAY_MS = 350;
  * cover either reliably, so this watches the document (`BottomSheet` portals to
  * `<body>`) until a `rowSelector` match shows up, then releases the stagger.
  *
- * The build's `no-manual-dom` check flags its `document.querySelector` calls.
+ * The build's `no-manual-dom` check flags its `document.body.querySelector` calls.
  * They stay: the rows are rendered by the web component, inside a portal, so
  * there is no ref or React state that reaches them.
  */
@@ -34,10 +34,7 @@ export function useStaggeredRows(
   const [rowsIn, setRowsIn] = useState(false);
 
   useEffect(() => {
-    if (!open) {
-      setRowsIn(false);
-      return;
-    }
+    if (!open) return;
 
     let timer: ReturnType<typeof setTimeout> | undefined;
     let cancelPaint: (() => void) | undefined;
@@ -47,16 +44,16 @@ export function useStaggeredRows(
       timer = setTimeout(() => {
         // Force a reflow so the web component's closed state is painted before
         // `.is-in` flips it; otherwise a just-inserted row never transitions.
-        void document.querySelector<HTMLElement>(containerSelector)?.offsetWidth;
+        void document.body.querySelector<HTMLElement>(containerSelector)?.offsetWidth;
         cancelPaint = afterNextPaint(() => setRowsIn(true));
       }, ROWS_IN_DELAY_MS);
     };
 
-    if (document.querySelector(rowSelector)) {
+    if (document.body.querySelector(rowSelector)) {
       release();
     } else {
       observer = new MutationObserver(() => {
-        if (document.querySelector(rowSelector)) {
+        if (document.body.querySelector(rowSelector)) {
           observer?.disconnect();
           release();
         }
@@ -68,6 +65,7 @@ export function useStaggeredRows(
       observer?.disconnect();
       clearTimeout(timer);
       cancelPaint?.();
+      setRowsIn(false);
     };
   }, [open, containerSelector, rowSelector]);
 
diff --git a/eslint.config.js b/eslint.config.js
index b0f135f..9cb6264 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -25,7 +25,8 @@ export default tseslint.config(
   ...twilightEslintConfig,
 
   js.configs.recommended,
-  ...tseslint.configs.recommended,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
 
   {
     files: ['**/*.{js,jsx,ts,tsx}'],
@@ -48,24 +49,14 @@ export default tseslint.config(
   { files: ['**/*.{jsx,tsx}'], ...jsxA11y.flatConfigs.recommended },
   { files: ['**/*.{js,jsx,ts,tsx}'], ...reactHooks.configs.flat.recommended },
 
-  // React Compiler-style rules shipped in eslint-plugin-react-hooks v7 flag existing, working
-  // patterns. Fixing them means editing effect/memo logic, which this change must not do, so
-  // they are downgraded to warnings (still visible, not blocking).
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    rules: {
-      'react-hooks/set-state-in-effect': 'warn',
-      'react-hooks/use-memo': 'warn',
-      'react-hooks/globals': 'warn',
-    },
-  },
-
-  // Tests query the rendered DOM directly by design; the engine's DOM restrictions target app code.
+  // Tests query the rendered DOM directly and assert on values they just located, so the engine's
+  // DOM restrictions and non-null assertions are relaxed for tests only; app code keeps them.
   {
     files: ['tests/**/*.{ts,tsx}'],
     rules: {
       'no-restricted-properties': 'off',
       'no-restricted-globals': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
     },
   },
 
diff --git a/locales/ar.json b/locales/ar.json
index b81bfa6..ee5d181 100644
--- a/locales/ar.json
+++ b/locales/ar.json
@@ -28,6 +28,7 @@
   "blocks.header.search": "بحث",
   "blocks.header.cart": "السلة",
   "blocks.header.close": "إغلاق",
+  "blocks.slider.background_video": "فيديو الخلفية",
   "blocks.header.back": "رجوع",
   "blocks.header.browse_all": "تصفّح كل",
   "blocks.header.login_to_your_account": "سجل دخول إلى حسابك في المتجر",
diff --git a/locales/en.json b/locales/en.json
index e0d1ccd..d5f8d84 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -28,6 +28,7 @@
   "blocks.header.search": "Search",
   "blocks.header.cart": "Cart",
   "blocks.header.close": "Close",
+  "blocks.slider.background_video": "Background video",
   "blocks.header.back": "Back",
   "blocks.header.browse_all": "Browse all",
   "blocks.header.login_to_your_account": "Log in to your store account",
diff --git a/package.json b/package.json
index 80e8dcd..a939c01 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "lint": "eslint .",
+    "lint": "eslint . --max-warnings 0",
     "format:check": "prettier --check .",
     "knip": "knip",
     "prepare": "node scripts/install-hooks.mjs"
diff --git a/tests/components/cart/AddProductToast.test.tsx b/tests/components/cart/AddProductToast.test.tsx
index 592e42f..e8bef89 100644
--- a/tests/components/cart/AddProductToast.test.tsx
+++ b/tests/components/cart/AddProductToast.test.tsx
@@ -59,8 +59,8 @@ const CART_ITEMS = [OLDER, ADDED];
 
 // The add-item response: `Product Added` lists every cart line, oldest first.
 const addResponse = (
-  entries: Array<{ id: number; cart_item_id?: string }>,
-  items?: Array<{ id: string; product_id: number }>
+  entries: { id: number; cart_item_id?: string }[],
+  items?: { id: string; product_id: number }[]
 ) => ({
   data: {
     ...(items ? { cart: { items } } : {}),
diff --git a/tests/components/cart/CartItem.test.tsx b/tests/components/cart/CartItem.test.tsx
index a1bb584..b69c25b 100644
--- a/tests/components/cart/CartItem.test.tsx
+++ b/tests/components/cart/CartItem.test.tsx
@@ -84,7 +84,7 @@ describe('CartItem quantity', () => {
 
   it('keeps the quantity and sends nothing while a required option is empty', async () => {
     renderWithOption('');
-    await act(async () => {});
+    await act(async () => undefined);
     expect(updateItem).not.toHaveBeenCalled();
     expect(screen.getByLabelText<HTMLInputElement>('pages.products.quantity').value).toBe('1');
   });
diff --git a/tests/components/cart/CartPage.test.tsx b/tests/components/cart/CartPage.test.tsx
index 581242c..f56819f 100644
--- a/tests/components/cart/CartPage.test.tsx
+++ b/tests/components/cart/CartPage.test.tsx
@@ -42,7 +42,7 @@ vi.mock('@salla.sa/twilight-components-react/cart-item-offers', () => ({
 
 vi.mock('@salla.sa/twilight-theme-engine/hooks', () => ({
   HookSlot: () => null,
-  usePageConfig: () => {},
+  usePageConfig: () => undefined,
 }));
 vi.mock('@salla.sa/twilight-theme-engine/hooks/useMoney', () => ({
   useMoney: () => ({ format: (amount: unknown) => String(amount) }),
@@ -55,8 +55,7 @@ vi.mock('@salla.sa/twilight-theme-engine/common', () => ({
   NoContent: ({ message }: { message: string }) => (
     <p data-testid="cart-empty-message">{message}</p>
   ),
-  // eslint-disable-next-line jsx-a11y/anchor-is-valid -- minimal Link mock
-  Link: ({ children }: { children?: unknown }) => <a>{children as never}</a>,
+  Link: ({ children }: { children?: unknown }) => <a href="/">{children as never}</a>,
   Image: () => <img alt="" />,
 }));
 vi.mock('@salla.sa/twilight-theme-engine/cart', () => ({
diff --git a/tests/components/home/EnhancedSlider.test.tsx b/tests/components/home/EnhancedSlider.test.tsx
index 7c9c5af..c944643 100644
--- a/tests/components/home/EnhancedSlider.test.tsx
+++ b/tests/components/home/EnhancedSlider.test.tsx
@@ -287,7 +287,9 @@ describe('EnhancedSlider', () => {
           observe(element: Element) {
             observed.push(element);
           }
-          disconnect() {}
+          disconnect() {
+            return undefined;
+          }
         }
       );
       return {
@@ -358,7 +360,9 @@ describe('EnhancedSlider', () => {
       setReducedMotion(false);
       const io = stubIntersectionObserver();
       const play = vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
-      const pause = vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
+      const pause = vi
+        .spyOn(HTMLMediaElement.prototype, 'pause')
+        .mockImplementation(() => undefined);
       const { container } = render(
         <EnhancedSlider
           data={{
diff --git a/tests/components/home/ProductsSlider.test.tsx b/tests/components/home/ProductsSlider.test.tsx
index 23dbe73..59ad0ad 100644
--- a/tests/components/home/ProductsSlider.test.tsx
+++ b/tests/components/home/ProductsSlider.test.tsx
@@ -100,7 +100,7 @@ describe('ProductsSlider', () => {
   });
 
   it('shows the skeleton until the products resolve', () => {
-    respondWith(() => new Promise(() => {}));
+    respondWith(() => new Promise(() => undefined));
     const { getByTestId } = renderWithClient(
       <ProductsSlider data={{ products: { source: 'related', source_value: 1 } }} />
     );
diff --git a/tests/components/layout/Header.test.tsx b/tests/components/layout/Header.test.tsx
index 3c4015c..e65bed1 100644
--- a/tests/components/layout/Header.test.tsx
+++ b/tests/components/layout/Header.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent, act } from '@testing-library/react';
+import { render, fireEvent, act, cleanup } from '@testing-library/react';
 import { Header } from '../../../app/components/layout/Header';
 import { HOME_ROUTE_ID } from '../../../app/lib/routeIds';
 
@@ -17,9 +17,9 @@ const state = {
   routeIds: [] as string[],
 };
 
-type RouterStateStub = {
+interface RouterStateStub {
   matches: { routeId: string }[];
-};
+}
 
 vi.mock('@tanstack/react-router', () => ({
   useRouterState: ({ select }: { select: (s: RouterStateStub) => unknown }) =>
@@ -86,6 +86,8 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  // Unmount first so clearing the inset cannot re-render a mounted header after globals are unstubbed.
+  cleanup();
   document.documentElement.style.removeProperty('--app-safe-area-top');
   vi.unstubAllGlobals();
 });
@@ -142,9 +144,15 @@ describe('Header', () => {
     vi.stubGlobal(
       'IntersectionObserver',
       class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
+        observe() {
+          return undefined;
+        }
+        unobserve() {
+          return undefined;
+        }
+        disconnect() {
+          return undefined;
+        }
       }
     );
     state.theme = { settings: { header_layout: 'default' } };
@@ -163,9 +171,15 @@ describe('Header', () => {
     vi.stubGlobal(
       'IntersectionObserver',
       class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
+        observe() {
+          return undefined;
+        }
+        unobserve() {
+          return undefined;
+        }
+        disconnect() {
+          return undefined;
+        }
       }
     );
     state.theme = { settings: { header_layout: 'default' } };
@@ -211,9 +225,15 @@ describe('Header', () => {
     vi.stubGlobal(
       'IntersectionObserver',
       class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
+        observe() {
+          return undefined;
+        }
+        unobserve() {
+          return undefined;
+        }
+        disconnect() {
+          return undefined;
+        }
       }
     );
     state.theme = { settings: { header_layout: 'default', header_store_info_home_only: false } };
@@ -254,9 +274,15 @@ describe('Header', () => {
         constructor(_cb: unknown, options: { rootMargin?: string }) {
           margins.push(options.rootMargin ?? '');
         }
-        observe() {}
-        unobserve() {}
-        disconnect() {}
+        observe() {
+          return undefined;
+        }
+        unobserve() {
+          return undefined;
+        }
+        disconnect() {
+          return undefined;
+        }
       }
     );
     // Only the header's pin observer sets a top margin; other observers on the page don't.
diff --git a/tests/components/layout/HeaderMainMenu.test.tsx b/tests/components/layout/HeaderMainMenu.test.tsx
index 79cef10..070ae9d 100644
--- a/tests/components/layout/HeaderMainMenu.test.tsx
+++ b/tests/components/layout/HeaderMainMenu.test.tsx
@@ -63,7 +63,7 @@ vi.mock('../../../app/components/product', () => ({
   ),
 }));
 
-let resize: () => void = () => {};
+let resize: () => void = () => undefined;
 
 beforeEach(() => {
   state.settings = {};
@@ -105,8 +105,12 @@ beforeEach(() => {
       constructor(callback: () => void) {
         resize = callback;
       }
-      observe() {}
-      disconnect() {}
+      observe() {
+        return undefined;
+      }
+      disconnect() {
+        return undefined;
+      }
     }
   );
 });
diff --git a/tests/components/layout/HeaderNav.test.tsx b/tests/components/layout/HeaderNav.test.tsx
index 3f23810..3a6070f 100644
--- a/tests/components/layout/HeaderNav.test.tsx
+++ b/tests/components/layout/HeaderNav.test.tsx
@@ -75,14 +75,16 @@ afterEach(() => {
 describe('HeaderNav', () => {
   it('renders nothing while closed', () => {
     query.data = items;
-    const { container } = render(<HeaderNav open={false} onClose={() => {}} />);
+    const { container } = render(<HeaderNav open={false} onClose={() => undefined} />);
     expect(container.querySelector('.site-nav-drawer')).toBeNull();
     expect(container.firstChild).toBeNull();
   });
 
   it('opens on the root Miller column, then drills into a parent', () => {
     query.data = items;
-    const { container, getByText, queryByText } = render(<HeaderNav open onClose={() => {}} />);
+    const { container, getByText, queryByText } = render(
+      <HeaderNav open onClose={() => undefined} />
+    );
 
     expect(container.querySelector('.site-nav-drawer')).toBeTruthy();
 
@@ -107,7 +109,7 @@ describe('HeaderNav', () => {
   it('starts at the root column again when reopened after closing', () => {
     vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
     query.data = items;
-    const onClose = () => {};
+    const onClose = () => undefined;
     const { container, getByText, rerender } = render(<HeaderNav open onClose={onClose} />);
 
     fireEvent.click(getByText('Home'));
@@ -127,7 +129,7 @@ describe('HeaderNav', () => {
 
   it('locks body scroll while open', () => {
     query.data = items;
-    render(<HeaderNav open onClose={() => {}} />);
+    render(<HeaderNav open onClose={() => undefined} />);
     expect(document.body.classList.contains('menu-opened')).toBe(true);
   });
 
@@ -139,7 +141,7 @@ describe('HeaderNav', () => {
       { id: 1, title: 'Offers', url: '/offers' }, // no image
       { id: 2, title: 'Accessories', url: '/accessories', image: 'https://cdn.example.com/a.png' },
     ];
-    const { container } = render(<HeaderNav open onClose={() => {}} />);
+    const { container } = render(<HeaderNav open onClose={() => undefined} />);
 
     const rows = container.querySelectorAll('.site-nav-drawer__link');
     expect(rows.length).toBe(2);
@@ -165,7 +167,7 @@ describe('HeaderNav', () => {
       { id: 4, title: 'Dresses', url: '/dresses' },
       { id: 5, title: 'Accessories', url: '/accessories', image: 'https://cdn.example.com/a.png' },
     ];
-    const { container } = render(<HeaderNav open onClose={() => {}} />);
+    const { container } = render(<HeaderNav open onClose={() => undefined} />);
 
     const placeholders = Array.from(
       container.querySelectorAll('.site-nav-drawer__link-img-placeholder')
@@ -197,7 +199,7 @@ describe('HeaderNav', () => {
       { id: 1, title: 'Offers', url: '/offers' },
       { id: 2, title: 'Dresses', url: '/dresses' },
     ];
-    const { container } = render(<HeaderNav open onClose={() => {}} />);
+    const { container } = render(<HeaderNav open onClose={() => undefined} />);
 
     const rows = container.querySelectorAll('.site-nav-drawer__link');
     expect(rows.length).toBe(2);
@@ -219,7 +221,7 @@ describe('HeaderNav', () => {
         ],
       },
     ];
-    const { container, getByText } = render(<HeaderNav open onClose={() => {}} />);
+    const { container, getByText } = render(<HeaderNav open onClose={() => undefined} />);
 
     fireEvent.click(getByText('Home'));
 
diff --git a/tests/components/layout/ImportantLinksSheet.test.tsx b/tests/components/layout/ImportantLinksSheet.test.tsx
index b1131ee..1b99b9e 100644
--- a/tests/components/layout/ImportantLinksSheet.test.tsx
+++ b/tests/components/layout/ImportantLinksSheet.test.tsx
@@ -58,12 +58,12 @@ afterEach(() => {
 
 describe('ImportantLinksSheet', () => {
   it('renders nothing while closed', () => {
-    render(<ImportantLinksSheet open={false} onClose={() => {}} />);
+    render(<ImportantLinksSheet open={false} onClose={() => undefined} />);
     expect(document.querySelector('.important-links-sheet')).toBeNull();
   });
 
   it('is a second full-screen sheet, titled "Important links", showing the footer menu', async () => {
-    render(<ImportantLinksSheet open onClose={() => {}} />);
+    render(<ImportantLinksSheet open onClose={() => undefined} />);
     await settle();
 
     expect(document.querySelector('.bottom-sheet.important-links-sheet')).toBeTruthy();
@@ -129,7 +129,7 @@ describe('ImportantLinksSheet', () => {
     it('does not release the row stagger while the sheet is still sliding in', async () => {
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
-        render(<ImportantLinksSheet open onClose={() => {}} />);
+        render(<ImportantLinksSheet open onClose={() => undefined} />);
         expect(document.querySelector('.important-links-sheet__menu')?.className).not.toContain(
           'is-in'
         );
@@ -147,7 +147,7 @@ describe('ImportantLinksSheet', () => {
     it('releases the row stagger once the sheet has fully settled', async () => {
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
-        render(<ImportantLinksSheet open onClose={() => {}} />);
+        render(<ImportantLinksSheet open onClose={() => undefined} />);
 
         await advanceAndSettle(450);
         expect(document.querySelector('.important-links-sheet__menu')?.className).toContain(
@@ -161,13 +161,13 @@ describe('ImportantLinksSheet', () => {
     it('resets the stagger immediately on close, so it replays from the top next time', async () => {
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
-        const { rerender } = render(<ImportantLinksSheet open onClose={() => {}} />);
+        const { rerender } = render(<ImportantLinksSheet open onClose={() => undefined} />);
         await advanceAndSettle(450);
         expect(document.querySelector('.important-links-sheet__menu')?.className).toContain(
           'is-in'
         );
 
-        rerender(<ImportantLinksSheet open={false} onClose={() => {}} />);
+        rerender(<ImportantLinksSheet open={false} onClose={() => undefined} />);
         expect(document.querySelector('.important-links-sheet__menu')?.className).not.toContain(
           'is-in'
         );
@@ -187,7 +187,7 @@ describe('ImportantLinksSheet', () => {
       menuState.hasItem = false;
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
-        render(<ImportantLinksSheet open onClose={() => {}} />);
+        render(<ImportantLinksSheet open onClose={() => undefined} />);
 
         // Well past the normal settle delay -- nothing to stagger yet, so it must stay out.
         await advanceAndSettle(1000);
@@ -229,10 +229,10 @@ describe('ImportantLinksSheet', () => {
     it('still releases the stagger when the sheet starts closed and opens later', async () => {
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
-        const { rerender } = render(<ImportantLinksSheet open={false} onClose={() => {}} />);
+        const { rerender } = render(<ImportantLinksSheet open={false} onClose={() => undefined} />);
         expect(document.querySelector('.important-links-sheet__menu')).toBeNull();
 
-        rerender(<ImportantLinksSheet open onClose={() => {}} />);
+        rerender(<ImportantLinksSheet open onClose={() => undefined} />);
         // BottomSheet's own `mounted` flip is itself deferred to an effect --
         // let that (and the mutation it causes) settle before advancing.
         await act(async () => {
diff --git a/tests/components/layout/MobileAccountSheet.test.tsx b/tests/components/layout/MobileAccountSheet.test.tsx
index a2f3632..32d2342 100644
--- a/tests/components/layout/MobileAccountSheet.test.tsx
+++ b/tests/components/layout/MobileAccountSheet.test.tsx
@@ -117,7 +117,7 @@ async function settle() {
   });
 }
 
-function renderSheet(onOpenImportantLinks = () => {}) {
+function renderSheet(onOpenImportantLinks = () => undefined) {
   const onClose = vi.fn();
   render(<MobileAccountSheet open onClose={onClose} onOpenImportantLinks={onOpenImportantLinks} />);
   return onClose;
@@ -138,7 +138,13 @@ afterEach(() => {
 
 describe('MobileAccountSheet', () => {
   it('renders nothing while closed', () => {
-    render(<MobileAccountSheet open={false} onClose={() => {}} onOpenImportantLinks={() => {}} />);
+    render(
+      <MobileAccountSheet
+        open={false}
+        onClose={() => undefined}
+        onOpenImportantLinks={() => undefined}
+      />
+    );
     expect(document.querySelector('.account-sheet')).toBeNull();
   });
 
@@ -458,7 +464,7 @@ describe('MobileAccountSheet', () => {
       try {
         const onClose = vi.fn();
         const { rerender } = render(
-          <MobileAccountSheet open onClose={onClose} onOpenImportantLinks={() => {}} />
+          <MobileAccountSheet open onClose={onClose} onOpenImportantLinks={() => undefined} />
         );
         act(() => {
           vi.advanceTimersByTime(350);
@@ -466,7 +472,11 @@ describe('MobileAccountSheet', () => {
         expect(document.querySelector('.account-sheet__content')?.className).toContain('is-in');
 
         rerender(
-          <MobileAccountSheet open={false} onClose={onClose} onOpenImportantLinks={() => {}} />
+          <MobileAccountSheet
+            open={false}
+            onClose={onClose}
+            onOpenImportantLinks={() => undefined}
+          />
         );
         expect(document.querySelector('.account-sheet__content')?.className).not.toContain('is-in');
       } finally {
@@ -518,13 +528,21 @@ describe('MobileAccountSheet', () => {
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
         const { rerender } = render(
-          <MobileAccountSheet open onClose={() => {}} onOpenImportantLinks={() => {}} />
+          <MobileAccountSheet
+            open
+            onClose={() => undefined}
+            onOpenImportantLinks={() => undefined}
+          />
         );
         await advanceAndSettle(450);
         expect(menuClass()).toContain('is-in');
 
         rerender(
-          <MobileAccountSheet open={false} onClose={() => {}} onOpenImportantLinks={() => {}} />
+          <MobileAccountSheet
+            open={false}
+            onClose={() => undefined}
+            onOpenImportantLinks={() => undefined}
+          />
         );
         expect(menuClass()).not.toContain('is-in');
       } finally {
@@ -561,11 +579,21 @@ describe('MobileAccountSheet', () => {
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
         const { rerender } = render(
-          <MobileAccountSheet open={false} onClose={() => {}} onOpenImportantLinks={() => {}} />
+          <MobileAccountSheet
+            open={false}
+            onClose={() => undefined}
+            onOpenImportantLinks={() => undefined}
+          />
         );
         expect(document.querySelector('.account-sheet__user-menu')).toBeNull();
 
-        rerender(<MobileAccountSheet open onClose={() => {}} onOpenImportantLinks={() => {}} />);
+        rerender(
+          <MobileAccountSheet
+            open
+            onClose={() => undefined}
+            onOpenImportantLinks={() => undefined}
+          />
+        );
         await act(async () => {
           await Promise.resolve();
         });
diff --git a/tests/components/layout/MobileBottomBar.test.tsx b/tests/components/layout/MobileBottomBar.test.tsx
index 79e57d3..05a7c8a 100644
--- a/tests/components/layout/MobileBottomBar.test.tsx
+++ b/tests/components/layout/MobileBottomBar.test.tsx
@@ -78,7 +78,7 @@ afterEach(() => {
 });
 
 describe('MobileBottomBar', () => {
-  const noop = () => {};
+  const noop = () => undefined;
 
   it('renders all five tabs with their labels', () => {
     render(<MobileBottomBar navOpen={false} onOpenNav={noop} />);
@@ -254,10 +254,10 @@ describe('MobileBottomBar', () => {
       matches: false,
       media: query,
       onchange: null,
-      addListener: () => {},
-      removeListener: () => {},
-      addEventListener: () => {},
-      removeEventListener: () => {},
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
       dispatchEvent: () => false,
     })) as typeof window.matchMedia;
 
diff --git a/tests/components/product/AddToCartForm.test.tsx b/tests/components/product/AddToCartForm.test.tsx
index 649b15e..2a4d60a 100644
--- a/tests/components/product/AddToCartForm.test.tsx
+++ b/tests/components/product/AddToCartForm.test.tsx
@@ -25,8 +25,12 @@ beforeAll(() => {
         this as unknown as IntersectionObserver
       );
     }
-    unobserve() {}
-    disconnect() {}
+    unobserve() {
+      return undefined;
+    }
+    disconnect() {
+      return undefined;
+    }
     takeRecords() {
       return [];
     }
diff --git a/tests/components/product/ProductDetails.test.tsx b/tests/components/product/ProductDetails.test.tsx
index 1a4fe23..2f49d3c 100644
--- a/tests/components/product/ProductDetails.test.tsx
+++ b/tests/components/product/ProductDetails.test.tsx
@@ -26,8 +26,12 @@ beforeAll(() => {
         this as unknown as IntersectionObserver
       );
     }
-    unobserve() {}
-    disconnect() {}
+    unobserve() {
+      return undefined;
+    }
+    disconnect() {
+      return undefined;
+    }
     takeRecords() {
       return [];
     }
@@ -119,7 +123,7 @@ describe('ProductDetails description hooks', () => {
 });
 
 describe('ProductDetails wishlist heart', () => {
-  const onAdded: Array<(e: unknown, id: number) => void> = [];
+  const onAdded: ((e: unknown, id: number) => void)[] = [];
 
   beforeEach(() => {
     resetWishlistStore();
diff --git a/tests/components/product/ProductGallery.test.tsx b/tests/components/product/ProductGallery.test.tsx
index e02f6bb..096b655 100644
--- a/tests/components/product/ProductGallery.test.tsx
+++ b/tests/components/product/ProductGallery.test.tsx
@@ -7,6 +7,7 @@ import { ProductGallery } from '../../../app/components/product/ProductGallery';
 
 vi.mock('@salla.sa/twilight-theme-engine/providers', () => ({
   useTwilight: () => ({ theme: { settings: {} } }),
+  useNavigate: () => vi.fn(),
 }));
 
 vi.mock('@salla.sa/twilight-theme-engine/i18n', () => ({
diff --git a/tests/components/product/ProductListPage.test.tsx b/tests/components/product/ProductListPage.test.tsx
index fa64f4e..f167006 100644
--- a/tests/components/product/ProductListPage.test.tsx
+++ b/tests/components/product/ProductListPage.test.tsx
@@ -18,7 +18,7 @@ vi.mock('@salla.sa/twilight-theme-engine/providers', () => ({
   useLocation: () => ({ pathname: '/categories/1', searchStr: '' }),
   useTwilight: () => ({ theme: { settings: {} } }),
 }));
-vi.mock('@salla.sa/twilight-theme-engine/utils', () => ({ onSallaEvent: () => () => {} }));
+vi.mock('@salla.sa/twilight-theme-engine/utils', () => ({ onSallaEvent: () => () => undefined }));
 // The real sort helpers (not mocked): the test is about how the page wires them.
 vi.mock('@salla.sa/twilight-theme-engine/common', () => ({
   Breadcrumb: () => null,
@@ -34,7 +34,7 @@ vi.mock('@salla.sa/twilight-components-react', () => ({
 }));
 vi.mock('@salla.sa/twilight-theme-engine/home', () => ({
   Testimonials: () => null,
-  useReorderButtons: () => {},
+  useReorderButtons: () => undefined,
 }));
 vi.mock('@salla.sa/twilight-theme-engine/api/product', () => ({
   product: { list: vi.fn() },
@@ -46,7 +46,7 @@ vi.mock('@salla.sa/twilight-theme-engine/routes/product-listing', () => ({
     page: undefined,
     lastPage: undefined,
     status: 'idle',
-    retry: () => {},
+    retry: () => undefined,
   }),
 }));
 vi.mock('../../../app/components/product/ProductCard', () => ({ ProductCard: () => null }));
diff --git a/tests/hooks/useMobileViewport.test.tsx b/tests/hooks/useMobileViewport.test.tsx
index 641341b..a8b0052 100644
--- a/tests/hooks/useMobileViewport.test.tsx
+++ b/tests/hooks/useMobileViewport.test.tsx
@@ -53,7 +53,7 @@ describe('useMobileViewport', () => {
     const mql = new FakeMediaQueryList('(max-width: 767px)', true);
     window.matchMedia = vi.fn(() => mql) as unknown as typeof window.matchMedia;
 
-    const { getByTestId } = render(<Probe onRender={() => {}} />);
+    const { getByTestId } = render(<Probe onRender={() => undefined} />);
     expect(getByTestId('value').textContent).toBe('true');
   });
 
@@ -62,7 +62,7 @@ describe('useMobileViewport', () => {
     const mql = new FakeMediaQueryList('(max-width: 767px)', false);
     window.matchMedia = vi.fn(() => mql) as unknown as typeof window.matchMedia;
 
-    const { getByTestId } = render(<Probe onRender={() => {}} />);
+    const { getByTestId } = render(<Probe onRender={() => undefined} />);
     expect(getByTestId('value').textContent).toBe('false');
   });
 
@@ -71,7 +71,7 @@ describe('useMobileViewport', () => {
     const mql = new FakeMediaQueryList('(max-width: 767px)', false);
     window.matchMedia = vi.fn(() => mql) as unknown as typeof window.matchMedia;
 
-    const { getByTestId } = render(<Probe onRender={() => {}} />);
+    const { getByTestId } = render(<Probe onRender={() => undefined} />);
     expect(getByTestId('value').textContent).toBe('false');
 
     act(() => mql.setMatches(true));
@@ -86,7 +86,7 @@ describe('useMobileViewport', () => {
     const mql = new FakeMediaQueryList('(max-width: 767px)', false);
     window.matchMedia = vi.fn(() => mql) as unknown as typeof window.matchMedia;
 
-    const { unmount } = render(<Probe onRender={() => {}} />);
+    const { unmount } = render(<Probe onRender={() => undefined} />);
     expect(mql.listenerCount).toBe(1);
 
     unmount();
diff --git a/tests/hooks/useScrollDirection.test.tsx b/tests/hooks/useScrollDirection.test.tsx
index d95a6a1..eca140c 100644
--- a/tests/hooks/useScrollDirection.test.tsx
+++ b/tests/hooks/useScrollDirection.test.tsx
@@ -1,14 +1,13 @@
 import { describe, it, expect, afterEach, vi } from 'vitest';
-import { act, render } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { useScrollDirection } from '../../app/hooks/useScrollDirection';
 
-let direction: string | undefined;
-
 function Probe() {
-  direction = useScrollDirection();
-  return null;
+  return <output data-testid="scroll-direction-probe-value">{useScrollDirection()}</output>;
 }
 
+const direction = () => screen.getByTestId('scroll-direction-probe-value').textContent;
+
 /** Scroll the window to `y` and run the frame the hook waits for. */
 function scrollTo(y: number) {
   Object.defineProperty(window, 'scrollY', { value: y, configurable: true });
@@ -28,19 +27,19 @@ describe('useScrollDirection', () => {
     vi.useFakeTimers({ toFake: ['requestAnimationFrame', 'cancelAnimationFrame'] });
     scrollTo(0);
     render(<Probe />);
-    expect(direction).toBe('up');
+    expect(direction()).toBe('up');
 
     scrollTo(200);
-    expect(direction).toBe('down');
+    expect(direction()).toBe('down');
 
     // A jitter back up of a few pixels doesn't flip it.
     scrollTo(195);
-    expect(direction).toBe('down');
+    expect(direction()).toBe('down');
 
     scrollTo(120);
-    expect(direction).toBe('up');
+    expect(direction()).toBe('up');
 
     scrollTo(300);
-    expect(direction).toBe('down');
+    expect(direction()).toBe('down');
   });
 });
diff --git a/tests/lib/nativeBooking.test.ts b/tests/lib/nativeBooking.test.ts
index 98c6664..238e9a8 100644
--- a/tests/lib/nativeBooking.test.ts
+++ b/tests/lib/nativeBooking.test.ts
@@ -10,7 +10,7 @@ function installSalla({ guest = false, add = vi.fn(), inApp = true } = {}) {
   const setAfterLoginEvent = vi.fn();
   const registerHook = vi.fn<(tag: string, hook: string, callback: HookCallback) => void>();
   (window as unknown as { salla: unknown }).salla = {
-    init: () => {},
+    init: () => undefined,
     hooks: { registerHook },
     mobile: { isEnabled: () => inApp },
     config: { isGuest: () => guest },
diff --git a/tests/lib/settingsUsage.test.ts b/tests/lib/settingsUsage.test.ts
index 27c1899..c18f169 100644
--- a/tests/lib/settingsUsage.test.ts
+++ b/tests/lib/settingsUsage.test.ts
@@ -8,8 +8,15 @@ import { join } from 'node:path';
 const root = join(__dirname, '../..');
 const engine = join(root, 'node_modules/@salla.sa/twilight-theme-engine');
 
-type Field = { id?: string; type?: string; fields?: Field[] };
-type Manifest = { settings?: Field[]; components?: { key: string; fields?: Field[] }[] };
+interface Field {
+  id?: string;
+  type?: string;
+  fields?: Field[];
+}
+interface Manifest {
+  settings?: Field[];
+  components?: { key: string; fields?: Field[] }[];
+}
 
 // Known dead settings, each with the task that fixes it. Remove an entry when the fix lands;
 // the last test fails until you do, so this list cannot go stale.
diff --git a/tests/setup.tsx b/tests/setup.tsx
index 9d40c3f..9a74dfa 100644
--- a/tests/setup.tsx
+++ b/tests/setup.tsx
@@ -15,10 +15,10 @@ if (typeof window !== 'undefined' && !window.matchMedia) {
     matches: true,
     media: query,
     onchange: null,
-    addListener: () => {},
-    removeListener: () => {},
-    addEventListener: () => {},
-    removeEventListener: () => {},
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
     dispatchEvent: () => false,
   })) as typeof window.matchMedia;
 }
diff --git a/tests/styles/sold-out-sticky-bar.test.tsx b/tests/styles/sold-out-sticky-bar.test.tsx
index 3c05600..c577cc5 100644
--- a/tests/styles/sold-out-sticky-bar.test.tsx
+++ b/tests/styles/sold-out-sticky-bar.test.tsx
@@ -53,8 +53,12 @@ beforeAll(async () => {
         this as unknown as IntersectionObserver
       );
     }
-    unobserve() {}
-    disconnect() {}
+    unobserve() {
+      return undefined;
+    }
+    disconnect() {
+      return undefined;
+    }
     takeRecords() {
       return [];
     }
diff --git a/vite.config.ts b/vite.config.ts
index 9d073a8..d5d791d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type CSSOptions } from 'vite';
 import { twilightReact } from '@salla.sa/twilight-theme-engine/vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 import path from 'path';
 
+type ScssOptions = NonNullable<CSSOptions['preprocessorOptions']>['scss'];
 export default defineConfig(async () => ({
   plugins: [
     // twilightReact() registers and configures the SSR runtime, so a theme
@@ -64,8 +65,8 @@ export default defineConfig(async () => ({
   },
   css: {
     preprocessorOptions: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- vite's typings lag sass's `modern-compiler` option
-      scss: { api: 'modern-compiler', silenceDeprecations: ['import'] } as any,
+      // vite's typings lag sass's `modern-compiler` option, so widen to the declared shape.
+      scss: { api: 'modern-compiler', silenceDeprecations: ['import'] } as ScssOptions,
     },
   },
   build: {