{# 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. #}
<div :class="view === 'list' ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-5 sm:grid-cols-3 xl:grid-cols-4'">
  {% for product in products %}
  {% include "shop/_card.html" %}
  {% endfor %}
</div>