.cj-locale-switcher { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.cj-locale-switcher select { min-height: 36px; max-width: 145px; padding: .3rem .5rem; border: 1px solid var(--color-border, #dce5ef); border-radius: 8px; color: #0B1726; background: var(--color-surface, #fff); font: inherit; }
.cj-locale-switcher option { color: #0B1726; background: #fff; }
.cj-locale-switcher button { min-height: 36px; white-space: nowrap; }
.cj-locale-switcher-mobile { justify-content: center; width: 100%; margin: .5rem 0; }
.cj-locale-switcher-mobile select { flex: 1; max-width: none; }
.adm-top-actions .cj-locale-switcher select { max-width: 112px; }

/* Header (desktop): compact, readable on the transparent hero header too.
   With JS the select submits on change (header.js), so "Update" is hidden. */
.hh .cj-locale-switcher-desktop select { max-width: 112px; min-height: 36px; padding: .25rem .5rem; font-size: .875rem; font-weight: 600; }
.hh-transparent .cj-locale-switcher-desktop select { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.hh-transparent.is-scrolled .cj-locale-switcher-desktop select { background: rgba(255, 255, 255, .06); }
html.cj-js .cj-locale-switcher-desktop button { display: none; }

/* Desktop switcher only where the full nav is shown; below that the
   switcher lives inside the burger menu (same breakpoint as header.css). */
@media (max-width: 1279px) {
  .cj-locale-switcher-desktop { display: none; }
  .cj-locale-switcher-mobile { display: flex; }
}
@media (min-width: 1280px) {
  .cj-locale-switcher-mobile { display: none; }
}