/* Redesigned header utility row: AR/EN segmented switch + evenly spaced, circular icon buttons. */

.header .header__icons {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.header .desktop-localization-wrapper {
  display: flex;
  align-items: center;
}

.nh-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem;
  margin-inline-end: 1rem;
  border: 1px solid rgba(var(--color-foreground), 0.14);
  border-radius: 999px;
  background: rgba(var(--color-foreground), 0.03);
}

.nh-lang-switch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.nh-lang-switch__opt:hover,
a.nh-lang-switch__opt:focus-visible {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground), 0.08);
}

.nh-lang-switch__opt--active {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  cursor: default;
}

.header .header__icon:not(.header__icon--summary) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  margin: 0;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.header .header__icon:not(.header__icon--summary):hover,
.header .header__icon:not(.header__icon--summary):focus-visible {
  background-color: rgba(var(--color-foreground), 0.06);
}

.header .header__icon .icon,
.header .header__icon svg {
  width: 2rem;
  height: 2rem;
}

.header .header__icon--cart {
  position: relative;
}

/* The count sits on the bag's top corner, outside its body (the bag is 2rem, centred in the icon
   button): top-start in RTL, top-end in LTR, which are both the top-right. Dawn's bottom/left offsets
   put it over the bag. The ring separates it from the icon. */
.header .header__icon--cart .cart-count-bubble {
  top: calc(50% - 2.1rem);
  bottom: auto;
  left: auto;
  right: auto;
  inset-inline-end: calc(50% - 2rem);
  box-shadow: 0 0 0 0.2rem rgb(var(--color-background));
}

html[dir='rtl'] .header .header__icon--cart .cart-count-bubble {
  inset-inline-end: auto;
  inset-inline-start: calc(50% - 2rem);
}

/* Under 990px (where the ☰ drawer replaces the inline menu): the header row is ☰ · logo · search + cart, the logo
   exactly in the middle — the side columns share what is left equally instead of the icons pushing the logo
   aside — and the language switch moves into the drawer, under the menu ("Drawer language" below). */
@media screen and (max-width: 989px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header .header__heading,
  .header .header__heading-link {
    justify-self: center;
  }

  .header .header__icons {
    justify-self: end;
  }

  /* Only when this header has the drawer switch: a published theme from before it (header.liquid
     without .nh-drawer-lang) keeps the header switch until the new theme is published. */
  .header:has(.nh-drawer-lang) .header__icons .nh-lang-switch {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .header .header__icon:not(.header__icon--summary) {
    width: 3.8rem;
    height: 3.8rem;
  }
}

/* Drawer language: a labelled, full-width switch with each language's own name ("العربية" | "English"),
   right under the menu links. */
.nh-drawer-lang {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 1.6rem 0;
  margin-inline: 3rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid rgba(var(--color-foreground), 0.08);
}

.nh-drawer-lang__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(var(--color-foreground), 0.6);
}

.nh-drawer-lang .nh-lang-switch {
  display: flex;
  margin: 0;
  padding: 0.4rem;
}

.nh-drawer-lang .nh-lang-switch__opt {
  flex: 1 1 0;
  min-width: 0;
  padding: 1.1rem 1rem;
  font-size: 1.5rem;
  letter-spacing: 0;
}

/* The menu drawer covers the page: the floating WhatsApp button (inline-styled, hence !important) would sit on
   its last row, so it steps aside while the drawer is open. */
html:has(#Details-menu-drawer-container[open]) a[data-wa] {
  display: none !important;
}