.site-header {
    position: sticky;
    top: 0;
    z-index: 999;

    width: 100%;
    border-bottom: 1px solid var(--sw-border);
    background:
        rgba(9, 10, 12, 0.84);

    backdrop-filter:
        blur(18px)
        saturate(130%);
}

.header-container {
    min-height: 76px;
    padding-block: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand-logo a,
.site-logo {
    color: var(--sw-text);
    text-decoration: none;
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 800;
    letter-spacing: -0.055em;
}

.brand-logo a::after {
    content: ".";
    color: var(--sw-accent);
}

.main-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.main-menu a {
    position: relative;
    color: var(--sw-text-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition:
        color .22s var(--sw-ease);
}

.main-menu a:hover {
    color: var(--sw-text);
}

.main-menu a:not(.cart-link)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 2px;
    border-radius: 999px;
    background: var(--sw-accent);
    transition:
        right .24s var(--sw-ease);
}

.main-menu a:not(.cart-link):hover::after {
    right: 0;
}

.cart-link {
    padding: 11px 18px;
    border: 1px solid var(--sw-border-strong);
    border-radius: 999px;
    background: var(--sw-surface-2);
    color: var(--sw-text) !important;
}