/* SILQ — designsystem
   Riktning från logotypen: hög kontrast, svart/vitt, minimalt.
   Champagne som enda accent — silkeskänsla utan att bli rörigt. */

:root {
  --ink:        #0A0A0A;
  --ink-soft:   #3D3A36;
  --paper:      #FAF8F5;
  --paper-warm: #F1EDE6;
  --line:       #DFD8CD;
  --accent:     #D4AF37;   /* guld */
  --accent-dk:  var(--accent);   /* samma guld överallt — inga bronstoner kvar */
  --guld:       var(--accent);
  --ok:         #2F6B4F;
  --err:        #A33A2E;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --w-max: 1160px;
  --gutter: 20px;
  --r: 2px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; max-width: 62ch; }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--accent-dk); }

img { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(56px, 9vw, 112px) 0; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark a { color: var(--paper); }
.section--warm { background: var(--paper-warm); }

/* --- Header --- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  color: var(--paper);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 64px;
}
/* Loggan är trycket från mössan, avritat som vektor (assets/silq-logga.svg).
   Texten "SILQ" ligger kvar för skärmläsare och sökmotorer men ritas inte;
   formen målas i --paper genom loggan som mask. */
.brand {
  display: inline-block; flex-shrink: 0;
  width: 82px; height: 20px;
  font-size: 0; line-height: 0; color: transparent; text-decoration: none;
  background-color: var(--paper);
  -webkit-mask: url("assets/silq-logga.svg") left center / contain no-repeat;
          mask: url("assets/silq-logga.svg") left center / contain no-repeat;
  transition: background-color .15s;
}
a.brand:hover, a.brand:focus-visible { background-color: var(--guld); }
a.brand:focus-visible { outline: 2px solid var(--guld); outline-offset: 4px; }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a {
  color: var(--paper); text-decoration: none;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--guld); }

.nav-toggle {
  display: none; background: none; border: 0; color: var(--paper);
  font-size: 1.5rem; cursor: pointer; padding: 4px 8px;
}

/* --- Knappar --- */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.04em;
  padding: 15px 30px; border-radius: var(--r);
  background: var(--ink); color: var(--paper);
  text-decoration: none; transition: background .15s, color .15s;
}
.btn:hover { background: var(--accent); color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--accent); color: var(--ink); }
/* .section--dark a är mer specifik än .btn--light och gjorde knapptexten vit på vitt */
.section--dark a.btn--light { color: var(--ink); }
.section--dark a.btn--light:hover { color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--full { width: 100%; text-align: center; }

/* --- Hero --- */
.hero { background: var(--ink); color: var(--paper); overflow: hidden; }
.hero .wrap {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1fr 1fr; align-items: center;
  padding-block: clamp(56px, 9vw, 104px);
}
.hero__kicker {
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.hero__fig { aspect-ratio: 4/3; background: #161616; border-radius: var(--r); overflow: hidden; }
.hero__fig img { width: 100%; height: 100%; object-fit: cover; }

/* --- Rutnät --- */
.grid { display: grid; gap: clamp(24px, 4vw, 48px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { background: var(--paper); padding: 28px; border-radius: var(--r); }
.card--line { box-shadow: inset 0 0 0 1px var(--line); }

/* --- Formulär --- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 6px; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  font: inherit; font-size: 1rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.field__hint { font-size: .82rem; color: var(--ink-soft); margin-top: 5px; }
.field__err { font-size: .82rem; color: var(--err); margin-top: 5px; display: none; }
.field.is-invalid input { border-color: var(--err); }
.field.is-invalid .field__err { display: block; }

.row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

/* --- Ordersammanfattning --- */
.summary { background: var(--paper-warm); padding: 24px; border-radius: var(--r); }
.summary__line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: .95rem;
}
.summary__line--total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
}

/* --- Swish --- */
.swish { text-align: center; padding: 32px 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r); }
.swish__qr { width: 260px; height: 260px; margin: 0 auto 20px; }
.swish__ref {
  font-family: ui-monospace, Menlo, monospace; font-size: 1.45rem;
  font-weight: 700; letter-spacing: .06em;
  background: var(--paper-warm); padding: 10px 18px;
  border-radius: var(--r); display: inline-block;
}
.notice {
  padding: 18px 20px; border-radius: var(--r);
  background: var(--paper-warm); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .94rem;
}
.notice--wait { background: #FDF8E6; box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .55); }

/* --- Footer --- */
.site-foot { background: var(--ink); color: var(--paper); padding: 56px 0 32px; font-size: .9rem; }
.site-foot a { color: var(--paper); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
.site-foot__cols { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr; }
.site-foot__links { list-style: none; margin: 0; padding: 0; }
.site-foot__links li { margin-bottom: 8px; }
.site-foot__legal {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid #2A2A2A; color: #8D8D8D; font-size: .82rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Mobil --- */
@media (max-width: 860px) {
  .hero .wrap, .grid--2, .grid--3, .row, .site-foot__cols { grid-template-columns: 1fr; }
  .hero__fig { order: -1; aspect-ratio: 4/3; }
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--ink); flex-direction: column; align-items: flex-start;
    gap: 0; padding: 8px 20px 20px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Teamet ---------- */
.member { display: flex; flex-direction: column; }
.member__photo {
  width: 112px; height: 112px; border-radius: 50%; margin-bottom: 20px;
  background: var(--ink); color: var(--paper); object-fit: cover;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 2rem; letter-spacing: .02em;
}
.member__role {
  margin: 0 0 4px; font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.member__name { font-size: 1.5rem; margin: 0 0 12px; }

/* ---------- hidden ----------
   Skripten växlar vyer med elementets hidden-attribut. Utan den här regeln
   vinner en display-regel över hidden och båda vyerna syns samtidigt. */
[hidden] { display: none !important; }

/* ---------- Varukorg i menyn ---------- */
.korg-antal {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--accent); color: var(--ink);
  border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: 0; line-height: 1;
}
.btn.is-lagd { background: var(--ok); color: #fff; }
.btn--light.is-lagd { background: var(--ok); color: #fff; }

/* ---------- Köpblock på produktsidan ---------- */
.kop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.kop__antal { margin-bottom: 0; flex: 0 0 auto; }
.kop__knapp { flex: 1 1 auto; min-width: 190px; }

/* ---------- Varukorgsrader i kassan ---------- */
.korgrader { margin-bottom: 8px; }
.korgrad {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 64px 1fr auto auto;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.korgrad:first-child { padding-top: 0; }
.korgrad__bild { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.korgrad__text { min-width: 0; }
.korgrad__namn { margin: 0; font-weight: 600; font-size: .95rem; max-width: none; }
.korgrad__pris { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); max-width: none; }
.korgrad__bort {
  margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 2px;
}
.korgrad__bort:hover { color: var(--err); }
.korgrad__summa { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.korg-tom { color: var(--ink-soft); }

/* ---------- Produktbilder: vit bakgrund ----------
   Alla produktfoton är frilagda mot vitt. Ytan bakom dem är också vit,
   så bild och ram flyter ihop och mössan står i fokus. */
.produktbild {
  margin: 0; background: #fff; border-radius: var(--r); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.produktbild img { width: 100%; height: auto; }

/* ---------- Produktvisning: galleri, 3D, förstoring ---------- */
.media__scen {
  position: relative; aspect-ratio: 4 / 3;
  background: #fff; border-radius: var(--r); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.media__huvud {
  width: 100%; height: 100%; object-fit: contain;
  cursor: pointer; user-select: none; -webkit-user-drag: none;
  transition: opacity .25s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.media__scen:hover .media__huvud { transform: scale(1.025); }
.media__huvud.is-byter { opacity: 0; }
.media__huvud:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.media__3d-knapp {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(10, 10, 10, .9); color: var(--paper);
  font: inherit; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .15s;
}
.media__3d-knapp:hover { background: var(--ink); }
.media__3d-knapp svg { width: 20px; height: 20px; }
.media__ikon {
  position: absolute; right: 12px; top: 12px;
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
  transition: background .15s, color .15s;
}
.media__ikon:hover { background: var(--ink); color: var(--paper); }
.media__ikon svg { width: 20px; height: 20px; }
.media__3d-knapp:focus-visible, .media__ikon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.media__hjalp { margin: 12px 0 0; font-size: .8rem; color: var(--ink-soft); max-width: none; }

.media__miniatyrer { display: flex; gap: 10px; margin-top: 12px; }
.media__mini {
  width: 76px; padding: 0; cursor: pointer;
  background: #fff; border: 0; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; line-height: 0;
  transition: box-shadow .15s;
}
.media__mini img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 4px; }
.media__mini:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.media__mini.is-vald { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- 3D-visaren ---------- */
.cap3d__duk { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.cap3d__duk.is-drar { cursor: grabbing; }
body.v3d-oppen { overflow: hidden; }

.v3d {
  position: fixed; inset: 0; z-index: 110;
  background: #fff; color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; transition: opacity .3s ease;
}
.v3d.is-synlig { opacity: 1; }
.v3d__topp {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 18px clamp(16px, 4vw, 40px) 0;
}
.v3d__kicker {
  margin: 0 0 4px; font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dk);
}
.v3d__titel { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.4rem); letter-spacing: -.01em; }
.v3d__stang {
  flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--paper-warm); color: var(--ink);
  transition: background .15s, color .15s;
}
.v3d__stang:hover { background: var(--ink); color: var(--paper); }
.v3d__stang svg { width: 22px; height: 22px; }

.v3d__scen { position: relative; min-height: 0; overflow: hidden; }
.v3d__scen .cap3d__duk { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.v3d.is-klar .cap3d__duk { opacity: 1; }
.v3d__reserv {
  position: absolute; inset: 8% 10%; width: 80%; height: 84%;
  object-fit: contain; opacity: .35; filter: blur(6px);
  transition: opacity .4s ease, filter .4s ease;
}
.v3d.is-klar .v3d__reserv { opacity: 0; }
.v3d.is-fel .v3d__reserv { opacity: 1; filter: none; }
.v3d__status {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  margin: 0; max-width: 90%; text-align: center;
  font-size: .82rem; color: var(--ink-soft);
}
.v3d__status:empty { display: none; }

.v3d__fot {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 16px max(20px, env(safe-area-inset-bottom));
}
.v3d__vyer {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--paper-warm); border-radius: 999px;
}
.v3d__vy {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px; color: var(--ink-soft);
  transition: background .2s, color .2s;
}
.v3d__vy:hover { color: var(--ink); }
.v3d__vy.is-vald { background: var(--ink); color: var(--paper); }
.v3d__vy[disabled] { opacity: .45; cursor: default; }
.v3d__vy:focus-visible, .v3d__stang:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v3d__hjalp { margin: 0; font-size: .78rem; color: var(--ink-soft); text-align: center; max-width: none; }
.v3d__hjalp--peka { display: none; }
@media (hover: none), (pointer: coarse) {
  .v3d__hjalp--mus { display: none; }
  .v3d__hjalp--peka { display: inline; }
}

/* ---------- Hero med 3D-mössan ----------
   Ljus hero: mössan ska stå mot vitt, som i produktbilderna. 3D-lagret
   ligger bakom texten och sträcker sig en bit ner under hero, där nästa
   sektion (med egen bakgrund) täcker det — mössan glider in bakom den. */
.hero--ljus { background: #fff; color: var(--ink); position: relative; z-index: 0; overflow: visible; }
.hero--ljus .hero__kicker { color: var(--accent-dk); }
.hero--ljus .wrap { position: relative; z-index: 1; }
.hero--ljus .hero__fig { margin: 0; background: #fff; transition: opacity .6s ease; }
.hero--ljus .hero__fig img { object-fit: contain; }
.hero__knappar { display: flex; flex-wrap: wrap; gap: 12px; }
/* Scroll-3D:n under produktbilderna (js/produkt3d.js). Vänsterspalten
   sträcks till samma höjd som texten bredvid, så rutan kan stå still
   (sticky) medan man scrollar genom texten. Syns inte förrän mössan är
   ritad, och finns inte alls på smala skärmar där spalterna staplas. */
.produkt-vanster { align-self: stretch; }
.produkt3d {
  position: sticky; top: 88px; margin-top: 32px;
  /* Så hög som skärmen tillåter under menyn, men inte högre än 560 px. */
  height: clamp(320px, calc(100vh - 88px - 24px), 560px);
  pointer-events: none; opacity: 0; transition: opacity .8s ease;
}
.produkt3d.is-klar { opacity: 1; }
.produkt3d.is-reserv {
  opacity: 1;
  background: url("assets/produkt/framsida-fri.webp") center / contain no-repeat;
}
.produkt3d canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) { .produkt3d { display: none; } }
/* Hela sidan ska kunna scrollas förbi hero utan att den klipps: body
   får inte horisontell scroll av lagret. */
body { overflow-x: clip; }
.section--efter-hero { position: relative; z-index: 1; background: var(--paper); }

/* ---------- Förstorad bild ---------- */
.kan-forstoras { cursor: zoom-in; }
.kan-forstoras:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.lb-oppen { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 10, 10, .94);
  display: grid; grid-template-rows: 1fr auto;
}
.lb__scen { display: grid; place-items: center; overflow: hidden; padding: 56px 16px 0; }
/* Bilden ska rymmas på skärmen: toppmarginalen (56 px) plus bildtexten
   under. max-height: 100 % räcker inte — raden har ingen fast höjd. */
.lb__bild {
  max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px);
  touch-action: none; user-select: none; -webkit-user-drag: none;
  cursor: grab;
}
.lb__stang, .lb__pil {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.lb__stang:hover, .lb__pil:hover { background: rgba(255, 255, 255, .24); }
.lb__stang { top: 16px; right: 16px; }
.lb__pil { top: 50%; transform: translateY(-50%); }
.lb__pil--forra { left: 16px; }
.lb__pil--nasta { right: 16px; }
.lb__stang svg, .lb__pil svg { width: 22px; height: 22px; }

.lb__fot { padding: 14px 16px 22px; text-align: center; color: #CFCFCF; }
.lb__fot p { margin: 0 auto; max-width: 62ch; }
.lb__text { font-size: .9rem; color: var(--paper); }
.lb__raknare { font-size: .82rem; margin-top: 4px; }
.lb__hjalp { font-size: .76rem; color: #8D8D8D; margin-top: 6px; }

/* ---------- Stegfält för antal ----------
   Minus, skrivbart antal, plus i en sammanhållen ram — samma höjd som
   formulärfälten och köpknappen bredvid. */
.antal {
  display: inline-flex; align-items: stretch;
  height: 51px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
}
.antal:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.antal__steg {
  width: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1.25rem; line-height: 1; color: var(--ink);
  transition: background .15s, color .15s;
}
.antal__steg:hover:not([disabled]) { background: var(--paper-warm); }
.antal__steg:focus-visible { outline: none; background: var(--paper-warm); }
.antal__steg[disabled] { color: #C4BCB0; cursor: default; }
.antal input {
  width: 46px; padding: 0; margin: 0; border: 0;
  border-inline: 1px solid var(--line); border-radius: 0;
  background: none; text-align: center;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.antal input:focus { outline: none; }
.antal input::-webkit-outer-spin-button,
.antal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field .antal input { width: 46px; padding: 0; border: 0; border-inline: 1px solid var(--line); }
.field .antal input:focus { outline: none; }

.antal--liten { height: 38px; }
.antal--liten .antal__steg { width: 32px; font-size: 1.05rem; }
.antal--liten input { width: 38px; font-size: .92rem; }

/* ---------- Nyinkommen / säljer snabbt ---------- */
.nyhet {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 6px 12px 6px 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px;
}
.nyhet__prick {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, .55);
  animation: nyhet-puls 2s ease-out infinite;
}
@keyframes nyhet-puls {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}
.lager-notis { font-size: .86rem; color: var(--ink-soft); margin-top: -2px; }

/* ---------- Mössan som flyger till kassan ---------- */
.korg-flygare {
  position: fixed; left: 0; top: 0; z-index: 200;
  pointer-events: none; will-change: transform;
}
.korg-flygare__inre {
  width: 64px; height: 50px; will-change: transform, opacity;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
}
.korg-flygare svg { width: 100%; height: 100%; display: block; }

@keyframes korg-studs {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); }
  65%  { transform: scale(.88); }
  100% { transform: scale(1); }
}
.is-landad .korg-antal { animation: korg-studs .5s cubic-bezier(.3, 1.6, .5, 1); }
.nav a.is-landad, .nav-toggle.is-landad { color: var(--guld); }

@media (max-width: 860px) {
  .korgrad { grid-template-columns: 52px 1fr auto; row-gap: 8px; }
  .korgrad .antal { grid-column: 2; justify-self: start; }
  .korgrad__bild { width: 52px; height: 52px; }
  .korgrad__summa { grid-column: 3; }
  .kop__knapp { width: 100%; }
  .lb__hjalp { display: none; }
}

/* Sex miniatyrer ryms inte på en rad i mobilbredd — låt dem radbryta
   i stället för att sticka ut ur spalten. */
.media__miniatyrer { flex-wrap: wrap; }

.produktbild figcaption {
  padding: 10px 14px 14px;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* Den färdiga Swish-koden: ett kort med låst belopp, i stället för den
   kassan ritar själv. */
.swish__fast { margin: 8px auto 18px; max-width: 230px; }
.swish__fast img { width: 100%; height: auto; display: block; }
.swish__fast figcaption {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* Teamkorten: roll, ålder och namn syns direkt, beskrivningen fälls ut vid
   klick. <details> gör jobbet — tangentbord och skärmläsare får utfällningen
   gratis, utan en rad JavaScript. */
.member { cursor: pointer; }
.member summary {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
}
.member summary::-webkit-details-marker { display: none; }
.member summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.member .member__photo {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  margin-bottom: 0;
  font-size: 1.4rem;
}

.member__rad { display: flex; flex-direction: column; gap: 2px; }
.member .member__name { font-size: 1.25rem; margin: 0; }

.member__mer {
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.member__mer::after { content: " ↓"; }
.member[open] .member__mer::after { content: " ↑"; }
.member[open] .member__mer { color: var(--ink); }
.member summary:hover .member__mer { color: var(--ink); }

.member > p {
  margin: 16px 0 0;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--line);
}

/* Sloganen i foten. */
.site-foot__slogan {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--paper);
}

/* Instagram och TikTok: bara ikonerna, adressen ligger i länken. */
.social { display: flex; gap: 12px; margin: 16px 0 0; }
.social__lank {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: #9A9A9A;
  box-shadow: inset 0 0 0 1px #2A2A2A;
  transition: color .15s, box-shadow .15s, transform .15s;
}
.social__lank svg { width: 21px; height: 21px; }
.social__lank:hover,
.social__lank:focus-visible {
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--paper);
  transform: translateY(-2px);
}

/* På ljus bakgrund (kontaktsidan) behöver ikonerna motsatt kontrast. */
.social--ljus .social__lank { color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.social--ljus .social__lank:hover,
.social--ljus .social__lank:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Sloganen under rubriken på startsidan. */
.hero__slogan {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: .01em;
  margin: -6px 0 18px;
}

/* Varukorgen i hörnet. Den ligger utanför menyn så att den syns också när
   menyn är hopfälld på mobilen — antalet ska kunna läsas av var man än är.
   Ordningen sätts i CSS, inte i markupen: vagnen till höger om menyn på
   dator, och till vänster om hamburgaren på mobil. */
.brand { order: 0; }
.nav { order: 1; }
.korg-ikon { order: 2; }
.nav-toggle { order: 3; }

.korg-ikon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-left: auto;
  color: var(--paper);
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.korg-ikon svg { width: 23px; height: 23px; }
.korg-ikon:hover { color: var(--guld); background: rgba(255, 255, 255, .06); }
.korg-ikon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Antalsbubblan sitter i vagnens övre högra hörn. */
.korg-ikon .korg-antal {
  position: absolute;
  top: 1px; right: 0;
  box-shadow: 0 0 0 2px var(--ink);
}

@media (max-width: 860px) {
  .korg-ikon { margin-left: auto; margin-right: 2px; }
}

/* Kontosidans besked. */
.form-fel { color: var(--err); font-size: .9rem; margin: 0 0 12px; min-height: 1.2em; }
.form-ok  { color: var(--ok);  font-size: .9rem; margin: 0 0 12px; min-height: 1.2em; }

/* Granskningssteget: sista anhalten innan något skickas. */
.granska {
  padding: 24px;
  border-radius: var(--r);
  background: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--line);
}
.granska__knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* Swish-kortet i kassan: svart kort, vit kodruta, guld på etiketten. Visas
   vid en mössa, där den färdiga koden från Swish gäller. */
.swishkort {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 190px;
  margin: 0 auto 18px;
  padding: 14px 14px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  line-height: 1.3;
}
.swishkort__panel {
  display: block;
  width: 100%;
  padding: 9px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: #fff;
  line-height: 0;
}
.swishkort__panel svg { width: 100%; height: auto; display: block; }
.swishkort__nr { font-size: .74rem; letter-spacing: .04em; color: #C9C3BA; }
.swishkort__namn {
  font-family: var(--font-display);
  font-weight: 800; font-size: .82rem; letter-spacing: .16em;
}
.swishkort__typ {
  margin-top: 3px;
  font-size: .6rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}

/* Tomt eller felaktigt fält: rött streck runt rutan, inte bara en text. */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--err);
  box-shadow: 0 0 0 1px var(--err);
}

/* Felruta i granskningen — syns bara när något gått fel. */
.notice--fel {
  display: none;
  background: rgba(163, 58, 46, .08);
  box-shadow: inset 0 0 0 1px rgba(163, 58, 46, .35);
  color: var(--ink);
}
.notice--fel:not(:empty) { display: block; }

/* Är fältet fel hjälper tipset inte längre — då är felmeddelandet det som
   ska läsas. */
.field.is-invalid .field__hint { display: none; }

/* Spamfälla i kassan — utanför skärmen, inte display:none (en del
   robotar hoppar över dolda fält). */
.falla { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Krediteringen till Kickstart UF. Den ska synas under besöket utan att ta
   plats från SILQ: liten logga, dämpad text, full styrka först vid hover. */
.tandav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #8A8A8A;
  font-size: .8rem;
  text-decoration: none;
  opacity: .8;
  transition: opacity .15s, color .15s;
}
.tandav img { width: 78px; height: auto; display: block; }
.tandav strong { font-weight: 600; color: #B9B9B9; }
.tandav:hover { opacity: 1; color: var(--paper); }
.tandav:hover strong { color: var(--paper); }

/* Språkknappen. Ligger bredvid vagnen, utanför menyn, så den går att nå
   även när menyn är hopfälld. */
.sprak {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--paper);
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sprak svg { width: 19px; height: 12px; border-radius: 2px; display: block; }
.sprak:hover { background: rgba(255, 255, 255, .12); color: var(--guld); }
.sprak:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Vagnen tar inte längre marginalen — språkknappen gör det. */
.korg-ikon { order: 3; margin-left: 0; }
.nav-toggle { order: 4; }

@media (max-width: 860px) {
  .sprak { padding: 6px 9px; font-size: .68rem; }
  .sprak svg { width: 17px; height: 11px; }
}

/* Krediteringen uppe i hörnet. Samma märke som i sidfoten, men nedtonat till
   en hörnmarkering: en hårfin skiljelinje mot butikens egna knappar, och på
   smala skärmar faller orden bort så att loggan bär den ensam. Etiketten på
   länken säger vad den är oavsett vad som syns. */
.tandav--topp {
  order: 5;
  margin-top: 0;
  margin-left: 16px;
  padding-left: 16px;
  gap: 8px;
  font-size: .66rem;
  letter-spacing: .04em;
  line-height: 1.2;
  opacity: .7;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.tandav--topp img { width: 62px; }
.tandav--topp strong { color: #C6C6C6; }
.tandav--topp:hover { opacity: 1; }
.tandav--topp:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Orden tar plats som huvudet inte har när menyn blir bred. */
@media (max-width: 1080px) {
  .tandav--topp span { display: none; }
  .tandav--topp { margin-left: 12px; padding-left: 12px; }
}

/* Hamburgaren ska ligga ytterst på mobilen — märket kliver in före den.
   Menyn är hopfälld här, så huvudets stora luft behövs inte längre; den
   krymper i stället och ger märket plats utan att något trycks ut. */
@media (max-width: 860px) {
  .site-head .wrap { gap: 10px; }
  .tandav--topp { order: 4; margin-left: 8px; padding-left: 8px; }
  .nav-toggle { order: 5; padding: 4px 4px; }
  .tandav--topp img { width: 54px; }
}

/* De smalaste telefonerna: små marginaler överallt, och loggan lite mindre. */
@media (max-width: 400px) {
  .site-head .wrap { gap: 6px; }
  .tandav--topp { margin-left: 6px; padding-left: 6px; }
  .tandav--topp img { width: 44px; }
}

/* ---------- Vanliga frågor (produktsidan) ----------
   Bilden till vänster och alla frågor samlade bredvid, åtskilda av tunna
   linjer. Bilden följer med när man scrollar genom frågorna. */
.fragor {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px; align-items: start; margin-top: 32px;
}
.fragor__bild { position: sticky; top: 96px; }
.fraga { padding: 22px 0; border-top: 1px solid var(--line); }
.fraga:first-child { padding-top: 0; border-top: 0; }
.fraga h3 { margin: 0 0 8px; }
.fraga p { margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) {
  .fragor { grid-template-columns: 1fr; gap: 28px; }
  .fragor__bild { position: static; }
}