.main-navigation {
  text-align: end;
  display: flex;
  align-items: center;
  justify-content: center;
  /* // TODO
  .menu-item-container:hover > .menu-item {
  	> a {
  		text-decoration: none;
  		color: base.$black;
  		position: relative;
  		transition: font-weight 500ms;
  		margin-right: 12px;
  		&::after {
  			content: '';
  			position: absolute;
  			bottom: -2px;
  			left: 0;
  			width: 0;
  			height: 0.1em;
  			background-color: base.$black;
  			opacity: 0;
  			transition: opacity 500ms, width 500ms;
  		}
  	}
  }
  */
}
.main-navigation .desktopMenu {
  display: none;
}
.main-navigation .sideMenu {
  -webkit-transition: transform 500ms ease-in-out, border-color 3s ease 1s;
  -moz-transition: transform 500ms ease-in-out, border-color 3s ease 1s;
  -ms-transition: transform 500ms ease-in-out, border-color 3s ease 1s;
  -o-transition: transform 500ms ease-in-out, border-color 3s ease 1s;
  transition: transform 500ms ease-in-out, border-color 3s ease 1s;
}
.main-navigation .menu-item {
  text-align: start;
  justify-self: center;
  padding: 10px 15px;
  cursor: pointer;
}
.main-navigation .menu-item.current-page > a {
  font-weight: 600;
}
.main-navigation .menu-item.current-page > a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: #000000;
  opacity: 1;
}
.main-navigation .menu-item ~ .expandable-menu {
  display: none;
  margin-left: 15px;
}
.main-navigation .menu-item .submenu-toggler {
  background: transparent;
  border: 0;
  margin-right: auto;
}
.main-navigation .menu-item a {
  text-decoration: none;
  color: #000000;
  position: relative;
  transition: font-weight 500ms;
  margin-right: 12px;
}
.main-navigation .menu-item a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 0.1em;
  background-color: #000000;
  opacity: 0;
  transition: opacity 500ms, width 500ms;
}
.main-navigation .menu-item a.category-menu-item::before {
  content: "";
  border-radius: 2px;
  height: 100%;
  border: 2px solid #555555;
  margin-right: 6px;
}
.main-navigation .menu-item svg {
  margin-right: 12px;
}
@media (min-width: 992px) {
  .main-navigation .main-navigation {
    flex-direction: row;
  }
  .main-navigation .desktopMenu {
    display: flex;
  }
  .main-navigation .menu-item-container .expandable-menu {
    display: flex;
  }
  .main-navigation .menu-item-container > .menu-item a {
    margin-right: 0;
    line-height: 70px;
    margin-right: 0;
  }
  .main-navigation .menu-item-container > .menu-item a:hover {
    font-weight: 600;
  }
  .main-navigation .menu-item-container > .menu-item a:hover::after {
    width: 100%;
    opacity: 1;
  }
  .main-navigation .menu-item-container > .menu-item.current-page {
    font-weight: 400;
  }
  .main-navigation .menu-item-container > .menu-item.current-page::after {
    width: 0;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: transparent;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container {
    display: flex;
    width: 100%;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-icons {
    display: flex;
    align-items: end;
    width: 25%;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-icons img:not([data-term=todos]) {
    display: none;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 20%;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container {
    display: inline-block;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container .submenu-toggler-desktop:hover + .expandable-menu {
    display: flex;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu {
    border-right: 4px solid #CCCCCC;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    transform: translateX(100%);
    width: max-content;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu:hover {
    display: flex;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover .menu-item > a {
    background-color: #55555515;
    border-bottom: 2px solid #555555;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 100%;
    height: 100%;
    padding-left: 40px;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu .product-list {
    display: flex;
    flex-direction: row;
    gap: 25px;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu .view-all {
    text-align: start;
    margin-top: auto;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a {
    text-decoration: none;
    color: #000000;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card {
    text-align: start;
    padding: 6px;
    border-radius: 10px;
    min-width: 150px;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card .product-card-image-wrapper {
    overflow: hidden;
    border-radius: 10px;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card .product-card-image-wrapper img {
    width: 100%;
    transition: transform 300ms ease-in-out;
    transform: scale(1);
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card:hover {
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1607843137);
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card:hover img {
    transform: scale(1.3);
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card:hover small.category-hidden {
    display: block;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card small {
    font-weight: 500;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container:hover > .expandable-menu a .product-card small.category-hidden {
    font-weight: 400;
    display: none;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container .view-all {
    text-align: end;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container .view-all > a {
    text-decoration: none;
    transition: all 500ms ease;
    color: #000000;
    margin-right: 0;
    display: inline-block;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container .view-all > a:hover {
    transform: translateX(-20%);
    font-weight: 400;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container .view-all > a:hover > svg {
    opacity: 1;
    transform: translateX(150%) translateY(15%);
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container .view-all > a > svg {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 500ms ease;
    transform: translateX(0) translateY(15%);
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .expandable-menu > .product-container > .menu-item a {
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid transparent;
    border-radius: 2px;
    padding: 3px 8px;
    margin-right: 0;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .submenu-toggler-desktop {
    text-align: end;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container > .submenu-toggler-desktop a {
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid transparent;
    border-radius: 2px;
    padding: 3px 8px;
    margin-right: 0;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container .view-all {
    text-align: end;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container .view-all > a {
    text-decoration: none;
    transition: all 500ms ease;
    color: #000000;
    margin-right: 0;
    display: inline-block;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container .view-all > a:hover {
    transform: translateX(-20%);
    font-weight: 400;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container .view-all > a:hover > svg {
    opacity: 1;
    transform: translateX(150%) translateY(15%);
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .taxonomy-container .category-container .view-all > a > svg {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 500ms ease;
    transform: translateX(0) translateY(15%);
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .product-menu-divider {
    position: relative;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .product-menu-divider::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1em;
    height: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
    width: 2px;
    background-color: #8B8B8B;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .product-menu-container {
    width: 100%;
    justify-content: end;
    display: flex;
    align-items: end;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .product-menu-container img {
    width: auto;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .product-menu-container img:not([data-term=todos]) {
    display: none;
  }
  .main-navigation .menu-item-container > .submenu-toggler-desktop ~ .expandable-menu .submenu-container .expandable-menu {
    display: none;
    flex-direction: column;
  }
}