breadcrumbs position

assets/views/base.html

@@ -254,7 +254,10 @@
     <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/*. -->
@@ -287,6 +290,7 @@
         {% 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. -->

assets/views/home/index.html

@@ -3,18 +3,20 @@
 
 {% block title %}{{ t(key="brand", lang=lang | default(value='sk')) }}{% endblock title %}
 
+{% 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 %}
+
 {% 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. #}
-<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/pages/info.html

@@ -6,17 +6,20 @@
    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">
-  <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=title) }}
-    </ol>
-  </nav>
-
   <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ title }}</h1>
 
   {% if page == "contact" %}

assets/views/shop/category.html

@@ -3,11 +3,9 @@
 
 {% block title %}{{ category.name }}{% endblock title %}
 
-{% block content %}
+{% block breadcrumbs %}
 {% set L = lang | default(value='sk') %}
-<div class="space-y-6">
+<nav aria-label="breadcrumb" class="mb-5 text-sm">
-  <header class="space-y-2">
-    <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") }}
@@ -17,6 +15,12 @@
     {{ 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">
     <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,15 +3,19 @@
 
 {% block title %}{{ t(key="nav-shop", lang=lang | default(value='sk')) }}{% endblock title %}
 
-{% block content %}
+{% block breadcrumbs %}
 {% set L = lang | default(value='sk') %}
-<div class="space-y-6">
+<nav aria-label="breadcrumb" class="mb-5 text-sm">
-  <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>
+{% endblock breadcrumbs %}
+
+{% block content %}
+{% set L = lang | default(value='sk') %}
+<div class="space-y-6">
   <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>