.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
}

.lang-switch button{
  appearance:none;
  min-width:42px;
  height:34px;
  padding:0 10px;
  border:1px solid #716c63;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  color:#272b2c;
  font:inherit;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.lang-switch button:hover{
  background:rgba(255,255,255,.48);
  border-color:#4c5050;
}

.lang-switch button.is-active{
  background:#a56f50;
  border-color:#a56f50;
  color:#fff8ec;
}

.lang-switch button:focus-visible{
  outline:3px solid rgba(165,111,80,.25);
  outline-offset:2px;
}

/* make sure the top bar always keeps the switch visible */
.topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}

@media(max-width:620px){
  .lang-switch{
    gap:4px;
  }
  .lang-switch button{
    min-width:38px;
    height:32px;
    padding:0 8px;
  }
}