Mobile layout fixes: pagination, related carousel, book-detail spacing

app/Views/frontend/book-detail.php

@@ -1123,15 +1123,14 @@
 
     .card-header {
         background: transparent;
-        border-bottom: 1px solid var(--border-color);
-        /* Side MARGIN (not padding): padding would leave the border-bottom
-           full-width, since a border sits on the box perimeter outside the
-           padding. Margin shrinks the box itself, so this rule lines up
-           exactly with the .meta-item hairlines (which are inset 1.5rem by
-           .card-body's padding). Vertical padding gives the label air above
-           the line. */
+        /* Explicit `none` (not just omitted) so it beats the global .card-header
+           border in main.css. The header is just a small section label above the
+           meta rows, not a boxed card head, so the hairline read as clutter.
+           Balanced vertical padding; margin keeps the label inset in line with
+           the .card-body content (1.5rem). */
+        border-bottom: none;
         margin: 0 1.5rem;
-        padding: 0.25rem 0 1rem;
+        padding: 0.5rem 0;
     }
 
     .card-header h6 {
@@ -1276,7 +1275,10 @@
         .book-description-section,
         .book-details-section,
         .book-reviews-section {
-            padding: 2rem;
+            /* Vertical padding only: horizontal spacing comes from the column
+               container (`px-3`), so the info spans the same width as the title
+               above instead of double-padding and looking narrow on mobile. */
+            padding: 2rem 0;
         }
 
         /* Card contenuti full-bleed su mobile */
@@ -1407,7 +1409,10 @@
         .book-description-section,
         .book-details-section,
         .book-reviews-section {
-            padding: 2rem;
+            /* Vertical padding only: horizontal spacing comes from the column
+               container (`px-3`), so the info spans the same width as the title
+               above instead of double-padding and looking narrow on mobile. */
+            padding: 2rem 0;
         }
 
         .breadcrumb {
@@ -1467,6 +1472,15 @@
         .card-body {
             padding: 1rem;
         }
+
+        /* Match the header inset to the reduced .card-body padding (1rem) so the
+           section label lines up with the meta rows below it on mobile. Needs
+           !important to beat main.css .card-header { margin:0 !important } which
+           otherwise leaves the label flush-left of the inset meta rows. */
+        .card-header {
+            margin-left: 1rem !important;
+            margin-right: 1rem !important;
+        }
     }
 
     @media (max-width: 400px) {
@@ -1511,7 +1525,9 @@
         .book-description-section,
         .book-details-section,
         .book-reviews-section {
-            padding: 1.5rem;
+            /* Vertical padding only — see the note above; keeps the info full
+               width (as wide as the title) on the smallest screens. */
+            padding: 1.5rem 0;
         }
 
         .hero-text {
@@ -1568,18 +1584,25 @@
         min-width: 0;
     }
 
-    /* Narrow phones (~360-390px): the grid collapses to a single visible column
-       so only one related book shows. Switch to a horizontal snap-scroll strip
-       instead, so all related books are reachable by swiping. The 80% flex-basis
-       leaves a ~20% peek of the next card as the scroll affordance (F003). */
-    @media (max-width: 480px) {
+    /* Phones and small tablets: the desktop grid packs 2+ partial, cut-off cards.
+       Switch to a horizontal snap-scroll strip that shows ONE whole book per view
+       and snaps book-by-book, so all related books are reachable by swiping.
+       Breakpoint raised to 767px so every phone (and small portrait tablet) gets
+       the one-book carousel instead of clipped grid cards. */
+    @media (max-width: 767px) {
         .related-books-grid {
             display: flex;
             flex-wrap: nowrap;
             overflow-x: auto;
             overflow-y: hidden;
             scroll-snap-type: x mandatory;
             -webkit-overflow-scrolling: touch;
+            /* CRITICAL: the base grid rule sets justify-content:center for the
+               centred desktop grid. On an OVERFLOWING flex scroll strip that
+               centres the cells, pushing the first one off-screen left so two
+               half-cells show at scrollLeft:0. Reset to flex-start so the strip
+               starts on the first whole card. */
+            justify-content: flex-start;
             /* neutralize the desktop grid props so they don't interfere */
             grid-template-columns: none;
             grid-template-rows: none;
@@ -1594,8 +1617,16 @@
             display: none;
         }
         .related-book-cell {
-            flex: 0 0 80%;
+            /* One dominant whole book per view, with ~15% of the NEXT card
+               peeking on the right as the scroll affordance (otherwise a
+               full-width card gives no hint that the strip scrolls). start +
+               scroll-snap-stop:always still land each swipe on exactly one card.
+               The peek is one-sided (the base grid centering was reset to
+               flex-start above), so it reads as more-to-the-right, not as two
+               half-covers. */
+            flex: 0 0 85%;
             scroll-snap-align: start;
+            scroll-snap-stop: always;
         }
     }
 

app/Views/frontend/catalog.php

@@ -1095,6 +1095,24 @@
     }
 
     /* Pagination - keep in sync with global dark accent */
+    /* Horizontal row of page links. The .pagination/.page-item classes carry no
+       framework CSS anymore (Bootstrap was removed), so the list is laid out
+       here: a centered, wrapping flex row instead of stacked <li> blocks. */
+    .pagination {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 0.4rem;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .pagination .page-item {
+        margin: 0;
+    }
+
     .pagination .page-link {
         color: #111827;
         border-color: #111827;
@@ -1119,10 +1137,6 @@
         border-color: #000000;
     }
 
-    ul.pagination.justify-content-center {
-        gap: 20px;
-    }
-
     .page-item:first-child .page-link {
         border-top-left-radius: var(--radius-md);
         border-bottom-left-radius: var(--radius-md);

app/Views/frontend/layout.php

@@ -140,6 +140,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Colour the mobile browser chrome (Android address bar / task switcher)
+         with the active theme's primary colour, resolved server-side. -->
+    <meta name="theme-color" content="<?= htmlspecialchars($themePalette['primary'] ?? '#d70161', ENT_QUOTES, 'UTF-8') ?>">
     <title><?= HtmlHelper::e($seoTitle ?? $title ?? $appName) ?></title>
 
     <!-- SEO Meta Tags -->

public/assets/frontend-layouts.css

@@ -52,9 +52,13 @@ body[class*="layout-"] .book-breadcrumb .breadcrumb-item {
   line-height: 1.4;
 }
 
-body[class*="layout-"] .book-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+/* Breadcrumb separator for EVERY breadcrumb (book detail, catalogue, CMS…):
+   the catalogue `<ol class="breadcrumb">` is not inside `.book-breadcrumb`, so
+   it had no divider. currentColor adapts to any background — dark text on the
+   book page, white text on the coloured catalogue hero. */
+body[class*="layout-"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
   margin-right: .4rem;
-  color: color-mix(in srgb, var(--text-color) 38%, var(--light-bg));
+  color: color-mix(in srgb, currentcolor 55%, transparent);
   content: '›';
   font-size: 1rem;
   line-height: 1;
@@ -2009,6 +2013,17 @@ body.layout-soft .plugin-source-link {
   border-radius: 13px;
 }
 
+/* Mobile: the source links were ~300px wide and left-packed into a column that
+   looked narrower than — and misaligned with — the full-width Reserve/Favourite
+   buttons right above them. Stack them full width so the whole action area reads
+   as one consistent column of buttons. */
+@media (max-width: 767px) {
+  body[class*="layout-"] #book-action-buttons .plugin-source-link {
+    flex: 1 0 100%;
+    max-width: 100%;
+  }
+}
+
 body.layout-soft .plugin-source-search--frontend {
   border-top-color: transparent;
   background: color-mix(in srgb, var(--primary-color) 5%, transparent);