{#
  Skeleton loading cards (Phase 9). Pure-CSS shimmer placeholders shown while the
  page paints; hidden via the `is-loading` root class the moment the DOM is ready
  (progressive enhancement — no-JS users never see them). No JS framework.

  Usage:  {% from "components/skeleton.html" import skeleton_row %}
          {{ skeleton_row(5) }}
#}

{% macro skeleton_card() %}
  <div class="mk-skeleton-card" aria-hidden="true">
    <div class="mk-skeleton mk-skeleton-img"></div>
    <div class="mk-skeleton-body">
      <div class="mk-skeleton mk-skeleton-line mk-skeleton-title"></div>
      <div class="mk-skeleton mk-skeleton-line mk-skeleton-price"></div>
      <div class="mk-skeleton mk-skeleton-line mk-skeleton-meta"></div>
    </div>
  </div>
{% endmacro %}

{% macro skeleton_row(count=5) %}
  <div class="discovery-scroll" aria-hidden="true">
    {% for _ in range(count) %}{{ skeleton_card() }}{% endfor %}
  </div>
{% endmacro %}