nav {
  --menu-border: 1px solid var(--color-primary-200);
  --menu-dropdown-padding: 2rem;
  --menu-dropdown-shadow: 0 12px 24px rgba(0,0,0,.2);
  --menu-tab-hover-bg: var(--color-primary-100);
  --menu-tab-padding: .75em;
  --menu-column-gap: min(calc(1em + 2.5vw), 3em);
  --menu-column-width: 14em;
}

nav .menu-heading {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-accent);
  text-transform: uppercase;
  font-weight: 600;
  break-after: avoid;
}

/* Reset Lists */
nav ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul.menu li {
  list-style: none;
  line-height: inherit;
}


nav a,
nav button {
  border: none;
  color: inherit;
  cursor: pointer;
  background: none;
  text-decoration: none;
  font: inherit;
  padding: initial;

  --_color-visited: inherit;
}

/* Avoid orphan LIs */
.menu-section li:not(.menu-has-sub):nth-child(-n + 2) { break-after: avoid; }
.menu-section li:not(.menu-has-sub):nth-last-child(-n + 2) { break-before: avoid; }

/* Mobile */
@media (width < 800px) {

  nav.header-primary-menu-wrapper { position: absolute; }

  /* Top level Nav Links */
  ul.menu[data-menu-depth="0"] { flex-direction: column; }

  /* Mobile user/cart link TEMP */
  ul.menu[data-menu-depth="0"] .mobile-user-link .menu-link {
    justify-content: normal !important;
    gap: .5em;
    align-items: center;
    text-transform: none;
  }

  /* General manu link styles. */
  .menu-link,
  .menu-section-heading {
    box-sizing: border-box;
    padding: var(--menu-tab-padding);
    text-align: initial;
    width: 100%;
    display: flex;
    justify-content: space-between !important;
    flex-direction: row !important;
    border-bottom: 1px solid var(--color-primary-600);
    /*--link-color-visited: #fff;*/
    --link-color-hover: #fff;
  }

  /* Menu Headings. */
  .menu-section-heading {
    order: 1;
    justify-content: normal !important;
    gap: .25em;
    font-weight: 600;
    font-style: italic;
  }
  .menu-section-heading::after {
    content: '→';
    padding-left: .5em;
  }
  .menu-section-heading .menu-shop-all { order: -1; }
  .menu-section-heading .menu-shop-all,
  .menu-section-heading .menu-heading {
    color: inherit;
    font-size: inherit;
    text-transform: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
  }

  /* Menu Sections */
  .menu-section { display: flex; flex-direction: column; }
  .menu-section:not(.menu-open) { display: none; }

  /* Menu levels. */
  .menu-section[data-menu-depth="1"] *:is(.menu-link, .menu-section-heading) {
    background: var(--color-primary-800);
    border-color: var(--color-primary-600);
  }
  .menu-section[data-menu-depth="2"] *:is(.menu-link, .menu-section-heading) {
    background: var(--color-primary-600);
    border-color: var(--color-primary-800);
  }
  .menu-section[data-menu-depth="3"] *:is(.menu-link, .menu-section-heading) {
    background: var(--color-light);
    color: var(--color-dark);
    border: none;
  }

  ul.menu:is([data-menu-depth="0"], [data-menu-depth="2"]) > li > .menu-link {
    text-transform: uppercase;
    font-weight: 600;
  }

  /* Chevrons */
  .menu-btn[aria-expanded]:after {
    content: "\e9bc";
    align-content: center;
    font-family: 'feather-icons';
    margin-left: var(--menu-tab-padding);
  }
  .menu-btn[aria-expanded="true"]:after   { content: "\e9ba" }

  li.mobile-user-link a {
    background: var(--color-light);
    color: var(--color-dark);
  }




  /* Tweak a few shop all links */
  #sub-menu-11429 > .menu-section-heading,
  #sub-menu-14390 > .menu-section-heading > .menu-heading,
  #sub-menu-14418 > .menu-section-heading > .menu-heading,
  #sub-menu-14415 > .menu-section-heading > .menu-heading { display: none; }

  #sub-menu-14390 > .menu-section-heading > .menu-shop-all::after { content: " Occasions"; }
  #sub-menu-14418 > .menu-section-heading > .menu-shop-all::after { content: " Occupations"; }
  #sub-menu-14415 > .menu-section-heading > .menu-shop-all::after { content: " Deals And More"; }

  /* Shop by category icon button */
  li.menu-11429 > button i {
    display: none;
  }
}


/* DESKTOP */
@media (width >= 800px) {
  .menu-section {
    --color-bg: var(--color-light);
    --color-fg: var(--color-dark);
  }

  /* Hide things on desktop */
  .menu-shop-all,
  .menu-section-heading,
  ul.menu[data-menu-depth="0"] .mobile-user-link { display: none; }

  /* Top level nav links */
  nav ul.menu[data-menu-depth="0"] {
    display: flex;
    position: relative;
    text-wrap: balance;
    line-height: 1.1;
  }
  nav ul.menu[data-menu-depth="0"] > li {
    display: flex;
    flex-grow: 1;
    flex-basis: auto;
    flex-direction: column;
  }
  nav ul.menu[data-menu-depth="0"] > li > .menu-link {
    padding: .5em calc(2cqw - 1.5em);
    background: transparent;
    border-left: var(--border-dark);
    min-height: 2.5em;
    font-size: 1.1em;
    flex-grow: 1;
  }
  nav ul.menu[data-menu-depth="0"] > li.first > .menu-link { border-left: 0; }

  nav ul.menu[data-menu-depth="0"] > li > .menu-link:focus,
  nav ul.menu[data-menu-depth="0"] > li.active-trail > .menu-link,
  nav ul.menu[data-menu-depth="0"] > li > .menu-btn[aria-expanded="true"] {
    background: var(--activeColor);
  }

  /* Dropdowns */
  .menu-section[data-menu-depth="1"] {
    position: absolute;
    top: 100%;
    z-index: 50;
    padding: var(--menu-dropdown-padding);

    color: var(--color-fg);
    background: var(--color-bg);
    box-shadow: var(--menu-dropdown-shadow);
    border: var(--menu-border);

    opacity: 1;
    transition: opacity 0.25s ease, display 0.25s ease allow-discrete;
  }
  .menu-section[data-menu-depth="1"]:not(.menu-open) { display: none !important; opacity: 0; }

  /* Align right */
  .menu-align-right { right: 0; width: min-content; }

  /* Full width dropdown */
  .menu-full-width {
    left: 0;
    right: 0;
  }

  /* Mega menu with multiple columns */
  .menu-mega {
    display: flex;
    flex-direction: column;
  }
  .menu-mega .menu-btn { display: none; }
  .menu-mega > .menu  {
    height: 1em;
    flex-grow: 1;
    column-count: 3;
    overflow: hidden;
    column-width: var(--menu-column-width);
    column-fill: auto;
    column-gap: var(--menu-column-gap);
    min-width: calc(var(--menu-column-width) * 2 + var(--menu-column-gap));
  }
  .menu.menu-balance,
  body.menu-balance .menu-mega > .menu {
    column-fill: balance;
    height: auto;
  }

  /* Section headings in mega menu */
  .menu-mega .menu-section-heading {
    gap: 1em;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .menu-mega > .menu-section-heading {
    border-bottom: var(--menu-border);
    margin-bottom: var(--menu-dropdown-padding);
    padding-bottom: .5em;
  }
  .menu-mega > .menu-section-heading:hover {
    text-decoration: none;
    border-color: var(--color-accent);
  }
  /* Arrow on hover */
  .menu-mega > .menu-section-heading:hover .menu-heading::after {
    content: "\e99e";
    font-family: 'feather-icons';
    color: var(--color-primary-300);
    margin-left: var(--menu-tab-padding);
    vertical-align:top;
  }





  /* General menu section styles */
  .menu-mega .menu li {
    display: block;
    break-inside: avoid;
    margin: 0 0 .6rem 0;
  }
  .menu-mega .menu li.menu-has-sub,
  .menu-mega .menu li:last-child { margin-bottom: 0; }
  .menu-mega .menu li.menu-has-sub { padding-bottom: 2rem; }
  .menu-mega a:hover { text-decoration: underline; }
  .menu-mega a.menu-section-heading { --link-color-hover: var(--color-accent); }


  /* Tabbed mega menu */
  .menu-tabbed-mega {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  /* Divider between tabs and panes */
  .menu-tabbed-mega:after {
    content: '';
    grid-column: 2;
    grid-row: 1 / span 50;
    border-left: var(--menu-border);
    margin-top: calc(var(--menu-dropdown-padding) * -1);
    margin-bottom: calc(var(--menu-dropdown-padding) * -1);
  }

  .menu-tabbed-mega > .menu-section-heading { display: none; }

  /* Menu panes on the right */
  .menu-tabbed-mega > .menu,
  .menu-tabbed-mega > .menu > .menu-item { display: contents; }
  .menu-tabbed-mega > .menu > .menu-item > .menu-section {
    grid-column: 2;
    grid-row: 1 / span 50;
    z-index: 1;
    padding-left: var(--menu-column-gap);
  }
  .menu-tabbed-mega > .menu > .menu-item > .menu-section:not(.menu-open) { display: none; }

  /* render as one column if menu item does not have children */
  .menu-tabbed-mega.menu-open:not(:has(.menu-open)) {
    right: auto;
    padding-right: 0;
  }

  /* Tabs on the left */
  .menu-tabbed-mega > .menu > .menu-item > .menu-link {
    grid-column: 1;
    display: flex;
    align-items: center;
    text-align: left;
    text-decoration: none;
    justify-content: space-between;
    padding: var(--menu-tab-padding);
    margin-left: calc(var(--menu-tab-padding) * -1);
  }
  .menu-tabbed-mega > .menu > .menu-item:first-child > .menu-link {
    margin-top: calc(var(--menu-tab-padding) * -1);
  }

  /* Menu button expanded styles */
  .menu-tabbed-mega > .menu > .menu-item > .menu-btn[aria-expanded="true"] {
    background: var(--menu-tab-hover-bg);
  }

  /* Chevron on buttons */
  .menu-tabbed-mega > .menu > .menu-item > .menu-btn::after   {
    content: '\e9bc';
    align-content: center;
    font-family: 'feather-icons';
    margin-left: var(--menu-tab-padding);
  }

  /* Shop by category icon button */
  li.menu-11429 > button {
    display: flex;
    justify-content: center;
    gap: .5em;
    align-items: center;
    --icon-size: 1.25em;
    --icon-padding: 0;
  }
}