/* Header layout only. Existing elements, colors, typography and handlers stay owned by the published site. */
html:root body header[class*="__storeTopbar"] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
@media (min-width: 761px) {
  html:root body header[class*="__storeTopbar"] {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) 268px auto !important;
    grid-template-rows: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    padding: 0 24px !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    align-items: center !important;
    justify-content: stretch !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeBrand"] {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: start !important;
    margin: 0 !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeNavigation"] {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeNavigation"] a {
    flex: 0 0 auto !important;
    padding-inline: 10px !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeHeaderBalances"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    justify-self: end !important;
  }
  html:root body header[class*="__storeTopbar"] [class$="__storeHeaderBalance"] {
    height: 54px !important;
    min-height: 54px !important;
    padding: 5px 10px !important;
    row-gap: 3px !important;
    align-content: center !important;
  }
  html:root body header[class*="__storeTopbar"] [class$="__storeHeaderBalance"] > span {
    white-space: nowrap !important;
    max-width: none !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-header-actions-enhanced {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-self: end !important;
    align-items: center !important;
    width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-header-actions-enhanced > :is(a,button) {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    align-self: center !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-header-topup { order: 1 !important; }
  html:root body header[class*="__storeTopbar"] [class*="__storeProfile"] { order: 2 !important; }
  html:root body header[class*="__storeTopbar"] .dn-header-ticket-native { order: 3 !important; }
  html:root body header[class*="__storeTopbar"] .dn-header-actions-enhanced [class*="__storeProfile"] > span:first-child {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-header-actions-enhanced [class*="__storeProfile"] > span:first-child > img {
    width: 32px !important;
    height: 32px !important;
  }
}
@media (min-width: 761px) and (max-width: 1500px) {
  html:root body header[class*="__storeTopbar"] {
    grid-template-columns: 145px minmax(0, 1fr) 252px auto !important;
    column-gap: 12px !important;
    padding-inline: 18px !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-header-topup {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    flex: 0 0 44px !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-header-topup > :is(span,b) { display: none !important; }
  html:root body header[class*="__storeTopbar"] .dn-header-ticket-native {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-header-actions-enhanced [class*="__storeProfile"] {
    width: 160px !important;
    min-width: 0 !important;
    max-width: 160px !important;
  }
}
/* The published store has no hamburger menu. Keep its navigation reachable in a second row. */
@media (min-width: 761px) and (max-width: 1180px) {
  html:root body header[class*="__storeTopbar"] {
    grid-template-columns: 125px minmax(0, 1fr) 224px auto !important;
    grid-template-rows: 68px 40px !important;
    min-height: 108px !important;
    height: 108px !important;
    padding-inline: 16px !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeNavigation"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 40px !important;
    gap: 12px !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeNavigation"] a { height: 40px !important; }
}
@media (min-width: 601px) and (max-width: 760px) {
  html:root body header[class*="__storeTopbar"] {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) auto !important;
    grid-template-rows: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }
}
@media (max-width: 760px) {
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions .dn-mobile-topup { order: 1 !important; }
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions [class*="__storeMobileSteam"] { order: 2 !important; }
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions [class*="__storeMobileTicket"] { order: 3 !important; }
}
@media (max-width: 600px) {
  html:root body header[class*="__storeTopbar"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 64px 40px !important;
    height: 112px !important;
    min-height: 112px !important;
    padding: 0 12px 7px !important;
    gap: 0 !important;
    align-items: center !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeBrand"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    justify-self: start !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    gap: 6px !important;
  }
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions > a {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
  }
  html:root body header[class*="__storeTopbar"] [class*="__storeMobileBalances"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    gap: 6px !important;
    justify-self: stretch !important;
  }
  html:root body header[class*="__storeTopbar"] [class$="__storeMobileBalance"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  html:root body header[class*="__storeTopbar"] [class$="__storeMobileBalance"] > span {
    display: block !important;
    width: auto !important;
    max-width: 70px !important;
    white-space: normal !important;
  }
  html:root body header[class*="__storeTopbar"] [class$="__storeMobileBalance"] > strong {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 360px) {
  html:root body header[class*="__storeTopbar"] { padding-inline: 9px !important; }
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions { gap: 4px !important; }
  html:root body header[class*="__storeTopbar"] .dn-mobile-header-actions > a {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex-basis: 36px !important;
  }
  html:root body header[class*="__storeTopbar"] [class$="__storeMobileBalance"] {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  html:root body header[class*="__storeTopbar"] [class$="__storeMobileBalance"] > span { max-width: none !important; }
}
/* Header layout only: existing elements, no palette, typeface or runtime changes.
   Public selectors require .site-header__inner, so the docs header is excluded. */
header.site-header:has(> .site-header__inner) { height:80px!important; }
header.site-header > .site-header__inner {
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  width:100%!important;max-width:none!important;height:80px!important;
  margin-inline:0!important;padding-inline:24px!important;gap:clamp(16px,1.5vw,30px)!important;
}
header.site-header .site-header__brand { flex:0 0 160px!important;min-width:0!important; }
header.site-header .site-nav--desktop {
  display:flex;flex:0 1 auto!important;width:auto!important;min-width:0!important;
  margin:0!important;gap:6px!important;align-items:stretch!important;height:100%!important;
}
header.site-header .site-nav--desktop > .site-nav__link {
  display:flex!important;align-items:center!important;min-height:80px!important;
  height:100%!important;padding-inline:13px!important;gap:9px!important;white-space:nowrap!important;
}
header.site-header .site-header__actions {
  display:flex!important;align-items:center!important;flex:0 0 auto!important;
  height:100%!important;gap:8px!important;margin-left:auto!important;
}
header.site-header .site-header__actions > .site-header__store { order:1!important; }
header.site-header .site-header__actions > .site-header__steam { order:2!important; }
header.site-header .site-header__actions > .site-header__ticket { order:3!important; }
header.site-header .site-header__actions > .site-mobile-menu { order:4!important; }
header.site-header .site-header__actions > :is(a,.site-mobile-menu) { flex-shrink:0!important; }
header.site-header :is(.site-header__store,.site-header__steam,.site-header__ticket,.site-header__menu) {
  height:44px!important;min-height:44px!important;align-items:center!important;justify-content:center!important;
}
@media(max-width:1500px) {
  header.site-header > .site-header__inner { padding-inline:18px!important;gap:15px!important; }
  header.site-header .site-header__brand { flex-basis:145px!important; }
  header.site-header .site-nav--desktop > .site-nav__link { padding-inline:9px!important;gap:6px!important; }
}
@media(max-width:1280px) {
  header.site-header .site-nav--desktop { display:none!important; }
  header.site-header .site-mobile-menu { display:block!important; }
  header.site-header .site-header__menu { display:inline-grid!important;width:44px!important;min-width:44px!important;padding:0!important; }
  header.site-header .site-mobile-menu[open] > .site-mobile-nav {
    position:fixed!important;top:88px!important;right:18px!important;left:auto!important;
    width:min(360px,calc(100vw - 36px))!important;max-height:calc(100dvh - 104px)!important;
    overflow-y:auto!important;
  }
  header.site-header .site-mobile-nav > .site-nav__link { min-height:44px!important;height:auto!important; }
}
@media(max-width:800px) {
  header.site-header:has(> .site-header__inner),header.site-header > .site-header__inner { height:68px!important; }
  header.site-header > .site-header__inner { padding-inline:16px!important;gap:12px!important; }
  header.site-header .site-header__brand { flex-basis:125px!important; }
  header.site-header :is(.site-header__store,.site-header__steam,.site-header__ticket,.site-header__menu) {
    display:inline-flex!important;width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;
  }
  header.site-header :is(.site-header__store-label,.site-header__steam-login) { display:none!important; }
  header.site-header :is(.site-header__ticket-copy,.site-header__ticket-signal) { display:none!important; }
  header.site-header .site-header__ticket-mark { display:inline-flex!important;position:static!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;min-width:0!important;margin:0!important;padding:0!important; }
  header.site-header .site-header__ticket-mark svg { display:block!important; }
  header.site-header .site-mobile-menu[open] > .site-mobile-nav { top:76px!important;right:16px!important;max-height:calc(100dvh - 92px)!important; }
}
@media(max-width:600px) {
  header.site-header:has(> .site-header__inner),header.site-header > .site-header__inner { height:64px!important; }
  header.site-header > .site-header__inner { padding-inline:12px!important;gap:8px!important; }
  header.site-header .site-header__brand { flex-basis:112px!important; }
  header.site-header .site-header__actions { gap:6px!important; }
  header.site-header :is(.site-header__store,.site-header__steam,.site-header__ticket,.site-header__menu) {
    width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
  }
  header.site-header .site-mobile-menu[open] > .site-mobile-nav {
    top:72px!important;right:12px!important;width:calc(100vw - 24px)!important;max-height:calc(100dvh - 88px)!important;
  }
}
@media(max-width:360px) {
  header.site-header > .site-header__inner { padding-inline:9px!important; }
  header.site-header .site-header__brand { flex-basis:108px!important; }
  header.site-header .site-header__actions { gap:4px!important; }
  header.site-header :is(.site-header__store,.site-header__steam,.site-header__ticket,.site-header__menu) { width:36px!important;min-width:36px!important; }
}

/* The existing cabinet header has navigation, logout and its own mobile menu.
   Its balances/top-up live in main .overview and are intentionally not targeted. */
body > header.topbar > .shell {
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  width:100%!important;max-width:none!important;min-height:80px!important;
  margin-inline:0!important;padding-inline:24px!important;gap:clamp(16px,1.5vw,30px)!important;
}
body > header.topbar > .shell > .brand { flex:0 0 160px!important;min-width:0!important; }
body > header.topbar > .shell > .nav { flex:0 1 auto!important;min-width:0!important;gap:22px!important; }
body > header.topbar > .shell > .logout { margin-left:auto!important;flex-shrink:0!important;min-height:44px!important; }
body > header.topbar > .shell > .mobile-menu { margin-left:auto!important;flex-shrink:0!important; }
@media(max-width:1500px) {
  body > header.topbar > .shell { padding-inline:18px!important;gap:15px!important; }
  body > header.topbar > .shell > .brand { flex-basis:145px!important; }
}
@media(max-width:800px) {
  body > header.topbar > .shell { min-height:68px!important;padding-inline:16px!important;gap:12px!important; }
}
@media(max-width:760px) {
  body > header.topbar > .shell > .mobile-menu > summary { display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important; }
  body > header.topbar .mobile-menu[open] > nav { top:calc(100% + 8px)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 92px)!important;overflow-y:auto!important; }
}
@media(max-width:600px) {
  body > header.topbar > .shell { min-height:64px!important;padding-inline:12px!important;gap:8px!important; }
  body > header.topbar > .shell > .mobile-menu > summary { min-height:38px!important; }
}
@media(max-width:360px) {
  body > header.topbar > .shell { padding-inline:9px!important; }
}