diff --git a/next.config.mjs b/next.config.mjs
index b3d7116..2b9a25d 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,12 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+  outputFileTracingRoot: __dirname,
   images: {
     unoptimized: true,
   },
diff --git a/src/app/globals.css b/src/app/globals.css
index b59f367..bdfe6cc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -602,77 +602,60 @@ html {
 }
 
 @media (max-width: 768px) {
+  /* Embedded in a scrolling page: drop the nested-scroll bottom-sheet.
+     Canvas on top (fixed height), full config panel flows below in normal
+     page scroll so Proceed to Order / Reset are always reachable. */
+  #configurator { height: auto !important; min-height: 0 !important; }
   .layout-container {
-    flex-direction: column-reverse !important;
-    height: 100dvh !important;
+    flex-direction: column !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+  .canvas-area {
+    height: 48dvh !important;
+    max-height: 48dvh !important;
+    min-height: 260px !important;
+    width: 100% !important;
+    flex: none !important;
   }
   .glass-panel-responsive {
     order: unset !important;
     position: relative !important;
-    bottom: auto !important;
-    left: auto !important;
-    right: auto !important;
+    inset: auto !important;
     width: 100% !important;
-    height: 55dvh !important;
-    max-height: 55dvh !important;
+    height: auto !important;
+    max-height: none !important;
     border-right: none !important;
     border-left: none !important;
     border-top: 1px solid var(--color-border) !important;
     box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.06) !important;
-    border-radius: 1rem 1rem 0 0 !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-    z-index: 50;
-    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
-  }
-  .glass-panel-responsive.panel-expanded {
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100dvh !important;
-    max-height: 100dvh !important;
     border-radius: 0 !important;
-    border-top: none !important;
-    box-shadow: none !important;
-    z-index: 200 !important;
-    overflow-y: auto !important;
-    -webkit-overflow-scrolling: touch !important;
-    padding-bottom: 0 !important;
+    overflow: visible !important;
+    z-index: 1;
+    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
   }
-  .canvas-area {
-    height: 45dvh !important;
-    max-height: 45dvh !important;
-    min-height: 180px !important;
-    width: 100% !important;
-    flex: none !important;
-  }
-  #configurator { height: 100dvh !important; }
-  .mobile-handle { display: flex !important; }
+  .mobile-handle { display: none !important; }
 }
 
 @media (max-width: 480px) {
-  .glass-panel-responsive {
-    height: 58dvh !important;
-    max-height: 58dvh !important;
-    border-radius: 0.75rem 0.75rem 0 0 !important;
-  }
   .canvas-area {
-    height: 42dvh !important;
-    max-height: 42dvh !important;
-    min-height: 160px !important;
+    height: 44dvh !important;
+    max-height: 44dvh !important;
+    min-height: 240px !important;
   }
   .glass-panel-responsive header { padding: 0.75rem 1rem !important; }
-  .glass-panel-responsive > div[role="region"] { padding: 1rem !important; }
+  .glass-panel-responsive > div[role="region"] {
+    padding: 1.1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
+  }
 }
 
 @media (max-width: 375px) {
-  .glass-panel-responsive { height: 60dvh !important; max-height: 60dvh !important; }
-  .canvas-area { height: 40dvh !important; max-height: 40dvh !important; min-height: 140px !important; }
+  .canvas-area { height: 42dvh !important; max-height: 42dvh !important; min-height: 220px !important; }
 }
 
 @media (max-height: 500px) and (orientation: landscape) {
-  .layout-container { flex-direction: row !important; }
+  #configurator { height: 100dvh !important; }
+  .layout-container { flex-direction: row !important; height: 100dvh !important; overflow: hidden !important; }
   .glass-panel-responsive {
     order: unset !important;
     position: relative !important;