width of the cards is the same now

assets/views/home/index.html

@@ -66,7 +66,10 @@
       </div>
       <div x-data="{ view: localStorage.getItem('shopView') === 'grid' ? 'grid' : 'list' }"
         x-init="$watch('view', v => localStorage.setItem('shopView', v))"
-        :class="view === 'list' ? 'flex flex-col gap-4' : 'grid grid-cols-2 gap-4 sm:grid-cols-3'">
+        {# Fixed-width cards (14rem), identical to the shop. Cards never stretch;
+           the column just fits as many as it can (home fewer, shop more), so a
+           card is the exact same width on both pages regardless of column count. #}
+        :class="view === 'list' ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-5 sm:grid-cols-[repeat(auto-fill,14rem)] sm:justify-center'">
         {% for product in products %}
         {% include "shop/_card.html" %}
         {% endfor %}

assets/views/shop/_product_grid.html

@@ -2,7 +2,10 @@
    wrapper in _search.html (it persists across htmx swaps and is shared with the
    sort + view-toggle row); `_card.html` reads the same `view` to switch its own
    layout between a vertical card and a horizontal row. #}
-<div :class="view === 'list' ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-5 sm:grid-cols-3 xl:grid-cols-4'">
+{# Fixed-width cards (14rem) — same as the home page. Cards never stretch; the row
+   just fits as many as the width allows. This keeps a card the exact same width on
+   the shop and the home page regardless of how many columns fit. #}
+<div :class="view === 'list' ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-5 sm:grid-cols-[repeat(auto-fill,14rem)] sm:justify-center'">
   {% for product in products %}
   {% include "shop/_card.html" %}
   {% endfor %}