/* V870 · intrinsic desktop header canvas.
   Browser zoom changes the CSS viewport width.  The desktop header must never
   respond by squeezing individual navigation items into the utility controls.
   Instead it keeps one intrinsic desktop composition and lets the viewport
   reveal a smaller portion of that composition, just like Ozon Seller.

   --gm-desktop-canvas-min is measured by global-modern.js from the actual
   brand + navigation + utility controls.  1680px is only a no-flash fallback
   before JS has completed the first measurement.  Touch/mobile layouts are
   intentionally untouched. */

html.app-desktop-device body.app-modern-shell {
  --gm-nav-fit: 1 !important;
  --gm-desktop-canvas-min: 1680px;
}

/* Let the shell, header and utility rail share the same intrinsic desktop
   width.  This is the missing piece in V869: previously only very small
   (<1120px) viewports were protected. */
html.app-desktop-device body.app-modern-shell > .site-shell {
  min-width: var(--gm-desktop-canvas-min, 1680px) !important;
}

/* Keep hero/content geometry tied to the same canvas when browser zoom-in
   makes 100vw smaller than the intrinsic desktop composition. */
@media (min-width: 1121px) {
  html.app-desktop-device body.app-modern-shell {
    --app-layout-viewport: min(
      var(--app-desktop-layout-max, 1760px),
      max(100vw, var(--gm-desktop-canvas-min, 1680px))
    ) !important;
  }
}

/* One desktop header geometry at every browser zoom level.  Do not let older
   mid-size desktop rules re-size the brand/nav when the viewport crosses
   1480px or 1120px because of zoom. */
html.app-desktop-device body.app-modern-shell .app-header,
html.app-desktop-device body.app-modern-shell.products-modern-body .app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1300 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  grid-template-rows: 44px !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 0 var(--gm-actions-reserve, 360px) 0 20px !important;
  overflow: visible !important;
  transform: none !important;
}

html.app-desktop-device body.app-modern-shell .brand,
html.app-desktop-device body.app-modern-shell.products-modern-body .brand {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

html.app-desktop-device body.app-modern-shell .brand-name,
html.app-desktop-device body.app-modern-shell.products-modern-body .brand-name {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

html.app-desktop-device body.app-modern-shell .nav-toggle,
html.app-desktop-device body.app-modern-shell.products-modern-body .nav-toggle {
  display: none !important;
}

html.app-desktop-device body.app-modern-shell .main-nav,
html.app-desktop-device body.app-modern-shell.products-modern-body .main-nav {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}

html.app-desktop-device body.app-modern-shell .main-nav-menu,
html.app-desktop-device body.app-modern-shell.products-modern-body .main-nav-menu {
  position: relative !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

html.app-desktop-device body.app-modern-shell .main-nav__link,
html.app-desktop-device body.app-modern-shell .main-nav-menu > .main-nav__link,
html.app-desktop-device body.app-modern-shell.products-modern-body .main-nav__link,
html.app-desktop-device body.app-modern-shell.products-modern-body .main-nav-menu > .main-nav__link {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 11.7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: none !important;
}

html.app-desktop-device body.app-modern-shell .main-nav__link > span,
html.app-desktop-device body.app-modern-shell .main-nav-menu > .main-nav__link > span {
  display: block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Utilities also keep their desktop dimensions.  Their measured width is
   included in --gm-desktop-canvas-min, so they can no longer sit on top of nav. */
html.app-desktop-device body.app-modern-shell .workspace-utility-bar,
html.app-desktop-device body.app-modern-shell.sidebar-collapsed .workspace-utility-bar {
  position: absolute !important;
  top: 0 !important;
  right: 14px !important;
  left: auto !important;
  z-index: 1320 !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  overflow: visible !important;
}

html.app-desktop-device body.app-modern-shell .workspace-utility-bar .header-actions,
html.app-desktop-device body.app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: visible !important;
}

/* V869's <=1120 rule used a fixed 1500px canvas.  The intrinsic measurement
   is more accurate and must win there as well. */
@media (max-width: 1120px) {
  html.app-desktop-device,
  html.app-desktop-device body.app-modern-shell {
    min-width: var(--gm-desktop-canvas-min, 1680px) !important;
    overflow-x: auto !important;
  }

  html.app-desktop-device body.app-modern-shell > .site-shell {
    width: var(--gm-desktop-canvas-min, 1680px) !important;
    min-width: var(--gm-desktop-canvas-min, 1680px) !important;
    max-width: none !important;
  }

  html.app-desktop-device body.app-modern-shell main.page-container,
  html.app-desktop-device body.app-modern-shell.products-modern-body main.page-container {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}