/* Department dropdowns in the desktop menu bar - see sql/192.
 *
 * Journal3 draws a department's subcategories as a cascading list: one row per
 * subcategory, each opening its own flyout. A marketplace department menu is a
 * panel instead - the subcategories as column headings, each with its own
 * subcategories listed under it, all visible at once. sql/192 makes every bar
 * entry carry two levels; this file lays them out.
 *
 * SPECIFICITY. The theme styles these dropdowns through selectors such as
 * `.menu-item.dropdown:not(.mega-menu):not(#search) > .j-dropdown` - the
 * :not(#search) counts as an id, so no class-only selector can override the
 * 100px width, the item padding, the shadow or the ellipsis it sets. Every rule
 * here therefore starts from #main-menu, the element id the theme gives the
 * desktop bar (its own rules use it too; it is not a module id). The nested
 * list is reset property by property rather than trusted to inherit sensibly,
 * because whatever the theme leaves on it - absolute position, fixed width,
 * shadow - shows up as lists drawn over each other.
 *
 * The mobile menu is not inside .desktop-main-menu-wrapper and keeps its
 * accordion. */

/* The panel. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown {
  --dropdown-width: auto;
  width: max-content !important;
  min-width: 0 !important;
}

/* First-level subcategories flow down four columns, each heading kept together
   with its list. Columns rather than a grid: a grid lines headings up in rows,
   and a long list in one column then has to push the whole next row down -
   any height the theme miscounts shows up as lists drawn over headings. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu {
  display: block !important;
  column-count: 4;
  column-gap: 40px;
  width: 880px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 24px 28px !important;
}

/* Every panel opens from the start of the bar, not under its own entry. An
   880px panel hung from an entry in the middle of the bar runs off the screen
   whichever way it is aligned; anchored to the bar it always fits. The entries
   stop being the positioning context and the bar's list becomes it. The
   theme's pointer triangle is aimed at the entry, so it goes. */
.desktop-main-menu-wrapper #main-menu > .j-menu {
  position: relative;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown {
  position: static !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown {
  left: 0 !important;
  right: auto !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown::before {
  display: none !important;
}

/* A block: its heading, then its own list, never split across columns.
   The theme gives every dropdown row min-height: 50px; here that is spacing
   nobody asked for, on the blocks and on the rows inside them alike. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li {
  display: inline-block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > a {
  display: block !important;
  padding: 0 0 6px !important;
  min-height: 0 !important;
  background: none !important;
}

/* Headings: the text sits in .links-text, which carries the theme's font, so
   weight and colour go on it rather than on the link. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > a .links-text {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #1f2a29 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > a::after,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > a .open-menu,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown .j-dropdown .count-badge {
  display: none !important;
}

/* Under each heading, its own subcategories - always open, in the column. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > .j-dropdown {
  display: block !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > .j-dropdown::before {
  display: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a {
  display: block !important;
  padding: 3px 0 !important;
  min-height: 0 !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a .links-text {
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #5b6665 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a:hover .links-text,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown > .j-menu > li > a:hover .links-text {
  color: #195C5B !important;
}

/* Full names, wrapped, instead of the theme's one-line ellipsis. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.multi-level.dropdown > .j-dropdown .links-text {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ---------------------------------------------------------------------------
 * "Categories" - the first entry of the bar (sql/194). It drops a vertical list
 * of the departments ("Flyout / All Categories"), and each department opens a
 * panel beside the list: its subcategories as column headings with their own
 * subcategories under them, the same layout as the bar's dropdowns above.
 *
 * The list is the positioning context, so every department's panel opens at
 * the top of the list and at least as tall as it, instead of hanging from its
 * own row.
 * --------------------------------------------------------------------------- */

/* The entry itself: the menu icon in the brand colour. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout > a::before {
  color: #195C5B !important;
  margin-right: 6px !important;
}

/* The drop: a plain white list. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout > .j-dropdown {
  --dropdown-width: auto;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu {
  position: relative !important;
  display: block !important;
  width: 260px !important;
  padding: 8px 0 !important;
  background: #fff !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 8px 18px !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > a .menu-image img {
  display: block;
  width: 28px !important;
  height: 28px !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > a .links-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1f2a29 !important;
  white-space: nowrap !important;
}

/* The row whose panel is open. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item:hover > a,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item.open > a {
  background: #f2f7f6 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item:hover > a .links-text,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item.open > a .links-text {
  color: #195C5B !important;
}

/* The theme's row arrow and "+" toggle, and the product counts. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > a::after,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu .open-menu,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu .count-badge {
  display: none !important;
}

/* The panel beside the list. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown {
  top: 0 !important;
  left: 100% !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  background: #fff !important;
  border-left: 1px solid #e6e8eb !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown::before {
  display: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu {
  display: block !important;
  column-count: 3;
  column-gap: 40px;
  width: 720px;
  max-width: calc(100vw - 320px);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 22px 28px !important;
  background: none !important;
  box-shadow: none !important;
}

/* A heading block, never split across columns. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li {
  display: inline-block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > a {
  display: block !important;
  padding: 0 0 6px !important;
  min-height: 0 !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > a::after {
  display: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > a .links-text {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #1f2a29 !important;
}

/* Under each heading, its own subcategories - always open, in the column. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > .j-dropdown {
  display: block !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > .j-dropdown::before {
  display: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a {
  display: block !important;
  padding: 3px 0 !important;
  min-height: 0 !important;
  background: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a::after {
  display: none !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu > li > .j-dropdown > .j-menu > li > a .links-text {
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #5b6665 !important;
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown > .j-menu a:hover .links-text {
  color: #195C5B !important;
}

/* Full names, wrapped, instead of the theme's one-line ellipsis. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.flyout .flyout-menu > .j-menu > .flyout-menu-item > .j-dropdown .links-text {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ---------------------------------------------------------------------------
 * One line under the bar, none above it. The theme draws a line above the bar
 * as the border-top of the wrapper's ::after (full width, scheme border colour);
 * the same element carries the line below instead, so colour and extent stay
 * the theme's.
 * --------------------------------------------------------------------------- */
.desktop-main-menu-wrapper.menu-bar::after {
  border-top-width: 0 !important;
  border-bottom-width: 1px !important;
}