diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 85d1c14..b184863 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -211,6 +211,7 @@ section {
 
 input[type="text"],
 input[type="tel"],
+input[type="email"],
 input[type="password"],
 input[type="number"],
 input[type="date"] {
@@ -2064,6 +2065,127 @@ section.checkout-page .well {
     color: white;
 }
 
+/* Content card — material-style elevated panel for product page sections
+   (description, file info, comments). Subtle elevation-1 shadow + light
+   border gives clear layering against the page surface; generous padding
+   replaces the loose <br/><br/> separators these sections used to rely
+   on. Grid only — no flex. */
+.content-card {
+    background-color: var(--surface-base, #FFFFFF);
+    border-radius: var(--radius-lg, 12px);
+    border: 1px solid var(--border-light, #eeeeee);
+    box-shadow: var(--elevation-1);
+    padding: var(--space-5, 20px);
+    margin-bottom: var(--space-4, 16px);
+    display: grid;
+    gap: var(--space-3, 12px);
+}
+
+.content-card-header {
+    margin: 0;
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-muted, #777);
+}
+
+.content-card-body { margin: 0; }
+
+.content-card-meta {
+    margin: 0;
+    color: var(--text-muted, #777);
+    font-size: var(--text-sm, 0.875rem);
+}
+
+[data-theme="dark"] .content-card {
+    background-color: var(--surface-container, #161b22);
+    border-color: var(--border-default, #30363d);
+}
+
+/* Comment form polish — applied inside .content-card so it inherits the
+   panel chrome. Stacked label / control / hint with proper spacing,
+   inputs and textarea fill the width consistently. Grid only. */
+.comment-form {
+    display: grid;
+    gap: var(--space-3, 12px);
+}
+.comment-form h4 {
+    margin: 0;
+    font-size: var(--text-md, 1.125rem);
+    font-weight: 600;
+}
+.comment-form form {
+    display: grid;
+    gap: var(--space-3, 12px);
+}
+.comment-form-field {
+    display: grid;
+    gap: var(--space-1, 4px);
+}
+.comment-form label {
+    margin: 0;
+    font-weight: 600;
+}
+.comment-form input[type="text"],
+.comment-form input[type="email"],
+.comment-form textarea {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+}
+.comment-form textarea {
+    min-height: 6rem;
+    resize: vertical;
+}
+.comment-form .mps-comment-form-button {
+    justify-self: start;
+    padding: var(--space-2, 8px) var(--space-4, 16px);
+}
+
+/* Comments list polish — each comment is a soft inset surface within
+   the parent .content-card so the depth reads clearly. Replies inherit
+   the same chrome with a left accent. */
+.comments-section { display: grid; gap: var(--space-4, 16px); }
+.comments-section h3 { margin: 0; }
+#comments-list { display: grid; gap: var(--space-3, 12px); }
+.comments-section .comment {
+    background-color: var(--surface-dim, #f9f9fa);
+    border-radius: var(--radius-md, 8px);
+    padding: var(--space-3, 12px) var(--space-4, 16px);
+    /* The inline `style="margin-left: Npx"` on .comment in the snippet
+       gives nested replies a stair-step indent; keep that working but
+       drop the legacy 20px bottom-margin (we use grid gap above). */
+    margin-bottom: 0 !important;
+}
+.comments-section .comment-reply {
+    border-left: 3px solid var(--color-navy, #5871ad);
+}
+.comments-section .comment-header {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    gap: var(--space-2, 8px);
+    align-items: baseline;
+    margin-bottom: var(--space-2, 8px);
+}
+.comments-section .comment-date {
+    color: var(--text-muted, #777);
+    font-size: var(--text-sm, 0.875rem);
+}
+.comments-section .comment-title {
+    font-weight: 600;
+}
+.comments-section .comment-content {
+    margin-bottom: var(--space-2, 8px);
+}
+
+/* Back-to-shop link on the product page: small secondary link below the
+   comments card, left-aligned, not stretched to the full row. */
+.product-back-link {
+    margin-top: var(--space-3, 12px);
+    justify-self: start;
+}
+
 [data-theme="dark"] .one-column.well.well-green,
 [data-theme="dark"] .action-columns.well.well-green {
     background-color: var(--dark-button-bg, #2d3748);
diff --git a/make_post_sell/templates/product.j2 b/make_post_sell/templates/product.j2
index a23ad5f..bd7cc62 100644
--- a/make_post_sell/templates/product.j2
+++ b/make_post_sell/templates/product.j2
@@ -136,50 +136,45 @@
 
   <div class="cinema-content-stack">
   <div class="product-description">
-    <br/>
-    <br/>
 
-    <b>Description</b>
-    <section>{{ product.description_html | safe }}</section>
-
-    <br/>
-    <br/>
+    <article class="content-card">
+      <h3 class="content-card-header">Description</h3>
+      <div class="content-card-body">{{ product.description_html | safe }}</div>
+      {% if request.shop.show_dates %}
+      <p class="content-card-meta product-meta-dates">
+        Created {{ product.human_created_timestamp }}{% if product.human_created_timestamp != product.human_updated_timestamp %} · Updated {{ product.human_updated_timestamp }}{% endif %}{% if product.human_view_count %} · <span class="product-view-count">{{ product.human_view_count }}</span>{% endif %}
+      </p>
+      {% endif %}
+    </article>
 
     {% if product.is_bundle %}
       {% if product.products_in_this_bundle %}
-      <b>Bundle Contents</b>
-      <ul>
-      {% for p in product.products_in_this_bundle %}
-      <li>
-        {{p.title}}
-      </li>
-      {% endfor %}
-      </ul>
+      <article class="content-card">
+        <h3 class="content-card-header">Bundle Contents</h3>
+        <ul class="content-card-body">
+        {% for p in product.products_in_this_bundle %}
+        <li>{{p.title}}</li>
+        {% endfor %}
+        </ul>
+      </article>
       {% endif %}
     {% elif product.has_product_file %}
-      <b>File Type</b>
-      <br/>
-      {{ product.get_content_type("product") }} {{ product_size }}
-      <br/>
-      Please make sure you have an application to open this file type.
+      <article class="content-card">
+        <h3 class="content-card-header">File</h3>
+        <p class="content-card-body">{{ product.get_content_type("product") }} &middot; {{ product_size }}</p>
+        <p class="content-card-meta">Make sure you have an application to open this file type.</p>
+      </article>
     {% endif %}
 
-    {% if request.shop.show_dates %}
-    <div class="product-meta-dates">
-      Created {{ product.human_created_timestamp }}{% if product.human_created_timestamp != product.human_updated_timestamp %} · Updated {{ product.human_updated_timestamp }}{% endif %}{% if product.human_view_count %} · <span class="product-view-count">{{ product.human_view_count }}</span>{% endif %}
-    </div>
-    {% endif %}
   </div>
 
   <div class="product-comments">
-    <br/>
-    <br/>
-
     <!-- Comments Section -->
-    {% include 'snippets/comments.j2' %}
+    <article class="content-card">
+      {% include 'snippets/comments.j2' %}
+    </article>
 
-    <br/>
-    <a href="/" class="product-edit-button mps-button">Back to shop</a>
+    <a href="/" class="mps-button-small product-back-link">&larr; Back to shop</a>
   </div>
   </div>
 
diff --git a/make_post_sell/templates/snippets/comments.j2 b/make_post_sell/templates/snippets/comments.j2
index 039c79d..4af6d24 100644
--- a/make_post_sell/templates/snippets/comments.j2
+++ b/make_post_sell/templates/snippets/comments.j2
@@ -85,13 +85,11 @@
                     <input type="hidden" name="product_id" value="{{ product.id if product else '' }}" />
                     <input type="hidden" name="parent_id" value="" />
 
-                    <div>
-                        <label for="comment-data">Comment:</label>
-                        <textarea name="data" id="comment-data" rows="4" style="width: 100%;" required></textarea>
+                    <div class="comment-form-field">
+                        <label for="comment-data">Comment</label>
+                        <textarea name="data" id="comment-data" rows="4" required></textarea>
                     </div>
 
-                    <br/>
-
                     <div>
                         <input type="submit" value="Send Comment" class="mps-comment-form-button" />
                     </div>
@@ -107,16 +105,17 @@
                 <input type="hidden" name="product_id" value="{{ product.id if product else '' }}" />
                 <input type="hidden" name="parent_id" value="" />
 
-                <div>
-                    <label for="comment-data">Comment:</label>
-                    <textarea name="data" id="comment-data" rows="4" style="width: 100%;" required></textarea>
+                <div class="comment-form-field">
+                    <label for="comment-data">Comment</label>
+                    <textarea name="data" id="comment-data" rows="4" required></textarea>
                 </div>
 
-                <div>
-                    <label for="comment-email">Email:</label>
-                    <input type="email" name="email" id="comment-email" style="width: 100%;" required />
+                <div class="comment-form-field">
+                    <label for="comment-email">Email</label>
+                    <input type="email" name="email" id="comment-email" required />
                 </div>
 
+                {# Honeypot for spam bots. #}
                 <input
                     name="email2"
                     type="email"
@@ -124,10 +123,9 @@
                     value=""
                     tabindex="-1"
                     autocomplete="off"
+                    class="hidden-form"
                 />
 
-                <br/>
-
                 <div>
                     <input type="submit" value="Send Comment" class="mps-comment-form-button" />
                 </div>
diff --git a/make_post_sell/templates/styleguide.j2 b/make_post_sell/templates/styleguide.j2
index 11c7dae..2eb897c 100644
--- a/make_post_sell/templates/styleguide.j2
+++ b/make_post_sell/templates/styleguide.j2
@@ -730,6 +730,20 @@ Grid only — no flex.</div>
         Coupon container with dotted border. border: 3px dotted #bbb, border-radius: 4px, padding: 20px.
       </div>
     </div>
+
+    <div class="sg-subsection">
+      <div class="sg-label">Content card (elevated panel, layered above page)</div>
+      <article class="content-card" style="max-width: 520px;">
+        <h3 class="content-card-header">Description</h3>
+        <p class="content-card-body">Reusable elevated card. Layered above the page surface with <code>--elevation-1</code> and <code>--radius-lg</code>. Used on the product page for description, file info, and the comments panel — each section reads as its own chunk instead of floating in raw text with <code>&lt;br/&gt;</code> separators.</p>
+        <p class="content-card-meta">Stacked tokens-only: <code>--surface-base</code> background, <code>--border-light</code> border, <code>--elevation-1</code> shadow, <code>--space-5</code> padding.</p>
+      </article>
+      <div class="sg-code">.content-card         — surface-base, border-light, elevation-1, radius-lg
+.content-card-header  — small uppercase label, var(--text-muted)
+.content-card-body    — content (paragraphs / lists / forms)
+.content-card-meta    — small muted meta line (dates, hints)
+Dark mode: surface-container + border-default override (auto).</div>
+    </div>
   </div>
 
 
@@ -908,6 +922,59 @@ Checkout page:
 .delete-link     — red text, red border on hover
 .moderate-link   — same as reply
 Dark mode: uses theme background images on hover</div>
+
+    <div class="sg-subsection">
+      <div class="sg-label">Comment form (inside .content-card)</div>
+      <article class="content-card" style="max-width: 520px;">
+        <div class="comment-form">
+          <h4>Leave a Comment</h4>
+          <form onsubmit="return false;">
+            <div class="comment-form-field">
+              <label for="sg-comment-data">Comment</label>
+              <textarea id="sg-comment-data" rows="4"></textarea>
+            </div>
+            <div class="comment-form-field">
+              <label for="sg-comment-email">Email</label>
+              <input type="email" id="sg-comment-email" />
+            </div>
+            <div>
+              <input type="submit" value="Send Comment" class="mps-comment-form-button" />
+            </div>
+          </form>
+        </div>
+      </article>
+      <div class="sg-code">.comment-form          — grid, gap var(--space-3)
+.comment-form-field    — label + control stacked, gap var(--space-1)
+inputs / textarea      — width:100%, box-sizing:border-box
+.mps-comment-form-button — justify-self:start (doesn't span full width)
+Hosted inside a .content-card so the panel chrome handles padding/elevation.</div>
+    </div>
+
+    <div class="sg-subsection">
+      <div class="sg-label">Sample rendered comment (depth 0 + reply)</div>
+      <section class="comments-section" style="max-width: 520px;">
+        <div id="comments-list">
+          <div class="comment">
+            <div class="comment-header">
+              <strong>jane-doe</strong>
+              <span class="comment-date">2 days ago</span>
+            </div>
+            <div class="comment-content"><p>Great product, fast download. Will recommend.</p></div>
+          </div>
+          <div class="comment comment-reply" style="margin-left: 20px;">
+            <div class="comment-header">
+              <strong>shop-owner</strong>
+              <span class="comment-date">1 day ago</span>
+            </div>
+            <div class="comment-content"><p>Thanks for the review, jane-doe!</p></div>
+          </div>
+        </div>
+      </section>
+      <div class="sg-code">.comments-section .comment        — soft surface-dim card, radius-md
+.comments-section .comment-reply  — left accent in --color-navy
+.comment-header                   — grid auto auto 1fr, baseline-aligned
+The snippet sets inline margin-left for depth-N replies (depth * 20px).</div>
+    </div>
   </div>