/* Common storefront chrome. Loaded last in both public and administration layouts. */
html:has(> body.storefront-theme) { background: #101014; }
body.storefront-theme {
  --bg: #101014;
  --surface: #18181c;
  --surface-2: #24242b;
  --surface-3: #292931;
  --line: #34343d;
  --text: #f1f1f5;
  --muted: #b1b1bd;
  color: var(--text);
  background: #101014;
}
body.storefront-theme > .screen-red-streaks { display: none !important; }
body.storefront-theme > .site-header {
  position: sticky; inset: 0 0 auto; z-index: 70;
  width: 100%; height: 64px; min-height: 64px; padding: 0;
  border-bottom: 1px solid #242429; background: #18181c;
  box-shadow: none; backdrop-filter: none;
}
body.storefront-theme > .site-header :is(a, button, input):focus-visible { outline: 2px solid #8ee1fc; outline-offset: 3px; }
body.storefront-theme > .site-header .home-brand-wordmark > span { color: inherit; }
body.storefront-theme > .site-header .cart-count { border-color: #18181c; background: #dedee5; color: #151519; }
body.storefront-theme > .site-header .round-button[aria-current="page"] { background: #25323b; color: #8ee1fc; }
body.storefront-theme .mobile-home-navigation { border-top-color: #34343d; background: #18181c; }
body.storefront-theme .mobile-home-navigation > a { color: #b1b1bd; }
body.storefront-theme .mobile-home-navigation > a[aria-current="page"] { color: #6bd7f8; }
body.storefront-theme .mobile-home-navigation > a:focus-visible { outline: 2px solid #8ee1fc; outline-offset: -2px; }
body.storefront-theme .app-loading-overlay { background: #101014d9; }
body.storefront-theme .app-loading-dialog { border-color: #41414c; background: #18181c; box-shadow: 0 20px 70px #0007; }
body.storefront-theme .app-loading-ring { border-color: #34343d; border-top-color: #22b9ed; box-shadow: none; filter: none; }
body.storefront-theme .app-loading-kicker { color: #6bd7f8; }
body.storefront-theme .app-loading-title { color: #f1f1f5; }
body.storefront-theme .app-loading-detail { color: #b1b1bd; }

@media (max-width: 1023px) {
  body.storefront-theme > .site-header .header-inner {
    display: flex; align-items: center; gap: 8px;
    width: min(960px, calc(100% - 24px)); height: 64px; min-height: 64px;
    min-width: 0; margin-inline: auto; padding: 0;
  }
  body.storefront-theme > .site-header .header-brand {
    position: static; display: flex; flex: 1 1 0; order: 0; align-self: center;
    align-items: center; justify-content: flex-start; gap: 7px;
    width: auto; height: auto; min-width: 0; margin: 0;
  }
  body.storefront-theme > .site-header .brand-logo {
    position: static; flex: 0 0 36px; width: 36px; height: 36px;
    object-fit: contain; transform: none; filter: none;
  }
  body.storefront-theme > .site-header .home-brand-wordmark {
    display: block !important; min-width: 0; padding: 0; overflow: hidden;
    color: #f1f1f5; font-size: 18px; font-weight: 800; font-style: normal;
    line-height: 1.1; letter-spacing: -.5px; white-space: nowrap; text-overflow: ellipsis;
  }
  body.storefront-theme > .site-header :is(.home-pc-header-nav, .home-pc-header-search, .home-pc-launcher, .search-box) { display: none !important; }
  body.storefront-theme > .site-header .header-tools {
    position: static; display: flex; flex: 0 0 auto; order: 1;
    align-items: center; gap: 0; min-width: 0; margin: 0; transform: none;
  }
  body.storefront-theme > .site-header :is(.home-header-search, .header-tools .round-button) {
    display: grid !important; place-items: center; flex: 0 0 44px;
    width: 44px; height: 44px; min-height: 44px; padding: 9px;
    border: 0; border-radius: 7px; background: transparent;
    color: #ededf4; box-shadow: none; cursor: pointer;
  }
  body.storefront-theme > .site-header .header-tools svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  }
  body.storefront-theme > .site-header :is(.home-header-search, .header-tools .round-button):hover { background: #292931; color: #8ee1fc; transform: none; }
  body.storefront-theme > .site-header .mobile-menu-toggle {
    position: static; display: block !important; flex: 0 0 44px; order: 2;
    width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 9px;
    border: 1px solid #4a4a56; border-radius: 7px; background: transparent;
  }
  body.storefront-theme > .site-header .mobile-menu-toggle:hover { border-color: #858591; background: #292931; }
  body.storefront-theme > .site-header .mobile-menu-toggle span { background: #ededf4; }
  body.storefront-theme > .site-header .main-nav {
    position: absolute; inset: 64px 0 auto; display: none !important;
    flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; height: auto; max-height: calc(100dvh - 80px); padding: 8px;
    overflow-y: auto; border: 1px solid #34343d; border-radius: 0 0 8px 8px;
    background: #18181c; box-shadow: 0 18px 30px #0005;
  }
  body.storefront-theme > .site-header .main-nav.open { display: flex !important; }
  body.storefront-theme > .site-header .main-nav > a { display: flex; align-items: center; min-height: 44px; height: auto; padding: 10px 14px; color: #b1b1bd; font-size: 15px; line-height: 1.5; text-shadow: none; }
  body.storefront-theme > .site-header .main-nav > a::after { display: none; }
  body.storefront-theme > .site-header .main-nav > a:is(:hover, .active) { border-radius: 6px; background: #25323b; color: #8ee1fc; }
  body.storefront-theme > .site-header .cart-count { top: 0; right: 0; min-width: 17px; height: 17px; font-size: 10px; }
  /* The header now occupies normal flow above the cinematic artwork. */
  body.storefront-theme.game-detail-route .game-cinematic-hero-inner { padding-top: 24px; }
}

@media (max-width: 380px) {
  body.storefront-theme > .site-header .header-inner { gap: 4px; }
  body.storefront-theme > .site-header .header-brand { gap: 6px; }
  body.storefront-theme > .site-header .brand-logo { flex-basis: 32px; width: 32px; height: 32px; }
  body.storefront-theme > .site-header .home-brand-wordmark { width: 56px; max-width: 56px; font-size: 14px; white-space: normal; letter-spacing: -.3px; overflow: visible; }
  body.storefront-theme > .site-header .home-brand-wordmark > span { display: block; }
}