.nav-suggest{
position:relative;
}
.nav-suggest-panel{
position:absolute;
top:calc(100% + 6px);
left:0;
width:320px;
max-width:90vw;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--bs1);
z-index:1000;
overflow:hidden;
}
.nav-suggest-panel[hidden]{
display:none;
}
.nav-suggest-list{
list-style:none;
margin:0;
padding:6px;
max-height:min(60vh,420px);
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:thin;
scrollbar-color:var(--bc2) transparent;
}
.nav-suggest-list::-webkit-scrollbar{
width:6px;
}
.nav-suggest-list::-webkit-scrollbar-thumb{
background-color:var(--bc2);
border-radius:var(--br1);
}
.nav-suggest-opt{
display:flex;
align-items:center;
gap:10px;
padding:9px 10px;
border-radius:var(--br1);
cursor:pointer;
color:var(--tx1);
}
.nav-suggest-opt.is-active{
background-color:var(--hv1);
}
.nav-suggest-icon{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:22px;
height:22px;
}
.nav-suggest-icon-empty{
border-radius:var(--br1);
background-color:var(--bg3);
}
.nav-suggest-icon img{
width:22px;
height:22px;
object-fit:contain;
display:block;
}
.nav-suggest-icon svg{
width:18px;
height:18px;
fill:var(--tx2);
stroke:none;
}
.nav-suggest-opt-main{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
flex:1;
}
.nav-suggest-opt-name{
font-family:var(--ff1);
font-size:var(--fz0);
font-weight:calc(500 + var(--fw-offset));
color:var(--tx1);
line-height:1.3;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.nav-suggest-opt-name mark{
background:transparent;
color:var(--cl1);
font-weight:calc(700 + var(--fw-offset));
padding:0;
}
.nav-suggest-opt-type{
font-family:var(--ff2);
font-size:var(--fz5);
font-weight:calc(600 + var(--fw-offset));
text-transform:uppercase;
letter-spacing:.04em;
color:var(--tx3);
line-height:1.2;
}
.nav-suggest-action{
margin-top:2px;
}
.nav-suggest-action .nav-suggest-opt-name{
color:var(--tx2);
font-weight:calc(600 + var(--fw-offset));
white-space:normal;
}
.nav-suggest-action.is-active .nav-suggest-opt-name{
color:var(--cl1);
}
.nav-suggest-action .nav-suggest-icon svg{
fill:var(--cl1);
}
.search-item-action .search-item-title{
color:var(--cl1);
font-weight:calc(600 + var(--fw-offset));
}
.tw-sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}