// HANDLE BROWSE-ALL SCRIPT
// STEP 1: Initialize Browse keydown activation
const $browseLink = $('.cmp-bmw-header__browse-link');
const $browseNav = $browseLink.find('.cmp-bmw-header__nav-link');
const $header = $('.cmp-bmw-header-view'); // Assuming this is the header element
 
$browseNav.on('keydown', function (e) {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    setTimeout(() => {
      initAccessibleBrowse(this);
    }, 50);
  }
});
 
// STEP 1.1: Click event to toggle browse dropdown
$browseLink.on('click', function (e) {
  e.preventDefault();
  const isOpen = $browseLink.hasClass("cmp-header-browse--opened");
  if (isOpen) {
    closeBrowse();
  } else {
    initAccessibleBrowse(this);
  }
});
 
// STEP 2: Keep Browse open on focusin
$(".cmp-bmw-header-view__nav-container").on("focusin", function () {
  $browseLink.addClass("cmp-header-browse--opened");
  $header.addClass("sticky-header"); // Add sticky class
  $(".cmp-bmw-header-view__text-mobile").removeClass("cmp-bmw-header-view__header-hidden");
});
 
// STEP 3: Close on Escape anywhere in document when dropdown is open
$(document).on("keydown", function (e) {
  const isOpen = $browseLink.hasClass("cmp-header-browse--opened");
 
  if (e.key === "Escape" && isOpen) {
    closeBrowse();
  }
});
 
// Function to close the browse dropdown
function closeBrowse() {
  $browseLink.removeClass("cmp-header-browse--opened");
  $header.removeClass("sticky-header"); // Remove sticky class
  $(".cmp-bmw-header-view__text-mobile").addClass("cmp-bmw-header-view__header-hidden");
  $(".cmp-bmw-header-view--transparent").removeClass("cmp-bmw-header-view--navbar-active");
  $browseNav.focus();
}
 
// STEP 4: Arrow Key Navigation (up/down)
document.addEventListener('keydown', function (e) {
  const focusable = Array.from(document.querySelectorAll('a, button, input, textarea, [tabindex="0"]'))
    .filter(el => el.offsetParent !== null);
 
  const currentIndex = focusable.indexOf(document.activeElement);
 
  if (e.key === "ArrowDown") {
    e.preventDefault();
    const next = focusable[currentIndex + 1] || focusable[0];
    next.focus();
  }
 
  if (e.key === "ArrowUp") {
    e.preventDefault();
    const prev = focusable[currentIndex - 1] || focusable[focusable.length - 1];
    prev.focus();
  }
});
 
// STEP 5: Init Browse dropdown and focus
function initAccessibleBrowse(anchor) {
  const $anchor = $(anchor);
  const $navContainer = $('.cmp-bmw-header-view__nav-container');
 
  if (!$anchor.length || !$navContainer.length) return;
 
  $(".cmp-bmw-header__search").addClass("hide");
  $(".cmp-bmw-header-view__text-mobile-search").addClass("hide");
 
  $browseLink.addClass("cmp-header-browse--opened");
  $header.addClass("sticky-header"); // Add sticky class
  $(".cmp-bmw-header-view__text-mobile").removeClass("cmp-bmw-header-view__header-hidden");
  $(".cmp-bmw-header-view--transparent").addClass("cmp-bmw-header-view--navbar-active");
 
  $navContainer.removeClass("hide");
 
  // Prevent visible outline if triggered by Enter
  $navContainer.attr("tabindex", "-1");
  setTimeout(() => $navContainer.focus(), 10);
}
==================================================
CSS:
.cmp-bmw-header-view__nav-container:focus {
  outline: none;
  box-shadow: none;
}
 
/* Dropdown hidden by default */
.cmp-bmw-header-view__nav-container.hide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
}
 
/* Dropdown shown */
.cmp-header-browse--opened + .cmp-bmw-header-view__nav-container,
.cmp-bmw-header-view__nav-container:focus-within {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.2s ease-in-out;
}
 
/* Sticky header styles */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000; /* Adjust as necessary */
  background-color: white; /* Ensure background is set */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for effect */
}

 HEADER IS HIDDEN WHEN WE OPEN BROWSE DROP DOWN , HOW TO FIX THIS ?