/* Compact brand finder for long Z.One Mega Menu category lists. */
#amegamenu .anav-top .acategory-content:has(.category-brand-finder) {
  display: grid !important;
  grid-template-columns: 185px minmax(0, 1fr);
  align-items: start;
  column-gap: 24px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) > .aitem {
  display: contents;
  min-width: 0;
  width: auto;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-brand-finder {
  grid-column: 1;
  grid-row: 2;
  margin: 12px 0 0;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .brand-finder__label {
  color: #20252a;
  display: block;
  font-size: .82rem;
  font-weight: 700;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .brand-finder__input {
  box-sizing: border-box;
  display: block;
  margin-top: 7px;
  max-width: 185px;
  padding: 9px 10px;
  width: 100%;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-subs {
  display: grid;
  gap: 5px 18px;
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  line-height: 1.25;
  margin: 0;
  max-height: 310px;
  overflow-y: auto;
  padding: 1px 10px 2px 0;
  scrollbar-color: #008306 transparent;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-subs li {
  min-width: 0;
  padding: 2px 0;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-subs a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#amegamenu .anav-top .category-subs li.is-brand-hidden {
  display: none;
}

#amegamenu .anav-top .brand-search-highlight {
  background: #ffffff;
  box-shadow: inset 0 -2px 0 #008306;
  color: #008306;
  font-weight: 700;
  padding: 0 1px;
}

/* The historical theme only keeps a submenu open on mouse hover. A brand
   search field is inside this panel: once it has focus, it must remain open
   while the user types and the filtered list is redrawn. */
#amegamenu .anav-top .amenu-item.plex:focus-within .adropdown {
  margin-top: 0;
  opacity: 1;
  transition: all .3s;
  visibility: visible;
}

/* More prominent brand signature in the desktop header. */
#header .header-logo img {
  max-height: 110px;
}

@media (max-width: 991.98px) {
  #header .header-logo img {
    max-height: 64px;
  }

  /* Fallback for pages that were rendered with the desktop menu then viewed
     on a phone (for example after a browser cache restore).  Keep the top
     level usable and do not expose its desktop drop-down panels over the
     mobile page.  Native mobile markup (#mobile-amegamenu) is unchanged. */
  #amegamenu .anav-top {
    display: grid;
    gap: 2px 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #amegamenu .anav-top .amenu-item {
    float: none;
    min-width: 0;
    width: auto;
  }

  #amegamenu .anav-top .amenu-link {
    align-items: center;
    display: flex;
    min-height: 42px;
  }

  #amegamenu .anav-top .adropdown {
    display: none !important;
  }

  #left-column .left-categories {
    display: none;
  }

  #mobile-amegamenu .anav-top .acategory-content:has(.category-brand-finder) {
    display: block !important;
  }

  #mobile-amegamenu .anav-top .acategory-content:has(.category-brand-finder) > .aitem {
    display: block;
  }

  #mobile-amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-subs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 260px;
  }
}