/* ---------- language switcher ----------
   A compact header control, sized to sit beside the cart and the account
   without competing with them: ~30px tall, an 18×12 flag and an 11px lowercase
   code. Written with LOGICAL properties (inline-start/end, margin-inline) so
   Arabic gets a correct mirror from `dir` alone rather than from a pile of
   [dir=rtl] overrides. The flag artwork itself is never mirrored — direction
   reverses reading order, not pictures.

   Default borders are dark-on-light: the storefront chrome is the cream
   marketing header across signed-in and guest pages (no black top bar). */
.lang-switch { position: relative; margin-inline-start: 6px; display: inline-flex; align-items: center; }
.lang-current {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding-inline: 8px;
  background: transparent; border: 1px solid rgba(25,22,18,.22);
  /* 8px, the same corner as the .topbar .icon-btn controls it sits beside —
     it was 5px, which read as a different kind of control in the same row. */
  border-radius: 8px; color: inherit; cursor: pointer; line-height: 1;
}
.lang-current:hover { border-color: rgba(25,22,18,.4); background: rgba(25,22,18,.06); }
.lang-current:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.lang-flag { display: block; border-radius: 1px; flex: none; }
.lang-code { font-size: 11px; letter-spacing: .04em; text-transform: lowercase; }
.lang-caret { opacity: .7; }

.lang-menu {
  position: absolute; z-index: 60; inset-inline-end: 0; inset-block-start: calc(100% + 6px);
  min-width: 190px; margin: 0; padding: 4px; list-style: none;
  background: #fff; color: #1a1a1a;
  border: 1px solid rgba(0,0,0,.12); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.lang-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; background: none; border: 0; border-radius: 4px;
  font-size: 13px; text-align: start; cursor: pointer; color: inherit;
}
.lang-item:hover, .lang-item:focus-visible { background: rgba(0,0,0,.06); outline: none; }
.lang-item.current { font-weight: 600; }
.lang-item .lang-name { flex: 1; }
.lang-item .lang-code { opacity: .45; font-size: 11px; }

/* A route that renders no shell (sign-in, activation, reset) still gets the
   control, in a slim top-right strip — vertically aligned as a row item. */
.lang-utility {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 10px 14px;
  background: rgba(245,242,236,.96);
  border-bottom: 1px solid rgba(25,22,18,.14);
}
.lang-utility .lang-current { border-color: rgba(25,22,18,.22); }
.lang-utility .lang-current:hover { border-color: rgba(25,22,18,.4); background: rgba(25,22,18,.06); }

/* In-row on the marketing / guest header: same vertical centre as Products
   and My account — never a separate top-right float. */
.hm-nav .lang-switch,
.hm-nav-end .lang-switch,
.hm-nav-links .lang-switch,
.topbar .lang-switch {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0;
  align-self: center;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  /* Phone chrome hides Favorites / Cart / Account. Without those (and with
     the spacer display:none), the switcher was the next flex sibling after
     Back and sat on top of it. Push it to the trailing edge so the row is
     Menu · Back · (centred logo) · Language. */
  .topbar .lang-switch {
    margin-inline-start: auto;
  }
}

@media (max-width: 640px) {
  /* Still visible, just tighter — it must not push the cart or the account off
     the header, and it must never cause horizontal overflow. */
  .lang-switch { margin-inline-start: 2px; }
  .topbar .lang-switch { margin-inline-start: auto; }
  .lang-current { height: 28px; padding-inline: 6px; gap: 4px; }
  .lang-current .lang-caret { display: none; }
  .lang-menu { min-width: 170px; }
}