/* Shared site header. Existing account, currency and language handlers remain authoritative. */
body > header.karma-header {
  position: sticky; top: 0; z-index: 30; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 14px max(24px, calc((100vw - 1320px) / 2));
  background: linear-gradient(110deg, #16111af7, #0c0c14f5 65%);
  border: 0; border-bottom: 1px solid #e6394620;
  box-shadow: 0 8px 32px #00000024; backdrop-filter: blur(20px);
}
body > header.karma-header > .brand {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  min-height: 42px; padding: 0; color: #f34f62; font-size: 19px;
  font-weight: 850; line-height: 1; letter-spacing: .15em; white-space: nowrap;
  transition: color .2s ease, filter .2s ease;
}
body > header.karma-header > .brand::before { content: ""; display: block; width: 3px; height: 26px; border-radius: 4px; background: linear-gradient(#ff8290, #d62a43); box-shadow: 0 0 18px #f3435d45; }
body > header.karma-header > .brand:hover { color: #ff8290; filter: drop-shadow(0 0 12px #ed3a4d30); }
body > header.karma-header > nav {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  flex-direction: row; gap: 3px; min-width: 0; width: auto; padding: 4px;
  margin: 0; border: 1px solid #ffffff09; border-radius: 12px;
  background: #ffffff02; font-size: 12px; font-weight: 550;
  overflow: visible; white-space: normal;
}
body > header.karma-header > nav a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 36px; padding: 8px 10px; border: 1px solid transparent;
  border-radius: 8px; color: #a9a0b3; font-size: 12px; line-height: 1.2;
  white-space: nowrap; transition: color .2s ease, background .2s ease, border-color .2s ease;
}
body > header.karma-header > nav a:hover { color: #f6edf3; background: #ffffff07; border-color: #ffffff08; }
body > header.karma-header > nav a[aria-current] { color: #ffdce3; background: linear-gradient(135deg, #e639462b, #8f244521); border-color: #e6394630; }
body > header.karma-header > nav a[target="_blank"]::after { content: "↗"; color: #8e6578; font-size: 11px; }
body > header.karma-header > .right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin: 0; }
body > header.karma-header .nav-account { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 250px; overflow: visible; font-size: 0; line-height: 1; white-space: nowrap; }
body > header.karma-header .nav-account a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; max-width: 170px; min-height: 38px; padding: 10px 12px;
  border: 1px solid #ffffff12; border-radius: 9px; color: #c9bfce;
  background: #ffffff03; font-size: 12px; font-weight: 600; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
body > header.karma-header .nav-account a:hover { color: #fff; border-color: #e6394650; background: #e6394610; }
body > header.karma-header .nav-account a:only-child { display: block; max-width: 170px; border-color: #e6394638; background: #e6394610; color: #f2d9e2; }
body > header.karma-header .nav-account a + a { color: #f0b4c1; border-color: #e6394630; }
body > header.karma-header .cur-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #ffffff12; border-radius: 10px; background: #090a10a0; flex: 0 0 auto; }
body > header.karma-header .cur-switch button { display: grid; place-items: center; width: 28px; min-width: 28px; min-height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #8c8298; font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
body > header.karma-header .cur-switch button:hover { color: #e9dce9; background: #ffffff07; }
body > header.karma-header .cur-switch button.on { color: #fff; background: linear-gradient(135deg, #e6495b, #bd2c47); box-shadow: 0 2px 8px #e639461c; }
body > header.karma-header .lang { display: inline-flex; align-items: center; justify-content: center; width: 42px; min-width: 42px; min-height: 38px; padding: 0; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff03; color: #c4b7cf; font-size: 11px; font-weight: 700; letter-spacing: .05em; flex: 0 0 auto; transition: color .2s ease, border-color .2s ease, background .2s ease; }
body > header.karma-header .lang:hover { color: #fff; border-color: #e6394650; background: #e639460c; }
body > header.karma-header :is(a, button):focus-visible { outline: 2px solid #ff8194; outline-offset: 3px; }
body > header.karma-header .nav-toggle { display: none; width: 42px; height: 42px; min-width: 42px; padding: 0; margin: 0; border: 1px solid #ffffff1a; border-radius: 11px; background: #ffffff04; }
body > header.karma-header .nav-toggle span { width: 18px; height: 2px; border-radius: 2px; background: #dec9db; }
@media (max-width: 1180px) and (min-width: 901px) {
  body > header.karma-header { grid-template-columns: auto 1fr; gap: 10px 22px; padding: 12px 24px; }
  body > header.karma-header > .brand { grid-column: 1; grid-row: 1; }
  body > header.karma-header > .right { grid-column: 2; grid-row: 1; }
  body > header.karma-header > nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding: 3px; }
  body > header.karma-header > nav a { padding-inline: 15px; }
}
@media (max-width: 900px) {
  body > header.karma-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; padding: 12px 20px; }
  body > header.karma-header > .brand { grid-column: 1; grid-row: 1; font-size: 18px; }
  body > header.karma-header > .right { grid-column: 2; grid-row: 1; gap: 7px; }
  body > header.karma-header > .nav-toggle { grid-column: 3; grid-row: 1; }
  body > header.karma-header[data-navigation-ready] > .nav-toggle { display: inline-flex; }
  body > header.karma-header > nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 7px; margin-top: 2px; border: 1px solid #ffffff12; border-radius: 12px; background: #14111bf5; }
  body > header.karma-header[data-navigation-ready]:not(.nav-open) > nav { display: none; }
  body > header.karma-header[data-navigation-ready].nav-open > nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 60vh; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; animation: karma-nav-enter .2s ease; }
  body > header.karma-header > nav a { justify-content: flex-start; min-height: 44px; padding: 11px 13px; font-size: 13px; }
  body > header.karma-header .nav-account { max-width: min(250px, 40vw); }
  body > header.karma-header .nav-account a { max-width: 130px; padding-inline: 10px; }
  body > header.karma-header .nav-account a:only-child { max-width: 160px; }
}
@media (max-width: 600px) {
  body > header.karma-header { grid-template-columns: 1fr auto; gap: 9px 12px; padding: 10px 16px; }
  body > header.karma-header > .brand { min-height: 36px; font-size: 18px; }
  body > header.karma-header > .brand::before { height: 22px; }
  body > header.karma-header > .right { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; width: 100%; gap: 7px; }
  body > header.karma-header > .nav-toggle { grid-column: 2; grid-row: 1; width: 38px; height: 36px; }
  body > header.karma-header > nav { grid-row: 3; margin-top: 0; }
  body > header.karma-header .nav-account { max-width: none; margin-right: auto; }
  body > header.karma-header .nav-account a { min-height: 36px; padding: 9px 10px; max-width: 122px; font-size: 11px; }
  body > header.karma-header .nav-account a:only-child { max-width: min(190px, 48vw); }
  body > header.karma-header .cur-switch { border-radius: 9px; }
  body > header.karma-header .cur-switch button { width: 26px; min-width: 26px; min-height: 28px; }
  body > header.karma-header .lang { width: 36px; min-width: 36px; min-height: 36px; }
}
@keyframes karma-nav-enter { from { opacity: .6; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  body > header.karma-header, body > header.karma-header *, body > header.karma-header *::before, body > header.karma-header *::after { animation: none !important; transition: none !important; }
}
