{# --- Tickets in this order --- #}
    {% if order and order_tickets %}
      <section class="mt-6 space-y-3">
        <h2 class="text-base sm:text-lg font-semibold">
          Event tickets in this order
        </h2>

        <ul class="divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80">
          {% for tk in order_tickets %}
            <li class="px-4 py-3 flex items-start justify-between text-sm">
              <div>
                <div class="font-medium flex items-center gap-2">
                  {{ tk.entry_name }}
                  {# Small status pill #}
                  <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium
                      {% if tk.state == 'confirmed' %}
                        bg-emerald-100 text-emerald-800
                      {% elif tk.state == 'reserved' %}
                        bg-amber-100 text-amber-800
                      {% elif tk.state == 'checked_in' %}
                        bg-blue-100 text-blue-800
                      {% else %}
                        bg-stone-100 text-stone-700
                      {% endif %}
                    ">
                    {{ tk.state|replace('_', ' ')|capitalize }}
                  </span>
                </div>
                {% if tk.ticket_type_name %}
                  <div class="text-xs text-stone-500">{{ tk.ticket_type_name }}</div>
                {% endif %}
                <div class="text-xs text-stone-500">
                  {{ tk.entry_start_at.strftime('%-d %b %Y, %H:%M') }}
                  {% if tk.entry_end_at %}
                    – {{ tk.entry_end_at.strftime('%-d %b %Y, %H:%M') }}
                  {% endif %}
                </div>
                <div class="text-xs text-stone-400 font-mono mt-0.5">
                  {{ tk.code }}
                </div>
              </div>
              <div class="ml-4 font-medium">
                £{{ "%.2f"|format(tk.price or 0) }}
              </div>
            </li>
          {% endfor %}
        </ul>
      </section>
    {% endif %}