diff --git a/assets/css/frontend/layout.css b/assets/css/frontend/layout.css
index 43dc5aa6..e733b510 100644
--- a/assets/css/frontend/layout.css
+++ b/assets/css/frontend/layout.css
@@ -51,14 +51,15 @@
 }
 
 /* ============================================================
- * Site shell — Zibll site-layout-1/2/3 float dual-column (main.css 1:1)
+ * Site shell — site-layout-1/2/3 dual-column
  * DOM: main.container > .content-wrap + .sidebar (siblings)
  * body.site-layout-1 = no sidebar
  * body.site-layout-2 = sidebar right
  * body.site-layout-3 = sidebar left
  *
- * Never put display:flex/grid on .content-wrap for dual-column pages —
- * float is ignored under flex/grid and .sidebar negative-margin then overlaps.
+ * Desktop columns use Grid so the sidebar is always a real second column.
+ * The float rules below remain as a narrow-screen compatibility fallback;
+ * below 992px the sidebar is intentionally hidden.
  * ============================================================ */
 
 main.container,
@@ -87,7 +88,7 @@ main.content-shell::after,
   clear: both;
 }
 
-/* Zibll main.css 1:1 dual-column (float + negative-margin).
+/* Float/negative-margin compatibility fallback.
  *
  * Critical: .content-layout must NOT set width:100%. Under box-sizing:border-box
  * a 100% width + margin-right gutter keeps the border-box at full container
@@ -189,6 +190,92 @@ body.site-layout-3 .sidebar,
   position: unset;
 }
 
+/* Desktop dual-column geometry.
+ *
+ * A full-width floated .content-wrap plus a negatively-margined sidebar can
+ * leave the sidebar outside the visible painting area when a parent clips
+ * horizontal overflow.  Put the two direct children in explicit grid columns
+ * instead, so widgets cannot be positioned off-canvas. */
+@media (min-width: 992px) {
+  body.site-layout-2 main.container,
+  body.site-layout-2 main.content-shell,
+  body.site-layout-2 .site-main.container {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px);
+    column-gap: 15px;
+    align-items: start;
+  }
+
+  body.site-layout-3 main.container,
+  body.site-layout-3 main.content-shell,
+  body.site-layout-3 .site-main.container {
+    display: grid;
+    grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr);
+    column-gap: 15px;
+    align-items: start;
+  }
+
+  body.site-layout-2 main.container::after,
+  body.site-layout-2 main.content-shell::after,
+  body.site-layout-2 .site-main.container::after,
+  body.site-layout-3 main.container::after,
+  body.site-layout-3 main.content-shell::after,
+  body.site-layout-3 .site-main.container::after {
+    content: none;
+  }
+
+  body.site-layout-2 main.container > .content-wrap,
+  body.site-layout-2 main.content-shell > .content-wrap,
+  body.site-layout-2 .site-main.container > .content-wrap {
+    float: none;
+    grid-column: 1;
+    grid-row: 1;
+    width: auto;
+  }
+
+  body.site-layout-3 main.container > .content-wrap,
+  body.site-layout-3 main.content-shell > .content-wrap,
+  body.site-layout-3 .site-main.container > .content-wrap {
+    float: none;
+    grid-column: 2;
+    grid-row: 1;
+    width: auto;
+  }
+
+  body.site-layout-2 main.container > .content-wrap > .content-layout,
+  body.site-layout-2 main.content-shell > .content-wrap > .content-layout,
+  body.site-layout-2 .site-main.container > .content-wrap > .content-layout,
+  body.site-layout-3 main.container > .content-wrap > .content-layout,
+  body.site-layout-3 main.content-shell > .content-wrap > .content-layout,
+  body.site-layout-3 .site-main.container > .content-wrap > .content-layout {
+    width: auto;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  body.site-layout-2 main.container > .sidebar,
+  body.site-layout-2 main.content-shell > .sidebar,
+  body.site-layout-2 .site-main.container > .sidebar {
+    float: none;
+    grid-column: 2;
+    grid-row: 1;
+    width: var(--sidebar-width, 311px);
+    margin-left: 0;
+    position: relative;
+  }
+
+  body.site-layout-3 main.container > .sidebar,
+  body.site-layout-3 main.content-shell > .sidebar,
+  body.site-layout-3 .site-main.container > .sidebar {
+    float: none;
+    grid-column: 1;
+    grid-row: 1;
+    width: var(--sidebar-width, 311px);
+    margin-left: 0;
+    position: relative;
+  }
+}
+
 /* Sticky widgets inside sidebar */
 @media (min-width: 992px) {
   body.site-layout-2 .sidebar .posts-nav-box,