search notify where we are searching

assets/css/app.css

@@ -37,29 +37,33 @@
  * dark:bg-surface-dark, border-outline, etc.
  * ============================================================ */
 @theme {
-  /* light mode */
-  --color-surface: var(--color-white);
-  --color-surface-alt: var(--color-slate-100);
-  --color-on-surface: var(--color-slate-700);
-  --color-on-surface-strong: var(--color-slate-900);
-  --color-primary: var(--color-indigo-600);
-  --color-on-primary: var(--color-white);
-  --color-secondary: var(--color-slate-600);
-  --color-on-secondary: var(--color-white);
-  --color-outline: var(--color-slate-300);
-  --color-outline-strong: var(--color-slate-800);
+  /* light mode — Catppuccin Latte (https://catppuccin.com/palette)
+   * Base #eff1f5, Mantle #e6e9ef, Surface1 #bcc0cc, Subtext1 #5c5f77,
+   * Subtext0 #6c6f85, Text #4c4f69, Blue #1e66f5. */
+  --color-surface: #eff1f5;            /* Base */
+  --color-surface-alt: #e6e9ef;        /* Mantle */
+  --color-on-surface: #5c5f77;         /* Subtext1 */
+  --color-on-surface-strong: #4c4f69;  /* Text */
+  --color-primary: #1e66f5;            /* Blue */
+  --color-on-primary: #eff1f5;         /* Base */
+  --color-secondary: #6c6f85;          /* Subtext0 */
+  --color-on-secondary: #eff1f5;       /* Base */
+  --color-outline: #bcc0cc;            /* Surface1 */
+  --color-outline-strong: #4c4f69;     /* Text */
 
-  /* dark mode */
-  --color-surface-dark: var(--color-slate-900);
-  --color-surface-dark-alt: var(--color-slate-800);
-  --color-on-surface-dark: var(--color-slate-300);
-  --color-on-surface-dark-strong: var(--color-white);
-  --color-primary-dark: var(--color-indigo-400);
-  --color-on-primary-dark: var(--color-slate-950);
-  --color-secondary-dark: var(--color-slate-300);
-  --color-on-secondary-dark: var(--color-slate-950);
-  --color-outline-dark: var(--color-slate-700);
-  --color-outline-dark-strong: var(--color-slate-300);
+  /* dark mode — Gruvbox dark palette (https://github.com/morhetz/gruvbox)
+   * bg0 #282828, bg1 #3c3836, bg2 #504945, fg0 #fbf1c7, fg1 #ebdbb2,
+   * fg2 #d5c4a1, fg3 #bdae93, bright blue #83a598, bg0_h #1d2021. */
+  --color-surface-dark: #282828;            /* bg0 */
+  --color-surface-dark-alt: #3c3836;        /* bg1 */
+  --color-on-surface-dark: #ebdbb2;         /* fg1 */
+  --color-on-surface-dark-strong: #fbf1c7;  /* fg0 */
+  --color-primary-dark: #83a598;            /* bright blue */
+  --color-on-primary-dark: #1d2021;         /* bg0_h */
+  --color-secondary-dark: #d5c4a1;          /* fg2 */
+  --color-on-secondary-dark: #1d2021;       /* bg0_h */
+  --color-outline-dark: #504945;            /* bg2 */
+  --color-outline-dark-strong: #bdae93;     /* fg3 */
 
   /* shared status colors (same in both modes) */
   --color-info: var(--color-sky-500);

assets/i18n/en/main.ftl

@@ -315,6 +315,7 @@ order-search-placeholder = Search orders…
 search-empty = Nothing matched your search:
 results-count = { $count } products
 sort-label = Sort
+per-page-label = Per page
 sort-relevance = Relevance
 sort-newest = Newest
 sort-price_asc = Price: low to high
@@ -386,6 +387,11 @@ profile-last-name = Surname
 profile-edit = Edit profile
 profile-cancel = Cancel
 profile-not-set = Not set
+profile-avatar = Profile picture
+profile-avatar-hint = PNG, JPG, WEBP or GIF, up to 10 MB.
+profile-avatar-choose = Choose a picture
+profile-avatar-upload = Upload
+profile-avatar-remove = Remove picture
 nav-account = My account
 account-orders = My orders
 account-change-password = Change password
@@ -500,3 +506,29 @@ order-manual-fulfillment = Manual fulfilment — no carrier API for this option.
 order-send-hint = When the goods are ready, send this order to the carrier.
 order-send-to-carrier = Send to
 order-send-confirm = Send this order to the carrier now?
+
+# --- storefront chrome: top bar, header, footer ---
+brand-subtitle = medical supplies
+top-contact = Contact
+top-sitemap = Sitemap
+search-button = Search
+search-scope-in = Searching in:
+search-scope-all = Search the whole shop
+welcome = Welcome
+cart-units = items
+hotline = +421 903 410 476
+footer-tagline = Medical supplies for clinics, hospitals and home care. Delivery within 24 hours.
+footer-info = Information
+footer-account = Account
+footer-contact = Contact
+footer-terms = Terms and conditions
+footer-about = About our company
+footer-stores = Our stores
+footer-shipping = Shipping and payment
+footer-orders = My orders
+footer-email = info@kompress.sk
+footer-hours = Mon–Fri 8:00–16:00
+footer-rights = © 2026 Kompress · Medical supplies
+page-coming-soon = This page is coming soon. In the meantime, feel free to contact us by phone or e-mail.
+page-contact-intro = We're happy to help you choose. Get in touch:
+page-sitemap-intro = An overview of the shop's main sections.

assets/i18n/sk/main.ftl

@@ -315,6 +315,7 @@ order-search-placeholder = Hľadať objednávky…
 search-empty = Pre váš výraz sme nič nenašli:
 results-count = { $count } produktov
 sort-label = Zoradiť
+per-page-label = Na stránku
 sort-relevance = Relevancia
 sort-newest = Najnovšie
 sort-price_asc = Cena: od najnižšej
@@ -386,6 +387,11 @@ profile-last-name = Priezvisko
 profile-edit = Upraviť profil
 profile-cancel = Zrušiť
 profile-not-set = Neuvedené
+profile-avatar = Profilová fotka
+profile-avatar-hint = PNG, JPG, WEBP alebo GIF, max. 10 MB.
+profile-avatar-choose = Vybrať fotku
+profile-avatar-upload = Nahrať
+profile-avatar-remove = Odstrániť fotku
 nav-account = Môj účet
 account-orders = Moje objednávky
 account-change-password = Zmeniť heslo
@@ -500,3 +506,29 @@ order-manual-fulfillment = Manuálne spracovanie — táto možnosť nemá API d
 order-send-hint = Keď je tovar pripravený, odošlite objednávku dopravcovi.
 order-send-to-carrier = Odoslať dopravcovi
 order-send-confirm = Odoslať túto objednávku dopravcovi teraz?
+
+# --- storefront chrome: top bar, header, footer ---
+brand-subtitle = zdravotnícke potreby
+top-contact = Kontakt
+top-sitemap = Mapa stránky
+search-button = Hľadať
+search-scope-in = Hľadáte v kategórii:
+search-scope-all = Hľadať v celom obchode
+welcome = Vitajte
+cart-units = ks
+hotline = +421 903 410 476
+footer-tagline = Zdravotnícke potreby pre ambulancie, nemocnice a domácu starostlivosť. Dodanie do 24 hodín.
+footer-info = Informácie
+footer-account = Účet
+footer-contact = Kontakt
+footer-terms = Obchodné podmienky
+footer-about = O našej spoločnosti
+footer-stores = Naše obchody
+footer-shipping = Doprava a platba
+footer-orders = Moje objednávky
+footer-email = info@kompress.sk
+footer-hours = Po–Pia 8:00–16:00
+footer-rights = © 2026 Kompress · Zdravotnícke potreby
+page-coming-soon = Túto stránku práve pripravujeme. Medzitým nás môžete kontaktovať telefonicky alebo e-mailom.
+page-contact-intro = Radi vám poradíme s výberom. Ozvite sa nám:
+page-sitemap-intro = Prehľad hlavných sekcií obchodu.

assets/views/account/profile.html

@@ -28,6 +28,45 @@
   {{ ui::alert_danger(message=t(key="profile-company-required", lang=lang | default(value='sk')), extra="mt-4") }}
   {% endif %}
 
+  {# initials fallback when no avatar is set, e.g. "Filip Priec" -> "FP" #}
+  {% set _name = name | default(value='') | trim %}
+  {% set _parts = _name | split(pat=' ') %}
+  {% set _initials = _parts.0 | truncate(length=1, end='') | upper %}
+  {% if _parts | length > 1 %}{% set _second = _parts | last | truncate(length=1, end='') | upper %}{% set _initials = _initials ~ _second %}{% endif %}
+
+  <!-- avatar: upload / replace / remove. Own multipart form, independent of the
+       profile edit toggle below, so it works in both view and edit modes. -->
+  <fieldset class="mt-6 space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt"
+    x-data="{ name: '' }">
+    <legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="profile-avatar", lang=lang | default(value='sk')) }}</legend>
+    <div class="flex items-center gap-5">
+      <span class="flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-2xl font-bold tracking-wider text-on-primary/90 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90">
+        {%- if avatar_id %}<img src="/images/{{ avatar_id }}" alt="{{ _name }}" class="size-full object-cover">{% elif _initials %}{{ _initials }}{% endif -%}
+      </span>
+      <div class="min-w-0 space-y-3">
+        <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="profile-avatar-hint", lang=lang | default(value='sk')) }}</p>
+        <div class="flex flex-wrap items-center gap-3">
+          <form method="post" action="/account/profile/avatar" enctype="multipart/form-data" hx-boost="false" class="flex flex-wrap items-center gap-3">
+            {{ ui::csrf_field() }}
+            <label class="inline-flex cursor-pointer items-center gap-2 rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-primary/5 hover:text-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark dark:hover:text-primary-dark">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 shrink-0" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></svg>
+              <span class="truncate max-w-[12rem]" x-text="name || '{{ t(key='profile-avatar-choose', lang=lang | default(value='sk')) }}'">{{ t(key="profile-avatar-choose", lang=lang | default(value='sk')) }}</span>
+              <input type="file" name="image" accept="image/png,image/jpeg,image/webp,image/gif" class="sr-only"
+                @change="name = $event.target.files.length ? $event.target.files[0].name : ''">
+            </label>
+            {{ ui::button(label=t(key="profile-avatar-upload", lang=lang | default(value='sk')), type="submit", size="px-4 py-2 text-sm", attrs='x-show="name" x-cloak') }}
+          </form>
+          {% if avatar_id %}
+          <form method="post" action="/account/profile/avatar/remove" hx-boost="false">
+            {{ ui::csrf_field() }}
+            {{ ui::button(label=t(key="profile-avatar-remove", lang=lang | default(value='sk')), type="submit", variant="outline-secondary", size="px-4 py-2 text-sm") }}
+          </form>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </fieldset>
+
   <!-- read-only view (default) -->
   <div x-show="!editing" class="mt-6 space-y-6">
     <fieldset class="space-y-2 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">

assets/views/base.html

@@ -73,39 +73,59 @@
     x-data="{ cats: false, lg: window.matchMedia('(min-width: 1024px)').matches }"
     x-init="window.matchMedia('(min-width: 1024px)').addEventListener('change', e => lg = e.matches)"
     class="min-h-screen bg-surface text-on-surface antialiased dark:bg-surface-dark dark:text-on-surface-dark">
+    <!-- top utility bar (Kompress design): primary nav on the left, contact /
+         sitemap links on the right. Non-sticky — it scrolls away above the
+         sticky header. -->
+    <div class="hidden border-b border-outline bg-surface text-xs sm:block dark:border-outline-dark dark:bg-surface-dark">
+      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-2 text-on-surface/70 dark:text-on-surface-dark/70">
+        <div class="flex items-center gap-5">
+          <a href="/" data-nav="/" class="transition hover:text-primary aria-[current=page]:font-semibold aria-[current=page]:text-primary dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-home", lang=lang | default(value='sk')) }}</a>
+          <a href="/shop" data-nav="/shop" class="transition hover:text-primary aria-[current=page]:font-semibold aria-[current=page]:text-primary dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a>
+        </div>
+        <div class="flex items-center gap-4">
+          <a href="/kontakt" class="transition hover:text-primary dark:hover:text-primary-dark">{{ t(key="top-contact", lang=lang | default(value='sk')) }}</a>
+          <span class="h-3 w-px bg-outline dark:bg-outline-dark"></span>
+          <a href="/mapa-stranky" class="transition hover:text-primary dark:hover:text-primary-dark">{{ t(key="top-sitemap", lang=lang | default(value='sk')) }}</a>
+        </div>
+      </div>
+    </div>
+
     <header
       class="sticky top-0 z-30 border-b border-outline bg-surface/95 backdrop-blur dark:border-outline-dark dark:bg-surface-dark/95">
-      <nav x-data="{ mobile: false }" class="mx-auto flex max-w-7xl items-center gap-4 px-4 py-3">
+      <nav x-data="{ mobile: false }" class="mx-auto flex max-w-7xl items-center gap-3 px-4 py-3 sm:gap-4">
         <!-- category sidebar toggle (mobile only) -->
         {% set hamburger_icon = ui::icon(name="hamburger", size="size-6") %}
         {{ ui::icon_button(aria_label=t(key='categories', lang=lang | default(value='sk')), attrs='@click="cats = !cats" :aria-expanded="cats"', extra="lg:hidden", icon=hamburger_icon) }}
-        <a href="/"
-          class="text-lg font-bold tracking-tight text-on-surface-strong dark:text-on-surface-dark-strong">
-          {{ t(key="brand", lang=lang | default(value='sk')) }}
+
+        <!-- logo lockup: blue cross tile + wordmark + medical-supplies subtitle -->
+        <a href="/" class="flex shrink-0 items-center gap-2.5">
+          <span class="inline-flex size-9 items-center justify-center rounded-radius bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="10" y="3" width="4" height="18" rx="1.5"></rect><rect x="3" y="10" width="18" height="4" rx="1.5"></rect></svg>
+          </span>
+          <span class="flex flex-col leading-none">
+            <span class="text-lg font-extrabold tracking-tight text-primary dark:text-primary-dark">{{ t(key="brand", lang=lang | default(value='sk')) }}</span>
+            <span class="hidden text-[10px] font-semibold uppercase tracking-wider text-on-surface/50 sm:block dark:text-on-surface-dark/50">{{ t(key="brand-subtitle", lang=lang | default(value='sk')) }}</span>
+          </span>
         </a>
 
-        <!-- desktop links — Penguin navbar link treatment via ui::nav_link -->
-        <ul class="ml-2 hidden items-center gap-6 md:flex">
-          <li>{{ ui::nav_link(label=t(key="nav-home", lang=lang | default(value='sk')), href="/", data_nav="/") }}</li>
-          <li>{{ ui::nav_link(label=t(key="nav-shop", lang=lang | default(value='sk')), href="/shop", data_nav="/shop") }}</li>
-          {% if logged_in_admin %}
-          <li>{{ ui::nav_link(label=t(key="admin-title", lang=lang | default(value='sk')), href="/admin/dashboard", data_nav="/admin", variant="warning", attrs='hx-boost="false"') }}</li>
-          <li>
-            <form method="post" action="/logout" hx-boost="false">
-  {{ ui::csrf_field() }}
-              <button type="submit" class="text-sm font-medium text-danger underline-offset-2 transition hover:opacity-75 focus:outline-hidden focus-visible:underline">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
-            </form>
-          </li>
-          {% elif logged_in_customer %}
-          {# customer account links live in the profile dropdown next to the cart #}
-          {% else %}
-          <li>{{ ui::nav_link(label=t(key="nav-login", lang=lang | default(value='sk')), href="/login", data_nav="/login") }}</li>
-          <li>{{ ui::nav_link(label=t(key="nav-register", lang=lang | default(value='sk')), href="/register", data_nav="/register") }}</li>
-          {% endif %}
-        </ul>
+        <!-- in-header search → existing GET /search (q param). Only on the home
+             page; elsewhere the shop's own toolbar carries the search box. Hidden
+             on small screens (a compact copy lives in the mobile menu below). -->
+        {% if on_home | default(value=false) %}
+        <form action="/search" method="get" role="search" class="hidden min-w-0 flex-1 md:flex md:max-w-xl">
+          <div class="flex min-w-0 flex-1 overflow-hidden rounded-radius border border-outline transition focus-within:border-primary dark:border-outline-dark dark:focus-within:border-primary-dark">
+            <span class="pointer-events-none flex items-center bg-surface-alt pl-3.5 text-on-surface/40 dark:bg-surface-dark-alt dark:text-on-surface-dark/40">{{ ui::icon(name="search", size="size-[18px]") }}</span>
+            <input type="search" name="q" autocomplete="off"
+              placeholder="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
+              aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
+              class="min-w-0 flex-1 border-0 bg-surface-alt px-2.5 py-2.5 text-sm text-on-surface placeholder:text-on-surface/50 focus:outline-none dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50" />
+            <button type="submit" class="shrink-0 bg-primary px-5 text-sm font-bold text-on-primary transition hover:opacity-90 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
+          </div>
+        </form>
+        {% endif %}
 
-        <!-- right side: kurz + cart + settings + mobile toggle -->
-        <div class="ml-auto flex items-center gap-3">
+        <!-- right side: kurz + account + cart + settings + mobile toggle -->
+        <div class="ml-auto flex items-center gap-2 sm:gap-3">
           <!-- exchange-rate ("kurz") display: the admin-set EUR→alt rate(s).
                Hidden when the store is EUR-only (no enabled alternatives). -->
           {% set nav_cc = currencies() %}
@@ -117,9 +137,26 @@
             {% endfor %}
           </div>
           {% endif %}
-          <!-- customer profile dropdown (avatar + name + account type) -->
-          {% if logged_in_customer %}
+          <!-- account area: admin quick links / customer profile dropdown /
+               guest two-line "Vitajte · Prihláste sa" button (Kompress design) -->
+          {% if logged_in_admin %}
+          <div class="hidden items-center gap-3 sm:flex">
+            {{ ui::nav_link(label=t(key="admin-title", lang=lang | default(value='sk')), href="/admin/dashboard", data_nav="/admin", variant="warning", attrs='hx-boost="false"') }}
+            <form method="post" action="/logout" hx-boost="false">
+  {{ ui::csrf_field() }}
+              <button type="submit" class="text-sm font-medium text-danger underline-offset-2 transition hover:opacity-75 focus:outline-hidden focus-visible:underline">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
+            </form>
+          </div>
+          {% elif logged_in_customer %}
           {% include "partials/profile_menu.html" %}
+          {% else %}
+          <a href="/login" data-nav="/login" class="hidden items-center gap-2.5 rounded-radius px-2.5 py-1.5 text-on-surface transition hover:bg-surface-alt sm:inline-flex dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="size-5 shrink-0" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M5 20a7 7 0 0 1 14 0"></path></svg>
+            <span class="flex flex-col items-start leading-tight">
+              <span class="text-[11px] text-on-surface/50 dark:text-on-surface-dark/50">{{ t(key="welcome", lang=lang | default(value='sk')) }}</span>
+              <span class="text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</span>
+            </span>
+          </a>
           {% endif %}
           <!-- cart: hover opens an Alza-style mini-cart preview (Penguin
                dropdown-with-hover), lazy-loaded from /partials/cart on each hover
@@ -138,10 +175,16 @@
               hx-get="/partials/cart" hx-trigger="mouseenter delay:150ms" hx-target="#cart-preview-body" hx-swap="innerHTML"
               aria-label="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
               title="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
-              class="relative inline-flex size-9 shrink-0 items-center justify-center rounded-radius bg-transparent text-secondary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 dark:text-secondary-dark dark:focus-visible:outline-secondary-dark">
-              {{ ui::icon(name="cart") }}
-              <span x-show="count > 0" x-cloak x-text="count"
-                class="absolute -right-1 -top-1 inline-flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-4 text-on-primary dark:bg-primary-dark dark:text-on-primary-dark"></span>
+              class="flex shrink-0 items-center gap-2.5 rounded-radius border border-outline bg-surface-alt px-2.5 py-1.5 text-on-surface transition hover:border-outline-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:border-outline-dark-strong dark:focus-visible:outline-primary-dark">
+              <span class="relative inline-flex text-primary dark:text-primary-dark">
+                {{ ui::icon(name="cart", size="size-6") }}
+                <span x-show="count > 0" x-cloak x-text="count"
+                  class="absolute -right-2 -top-2 inline-flex min-w-[18px] items-center justify-center rounded-full bg-danger px-1 text-[10px] font-bold leading-[18px] text-on-danger ring-2 ring-surface-alt dark:ring-surface-dark-alt"></span>
+              </span>
+              <span class="hidden flex-col items-start leading-tight sm:flex">
+                <span class="text-[11px] text-on-surface/50 dark:text-on-surface-dark/50">{{ t(key="cart-title", lang=lang | default(value='sk')) }}</span>
+                <span class="text-sm font-bold text-on-surface-strong dark:text-on-surface-dark-strong"><span x-text="count">0</span> {{ t(key="cart-units", lang=lang | default(value='sk')) }}</span>
+              </span>
             </a>
             <!-- hover preview panel (no id on the panel → not htmx-settled on boosted nav) -->
             <div x-cloak x-show="isOpen" x-transition
@@ -170,6 +213,17 @@
              underline focus), active state via data-nav + markActiveNav() -->
         <ul x-show="mobile" x-cloak @click.outside="mobile = false" x-transition
           class="absolute inset-x-0 top-full mx-4 mt-2 flex flex-col gap-1 rounded-radius border border-outline bg-surface p-2 shadow-lg md:hidden dark:border-outline-dark dark:bg-surface-dark-alt">
+          {% if on_home | default(value=false) %}
+          <li class="mb-1">
+            <form action="/search" method="get" role="search" class="flex overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
+              <input type="search" name="q" autocomplete="off"
+                placeholder="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
+                aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
+                class="min-w-0 flex-1 border-0 bg-surface-alt px-3 py-2 text-sm text-on-surface placeholder:text-on-surface/50 focus:outline-none dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50" />
+              <button type="submit" class="shrink-0 bg-primary px-4 text-sm font-bold text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
+            </form>
+          </li>
+          {% endif %}
           <li><a href="/" data-nav="/" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-home", lang=lang | default(value='sk')) }}</a></li>
           <li><a href="/shop" data-nav="/shop" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a></li>
           {% if logged_in_admin %}
@@ -200,12 +254,15 @@
     <div x-cloak x-show="cats" x-transition.opacity @click="cats = false" aria-hidden="true"
       class="fixed inset-0 z-30 bg-black/50 lg:hidden"></div>
 
-    <div class="mx-auto flex w-full max-w-7xl gap-8 px-4 py-8">
+    <div class="mx-auto w-full max-w-7xl px-4 py-8">
+      <!-- page breadcrumbs: full width, above the sidebar + content row -->
+      {% block breadcrumbs %}{% endblock breadcrumbs %}
+      <div class="flex w-full gap-8">
       {% if account_nav %}
       <!-- account-area sidebar: replaces the storefront categories while the
            customer is inside /account/*. -->
       <aside x-cloak x-show="cats || lg" aria-label="{{ t(key='nav-account', lang=lang | default(value='sk')) }}"
-        class="fixed inset-y-0 left-0 z-40 w-64 overflow-y-auto border-r border-outline bg-surface-alt p-4 lg:static lg:z-auto lg:w-64 lg:shrink-0 lg:self-start lg:overflow-visible lg:rounded-radius lg:border lg:p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
+        class="fixed inset-y-0 left-0 z-40 w-64 overflow-y-auto border-r border-outline bg-surface-alt p-4 lg:sticky lg:top-24 lg:z-auto lg:w-64 lg:shrink-0 lg:self-start lg:overflow-visible lg:rounded-radius lg:border lg:p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
         <h2 class="px-3 pb-2 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="nav-account", lang=lang | default(value='sk')) }}</h2>
         <ul class="space-y-1">
           <li><a href="/account/orders" data-nav="/account/orders" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="account-orders", lang=lang | default(value='sk')) }}</a></li>
@@ -225,15 +282,59 @@
       <aside id="category-sidebar" hx-preserve="true"
         x-cloak x-show="cats || lg" aria-label="{{ t(key='categories', lang=lang | default(value='sk')) }}"
         hx-get="/partials/categories" hx-trigger="load"
-        class="fixed inset-y-0 left-0 z-40 w-64 overflow-y-auto border-r border-outline bg-surface-alt p-4 lg:static lg:z-auto lg:w-64 lg:shrink-0 lg:self-start lg:overflow-visible lg:rounded-radius lg:border lg:p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
+        class="fixed inset-y-0 left-0 z-40 w-64 overflow-y-auto border-r border-outline bg-surface-alt p-4 lg:sticky lg:top-24 lg:z-auto lg:w-64 lg:shrink-0 lg:self-start lg:overflow-visible lg:rounded-radius lg:border lg:p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
       </aside>
       {% endif %}
 
       <main class="min-w-0 flex-1">
         {% block content %}{% endblock content %}
       </main>
+      </div>
     </div>
 
+    <!-- site footer (Kompress design): brand blurb + Informácie / Účet / Kontakt
+         link columns + copyright bar. Static links; reuses the nav i18n keys. -->
+    <footer class="border-t border-outline bg-surface dark:border-outline-dark dark:bg-surface-dark">
+      <div class="mx-auto grid max-w-7xl grid-cols-2 gap-8 px-4 py-10 md:grid-cols-4 md:px-8">
+        <div class="col-span-2 md:col-span-1">
+          <div class="flex items-center gap-2.5">
+            <span class="inline-flex size-8 items-center justify-center rounded-radius bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="10" y="3" width="4" height="18" rx="1.5"></rect><rect x="3" y="10" width="18" height="4" rx="1.5"></rect></svg>
+            </span>
+            <span class="text-lg font-extrabold tracking-tight text-primary dark:text-primary-dark">{{ t(key="brand", lang=lang | default(value='sk')) }}</span>
+          </div>
+          <p class="mt-3 max-w-xs text-sm leading-relaxed text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="footer-tagline", lang=lang | default(value='sk')) }}</p>
+        </div>
+        <div class="flex flex-col gap-2.5">
+          <div class="text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="footer-info", lang=lang | default(value='sk')) }}</div>
+          <a href="/obchodne-podmienky" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="footer-terms", lang=lang | default(value='sk')) }}</a>
+          <a href="/o-nas" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="footer-about", lang=lang | default(value='sk')) }}</a>
+          <a href="/predajne" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="footer-stores", lang=lang | default(value='sk')) }}</a>
+          <a href="/doprava-a-platba" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="footer-shipping", lang=lang | default(value='sk')) }}</a>
+        </div>
+        <div class="flex flex-col gap-2.5">
+          <div class="text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="footer-account", lang=lang | default(value='sk')) }}</div>
+          {% if logged_in_customer %}
+          <a href="/account/orders" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="footer-orders", lang=lang | default(value='sk')) }}</a>
+          <a href="/account/profile" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="nav-profile", lang=lang | default(value='sk')) }}</a>
+          {% else %}
+          <a href="/login" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</a>
+          <a href="/register" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="nav-register", lang=lang | default(value='sk')) }}</a>
+          {% endif %}
+          <a href="/cart" hx-boost="false" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="cart-title", lang=lang | default(value='sk')) }}</a>
+        </div>
+        <div class="flex flex-col gap-2.5">
+          <div class="text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="footer-contact", lang=lang | default(value='sk')) }}</div>
+          <a href="tel:+421903410476" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="hotline", lang=lang | default(value='sk')) }}</a>
+          <a href="mailto:info@kompress.sk" class="text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">{{ t(key="footer-email", lang=lang | default(value='sk')) }}</a>
+          <span class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="footer-hours", lang=lang | default(value='sk')) }}</span>
+        </div>
+      </div>
+      <div class="border-t border-outline dark:border-outline-dark">
+        <div class="mx-auto max-w-7xl px-4 py-4 text-xs text-on-surface/50 md:px-8 dark:text-on-surface-dark/50">{{ t(key="footer-rights", lang=lang | default(value='sk')) }}</div>
+      </div>
+    </footer>
+
     <!-- toast notifications: fire from anywhere with toast('message').
          Adapted from the vendored Penguin UI component
          (penguinui-components/toast-notification/stacking-toast-notification.html):

assets/views/home/index.html

@@ -3,28 +3,104 @@
 
 {% block title %}{{ t(key="brand", lang=lang | default(value='sk')) }}{% endblock title %}
 
-{% block content %}
-<div class="space-y-12">
-  <!-- hero -->
-  <section class="rounded-radius border border-outline bg-surface-alt px-6 py-12 text-center dark:border-outline-dark dark:bg-surface-dark-alt">
-    <h1 class="text-4xl font-bold tracking-tight text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
-    <p class="mx-auto mt-3 max-w-xl text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
-    <a href="/shop" class="mt-6 inline-flex items-center justify-center rounded-radius bg-primary px-6 py-2.5 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a>
-  </section>
+{% block breadcrumbs %}
+<nav aria-label="breadcrumb" class="mb-5 text-sm">
+  <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
+    {{ ui::crumb_current(label=t(key="nav-home", lang=lang | default(value='sk'))) }}
+  </ol>
+</nav>
+{% endblock breadcrumbs %}
 
-  <!-- featured products -->
-  {% if products | length > 0 %}
-  <section class="space-y-5">
-    <div class="flex items-end justify-between">
-      <h2 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h2>
-      <a href="/shop" class="text-sm font-medium text-primary dark:text-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }} →</a>
-    </div>
-    <div x-data="{ view: 'grid' }" class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
-      {% for product in products %}
-      {% include "shop/_card.html" %}
-      {% endfor %}
-    </div>
-  </section>
-  {% endif %}
+{% block content %}
+{# Home layout adapted from the Kompress design mockup: the left "Kategórie"
+   column is already supplied by base.html's #category-sidebar, so the main
+   area is split into a featured product grid + a right rail (bestsellers /
+   our stores / contact). All colors use the design tokens so light + dark
+   both work; the brand accent is the medical blue set in app.css. #}
+<div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_19rem]">
+
+  <!-- center column -->
+  <div class="flex min-w-0 flex-col gap-6">
+    <!-- hero / heading -->
+    <section>
+      <h1 class="text-3xl font-extrabold tracking-tight text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
+      <p class="mt-2 max-w-2xl text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
+    </section>
+
+    <!-- featured products -->
+    {% if products | length > 0 %}
+    <section class="space-y-4">
+      <div class="flex items-end justify-between">
+        <h2 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</h2>
+        <a href="/shop" class="text-sm font-semibold text-primary dark:text-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }} →</a>
+      </div>
+      <div x-data="{ view: 'grid' }" class="grid grid-cols-2 gap-4 sm:grid-cols-3">
+        {% for product in products %}
+        {% include "shop/_card.html" %}
+        {% endfor %}
+      </div>
+    </section>
+    {% else %}
+    <section class="rounded-radius border border-outline bg-surface-alt px-6 py-16 text-center dark:border-outline-dark dark:bg-surface-dark-alt">
+      <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-empty", lang=lang | default(value='sk')) }}</p>
+      <a href="/shop" class="mt-4 inline-flex items-center justify-center rounded-radius bg-primary px-6 py-2.5 text-sm font-semibold text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a>
+    </section>
+    {% endif %}
+  </div>
+
+  <!-- right rail -->
+  <aside class="flex flex-col gap-5">
+
+    <!-- bestsellers (reuses the featured products) -->
+    {% if products | length > 0 %}
+    <section class="overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt">
+      <h2 class="border-b border-outline px-4 py-3.5 text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:border-outline-dark dark:text-on-surface-dark-strong">Najpredávanejšie</h2>
+      <ol class="p-2">
+        {% for product in products | slice(end=5) %}
+        <li>
+          <a href="/shop/{{ product.slug }}" class="flex items-center gap-3 rounded-radius px-2 py-2 transition hover:bg-primary/5">
+            <span class="inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-xs font-extrabold text-primary dark:bg-primary-dark/15 dark:text-primary-dark">{{ loop.index }}</span>
+            <span class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-md border border-outline bg-surface dark:border-outline-dark dark:bg-surface-dark">
+              {% if product.image %}
+              <img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover">
+              {% else %}
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="text-on-surface/30 dark:text-on-surface-dark/30"><rect x="3" y="4" width="18" height="16" rx="2"></rect><circle cx="8.5" cy="9" r="1.6"></circle><path d="M21 16l-5-5L5 20"></path></svg>
+              {% endif %}
+            </span>
+            <span class="flex min-w-0 flex-col gap-0.5">
+              <span class="line-clamp-2 text-[13px] font-semibold leading-tight text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</span>
+              <span class="text-sm font-extrabold text-primary dark:text-primary-dark">{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ currency_symbol }}</span>
+            </span>
+          </a>
+        </li>
+        {% endfor %}
+      </ol>
+      <a href="/shop" class="block border-t border-outline px-4 py-3 text-center text-[13px] font-semibold text-primary transition hover:bg-primary/5 dark:border-outline-dark dark:text-primary-dark">Všetko najpredávanejšie ›</a>
+    </section>
+    {% endif %}
+
+    <!-- our stores (static) -->
+    <section class="overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt">
+      <h2 class="border-b border-outline px-4 py-3.5 text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:border-outline-dark dark:text-on-surface-dark-strong">Naše obchody</h2>
+      <div class="p-3.5">
+        <div class="flex h-28 items-center justify-center rounded-radius border border-outline bg-surface text-sm text-on-surface/50 dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark/40">Foto predajne</div>
+        <a href="/predajne" class="mt-3 inline-block text-sm font-bold text-primary transition hover:underline dark:text-primary-dark">Objaviť naše obchody ›</a>
+      </div>
+    </section>
+
+    <!-- contact CTA (static, brand blue) -->
+    <section class="overflow-hidden rounded-radius bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
+      <div class="p-5">
+        <div class="text-xs font-bold uppercase tracking-wider opacity-80">Kontaktujte nás</div>
+        <p class="mt-2.5 text-sm leading-relaxed opacity-90">Naša horúca linka je dostupná 24/7. Radi vám poradíme s výberom.</p>
+        <a href="tel:+421903410476" class="mt-3.5 flex items-center gap-2.5 text-xl font-extrabold tracking-tight">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"></path></svg>
+          +421 903 410 476
+        </a>
+        <a href="tel:+421903410476" class="mt-3.5 block w-full rounded-radius bg-surface px-4 py-3 text-center text-sm font-bold text-primary transition hover:opacity-90 dark:bg-surface-dark dark:text-primary-dark">Kontaktujte hotline</a>
+      </div>
+    </section>
+
+  </aside>
 </div>
 {% endblock content %}

assets/views/macros/ui.html

@@ -267,3 +267,42 @@ border-t border-outline dark:border-outline-dark
 {%- endif -%}
 <a href="{{ href }}"{% if data_nav %} data-nav="{{ data_nav }}"{% endif %} class="text-sm font-medium underline-offset-2 transition focus:outline-hidden focus-visible:underline {{ c }}" {{ attrs | safe }}>{{ label }}</a>
 {%- endmacro nav_link %}
+
+{# Breadcrumbs (Kompress design: chevron separators). Build a trail by emitting
+   one ui::crumb(label, href) per ancestor and a final ui::crumb_current(label)
+   for the active page, all inside <nav><ol>…</ol></nav>:
+
+     <nav aria-label="breadcrumb" class="text-sm">
+       <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
+         {{ ui::crumb(label="Domov", href="/") }}
+         {{ ui::crumb(label="Obchod", href="/shop") }}
+         {{ ui::crumb_current(label=category.name) }}
+       </ol>
+     </nav>
+
+   Adapted from penguinui/breadcrumbs/breadcrumb-with-chevron.html. #}
+{% macro crumb(label, href) -%}
+<li class="flex items-center gap-1.5">
+  <a href="{{ href }}" class="transition hover:text-primary dark:hover:text-primary-dark">{{ label }}</a>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3.5 shrink-0 text-on-surface/30 dark:text-on-surface-dark/30" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
+</li>
+{%- endmacro crumb %}
+
+{% macro crumb_current(label) -%}
+<li class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong" aria-current="page">{{ label }}</li>
+{%- endmacro crumb_current %}
+
+{# Title for the static info pages (controllers/pages.rs → pages/info.html),
+   resolved from the `page` slug. Lives in a macro because a child template's
+   top-level {% set %} isn't visible inside its {% block %}s under `extends`;
+   the macro can be called from both the title and content blocks. #}
+{% macro page_title(page, lang) -%}
+{%- if page == "contact" -%}{{ t(key="top-contact", lang=lang) }}
+{%- elif page == "sitemap" -%}{{ t(key="top-sitemap", lang=lang) }}
+{%- elif page == "terms" -%}{{ t(key="footer-terms", lang=lang) }}
+{%- elif page == "about" -%}{{ t(key="footer-about", lang=lang) }}
+{%- elif page == "stores" -%}{{ t(key="footer-stores", lang=lang) }}
+{%- elif page == "shipping" -%}{{ t(key="footer-shipping", lang=lang) }}
+{%- else -%}{{ t(key="brand", lang=lang) }}
+{%- endif -%}
+{%- endmacro page_title %}

assets/views/pages/info.html

@@ -0,0 +1,70 @@
+{% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
+
+{# Static info pages (contact / sitemap / terms / about / stores / shipping).
+   One template switches title + body on the `page` slug passed by
+   controllers/pages.rs. Titles reuse the existing top-/footer- i18n keys. #}
+{% block title %}{{ ui::page_title(page=page, lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block breadcrumbs %}
+{% set L = lang | default(value='sk') %}
+<nav aria-label="breadcrumb" class="mb-5 text-sm">
+  <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
+    {{ ui::crumb(label=t(key="nav-home", lang=L), href="/") }}
+    {{ ui::crumb_current(label=ui::page_title(page=page, lang=L)) }}
+  </ol>
+</nav>
+{% endblock breadcrumbs %}
+
+{% block content %}
+{% set L = lang | default(value='sk') %}
+{% set title = ui::page_title(page=page, lang=L) %}
+<div class="mx-auto max-w-3xl space-y-6">
+  <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ title }}</h1>
+
+  {% if page == "contact" %}
+  <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="page-contact-intro", lang=L) }}</p>
+  <div class="grid gap-3 sm:grid-cols-3">
+    <div class="rounded-radius border border-outline bg-surface-alt p-4 dark:border-outline-dark dark:bg-surface-dark-alt">
+      <div class="text-xs font-semibold uppercase tracking-wide text-on-surface/50 dark:text-on-surface-dark/50">{{ t(key="top-contact", lang=L) }}</div>
+      <a href="tel:+421903410476" class="mt-1 block text-lg font-bold text-primary dark:text-primary-dark">{{ t(key="hotline", lang=L) }}</a>
+    </div>
+    <div class="rounded-radius border border-outline bg-surface-alt p-4 dark:border-outline-dark dark:bg-surface-dark-alt">
+      <div class="text-xs font-semibold uppercase tracking-wide text-on-surface/50 dark:text-on-surface-dark/50">E-mail</div>
+      <a href="mailto:info@kompress.sk" class="mt-1 block font-semibold text-primary dark:text-primary-dark">{{ t(key="footer-email", lang=L) }}</a>
+    </div>
+    <div class="rounded-radius border border-outline bg-surface-alt p-4 dark:border-outline-dark dark:bg-surface-dark-alt">
+      <div class="text-xs font-semibold uppercase tracking-wide text-on-surface/50 dark:text-on-surface-dark/50">{{ t(key="footer-hours", lang=L) }}</div>
+      <div class="mt-1 font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="footer-hours", lang=L) }}</div>
+    </div>
+  </div>
+
+  {% elif page == "sitemap" %}
+  <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="page-sitemap-intro", lang=L) }}</p>
+  <ul class="grid gap-2 sm:grid-cols-2">
+    <li><a href="/" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="nav-home", lang=L) }}</a></li>
+    <li><a href="/shop" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="nav-shop", lang=L) }}</a></li>
+    <li><a href="/cart" hx-boost="false" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="cart-title", lang=L) }}</a></li>
+    <li><a href="/kontakt" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="top-contact", lang=L) }}</a></li>
+    <li><a href="/o-nas" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="footer-about", lang=L) }}</a></li>
+    <li><a href="/predajne" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="footer-stores", lang=L) }}</a></li>
+    <li><a href="/doprava-a-platba" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="footer-shipping", lang=L) }}</a></li>
+    <li><a href="/obchodne-podmienky" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="footer-terms", lang=L) }}</a></li>
+    {% if logged_in_customer %}
+    <li><a href="/account/orders" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="footer-orders", lang=L) }}</a></li>
+    {% else %}
+    <li><a href="/login" class="text-primary transition hover:underline dark:text-primary-dark">{{ t(key="nav-login", lang=L) }}</a></li>
+    {% endif %}
+  </ul>
+
+  {% else %}
+  <div class="rounded-radius border border-outline bg-surface-alt p-6 text-on-surface/70 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/70">
+    <p>{{ t(key="page-coming-soon", lang=L) }}</p>
+    <div class="mt-4 flex flex-wrap gap-4 text-sm">
+      <a href="tel:+421903410476" class="font-semibold text-primary dark:text-primary-dark">{{ t(key="hotline", lang=L) }}</a>
+      <a href="mailto:info@kompress.sk" class="font-semibold text-primary dark:text-primary-dark">{{ t(key="footer-email", lang=L) }}</a>
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock content %}

assets/views/partials/profile_menu.html

@@ -30,7 +30,7 @@
     x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true"
     aria-label="{{ t(key='nav-account', lang=lang | default(value='sk')) }}"
     class="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-sm font-bold tracking-wider text-on-primary/90 transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90 dark:focus-visible:outline-primary-dark">
-    {%- if _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
+    {%- if customer_avatar %}<img src="/images/{{ customer_avatar }}" alt="{{ _name }}" class="size-full object-cover">{% elif _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
   </button>
   <!-- Dropdown Menu (positioned like the settings cog: right-0 mt-2) -->
   <div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard"
@@ -40,7 +40,7 @@
     <!-- header: avatar + name + account type -->
     <div class="flex items-center gap-3 px-4 py-2.5">
       <span class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-base font-bold tracking-wider text-on-primary/90 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90">
-        {%- if _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
+        {%- if customer_avatar %}<img src="/images/{{ customer_avatar }}" alt="{{ _name }}" class="size-full object-cover">{% elif _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
       </span>
       <div class="flex min-w-0 flex-col">
         <span class="truncate text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ _name }}</span>

assets/views/shop/_card.html

@@ -16,8 +16,11 @@
   <a href="/shop/{{ product.slug }}" class="flex min-w-0 flex-1"
     :class="view === 'list' ? 'flex-row' : 'flex-col'">
     <!-- Image -->
-    <div class="overflow-hidden bg-surface-alt dark:bg-surface-dark"
+    <div class="relative overflow-hidden bg-surface-alt dark:bg-surface-dark"
       :class="view === 'list' ? 'size-28 shrink-0 sm:size-40' : 'h-44 md:h-64'">
+      {% if product.on_sale and product.percent_off > 0 %}
+      <span class="absolute left-2 top-2 z-10 rounded-full bg-danger px-2 py-0.5 text-[11px] font-bold text-on-danger shadow-sm">−{{ product.percent_off }} %</span>
+      {% endif %}
       {% if product.image %}
       <img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover transition duration-700 ease-out group-hover:scale-105">
       {% endif %}
@@ -44,6 +47,18 @@
       {% else %}
       <span class="break-words text-xl"><span class="sr-only">Price</span>{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ currency_symbol }}</span>
       {% endif %}
+      <!-- stock pill (Kompress design): green "in stock" / red "sold out" -->
+      <div class="mt-0.5">
+        {% if product.in_stock %}
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-success/10 px-2 py-0.5 text-xs font-semibold text-success">
+          <span class="size-1.5 rounded-full bg-success" aria-hidden="true"></span>{{ t(key="in-stock", lang=lang | default(value='sk')) }}
+        </span>
+        {% else %}
+        <span class="inline-flex items-center gap-1.5 rounded-full bg-danger/10 px-2 py-0.5 text-xs font-semibold text-danger">
+          <span class="size-1.5 rounded-full bg-danger" aria-hidden="true"></span>{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}
+        </span>
+        {% endif %}
+      </div>
     </div>
   </a>
   <div class="flex flex-col gap-2"

assets/views/shop/_product_grid.html

@@ -1,39 +1,9 @@
-{# Product collection with a grid / list view toggle.
-   The chosen view is held in Alpine and persisted to localStorage so it
-   survives navigation; `_card.html` reads the same `view` state to switch
-   its own layout between a vertical card and a horizontal row. #}
-<div x-data="{ view: localStorage.getItem('shopView') === 'list' ? 'list' : 'grid' }"
-  x-init="$watch('view', v => localStorage.setItem('shopView', v))"
-  class="space-y-4">
-  <!-- View toggle -->
-  <div class="flex justify-end">
-    <div class="inline-flex gap-0.5 rounded-radius border border-outline p-0.5 dark:border-outline-dark" role="group"
-      aria-label="{{ t(key='view-grid', lang=lang | default(value='sk')) }} / {{ t(key='view-list', lang=lang | default(value='sk')) }}">
-      <button type="button" @click="view = 'grid'" :aria-pressed="view === 'grid'"
-        class="inline-flex size-8 items-center justify-center rounded-radius transition"
-        :class="view === 'grid' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
-        aria-label="{{ t(key='view-grid', lang=lang | default(value='sk')) }}"
-        title="{{ t(key='view-grid', lang=lang | default(value='sk')) }}">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
-          <path d="M3 3h6v6H3V3Zm8 0h6v6h-6V3ZM3 11h6v6H3v-6Zm8 0h6v6h-6v-6Z" />
-        </svg>
-      </button>
-      <button type="button" @click="view = 'list'" :aria-pressed="view === 'list'"
-        class="inline-flex size-8 items-center justify-center rounded-radius transition"
-        :class="view === 'list' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
-        aria-label="{{ t(key='view-list', lang=lang | default(value='sk')) }}"
-        title="{{ t(key='view-list', lang=lang | default(value='sk')) }}">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
-          <path d="M3 4h14v2.5H3V4Zm0 4.75h14v2.5H3v-2.5ZM3 13.5h14V16H3v-2.5Z" />
-        </svg>
-      </button>
-    </div>
-  </div>
-
-  <!-- Products -->
-  <div :class="view === 'list' ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-5 sm:grid-cols-3 xl:grid-cols-4'">
-    {% for product in products %}
-    {% include "shop/_card.html" %}
-    {% endfor %}
-  </div>
+{# Product collection. The grid / list `view` state is provided by the Alpine
+   wrapper in _search.html (it persists across htmx swaps and is shared with the
+   sort + view-toggle row); `_card.html` reads the same `view` to switch its own
+   layout between a vertical card and a horizontal row. #}
+<div :class="view === 'list' ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-5 sm:grid-cols-3 xl:grid-cols-4'">
+  {% for product in products %}
+  {% include "shop/_card.html" %}
+  {% endfor %}
 </div>

assets/views/shop/_results.html

@@ -2,10 +2,22 @@
    server-side on first load. Holds the result summary, the product grid and
    pagination. #}
 {% set L = lang | default(value='sk') %}
+{# On htmx responses the toolbar's Sort dropdown isn't in this swapped region;
+   re-render it out-of-band so a search-triggered "newest → relevance" switch is
+   reflected in the visible selection. #}
+{% if is_fragment | default(value=false) %}{% set oob = true %}{% include "shop/_sort_select.html" %}{% endif %}
 <div class="space-y-4">
-  <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70" aria-live="polite">
-    {{ t(key="results-count", lang=L, count=total) }}{% if query and query != "" %} · “{{ query }}”{% endif %}
-  </p>
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70" aria-live="polite">
+      {{ t(key="results-count", lang=L, count=total) }}{% if query and query != "" %} · “{{ query }}”{% endif %}
+    </p>
+    {% if query_base and query_base != "" %}
+    <a href="/shop" hx-get="/search" hx-target="#shop-results" hx-push-url="true"
+      class="text-sm font-medium text-on-surface/70 underline-offset-2 transition hover:text-primary hover:underline dark:text-on-surface-dark/70 dark:hover:text-primary-dark">
+      {{ t(key="filter-clear", lang=L) }}
+    </a>
+    {% endif %}
+  </div>
 
   {% if products | length > 0 %}
   {% include "shop/_product_grid.html" %}

assets/views/shop/_search.html

@@ -1,97 +1,121 @@
-{# Shared storefront search + filter toolbar and results region, used by the shop
-   index and every category page. One form drives the whole listing: htmx re-runs
-   /search and swaps only #shop-results; the toolbar keeps its own DOM state.
-   Triggers: live (debounced) typing in the search box, immediate on any
-   select/checkbox change, and submit (Enter / Apply) for the price band. Degrades
-   to a plain GET form without JS.
-   Expects: query, category_groups, selected_category, selected_category_id,
-   uncategorized_count, sort, min_price, max_price, price_floor, price_ceil,
-   in_stock, plus the result vars consumed by _results.html. #}
+{# Shared storefront search box + results region, used by the shop index and
+   every category page. One form drives the listing: htmx re-runs /search and
+   swaps only #shop-results; the toolbar keeps its own DOM state. Triggers: live
+   (debounced) typing in the search box, immediate on a sort change, and submit
+   (Enter). Degrades to a plain GET form without JS.
+   Category is chosen from the sidebar (carried here as a hidden field so it
+   survives a search / re-sort). The grid/list view toggle lives next to sort;
+   its `view` state is held in Alpine on this wrapper so both the toggle and the
+   swapped-in product grid (and `_card.html`) share it.
+   Expects: query, selected_category, sort, plus the result vars consumed by
+   _results.html. #}
 {% set L = lang | default(value='sk') %}
-<div class="space-y-6">
+<div x-data="{ view: localStorage.getItem('shopView') === 'list' ? 'list' : 'grid' }"
+  x-init="$watch('view', v => localStorage.setItem('shopView', v))"
+  class="space-y-6">
   <form action="/search" method="get" role="search"
     hx-get="/search" hx-target="#shop-results" hx-swap="innerHTML"
     hx-push-url="true" hx-indicator="#search-spinner"
-    hx-trigger="submit, change, keyup changed delay:350ms from:input[name='q']"
+    {# The text query runs only on submit (Enter / the Search button); the
+       sort / per-page / in-stock controls still apply immediately on change. #}
+    hx-trigger="submit, change from:select, change from:input[type='checkbox']"
     class="space-y-3">
 
+    {# Category comes from the sidebar; keep it on the query so searching /
+       re-sorting stays within the active category. #}
+    <input type="hidden" name="category" value="{{ selected_category | default(value='all') }}" />
+
     <!-- search box -->
-    <div class="relative max-w-xl">
-      <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
-        {{ ui::icon(name="search", size="size-5") }}
-      </span>
-      <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
-        placeholder="{{ t(key='search-placeholder', lang=L) }}"
-        aria-label="{{ t(key='search-placeholder', lang=L) }}"
-        class="w-full rounded-radius border border-outline bg-surface py-2 pl-10 pr-10 text-sm text-on-surface placeholder:text-on-surface/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50 dark:focus-visible:outline-primary-dark" />
-      <span id="search-spinner" class="htmx-indicator pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-on-surface/50 dark:text-on-surface-dark/50">
-        <svg class="size-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4Z"></path>
-        </svg>
-      </span>
+    <div class="flex max-w-xl gap-2">
+      <div class="relative flex-1">
+        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
+          {{ ui::icon(name="search", size="size-5") }}
+        </span>
+        <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
+          placeholder="{{ t(key='search-placeholder', lang=L) }}"
+          aria-label="{{ t(key='search-placeholder', lang=L) }}"
+          class="w-full rounded-radius border border-outline bg-surface py-2 pl-10 pr-10 text-sm text-on-surface placeholder:text-on-surface/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50 dark:focus-visible:outline-primary-dark" />
+        <span id="search-spinner" class="htmx-indicator pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-on-surface/50 dark:text-on-surface-dark/50">
+          <svg class="size-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4Z"></path>
+          </svg>
+        </span>
+      </div>
+      <button type="submit" class="shrink-0 rounded-radius bg-primary px-5 text-sm font-bold text-on-primary transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
+        {{ t(key="search-button", lang=L) }}
+      </button>
     </div>
 
-    <!-- filter toolbar -->
-    <div class="flex flex-wrap items-end gap-3 rounded-radius border border-outline bg-surface-alt p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
-      <!-- category -->
-      <label class="flex flex-col gap-1 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
-        {{ t(key="filter-category", lang=L) }}
-        <select name="category"
-          class="rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
-          <option value="all"{% if selected_category == "all" %} selected{% endif %}>{{ t(key="filter-all-categories", lang=L) }}</option>
-          {% for g in category_groups %}
-          <option value="{{ g.id }}"{% if selected_category_id == g.id %} selected{% endif %}>{{ g.name }} ({{ g.count }})</option>
-          {% for ch in g.children %}
-          <option value="{{ ch.id }}"{% if selected_category_id == ch.id %} selected{% endif %}>&nbsp;&nbsp;— {{ ch.name }} ({{ ch.count }})</option>
-          {% endfor %}
-          {% endfor %}
-          {% if uncategorized_count > 0 %}
-          <option value="none"{% if selected_category == "none" %} selected{% endif %}>{{ t(key="filter-uncategorized", lang=L) }} ({{ uncategorized_count }})</option>
-          {% endif %}
-        </select>
-      </label>
+    {# Scope indicator: when a category is active, make clear the search is
+       limited to it (not the whole shop), with a one-click escape to search
+       everything. Category only changes via full navigation (the sidebar), so
+       this stays accurate across the toolbar's results-only htmx swaps. #}
+    {% if selected_category and selected_category != "all" %}
+    {# set_global so the value survives the nested if (a plain `set` inside a
+       block is scoped to that block in Tera and wouldn't be visible below). #}
+    {% set_global _scope = selected_category_name | default(value="") %}
+    {% if selected_category == "none" %}{% set_global _scope = t(key="uncategorized", lang=L) %}{% endif %}
+    {% if _scope %}
+    <div class="flex max-w-xl flex-wrap items-center gap-2 text-xs">
+      <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 font-medium text-primary dark:bg-primary-dark/15 dark:text-primary-dark">
+        {{ ui::icon(name="search", size="size-3.5", extra="shrink-0") }}
+        {{ t(key="search-scope-in", lang=L) }} <span class="font-semibold">{{ _scope }}</span>
+      </span>
+      <a href="/search{% if query %}?q={{ query | urlencode }}{% endif %}"
+        class="font-medium text-on-surface/60 underline-offset-2 hover:text-primary hover:underline dark:text-on-surface-dark/60 dark:hover:text-primary-dark">
+        {{ t(key="search-scope-all", lang=L) }}
+      </a>
+    </div>
+    {% endif %}
+    {% endif %}
 
-      <!-- sort -->
-      <label class="flex flex-col gap-1 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
+    <!-- sort + product card style switch -->
+    <div class="flex flex-wrap items-center justify-end gap-3">
+      <label class="flex items-center gap-2 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
         {{ t(key="sort-label", lang=L) }}
-        <select name="sort"
+        {% include "shop/_sort_select.html" %}
+      </label>
+
+      <!-- per-page count -->
+      <label class="flex items-center gap-2 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
+        {{ t(key="per-page-label", lang=L) }}
+        <select name="per_page"
           class="rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
-          {% for opt in ["newest", "relevance", "price_asc", "price_desc", "name_asc", "name_desc"] %}
-          <option value="{{ opt }}"{% if sort == opt %} selected{% endif %}>{{ t(key="sort-" ~ opt, lang=L) }}</option>
+          {% for opt in per_page_options %}
+          <option value="{{ opt }}"{% if per_page == opt %} selected{% endif %}>{{ opt }}</option>
           {% endfor %}
         </select>
       </label>
 
-      <!-- price band -->
-      <label class="flex flex-col gap-1 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
-        {{ t(key="filter-price", lang=L) }}{% if currency_symbol %} ({{ currency_symbol }}){% endif %}
-        <span class="flex items-center gap-1">
-          <input type="number" name="min_price" min="0" step="0.01" inputmode="decimal"
-            value="{{ min_price | default(value='') }}" placeholder="{{ price_floor }}"
-            aria-label="{{ t(key='filter-price-from', lang=L) }}"
-            class="w-24 rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark" />
-          <span class="text-on-surface/50 dark:text-on-surface-dark/50">–</span>
-          <input type="number" name="max_price" min="0" step="0.01" inputmode="decimal"
-            value="{{ max_price | default(value='') }}" placeholder="{{ price_ceil }}"
-            aria-label="{{ t(key='filter-price-to', lang=L) }}"
-            class="w-24 rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark" />
-        </span>
-      </label>
-
-      <!-- in stock -->
-      <label class="flex items-center gap-2 pb-1.5 text-sm text-on-surface dark:text-on-surface-dark">
+      <!-- in stock only -->
+      <label class="flex items-center gap-2 text-sm text-on-surface dark:text-on-surface-dark">
         <input type="checkbox" name="in_stock" value="1"{% if in_stock %} checked{% endif %}
           class="size-4 rounded border-outline text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:text-primary-dark" />
         {{ t(key="filter-in-stock", lang=L) }}
       </label>
 
-      <div class="ml-auto flex items-end gap-2">
-        {{ ui::button(label=t(key="filter-apply", lang=L), type="submit", variant="secondary") }}
-        <a href="/shop" hx-get="/search" hx-target="#shop-results" hx-push-url="true"
-          class="self-end pb-1.5 text-sm font-medium text-on-surface/70 underline-offset-2 transition hover:text-primary hover:underline dark:text-on-surface-dark/70 dark:hover:text-primary-dark">
-          {{ t(key="filter-clear", lang=L) }}
-        </a>
+      <!-- grid / list view toggle -->
+      <div class="inline-flex gap-0.5 rounded-radius border border-outline p-0.5 dark:border-outline-dark" role="group"
+        aria-label="{{ t(key='view-grid', lang=L) }} / {{ t(key='view-list', lang=L) }}">
+        <button type="button" @click="view = 'grid'" :aria-pressed="view === 'grid'"
+          class="inline-flex size-8 items-center justify-center rounded-radius transition"
+          :class="view === 'grid' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
+          aria-label="{{ t(key='view-grid', lang=L) }}"
+          title="{{ t(key='view-grid', lang=L) }}">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
+            <path d="M3 3h6v6H3V3Zm8 0h6v6h-6V3ZM3 11h6v6H3v-6Zm8 0h6v6h-6v-6Z" />
+          </svg>
+        </button>
+        <button type="button" @click="view = 'list'" :aria-pressed="view === 'list'"
+          class="inline-flex size-8 items-center justify-center rounded-radius transition"
+          :class="view === 'list' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
+          aria-label="{{ t(key='view-list', lang=L) }}"
+          title="{{ t(key='view-list', lang=L) }}">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
+            <path d="M3 4h14v2.5H3V4Zm0 4.75h14v2.5H3v-2.5ZM3 13.5h14V16H3v-2.5Z" />
+          </svg>
+        </button>
       </div>
     </div>
   </form>

assets/views/shop/_sidebar.html

@@ -60,3 +60,19 @@
 {% if category_groups | length == 0 %}
 <p class="px-2 py-2 text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="shop-empty", lang=lang | default(value='sk')) }}</p>
 {% endif %}
+
+{# "Informácie" card (Kompress design): static info links below the category
+   tree, separated by a divider. Targets are placeholders (#) until real pages
+   exist; labels reuse the footer-* i18n keys. #}
+<div class="mt-4 border-t border-outline pt-3 dark:border-outline-dark">
+  <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
+    {{ t(key="footer-info", lang=lang | default(value='sk')) }}
+  </p>
+  {% set L = lang | default(value='sk') %}
+  <div class="flex flex-col gap-0.5">
+    <a href="/obchodne-podmienky" class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">{{ t(key="footer-terms", lang=L) }}</a>
+    <a href="/o-nas" class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">{{ t(key="footer-about", lang=L) }}</a>
+    <a href="/predajne" class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">{{ t(key="footer-stores", lang=L) }}</a>
+    <a href="/doprava-a-platba" class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">{{ t(key="footer-shipping", lang=L) }}</a>
+  </div>
+</div>

assets/views/shop/_sort_select.html

@@ -0,0 +1,12 @@
+{# Sort dropdown, shared by the toolbar (in the search form) and the results
+   fragment. A search promotes the default "newest" to "relevance" server-side,
+   but the toolbar select lives outside the swapped #shop-results region — so on
+   htmx responses _results.html re-renders this with `oob = true` (hx-swap-oob)
+   to keep the visible selection in sync with the actual ordering. #}
+{% set L = lang | default(value='sk') %}
+<select id="sort-select" name="sort"{% if oob | default(value=false) %} hx-swap-oob="true"{% endif %}
+  class="rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+  {% for opt in ["newest", "relevance", "price_asc", "price_desc", "name_asc", "name_desc"] %}
+  <option value="{{ opt }}"{% if sort == opt %} selected{% endif %}>{{ t(key="sort-" ~ opt, lang=L) }}</option>
+  {% endfor %}
+</select>

assets/views/shop/category.html

@@ -3,19 +3,24 @@
 
 {% block title %}{{ category.name }}{% endblock title %}
 
+{% block breadcrumbs %}
+{% set L = lang | default(value='sk') %}
+<nav aria-label="breadcrumb" class="mb-5 text-sm">
+  <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
+    {{ ui::crumb(label=t(key="nav-home", lang=L), href="/") }}
+    {{ ui::crumb(label=t(key="nav-shop", lang=L), href="/shop") }}
+    {% for crumb in breadcrumbs %}
+    {{ ui::crumb(label=crumb.name, href="/category/" ~ crumb.slug) }}
+    {% endfor %}
+    {{ ui::crumb_current(label=category.name) }}
+  </ol>
+</nav>
+{% endblock breadcrumbs %}
+
 {% block content %}
 {% set L = lang | default(value='sk') %}
 <div class="space-y-6">
   <header class="space-y-2">
-    <nav class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">
-      <a href="/shop" class="hover:text-primary dark:hover:text-primary-dark">{{ t(key="nav-shop", lang=L) }}</a>
-      {% for crumb in breadcrumbs %}
-      <span class="px-1">/</span>
-      <a href="/category/{{ crumb.slug }}" class="hover:text-primary dark:hover:text-primary-dark">{{ crumb.name }}</a>
-      {% endfor %}
-      <span class="px-1">/</span>
-      <span>{{ category.name }}</span>
-    </nav>
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ category.name }}</h1>
     {% if category.description %}<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ category.description }}</p>{% endif %}
 

assets/views/shop/index.html

@@ -3,6 +3,16 @@
 
 {% block title %}{{ t(key="nav-shop", lang=lang | default(value='sk')) }}{% endblock title %}
 
+{% block breadcrumbs %}
+{% set L = lang | default(value='sk') %}
+<nav aria-label="breadcrumb" class="mb-5 text-sm">
+  <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
+    {{ ui::crumb(label=t(key="nav-home", lang=L), href="/") }}
+    {{ ui::crumb_current(label=t(key="nav-shop", lang=L)) }}
+  </ol>
+</nav>
+{% endblock breadcrumbs %}
+
 {% block content %}
 {% set L = lang | default(value='sk') %}
 <div class="space-y-6">

design-parity.md

@@ -0,0 +1,184 @@
+# Design parity — Kompress mockup vs current storefront
+
+Tracks the gap between the imported Claude Design mockup (`Kompress-eshop.html`,
+project `eshop` on claude.ai/design) and the live storefront. The home page body
+(featured grid + right rail) and the medical‑blue accent are **done**; this file
+lists everything else from the mockup that is still missing or only half‑wired, so
+it can be picked up incrementally.
+
+Constraints for all items: **htmx + Alpine + PenguinUI + Tailwind tokens only.**
+Express colors with the existing design tokens (`bg-primary`, `bg-surface-alt`,
+`border-outline`, `dark:*` …) — never inline hex — so light **and** dark both work.
+PenguinUI is copy‑paste: lift markup out of `penguinui-components/<name>/…`
+(read‑only, never `{% include %}`'d) and adapt at the use‑site.
+
+Legend: 🟢 backend already exists, only UI missing · 🟡 partial · 🔴 net‑new.
+
+---
+
+## A. Global chrome (`assets/views/base.html`)
+
+These affect every page, so they live in `base.html`, not the home template.
+
+> **✅ Implemented (pass 2)** — A1–A6 are now built in `base.html`, with i18n keys
+> added to `assets/i18n/{sk,en}/main.ftl` (`top-contact`, `search-button`,
+> `welcome`, `brand-subtitle`, `footer-*`, `hotline`, …). Verified: `/`, `/shop`,
+> `/login`, `/register`, `/cart`, `/search?q=` all 200, no render errors.
+> The `Kontakt` / `Mapa stránky` top-bar links and the footer info links point to
+> `#` until real pages exist.
+
+### A1. Top utility bar — ✅ done
+Mockup: thin white bar above the header, right‑aligned links *Kontakt* · *Mapa
+stránky*.
+- New `<div>` strip at the very top of `base.html`, `border-b border-outline
+  bg-surface text-xs text-on-surface/70`.
+- Links to a future `/kontakt` and `/sitemap` (or existing pages).
+- Low effort, no backend.
+
+### A2. In‑header search bar — ✅ done
+Mockup: full‑width search input with a magnifier icon + blue **Hľadať** submit
+button, centered in the header.
+- **Backend already exists**: `GET /search` (`src/controllers/shop.rs:353`,
+  `run_search` at `:90`, fragment `assets/views/shop/_search.html`). Just needs a
+  header form: `<form action="/search" method="get">` with `name="q"`, optionally
+  `hx-get="/search" hx-trigger="keyup changed delay:300ms"` for live results.
+- Copy markup from `penguinui-components/navbar/with-search.html` and/or
+  `penguinui-components/text-input/search-input.html`.
+- Medium effort — mostly wiring the existing endpoint into the header layout.
+
+### A3. Logo lockup with subtitle — ✅ done
+Mockup: rounded blue tile with a "+" cross glyph + **KOMPRESS** + uppercase
+subtitle *zdravotnícke potreby*.
+- Current logo is a plain text wordmark in `base.html`. Add the icon tile
+  (`bg-primary text-on-primary`, `rounded-radius`) and the muted subtitle line.
+- Cross SVG is in the mockup (two rounded `<rect>`s). Low effort.
+
+### A4. Account button (two‑line) — ✅ done
+Mockup: person icon + stacked *Vitajte* / *Prihláste sa* (or the customer name when
+logged in).
+- Logged‑in/out state already available via `logged_in_customer` /
+  `customer_name` and the existing `partials/profile_menu.html`.
+- Restyle the login link / profile menu trigger into the two‑line button. Low effort.
+
+### A5. Cart button with text label — ✅ done
+Mockup: cart icon + red count badge + stacked *Košík* / *N produktov* label.
+- The icon + cookie‑driven badge already exist in `base.html` (`cartCount()` JS).
+  Add the text label beside it; pluralize "produkt/produkty/produktov" (mirror the
+  mockup's `plural()` helper, or add an i18n key).
+- Low effort.
+
+### A6. Footer — ✅ done
+Mockup: 4‑column footer (brand blurb · Informácie · Účet · Kontakt) + copyright bar.
+- **No footer exists anywhere** (`grep "<footer"` → none). Add once to `base.html`
+  after `<main>`.
+- Static links; reuse the same i18n keys as the nav. Low effort, high visual payoff.
+
+---
+
+## B. Listing layout (`shop/category.html`, `shop/_product_grid.html`)
+
+The mockup's body is really a **category/listing** layout. The home page borrows its
+look; the real listing pages should adopt the rest.
+
+> **✅ Implemented (pass 3)** — reusable `ui::crumb` / `ui::crumb_current` chevron
+> breadcrumb macros (`assets/views/macros/ui.html`), wired into `home/index.html`
+> (Domov), `shop/index.html` (Domov › Obchod) and restyled on `shop/category.html`
+> (Domov › Obchod › … › category). Added the sidebar **Informácie** card to
+> `shop/_sidebar.html`. While verifying, confirmed **B3 sort**, **B4 view toggle**
+> and **C1 collapsible tree** were already built — only styling polish remains.
+> Verified: `/`, `/shop`, `/partials/categories`, `/search?q=` all 200, no errors.
+
+### B1. Breadcrumbs — ✅ done
+Mockup: *Domov › Zdravotnícke › {kategória}* with chevron separators.
+- **Already implemented** on category pages: `breadcrumbs` loop in
+  `assets/views/shop/category.html:12`. Just needs the mockup's chevron styling and
+  to be surfaced on more pages (e.g. product detail, optionally a "Domov" crumb on
+  home).
+- Copy from `penguinui-components/breadcrumbs/breadcrumb-with-chevron.html`.
+- Low effort (restyle existing).
+
+### B2. Category banner card — 🔴
+Mockup: white card with a 148px image placeholder + category description paragraph +
+**Viac ›** link, shown above the product list.
+- Per‑category copy/image. Needs a `description` (and optional banner image) field on
+  the category model, or static copy keyed by slug for now.
+- Render as the app card idiom (`border border-outline bg-surface-alt dark:…`).
+- Medium effort (model field) or low (static placeholder first).
+
+### B3. Sort control ("Zoradiť podľa") — ✅ already in toolbar
+Mockup: styled `<select>` — Predvolené / Cena ↑ / Cena ↓ / Názov A–Z /
+Najpredávanejšie.
+- **Backend already exists**: `sort` query param (`src/controllers/shop.rs:41,81,
+  179‑181`). Needs the styled select wired to it (`hx-get` on `change`, preserving
+  the query + filters via the existing `build_query` helper at `shop.rs:63`).
+- Copy from `penguinui-components/select/default-select.html`.
+- Low effort.
+
+### B4. View grid/list toggle — 🟢 (done elsewhere)
+- **Already implemented** in `assets/views/shop/_product_grid.html` (Alpine `view`
+  state, persisted to `localStorage`). The mockup's toggle is the same idea; just
+  align the icon/segmented‑button styling with the mockup. Cosmetic only.
+
+### B5. "Porovnať" (compare) — 🔴
+Mockup: a *Porovnať* button in the listing toolbar.
+- **No compare feature exists.** Net‑new: select‑to‑compare state (Alpine + a cookie
+  or server list) and a compare view. Largest item here — defer unless wanted.
+
+### B6. List‑view product card — ✅ done
+Mockup list rows are richer (left thumbnail, description, stock pill, price block,
+add/options/out‑of‑stock button on the right).
+- `shop/_card.html` already has a `view === 'list'` horizontal layout. Close already;
+  optionally add the stock pill (*Skladom* / *Vypredané*) and discount badge to match.
+- Low effort.
+
+---
+
+## C. Left sidebar (`assets/views/partials/categories.html` via `/partials/categories`)
+
+Mockup left column = two white cards: a collapsible **Kategórie** tree and an
+**Informácie** links card. base.html already renders `#category-sidebar` from
+`/partials/categories`, so this is a restyle of that partial.
+
+### C1. Collapsible category tree — ✅ already implemented
+Mockup: top‑level groups with +/− chevrons; expanded group shows leaf links, active
+leaf highlighted (`bg-primary/10 text-primary font-bold`).
+- Style the existing categories partial as a white card with Alpine‑toggled
+  sub‑lists (`x-data="{ open: … }"`). Active state via `aria-current` + the existing
+  `markActiveNav()` pattern.
+- Medium effort.
+
+### C2. "Informácie" links card — ✅ done
+Mockup: second sidebar card with Obchodné podmienky / O našej spoločnosti / Naše
+obchody / Doprava a platba.
+- Static links card; same markup as the contact/stores cards already added to the
+  home right rail. Low effort.
+
+---
+
+## D. Right rail — mostly done
+
+Implemented on the home page: **Najpredávanejšie** (from featured products), **Naše
+obchody** placeholder, **Kontaktujte nás** blue card.
+
+Remaining 🟡:
+- **D1. Bestsellers from real sales data** — currently reuses the featured query;
+  wire to actual order/sales counts when available.
+- **D2. "Naše obchody" real photo + page** — replace the placeholder block and link
+  to a real stores page.
+- **D3. Contact hotline** — phone number is hardcoded; move to config/i18n.
+
+---
+
+## Suggested order (quick wins first)
+1. Footer (A6) + top utility bar (A1) — pure markup, big visual lift.
+2. Header search (A2) + cart label (A5) + logo lockup (A3) — wire existing data.
+3. Sort select (B3) + breadcrumb restyle (B1) — backends already exist.
+4. Sidebar restyle (C1, C2).
+5. Category banner (B2), richer list card (B6).
+6. Compare (B5) — only if the feature is actually wanted.
+
+## Reference
+- Mockup source extracted to (scratch, regenerate via DesignSync if needed):
+  `DesignSync get_file` on project `015b8bf5-fd27-4a7e-82d9-d1864a59578c`,
+  file `Kompress-eshop.html` → `__bundler/template` script holds the real markup.
+- PenguinUI workflow: see `penguinui-workflow` memory + `hardcoded-inventory.md`.

migration/src/lib.rs

@@ -49,6 +49,7 @@ mod m20260623_000001_add_short_description_to_products;
 mod m20260623_000002_strip_html_from_product_search;
 mod m20260623_000003_drop_currency;
 mod m20260623_000004_currencies;
+mod m20260625_000001_add_avatar_to_users;
 pub struct Migrator;
 
 #[async_trait::async_trait]
@@ -102,6 +103,7 @@ impl MigratorTrait for Migrator {
             Box::new(m20260623_000002_strip_html_from_product_search::Migration),
             Box::new(m20260623_000003_drop_currency::Migration),
             Box::new(m20260623_000004_currencies::Migration),
+            Box::new(m20260625_000001_add_avatar_to_users::Migration),
             // inject-above (do not remove this comment)
         ]
     }

migration/src/m20260625_000001_add_avatar_to_users.rs

@@ -0,0 +1,20 @@
+use loco_rs::schema::*;
+use sea_orm_migration::prelude::*;
+
+#[derive(DeriveMigrationName)]
+pub struct Migration;
+
+// Optional profile avatar. `avatar_id` holds the stored image's filename (the
+// same `<uuid>.<ext>` scheme as product/category images), served through the
+// shared `/images/{filename}` route. NULL = no avatar, fall back to initials.
+#[async_trait::async_trait]
+impl MigrationTrait for Migration {
+    async fn up(&self, m: &SchemaManager) -> Result<(), DbErr> {
+        add_column(m, "users", "avatar_id", ColType::StringNull).await?;
+        Ok(())
+    }
+
+    async fn down(&self, m: &SchemaManager) -> Result<(), DbErr> {
+        remove_column(m, "users", "avatar_id").await
+    }
+}

src/app.rs

@@ -20,7 +20,7 @@ use crate::{
         account, admin_categories, admin_currencies, admin_customers, admin_dashboard,
         admin_discount_profiles, admin_form, admin_orders, admin_products, admin_shipping,
         auth, auth_pages, cart, checkout, currency, home, i18n, media, oauth2,
-        shop,
+        pages, shop,
     },
     initializers,
     models::_entities::users,
@@ -97,6 +97,7 @@ impl Hooks for App {
             .add_route(cart::routes())
             .add_route(checkout::routes())
             .add_route(currency::routes())
+            .add_route(pages::routes())
             // cross-cutting
             .add_route(auth::routes())
             .add_route(auth_pages::routes())

src/controllers/account.rs

@@ -7,6 +7,7 @@
 //! on the user — it is shown here read-only and can never be changed. The
 //! profile only edits the type-specific details (company identity + address).
 
+use axum::extract::{DefaultBodyLimit, Multipart};
 use axum_extra::extract::cookie::CookieJar;
 use loco_rs::prelude::*;
 use sea_orm::QueryOrder;
@@ -14,7 +15,11 @@ use serde::Deserialize;
 use serde_json::json;
 
 use crate::{
-    controllers::i18n::current_lang,
+    controllers::{
+        admin_form::{read_multipart_form, store_image},
+        i18n::current_lang,
+        media::IMAGE_MAX_BYTES,
+    },
     models::{
         customer_profiles::{self, ProfileFields},
         order_items, orders, users,
@@ -128,6 +133,8 @@ fn profile_view(
             "account_nav": true,
             "customer_name": user.name,
             "customer_account_type": user.account_type,
+            "customer_avatar": user.avatar_id,
+            "avatar_id": user.avatar_id,
             "saved": saved,
             "error": error,
             "name": user.name,
@@ -202,6 +209,64 @@ async fn save_profile(
     profile_view(&v, &jar, &user, &fields, true, false)
 }
 
+/// Persist `avatar_id` (a stored image filename, or `None` to clear) on the
+/// signed-in customer and re-render the profile page with the success banner.
+async fn set_avatar(
+    v: &TeraView,
+    jar: &CookieJar,
+    ctx: &AppContext,
+    user: users::Model,
+    avatar_id: Option<String>,
+) -> Result<Response> {
+    let mut active = user.clone().into_active_model();
+    active.avatar_id = ActiveValue::set(avatar_id.clone());
+    let user = active.update(&ctx.db).await?;
+    let profile = customer_profiles::Model::find_for_user(&ctx.db, user.id).await?;
+    profile_view(v, jar, &user, &fields_of(profile.as_ref()), true, false)
+}
+
+/// Upload (or replace) the signed-in customer's avatar picture. The single
+/// `image` file part is validated and stored through the shared image storage,
+/// then its generated filename is saved as the user's `avatar_id`.
+#[debug_handler]
+async fn upload_avatar(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+    multipart: Multipart,
+) -> Result<Response> {
+    let Some(user) = guard::current_user(&ctx, &jar).await else {
+        return format::redirect("/login");
+    };
+    if guard::is_admin(&ctx, &user) {
+        return format::redirect("/admin/dashboard");
+    }
+    let form = read_multipart_form(multipart).await?;
+    let Some(image) = form.single_image() else {
+        // No file chosen — nothing to do, just re-show the profile.
+        let profile = customer_profiles::Model::find_for_user(&ctx.db, user.id).await?;
+        return profile_view(&v, &jar, &user, &fields_of(profile.as_ref()), false, false);
+    };
+    let filename = store_image(&ctx, image).await?;
+    set_avatar(&v, &jar, &ctx, user, Some(filename)).await
+}
+
+/// Remove the signed-in customer's avatar, reverting to the initials fallback.
+#[debug_handler]
+async fn remove_avatar(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+) -> Result<Response> {
+    let Some(user) = guard::current_user(&ctx, &jar).await else {
+        return format::redirect("/login");
+    };
+    if guard::is_admin(&ctx, &user) {
+        return format::redirect("/admin/dashboard");
+    }
+    set_avatar(&v, &jar, &ctx, user, None).await
+}
+
 /// Lists the signed-in customer's orders, split into still-active and past.
 #[debug_handler]
 async fn orders_page(
@@ -236,6 +301,7 @@ async fn orders_page(
             "account_nav": true,
             "customer_name": user.name,
             "customer_account_type": user.account_type,
+            "customer_avatar": user.avatar_id,
             "active_orders": shape(active),
             "past_orders": shape(past),
             "lang": current_lang(&jar),
@@ -278,6 +344,7 @@ async fn order_detail_page(
             "account_nav": true,
             "customer_name": user.name,
             "customer_account_type": user.account_type,
+            "customer_avatar": user.avatar_id,
             "order": order_view::detail(
                 &order,
                 settings::get(&ctx, "bank_iban").unwrap_or(""),
@@ -312,6 +379,7 @@ fn password_view(
             "account_nav": true,
             "customer_name": user.name,
             "customer_account_type": user.account_type,
+            "customer_avatar": user.avatar_id,
             "changed": changed,
             "error": error,
             "lang": current_lang(jar),
@@ -406,6 +474,7 @@ fn security_view(
             "account_nav": true,
             "customer_name": user.name,
             "customer_account_type": user.account_type,
+            "customer_avatar": user.avatar_id,
             "totp_enabled": user.totp_enabled(),
             "enrolling": enrolling,
             "qr": qr,
@@ -538,6 +607,11 @@ pub fn routes() -> Routes {
     Routes::new()
         .add("/account/profile", get(profile_page))
         .add("/account/profile", post(save_profile))
+        .add(
+            "/account/profile/avatar",
+            post(upload_avatar).layer(DefaultBodyLimit::max(IMAGE_MAX_BYTES + 1024 * 1024)),
+        )
+        .add("/account/profile/avatar/remove", post(remove_avatar))
         .add("/account/orders", get(orders_page))
         .add("/account/orders/{order_number}", get(order_detail_page))
         .add("/account/password", get(change_password_page))

src/controllers/cart.rs

@@ -264,6 +264,7 @@ async fn show(
             "logged_in_customer": c.logged_in_customer,
             "customer_name": c.customer_name,
             "customer_account_type": c.customer_account_type,
+            "customer_avatar": c.customer_avatar,
             "lang": current_lang(&jar),
         }),
     )?;

src/controllers/checkout.rs

@@ -132,6 +132,7 @@ async fn checkout_page(
             // logged_in_customer is true); None for admins/guests.
             "customer_name": user.as_ref().filter(|_| is_customer).map(|u| u.name.clone()),
             "customer_account_type": user.as_ref().filter(|_| is_customer).map(|u| u.account_type.clone()),
+            "customer_avatar": user.as_ref().filter(|_| is_customer).and_then(|u| u.avatar_id.clone()),
             "profile_filled": profile_filled,
             // A logged-in customer's account type is fixed; only guests pick it
             // and may opt to create an account from the order.
@@ -375,6 +376,7 @@ async fn order_confirmation(
             "logged_in_customer": c.logged_in_customer,
             "customer_name": c.customer_name,
             "customer_account_type": c.customer_account_type,
+            "customer_avatar": c.customer_avatar,
             "account_created": account_created,
             "lang": current_lang(&jar),
         }),

src/controllers/home.rs

@@ -28,8 +28,11 @@ async fn index(
             "logged_in_customer": c.logged_in_customer,
             "customer_name": c.customer_name,
             "customer_account_type": c.customer_account_type,
+            "customer_avatar": c.customer_avatar,
             "currency_symbol": cur.symbol,
             "lang": current_lang(&jar),
+            // The header search bar only appears on the landing page.
+            "on_home": true,
         }),
     )
 }

src/controllers/mod.rs

@@ -17,4 +17,5 @@ pub mod currency;
 pub mod home;
 pub mod i18n;
 pub mod media;
+pub mod pages;
 pub mod shop;

src/controllers/pages.rs

@@ -0,0 +1,97 @@
+//! Static informational pages (contact, sitemap, terms, about, stores,
+//! shipping). These back the top-bar / footer / sidebar links so none of them
+//! is a dead `#`. Content is static; the same chrome context as the home page
+//! is supplied so `base.html` (header, cart badge, currencies) renders.
+
+use axum_extra::extract::cookie::CookieJar;
+use loco_rs::prelude::*;
+use serde_json::json;
+
+use crate::{controllers::i18n::current_lang, shared::currency, shared::guard};
+
+/// Render one static page through `pages/info.html`, which switches its title +
+/// body on the `page` slug. Mirrors `home::index`'s chrome wiring.
+async fn render(v: &TeraView, jar: &CookieJar, ctx: &AppContext, page: &str) -> Result<Response> {
+    let user = guard::current_user(ctx, jar).await;
+    let cur = currency::resolve(ctx, jar).await;
+    let c = guard::chrome_from(ctx, user.as_ref());
+
+    format::view(
+        v,
+        "pages/info.html",
+        json!({
+            "page": page,
+            "logged_in_admin": c.logged_in_admin,
+            "logged_in_customer": c.logged_in_customer,
+            "customer_name": c.customer_name,
+            "customer_account_type": c.customer_account_type,
+            "customer_avatar": c.customer_avatar,
+            "currency_symbol": cur.symbol,
+            "lang": current_lang(jar),
+        }),
+    )
+}
+
+#[debug_handler]
+async fn contact(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+) -> Result<Response> {
+    render(&v, &jar, &ctx, "contact").await
+}
+
+#[debug_handler]
+async fn sitemap(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+) -> Result<Response> {
+    render(&v, &jar, &ctx, "sitemap").await
+}
+
+#[debug_handler]
+async fn terms(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+) -> Result<Response> {
+    render(&v, &jar, &ctx, "terms").await
+}
+
+#[debug_handler]
+async fn about(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+) -> Result<Response> {
+    render(&v, &jar, &ctx, "about").await
+}
+
+#[debug_handler]
+async fn stores(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+) -> Result<Response> {
+    render(&v, &jar, &ctx, "stores").await
+}
+
+#[debug_handler]
+async fn shipping(
+    jar: CookieJar,
+    ViewEngine(v): ViewEngine<TeraView>,
+    State(ctx): State<AppContext>,
+) -> Result<Response> {
+    render(&v, &jar, &ctx, "shipping").await
+}
+
+pub fn routes() -> Routes {
+    Routes::new()
+        .add("/kontakt", get(contact))
+        .add("/mapa-stranky", get(sitemap))
+        .add("/obchodne-podmienky", get(terms))
+        .add("/o-nas", get(about))
+        .add("/predajne", get(stores))
+        .add("/doprava-a-platba", get(shipping))
+}

src/controllers/shop.rs

@@ -22,8 +22,21 @@ use crate::{
     views::shop as view,
 };
 
-/// Results per page in the storefront listing/search.
+/// Default results per page in the storefront listing/search.
 const PER_PAGE: usize = 24;
+/// Allowed per-page choices offered in the toolbar; any other value falls back
+/// to [`PER_PAGE`].
+const PER_PAGE_OPTIONS: [usize; 3] = [24, 48, 96];
+
+/// Resolve the requested per-page count to one of [`PER_PAGE_OPTIONS`],
+/// defaulting to [`PER_PAGE`].
+fn resolve_per_page(params: &SearchParams) -> usize {
+    params
+        .per_page
+        .map(|p| p as usize)
+        .filter(|p| PER_PAGE_OPTIONS.contains(p))
+        .unwrap_or(PER_PAGE)
+}
 /// Hard cap on candidates a single text search considers before faceting; well
 /// above any realistic page of results for this catalog.
 const SEARCH_CAP: u64 = 1000;
@@ -40,6 +53,7 @@ struct SearchParams {
     in_stock: Option<String>,
     sort: Option<String>,
     page: Option<u32>,
+    per_page: Option<u32>,
 }
 
 /// A candidate product with everything the listing needs to filter, sort and
@@ -81,6 +95,9 @@ fn query_base(params: &SearchParams) -> String {
     if let Some(s) = params.sort.as_deref().filter(|s| !s.is_empty()) {
         ser.append_pair("sort", s);
     }
+    if let Some(p) = params.per_page.filter(|p| *p as usize != PER_PAGE) {
+        ser.append_pair("per_page", &p.to_string());
+    }
     ser.finish()
 }
 
@@ -177,12 +194,17 @@ async fn run_search(
     items.retain(|i| view::category_filter_keep(&filter, i.product.category_id));
 
     // 6. Sort. Newest-first is the default; relevance (the ranked search order)
-    //    is available explicitly via the sort control.
-    let sort = params
+    //    is available explicitly via the sort control. When a search runs, the
+    //    default "newest" becomes "relevance" (a query implies relevance matters
+    //    most); any explicitly chosen non-newest sort is left untouched.
+    let mut sort = params
         .sort
         .clone()
         .filter(|s| !s.is_empty())
         .unwrap_or_else(|| "newest".to_string());
+    if !q_trim.is_empty() && sort == "newest" {
+        sort = "relevance".to_string();
+    }
     match sort.as_str() {
         "price_asc" => items.sort_by(|a, b| a.priced.price_cents.cmp(&b.priced.price_cents)),
         "price_desc" => items.sort_by(|a, b| b.priced.price_cents.cmp(&a.priced.price_cents)),
@@ -198,14 +220,15 @@ async fn run_search(
     }
 
     // 7. Paginate.
+    let per_page = resolve_per_page(params);
     let total = items.len();
-    let pages = total.div_ceil(PER_PAGE).max(1);
+    let pages = total.div_ceil(per_page).max(1);
     let page = params.page.unwrap_or(1).clamp(1, pages as u32);
-    let start = (page as usize - 1) * PER_PAGE;
+    let start = (page as usize - 1) * per_page;
 
     // 8. Render only the current page's cards (images fetched per row).
     let mut rows = Vec::new();
-    for item in items.iter().skip(start).take(PER_PAGE) {
+    for item in items.iter().skip(start).take(per_page) {
         let image = product_images::first_for(ctx, item.product.id).await?;
         let cat_name = item.product.category_id.and_then(|id| category_name.get(&id).cloned());
         rows.push(view::product_card(
@@ -227,8 +250,17 @@ async fn run_search(
         // Numeric form so the <select> can mark the active option (Tera can't
         // compare a string param against a numeric category id).
         "selected_category_id": selected_category.parse::<i32>().unwrap_or(-1),
+        // Display name of the active category, so the search bar can show that
+        // the query is scoped to it. `None` for "all"/"none" (the template maps
+        // "none" to the localized "uncategorized" label itself).
+        "selected_category_name": selected_category
+            .parse::<i32>()
+            .ok()
+            .and_then(|id| category_name.get(&id).cloned()),
         "uncategorized_count": uncategorized_count,
         "sort": sort,
+        "per_page": per_page,
+        "per_page_options": PER_PAGE_OPTIONS,
         "in_stock": in_stock_only,
         "min_price": params.min_price.clone().unwrap_or_default(),
         "max_price": params.max_price.clone().unwrap_or_default(),
@@ -325,6 +357,7 @@ fn add_chrome(ctx_value: &mut serde_json::Value, c: &guard::Chrome, lang: &str)
         map.insert("logged_in_customer".into(), json!(c.logged_in_customer));
         map.insert("customer_name".into(), json!(c.customer_name));
         map.insert("customer_account_type".into(), json!(c.customer_account_type));
+        map.insert("customer_avatar".into(), json!(c.customer_avatar));
         map.insert("lang".into(), json!(lang));
     }
 }
@@ -347,8 +380,10 @@ async fn index(
 /// ([`products::Entity::search`]) with category, price-band, in-stock and sort
 /// filters, ranked and paginated by [`run_search`]. A blank query falls back to
 /// the full published listing, so the same endpoint powers both "browse" and
-/// "search". htmx requests get just the results fragment (for live updates);
-/// direct navigation (or no-JS) renders the whole page.
+/// "search". Targeted htmx requests from the listing toolbar/pagination get just
+/// the results fragment (for live updates); direct navigation, no-JS, and boosted
+/// navigations (e.g. submitting the header search box, which hx-boost turns into
+/// an AJAX nav) render the whole eshop page.
 #[debug_handler]
 async fn search(
     jar: CookieJar,
@@ -362,9 +397,16 @@ async fn search(
     let mut context = run_search(&ctx, user.as_ref(), &params, &cur).await?;
     let lang = current_lang(&jar);
 
-    if headers.contains_key("HX-Request") {
+    // A boosted request (the header search form, links) replaces the whole body,
+    // so it needs the full page — only the toolbar's own targeted hx-get requests
+    // (HX-Request without HX-Boosted) want the bare results fragment.
+    let fragment = headers.contains_key("HX-Request") && !headers.contains_key("HX-Boosted");
+    if fragment {
         if let Some(map) = context.as_object_mut() {
             map.insert("lang".into(), json!(lang));
+            // Lets _results.html out-of-band swap the toolbar's Sort dropdown
+            // (which lives outside the swapped region) to match the ordering.
+            map.insert("is_fragment".into(), json!(true));
         }
         return format::view(&v, "shop/_results.html", context);
     }
@@ -448,6 +490,7 @@ async fn show(
             "logged_in_customer": c.logged_in_customer,
             "customer_name": c.customer_name,
             "customer_account_type": c.customer_account_type,
+            "customer_avatar": c.customer_avatar,
             "currency_symbol": cur.symbol,
             "lang": current_lang(&jar),
         }),

src/models/_entities/users.rs

@@ -31,6 +31,7 @@ pub struct Model {
     pub totp_enabled_at: Option<DateTimeWithTimeZone>,
     #[sea_orm(column_type = "Text", nullable)]
     pub totp_backup_codes: Option<String>,
+    pub avatar_id: Option<String>,
 }
 
 #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]

src/shared/guard.rs

@@ -56,6 +56,9 @@ pub struct Chrome {
     pub logged_in_customer: bool,
     pub customer_name: Option<String>,
     pub customer_account_type: Option<String>,
+    /// Stored avatar image filename (served via `/images/{filename}`), set only
+    /// for a logged-in customer who uploaded one. `None` -> initials fallback.
+    pub customer_avatar: Option<String>,
 }
 
 pub async fn chrome(ctx: &AppContext, jar: &CookieJar) -> Chrome {
@@ -74,6 +77,7 @@ pub fn chrome_from(ctx: &AppContext, user: Option<&users::Model>) -> Chrome {
             logged_in_customer: true,
             customer_name: Some(user.name.clone()),
             customer_account_type: Some(user.account_type.clone()),
+            customer_avatar: user.avatar_id.clone(),
             ..Default::default()
         },
         None => Chrome::default(),

src/views/shop.rs

@@ -22,6 +22,14 @@ pub fn product_card(
     category_name: Option<String>,
     cur: &Currency,
 ) -> Value {
+    // Whole-percent discount for the card's sale badge (e.g. "−15 %"). Only
+    // meaningful when the resolved price is actually reduced below the regular.
+    let percent_off = if priced.is_reduced() && priced.regular_cents > priced.price_cents {
+        (((priced.regular_cents - priced.price_cents) as f64 / priced.regular_cents as f64) * 100.0)
+            .round() as i64
+    } else {
+        0
+    };
     json!({
         "id": product.id,
         "variant_id": representative.id,
@@ -31,6 +39,7 @@ pub fn product_card(
         "short_description": product.short_description,
         "price": cur.format(priced.price_cents),
         "on_sale": priced.is_reduced(),
+        "percent_off": percent_off,
         "is_business": priced.is_business,
         "regular_price": cur.format(priced.regular_cents),
         "sku": representative.sku,