.tp_menu {
    --menu-accent: var(--c-accent, #ff6a00);
    --menu-radius: 0;
    --drop-background: #fff;
    --drop-border: 1px solid #ebebeb;
    --drop-offset: .25rem;
    --drop-radius: 1rem;
    --drop-shadow: 0 .3125rem .4375rem -.125rem rgba(30, 60, 90, .33);
    --drop-z-index: 2;
    --drop-max-height: 28rem;
    --drop-min-width: 9rem;
    box-sizing: border-box;
    width: 100vw;
}

.tp_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tp_menu ul li, .tp_menu ul li a {
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.tp_menu ul li a {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

.tp_menu a:hover, .tp_menu a:active {
    color: currentColor;
}

.tp_menu > .tp_menu-wrap > ul {
    display: flex;
    align-items: center;
    background-color: var(--drop-background, #fff);
    gap: 2rem;
}

.tp_menu > .tp_menu-wrap .tp_menu-wrap {
    min-width: var(--drop-min-width);
    width: max-content;
}

.tp_menu > .tp_menu-wrap > ul > li {
    position: relative;
    padding: 1rem 0;
    margin: 0;
}

.tp_menu > .tp_menu-wrap > ul > li ul li {
    position: relative;
    margin: 0;
    padding: .5rem 1.5rem;
}

.tp_menu > .tp_menu-wrap .tp_menu-wrap .tp_menu-wrap {
    margin-top: -.5rem;
}

.tp_menu > .tp_menu-wrap > ul li.has-inner > a {
    position: relative;
    padding-right: 2.5rem;
}

.tp_menu:not(.tp_menu--mobile) > .tp_menu-wrap > ul li:hover > .tp_menu-wrap,
.tp_menu > .tp_menu-wrap > ul li.active > .tp_menu-wrap {
    visibility: visible;
}

.tp_menu > .tp_menu-wrap > ul > li > a {
    color: #000;
    background-color: #F6F6F6;
    padding: .5rem 1rem;
    margin: 0;
    border-radius: 3.75rem;
}

.tp_menu:not(.tp_menu--mobile) > .tp_menu-wrap > ul > li:hover > a,
.tp_menu > .tp_menu-wrap > ul > li.active > a {
    background-color: #000;
    color: #fff;
}

.tp_menu > .tp_menu-wrap .tp_menu-wrap > ul > li > a:hover,
.tp_menu > .tp_menu-wrap .tp_menu-wrap > ul > li:hover > a,
.tp_menu > .tp_menu-wrap .tp_menu-wrap > ul > li.active > a {
    text-shadow: 0 0 1px #000;
}

.tp_menu > .tp_menu-wrap > ul > li.has-inner > a::before {
    content: "›";
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 2rem;
    top: calc(50% - .325rem);
    right: .25rem;
    transform: rotate(90deg);
    color: currentColor;
    width: 0;
    height: 0;
    position: absolute;
}

.tp_menu .tp_menu-wrap > ul > li.has-inner:hover > a::before,
.tp_menu .tp_menu-wrap > ul > li.has-inner.active > a::before {
    color: currentColor;
    font-weight: 200;
}

.tp_menu .tp_menu-wrap > ul li ul li.has-inner > a > span {
    position: relative;
}

.tp_menu .tp_menu-wrap > ul li ul li.has-inner > a > span::after {
    content: "›";
    font-size: 1.825rem;
    font-weight: 200;
    line-height: 2rem;
    height: auto;
    width: auto;
    transform: none;
    top: -.425rem;
    right: -1.25rem;
    border: none;
    color: currentColor;
    position: absolute;
}

.tp_menu .tp_menu-wrap > ul li ul li.has-inner:hover > a > span::after {
    color: var(--menu-accent);
    font-weight: 200;
}

.tp_menu > .tp_menu-wrap > ul li .tp_menu-wrap {
    visibility: hidden;
    padding: var(--drop-offset) 0 0 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--drop-z-index);
}

.tp_menu > .tp_menu-wrap > ul li .tp_menu-wrap ul {
    background: var(--drop-background);
    box-shadow: var(--drop-shadow);
    border-radius: var(--drop-radius);
    padding: .5rem 0;
}

.tp_menu > .tp_menu-wrap > ul li ul li {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tp_menu > .tp_menu-wrap > ul li ul li .tp_menu-wrap {
    top: 0;
    left: 100%;
    transform: translate(0);
    padding: 0 0 0 var(--drop-offset);
}


/* columns */
.tp_menu:not(.tp_menu--mobile) li.has-inner.col-auto > .tp_menu-wrap > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: var(--drop-max-height);
}

.tp_menu:not(.tp_menu--mobile) li.has-inner.col-2 > .tp_menu-wrap > ul {
    columns: 2;
}

.tp_menu:not(.tp_menu--mobile) li.has-inner.col-3 > .tp_menu-wrap > ul {
    columns: 3;
}

.tp_menu:not(.tp_menu--mobile) li.has-inner.col-4 > .tp_menu-wrap > ul {
    columns: 4;
}

.tp_menu:not(.tp_menu--mobile) li.has-inner.col-5 > .tp_menu-wrap > ul {
    columns: 5;
}

.tp_menu:not(.tp_menu--mobile) li.has-inner.col-6 > .tp_menu-wrap > ul {
    columns: 6;
}


/* mobile */
.tp_menu.tp_menu--mobile {
    --drop-offset: 0;
    --drop-shadow: 0;
    width: 100%;
}

.tp_menu.tp_menu--mobile .tp_menu-wrap {
    margin: 0;
    padding: 0;
    width: 100%;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul {
    padding: 0 1rem;
    gap: 0;
}

.tp_menu.tp_menu--mobile ul {
    width: 100%;
    flex-direction: column;
}

.tp_menu.tp_menu--mobile ul li {
    width: 100%;
}

.tp_menu.tp_menu--mobile ul li a {
    padding: 1rem 1.5rem;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap ul > li {
    padding: .25rem 0;
    margin: 0;
    background-color: #FFF;
}

.tp_menu.tp_menu--mobile .tp_menu-wrap > ul li ul li {
    flex-direction: column;
    padding: 1rem;
}

.tp_menu.tp_menu--mobile ul li a {
    position: relative;
    width: 100%;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap ul li.active > .tp_menu-wrap {
    position: relative;
    margin: 0;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap .tp_menu-wrap .tp_menu-wrap {
    top: 100%;
    left: 0;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li.has-inner > a::before {
    right: 0;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li ul li,
.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li ul li:first-child,
.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li ul li:last-child {
    padding: 0;
    border: none;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul > li > > .tp_menu-wrap > ul > li:not(:first-child) > ul {
    margin-top: 0;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li ul li:first-child {
    padding-top: 0;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li ul li:last-child {
    padding-bottom: 0;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul > li.has-inner > a::before {
    font-weight: 200;
    top: .5rem;
    right: 2rem;
    transform: none;
    color: currentColor;
}

.tp_menu.tp_menu--mobile .tp_menu-wrap > ul li ul li.has-inner > a > span::after {
    display: none;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul > li.has-inner.active > a::before {
    top: calc(50% - .325rem);
    right: .5rem;
    transform: rotate(90deg);
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul > li ul li.has-inner > a::before {
    content: "›";
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 2rem;
    top: calc(50% - .325rem);
    right: .25rem;
    color: currentColor;
    width: 0;
    height: 0;
    position: absolute;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li ul li.has-inner > a::before {
    top: .5rem;
    right: 2rem;
}

.tp_menu.tp_menu--mobile > .tp_menu-wrap > ul li ul li.has-inner.active > a::before {
    top: 1.325rem;
    right: .5rem;
    transform: rotate(90deg);
}