/* Keyzira v6.6.48 — Stable centered public header
   Root cause fixed:
   the desktop header used `brand | remaining-space | actions`.
   When guest identity/auth actions grew, the nav was centered only inside
   the remaining space and visibly slid left. The nav is now independently
   centered on wide desktops. */

/* ----------------------------------------------------------
   1400–1599
   There is enough room for the product controls, but NOT enough
   room for logo + 7/8 categories + guest identity + auth actions
   in a visually stable single row. Use the established hamburger
   pattern instead of squeezing or shifting the category navigation.
   ---------------------------------------------------------- */
@media (min-width:1400px) and (max-width:1599px){
  body:not(.admin-mode) .site-header{
    height:66px !important;
    padding:6px 12px 0 !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .header-inner{
    position:relative !important;
    width:calc(100% - 16px) !important;
    max-width:1480px !important;
    height:54px !important;
    padding:0 10px 0 14px !important;
    display:grid !important;
    grid-template-columns:minmax(165px,1fr) 38px auto !important;
    align-items:center !important;
    gap:8px !important;
    border-radius:13px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .brand{
    grid-column:1 !important;
    justify-self:start !important;
    min-width:0 !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:grid !important;
    position:static !important;
    grid-column:2 !important;
    width:36px !important;
    height:36px !important;
    border-radius:9px !important;
    font-size:15px !important;
    z-index:82 !important;
  }

  body:not(.admin-mode) .main-nav{
    display:none !important;
    position:absolute !important;
    z-index:81 !important;
    top:61px !important;
    left:0 !important;
    right:0 !important;
    width:auto !important;
    height:auto !important;
    padding:9px !important;
    border:1px solid var(--line) !important;
    border-radius:13px !important;
    background:var(--surface) !important;
    box-shadow:0 18px 45px rgba(8,10,24,.22) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    gap:5px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav.open{
    display:grid !important;
  }

  body:not(.admin-mode) .main-nav a{
    width:100% !important;
    min-width:0 !important;
    height:39px !important;
    padding:0 11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-radius:8px !important;
    color:var(--muted) !important;
    font-size:11px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .main-nav a:hover,
  body:not(.admin-mode) .main-nav a.active{
    background:var(--primary-soft) !important;
    color:var(--primary) !important;
  }

  body:not(.admin-mode) .main-nav a.active::after{
    display:none !important;
  }

  body:not(.admin-mode) .header-actions{
    grid-column:3 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    min-width:max-content !important;
  }

  /* Keep the guest's actual generated name visible at this width.
     The menu is what collapses, not the user's identity. */
  body:not(.admin-mode) .guest-account-chip{
    min-width:118px !important;
    max-width:132px !important;
  }

  body:not(.admin-mode) .guest-account-copy{
    display:grid !important;
  }

  body:not(.admin-mode) .guest-account-copy small{
    display:none !important;
  }

  body:not(.admin-mode) .guest-account-copy strong{
    display:block !important;
    max-width:86px !important;
  }
}


/* ----------------------------------------------------------
   1600+
   True centered desktop navigation:
        [ flexible left rail ] [ NAV ] [ flexible right rail ]
   Both rails are exactly equal, so changing account/guest controls
   can no longer move the category navigation away from screen center.
   ---------------------------------------------------------- */
@media (min-width:1600px){
  body:not(.admin-mode) .site-header{
    height:70px !important;
    padding:7px 12px 0 !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .header-inner{
    position:relative !important;
    width:calc(100% - 36px) !important;
    max-width:1680px !important;
    height:55px !important;
    padding:0 16px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:18px !important;
    border-radius:14px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .brand{
    grid-column:1 !important;
    justify-self:start !important;
    min-width:0 !important;
    max-width:210px !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:none !important;
  }

  body:not(.admin-mode) .main-nav{
    grid-column:2 !important;
    justify-self:center !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:15px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav a{
    flex:0 0 auto !important;
    min-width:0 !important;
    height:100% !important;
    padding:0 !important;
    font-size:11.8px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .header-actions{
    grid-column:3 !important;
    justify-self:end !important;
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }

  /* The identity remains readable; it no longer participates in
     calculating the nav center because of the symmetric grid above. */
  body:not(.admin-mode) .guest-account-chip{
    min-width:126px !important;
    max-width:142px !important;
  }

  body:not(.admin-mode) .guest-account-copy strong{
    max-width:94px !important;
  }
}


/* At common 1600–1749 screens, keep the category block compact enough
   to leave a clean visual gap before the right-side controls. */
@media (min-width:1600px) and (max-width:1749px){
  body:not(.admin-mode) .header-inner{
    width:calc(100% - 28px) !important;
    padding-inline:14px !important;
    column-gap:13px !important;
  }

  body:not(.admin-mode) .main-nav{
    gap:12px !important;
  }

  body:not(.admin-mode) .main-nav a{
    font-size:11.2px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    width:58px !important;
  }

  body:not(.admin-mode) .language-picker{
    padding-inline:4px !important;
  }

  body:not(.admin-mode) .guest-account-chip{
    min-width:120px !important;
    max-width:128px !important;
  }

  body:not(.admin-mode) .guest-account-copy strong{
    max-width:82px !important;
  }
}


/* Very large desktops can breathe without moving the nav center. */
@media (min-width:1900px){
  body:not(.admin-mode) .header-inner{
    max-width:1820px !important;
    padding-inline:18px !important;
    column-gap:22px !important;
  }

  body:not(.admin-mode) .main-nav{
    gap:18px !important;
  }

  body:not(.admin-mode) .main-nav a{
    font-size:12px !important;
  }
}


/* Dark dropdown must remain opaque when the 1400–1599 menu is open. */
html[data-theme="dark"] body:not(.admin-mode) .main-nav.open{
  background:var(--surface) !important;
  border-color:var(--line-strong) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.42) !important;
}