better mobile2

assets/i18n/en/main.ftl

@@ -533,6 +533,8 @@ page-stores-address = Nádražná 328/62, 015 01 Rajec nad Rajčankou
 page-stores-photo-caption = Our production facility in Rajec nad Rajčankou
 page-stores-map = Where to find us
 page-stores-map-open = Open in Google Maps ›
+home-bestsellers = Best sellers
+home-bestsellers-all = All best sellers ›
 home-contact-title = Contact us
 home-contact-text = Our hotline is available 24/7. We're happy to help you choose.
 home-contact-cta = Contact the hotline

assets/i18n/sk/main.ftl

@@ -533,6 +533,8 @@ page-stores-address = Nádražná 328/62, 015 01 Rajec nad Rajčankou
 page-stores-photo-caption = Naša výrobná prevádzka v Rajci nad Rajčankou
 page-stores-map = Kde nás nájdete
 page-stores-map-open = Otvoriť v Google Mapách ›
+home-bestsellers = Najpredávanejšie
+home-bestsellers-all = Všetko najpredávanejšie ›
 home-contact-title = Kontaktujte nás
 home-contact-text = Naša horúca linka je dostupná 24/7. Radi vám poradíme s výberom.
 home-contact-cta = Kontaktujte hotline

assets/views/home/index.html

@@ -18,10 +18,39 @@
    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]">
+<div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_19rem] lg:grid-rows-[auto_1fr] lg:items-start">
+
+  <!-- bestsellers (reuses the featured products). DOM-first so it stacks above
+       the product grid on mobile; placed in the right rail's top cell on lg. -->
+  {% if products | length > 0 %}
+  <section class="overflow-hidden rounded-radius border border-outline bg-surface-alt lg:col-start-2 lg:row-start-1 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">{{ t(key="home-bestsellers", lang=L) }}</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">{{ t(key="home-bestsellers-all", lang=L) }}</a>
+  </section>
+  {% endif %}
 
   <!-- center column -->
-  <div class="flex min-w-0 flex-col gap-6">
+  <div class="flex min-w-0 flex-col gap-6 lg:col-start-1 lg:row-span-2 lg:row-start-1">
     <!-- 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>
@@ -52,35 +81,7 @@
   </div>
 
   <!-- right rail -->
-  <aside class="flex flex-col gap-5">
+  <aside class="flex flex-col gap-5 lg:col-start-2 lg:row-start-2">
-
-    <!-- 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">