/*
 * NorgesProfil mega menu — shared by the WordPress header (this plugin) and
 * the Nuxt storefront (imported from nuxt.config.ts). One file, so the two
 * headers cannot drift apart.
 *
 * The category name in the bar is an ordinary link. The arrow next to it opens
 * (and closes) a two-pane panel: the category's subcategories as a list on the
 * left, and on the right a pane in the category's colour with the next level
 * for the subcategory being pointed at. Every pane is in the HTML, so all
 * links are there for search engines; only one pane shows at a time.
 *
 * Nothing opens on hover. `np-mega-open` on the <li> is the one open state,
 * set by script (Vue in the storefront, mega-menu.js on WordPress): a click on
 * the arrow toggles it; while a panel is open, pointing at another category
 * moves it there; the close button, Escape, the arrow again or a click outside
 * removes it.
 *
 * Markup (identical on both sides, deliberately without <ul>/<li> inside the
 * panel so neither Flatsome's nor the storefront's generic `.nav li` rules
 * reach into it):
 *
 *   <li class="np-mega [np-mega-open]" style="--np-mega-color:#ffe6d9">
 *     <a>Profilartikler</a>
 *     <button class="np-mega-toggle" aria-expanded="false"><svg/></button>
 *     <div class="np-mega-panel">
 *       <div class="np-mega-inner"><div class="np-mega-cols">
 *         <button class="np-mega-close"></button>
 *         <div class="np-mega-list [np-mega-list--long]">
 *           <a class="np-mega-head np-mega-head--main [is-active]" data-np-mega="overview">Profilartikler</a>
 *           <a class="np-mega-head [is-active] [is-current]" data-np-mega="0">Flasker <span class="np-mega-count">5</span></a> …
 *         </div>
 *         <div class="np-mega-panes">
 *           <div class="np-mega-pane np-mega-pane--overview [is-active]" data-np-mega="overview">
 *             <div class="np-mega-headline">Profileringsartikler som markedskanal.</div>
 *             <p class="np-mega-intro">Giveaways er en målrettet …</p>
 *             <a class="np-mega-all">Se alle i Profilartikler</a>
 *             <img class="np-mega-art" loading="lazy">
 *           </div>
 *           <div class="np-mega-pane [np-mega-pane--art] [is-active]" data-np-mega="0">
 *             <div class="np-mega-pane-head">
 *               <div class="np-mega-headline np-mega-headline--sub">Flasker med trykk …</div>
 *               <p class="np-mega-intro">…</p>
 *               <a class="np-mega-all">Se alle i Flasker</a>
 *               <img class="np-mega-art" loading="lazy">
 *             </div>
 *             <div class="np-mega-sub-label">Underkategorier</div>
 *             <div class="np-mega-links">
 *               <a class="np-mega-link"><img class="np-mega-tile-img"><span class="np-mega-tile-name">Drikkeflasker</span></a> …
 *             </div>
 *
 * To begin with the main category's own row is marked and the pane shows the
 * main category itself (the overview pane). `is-active` then follows the pointer at once
 * (Vue in the storefront, mega-menu.js on WordPress), except while the pointer
 * is travelling towards the pane: the rows it crosses on that diagonal do not
 * change the selection. Closing the panel returns it to the overview.
 *
 * Inside the panel a mouse click always follows the link. On a touch screen,
 * where there is no hover, the first tap on a subcategory with a next level
 * shows its pane; the second tap follows the link.
 *
 * Mobile (off-canvas menu):
 *
 *   <li class="np-mm-item [np-mm-open]">
 *     <a>Profilklær</a>
 *     <button class="np-mm-toggle"></button>
 *     <div class="np-mm-sub"><a class="np-mm-link">Overdeler</a> …
 */

/* ---------- Desktop panel ---------- */

/* The panel spans the whole category bar, so it must anchor to #wide-nav
   rather than to the menu item or the list. The item lays out its link and
   its arrow side by side. */
#wide-nav .header-bottom-nav {
  position: static;
  /* One row, always: the items shrink in steps on narrower windows instead
     (see "Narrower windows" below). */
  flex-wrap: nowrap;
}

/* Every item's link is the same box, with or without an arrow next to it, so
   the underlines of the whole bar sit on one line. (Inside the flex item of a
   category with an arrow the link would otherwise grow to its full padded
   height and carry its underline down to the edge of the bar.) */
#wide-nav .header-bottom-nav > li > a {
  display: block;
  /* Line height and padding are both set here, so the box — and with it the
     underline along its bottom edge — is the same in the storefront and in
     WordPress, whose theme gives menu links a different line height. */
  line-height: 32px;
  padding-top: 3.5px;
  padding-bottom: 3.5px;
  white-space: nowrap;
}

#wide-nav li.np-mega {
  position: static;
  display: flex;
  align-items: center;
  /* The tab's colour must come and go at once. Both headers give menu items a
     background transition; with it, switching panels shows the old tab fading
     out and the new one fading in inside its (instant) shadow. */
  transition: none !important;
}

#wide-nav li.np-mega > a,
#wide-nav li.np-mega > button.np-mega-toggle {
  transition: none !important;
}

/* The top-level link's underline bar is positioned against the link. With the
   item itself no longer positioned, the link has to be — otherwise the bar of
   the active category stretches across the whole category row. */
#wide-nav li.np-mega > a {
  position: relative;
}

/* The arrow that opens and closes the panel. A button of its own next to the
   category name, comfortably larger than the glyph it shows. The selector is
   this specific to hold against the themes' generic button styles. */
#wide-nav li.np-mega > button.np-mega-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 32px;
  min-height: 0;
  margin: 0 -6px 0 5px;
  padding: 0;
  border: 0;
  /* (!important: the WordPress theme rounds every button fully.) */
  border-radius: 4px !important;
  background: transparent;
  box-shadow: none;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wide-nav li.np-mega > button.np-mega-toggle:hover,
#wide-nav li.np-mega > button.np-mega-toggle:focus-visible,
#wide-nav li.np-mega.np-mega-open > button.np-mega-toggle {
  opacity: 1;
}

#wide-nav li.np-mega > button.np-mega-toggle:hover {
  background: rgba(0, 0, 0, 0.07);
}

#wide-nav li.np-mega > button.np-mega-toggle svg {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}

/* Open: the arrow points up. */
#wide-nav li.np-mega.np-mega-open > button.np-mega-toggle svg {
  transform: rotate(180deg);
}

/* The tab: while a category's panel is open, its menu item (name and arrow)
   takes the category's own colour — the colour of the pane below — over the
   full height of the white bar: the item's background, extended by shadows of
   the same colour. Upwards and downwards they reach past the bar (what spills
   over is hidden behind the header band and the panel); sideways they reach
   only `--np-mega-tab` into the gap to the neighbouring items, which the
   narrower layouts below shrink along with the gap — so the tab never runs in
   under the next category's name. The panel then visibly hangs from the item. */
/* (!important: the WordPress theme sets the link colour with a heavier selector.) */
#wide-nav li.np-mega.np-mega-open > a,
#wide-nav li.np-mega.np-mega-open > button.np-mega-toggle {
  color: var(--np-mega-on, #000) !important;
}

#wide-nav li.np-mega.np-mega-open {
  --c: var(--np-mega-color, #e6e6e6);
  --x: var(--np-mega-tab, 12px);
  background-color: var(--c);
  box-shadow:
    0 -16px 0 var(--c),
    0 16px 0 var(--c),
    var(--x) 0 0 var(--c),
    calc(-1 * var(--x)) 0 0 var(--c),
    var(--x) -16px 0 var(--c),
    var(--x) 16px 0 var(--c),
    calc(-1 * var(--x)) -16px 0 var(--c),
    calc(-1 * var(--x)) 16px 0 var(--c);
}

/* While a panel is open the tab is the only marker on the bar: the underline
   that marks the category the visitor is in is hidden (the page it refers to
   is behind the panel anyway) and comes back when the panel closes. */
#wide-nav .header-bottom-nav:has(> li.np-mega-open) > li > a::before {
  opacity: 0;
}

.np-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  /* White, like the category bar it opens from; the coloured stripe along the
     top edge marks where the panel begins. Solid behind the menu's own
     content, so the page does not ghost through the text; the sheet below
     (::after) continues it. */
  background: #fff;
  /* A thin stripe in the category's colour across the whole top edge: the tab
     above runs into it, so it reads as a tab on the panel and not as a
     coloured menu item. */
  border-top: 6px solid var(--np-mega-color, #e6e6e6);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

/* Opening, and switching from one panel to another, is immediate: a fade
   would let the page show through for a moment between the two. Only the
   last panel closing fades out (the transition on .np-mega-panel above). */
li.np-mega.np-mega-open > .np-mega-panel,
.header-bottom-nav:has(> li.np-mega-open) .np-mega-panel {
  transition: none;
}

li.np-mega.np-mega-open > .np-mega-panel {
  visibility: visible;
  opacity: 1;
}

/* The page below an open panel is covered by a continuation of the panel's own
   surface, down past the bottom of the window. Only on the open panel: a
   closed one would otherwise make every page taller by the height of the
   sheet. It is part of the panel, so a click on it closes the menu (like any
   click in the panel that is not on a link) instead of reaching the page
   underneath. */
li.np-mega.np-mega-open > .np-mega-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100vmax;
  /* Starts solid where it meets the panel and eases to very slightly
     see-through, so there is no edge between the two. */
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.95) 160px);
}

/* While a panel is open:
   - the header rises above everything sticky on the page (the category filter
     bar sits at z-index 40 and would otherwise cut through the panel);
   - the page itself does not scroll — the header would slide away under the
     panel. A panel taller than the window has its own scroll. The scrollbar
     gutter stays reserved so the page does not jump sideways. */
#header:has(li.np-mega.np-mega-open) {
  z-index: 1000;
}

html:has(#wide-nav li.np-mega.np-mega-open) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* As tall as the window allows below the bar. Script measures that when a
   panel is opened (the bar may be at the top of the page or stuck to the top
   of the window); the fallback assumes the bar under the full header. */
.np-mega-inner {
  max-height: var(--np-mega-room, calc(100vh - 210px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A white margin runs above and below, so the coloured pane sits inside the
   panel instead of ending flush with its edges. */
.np-mega-cols {
  position: relative;
  max-width: 1370px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 28px 0;
  display: grid;
  /* The list gives way on narrower windows, leaving the pane room. */
  grid-template-columns: clamp(250px, 30vw, 400px) minmax(0, 1fr);
}

/* Close button, in the top right corner of the pane. */
.np-mega-panel button.np-mega-close {
  position: absolute;
  top: 38px;
  right: 10px;
  z-index: 1;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  line-height: 1;
  color: var(--np-mega-on, #000);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-mega-panel button.np-mega-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

li.np-mega-dark .np-mega-panel button.np-mega-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.np-mega-panel button.np-mega-close svg {
  width: 20px;
  height: 20px;
}

/* ---- Left: the subcategories ---- */

/* Always one column: with two, the pointer crosses the second column on its
   way to the pane and changes the selection. */
.np-mega-list {
  padding: 0;
}

.np-mega-panel a.np-mega-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 15px;
  font-size: 17.5px;
  line-height: 24px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
}

/* Long lists (Profilartikler, Firmagaver) get somewhat tighter rows; on a
   smaller screen the panel scrolls rather than squeezing them further. */
.np-mega-panel .np-mega-list--long a.np-mega-head {
  padding: 6px 15px;
  font-size: 16px;
  line-height: 22px;
}

/* The main category heads the list, set apart from the subcategories under it. */
.np-mega-panel a.np-mega-head--main {
  margin-bottom: 10px;
  font-weight: 700;
}

/* On rows that have a next level: how many subcategories the pane will show.
   Rows without it show nothing. */
.np-mega-count {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: #777;
}

/* Where the visitor is (set by the storefront, which knows the page). */
.np-mega-panel a.np-mega-head.is-current,
.np-mega-panel a.np-mega-link.is-current {
  font-weight: 700;
}

/* The active subcategory takes the pane's colours, so the two read as one. */
.np-mega-panel a.np-mega-head.is-active {
  background: var(--np-mega-color, #f3f3f3);
  color: var(--np-mega-on, #000);
}

.np-mega-panel a.np-mega-head.is-active .np-mega-count {
  color: inherit;
  opacity: 0.7;
}

/* ---- Right: one pane per subcategory ---- */

/* The pane is a small version of the category page's header: the header's
   own colour and text colour (--np-mega-color / --np-mega-on, the latter white
   on a dark header), its headline in the header's large type, the intro, and
   the outlined pill button. */
.np-mega-panes {
  background: var(--np-mega-color, #f3f3f3);
  color: var(--np-mega-on, #000);
  min-height: 320px;
}

.np-mega-pane {
  display: none;
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  padding: 36px 44px 38px;
}

.np-mega-pane.is-active {
  display: block;
}

/* A subcategory's pane is a column, so that its head can fill the pane when
   nothing comes after it (see the header picture below). */
.np-mega-pane:not(.np-mega-pane--overview).is-active {
  display: flex;
  flex-direction: column;
}

.np-mega-pane-head:last-child {
  flex: 1 0 auto;
}

/* A subcategory's pane has a head — headline, intro and the way in, with the
   subcategory's picture beside them — and under it the next level across the
   pane's full width, as tiles. */
.np-mega-pane-head {
  position: relative;
}

.np-mega-pane--art > .np-mega-pane-head {
  min-height: 170px;
  padding-right: 210px;
}

.np-mega-pane-head > .np-mega-art {
  top: 0;
  right: 0;
  bottom: auto;
  width: 170px;
  height: 170px;
}

/* A pane without a next level shows the picture from the subcategory's page
   header instead (a cut-out, usually a person): larger, and standing on the
   pane's bottom edge like in the overview. */
.np-mega-pane-head--hero {
  min-height: 260px;
  padding-right: 42%;
}

.np-mega-pane-head > .np-mega-art.np-mega-art--hero {
  top: auto;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  max-width: 38%;
  max-height: 100%;
}

.np-mega-pane-head:last-child > .np-mega-art.np-mega-art--hero {
  bottom: -38px;
  max-height: min(calc(100% + 18px), 460px);
}

/* The overview pane with a tile picture (no header picture) keeps the picture
   beside its text. */
.np-mega-pane--overview.np-mega-pane--art {
  padding-right: 250px;
}

/* The overview pane with the header's picture: the text keeps to the left,
   the picture stands on the pane's bottom edge to the right. */
.np-mega-pane--hero {
  padding-right: 44%;
}

/* The category's own headline and intro (from its page header), in the
   header's type: large and regular, not bold. */
.np-mega-headline {
  max-width: 640px;
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: inherit;
}

/* A subcategory's headline is a step smaller: its pane also holds the links. */
.np-mega-headline--sub {
  font-size: 26px;
  line-height: 32px;
}

.np-mega-panel .np-mega-intro {
  max-width: 620px;
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 26px;
  color: inherit;
}

/* "Se alle i …": the outlined pill of the category header ("Les mer"). */
.np-mega-panel a.np-mega-all {
  display: inline-block;
  margin: 0 0 24px;
  padding: 7px 16px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  text-transform: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.np-mega-panel a.np-mega-all:hover {
  background: var(--np-mega-on, #000);
  border-color: var(--np-mega-on, #000);
  color: var(--np-mega-color, #fff);
}

/* The next level of categories. It must read as a level of its own and not as
   more body text under the intro: a small caption with a rule above it, and
   each category as a tile with its picture. */
.np-mega-sub-label {
  margin: 4px 0 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}

li.np-mega-dark .np-mega-sub-label {
  border-top-color: rgba(255, 255, 255, 0.3);
}

/* One tile per category: its picture with the name under it, in a grid that
   fills the pane's width. The pictures are lazy and sit in panes that are not
   rendered until shown, so only the open pane's are downloaded. */
.np-mega-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 4px;
  margin: 0 -8px;
}

.np-mega-panel a.np-mega-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* (A grid item is by default as wide as its longest word: let it shrink.) */
  min-width: 0;
  margin: 0;
  padding: 10px 8px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: inherit;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  transition: background-color 0.15s ease;
}

.np-mega-panel a.np-mega-link:hover,
.np-mega-panel a.np-mega-link:focus-visible {
  background: rgba(255, 255, 255, 0.6);
}

/* Where the visitor is. */
.np-mega-panel a.np-mega-link.is-current {
  font-weight: 700;
}

/* A long name stays inside its tile: it wraps between words, and uses the
   tile's side padding too, which is room enough for the longest single word in
   the catalogue ("multifunksjonspenner"). Only a word longer still is
   hyphenated, or as a last resort broken. */
.np-mega-tile-name {
  display: block;
  box-sizing: border-box;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 0 2px;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* The tile images have a white background, which `multiply` lets the pane's
   colour through. */
.np-mega-tile-img {
  display: block;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* A category without a picture keeps its place in the grid. */
.np-mega-tile-img--none {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
}

/* On a dark header `multiply` would darken the product itself: the picture
   sits on a white card instead. */
li.np-mega-dark .np-mega-panel a.np-mega-link:hover,
li.np-mega-dark .np-mega-panel a.np-mega-link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

li.np-mega-dark .np-mega-tile-img {
  mix-blend-mode: normal;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-sizing: border-box;
}

li.np-mega-dark .np-mega-tile-img--none {
  background: rgba(255, 255, 255, 0.16);
}

/* The picture is not rendered (and, being lazy, not downloaded) until its
   panel is open and its pane is the active one. */
.np-mega-art {
  display: none;
  position: absolute;
  right: 30px;
  bottom: 24px;
  width: 200px;
  height: 200px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

li.np-mega.np-mega-open .np-mega-pane.is-active .np-mega-art {
  display: block;
}

/* The header's picture (a cut-out on a transparent background): larger, and
   standing on the pane's bottom edge. */
.np-mega-art.np-mega-art--hero {
  right: 24px;
  bottom: 0;
  width: auto;
  height: auto;
  max-width: 40%;
  max-height: calc(100% - 20px);
  object-position: right bottom;
  mix-blend-mode: normal;
}

/* Tile images have a white background, which `multiply` lets the pane's colour
   through — but on a dark header that would darken the product itself, so
   there they sit on a white card. */
li.np-mega-dark .np-mega-art:not(.np-mega-art--hero) {
  mix-blend-mode: normal;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-sizing: border-box;
}

/* The top-level underline bar belongs to the top-level link only. */
.np-mega-panel a::before,
.np-mega-panel a::after {
  display: none !important;
}

/* ---------- Narrower windows ---------- */

/* A window narrower than the panel's content: a gutter on both sides, so the
   coloured pane and the marked row do not run into the window's edges. */
@media (max-width: 1400px) {
  .np-mega-cols {
    padding-left: 15px;
    padding-right: 15px;
  }

  .np-mega-panel button.np-mega-close {
    right: 25px;
  }
}

/* The bar stays on one row down to where the mobile header takes over
   (850px): the gaps, the text and the arrows shrink in steps. */
@media (max-width: 1240px) {
  #wide-nav .header-bottom-nav {
    --np-mega-tab: 8px;
  }

  #wide-nav .header-bottom-nav > li {
    margin-left: 9px;
    margin-right: 9px;
  }

  #wide-nav .header-bottom-nav > li:first-child {
    margin-left: 0;
  }

  #wide-nav .header-bottom-nav > li > a {
    font-size: 16px;
  }

  #wide-nav li.np-mega > button.np-mega-toggle {
    width: 24px;
    margin-left: 3px;
  }
}

@media (max-width: 1000px) {
  #wide-nav .header-bottom-nav {
    --np-mega-tab: 5px;
  }

  #wide-nav .header-bottom-nav > li {
    margin-left: 6px;
    margin-right: 6px;
  }

  /* The pane is too narrow to hold a picture beside its text. */
  .np-mega-pane--overview.np-mega-pane--art,
  .np-mega-pane--hero {
    padding-right: 40px;
  }

  .np-mega-pane--art > .np-mega-pane-head,
  .np-mega-pane-head--hero {
    min-height: 0;
    padding-right: 0;
  }

  .np-mega-headline {
    font-size: 26px;
    line-height: 32px;
  }

  .np-mega-headline--sub {
    font-size: 22px;
    line-height: 28px;
  }

  .np-mega-pane .np-mega-art {
    display: none !important;
  }

  .np-mega-pane {
    padding: 24px 28px 28px;
  }

  #wide-nav .header-bottom-nav > li > a {
    font-size: 15px;
  }

  #wide-nav li.np-mega > button.np-mega-toggle {
    width: 20px;
    margin-left: 2px;
    margin-right: -4px;
  }
}

@media (max-width: 905px) {
  #wide-nav .header-bottom-nav {
    --np-mega-tab: 3px;
  }

  #wide-nav .header-bottom-nav > li {
    margin-left: 4px;
    margin-right: 4px;
  }

  #wide-nav .header-bottom-nav > li > a {
    font-size: 13.5px;
  }

  #wide-nav li.np-mega > button.np-mega-toggle {
    width: 18px;
    margin-left: 0;
    margin-right: -3px;
  }
}

/* ---------- Mobile (off-canvas) ---------- */

.np-mm-toggle {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  line-height: 1;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-mm-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.np-mm-open > .np-mm-toggle svg {
  transform: rotate(180deg);
}

.np-mm-sub {
  display: none;
  width: 100%;
  padding: 0 0 10px;
}

.np-mm-open > .np-mm-sub {
  display: block;
}

.nav-vertical li.np-mm-item .np-mm-sub a.np-mm-link {
  display: block;
  padding: 7px 20px 7px 34px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #222;
  text-decoration: none;
  text-transform: none;
}

.nav-vertical li.np-mm-item .np-mm-sub a.np-mm-link::before,
.nav-vertical li.np-mm-item .np-mm-sub a.np-mm-link::after {
  display: none !important;
}

.nav-vertical li.np-mm-item .np-mm-sub a.np-mm-link:hover {
  color: #ff5100;
}

/* An open item keeps its neutral background; the hover tint is for the row. */
.nav-vertical li.np-mm-item.np-mm-open,
.nav-vertical li.np-mm-item.np-mm-open:hover {
  background-color: transparent;
}