{# Loading placeholders. variant: overview | list | card #}
{% set variant = variant|default('list') %}
{% if variant == 'overview' %}
<div class="rvx-animate-pulse rvx-grid rvx-gap-space24 md:rvx-grid-cols-[220px_1fr] rvx-items-center" aria-hidden="true">
  <div class="rvx-space-y-space12">
    <div class="rvx-h-10 rvx-w-28 rvx-rounded-control rvx-bg-surface-sunken"></div>
    <div class="rvx-h-5 rvx-w-32 rvx-rounded-control rvx-bg-surface-sunken"></div>
    <div class="rvx-h-4 rvx-w-24 rvx-rounded-control rvx-bg-surface-sunken"></div>
  </div>
  <div class="rvx-space-y-space8">
    {% for i in 1..5 %}<div class="rvx-h-3 rvx-rounded-pill rvx-bg-surface-sunken" style="width: {{ 100 - loop.index0 * 12 }}%"></div>{% endfor %}
  </div>
</div>
{% elseif variant == 'card' %}
<div class="rvx-animate-pulse rvx-rounded-card rvx-border rvx-border-line-subtle rvx-bg-surface rvx-p-space16 rvx-space-y-space12" aria-hidden="true">
  <div class="rvx-flex rvx-items-center rvx-gap-space12">
    <div class="rvx-size-10 rvx-rounded-pill rvx-bg-surface-sunken"></div>
    <div class="rvx-space-y-space8 rvx-flex-1"><div class="rvx-h-3 rvx-w-1/3 rvx-rounded-pill rvx-bg-surface-sunken"></div><div class="rvx-h-3 rvx-w-1/4 rvx-rounded-pill rvx-bg-surface-sunken"></div></div>
  </div>
  <div class="rvx-h-3 rvx-w-full rvx-rounded-pill rvx-bg-surface-sunken"></div>
  <div class="rvx-h-3 rvx-w-5/6 rvx-rounded-pill rvx-bg-surface-sunken"></div>
  <div class="rvx-h-3 rvx-w-2/3 rvx-rounded-pill rvx-bg-surface-sunken"></div>
</div>
{% else %}
<div class="rvx-grid rvx-gap-space16 sm:rvx-grid-cols-2 lg:rvx-grid-cols-3" aria-hidden="true">
  {% for i in 1..3 %}{% include 'storefront/ui/skeleton.twig' with { variant: 'card' } %}{% endfor %}
</div>
{% endif %}