{# Product collection. The grid / list `view` state is provided by the Alpine
   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. #}
{# 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 %}
</div>