:root{
  --snink-red:#d82044;
  --snink-black:#000;
}

/* ===== SNINK TOP (header + hero only) ===== */
.snink-top{
  background: var(--snink-red);
  position: relative;
  /* IMPORTANT:
     Clip the large black background SVG marks so they do not bleed into sections
     below the red "top" area (e.g., "Om mig"), especially on mobile. */
  overflow: hidden;
  /* Space for fixed header so content doesn't slide under it */
  padding: 98px 0 0;
}

/* Big black background logo marks (desktop + mobile) */
.snink-top::after{
  content:"";
  position:absolute;
  right:-180px;
  top:70px;
  width:780px;
  height:780px;
  background: url("../img/sn-logo-black.svg") no-repeat center/contain;
  opacity: .92;
  pointer-events:none;
  transform: rotate(-8deg);
}

.snink-top::before{
  content:"";
  position:absolute;
  left:-220px;
  bottom:-420px;
  width:760px;
  height:760px;
  background: url("../img/sn-logo-black.svg") no-repeat center/contain;
  opacity: .92;
  pointer-events:none;
  transform: rotate(10deg);
}

.snink-topbar{
  /* Fixed so it stays across the whole page (not limited to hero/header height) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: var(--snink-red);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  /* Give the header breathing room (matches your desktop mock) */
  padding: 14px 28px 14px;
}

/* Compact sticky state when scrolling */
.snink-topbar.snink-scrolled{
  /* Keep the exact same height when scrolling to avoid snapping */
  border-bottom: 2px solid var(--snink-black);
}

.snink-brand img{
  width: 86px;
  height: auto;
  display:block;
}

/* HERO WRAP keeps exact geometry for kundeklub placement */
.snink-hero-wrap{
  width: min(980px, calc(100% - 160px));
  margin: 0 auto;
  position: relative;
}

.snink-desktop-nav{
  display:flex;
  gap: 26px;
  align-items:center;
  flex: 1;
}

.snink-desktop-nav a{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--snink-black);
  text-decoration:none;
}

.snink-desktop-nav a:hover{ opacity: .8; }

.snink-top-actions{
  display:flex;
  align-items:center;
  gap: 16px;
}

.snink-live{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--snink-black);
}

.snink-live-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  display:inline-block;
}

/* Keep your existing live-state hook */
.snink-live-dot.on{ background: #00ff7b; }

.snink-flag{
  appearance:none;
  border:0;
  background: transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:right;
}

.snink-flag img{
  width: 34px;
  height: 24px;
  display:block;
}

.snink-user{
  color: var(--snink-black);
  text-decoration:none;
  font-size: 18px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
}

.snink-burger{
  display:none;
  appearance:none;
  border:0;
  background: transparent;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  align-items:center;
  justify-content:center;
  gap: 6px;
}

.snink-burger span{
  display:block;
  width: 28px;
  height: 3px;
  background: var(--snink-black);
}

.snink-hero{
  position: relative;
  z-index: 2;
  padding: 18px 0 26px;
}

.snink-kundeklub{
  position:absolute;
  left: -74px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--snink-black);
  text-decoration:none;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform-origin: left center;
}

.snink-kundeklub i{ font-size: 16px; }

.snink-hero-card{
  width: 100%;
  position: relative;
}

.snink-hero-img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 0;
  box-shadow: 14px 14px 0 var(--snink-black);
}

.snink-hero-buttons {
    position: absolute;
    right: 26px;
    bottom: 22px;
    display: flex;
    gap: 12px;
}

@media (max-width: 920px) {
    .snink-hero-buttons {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        justify-content: center;
    }
}

.snink-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.35);
  color: #fff;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  text-decoration:none;
  backdrop-filter: blur(6px);
}

.snink-pill-outline{
  background: rgba(0,0,0,.22);
}

.snink-pill:hover{ opacity:.92; }

/* Social circles inside image (desktop) */
.snink-hero-social{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  display:flex;
  gap: 14px;
}

.snink-hero-social a,
.snink-social-row a{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.25);
}

.snink-hero-social a i,
.snink-social-row a i{ color:#fff; }

/* If icons are SVG (fallback / preferred), force them visible */
.snink-hero-social a svg,
.snink-social-row a svg{
  width: 16px;
  height: 16px;
  fill: #fff;
  display:block;
}

.snink-hero-social a i,
.snink-social-row a i{ font-size: 16px; }

.snink-under{
  width: min(980px, calc(100% - 160px));
  margin: 0 auto;
  padding: 16px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}

.snink-address{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  text-align:center;
}

.snink-sponsors{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 40px;
  padding: 8px 0 6px;
}

.snink-sponsors img{
  max-height: 64px;
  width:auto;
  display:block;
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* Mobile-only social row lives below sponsors, as in your mobile mock */
.snink-social-row{ display:none; gap: 14px; }

/* Mobile menu dropdown */
.snink-mobile-menu{
  display:none;
  position: absolute;
  right: 18px;
  top: 60px;
  width: min(320px, calc(100% - 36px));
  background: #000;
  padding: 14px;
  box-shadow: 10px 10px 0 var(--snink-black);
}

.snink-mobile-menu a{
  display:block;
  padding: 12px 10px;
  text-decoration:none;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--snink-red);
}

/* Kundeklub shortcut in mobile dropdown */
.snink-mobile-menu a.snink-mobile-club{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.snink-mobile-menu a.snink-mobile-club .snink-club-icn{
  width: 18px;
  height: 18px;
  fill: var(--snink-red);
  flex: 0 0 auto;
}

/* Bottom “Kundeklub” entry inside mobile menu */
.snink-mobile-club{
  display:flex !important;
  align-items:center;
  gap: 10px;
}

.snink-mobile-club svg{
  width: 18px;
  height: 18px;
  fill: var(--snink-red);
  flex: 0 0 auto;
}

.snink-mobile-menu a + a:not(.snink-mobile-club){ border-top: 1px solid rgba(255,255,255,.08); }

.snink-mobile-menu.open{ display:block; }

/* Responsive */
@media (max-width: 920px){
  .snink-desktop-nav{ display:none; }
  .snink-burger{ display:flex; flex-direction:column; }
  .snink-topbar{ padding: 14px 18px 14px; }
  .snink-hero-wrap,
  .snink-under{ width: calc(100% - 36px); }
  .snink-kundeklub{ display:none; }
  .snink-hero-social{ display:none; }
  .snink-social-row{ display:flex; }
  .snink-brand img{
  width: 130px;
}
  .snink-hero-buttons{
    right: 18px;
    bottom: 18px;
  }
}

@media (max-width: 520px){
  .snink-live{ gap: 8px;display:none; }
  .snink-flag img{ width: 20%; height: 20%; }
  .snink-hero-img{ box-shadow: 12px 12px 0 var(--snink-black); }
  .snink-sponsors{ gap: 24px; }
  .snink-sponsors img{ max-height: 52px; }
}