{{-- «Товар добавлен в корзину» — окошко под иконкой корзины, только на ПК (md+).
     Открывается событием teeu:cart-added из teeuAddToCart, сам закрывается через
     4 секунды; пока курсор над ним — не закрывается. На телефоне вместо него тост. --}}
<div x-data="{
         item: null, show: false, t: null,
         open(p) { this.item = p; this.show = true; this.arm(); },
         arm() { clearTimeout(this.t); this.t = setTimeout(() => this.show = false, 4000); },
         hold() { clearTimeout(this.t); },
         money(v) { return new Intl.NumberFormat('ru-RU').format(Math.round(v)) + ' ₽'; },
     }"
     @teeu:cart-added.window="open($event.detail)"
     @mouseenter="hold()" @mouseleave="arm()"
     x-show="show" x-cloak
     x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
     role="status" aria-live="polite"
     class="absolute right-0 top-full z-50 mt-2 hidden w-[360px] rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-3.5 shadow-[var(--shadow-frame)] md:block">
    {{-- Разметка постоянная, а не x-if: иконки Lucide рисуются один раз при загрузке. --}}
    <div>
            <div class="flex items-center gap-2">
                <i data-lucide="shopping-bag" class="h-4 w-4 text-[var(--color-ink)]"></i>
                <span class="flex-1 text-[13.5px] font-semibold text-[var(--color-ink)]">Товар добавлен в корзину</span>
                <button type="button" @click="show = false" class="rounded-[var(--radius-sm)] p-0.5 text-[var(--color-disabled)] transition hover:text-[var(--color-ink)]" aria-label="Закрыть">
                    <i data-lucide="x" class="h-4 w-4"></i>
                </button>
            </div>
            <a :href="item?.url" class="mt-2.5 flex gap-3">
                <span class="grid h-[72px] w-[72px] shrink-0 place-items-center overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-divider)] bg-white"
                      :style="item?.image ? '' : 'background: ' + (item?.placeholder ?? '')">
                    <img x-show="item?.image" :src="item?.image ?? ''" alt="" class="h-full w-full object-contain p-1">
                    <i x-show="!item?.image" data-lucide="image" class="h-6 w-6 text-black/20"></i>
                </span>
                <span class="min-w-0 flex-1">
                    <span class="flex flex-wrap items-baseline gap-x-2">
                        <span class="text-[17px] font-extrabold tracking-[-0.2px] text-[var(--color-ink)]" x-text="item ? money(item.price) : ''"></span>
                        <s x-show="item?.old_price" class="text-[12.5px] text-[var(--color-disabled)]" x-text="item?.old_price ? money(item.old_price) : ''"></s>
                        <span x-show="item?.discount" class="rounded-[var(--radius-sm)] bg-[var(--color-sale)] px-1.5 py-px text-[11.5px] font-bold text-white" x-text="item?.discount ? '−' + item.discount + '%' : ''"></span>
                    </span>
                    <span class="mt-1 line-clamp-2 text-[13px] leading-[1.35] text-[var(--color-slate)]" x-text="item?.title ?? ''"></span>
                </span>
            </a>
            @auth
                <a href="{{ route('account.cart.index') }}"
                   class="mt-3 flex h-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-primary)] text-[13px] font-semibold text-white transition hover:bg-[var(--color-primary-dark)]">Перейти в корзину</a>
            @else
                {{-- Гостевая корзина живёт в сессии и после входа переезжает к
                     пользователю (MergeGuestCart); оформить заказ можно только после
                     входа — и сразу ведём в корзину (App\Support\AfterLogin). --}}
                <button type="button" @click="show = false; $store.authModal.show('cart')"
                        class="mt-3 flex h-9 w-full items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-primary)] text-[13px] font-semibold text-white transition hover:bg-[var(--color-primary-dark)]">Войти и оформить</button>
            @endauth
    </div>
</div>