{#
  Dialog shell. Use with embed:
    {% embed 'storefront/ui/modal.twig' with { open: 'detail.open', close: 'closeReview()', size: 'rvx-max-w-modal-2xl', name: 'rvx-review-details' } %}
  The title inside the body sets `:id="$id('rvx-modal-title')"`; ids are scoped per
  modal (x-id) so several widgets on one page never share an id. `label` is the
  accessible name used when that title is absent (untitled review).
      {% block body %}…{% endblock %}
    {% endembed %}
  Focus is trapped while open, page scroll locked, Escape/backdrop close. Sheet on phones.
#}
<div x-data="{ release: null }"
     x-init="$watch(() => {{ open }}, (v) => { if (v) { $nextTick(() => { release = rvxTrapFocus($refs.panel); }); rvxLockScroll(true); } else { release && release(); release = null; rvxLockScroll(false); } })"
     x-show="{{ open }}"
     x-cloak
     @keydown.escape.window="if ({{ open }}) { {{ close }} }"
     class="rvx-fixed rvx-inset-0 rvx-z-modal rvx-flex rvx-items-end sm:rvx-items-center rvx-justify-center rvx-p-0 sm:rvx-p-space24"
     x-id="['rvx-modal-title']"
     {% if name is defined %}data-rvx-modal="{{ name }}"{% endif %}
     role="dialog" aria-modal="true" :aria-labelledby="$id('rvx-modal-title')"{% if label is defined %} aria-label="{{ label }}"{% endif %}>
  <div class="rvx-modal__overlay rvx-absolute rvx-inset-0 rvx-bg-surface-overlay/60"
       x-show="{{ open }}"
       x-transition:enter="rvx-transition-opacity rvx-duration-base rvx-ease-standard" x-transition:enter-start="rvx-opacity-0" x-transition:enter-end="rvx-opacity-100"
       x-transition:leave="rvx-transition-opacity rvx-duration-fast rvx-ease-standard" x-transition:leave-start="rvx-opacity-100" x-transition:leave-end="rvx-opacity-0"
       @click="{{ close }}"></div>
  <div x-ref="panel"
       x-show="{{ open }}"
       x-transition:enter="rvx-transition rvx-duration-base rvx-ease-emphasized" x-transition:enter-start="rvx-opacity-0 rvx-translate-y-6 sm:rvx-translate-y-0 sm:rvx-scale-95" x-transition:enter-end="rvx-opacity-100 rvx-translate-y-0 sm:rvx-scale-100"
       x-transition:leave="rvx-transition rvx-duration-fast rvx-ease-standard" x-transition:leave-start="rvx-opacity-100 rvx-translate-y-0 sm:rvx-scale-100" x-transition:leave-end="rvx-opacity-0 rvx-translate-y-6 sm:rvx-translate-y-0 sm:rvx-scale-95"
       class="rvx-modal__panel rvx-relative rvx-w-full {{ size|default('rvx-max-w-modal-md') }} rvx-max-h-[92dvh] sm:rvx-max-h-[86vh] rvx-flex rvx-flex-col rvx-bg-surface rvx-rounded-t-panel sm:rvx-rounded-panel rvx-shadow-modal rvx-overflow-hidden rvx-outline-none" tabindex="-1">
    <button type="button"
            class="rvx-absolute rvx-top-space12 rvx-end-space12 rvx-z-raised rvx-grid rvx-place-items-center rvx-size-9 rvx-rounded-pill rvx-bg-surface/90 rvx-text-fg-muted rvx-shadow-sm hover:rvx-bg-surface-sunken hover:rvx-text-fg rvx-transition rvx-duration-fast"
            @click="{{ close }}" aria-label="{{ __('Close', 'reviewx') }}">
      {% include 'storefront/ui/icon.twig' with { name: 'close', size: 20 } %}
    </button>
    {% block body %}{% endblock %}
  </div>
</div>