@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Shared header, independent of each page's content theme. */
body[data-shared-header] { padding-top: 114px; }
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 21px max(24px, calc((100vw - 1180px) / 2));
  background: rgba(5,7,11,.9); border-bottom: 1px solid rgba(191,207,224,.16);
  backdrop-filter: blur(18px); font: 400 16px/1.6 'Space Grotesk', sans-serif;
  letter-spacing: normal; text-transform: none;
}
.site-header .brand { display: block; flex: 0 0 96px; margin: 0; padding: 0; }
.site-header .brand img { display: block; width: 96px; height: auto; max-width: none; }
.site-header .brand::before, .site-header .brand::after { content: none; }
.site-header .site-nav { display: flex; align-items: center; gap: 30px; margin: 0; }
.site-header .site-nav a { padding: 0; color: #a1adbd; font: 400 .88rem/1.6 'Space Grotesk', sans-serif; letter-spacing: normal; text-transform: none; text-decoration: none; }
.site-header .site-nav a:hover { color: #20baff; }
.site-header .header-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-header .login-link { display: inline-flex; align-items: baseline; color: #cbd4df; font: 400 .86rem/1.4 'Space Grotesk',sans-serif; letter-spacing: normal; text-transform: none; }
.site-header .account-name { display: block; margin-left: .32em; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #20baff; font: 400 .78rem/1.4 'Space Grotesk',sans-serif; letter-spacing: normal; text-transform: none; }
.site-header .bag { display: inline-flex; align-items: center; gap: 0; padding: 9px 13px; border: 1px solid rgba(191,207,224,.16); border-radius: 20px; color: #cbd4df; background: transparent; font: 400 .82rem/1.6 'Space Grotesk',sans-serif; letter-spacing: normal; text-transform: none; text-decoration: none; }
.site-header .bag b { margin-left: 7px; padding: 2px 6px; border-radius: 10px; color: #05070b; background: #70e4df; font-weight: 600; }
.site-header .bag.has-items { animation: anumys-bag-neon 1.4s ease-in-out infinite !important; transform-origin: center; }
@keyframes anumys-bag-neon {
  0%,100% { transform: scale(1); background-color: transparent; border-color: #419b97; box-shadow: 0 0 2px #70e4df33; }
  50% { transform: scale(1.12); background-color: #70e4df44; border-color: #ffffff; box-shadow: 0 0 0 7px #70e4df88, 0 0 35px #70e4df, 0 0 65px #70e4dfcc; }
}
.site-header .menu-toggle { display: none; padding: 8px 13px; border: 1px solid rgba(191,207,224,.16); border-radius: 4px; background: transparent; color: #f1f5f9; font: inherit; }
@media(max-width:1100px) {
  .site-header { padding: 17px 24px; gap: 14px; }
  .site-header .menu-toggle { display: block; margin-left: auto; }
  .site-header .site-nav { display: none; position: absolute; top: 100%; left: 24px; right: 24px; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; background: #080c12; border: 1px solid rgba(191,207,224,.16); }
  .site-header .site-nav.is-open { display: flex; }
  .site-header .site-nav a { padding: 13px; }
  .site-header .account-name { max-width: 74px; }
}
@media(max-width:440px) { .site-header { padding-inline: 12px; gap: 8px; } .site-header .account-name { max-width: 48px; } }
@media(prefers-reduced-motion:reduce) { .site-header .bag.has-items { animation: none !important; border-color: #70e4df; box-shadow: 0 0 12px #70e4df88; } }

/* Viewport positioning also works with an older cached content stylesheet. */
#bag-added-overlay:not([hidden]) { position: fixed !important; inset: 0 !important; width: 100vw; height: 100dvh; z-index: 1000; display: flex !important; align-items: center !important; justify-content: center !important; background: #03060bb8; }
#bag-added-overlay[hidden] { display: none !important; }
#bag-added-overlay .bag-added-panel { position: fixed !important; left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%) !important; margin: 0 !important; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 34px 32px 28px; border: 1px solid #70e4df66; border-radius: 14px; background: #0d121b; color: #f1f5f9; text-align: center; box-shadow: 0 30px 80px #0009; }