.nav,
.nav ul,
.nav li,
.nav a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  border: 0;
}

.nav {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  position: relative;
  z-index: 600;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

#menuPrincipaleBar {
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  width: 100%;
  clear: both;
  position: relative;
  display: flow-root;
  background: #ffffff;
  z-index: 999;
  text-transform: uppercase;
  border-bottom: 1px solid #dedede;
  transition: padding .25s ease-in-out;
}

.nav > li {
  position: static;
}

li.AL1 {
  cursor: pointer;
  color: #fff;
}

.nav > li > a {
  display: block;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .4px;
  color: var(--color-text-primary);
  transition: color .3s ease, padding .25s ease-in-out;
  position: relative;
}

.nav > li:hover > a,
.nav > li > a:focus,
.nav li.corrente > a {
  color: var(--color-rosso-primary);
}

.nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 9px;
  left: 20px;
  width: 0;
  height: 3px;
  background: var(--color-rosso-primary) ;
  transition: width .3s ease, bottom .25s ease-in-out;
}

.nav > li:hover > a::after,
.nav > li.corrente > a::after {
  width: calc(100% - 40px);
}

.nav > li:first-child > a {
  padding-left: 0;
}

.nav > li:last-child > a {
  padding-right: 0;
}

.nav > li:first-child > a::after {
  left: 0;
}

.nav > li:first-child:hover > a::after,
.nav > li:first-child.corrente > a::after,
.nav > li:last-child:hover > a::after,
.nav > li:last-child.corrente > a::after {
  width: calc(100% - 20px);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 34px 44px 38px;
  background: #ffffff;
  text-transform: none;

  border-radius: 0 0 8px 8px;
  box-shadow: 0 20px 44px -12px rgba(45, 36, 32, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility .3s;
  transition-delay: 0s;
  z-index: 99;
}

.nav > li:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: .15s;
}

.nav a:focus-visible,
.mega-menu a:focus-visible {
  outline: 2px solid var(--color-blu-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.nav > li:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav > li.active > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-griglia {
  display: flex;
  align-items: flex-start;
  gap: 44px;
}

.mega-colonna {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

.mega-colonna--larga {
  flex: var(--mega-file, 2) 1 0;
}

.mega-colonna--larga .mega-colonna__voci {
  column-count: var(--mega-file, 2);
  column-gap: 44px;
}

.mega-colonna--larga .mega-voce {
  break-inside: avoid;
}

.mega-colonna__titolo {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-blu-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-blu-primary);
}

.mega-menu .mega-voce {
  display: block;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 5px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.mega-menu .mega-voce:hover {
  background: #f4f1ef;
  color: var(--color-blu-primary);
}

.mega-menu .mega-tutti {
  padding-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-blu-primary);
  text-decoration: none;
}

.mega-menu .mega-tutti::after {
  content: ' \203A';
  font-weight: 700;
}

.mega-menu .mega-tutti:hover {
  color: var(--color-blu-hover);
}

@media (max-width: 1280px) {
  .mega-menu {
    padding: 26px 26px 30px;
  }

  .nav > li > a {
    padding: 16px 17px;
  }

  .nav > li > a::after {
    left: 17px;
  }

  .nav > li:hover > a::after,
  .nav > li.corrente > a::after {
    width: calc(100% - 34px);
  }

  .nav > li:first-child:hover > a::after,
  .nav > li:first-child.corrente > a::after,
  .nav > li:last-child:hover > a::after,
  .nav > li:last-child.corrente > a::after {
    width: calc(100% - 17px);
  }

  .mega-griglia {
    gap: 26px;
  }

  .mega-menu .mega-voce {
    font-size: 15px;
    padding: 7px 10px;
    margin: 0 -10px;
  }
}

@media (min-width: 1024px) and (max-width: 1150px) {
  .nav > li > a {
    padding: 16px 11px;
    font-size: 14px;
    letter-spacing: .3px;
  }

  .nav > li > a::after {
    left: 11px;
  }

  .nav > li:hover > a::after,
  .nav > li.corrente > a::after {
    width: calc(100% - 22px);
  }

  .nav > li:first-child:hover > a::after,
  .nav > li:first-child.corrente > a::after,
  .nav > li:last-child:hover > a::after,
  .nav > li:last-child.corrente > a::after {
    width: calc(100% - 11px);
  }
}

@media (max-width: 1023px) {
  #menuPrincipaleBar {
    background: #1e1c1c;
  }

  .mega-menu {
    width: 100%;
    max-width: none;
    padding: 16px 20px 20px;
    border-radius: 0;
    box-shadow: none;
  }

  .mega-griglia {
    flex-direction: column;
    gap: 18px;
  }
}