v11-best PDP: mobile polish — id chip to bottom-right (clears Save-colorway bar), compact non-sticky mobile header (was clipping breadcrumb)

c0e3414426c7792acba7706fe151a5cc4d0f7cbc · 2026-05-31 18:55:38 -0700 · Steve Abrams

Files touched

M public/theme-variants/v11-best.html

Diff

commit c0e3414426c7792acba7706fe151a5cc4d0f7cbc
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sun May 31 18:55:38 2026 -0700

    v11-best PDP: mobile polish — id chip to bottom-right (clears Save-colorway bar), compact non-sticky mobile header (was clipping breadcrumb)
---
 public/theme-variants/v11-best.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/public/theme-variants/v11-best.html b/public/theme-variants/v11-best.html
index 0f7375e..336a1d3 100644
--- a/public/theme-variants/v11-best.html
+++ b/public/theme-variants/v11-best.html
@@ -71,7 +71,9 @@
     padding: 7px 11px; border-radius: 999px; text-transform: uppercase;
   }
   .col-hero .info {
-    position: absolute; left: 14px; bottom: 14px;
+    /* bottom-RIGHT: the shared color-dots "Save colorway" bar lives bottom-left
+       (color-dots.js, left:10px;bottom:10px) — keep this chip clear of it. */
+    position: absolute; right: 14px; bottom: 14px;
     background: rgba(26,22,17,.78); color: #f0eada;
     font: 600 11px/1 var(--sans); letter-spacing: .06em;
     padding: 8px 12px; border-radius: 6px; text-transform: uppercase;
@@ -235,7 +237,16 @@
     .footer-acc { grid-template-columns: 1fr; }
   }
   @media (max-width: 640px) {
-    header.topbar { flex-wrap: wrap; padding: 10px 14px; }
+    /* Header was sticky + 3-row-wrapping (~280px tall) → it clipped the
+       breadcrumb/subtitle on scroll. On mobile: static (scrolls away), compact,
+       and let brand+switcher share row 1 with nav on its own row. */
+    header.topbar { position: static; flex-wrap: wrap; padding: 8px 14px; gap: 6px 14px; }
+    header .brand { font-size: 16px; }
+    header .grow { display: none; }
+    header nav { width: 100%; order: 3; gap: 14px; font-size: 12px; }
+    header .switcher { font-size: 10px; gap: 6px; margin-left: auto; }
+    header .badge { font-size: 8.5px; padding: 2px 6px; }
+    .crumb { padding: 12px 14px 0; }
     main.best { padding: 12px 14px; gap: 18px; }
     .tab-bar { grid-template-columns: repeat(3, 1fr); }
     .cta-row { grid-template-columns: 1fr; }

← e6c546d designer-studio compose: heal-first instead of re-roll — kee · back to Wallco Ai · Generate + publish fresh CORK + RAFFIA drunk-animals sets (5 08ae76b →