fix: consistent section order across mobile, desktop, and cinema modes

Mobile previously placed product-right (price, download, Up Next)
as the 2nd section, right after images — a different reading flow
from desktop and cinema modes, which keep description + comments
above/alongside product-right.

Unified order for every mode and viewport:

  1. images         (sticky video/cover on mobile + desktop watch)
  2. description
  3. comments
  4. product-right  (price, download, Up Next)

Desktop normal: column 1 = images → description → comments (stacked),
column 2 = product-right (spans all rows on the right).

Desktop cinema: row 1 = images full-width, row 2 = content (description
+ comments stack) on the left, product-right on the right.

Mobile normal: all four stacked single-column in that order. Cinema
stays a no-op below 800px; the classes exist but match no rules and
the page falls through to the consistent mobile watch-mode layout.

CLAUDE.md mobile layout section updated to match.

CLAUDE.md

@@ -356,11 +356,19 @@ normal redirect flow on any error.
 
 ## Mobile Layout
 
-On mobile (`max-width: 800px`), our product page reorders to single column:
+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:
+
 1. `product-images` (order 1) — sticky in watch mode
-2. `product-right` (order 2) — price, download, related content
+2. `product-description` (order 2)
-3. `product-description` (order 3)
+3. `product-comments` (order 3)
-4. `product-comments` (order 4)
+4. `product-right` (order 4) — price, download, related content
+
+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
+and a consistent section order — the cinema classes exist on the DOM but
+match no layout rules below 800px.
 
 Related content on mobile shows only 7 next items (vs 42 on desktop) via `.related-content-overflow` class. A "Comments (N)" anchor link appears on mobile to jump to our comments section below.
 

make_post_sell/static/css/common.css

@@ -1612,36 +1612,41 @@ textarea.markup-editor-textarea {
         padding-right: 4px;
     }
     
-    /* On mobile, reorder to put purchase section after images */
+    /* 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. */
     .product-images {
         order: 1;
         max-width: 100%;
         overflow: hidden;
         min-width: 0;
     }
-    
+
     .product-images img.product-main {
         max-width: 100%;
         max-height: 42vh;
         width: auto;
         height: auto;
     }
-    
+
-    section.product-right {
-        order: 2;
-        width: 100%;
-    }
-    
-    section.product-right .well {
-        margin-top: 30px;
-    }
-    
     .product-description {
+        order: 2;
+    }
+
+    .product-comments {
         order: 3;
     }
-    
+
-    .product-comments {
+    section.product-right {
         order: 4;
+        width: 100%;
+    }
+
+    section.product-right .well {
+        margin-top: 30px;
     }
 
     /* Watch mode mobile: dissolve watch-left wrapper so sticky video sticks