{{-- Keep the cart AJAX target separate from the shared dropdown appearance. --}}
<div class="cart-dropdown-wrap cart-dropdown-hm2 {{ $panel === 'cart-panel' ? 'cart-dropdown-panel' : 'notification-dropdown-panel' }}" data-header-dropdown>
    {!! Theme::partial($panel) !!}
</div>

@once
    <style>
        [data-header-dropdown] { max-width: calc(100vw - 24px); }
        [data-header-dropdown]::before {
            content: '';
            position: absolute;
            top: -22px;
            left: 0;
            right: 0;
            height: 22px;
        }
        .header-action-2 .header-action-icon-2 [data-header-dropdown].is-open {
            opacity: 1;
            visibility: visible;
            top: calc(100% + 10px);
        }
    </style>
    <script>
        (function () {
            function bindHeaderDropdowns() {
                var panels = document.querySelectorAll('[data-header-dropdown]');
                panels.forEach(function (panel) {
                    var wrap = panel.closest('.header-action-icon-2');
                    if (!wrap) return;
                    var trigger = wrap.querySelector('a');
                    if (!trigger) return;
                    trigger.setAttribute('aria-expanded', 'false');

                    function fit() {
                        panel.style.translate = '0px';
                        var rect = panel.getBoundingClientRect();
                        var width = document.documentElement.clientWidth;
                        var offset = rect.left < 12 ? 12 - rect.left : Math.min(0, width - 12 - rect.right);
                        panel.style.translate = offset + 'px';
                    }
                    function close() {
                        panel.classList.remove('is-open');
                        trigger.setAttribute('aria-expanded', 'false');
                    }
                    function open() {
                        fit();
                        panel.classList.add('is-open');
                        trigger.setAttribute('aria-expanded', 'true');
                    }
                    wrap.addEventListener('mouseenter', function () {
                        if (window.matchMedia('(hover: hover)').matches) open();
                    });
                    wrap.addEventListener('mouseleave', close);
                    trigger.addEventListener('click', function (event) {
                        if (!panel.classList.contains('is-open')) {
                            event.preventDefault();
                            open();
                        }
                    });
                    document.addEventListener('click', function (event) {
                        if (!wrap.contains(event.target)) close();
                    });
                    wrap.addEventListener('keydown', function (event) {
                        if (event.key === 'Escape') close();
                    });
                    window.addEventListener('resize', fit);
                    fit();
                });
            }
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', bindHeaderDropdowns);
            } else {
                bindHeaderDropdowns();
            }
        })();
    </script>
@endonce