/* product top menu styling */
.product-top-menu {
  margin-top: -4rem;
  margin-bottom: 3.5rem;
}

.product-top-menu .layout .menu--main .nav {
  display: grid;
  grid-auto-rows: 1fr;
  grid-gap: 1px;
}

/* Nobble clearfix */
.product-top-menu .layout .menu--main .nav:after {
  content: "";
  display: none;
  background: #fff;
}

.product-top-menu .layout .menu--main .nav {
  background: radial-gradient(#ccc, transparent);
}

.product-top-menu .layout .menu--main .nav .nav-item {
  margin: 0;
  background: #fff;
}

.product-top-menu .layout .menu--main .nav .nav-item a {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter' !important;
  font-size: 18px;
  width: 100%;
  height: 100%;
  padding: 1rem 2rem;
}

.product-top-menu .nav .nav-item.active a {
  position: relative;
}

.product-top-menu .nav .nav-item.active a:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 6px solid var(--color-accent);
}


@media (max-width: 767px) {
  .product-top-menu .layout .menu--main .nav.product-count-3:after,
  .product-top-menu .layout .menu--main .nav.product-count-5:after,
  .product-top-menu .layout .menu--main .nav.product-count-7:after,
  .product-top-menu .layout .menu--main .nav.product-count-9:after {
    display: block;
  }

  .product-top-menu .layout .menu--main .nav {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }

  /* Add padding without causing collapse judder */
  .product-menu-collapse div.spacer {
    height: 2rem;
  }

  /* Override barrio menu style */
  .product-top-menu .layout nav.menu--main {
    margin: 0;
  }
}

@media (min-width: 768px) {
  .product-top-menu .layout .menu--main .nav .nav-item a {
    justify-content: center;
  }

  .product-top-menu .layout .menu--main .nav .nav-item.active a:after {
    left: 32px;
    right: 32px;
  }

  .product-top-menu .layout .menu--main .nav .nav-item a {
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 990px) {

  .product-top-menu .layout .menu--main .nav {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
  }

  .product-top-menu .layout .menu--main .nav.product-count-4 {
    grid-template-columns: repeat(2, 1fr);
  }


  /* Stretch items on 5/7/8 count */

  .product-top-menu .layout .menu--main .nav.product-count-5,
  .product-top-menu .layout .menu--main .nav.product-count-7,
  .product-top-menu .layout .menu--main .nav.product-count-8 {
    grid-template-columns: repeat(6, 1fr);
  }

  .product-top-menu .layout .menu--main .nav.product-count-5 .nav-item,
  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item,
  .product-top-menu .layout .menu--main .nav.product-count-8  .nav-item {
    grid-column: span 2;
  }

  /* 5 items */
  .product-top-menu .layout .menu--main .nav.product-count-5 .nav-item:nth-of-type(4),
  .product-top-menu .layout .menu--main .nav.product-count-5 .nav-item:nth-of-type(5) {
    grid-column: span 3;
  }

  /* 7 items */
  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item:nth-of-type(4),
  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item:nth-of-type(5),
  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item:nth-of-type(6),
  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item:nth-of-type(7) {
    grid-column: span 3;
  }

  /* 8 items */
  .product-top-menu .layout .menu--main .nav.product-count-8 .nav-item:nth-of-type(7),
  .product-top-menu .layout .menu--main .nav.product-count-8 .nav-item:nth-of-type(8) {
    grid-column: span 3;
  }
}

@media (min-width: 991px) {

  .product-top-menu .layout .menu--main .nav {
    grid-template-columns: repeat(5, 1fr);
  }

  .product-top-menu .layout .menu--main .nav.product-count-4,
  .product-top-menu .layout .menu--main .nav.product-count-8 {
    grid-template-columns: repeat(4, 1fr)
  }

  .product-top-menu .layout .menu--main .nav.product-count-6 {
    grid-template-columns: repeat(3, 1fr);
  }


  /* 7 items */
  .product-top-menu .layout .menu--main .nav.product-count-7 {
    grid-template-columns: repeat(12, 1fr);
  }

  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item {
    grid-column: span 3;
  }

  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item:nth-of-type(5),
  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item:nth-of-type(6),
  .product-top-menu .layout .menu--main .nav.product-count-7 .nav-item:nth-of-type(7) {
    grid-column: span 4;
  }
  /* end 7 items */

  .product-top-menu .nav.product-count-4 .nav-item.active a:after,
  .product-top-menu .nav.product-count-5 .nav-item.active a:after {
    bottom: -1rem;
    border-width: .5rem;
  }

}

.product-menu-collapse {
  background: #fff;
  border-radius: var(--border-radius);
  padding: 1rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
}

.product-menu-collapse > button {
  background: #fff;
  border: none;
  display: flex;
  font-weight: 500;
  justify-content: space-between;
  width: 100%;
}