{{-- Global Toast Notification (Section 9B of global_ui_components_and_content_standards.md)
     Position: Bottom-center on mobile (above any sticky bar), Top-right on desktop.
     Style: Bg --bg-main, 1px border --border-subtle, 3px left border in --state-success or --state-error. --}}
<div x-data
     x-show="$store.toast.visible"
     x-cloak
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0 translate-y-2"
     x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100 translate-y-0"
     x-transition:leave-end="opacity-0 translate-y-2"
     :class="[
         $store.ui.pdpStickyBarVisible ? 'bottom-[76px] lg:bottom-auto' : 'bottom-[20px] lg:bottom-auto',
         $store.toast.type === 'error' ? 'toast-box-error' : 'toast-box-success'
     ]"
     role="status"
     aria-live="polite"
     class="fixed left-1/2 -translate-x-1/2 lg:left-auto lg:translate-x-0 lg:top-[90px] lg:right-[24px] z-toast w-[calc(100vw-32px)] max-w-[380px] flex items-center justify-between gap-[12px]">

    <div class="flex items-center gap-[10px]">
        <span x-show="$store.toast.type === 'success'" class="text-state-success font-bold text-[15px]" aria-hidden="true">✓</span>
        <span x-show="$store.toast.type === 'error'" class="text-state-error font-bold text-[15px]" aria-hidden="true">!</span>
        <p class="font-body font-medium text-[13px] lg:text-[14px] text-text-primary" x-text="$store.toast.message"></p>
    </div>

    <button type="button"
            @click="$store.toast.dismiss()"
            aria-label="Dismiss notification"
            class="text-text-muted hover:text-text-primary text-[14px] px-[4px] cursor-pointer">
        ✕
    </button>
</div>