diff --git a/src/App.vue b/src/App.vue
index b72ab17..d30f484 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1426,7 +1426,7 @@ function showScenario(n) {
       html += `<div class="rec-item">
         <div class="item-name">${item.name[currentLang]}</div>
         <div class="item-why">${item.why[currentLang]}</div>
-        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
+        <div class="rec-item-foot">
           <div class="item-cost">${item.cost}</div>
           ${item.link ? `<a class="affiliate-btn" href="${item.link}" target="_blank" rel="noopener noreferrer">${icon('cart', 14)} ${viewTxt}</a>` : ''}
         </div>
diff --git a/src/styles.css b/src/styles.css
index f0ed921..02f9971 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -711,6 +711,16 @@ input[type=range]::-moz-range-thumb {
 .item-name { font-weight: 600; font-size: 15px; color: var(--text); }
 .item-why { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
 .item-cost { font-family: var(--font-mono); font-size: 13px; color: var(--green-bright); }
+/* Cost + affiliate-btn footer row inside each rec-item. Default (desktop)
+   is the cost on the left and the button on the right; on mobile the
+   button drops to its own row at full width — easier tap target. */
+.rec-item-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
 .affiliate-btn {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 14px;
@@ -723,6 +733,19 @@ input[type=range]::-moz-range-thumb {
   transition: var(--trans); width: fit-content;
 }
 .affiliate-btn:hover { background: rgba(0,0,0,0.08); }
+@media (max-width: 767px) {
+  /* Mobile — break the button onto its own row beneath the cost and let
+     it fill the rec-item width. flex-wrap on the parent does the line
+     break; flex-basis: 100% guarantees the row split even when the cost
+     is short. */
+  .rec-item-foot .affiliate-btn {
+    flex: 0 0 100%;
+    width: 100%;
+    justify-content: center;
+    padding: 12px 14px;
+    margin-top: 4px;
+  }
+}
 
 /* Budget meter — same logic as the rec-cards: text flips to dark since
    the .result-panel underneath is white-paint. The .budget-meter wrapper