diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 8cf8b54..3651f99 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1584,6 +1584,27 @@ div.edit-page > section.edit-card-full {
     grid-column: 1 / -1;
 }
 
+/* Make-an-offer form (expanded from the <details> on product pages).
+   Grid layout gives consistent vertical rhythm — the inputs and label
+   would otherwise sit flush against each other and against the
+   summary button above. */
+.product-offer-form {
+    display: grid;
+    gap: var(--space-3, 12px);
+    margin-top: var(--space-3, 12px);
+}
+
+.product-offer-form label {
+    margin: 0;
+}
+
+.product-offer-form input[type="number"],
+.product-offer-form input[type="text"] {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+}
+
 /* Render order on the edit page (CSS order property reorders without
    changing HTML source order):
    1. Edit Title, Description, or Visibility (full width, top)
diff --git a/make_post_sell/templates/product.j2 b/make_post_sell/templates/product.j2
index 28a21b6..1498ead 100644
--- a/make_post_sell/templates/product.j2
+++ b/make_post_sell/templates/product.j2
@@ -245,7 +245,7 @@
     {% if product.offers_allowed and request.user and request.user.authenticated and request.user not in product.shop.owners %}
     <details style="margin-top: var(--space-3)">
       <summary class="mps-button">Make an offer</summary>
-      <form method="POST" action="/p/{{ product.id }}/offer" style="margin-top: var(--space-2)">
+      <form method="POST" action="/p/{{ product.id }}/offer" class="product-offer-form">
         {% include "snippets/csrf.j2" %}
         <label for="offer_amount">Your offer (USD)</label>
         <input type="number" step="0.01" min="0.01" name="amount" id="offer_amount" required />