<div {{ attributes }}>
    {% if open and product %}
        <div class="modal-scroll-lock fixed inset-0 z-modal flex items-center justify-center p-4 md:p-6">
            <button
                type="button"
                class="absolute inset-0 bg-primary/55 backdrop-blur-[3px]"
                aria-label="{{ 'shop.close_modal'|trans }}"
                data-action="live#action"
                data-live-action-param="close"
            ></button>

            <div
                id="{{ id }}"
                role="dialog"
                aria-modal="true"
                aria-labelledby="{{ id }}-title"
                class="relative z-10 flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden border border-primary/10 bg-background shadow-[0_32px_80px_rgba(51,38,28,0.22)]"
            >
                <header class="flex items-start justify-between gap-4 border-b border-primary/12 px-6 py-5 md:px-8">
                    <div class="min-w-0">
                        <div class="font-label text-[10px] font-semibold uppercase tracking-[0.2em] text-secondary">
                            {{ 'marketing.review.public.title'|trans }}
                        </div>
                        <h2 id="{{ id }}-title" class="mt-2 font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary sm:text-[34px]">
                            {{ product.name|striptags }}
                        </h2>
                    </div>
                    <button
                        type="button"
                        class="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center text-[34px] leading-none text-primary/60 transition hover:text-primary"
                        aria-label="{{ 'shop.close_modal'|trans }}"
                        data-action="live#action"
                        data-live-action-param="close"
                    >
                        &times;
                    </button>
                </header>

                <div class="overflow-y-auto">
                    {{ component('marketing:ProductReviews', {
                        product: product,
                        page: page,
                        livePagination: true,
                        id: id ~ '-content',
                        class: 'mt-0'
                    }) }}
                </div>
            </div>
        </div>
    {% endif %}
</div>
