/* Mega menus: stable hover, single-line nav, Retail columns, overview typography */
.nav,
.nav__inner,
.nav__links,
.menu-wrap {
  overflow: visible !important;
}

/* Mobile drawer — primary categories before utility links (DOM-order safe) */
.drawer__panel {
  display: flex !important;
  flex-direction: column !important;
}

.drawer__panel > .drawer__header {
  order: 0 !important;
  flex-shrink: 0 !important;
}

.drawer__panel > .drawer__group {
  order: 1 !important;
  flex-shrink: 0 !important;
}

.drawer__panel > .drawer__cta {
  order: 12 !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/*
 * Header layout: desktop nav needs ~1470px of header row width (logo + 5 labels + CTA).
 * The page shell max-width (1280px) is narrower than that, so viewport breakpoints alone
 * cannot work — switch on the nav container's actual width instead.
 */
.nav > .container.nav__inner {
  container-type: inline-size;
  container-name: shammam-nav;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ≥980px: hamburger default (overrides bundle desktop-at-980) until container is wide enough */
@media (min-width: 980px) {
  .nav .nav__links {
    display: none !important;
  }

  .nav .nav__cta {
    display: none !important;
  }

  .nav .nav__burger {
    display: grid !important;
  }
}

/* Desktop horizontal nav only when the header row can fit all items */
@container shammam-nav (min-width: 1470px) {
  .nav .container.nav__inner,
  .nav__inner {
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  .nav .nav__links {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .nav .nav__link,
  .nav .menu-wrap > .nav__link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding-block: 26px !important;
  }

  .nav .menu-wrap {
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .nav .menu-wrap::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    height: 14px !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  .nav .nav__cta {
    display: flex !important;
    flex-shrink: 0 !important;
    gap: 16px !important;
  }

  .nav .nav__cta .btn {
    white-space: nowrap !important;
  }

  .nav .nav__burger {
    display: none !important;
  }

  .nav .brand {
    flex-shrink: 0 !important;
  }
}

@container shammam-nav (min-width: 1680px) {
  .nav .nav__links {
    gap: 22px !important;
  }

  .nav .nav__link,
  .nav .menu-wrap > .nav__link {
    font-size: 15px !important;
  }
}

/* Fallback when container queries are unavailable (~1470px row + 48px padding) */
@supports not (container-type: inline-size) {
  @media (min-width: 1520px) {
    .nav .nav__links {
      display: flex !important;
    }

    .nav .nav__cta {
      display: flex !important;
    }

    .nav .nav__burger {
      display: none !important;
    }
  }
}

/* Left-anchored mega panel (do not fight React open/close opacity) */
.menu-wrap > .menu.menu--wide {
  left: 0 !important;
  right: auto !important;
  transform: translateY(8px) !important;
}

.menu-wrap > .menu.menu--wide[data-open='true'] {
  transform: translateY(0) !important;
}

.menu--wide {
  min-width: 680px !important;
  width: auto !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 14px 18px !important;
}

.menu--wide:has(.menu__col) {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.menu--wide:not(:has(.menu__col)) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
}

.menu__col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.menu__col--left {
  flex: 0 0 340px;
  width: 340px;
  min-width: 340px;
  max-width: 340px;
}

.menu__col--right {
  flex: 0 0 auto;
  min-width: 220px;
}

.menu__col .menu__item:not(:has(> small)),
.menu--wide .menu__item:not(:has(> small)) {
  overflow: visible !important;
  white-space: normal !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 10px !important;
}

.menu--wide > .menu__item:first-child,
.menu--wide .menu__item--overview,
.menu--wide a.menu__item:has(> small),
.menu__col--left > .menu__item:first-child,
.menu__col--left .menu__item--overview {
  width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  align-self: start !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
}

.menu--wide .menu__item small,
.menu--wide > .menu__item:first-child small,
.menu--wide .menu__item--overview small,
.menu--wide a.menu__item:has(> small) small,
.menu__col--left > .menu__item:first-child small,
.menu__col--left .menu__item--overview small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  white-space: normal !important;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  margin-top: 6px !important;
  color: var(--color-on-surface-variant, #434655) !important;
}