new ui3

assets/views/home/index.html

@@ -9,6 +9,12 @@
    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. #}
+<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>
+
 <div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_19rem]">
 
   <!-- center column -->

assets/views/macros/ui.html

@@ -267,3 +267,27 @@ 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 %}

assets/views/shop/_sidebar.html

@@ -60,3 +60,21 @@
 {% 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">
+    {% for key in ["footer-terms", "footer-about", "footer-stores", "footer-shipping"] %}
+    <a href="#"
+      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=key, lang=L) }}
+    </a>
+    {% endfor %}
+  </div>
+</div>

assets/views/shop/category.html

@@ -7,14 +7,15 @@
 {% 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 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=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>
     <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

@@ -6,6 +6,12 @@
 {% block content %}
 {% set L = lang | default(value='sk') %}
 <div class="space-y-6">
+  <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=t(key="nav-home", lang=L), href="/") }}
+      {{ ui::crumb_current(label=t(key="nav-shop", lang=L)) }}
+    </ol>
+  </nav>
   <header class="space-y-1">
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=L) }}</h1>
     <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=L) }}</p>

design-parity.md

@@ -80,7 +80,15 @@ Mockup: 4‑column footer (brand blurb · Informácie · Účet · Kontakt) + co
 The mockup's body is really a **category/listing** layout. The home page borrows its
 look; the real listing pages should adopt the rest.
 
-### B1. Breadcrumbs — 🟢
+> **✅ 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
@@ -97,7 +105,7 @@ Mockup: white card with a 148px image placeholder + category description paragra
 - 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") — 🟢
+### 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,
@@ -131,7 +139,7 @@ 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 — 🟡
+### 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
@@ -139,7 +147,7 @@ leaf highlighted (`bg-primary/10 text-primary font-bold`).
   `markActiveNav()` pattern.
 - Medium effort.
 
-### C2. "Informácie" links card — 🔴
+### 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