{{-- Floating Back-to-Top (↑) Button (Listing Pages Only)
     Reference: frontend/global_ui_components_and_content_standards.md (Section 11)
     & frontend/single_category_view_all_page_plan.md
     Stacked 12px directly above the Floating Chat button (bottom: 76px on Mobile, 82px on Desktop).
     Hides when any modal/drawer/sheet is open. --}}
<div x-data="{
        scrolledDown: false,
        init() {
            const onScroll = () => {
                this.scrolledDown = window.scrollY > 520;
                if (this.$store.ui) {
                    this.$store.ui.backToTopVisible = this.scrolledDown;
                }
            };
            window.addEventListener('scroll', onScroll, { passive: true });
            onScroll();
        },
        scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
     }"
     x-show="scrolledDown && !$store.ui.anyOverlayOpen"
     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="fixed bottom-[76px] lg:bottom-[82px] right-[16px] lg:right-[24px] z-floating">
    <button type="button"
            @click="scrollToTop()"
            aria-label="Scroll back to top"
            class="w-[44px] h-[44px] rounded-full bg-brand-primary text-text-light border border-brand-accent hover:bg-brand-accent hover:text-text-primary active:bg-brand-accent active:text-text-primary inline-flex items-center justify-center transition-colors duration-200 cursor-pointer">
        <svg class="w-[18px] h-[18px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
        </svg>
    </button>
</div>