<div {{ attributes }}>
    {% if open %}
        <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-[90vh] w-full max-w-3xl flex-col overflow-hidden border border-primary/10 bg-background shadow-[0_32px_80px_rgba(51,38,28,0.22)]"
            >
                <div 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-[11px] font-semibold uppercase tracking-[0.2em] text-secondary">
                            {{ 'shop.highlight'|trans }}
                        </div>
                        <div id="{{ id }}-title" class="mt-2 font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                            {{ title }}
                        </div>
                    </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>
                </div>

                <div class="overflow-y-auto">
                    <div class="grid gap-6 px-6 py-6 md:grid-cols-[minmax(0,220px)_minmax(0,1fr)] md:px-8 md:py-8">
                        {% if imagePath %}
                            <div class="flex items-start justify-center">
                                <div class="flex h-full max-h-[220px] w-full items-center justify-center border border-primary/10 bg-white/70 p-4 md:max-h-[260px]">
                                    <twig:Image
                                        alt="{{ title }}"
                                        class="h-full w-full"
                                        row:class="h-full w-full"
                                        img:class="h-full w-full object-contain"
                                        lazy="{{ false }}"
                                        quality="{{ 70 }}"
                                        responsive="{{ false }}"
                                        path="{{ imagePath }}"
                                        imageWidth="320"
                                        imageHeight="320"
                                    />
                                </div>
                            </div>
                        {% endif %}

                        {% if description %}
                            <div class="min-w-0">
                                <div class="font-label text-[11px] font-semibold uppercase tracking-[0.2em] text-secondary">
                                    {{ 'shop.detail'|trans|striptags }}
                                </div>
                                <div class="mt-4 text-[15px] leading-7 text-primary/78 [&_p]:mt-0 [&_p]:mb-4 [&_p:last-child]:mb-0">
                                    {{ description|raw }}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>
