/* One header geometry on every ordinary-user page, regardless of active route. */
body > header {
 display:grid;
 grid-template-columns:220px minmax(0,1fr) auto auto;
 align-items:center;
 column-gap:18px;
 min-height:92px;
 height:auto;
 padding:12px max(5vw,24px);
}
body > header > .brand {grid-column:1;justify-self:start}
body > header > nav.main-nav,
body > header > nav.carts-nav,
body > header > nav.account-nav {
 grid-column:2;display:flex;flex-wrap:nowrap;align-items:center;
 justify-content:flex-start;gap:20px;width:auto;margin:0;min-width:0;
}
body > header > nav a {font-size:14px;white-space:nowrap}
body > header > .badge {grid-column:3;margin:0;justify-self:end}
body > header > #account-nav,
body > header > #profile-menu {grid-column:4;justify-self:end;margin:0}
body > header > #profile-menu {grid-row:1}
/* Avoid shifting navigation when an avatar is appended asynchronously. */
@media(max-width:1200px){
 body > header {grid-template-columns:220px minmax(0,1fr) auto;column-gap:16px}
 body > header > nav.main-nav,
 body > header > nav.carts-nav,
 body > header > nav.account-nav {grid-column:2;flex-wrap:wrap;gap:10px 16px}
 body > header > .badge {display:none}
 body > header > #account-nav,body > header > #profile-menu {grid-column:3}
}
@media(max-width:800px){
 body > header {grid-template-columns:minmax(0,1fr) auto;row-gap:12px;min-height:92px}
 body > header > .brand {grid-column:1;grid-row:1}
 body > header > #account-nav,body > header > #profile-menu {grid-column:2;grid-row:1}
 body > header > nav.main-nav,
 body > header > nav.carts-nav,
 body > header > nav.account-nav {
  grid-column:1 / -1;grid-row:2;justify-content:flex-start;
  width:100%;gap:10px 18px;flex-wrap:wrap;
 }
}