/* ============================================================
   HEADER
   ============================================================ */
.topbar {
    background: var(--brand-navy); color: #fff; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14.7px; font-weight: 700; letter-spacing: 0; text-transform: uppercase;
}
.header { background: #fff; position: relative; z-index: 60; }
.header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand-stripe); }
.header__inner {
    height: var(--header-h);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
}
.header__logo { justify-self: start; }
.header__logo img { width: 190px; height: auto; }
.header__site-name { font-size: 24px; font-weight: 900; color: var(--ink); text-transform: uppercase; }

.search { position: relative; width: 407px; justify-self: center; }
.search input {
    width: 100%; height: 38px; padding: 0 44px 0 20px;
    border: 1px solid var(--field-border); border-radius: 19px; background: #fff;
    font-size: 15px; color: var(--ink); outline: none;
}
.search input::placeholder { color: #a2a2a2; }
.search input:focus { border-color: #8e8e8e; }
.search__btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center; color: #9a9a9a;
}
.search__btn svg { width: 19px; height: 19px; }

.header__tools { justify-self: end; display: flex; align-items: center; gap: 12.3px; margin-right: 11.5px; }
.tool { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.tool svg { width: 21px; height: 21px; flex: none; stroke: currentColor; }
.tool:hover { color: var(--brand-blue); }
.tool__count { color: var(--red); font-weight: 700; }
.tool__caret { width: 11px; height: 11px; opacity: .6; margin-left: -1px; }
.burger { display: none; }