{{-- ============================================================ --}}
{{-- VIREO HEADER UTILITY CLUSTER — items 4–11 + the responsive     --}}
{{-- overflow shed. Shared VERBATIM by partials/header.blade.php    --}}
{{-- (dashboard shell) and partials/app-bar.blade.php (full-screen  --}}
{{-- app shell) so the two chromes can never drift.                 --}}
{{--                                                                --}}
{{-- Both hosts provide the axHeader() x-data scope this markup     --}}
{{-- relies on (toggleFullscreen/full, toggleTheme/theme, setLang). --}}
{{-- ============================================================ --}}
  <!-- 4 · LANGUAGE (8) -->
  <div class="ax-lang" x-data="axDropdown()" @keydown.escape="close()" @click.outside="close()">
    <button type="button" class="ax-icon-btn ax-lang__trigger" @click="toggle()" aria-haspopup="menu" :aria-expanded="open" aria-controls="ax-lang-menu" aria-label="Change language">
      <span class="ax-lang__code" x-text="$store.ax ? $store.ax.lang : 'EN'">EN</span>
    </button>
    <div id="ax-lang-menu" class="ax-dropdown ax-lang__menu" role="menu" x-show="open" x-transition.opacity.duration.150ms x-cloak>
      <button type="button" class="ax-dropdown__item is-active" role="menuitemradio" aria-checked="true" @click="setLang('EN'); close()"><span class="ax-lang__code">EN</span><span class="ax-lang__name">English</span><svg class="ax-dropdown__check ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M5 12l5 5l10 -10" /></svg></button>
      <button type="button" class="ax-dropdown__item" role="menuitemradio" aria-checked="false" @click="setLang('ES'); close()"><span class="ax-lang__code">ES</span><span class="ax-lang__name">Español</span></button>
      <button type="button" class="ax-dropdown__item" role="menuitemradio" aria-checked="false" @click="setLang('FR'); close()"><span class="ax-lang__code">FR</span><span class="ax-lang__name">Français</span></button>
      <button type="button" class="ax-dropdown__item" role="menuitemradio" aria-checked="false" @click="setLang('AR'); close()"><span class="ax-lang__code">AR</span><span class="ax-lang__name">العربية</span></button>
      <button type="button" class="ax-dropdown__item" role="menuitemradio" aria-checked="false" @click="setLang('DE'); close()"><span class="ax-lang__code">DE</span><span class="ax-lang__name">Deutsch</span></button>
      <button type="button" class="ax-dropdown__item" role="menuitemradio" aria-checked="false" @click="setLang('ZH'); close()"><span class="ax-lang__code">ZH</span><span class="ax-lang__name">中文</span></button>
      <button type="button" class="ax-dropdown__item" role="menuitemradio" aria-checked="false" @click="setLang('IT'); close()"><span class="ax-lang__code">IT</span><span class="ax-lang__name">Italiano</span></button>
      <button type="button" class="ax-dropdown__item" role="menuitemradio" aria-checked="false" @click="setLang('RU'); close()"><span class="ax-lang__code">RU</span><span class="ax-lang__name">Русский</span></button>
    </div>
  </div>

  <!-- 5 · FULLSCREEN -->
  <button type="button" class="ax-fullscreen ax-icon-btn" @click="toggleFullscreen()" :aria-pressed="full" aria-label="Toggle fullscreen">
    <svg class="ax-icon" x-show="!full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 8v-2a2 2 0 0 1 2 -2h2" /><path d="M4 16v2a2 2 0 0 0 2 2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" /><path d="M16 20h2a2 2 0 0 0 2 -2v-2" /></svg>
    <svg class="ax-icon" x-show="full" x-cloak viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M15 19v-2a2 2 0 0 1 2 -2h2" /><path d="M15 5v2a2 2 0 0 0 2 2h2" /><path d="M5 15h2a2 2 0 0 1 2 2v2" /><path d="M5 9h2a2 2 0 0 0 2 -2v-2" /></svg>
  </button>

  <!-- 6 · LIGHT/DARK QUICK-TOGGLE -->
  <button type="button" class="ax-theme-toggle ax-icon-btn" data-ax-toggle="theme" @click="toggleTheme()" :aria-pressed="theme==='dark'" aria-label="Toggle dark mode">
    <svg class="ax-icon" x-show="theme==='dark'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
    <svg class="ax-icon" x-show="theme!=='dark'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008" /></svg>
  </button>

  <!-- 7 · APP-GRID -->
  <div class="ax-apps" x-data="axDropdown()" @keydown.escape="close()" @click.outside="close()">
    <button type="button" class="ax-icon-btn ax-apps__trigger" @click="toggle()" aria-haspopup="menu" :aria-expanded="open" aria-controls="ax-apps-menu" aria-label="Open apps">
      <svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /><path d="M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /><path d="M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /><path d="M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /></svg>
    </button>
    <div id="ax-apps-menu" class="ax-dropdown ax-apps__menu" role="menu" x-show="open" x-transition.opacity.duration.150ms x-cloak>
      <p class="ax-dropdown__head">Quick apps</p>
      <div class="ax-apps__grid">
        <a class="ax-apps__tile" role="menuitem" href="/apps/email"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 7l9 6l9 -6" /></svg></span><span class="ax-apps__tile-label">Email</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/apps/chat"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1" /></svg></span><span class="ax-apps__tile-label">Chat</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/apps/calendar"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M11 15h1" /><path d="M12 15v3" /></svg></span><span class="ax-apps__tile-label">Calendar</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/apps/kanban"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 4l6 0" /><path d="M14 4l6 0" /><path d="M4 10a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -8" /><path d="M14 10a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /></svg></span><span class="ax-apps__tile-label">Kanban</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/apps/file-manager"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" /></svg></span><span class="ax-apps__tile-label">Files</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/apps/contacts"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2" /><path d="M10 16h6" /><path d="M11 11a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 8h3" /><path d="M4 12h3" /><path d="M4 16h3" /></svg></span><span class="ax-apps__tile-label">Contacts</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/ecommerce/invoices"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" /><path d="M9 7l1 0" /><path d="M9 13l6 0" /><path d="M13 17l2 0" /></svg></span><span class="ax-apps__tile-label">Invoices</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/apps/notes"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M5 5a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2l0 -14" /><path d="M9 7l6 0" /><path d="M9 11l6 0" /><path d="M9 15l4 0" /></svg></span><span class="ax-apps__tile-label">Notes</span></a>
        <a class="ax-apps__tile" role="menuitem" href="/pages/pricing"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M9 3h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" /></svg></span><span class="ax-apps__tile-label">Pricing</span></a>
      </div>
      <a class="ax-dropdown__foot" href="/widgets">View all apps</a>
    </div>
  </div>

  <!-- 8 · CART -->
  <div class="ax-cart" x-data="axDropdown()" @keydown.escape="close()" @click.outside="close()">
    <button type="button" class="ax-icon-btn ax-cart__trigger" @click="toggle()" aria-haspopup="menu" :aria-expanded="open" aria-controls="ax-cart-menu" aria-label="Shopping cart, 3 items">
      <svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304" /><path d="M9 11v-5a3 3 0 0 1 6 0v5" /></svg>
      <span class="ax-badge-count" aria-hidden="true">3</span>
    </button>
    <div id="ax-cart-menu" class="ax-dropdown ax-cart__menu" role="menu" x-show="open" x-transition.opacity.duration.150ms x-cloak>
      <div class="ax-dropdown__head ax-cart__head"><span>Cart</span><span class="ax-cart__count">3 items</span></div>
      <ul class="ax-cart__list" role="presentation">
        <li class="ax-cart__row"><img class="ax-cart__thumb" src="https://picsum.photos/seed/ax-prod-1/80" alt="" width="40" height="40" /><span class="ax-cart__meta"><b class="ax-cart__name">Aurora Wireless Buds</b><span class="ax-cart__qty ax-mono">1 × $129.00</span></span><button type="button" class="ax-cart__remove" aria-label="Remove item"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg></button></li>
        <li class="ax-cart__row"><img class="ax-cart__thumb" src="https://picsum.photos/seed/ax-prod-2/80" alt="" width="40" height="40" /><span class="ax-cart__meta"><b class="ax-cart__name">Verdigris Mechanical Keyboard</b><span class="ax-cart__qty ax-mono">1 × $189.00</span></span><button type="button" class="ax-cart__remove" aria-label="Remove item"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg></button></li>
        <li class="ax-cart__row"><img class="ax-cart__thumb" src="https://picsum.photos/seed/ax-prod-3/80" alt="" width="40" height="40" /><span class="ax-cart__meta"><b class="ax-cart__name">Glass Desk Mat — XL</b><span class="ax-cart__qty ax-mono">2 × $34.00</span></span><button type="button" class="ax-cart__remove" aria-label="Remove item"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg></button></li>
      </ul>
      <div class="ax-cart__subtotal"><span>Subtotal</span><span class="ax-mono">$386.00</span></div>
      <div class="ax-cart__actions">
        <a class="ax-btn ax-btn--ghost ax-btn--sm" href="/ecommerce/cart">View cart</a>
        <a class="ax-btn ax-btn--accent ax-btn--sm" href="/ecommerce/checkout">Checkout</a>
      </div>
    </div>
  </div>

  <!-- 9 · NOTIFICATIONS -->
  <div class="ax-notif" x-data="axDropdown()" @keydown.escape="close()" @click.outside="close()">
    <button type="button" class="ax-icon-btn ax-notif__trigger" @click="toggle()" aria-haspopup="dialog" :aria-expanded="open" aria-controls="ax-notif-menu" aria-label="Notifications, 2 unread">
      <svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
      <span class="ax-badge-count ax-badge-count--dot" aria-hidden="true">2</span>
    </button>
    <div id="ax-notif-menu" class="ax-dropdown ax-notif__menu" role="dialog" aria-label="Notifications" x-show="open" x-transition.opacity.duration.150ms x-cloak>
      <div class="ax-dropdown__head ax-notif__head">
        <span>Notifications</span>
        <button type="button" class="ax-notif__mark-all" data-ax-notif="mark-all">Mark all read</button>
      </div>
      <div class="ax-notif__tabs" role="tablist" aria-label="Notification filter">
        <button type="button" class="ax-notif__tab is-active" role="tab" aria-selected="true" data-ax-notif-tab="all">All</button>
        <button type="button" class="ax-notif__tab" role="tab" aria-selected="false" data-ax-notif-tab="unread">Unread</button>
      </div>
      <ul class="ax-notif__list" role="presentation">
        <li class="ax-notif__row is-unread" data-ax-notif-state="unread">
          <span class="ax-notif__chip"><img class="ax-avatar" src="https://i.pravatar.cc/64?img=32" alt="" width="34" height="34" /></span>
          <span class="ax-notif__body"><b class="ax-notif__title">Mara Chen mentioned you</b><span class="ax-notif__text">“Can you review the Q3 revenue figures before the sync?”</span><time class="ax-notif__time ax-mono">2m ago</time></span>
          <span class="ax-notif__dot" aria-label="Unread"></span>
        </li>
        <li class="ax-notif__row is-unread" data-ax-notif-state="unread">
          <span class="ax-notif__chip ax-notif__chip--success"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M5 12l5 5l10 -10" /></svg></span>
          <span class="ax-notif__body"><b class="ax-notif__title">Payment received</b><span class="ax-notif__text">Invoice #INV-2049 was paid — $1,280.00.</span><time class="ax-notif__time ax-mono">1h ago</time></span>
          <span class="ax-notif__dot" aria-label="Unread"></span>
        </li>
        <li class="ax-notif__row" data-ax-notif-state="read">
          <span class="ax-notif__chip"><img class="ax-avatar" src="https://i.pravatar.cc/64?img=15" alt="" width="34" height="34" /></span>
          <span class="ax-notif__body"><b class="ax-notif__title">New follower</b><span class="ax-notif__text">Devin Park started following your store.</span><time class="ax-notif__time ax-mono">5h ago</time></span>
        </li>
        <li class="ax-notif__row" data-ax-notif-state="read">
          <span class="ax-notif__chip ax-notif__chip--warning"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0" /><path d="M12 16h.01" /></svg></span>
          <span class="ax-notif__body"><b class="ax-notif__title">Low stock alert</b><span class="ax-notif__text">“Glass Desk Mat — XL” dropped below 10 units.</span><time class="ax-notif__time ax-mono">yesterday</time></span>
        </li>
      </ul>
      <p class="ax-notif__empty" data-ax-notif-empty="unread" hidden>No unread notifications.</p>
      <p class="ax-notif__empty" data-ax-notif-empty="all" hidden>You're all caught up.</p>
      <a class="ax-dropdown__foot" href="/pages/notifications">View all notifications</a>
      <span class="ax-notif__live" aria-live="polite"></span>
    </div>
  </div>

  <!-- 10 · PROFILE -->
  <div class="ax-profile" x-data="axDropdown()" @keydown.escape="close()" @click.outside="close()">
    <button type="button" class="ax-profile__trigger" @click="toggle()" aria-haspopup="menu" :aria-expanded="open" aria-controls="ax-profile-menu" aria-label="Account menu">
      <img class="ax-avatar ax-profile__avatar" src="https://i.pravatar.cc/64?img=12" alt="Jacob Gerrald" width="32" height="32" />
    </button>
    <div id="ax-profile-menu" class="ax-dropdown ax-profile__menu" role="menu" x-show="open" x-transition.opacity.duration.150ms x-cloak>
      <div class="ax-profile__card">
        <img class="ax-avatar" src="https://i.pravatar.cc/80?img=12" alt="" width="40" height="40" />
        <span class="ax-profile__card-meta"><b>Jacob Gerrald</b><small>jacob@vireo.io</small></span>
      </div>
      <a class="ax-dropdown__item" role="menuitem" href="/pages/profile"><svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>View Profile</a>
      <a class="ax-dropdown__item" role="menuitem" href="/pages/profile-settings"><svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>Account Settings</a>
      <a class="ax-dropdown__item" role="menuitem" href="/pages/support"><svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>Support</a>
      <a class="ax-dropdown__item" role="menuitem" href="/pages/activity-log"><svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg>Activity Log</a>
      <a class="ax-dropdown__item" role="menuitem" href="/pages/events"><svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" /><path d="M16 3l0 4" /><path d="M8 3l0 4" /><path d="M4 11l16 0" /><path d="M8 15h2v2h-2l0 -2" /></svg>Events</a>
      <div class="ax-dropdown__divider" role="separator"></div>
      <a class="ax-dropdown__item ax-dropdown__item--danger" role="menuitem" href="/pages/logout"><svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" /><path d="M9 12h12l-3 -3" /><path d="M18 15l3 -3" /></svg>Log Out</a>
    </div>
  </div>

  <!-- 11 · CUSTOMIZER TRIGGER -->
  <button type="button" class="ax-cog ax-icon-btn" data-ax-toggle="customizer" @click="$dispatch('ax-customizer-open')" aria-haspopup="dialog" aria-controls="ax-customizer" aria-label="Open theme customizer">
    <svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M6 4v4" /><path d="M6 12v8" /><path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M12 4v10" /><path d="M12 18v2" /><path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M18 4v1" /><path d="M18 9v11" /></svg>
  </button>

  <!-- OVERFLOW (mobile / tablet shed) -->
  <div class="ax-overflow" x-data="axDropdown()" x-show="$store.ax && $store.ax.overflow && $store.ax.overflow.length" @keydown.escape="close()" @click.outside="close()" x-cloak>
    <button type="button" class="ax-icon-btn ax-overflow__trigger" @click="toggle()" aria-haspopup="menu" :aria-expanded="open" aria-controls="ax-overflow-menu" aria-label="More">
      <svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
    </button>
    <!-- The shed rows are STATIC (not JS-injected): they live inside the
         x-data="axHeader()" root, so `setLang` / `toggleFullscreen` / `full`
         resolve up the Alpine scope chain exactly like the header copies do.
         Every row carries data-ax-shed="<key>" and is revealed by the SAME
         breakpoint that hides its header trigger (shell.css §18 RESPONSIVE) —
         so exactly one copy of each control is ever interactive. Keep the two
         in sync: the keys mirror _bindBands() in js/vireo/alpine/index.js. -->
    <div id="ax-overflow-menu" class="ax-dropdown ax-overflow__menu" role="menu" x-show="open" x-transition.opacity.duration.150ms x-cloak>
      <!-- LANGUAGE (shed < lg) — the 8 codes as chips; the full names stay in
           the wide-viewport menu where there is room for them. -->
      <div class="ax-overflow__group" data-ax-shed="lang" role="presentation">
        <p class="ax-dropdown__head">Language</p>
        <div class="ax-overflow__langs" role="group" aria-label="Change language">
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'EN' }" @click="setLang('EN'); close()">EN</button>
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'ES' }" @click="setLang('ES'); close()">ES</button>
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'FR' }" @click="setLang('FR'); close()">FR</button>
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'AR' }" @click="setLang('AR'); close()">AR</button>
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'DE' }" @click="setLang('DE'); close()">DE</button>
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'ZH' }" @click="setLang('ZH'); close()">ZH</button>
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'IT' }" @click="setLang('IT'); close()">IT</button>
          <button type="button" class="ax-overflow__lang ax-lang__code" :class="{ 'is-active': $store.ax.lang === 'RU' }" @click="setLang('RU'); close()">RU</button>
        </div>
      </div>

      <!-- FULLSCREEN (shed < lg) -->
      <button type="button" class="ax-dropdown__item" role="menuitem" data-ax-shed="fullscreen" @click="toggleFullscreen(); close()">
        <svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 8v-2a2 2 0 0 1 2 -2h2" /><path d="M4 16v2a2 2 0 0 0 2 2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" /><path d="M16 20h2a2 2 0 0 0 2 -2v-2" /></svg>
        <span x-text="full ? 'Exit fullscreen' : 'Fullscreen'">Fullscreen</span>
      </button>

      <!-- APP-GRID (shed < lg) — same tiles as the wide app-grid menu -->
      <div class="ax-overflow__group" data-ax-shed="apps" role="presentation">
        <p class="ax-dropdown__head">Quick apps</p>
        <div class="ax-apps__grid">
          <a class="ax-apps__tile" role="menuitem" href="/apps/email" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 7l9 6l9 -6" /></svg></span><span class="ax-apps__tile-label">Email</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/apps/chat" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1" /></svg></span><span class="ax-apps__tile-label">Chat</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/apps/calendar" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M11 15h1" /><path d="M12 15v3" /></svg></span><span class="ax-apps__tile-label">Calendar</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/apps/kanban" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 4l6 0" /><path d="M14 4l6 0" /><path d="M4 10a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -8" /><path d="M14 10a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /></svg></span><span class="ax-apps__tile-label">Kanban</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/apps/file-manager" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" /></svg></span><span class="ax-apps__tile-label">Files</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/apps/contacts" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2" /><path d="M10 16h6" /><path d="M11 11a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 8h3" /><path d="M4 12h3" /><path d="M4 16h3" /></svg></span><span class="ax-apps__tile-label">Contacts</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/ecommerce/invoices" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" /><path d="M9 7l1 0" /><path d="M9 13l6 0" /><path d="M13 17l2 0" /></svg></span><span class="ax-apps__tile-label">Invoices</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/apps/notes" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M5 5a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2l0 -14" /><path d="M9 7l6 0" /><path d="M9 11l6 0" /><path d="M9 15l4 0" /></svg></span><span class="ax-apps__tile-label">Notes</span></a>
          <a class="ax-apps__tile" role="menuitem" href="/pages/pricing" @click="close()"><span class="ax-apps__tile-icon"><svg class="ax-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M9 3h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" /></svg></span><span class="ax-apps__tile-label">Pricing</span></a>
        </div>
      </div>

      <!-- CART (shed < md) — the full basket panel needs width it does not have
           on a phone, so the row links straight through to the cart page. -->
      <a class="ax-dropdown__item" role="menuitem" data-ax-shed="cart" href="/ecommerce/cart" @click="close()">
        <svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304" /><path d="M9 11v-5a3 3 0 0 1 6 0v5" /></svg>
        <span>Cart</span>
        <span class="ax-overflow__count ax-mono" aria-hidden="true">3</span>
      </a>

      <!-- CUSTOMIZER (shed < md) -->
      <button type="button" class="ax-dropdown__item" role="menuitem" data-ax-shed="customizer" @click="close(); $dispatch('ax-customizer-open')">
        <svg class="ax-icon ax-dropdown__lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" aria-hidden="true"><path d="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M6 4v4" /><path d="M6 12v8" /><path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M12 4v10" /><path d="M12 18v2" /><path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M18 4v1" /><path d="M18 9v11" /></svg>
        <span>Customize theme</span>
      </button>
    </div>
  </div>