diff --git a/CLAUDE.md b/CLAUDE.md
index 8ce32c0..7091593 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -389,13 +389,15 @@ normal redirect flow on any error.
 ## Mobile Layout
 
 On mobile (`max-width: 800px`), our product page reorders to single column
-with the **same section order as desktop and cinema modes** — images first,
-then description + comments, then product-right:
+with the **buy CTA promoted up** so a tablet/phone buyer doesn't have to
+scroll past the description and comment thread to find Add to Cart.
+Desktop two-column already keeps `product-right` visible as a side panel;
+this mobile rule mirrors that intent:
 
 1. `product-images` (order 1) — sticky in watch mode
-2. `product-description` (order 2)
-3. `product-comments` (order 3)
-4. `product-right` (order 4) — price, download, related content
+2. `product-right` (order 2) — price, Add to Cart, Preview, related content
+3. `product-description` (order 3)
+4. `product-comments` (order 4)
 
 Cinema mode is a no-op on mobile (gated on `@media (min-width: 800px)`).
 The normal watch-mode mobile stack already gives full-viewport-width media
diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 29c3ae8..f6729a2 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -2630,12 +2630,13 @@ textarea.markup-editor-textarea {
         padding-right: 4px;
     }
     
-    /* Section order on mobile matches desktop + cinema: images first,
-       then description, comments, then product-right (price, download,
-       Up Next). Desktop puts description + comments above/alongside
-       product-right in both normal and cinema modes; mobile follows
-       the same reading order so sections stay consistent across every
-       mode and viewport. */
+    /* Section order on tablet + phone: images first, then product-right
+       (price, Add to Cart, Preview, Up Next) so the buy CTA is at the
+       top — not buried below description + comments. Desktop two-column
+       keeps product-right as a side panel where the CTA is always
+       visible alongside the image; mobile lifts it up so a buyer doesn't
+       have to scroll past the entire description and comment thread to
+       find the button. */
     .product-images {
         order: 1;
         max-width: 100%;
@@ -2650,21 +2651,25 @@ textarea.markup-editor-textarea {
         height: auto;
     }
 
-    .product-description {
-        order: 2;
-    }
-
-    .product-comments {
-        order: 3;
-    }
-
     section.product-right {
-        order: 4;
+        order: 2;
         width: 100%;
     }
 
     section.product-right .well {
-        margin-top: 30px;
+        /* Tighten the top margin on mobile — the well now sits directly
+           under the product image instead of below description + comments,
+           so it doesn't need the 30px gap that separated it from the
+           comment thread in the old order. */
+        margin-top: var(--space-3, 12px);
+    }
+
+    .product-description {
+        order: 3;
+    }
+
+    .product-comments {
+        order: 4;
     }
 
     /* Watch mode mobile: dissolve watch-left wrapper so sticky video sticks