/* Keep the same language control in the header across the storefront themes. */
details[data-ximei-language-picker] {
  position: relative;
  flex: none;
  min-width: 0;
}
details[data-ximei-language-picker][open] { z-index: 160; }
details[data-ximei-language-picker] > summary { cursor: pointer; white-space: nowrap; }
header details[data-ximei-language-picker][open] > :is(nav.dn-language, div) {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: auto;
  left: auto;
  display: grid;
  box-sizing: border-box;
  width: max-content;
  min-width: 10rem;
  max-width: calc(100vw - 2rem);
  max-height: min(65vh, 27rem);
  overflow: auto;
  overscroll-behavior: contain;
  gap: 2px;
  padding: 6px;
  background: var(--x17-surface, #fff);
  color: var(--x17-ink, #232323);
  border: 1px solid var(--x17-line, #8884);
  border-radius: 8px;
  box-shadow: 0 12px 32px #0002;
  z-index: 1;
}
details[data-ximei-language-picker][open] > :is(nav.dn-language, div) > a {
  display: block;
  margin: 0;
  text-align: start;
}
details[data-ximei-language-picker][open] > :is(nav.dn-language, div) > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
/* The contact template renders the picker between the logo and site navigation. */
.xe-header:has(> .xct-nav) > details[data-ximei-language-picker] { order: 2; }
.xe-header:has(> .xct-nav) > .xct-nav { order: 1; margin-inline-start: auto; }
.x17-header-actions > details[data-ximei-language-picker] { order: 2; }
[dir="rtl"] .xe-header:has(> .xct-nav) > details[data-ximei-language-picker] { order: -1; }
[dir="rtl"] .xe-header:has(> .xct-nav) > .xct-nav { order: 0; }
[dir="rtl"] .wr-site-header > details[data-ximei-language-picker],
[dir="rtl"] .xe-header:not(:has(> .xct-nav)) > details[data-ximei-language-picker],
[dir="rtl"] .i18n-header > details[data-ximei-language-picker] { order: -1; }
[dir="rtl"] .x17-header > .x17-header-actions,
[dir="rtl"] .x17-header-actions > details[data-ximei-language-picker] { order: -1; }
body[data-studio="velabeam"] .wr-site-header > details[data-ximei-language-picker] { align-self: end; }
header > details[data-ximei-language-picker][data-ximei-language-fallback] { margin-left: auto; justify-self: end; }
[data-header="brand"] .xe-header > details[data-ximei-language-picker][data-ximei-language-fallback] { grid-area: 1 / 3; }
@media (min-width: 741px) {
  .xe-header:has(> .xct-nav) { display: flex; }
}
@media (max-width: 740px) {
  .xe-header:has(> .xct-nav) > .xct-nav,
  [dir="rtl"] .xe-header:has(> .xct-nav) > .xct-nav { margin-inline-start: 0; order: 3; }
  header.xe-header:has(> details[data-ximei-language-picker][data-ximei-language-fallback]) { display: flex; flex-wrap: wrap; }
  header:has(> details[data-ximei-language-picker][data-ximei-language-fallback]) > :is(nav,.wr-header-panel) { flex-basis: 100%; order: 2; }
}

@media (max-width: 600px) {
  header details[data-ximei-language-picker][open] > :is(nav.dn-language, div) {
    inset-inline-start: auto;
    inset-inline-end: auto;
    right: 0;
    left: auto;
  }
}