.language-switcher {
    gap: 3px;
}

.language-switcher a,
.language-switcher .language-coming {
    min-width: 28px;
    padding: 7px 6px;
    border-radius: 20px;
    text-align: center;
}

.language-switcher .language-coming {
    cursor: default;
    opacity: .32;
}

.mobile-language-selector {
    display: none;
}

.footer-language-bar {
    min-height: 38px;
    margin-top: -24px;
    padding: 0 clamp(24px, 6vw, 96px);
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5f716b;
    font-size: 11px;
    letter-spacing: .5px;
}

.footer-language-bar a,
.footer-language-bar span {
    min-width: 30px;
    padding: 6px 7px;
    border-radius: 20px;
    text-align: center;
}

.footer-language-bar a.active {
    border: 1px solid rgba(23, 54, 46, .35);
    color: var(--ink);
}

.footer-language-bar .language-coming {
    cursor: default;
    opacity: .38;
}

@media (max-width: 980px) {
    .site-header.menu-open .language-switcher {
        right: 62px;
        left: 24px;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-width: 620px) {
    .language-switcher,
    .site-header.menu-open .language-switcher {
        display: none;
    }

    .mobile-language-selector {
        display: block;
        position: relative;
        flex: none;
    }

    .mobile-language-toggle {
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font: 600 10px var(--sans);
        cursor: pointer;
    }

    .mobile-language-toggle svg {
        width: 8px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        transition: transform .18s ease;
    }

    .mobile-language-selector.open .mobile-language-toggle svg {
        transform: rotate(180deg);
    }

    .mobile-language-menu {
        position: absolute;
        z-index: 30;
        top: calc(100% + 10px);
        right: 0;
        width: 174px;
        padding: 10px;
        border: 1px solid rgba(23,54,46,.16);
        background: var(--paper);
        color: var(--ink);
        box-shadow: 0 18px 42px rgba(7,42,36,.2);
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 5px;
    }

    .mobile-language-menu[hidden] {
        display: none;
    }

    .mobile-language-menu a {
        min-height: 38px;
        border: 1px solid transparent;
        display: grid;
        place-items: center;
        font-size: 11px;
    }

    .mobile-language-menu a:hover,
    .mobile-language-menu a:focus-visible {
        border-color: rgba(23,54,46,.25);
        outline: 0;
    }

    .mobile-language-menu a.active {
        border-color: var(--ink);
        border-radius: 50%;
        background: #fffdf8;
    }

    .footer-language-bar {
        display: none;
    }
}
