{{/* Product card partial */}}
<a href="{{ .RelPermalink }}" class="product-card">
  <div class="product-card__image">
    {{ with .Params.hero_image }}
      <img src="{{ . }}" alt="{{ $.Title }}" loading="lazy">
    {{ else }}
      <div class="product-card__image-placeholder">{{ .Title }}</div>
    {{ end }}
  </div>
  <div class="product-card__body">
    <div class="product-card__type">{{ .Params.product_type | default "balm" | humanize }}</div>
    <h3 class="product-card__title">{{ .Title }}</h3>
    <p class="product-card__summary">{{ .Params.short_summary | default .Summary }}</p>
    {{ with .Params.benefit_chips }}
    <div class="product-card__chips">
      {{ range . }}
        <span class="product-card__chip">{{ . }}</span>
      {{ end }}
    </div>
    {{ end }}
    <div class="product-card__footer">
      <span class="product-card__status product-card__status--{{ .Params.status | default "inquiry" }}">
        {{ if eq .Params.status "coming_soon" }}Coming Soon{{ else if eq .Params.status "active" }}Available{{ else }}Inquire{{ end }}
      </span>
      <span class="btn btn--ghost">Learn more →</span>
    </div>
  </div>
</a>