.wk-navitem--db{
  position: relative;
  z-index: 50;
}

.wk-navitem--db::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.wk-db{
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: max-content;
  max-width: calc(100vw - (var(--wk-pad) * 2));
  padding: 12px 14px;
  border: 1px solid var(--wk-border);
  border-radius: 12px;
  background: var(--wk-surface);
  box-shadow: var(--wk-shadow);
  z-index: 999;
}

@media (hover:hover){
  .wk-navitem--db:hover .wk-db,
  .wk-navitem--db:focus-within .wk-db{
    display: block;
  }
}

.wk-db__cols--one{
  display: block;
}

.wk-db__col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.wk-db__title{
  margin: 2px 0 10px;
  color: var(--wk-gold);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.wk-db__row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wk-db__arrow{
  color: rgba(255,255,255,.50);
  flex: 0 0 auto;
}

.wk-db__row--lvl1{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 10px;
}

.wk-db__row--lvl1:hover{
  background: rgba(255,255,255,.08);
}

.wk-db__row--lvl1 > .wk-db__link{
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--wk-gold);
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.wk-db__row--lvl1 > .wk-db__link:hover{
  text-decoration: none;
}

.wk-db__row--lvl1 > .wk-db__arrow{
  padding: 8px 10px 8px 0;
  margin-left: -6px;
}

.wk-db__fly{
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  width: 240px;
  padding: 10px;
  border: 1px solid var(--wk-border);
  border-radius: 12px;
  background: var(--wk-surface-2);
  box-shadow: var(--wk-shadow);
  transform: translateX(6px);
  z-index: 1000;
}

.wk-db__fly::before{
  content: "";
  position: absolute;
  left: calc(var(--wk-fly-bridge) * -1);
  top: 0;
  width: var(--wk-fly-bridge);
  height: 100%;
  background: transparent;
}

.wk-db__flyTitle{
  margin: 2px 4px 10px;
  font-size: .78rem;
  color: var(--wk-gold);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.wk-db__flyLink{
  display: block;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--wk-gold);
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.wk-db__row--lvl2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 12px;
}

.wk-db__row--lvl2:hover{
  background: rgba(255,255,255,.08);
}

.wk-db__row--lvl2 > .wk-db__flyLink{
  flex: 1 1 auto;
  padding: 9px 10px;
}

.wk-db__row--lvl2 > .wk-db__arrow{
  padding: 9px 10px;
}

.wk-db__flyLink:hover{
  border-color: var(--wk-border2);
  background: rgba(255,255,255,.05);
  text-decoration: none;
}

@media (hover:hover){
  .wk-db__row:hover > .wk-db__fly{
    display: block;
  }
}

.wk-db__fly--lvl3{
  top: 0;
  left: 100%;
  width: 230px;
  transform: translateX(6px);
  z-index: 1100;
}

.wk-db__fly--lvl3::before{
  content: "";
  position: absolute;
  left: calc(var(--wk-fly-bridge) * -1);
  top: 0;
  width: var(--wk-fly-bridge);
  height: 100%;
  background: transparent;
}

@media (max-width: 900px){
  .wk-db{
    max-width: min(92vw, 360px);
  }

  .wk-db__fly{
    left: 0;
    top: calc(100% + 6px);
    width: min(92vw, 320px);
    transform: none;
  }

  .wk-db__fly--lvl3{
    left: 0;
    top: calc(100% + 6px);
    width: min(92vw, 320px);
    transform: none;
  }

  .wk-db__fly::before,
  .wk-db__fly--lvl3::before{
    display: none;
  }
}