.sh-nav.sh-nav-centered {
  --nav-surface: var(--bg-card);
  --nav-border: var(--line);
  --nav-shadow: 0 16px 40px -20px var(--bg-dark);
  --nav-accent-surface: color-mix(in srgb, var(--primary) 9%, var(--nav-surface));
  --nav-accent-border: color-mix(in srgb, var(--primary) 24%, var(--nav-border));
  --nav-menu-fill: linear-gradient(145deg, var(--nav-accent-surface), var(--nav-surface) 65%);
  --nav-menu-shadow: 0 18px 45px color-mix(in srgb, var(--bg-dark) 75%, transparent);
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 1rem;
  padding: .75rem max(2rem, calc((100% - 1280px) / 2 + 2rem));
  align-items: center;
}
.sh-nav-centered .logo-link { grid-column: 2; grid-row: 1; justify-self: center; text-decoration: none; padding-inline: .8rem; }
.sh-nav-centered .logo-link img { display: block; height: 66px !important; width: auto; max-width: 300px; object-fit: contain; }
.sh-nav-centered .nav-links {
  grid-column: 1; grid-row: 1; width: auto !important; order: initial !important;
  display: flex; justify-self: start; gap: 1rem !important; padding: 0 !important;
  overflow: visible !important; mask-image: none !important;
}
.sh-nav-centered .nav-links a.sh-nav-trade {
  border-radius: 8px; padding: .55rem .3rem !important;
  font-weight: 700; font-size: .95rem;
  background: transparent; border-color: transparent;
  box-shadow: none; color: var(--text-gray) !important;
  gap: .5rem;
}
.sh-nav-centered .nav-links a.sh-nav-sell {
  background: var(--primary); color: var(--bg-dark) !important; border-color: var(--primary);
  padding: .55rem .8rem !important;
  font-family: 'Barlow', 'Sora', sans-serif !important;
  font-weight: 900; font-style: italic; font-size: 1.15rem; text-transform: uppercase;
  letter-spacing: 0;
}
.sh-nav-centered .nav-links a.sh-nav-trade:not(.sh-nav-sell) svg {
  width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  background: var(--primary); color: var(--bg-dark);
}
.sh-nav-centered .nav-links a.sh-nav-trade:not(.sh-nav-sell):hover {
  color: var(--primary) !important; background: transparent; box-shadow: none;
}
.sh-nav-centered .sh-nav-right { grid-column: 3; grid-row: 1; justify-self: end; gap: .8rem; }
@media(min-width:761px) {
  .sh-nav-centered .sh-nav-right { margin-right: -1rem; }
}
/* Present + meny längst ut till höger – både inloggad och utloggad */
.sh-nav-right { display: flex; align-items: center; }
.sh-nav-right > .sh-nav-gift { order: 3; }
.sh-nav-right > .sh-nav-menu { order: 4; }
.sh-nav-menu { position: relative; flex: none; }
.sh-nav-gift {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  color: var(--primary); text-decoration: none; border-radius: 8px;
  transition: transform .22s ease, background .22s ease;
}
.sh-nav-gift svg { width: 34px; height: 34px; }
.sh-nav-gift:hover { background: var(--nav-accent-surface); transform: translateY(-2px) rotate(-5deg); }
.sh-nav-gift:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.sh-nav-menu summary {
  list-style: none; display: grid; place-items: center;
  width: 44px; height: 44px; border: none;
  border-radius: 8px; color: var(--primary); cursor: pointer;
  background: transparent;
  box-shadow: none;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.sh-nav-menu summary svg { width: 28px; height: 28px; stroke-width: 2.4; }
.sh-nav-menu summary svg path { transform-box: view-box; transform-origin: 12px 12px; transition: transform .26s ease, opacity .18s ease; }
.sh-nav-menu summary svg path:nth-child(1) { transform-origin: 12px 6px; }
.sh-nav-menu summary svg path:nth-child(3) { transform-origin: 12px 18px; }
.sh-nav-menu[open] summary svg path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sh-nav-menu[open] summary svg path:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.sh-nav-menu[open] summary svg path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sh-nav-menu summary:hover, .sh-nav-menu[open] summary {
  background: var(--nav-accent-surface);
  box-shadow: inset 0 0 0 1px var(--nav-accent-border);
}
.sh-nav-menu summary:active { transform: scale(.94); }
.sh-nav-menu summary::-webkit-details-marker { display: none; }
.sh-nav-menu summary:hover { border-color: var(--primary); }
.sh-nav-menu summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.sh-nav-menu[open] summary { border-color: var(--primary); }
.sh-nav-menu-list {
  position: absolute; top: calc(100% + 16px); right: 0; width: 284px;
  display: flex; flex-direction: column; gap: 4px; padding: .65rem;
  background: var(--nav-menu-fill); border: 1px solid var(--nav-accent-border);
  border-radius: 8px; box-shadow: var(--nav-menu-shadow); z-index: 120;
  transform-origin: top right;
}
.sh-nav-menu-list::before {
  content: ''; position: absolute; top: -6px; right: 16px; width: 10px; height: 10px;
  background: var(--nav-accent-surface); border-top: 1px solid var(--nav-accent-border);
  border-left: 1px solid var(--nav-accent-border); transform: rotate(45deg);
}
.sh-nav-menu[open] .sh-nav-menu-list { animation: sh-menu-reveal .28s cubic-bezier(.2,.75,.25,1) both; }
@keyframes sh-menu-reveal {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sh-nav-menu-list a {
  display: flex; align-items: center; gap: .85rem; min-height: 54px; padding: .65rem .75rem;
  color: var(--text-gray); font-family: 'Sora', sans-serif;
  font-size: .9rem; font-weight: 600; text-decoration: none; border-radius: 4px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.sh-nav-menu-list a::before {
  content: ''; width: 22px; height: 22px; flex: none; background: var(--primary);
  mask: var(--menu-icon) center / contain no-repeat;
}
.sh-nav-menu-list a[href*="bjud-in"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13l-7 7a2 2 0 0 1-3 0L3 13V3h10l7 7a2 2 0 0 1 0 3Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E");
}
.sh-nav-menu-list a[href*="nyheter"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h3M8 18h8'/%3E%3C/svg%3E");
}
.sh-nav-menu-list a[href*="contact"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11a9 9 0 0 1-9 9H3l2-5a9 9 0 1 1 16-4Z'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E");
}
.sh-nav-menu-list a[href*="giveaway"] { border-top: 1px solid var(--nav-accent-border); border-radius: 0 0 4px 4px; margin-top: 4px; padding-top: .9rem; }
.sh-nav-menu-list a[href*="giveaway"]::before { display: none; }
.sh-nav-menu-list a::after {
  content: ''; margin-left: auto; width: 6px; height: 6px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.sh-nav-menu-list a:hover,.sh-nav-menu-list a[aria-current=page] {
  color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent);
  transform: translateX(2px);
}
@media(max-width:760px) {
  .sh-nav.sh-nav-centered { grid-template-columns: minmax(0,1fr) auto; gap: .7rem; padding: .65rem 1rem; }
  .sh-nav-centered .logo-link { grid-row: 1; grid-column: 1; justify-self: start; padding-inline: 0 1.2rem; }
  .sh-nav-centered .sh-nav-right { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .sh-nav-centered .nav-links { grid-row: 3; grid-column: 1 / -1; justify-self: center; justify-content: center; padding: 0 !important; }
  .sh-nav-centered .logo-link img { height: 38px !important; max-width: 172px; }
  .sh-nav-menu { position: static; }
  .sh-nav-centered .sh-nav-right { position: relative; }
  .sh-nav-menu-list { left: auto; right: 0; width: min(284px,calc(100vw - 32px)); }
  .sh-nav-centered .sh-nav-right { gap: .35rem; }
  .sh-nav-gift { width: 36px; height: 40px; }
  .sh-nav-gift svg { width: 30px; height: 30px; }
}
@media(prefers-reduced-motion:reduce) {
  .sh-nav-menu[open] .sh-nav-menu-list { animation: none; }
  .sh-nav-menu summary, .sh-nav-menu summary svg path, .sh-nav-menu-list a, .sh-nav-gift { transition: none; }
}
@media(min-width:761px) and (max-width:1000px) {
  .sh-nav-centered .logo-link img { height: 58px !important; max-width: 258px; }
  .sh-nav-centered .nav-links { padding-left: 0 !important; gap: .6rem !important; }
  .sh-nav-centered .nav-links a.sh-nav-sell { font-size: 1rem; }
}
@media(min-width:1001px) and (max-width:1150px) {
  .sh-nav-centered .nav-links { padding-left: 0 !important; }
}
@media(max-width:380px) {
  .sh-nav.sh-nav-centered { padding-inline: .6rem; }
  .sh-nav-centered .logo-link img { max-width: 132px; height: 30px !important; }
  .sh-nav-centered .sh-nav-right { gap: .4rem; }
  .sh-nav-menu summary { width: 34px; height: 38px; }
}/* Mobil: logga + knappar på samma rad, Sälj/Byt under */
@media(max-width:760px) {
  .sh-nav.sh-nav-centered { gap: .5rem .4rem; padding: .55rem .8rem; }
  .sh-nav-centered .logo-link { padding-inline: 0 !important; min-width: 0; }
  .sh-nav-centered .logo-link img { height: 30px !important; max-width: 140px; width: auto; }
  .sh-nav-centered .sh-nav-right { grid-column: 2; grid-row: 1; justify-self: end; min-width: 0; }
  .sh-nav-centered .nav-links { grid-row: 2; }
  .sh-nav-centered .sh-nav-right .btn-steam, .sh-nav-centered .sh-nav-right a[href*="auth/steam"] { font-size: .78rem; padding: .5rem .7rem; white-space: nowrap; }
}
@media(max-width:400px) {
  .sh-nav-centered .logo-link img { max-width: 112px; height: 25px !important; }
  .sh-nav-gift { width: 30px; }
  .sh-nav-gift svg { width: 24px; height: 24px; }
}
/* Mobil inloggad: profilraden får egen rad så inget överlappar loggan */
@media(max-width:760px) {
  .sh-nav-centered:has(#sh-profile:not(.hidden)) .sh-nav-right { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: flex-end; flex-wrap: wrap; }
  .sh-nav-centered:has(#sh-profile:not(.hidden)) .nav-links { grid-row: 3; }
  .sh-nav-centered .sh-profile { min-width: 0; max-width: 100%; }
  .sh-nav-centered .sh-profile-text { min-width: 0; }
  .sh-nav-centered #sh-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; display: block; }
}
@media(max-width:760px) {
  .sh-nav-centered:not(:has(#sh-profile:not(.hidden))) .sh-nav-gift { display: none; }
  .sh-nav-centered .sh-steam-btn { font-size: .74rem !important; padding: .45rem .6rem !important; white-space: nowrap; }
}