.topbar {
    height: var(--header-height);
    padding: 0 25px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 20px;
}

.mobile-logo {
    display: none;
}

.topbar-search {
    width: min(700px, 100%);
    position: relative;
}

.topbar-search input {
    width: 100%;
    height: 46px;
    padding: 0 55px 0 20px;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: #f4f4f4;
    outline: none;
}

.topbar-search input:focus {
    background: #ffffff;
    border-color: #9e9e9e;
}

.topbar-search button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--black);
    color: #ffffff;
    position: absolute;
    top: 3px;
    right: 3px;
}

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.topbar-wallet {
    min-height: 44px;
    padding: 7px 14px;
    border-radius: 12px;
    background: var(--black);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wallet-icon {
    font-weight: 800;
    color: var(--red);
}

.topbar-wallet small {
    display: block;
    color: #999999;
    font-size: 10px;
}

.topbar-wallet strong {
    font-size: 13px;
}

.topbar-button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #f3f3f3;
    display: grid;
    place-items: center;
    position: relative;
}

.topbar-counter {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--red);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
}

.topbar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--black);
    color: #ffffff;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}