/* ==========================================================================
   Kortshop — nytt design (Figma: "Nytt design Kortshop")
   LOKAL TEST. Lastes kun når KS_NEWDESIGN er på (localhost), se
   includes/template_top.php. Skal ikke aktiveres på test/prod.
   ========================================================================== */

/* --- Fonter ------------------------------------------------------------- */
/* Karla = brødtekst/meny. Selvhostet fra Google Fonts (latin-subset). */
@font-face { font-family:'Karla'; font-style:normal; font-weight:300; font-display:swap;
             src:url(fonts/karla-300.woff2) format('woff2'); }
@font-face { font-family:'Karla'; font-style:normal; font-weight:400; font-display:swap;
             src:url(fonts/karla-400.woff2) format('woff2'); }
@font-face { font-family:'Karla'; font-style:normal; font-weight:500; font-display:swap;
             src:url(fonts/karla-500.woff2) format('woff2'); }
@font-face { font-family:'Karla'; font-style:normal; font-weight:700; font-display:swap;
             src:url(fonts/karla-700.woff2) format('woff2'); }

/* Archason = display-serifen, samme som i Figma. Konvertert til woff2 fra
   Archason.ttf (v1.00, kun Regular/400 — all display-tekst i designet er 400).
   Cormorant Garamond står igjen som reserve hvis fila ikke lastes; nettleseren
   henter den bare da, siden Archason står først i --ks-display. */
@font-face { font-family:'Archason'; font-style:normal; font-weight:400; font-display:swap;
             src:url(fonts/archason-400.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
             src:url(fonts/cormorant-300.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
             src:url(fonts/cormorant-400.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
             src:url(fonts/cormorant-500.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
             src:url(fonts/cormorant-600.woff2) format('woff2'); }

/* --- Tokens ------------------------------------------------------------- */
body.ksnewdesign {
  --ks-ink:      #434242;  /* Kortshop GråSvart */
  --ks-beige:    #E4DDD5;  /* Kortshop Beige   */
  --ks-mulvarp:  #82725C;  /* Kortshop Mulvarp */
  --ks-red:      #B93D3D;  /* Kortshop Rød     */
  --ks-gronn:    #495B33;  /* status «Betalt», fra Figma 61:3487 */
  --ks-burgunder:#7B2F37;  /* julefeltet. Dypere enn --ks-red, samme familie;
                              9,1:1 mot hvitt. */
  --ks-gul:      #9A7B12;  /* varsel. Merkegullet #AF9778 gir bare 2,79:1 mot
                              hvitt og duger ikke som ikonfarge; dette er samme
                              gulltone dempet så vidt ned til 4,03:1. */
  --ks-link:     #9F8C72;  /* lenkefarge i brødtekst */
  --ks-white:    #FFFFFF;

  --ks-display:  'Archason', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ks-body:     'Karla', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --ks-wrap:     1301px;   /* innholdsbredde i Figma-rammen (1441 - 2*70) */
  --ks-gutter:   70px;
}

/* --- Nullstilling av det gamle temaet ----------------------------------- */
/* Legacy-wrapperne blir stående (footer-markupen lukker dem), men de skal
   ikke lenger låse bredden til 960px eller sentrere alt. */
body.ksnewdesign {
  font-family: var(--ks-body);
  color: var(--ks-ink);
  background: var(--ks-white);
  margin: 0;
}
body.ksnewdesign .kswrp,
body.ksnewdesign #kortshop_contentlayer,
body.ksnewdesign #kortshop_contentlayer_inner {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
  background: transparent !important;
}
body.ksnewdesign #kortshop_contentlayer_inner { margin-bottom: 0 !important; }

/* --- Footeren skal alltid ligge nederst --------------------------------- */
/* På korte sider (innlogging, kvitteringer, tomme søk) sluttet sida midt på
   skjermen og lot en hvit stripe stå under footeren. Løsningen er en flexkjede
   fra .kswrp og ned: wrapperen er minst like høy som vinduet, og innholds-
   spalta får vokse. Da havner luften over nyhetsbrevlinja — hvitt der det
   allerede er hvitt — i stedet for under den mørke footeren.
   Alle sider har samme kjede: .kswrp > #kortshop_contentlayer >
   #kortshop_contentlayer_inner, .ksnd-news, .ksnd-footer. */
body.ksnewdesign .kswrp {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;   /* følger adresselinja på mobil der den støttes */
}
body.ksnewdesign #kortshop_contentlayer {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* Det er denne som tar opp overskuddet. Alt etter den — nyhetsbrev, footer og
   de tomme script-/popup-nodene — blir liggende nederst. */
body.ksnewdesign #kortshop_contentlayer_inner { flex: 1 0 auto; }
body.ksnewdesign .ksnd-news,
body.ksnewdesign .ksnd-footer { flex: 0 0 auto; }

/* Det gamle temaet setter «b { font-family: Montserrat-semi }» (common_styles.css).
   Den slo inn på produktnavn og priser i listingen. `inherit` gir Karla i
   brødtekst og Archason inne i en overskrift — riktig begge steder. */
body.ksnewdesign b, body.ksnewdesign strong { font-family: inherit; }
/* Det gamle temaet har «h1 { color:#000 !important }», som slo gjennom alle
   h1-reglene her. Derfor ble hver eneste sidetittel rein svart mens h2/h3 lå på
   GråSvart — det er det som fikk titlene til å se tyngre ut enn i Figma.
   Ingen h1 i det nye designet ligger på mørk bakgrunn, så én regel dekker alt. */
body.ksnewdesign h1 { color: var(--ks-ink) !important; }
/* Innholdsspalten følger innholdsbredden fra Figma (1301px) i stedet for de
   gamle 800/960px. Seksjoner som skal gå kant til kant bryter ut under. */
body.ksnewdesign #kortshop_contentcategorylayer,
body.ksnewdesign #kortshop_contentmenulayer {
  /* Dette er <span>-er som fikk blokkoppførsel av float:left i det gamle
     temaet — uten display:block ignoreres bredden når floaten fjernes. */
  display: block;
  width: var(--ks-wrap) !important;
  max-width: calc(100% - 2 * var(--ks-gutter)) !important;
  float: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left;
  background: transparent !important;
}
/* --- Sider som åpner med bilde rett under menylinja ----------------------
   Forsiden, Kontakt oss, Om oss og Showrom begynner med et gjennomgående
   bilde som skal ligge tett opptil menyen. Brødsmulene tas bort, og lufta
   under headeren settes til 36 px. Den sto på 12 da toppen var et
   helt bilde ut til kantene; med kort som har avrundede hjørner ble
   det for trangt.
   Sidene markerer seg selv med .ksnd-flushtop på bildet, så regelen
   treffer ingen andre. */
body.ksnewdesign:has(.ksnd-flushtop) #kortshop_breadcrumblayer { display: none; }
body.ksnewdesign:has(.ksnd-flushtop) .ksnd-header { padding-bottom: 36px; }

/* Tynn kampanjestripe rett under menyraden, på alle sider. Hele stripa er
   lenka, så den er lett å treffe på telefon.
   Mulvarp mot hvitt måler 4,65:1 og klarer kravet på 4,5 for brødtekst.
   Burgunder er opptatt av julefeltet lenger ned på forsida, og rød ble for
   sterk i ei stripe som står på hver eneste side. */
body.ksnewdesign a.ksnd-banner {
  display: block;
  background: var(--ks-mulvarp);
  color: var(--ks-white);
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  padding: 9px 18px;
  margin: 0 0 24px;
}
body.ksnewdesign a.ksnd-banner:hover { text-decoration: underline; }
/* Luft på begge sider av stripa. Den lå først inntil menyraden, men da ble
   menyteksten og stripa klistra sammen. 24px over og under er samme avstand
   som headeren ellers bruker under menyraden. Regelen står etter
   flushtop-regelen over, som ellers ville gitt 36px på forsida og dermed
   ulik luft fra side til side. */
body.ksnewdesign:has(.ksnd-banner) .ksnd-header { padding-bottom: 24px; }

/* --- Brødsmuler ---------------------------------------------------------
   Det gamle temaet setter font-size:.5em, letter-spacing og farge med
   !important på .brcrlink/.brcrgreylink, derfor må de overstyres eksplisitt. */
body.ksnewdesign #kortshop_breadcrumblayer {
  width: var(--ks-wrap) !important;
  max-width: calc(100% - 2 * var(--ks-gutter));
  margin: 22px auto 0 !important;
  padding: 0;
  font-family: var(--ks-body);
}
/* Det lille punktikonet foran stien hører til det gamle designet */
body.ksnewdesign #kortshop_breadcrumblayer img { display: none; }

/* Figma (produktsida, node 94:7615): Karla 14 i svart hele veien, med sida
   man står på i halvfet. Skilletegnet har samme farge og størrelse som
   resten, ikke en egen blass tone. */
body.ksnewdesign #kortshop_breadcrumblayer .brcrlink,
body.ksnewdesign #kortshop_breadcrumblayer .brcrgreylink {
  font-family: var(--ks-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}
/* Nivåene over: svarte, understrek først når man peker på dem */
body.ksnewdesign #kortshop_breadcrumblayer a.brcrgreylink {
  color: #000 !important;
  text-decoration: none;
  transition: color .15s;
}
body.ksnewdesign #kortshop_breadcrumblayer a.brcrgreylink:hover {
  color: var(--ks-mulvarp) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Skilletegnet er også .brcrgreylink, men et <span> */
body.ksnewdesign #kortshop_breadcrumblayer span.brcrgreylink {
  color: #000 !important;
  padding: 0 4px;
}
/* Siden man står på */
body.ksnewdesign #kortshop_breadcrumblayer .brcrlink {
  color: #000 !important;
  font-weight: 700;
  text-decoration: none;
  cursor: default;
}
/* Den gamle smartmenu-raden erstattes av headeren */
body.ksnewdesign #menuheight,
body.ksnewdesign #menuctrl { display: none !important; }

/* Alle komponentene her regner bredde inkludert padding — ellers legger f.eks.
   en 100vw-seksjon med padding seg utenfor viewporten og gir vannrett scroll. */
body.ksnewdesign [class^="ksnd-"],
body.ksnewdesign [class*=" ksnd-"] { box-sizing: border-box; }

/* 100vw regner med den loddrette rullefeltet der den tar plass (Windows), så
   kant-til-kant-seksjonene blir noen piksler for brede og gir vannrett scroll.
   clip (ikke hidden) lager ingen ny rullecontainer, så position: sticky virker. */
html:has(body.ksnewdesign),
body.ksnewdesign { overflow-x: clip; }

body.ksnewdesign img { max-width: 100%; }
/* Standardfarge for lenker i gammelt innhold (kategorilister o.l.). Komponentene
   under er prefikset med body.ksnewdesign så de vinner over denne. */
body.ksnewdesign a { color: var(--ks-ink); }

/* --- Felles ------------------------------------------------------------- */
/* Innholdsspalten setter allerede bredden — .ksnd-wrap fyller den bare ut */
.ksnd-wrap { width: 100%; }
/* Kant-til-kant-seksjoner inne i den sentrerte innholdsspalten */
.ksnd-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ksnd-h {                       /* seksjonsoverskrift */
  border: 0;                    /* det gamle temaet gir h1 en border-top */
  padding: 0;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ks-ink);
  margin: 0;
}
body.ksnewdesign .ksnd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: var(--ks-white);
  color: var(--ks-ink);
  font-family: var(--ks-body);
  font-size: 12px;
  line-height: 30px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
body.ksnewdesign .ksnd-btn:hover { background: var(--ks-ink); color: var(--ks-white); }
body.ksnewdesign .ksnd-btn--ghost { background: transparent; border-color: var(--ks-ink); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.ksnd-header {
  background: var(--ks-white);
  /* 40px over logoen, 24px under menyraden. Gjelder alle sider. */
  padding: 40px 24px 24px;
  position: relative;
  z-index: 400;
}
/* Blokkerer klikk på siden mens hamburgermenyen er åpen */
.ksnd-header__scrim { display: none; }
/* Hamburgerknapp — skjult på desktop, vises fra og med nettbrett */
.ksnd-burger {
  display: none;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 620;
}
.ksnd-burger span {
  display: block;
  height: 1.5px;
  width: 22px;
  background: var(--ks-ink);
  transition: transform .2s ease, opacity .2s ease;
}
.ksnd-header.is-open .ksnd-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ksnd-header.is-open .ksnd-burger span:nth-child(2) { opacity: 0; }
.ksnd-header.is-open .ksnd-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Trekkspill-pil i hamburgermenyen — skjult på desktop */
.ksnd-nav__toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ksnd-nav__toggle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-right: 1.5px solid var(--ks-mulvarp);
  border-bottom: 1.5px solid var(--ks-mulvarp);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.ksnd-nav__main > li.is-open > .ksnd-nav__toggle::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.ksnd-header__logo { display: block; text-align: center; }
/* Figma har 199×47; nedskalert litt etter ønske. Forholdet er beholdt.
   display:block — som inline-block ville linjehøyden lagt 4px under logoen */
.ksnd-header__logo img { width: 148px; height: 35px; display: block; margin: 0 auto; }

/* Menyraden er bare 44px høy. Verktøykolonnen til høyre er 87px og bunn-
   justeres, så ikonene stikker opp og havner på linje med logoen — slik den
   oppdaterte headeren i Figma (52:690) er satt opp.
   Total høyde: 24 + 47 (logo) + 44 (rad) + 24 = 139px. */
.ksnd-header__bar {
  display: flex;
  align-items: flex-end;
  /* Menylinja følger innholdsbredden på sidene: samme venstre- og høyrekant
     som kategorirutenettet og resten av innholdet, på alle sider. */
  /* headeren har 24px padding; den trekkes fra så raden får nøyaktig samme
     kanter som innholdet (--ks-gutter fra vinduskanten) */
  width: var(--ks-wrap);
  max-width: calc(100% + 48px - 2 * var(--ks-gutter));
  margin: 0 auto;
  justify-content: space-between;
  gap: 38px;
  height: 44px;
}
/* Nav-en tar resten av plassen, og overskuddet legger seg mellom kategoriene
   og sidelenkene i stedet for utenfor gruppa. */
.ksnd-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 53px; flex: 1 1 auto; min-width: 0;
}

.ksnd-nav__main,
.ksnd-nav__side { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
/* Faste, tette luker innad i hver gruppe. Slakken havner mellom gruppene,
   så raden spenner hele innholdsbredden. */
.ksnd-nav__main { flex: 0 1 auto; gap: 24px; }
.ksnd-nav__side { flex: 0 0 auto; gap: 32px; }

.ksnd-nav__main > li { position: relative; }
.ksnd-nav__main > li > a {
  font-family: var(--ks-body);
  font-weight: 500;
  /* Figma har 16px. Nedskalert litt etter ønske — sidelenkene følger etter,
     så hierarkiet i menylinja holder seg. */
  font-size: 15px;
  line-height: 30px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.ksnd-nav__main > li.is-jul > a { color: var(--ks-red); }
.ksnd-nav__main > li > a:hover { color: var(--ks-mulvarp); }

.ksnd-nav__side > li > a {
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ks-mulvarp);
  text-decoration: none;
  white-space: nowrap;
}
.ksnd-nav__side > li > a:hover { color: var(--ks-ink); }

/* Nedtrekk — finnes ikke i Figma, men butikken trenger underkategoriene.
   Holdt i samme språk: hvit flate, tynn beige ramme, Karla. */
.ksnd-nav__sub {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 230px;
  background: var(--ks-white);
  border: 1px solid var(--ks-beige);
  border-radius: 10px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  display: none;
  box-shadow: 0 12px 28px rgba(67, 66, 66, .10);
  z-index: 500;
  /* overflow trengs ikke: lista har 10px padding topp og bunn, så
     hover-bakgrunnen når aldri ut i hjørnene */
}
.ksnd-nav__main > li:hover > .ksnd-nav__sub,
.ksnd-nav__main > li:focus-within > .ksnd-nav__sub { display: block; }
/* Nivå 2. Uten denne ble undermenyene aldri vist — 15 av punktene har
   underkategorier, og de var uåpnelige med mus. */
.ksnd-nav__sub > li:hover > .ksnd-nav__sub,
.ksnd-nav__sub > li:focus-within > .ksnd-nav__sub { display: block; }
.ksnd-nav__sub li { position: relative; }
.ksnd-nav__sub a {
  display: block;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ks-ink);
  text-decoration: none;
  white-space: nowrap;
}
.ksnd-nav__sub a:hover { background: var(--ks-beige); }

/* Liten pil på punkter som har underkategorier, så det er lett å se at det
   ligger noe bak. Tegnet i CSS, så den følger tekststørrelsen. */
.ksnd-nav__sub > li:has(> .ksnd-nav__sub) > a { position: relative; padding-right: 32px; }
.ksnd-nav__sub > li:has(> .ksnd-nav__sub) > a::after {
  content: '';
  position: absolute; right: 16px; top: 50%;
  width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid var(--ks-mulvarp);
  border-bottom: 1.5px solid var(--ks-mulvarp);
  transform: rotate(-45deg);
}
.ksnd-nav__sub > li:has(> .ksnd-nav__sub) > a:hover::after { border-color: var(--ks-ink); }

.ksnd-nav__sub .ksnd-nav__sub { top: -11px; left: 100%; }

.ksnd-header__tools {
  position: relative;    /* søkefeltet plasseres mot denne når det utvider seg */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 19px;
  height: 87px;          /* stikker opp over den 44px høye raden */
  width: 145px;
  flex: 0 0 145px;
}
.ksnd-header__icons { display: flex; align-items: center; gap: 16px; }
/* Ikonene finnes to steder (se header.php). Her: i verktøykolonnen, rett over
   søkefeltet slik Figma viser. Toppvarianten brukes bare i hamburgervisningen. */
.ksnd-header__icons--top { display: none; }
.ksnd-header__icons a { display: block; position: relative; line-height: 0; }
.ksnd-header__icons img { width: 24px; height: 24px; display: block; }
.ksnd-header__icons a:hover { opacity: .6; }
.ksnd-badge {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ks-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* Ligger absolutt i verktøykolonnen med høyrekanten låst, så det kan vokse
   mot venstre og legge seg over sidelenkene uten å flytte på menyraden.
   Bredden ved fokus settes av skriptet i newdesign/header.php. */
.ksnd-search {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 145px;
  height: 44px;
  padding: 10px 15px 10px 10px;
  border: 1px solid #000;
  border-radius: 20px;
  background: var(--ks-white);
  box-sizing: border-box;
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}
.ksnd-search:focus-within { box-shadow: 0 2px 10px rgba(67, 66, 66, .12); }
.ksnd-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--ks-ink);
}
.ksnd-search input::placeholder { color: var(--ks-mulvarp); opacity: 1; }
.ksnd-search button {
  border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0;
  flex: 0 0 24px; width: 24px; height: 24px;
}
/* max-width:none — ellers krymper det gamle temaets `img { max-width:100% }`
   ikonet sammen med knappen når søkefeltet er smalt */
.ksnd-search img { width: 24px; height: 24px; max-width: none; display: block; }

/* ==========================================================================
   FORSIDE
   ========================================================================== */
/* Hero — IKKE I BRUK nå. Heltbildet øverst på forsiden er byttet med de to
   kampanjekorta (.ksnd-promo). Reglene står igjen fordi julekampanjen er
   sesong: skal heltbildet tilbake, er det én seksjon i newdesign/frontpage.php. */
.ksnd-hero {
  position: relative;
  min-height: 570px;
  display: flex;
  align-items: center;
  padding: 0 173px;
  overflow: hidden;
}
/* Figma beskjærer strammere enn ren `cover` gir: bildet er skalert ~15,6 % opp,
   så også sidene kuttes. Boksen gjøres derfor større enn heroen og sentreres —
   .ksnd-hero har overflow:hidden og klipper resten.
   `object-position` styrer høyden i bildet, så invitasjonen og fatet er med. */
/* Figma beskjærer strammere enn ren `cover`: bildet vises som et 1648×652-utsnitt
   av kilden (1800×1200) med start i (0, 272) — altså fra venstrekanten, med
   beskjæring fra høyre. 1800/1648 = 109,2 %, og resten faller på plass med
   loddrett sentrering.
   Prefikset med body.ksnewdesign fordi `body.ksnewdesign img { max-width:100% }`
   ellers vinner på spesifisitet og klemmer bredden tilbake til heroens. */
body.ksnewdesign .ksnd-hero__img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 109.2%;
  height: 109.2%;
  max-width: none;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: left center;
}
.ksnd-hero__inner {
  position: relative;
  width: 308px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  color: #fff;
}
.ksnd-hero__kicker {
  font-family: var(--ks-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: .04em;
  margin: 0;
}
.ksnd-hero__text {
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 25px;
  margin: 0;
}

/* Toppseksjon: to kampanjekort ---------------------------------------------
   Erstatter heltbildet øverst på forsiden. Ingen Figma-ramme — juleversjonen
   finnes ikke i «Nytt design Kortshop», så dette er bygd etter skjermbildet
   og designspråket ellers. Kortene er 703x763 i skjermbildet; forholdet er
   beholdt, bredden følger innholdsbredden. Skriftstørrelsene er satt slik at
   «JULERABATT» og «-25%» dekker samme andel av kortbredden som i
   skjermbildet — 58 % og 42 %. */
/* Bare bunnmargen — margin-shorthanden nullstilte de negative side-margene
   .ksnd-bleed bruker for å dra seksjonen ut til vinduskanten, og korta ble
   stående 40px for langt til høyre. */
.ksnd-promo { margin-bottom: 32px; }
/* Raden går kant til kant — seksjonen har .ksnd-bleed — så den skal ikke
   ha innholdsbredde her. Firkantede hjørner, siden korta nå ligger inntil
   vinduskanten og en avrunding bare ville slått av mot den. */
.ksnd-promo__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  width: 100%;
  margin: 0;
}
.ksnd-promo__card {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  color: var(--ks-ink);
}
/* Karusellen har forholdet og setter dermed radhøyden. Feltkortet får
   høyden fra innholdet, og rutenettet strekker begge til den høyeste — da
   kan teksten aldri bli klipt, uansett bredde.
   Forholdet var 703/763 fra skjermbildet, altså høyere enn bredt. Etter at
   korta gikk kant til kant ble de for dominerende, så høyden ble satt ned
   til 7/10 av bredden. Teksten i feltkortet tar 0,54 av bredden, så det er
   fortsatt klaring.
   Med 7/10 ble bare 56 % av høyden i karusellbildene synlig — alle åtte er
   stående — og kort og bordkort ble klipt midt i motivet. 8,5/10 viser
   68 %, og da står hvert motiv helt innafor uten at kortet blir høyt igjen:
   593px mot 489px. */
.ksnd-promo__card--karusell { aspect-ratio: 10 / 8.5; }
/* Bare karusellens bilder legges oppi hverandre og fyller kortet. Regelen
   sto på .ksnd-promo__card img og traff også kakedekoren i feltkortet, som
   dermed ble strukket over hele kortet og la seg oppe på teksten. */
.ksnd-promo__card--karusell img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ksnd-promo__inner { position: relative; z-index: 1; text-align: center; }

.ksnd-promo__card--felt { align-items: center; }

/* Bildekarusellen til venstre. Ren CSS: bildene ligger oppi hverandre og
   krysstoner étt om gangen. Ingen JS — forsiden laster alt nok som det er,
   og karusellen skal verken klikkes eller styres. Sju bilder à 3s gir en
   runde på 21s; varigheten, de sju forsinkelsene og prosentene i
   @keyframes må endres sammen. Prosentene er regna ut fra 21s: 0,5s
   krysstoning er 2,38 %, og hvert bilde står 3s, altså 14,29 % av runden. */
.ksnd-promo__card--karusell img {
  opacity: 0;
  animation: ksnd-promo-kryss 21s linear infinite;
}
.ksnd-promo__card--karusell img:nth-child(1) { animation-delay:  0s; }
.ksnd-promo__card--karusell img:nth-child(2) { animation-delay:  3s; }
.ksnd-promo__card--karusell img:nth-child(3) { animation-delay:  6s; }
.ksnd-promo__card--karusell img:nth-child(4) { animation-delay:  9s; }
.ksnd-promo__card--karusell img:nth-child(5) { animation-delay: 12s; }
.ksnd-promo__card--karusell img:nth-child(6) { animation-delay: 15s; }
.ksnd-promo__card--karusell img:nth-child(7) { animation-delay: 18s; }
/* Ingen object-position-unntak her. Dåpsbildet trengte det da ramma var
   10:7 og klipte gjennom «Velkommen til dåpsfeiring»; i 8,5/10 er kortet
   helt med midtstilt utsnitt. */
@keyframes ksnd-promo-kryss {
  0%     { opacity: 0; }
  2.38%  { opacity: 1; }
  14.29% { opacity: 1; }
  16.67% { opacity: 0; }
  100%   { opacity: 0; }
}
/* Bevegelse som starter av seg selv skal kunne slås av. Da står det første
   bildet stille i stedet. */
@media (prefers-reduced-motion: reduce) {
  .ksnd-promo__card--karusell img { animation: none; }
  .ksnd-promo__card--karusell img:first-child { opacity: 1; }
}

/* Feltkortet til høyre: beige, alt midtstilt. Skjermbildet har det i rødt med hvit
   tekst og en rabatt; beige med blekk og jubileumsteksten var Emmas valg.
   Beige mot --ks-ink gir 8,0:1. Kortet har ingen knapp — det er en
   kunngjøring, ikke et tilbud. */
.ksnd-promo__card--felt { background: var(--ks-beige); }
/* Teksten skalerer med kortbredden, ikke med vindusbredden. «MED TRYKKSAKER»
   er den lengste linja, og den brakk i to på nettbrett da størrelsene lå fast
   i piksler: kortet var 346px bredt, teksten trengte 375. Med
   container-enheter holder de tre linjene samme andel av kortet uansett
   bredde — og da kan ingen av dem brekke. Pikselverdiene under står igjen
   som reserve for nettlesere uten container-spørringer. */
.ksnd-promo__card--felt { container-type: inline-size; }
.ksnd-promo__card--felt .ksnd-promo__inner { padding: 40px; }
.ksnd-promo__kicker::before,
.ksnd-promo__kicker::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 54px;
  height: 1px;
  background: var(--ks-mulvarp);
  opacity: .55;
}
/* Dekoren bak teksten: kaka nede i høyre hjørne og strøet ut mot kantene.
   Begge er absolutt plassert, så de teller ikke med i innholdshøyden —
   teksten står like høyt som før. Nedsatt dekkevne gjør at de leser som
   dekor og ikke tar oppmerksomhet fra teksten oppe på. Ren dekor: tom alt,
   og de fanger ikke mus. */
/* De negative avstandene tar høyde for at selve kaketegninga ikke fyller hele
   SVG-ruta: det er rundt 15 % luft på sidene og 20 % under plata. Lufta vokser
   med bildet, så avstandene må økes når kaka gjøres større — ellers trekker
   den seg innover fra hjørnet. Den ligger så svakt at den leser som tekstur i
   papiret, ikke som en tegning oppi satsen. */
.ksnd-promo__kake {
  position: absolute;
  pointer-events: none;
  right: -8%;
  bottom: -10%;
  width: 420px;
  height: auto;
  opacity: .2;
  transform: rotate(8deg);
  transform-origin: bottom right;
}
/* Ei tynn ramme innenfor kortkanten. Den gir feltet en form å lese satsen
   mot, slik ei trykkplate gjør, og er mer behersket enn strødd pynt.
   Avstanden følger kortbredden som resten av feltet. */
.ksnd-promo__card--felt::before {
  content: '';
  position: absolute;
  inset: 32px;
  border: 1px solid var(--ks-mulvarp);
  opacity: .4;
  pointer-events: none;
}
/* Hairline på hver side av innledningslinja — en klassisk måte å binde
   lockupen sammen på, og den gir linja en oppgave ut over å være tekst. */
body.ksnewdesign .ksnd-promo__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ks-ink);
  margin: 0;
}
body.ksnewdesign .ksnd-promo__tall {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 136px;
  line-height: 1;
  color: var(--ks-ink);
  margin: 28px 0 0;
}
/* Avslutningslinja er en hel setning, ikke to ord, og må derfor stå mindre
   enn linja over tallet — på samme størrelse ville den blitt bredere enn
   kortet. Samme skrift som resten av feltet, bare mindre. */
body.ksnewdesign .ksnd-promo__under {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--ks-ink);
  /* nærmere tallet enn lufta over det, så de to leser som én setning */
  margin: 12px 0 0;
}
@supports (font-size: 1cqw) {
  .ksnd-promo__card--felt .ksnd-promo__inner { padding: 6.4cqw; }
  .ksnd-promo__card--felt::before { inset: 5.2cqw; }
  .ksnd-promo__kicker { gap: 3.2cqw; }
  .ksnd-promo__kicker::before,
  .ksnd-promo__kicker::after { width: 8.7cqw; }
  .ksnd-promo__kake { width: 68cqw; }
  body.ksnewdesign .ksnd-promo__kicker { font-size: 8.2cqw; }
  body.ksnewdesign .ksnd-promo__tall { font-size: 21.7cqw; }
  /* linjehøyden er 1, så all lufta mellom linjene ligger i disse margene —
     de skalerer med kortet på samme vis som skrifta */
  body.ksnewdesign .ksnd-promo__tall { margin-top: 4.5cqw; }
  body.ksnewdesign .ksnd-promo__under { font-size: 3.2cqw; line-height: 4.5cqw; margin-top: 1.9cqw; }
}

/* Slik bestiller du — det beige båndet. Hadde verken overskrift eller
   forklaring; fire ikoner med ett ord under sa ikke hva raden var. Nå:
   overskrift over, nummer og én linje per steg. De lange avsnittene som sto
   her før er ikke tilbake — linjene er kortet ned til det ene som skjer. */
/* Lite luft over: lufta under toppseksjonen kommer i tillegg, og til sammen
   ble det 120px før overskrifta. */
.ksnd-steps { padding: 28px 0 62px; }
body.ksnewdesign .ksnd-steps__title {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
  color: var(--ks-ink);
  text-align: center;
  margin: 0 0 46px;
}
/* Spaltene er like brede som innholdet sitt, ikke en fjerdedel av sida hver.
   Med 1fr sto de fire stega spredd over hele innholdsbredden og leste som
   fire løsrevne ting; nå står de samla midt på. Teksten får en makshjelp
   så spaltene ikke drar seg ut igjen. */
.ksnd-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 36px;
  width: auto;
  max-width: calc(100vw - 2 * var(--ks-gutter));
  margin: 0 auto;
}
/* Nummeret står foran steget, ikke over det, og er stort nok til å lese
   raden som 1-2-3-4. Spalta er derfor bredere enn da det bare sto ikon og
   ett ord her — teksten skal ha plass ved siden av tallet. */
/* Toppstilt, ikke midtstilt. Stega har ulikt mange linjer tekst, og med
   midtstilling havnet tall, ikon og tittel på fire ulike høyder på tvers av
   rekka. Nå flukter de øverst, og bare bunnen varierer. */
.ksnd-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  color: var(--ks-ink);
}
/* Tallet skal være like høyt som resten av steget til sammen. I Archason er
   selve sifferet 70 % av skriftstørrelsen (målt med TextMetrics). Uten
   ikonet er blokka med tittel og linje ca. 67px, så 96px gir et siffer på
   omtrent den høyden. Bredden er låst til bredden på «4», det bredeste
   sifferet, slik at teksten starter på samme sted i alle fire stega. */
/* Tallet skal være like høyt som ikon, tittel og linje til sammen. Målt med
   TextMetrics er sifferet 70 % av skriftstørrelsen og «4» 48 % i bredda;
   den høyeste innholdsblokka er 111px, derfor 159px og 76px bred.
   Linjeboksen er høyere enn sifferet, og lufta ligger ikke likt fordelt:
   målt på sida starter sifferet 5,2 % av skriftstørrelsen over toppen av
   boksen. Margen skyver det like mye ned igjen, slik at sifferet starter på
   linje med ikonet og slutter på linje med bunnen av teksten. Den står i em
   så den følger med når skriftstørrelsen krymper på mindre skjermer. */
body.ksnewdesign .ksnd-step__nr {
  flex: 0 0 76px;
  font-family: var(--ks-display);
  font-size: 159px;
  line-height: .75;
  color: var(--ks-mulvarp);
  margin: .052em 0 0;
  /* Boksen er like brei som «4», det breieste sifferet, så tekstspaltene
     flukter på tvers. «1» er bare halvparten så brei, og venstrestilt
     etterlot den eit stort hol før teksten. Midtstilt i boksen blir
     avstanden jamn i alle fire. */
  text-align: center;
}
/* Makshjelpa holder spaltene smale, så de fire stega står samla */
/* «Vi trykker og sender» måler 157px, så 160 holder den på én linje og gir
   samtidig plass til det større tallet uten at rekka blir bredere enn før */
.ksnd-step__body { flex: 1 1 auto; min-width: 0; max-width: 160px; }
/* Ikonet står over tittelen, i samme spalte som teksten, så raden ikke blir
   bredere av det. Figma 1:308 bruker 48px; her er det mindre, siden tallet
   alt bærer rekkefølgen og ikonet bare skal hjelpe gjenkjenninga. */
/* Ikonet følger venstrekanten til tittelen og brødteksten, så hele
   tekstspalta har én kant å lese mot. Midtstilt over venstrestilt tekst
   fløt fritt og flukta ikke med noe. */
.ksnd-step__body img { width: 32px; height: 32px; display: block; margin: 0 0 12px; }
body.ksnewdesign .ksnd-step h3 {
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 23px;
  color: var(--ks-ink);
  margin: 12px 0 4px;
}
body.ksnewdesign .ksnd-step p {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  margin: 0;
}

/* To like spalter: Showrom / Inspirasjon.
   Overskriftene her står med stor forbokstav og ikke i versaler som
   .ksnd-h ellers — de leser som egennavn, ikke som seksjonsetiketter. */
body.ksnewdesign .ksnd-duo .ksnd-h { text-transform: none; }
.ksnd-duo {
  display: flex;
  justify-content: space-between;
  gap: 66px;
  margin-top: 50px;
}
/* min-width:0 — uten den kan ikke spalten krympe under tekstblokkas 533px */
.ksnd-duo__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 17px; }
.ksnd-duo__head { width: 100%; max-width: 533px; text-align: center; display: flex; flex-direction: column; gap: 17px; }
.ksnd-duo__head p {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}
body.ksnewdesign .ksnd-duo__head a { color: var(--ks-link); font-weight: 700; text-decoration: none; }
body.ksnewdesign .ksnd-duo__head a:hover { text-decoration: underline; }
.ksnd-duo__col > a { display: block; width: 100%; }
.ksnd-duo__img { width: 100%; height: 390px; object-fit: cover; display: block; }

/* Populære kategorier.
   Det beige feltet lå under stega før; det er flyttet hit. Seksjonen må da
   gå kant til kant (.ksnd-bleed i markupen) for at farga skal nå ut til
   vinduskanten, og lufta må ligge som padding og ikke margin — ellers
   stopper farga før innholdet. Margene settes med longhand: shorthanden
   ville nullstilt de negative side-margene .ksnd-bleed bruker. */
.ksnd-cats {
  background: var(--ks-beige);
  margin-top: 54px;
  margin-bottom: 70px;
  padding: 58px 0 64px;
}
/* Fire felt på rad. De var tre à 300px; med fire blir de ~250px, altså litt
   mindre. Stående forhold i stedet for fast høyde: de holder formen når
   spalta smalner, og kvadratene gjorde sida boksete. 3:4 ligger også
   nærmere kildebildene, som er 1200x1800, så det beskjæres mindre bort. */
.ksnd-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  max-width: 1100px;
  margin: 35px auto 0;
}
.ksnd-cat { display: block; text-decoration: none; }
.ksnd-cat img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; display: block; }
.ksnd-cat span {
  display: block;
  margin-top: 14px;
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  color: var(--ks-ink);
}
.ksnd-cat:hover img { opacity: .9; }

/* Julefeltet — en smal bånd i burgunder mellom Showrom/Inspirasjon og
   kvalitetskorta. Går kant til kant som de andre fargefeltene på sida.
   Marg i longhand: shorthanden ville nullstilt de negative side-margene
   .ksnd-bleed bruker. */
.ksnd-jul {
  position: relative;
  overflow: hidden;
  background: var(--ks-burgunder);
  margin-top: 70px;
  padding: 54px 0 58px;
  text-align: center;
}
/* Fire julekategorier mellom teksten og knappen. Bildene er Emmas egne
   julefoto, tatt i miljø mot gran, kongler og burgunderbånd, så de står
   mot burgunderen uten å måtte beskjæres eller blandes. Kildene er 600x600,
   flisa er 148px, og utsnittet er lagt rundt motivet på forhånd. */
.ksnd-jul__bilder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 30px;
}
.ksnd-jul__bilder a { display: block; text-decoration: none; }
.ksnd-jul__bilder img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
body.ksnewdesign .ksnd-jul__bilder span {
  display: block;
  margin-top: 10px;
  font-family: var(--ks-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--ks-white);
}
/* Ingen hover-effekt på flisene. Nedtoning var for svak til å merkes, og ei
   hvit ramme rundt bildet brøt med resten av sida. Navnet under viser hva
   flisa er, og pekeren viser at den kan klikkes. */
.ksnd-jul__inner {
  position: relative;
  z-index: 1;
  width: 640px;
  max-width: calc(100vw - 2 * var(--ks-gutter));
  margin: 0 auto;
}
body.ksnewdesign .ksnd-jul__h {
  border: 0; padding: 0;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  color: var(--ks-white) !important;
  text-transform: none;
  margin: 0 0 12px;
}
body.ksnewdesign .ksnd-jul p {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 22px;
  color: var(--ks-white);
  margin: 0 0 26px;
}
/* Standardhoveren fyller pilla med blekk; på burgunder ble den en mørk
   flekk som ikke hører hjemme. Her tappes pilla i stedet: hvit ramme og
   hvit tekst, 9,1:1 mot bakgrunnen. */
body.ksnewdesign .ksnd-jul .ksnd-btn:hover {
  background: transparent;
  border-color: var(--ks-white);
  color: var(--ks-white);
}

/* Kvalitet du kan se og kjenne — tre kort om papir, konvolutter og miljø.
   Lenka ligger inni avsnittet og ser ut som lenkene i Showrom/Inspirasjon:
   samme farge, fet, uten understrek til man er over. Bildet er lenka for
   seg, slik det er i de to spaltene. */
.ksnd-kval { margin-top: 72px; }
body.ksnewdesign .ksnd-kval__h {
  text-transform: none;
  text-align: center;
  margin: 0 0 38px;
}
.ksnd-kval__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.ksnd-kval__kort { color: var(--ks-ink); }
.ksnd-kval__kort > a { display: block; }
/* Firkantede hjørner — ingen av de andre bildene på forsiden er avrundet */
.ksnd-kval__kort img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
body.ksnewdesign .ksnd-kval__kort h3 {
  border: 0; padding: 0;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: var(--ks-ink) !important;
  text-transform: none;
  margin: 20px 0 8px;
}
body.ksnewdesign .ksnd-kval__kort p {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  margin: 0;
}
.ksnd-kval__kort > a:hover img { opacity: .92; }

/* Om oss + bilde */
.ksnd-about {
  display: flex;
  justify-content: space-between;
  gap: 66px;
  margin-top: 92px;
  margin-bottom: 68px;
}
.ksnd-about__text { flex: 1 1 0; }
.ksnd-about__text p {
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 25px;
  color: #000;
  margin: 0 0 25px;
}
.ksnd-about__text .ksnd-h { margin-bottom: 18px; }
body.ksnewdesign .ksnd-about__text a { font-weight: 700; color: #000; }
/* Må matche .ksnd-about__text p i spesifisitet, ellers arver signaturen
   brødtekstens Karla 14px i stedet for display-serifen. */
.ksnd-about__text p.ksnd-about__sign { font-family: var(--ks-display); font-size: 20px; }
.ksnd-about__img { flex: 1 1 0; }
/* Svart-hvitt, som i Figma (node 1:357) */
.ksnd-about__img img { width: 100%; height: 390px; object-fit: cover; display: block; filter: grayscale(1); }

/* ==========================================================================
   KATEGORISIDE  (Figma frame "Bryllup" 1:359)
   Tittel i display-serif, deretter 4 kort per rad à 300x300.
   ========================================================================== */
.ksnd-pagetitle {
  border: 0;               /* det gamle temaet gir h1 en border-top */
  padding: 0;
  font-family: var(--ks-display);
  font-weight: 400;
  /* Figma har 64px. Nedskalert etter ønske — Archason finnes bare i Regular,
     så vekten kan ikke settes ned, men mindre grad gjør den lettere å lese.
     40px ligger fortsatt over båndtittelen (36px) og seksjonstitlene (30px),
     så hierarkiet på sida holder. */
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--ks-ink);
  text-align: center;
  margin: 30px 0 0;
}
/* Figma tegnet 4 felt à 300px. Fem per rad gir ~232px, som er lettere å skanne
   uten at bildene blir små. Samme tetthet brukes i produktlista. */
.ksnd-subcats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 66px 32px;
  margin: 52px 0 0;
}
.ksnd-subcat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.ksnd-subcat__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F4F1ED;     /* holder rutenettet i ro når et kort mangler bilde */
}
.ksnd-subcat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ksnd-subcat:hover .ksnd-subcat__img img { transform: scale(1.03); }
body.ksnewdesign .ksnd-subcat__name {
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: var(--ks-ink);
}
/* Kategoriteksten under rutenettet (ikke tegnet i Figma) */
.ksnd-catdesc {
  max-width: 820px;        /* lesbar linjelengde — 1301px gir altfor lange linjer */
  margin: 90px auto 60px;
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 25px;
  color: #000;
}
body.ksnewdesign .ksnd-catdesc a { color: var(--ks-link); }
.ksnd-catdesc h1, .ksnd-catdesc h2, .ksnd-catdesc h3 {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* ==========================================================================
   UNDERKATEGORI / PRODUKTLISTE  (Figma frame "Underkategori" 1:432)

   Selve lista kommer fra includes/modules/product_listing.php og er urørt —
   priser, favoritter, papirvalg og rabatter regnes ut som før. Her gjøres
   bare tabellmarkupen om til rutenettet og kortene fra Figma.
   ========================================================================== */

/* Beige felt med tittel og kategoritekst */
.ksnd-catband {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--ks-beige);
  padding: 35px 0 40px;
  margin-top: 26px;
}
.ksnd-catband__inner {
  width: var(--ks-wrap);
  max-width: calc(100% - 2 * var(--ks-gutter));
  margin: 0 auto;
}
.ksnd-catband__title {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--ks-ink);
}
.ksnd-catband__text {
  max-width: 724px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
body.ksnewdesign .ksnd-catband__text a { color: var(--ks-link); }

/* Søskenkategorier som runde snarveier */
.ksnd-siblings {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  margin: 46px 0 30px;
}
.ksnd-sibling { display: block; width: 100px; text-decoration: none; text-align: center; }
.ksnd-sibling__img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: #F4F1ED;
}
.ksnd-sibling__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksnd-sibling__name {
  display: block;
  margin-top: 6px;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: var(--ks-ink);
}
.ksnd-sibling.is-current .ksnd-sibling__img { outline: 1.5px solid var(--ks-ink); outline-offset: 3px; }
.ksnd-sibling.is-current .ksnd-sibling__name { font-weight: 700; }
.ksnd-sibling:hover .ksnd-sibling__img { opacity: .85; }
/* Flere sirkler kan være valgt samtidig — denne nullstiller utvalget */
body.ksnewdesign .ksnd-siblings__clear {
  align-self: center;
  padding: 7px 17px;
  border: 1px solid var(--ks-ink);
  border-radius: 20px;
  font-family: var(--ks-body);
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ks-ink);
  text-decoration: none;
  white-space: nowrap;
}
body.ksnewdesign .ksnd-siblings__clear:hover { background: var(--ks-ink); color: var(--ks-beige); }

/* Avstanden ned til produktlista legges på containeren, ikke på tellinga.
   Med sirkler kollapser den mot .ksnd-siblings (30px) og blir 40; uten
   sirkler gjelder de 40 direkte. Slik blir avstanden lik i begge tilfeller. */
.ksnd-plist { margin-top: 40px; }

/* --- Rutenettet ---------------------------------------------------------
   Legacy-markupen er <table class="productListingDatax"> > <ul class="column">
   > <li><div class="block"><table>. Ytre tabell og ul gjøres om til blokk/grid. */
.ksnd-plist .productListingDatax,
.ksnd-plist .productListingDatax > tbody,
.ksnd-plist .productListingDatax > tbody > tr,
.ksnd-plist .productListingDatax > tbody > tr > td {
  display: block;
  width: 100% !important;
  padding: 0;
}
.ksnd-plist ul.column {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* samme tetthet som kategorifeltene */
  gap: 44px 32px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.ksnd-plist ul.column > li { width: auto !important; margin: 0; padding: 0; float: none; }
/* .block har margin og padding i det gamle temaet — rutenettet styrer avstand */
.ksnd-plist ul.column > li .block { width: auto; margin: 0; padding: 0; }

/* --- Selve kortet ------------------------------------------------------- */
/* Radene blir flex, så navn og favoritt-hjerte står side om side slik Figma
   viser, mens de andre radene (colspan=2) fyller hele kortet. */
.ksnd-plist ul.column li table { display: block; width: 100%; border: 0; }
.ksnd-plist ul.column li tbody { display: block; }
.ksnd-plist ul.column li tr { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.ksnd-plist ul.column li td { display: block; padding: 0; }
.ksnd-plist ul.column li td[colspan="2"] { flex: 1 1 auto; }

.ksnd-plist ul.column li .xlistimage {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
body.ksnewdesign .ksnd-plist ul.column li a.xlisttitle {
  display: block;
  margin-top: 14px;
  /* Figma viser korte navn på én linje; de ekte er ofte lengre. To linjer
     reserveres, så pris og knapp står på samme høyde bortover raden. */
  min-height: 44px;
  font-family: var(--ks-body);
  font-weight: 500 !important;
  font-size: 18px;
  line-height: 22px;
  color: var(--ks-ink) !important;
  text-decoration: none;
}
body.ksnewdesign .ksnd-plist ul.column li a.xlisttitle:hover { text-decoration: underline; }
.ksnd-plist ul.column li [id^="listfav"] { margin-top: 16px; }
.ksnd-plist ul.column li [id^="listfav"] img { width: 18px; height: 16px; display: block; }

.ksnd-plist ul.column li .xlistprice {
  display: block;
  margin-top: 8px;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  text-align: left !important;
}
.ksnd-plist ul.column li .xlistprice b { font-weight: 500; }

/* "Vis"-knappen — jQuery UI gjør <a> om til .ui-button, derfor !important */
body.ksnewdesign .ksnd-plist ul.column li .tdbLink a,
body.ksnewdesign .ksnd-plist ul.column li a.ui-button {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 17px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #DDD4CB !important;
  color: #000 !important;
  font-family: var(--ks-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  line-height: normal !important;
  text-align: center;
  text-decoration: none;
}
body.ksnewdesign .ksnd-plist ul.column li a.ui-button:hover {
  background: var(--ks-ink) !important;
  color: var(--ks-beige) !important;
}
.ksnd-plist ul.column li .zipcolor { margin-top: 22px; }

/* Mine favoritter uten favoritter. Teksten lå som 12px inline-tekst uten
   luft; her får den samme størrelse som brødteksten på kontosidene. */
body.ksnewdesign .ksnd-favtom {
  display: block; margin-top: 8px;
  font-family: var(--ks-body); font-size: 14px; line-height: 20px;
  color: var(--ks-ink);
}

/* --- Antall og paginering ----------------------------------------------- */
.ksnd-plist .subcat_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 26px;
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
.ksnd-plist .subcat_nav span { float: none !important; }
.ksnd-plist .subcat_nav .subcat_nav_pagnum strong { font-weight: 500; }
body.ksnewdesign .ksnd-plist .subcat_nav a.pagN,
body.ksnewdesign .ksnd-plist .subcat_nav strong.pagNsel {
  display: inline-block;
  padding: 5px 14px;
  margin-left: 6px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  color: var(--ks-ink);
}
body.ksnewdesign .ksnd-plist .subcat_nav strong.pagNsel { background: #DDD4CB; font-weight: 700; }
body.ksnewdesign .ksnd-plist .subcat_nav a.pagN { border: 1px solid var(--ks-beige); }
body.ksnewdesign .ksnd-plist .subcat_nav a.pagN:hover { background: var(--ks-beige); }

/* ==========================================================================
   INNHOLDSSIDER — felles (Showrom, Om oss, Kontakt oss)
   ========================================================================== */
/* Kant-til-kant toppbilde, 537px i Figma */
.ksnd-pagehero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 537px;
  overflow: hidden;
}
.ksnd-pagehero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gruppebildet av teamet er svart-hvitt i Figma (både her og på forsiden).
   Kilden er samme fargebilde, så avmettingen gjøres her. */
.ksnd-pagehero--bw img { filter: grayscale(1); }

/* Knapp med tynn ramme — "Book time her" (Figma node 1:215) */
body.ksnewdesign .ksnd-btn--outline {
  border: 1px solid var(--ks-ink);
  background: transparent;
  color: var(--ks-ink);
  padding: 7px 17px;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  border-radius: 20px;
}
body.ksnewdesign .ksnd-btn--outline:hover { background: var(--ks-ink); color: var(--ks-beige); }

/* ==========================================================================
   SHOWROM OSLO  (Figma frame 1:622)
   ========================================================================== */
.ksnd-showrom__band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--ks-beige);
  padding: 57px 20px 60px;
  text-align: center;
}
.ksnd-showrom__band h1 {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--ks-ink);
  border: 0;
  margin: 0 0 11px;
  padding: 0;
}
.ksnd-showrom__band p {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  max-width: 724px;
  margin: 0 auto 21px;
}
.ksnd-showrom__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  margin-top: 63px;
}
.ksnd-showrom__imgs img { width: 100%; height: 579px; object-fit: cover; display: block; }

/* Brødteksten er bloggposten som driver siden. Den er allerede satt opp som en
   to-spalters tabell (47% / mellomrom / 47%) — samme oppdeling som Figma — så
   den beholdes, bare med ny typografi.
   Første avsnitt og knapperaden dupliserer det beige feltet over og skjules. */
.ksnd-showrom__body {
  margin-top: 64px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
.ksnd-showrom__body > p:first-child,
.ksnd-showrom__body table tr:first-child { display: none; }
/* Størrelsen må settes på p, table og td, ikke bare på containeren over.
   Det gamle temaet har «table, p { font-size: 12px; line-height: 1.5 }»
   (mts/includes/common_styles.css:91), og den treffer disse elementene
   direkte — da taper arven fra .ksnd-showrom__body uansett hva den sier. */
.ksnd-showrom__body table,
.ksnd-showrom__body td,
.ksnd-showrom__body p { font-size: 14px; line-height: 20px; }
.ksnd-showrom__body table { width: 100%; border-collapse: collapse; }
.ksnd-showrom__body td { vertical-align: top; padding: 0; }
.ksnd-showrom__body p { margin: 0 0 20px; }
.ksnd-showrom__body b,
.ksnd-showrom__body strong { font-weight: 700; }
body.ksnewdesign .ksnd-showrom__body a { color: var(--ks-link); }
.ksnd-showrom__body img { display: none; }  /* bildene ligger i egen rad over */

/* Strek over bunnseksjonen, 392px i Figma */
.ksnd-showrom__rule {
  width: 392px;
  max-width: 100%;
  border-top: 1px solid var(--ks-ink);
  margin-top: 87px;
}
.ksnd-showrom__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  margin-top: 87px;
  /* Figma (1:622): seksjonen slutter på y=2429 og footeren begynner på 2590.
     Uten denne lå Emma-bildet og den beige boblen klint inntil nyhetsbrevet. */
  margin-bottom: 161px;
}
.ksnd-showrom__person { display: flex; align-items: center; gap: 51px; }
.ksnd-showrom__person img {
  width: 210px; height: 210px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 210px;
  display: block;
}
.ksnd-showrom__person h2 {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ks-ink);
  margin: 0 0 6px;
}
.ksnd-showrom__person p {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  margin: 0;
  max-width: 383px;
}
.ksnd-showrom__cta {
  background: #DDD4CB;
  width: 536px;
  max-width: 100%;
  height: 210px;
  /* går ut til høyre sidekant, slik den gjør i Figma */
  margin-right: calc(-1 * var(--ks-gutter));
  border-radius: 105px 0 0 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 21px;
  flex: 0 0 auto;
}
.ksnd-showrom__cta p {
  font-family: var(--ks-display);
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  color: var(--ks-ink);
  margin: 0;
  max-width: 248px;
}

/* ==========================================================================
   OM OSS  (Figma frame 1:652)
   ========================================================================== */
.ksnd-omoss__intro { margin-top: 63px; }
.ksnd-omoss__intro .ksnd-h { margin-bottom: 16px; }
.ksnd-omoss__cols {
  column-count: 2;
  column-gap: 59px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
.ksnd-omoss__cols p { margin: 0 0 20px; }

.ksnd-team { margin: 67px 0 60px; }
.ksnd-team .ksnd-h { margin-bottom: 24px; }
.ksnd-team__lead {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  margin: 0 0 36px;
  max-width: 820px;
}
.ksnd-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 65px 66px;
}
.ksnd-team__card {
  background: rgba(221, 212, 203, .3);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  /* Lik padding på sidene, ellers står bildet ute av senter. Figma har
     teksten 12 px bredere enn bildet mot høyre, men bildet selv ligger
     midt i kortet (26 px inn fra venstre, 25 fra høyre) — og det er
     midtstillinga som er poenget. */
  padding: 25px 26px 21px;
  position: relative;
}

/* Hover — Figma "Hoover personkort" (1:747). Hele kortet byttes ut med
   konvolutten og LinkedIn-merket, midtstilt over hverandre.
   Bakgrunnen er #F5F2EF, som er nøyaktig det kortets egen
   rgba(221,212,203,.3) blir over hvitt — den må være ugjennomsiktig her,
   ellers skinner navn og tekst igjennom.
   Målene er fra rammen: ikonboksene er 109 px i et kort på 390x541, altså
   27,95 % av bredden, og paret står midt på kortet. */
.ksnd-team__hover {
  position: absolute;
  inset: 0;
  background: #F5F2EF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.05%;                 /* 23,5 px av 389 — avstanden mellom glyfene */
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.ksnd-team__card:hover .ksnd-team__hover,
.ksnd-team__card:focus-within .ksnd-team__hover { opacity: 1; visibility: visible; }
/* Bredden må ligge på barnet av overlegget, ikke på bildet — konvolutten
   er pakket i en mailto-lenke, og en prosentbredde inne i den ville regnet
   mot lenka og ikke mot kortet. */
.ksnd-team__hover > * { width: 23.7%; }   /* 92,33 px av 390 */
.ksnd-team__hover a { display: block; line-height: 0; }
.ksnd-team__hover a img { width: 100%; }
.ksnd-team__hover img { display: block; height: auto; }
.ksnd-team__card > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin-bottom: 26px;
}
.ksnd-team__card h3 {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ks-ink);
  margin: 0 0 6px;
}
.ksnd-team__role {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #615342;          /* Kortshop Brun */
  margin: 0 0 6px;
}
.ksnd-team__desc {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  margin: 0;
}
.ksnd-team__contact {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--ks-ink);
}
body.ksnewdesign .ksnd-team__contact a { color: var(--ks-link); text-decoration: none; }
body.ksnewdesign .ksnd-team__contact a:hover { text-decoration: underline; }

/* ==========================================================================
   KONTAKT OSS  (Figma frame 1:718)
   ========================================================================== */
.ksnd-kontakt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  margin: 69px 0 70px;
}
.ksnd-kontakt__card {
  background: #F5F2EF;
  border-radius: 15px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
  padding: 52px 36px 19px 37px;
  width: 497px;
  flex: 0 0 497px;
  box-sizing: border-box;
}
.ksnd-kontakt__card .ksnd-h { font-size: 30px; margin-bottom: 14px; }
.ksnd-kontakt__lead {
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  margin: 0 0 25px;
}
body.ksnewdesign .ksnd-kontakt__lead a { color: var(--ks-ink); font-weight: 700; text-decoration: underline; }

.ksnd-kontakt__aside { display: flex; align-items: flex-start; gap: 41px; }
.ksnd-kontakt__adr { width: 176px; flex: 0 0 176px; text-align: right; }
.ksnd-kontakt__adr .ksnd-h { font-size: 30px; margin-bottom: 23px; }
.ksnd-kontakt__adr p {
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  margin: 0;
}
.ksnd-kontakt__adr .ksnd-kontakt__gap { height: 20px; }
body.ksnewdesign .ksnd-kontakt__adr a { color: var(--ks-ink); text-decoration: none; }
.ksnd-kontakt__map { width: 482px; flex: 0 0 482px; }
.ksnd-kontakt__map iframe,
.ksnd-kontakt__map img { width: 482px; height: 362px; border: 0; display: block; }

/* --- Skjemaet -----------------------------------------------------------
   Markupen kommer fra kortshopkontaktrecipe.php via AJAX (tabell med
   tilfeldige felt-id-er, honeypot og filterContactform()). Den skrives ikke
   om — den styles inn i kortet, så innsending og validering er urørt. */
.ksnd-kontakt__card #zzxf .ksboiler_header { display: none; }
.ksnd-kontakt__card #zzxf table,
.ksnd-kontakt__card #zzxf tbody,
.ksnd-kontakt__card #zzxf tr,
.ksnd-kontakt__card #zzxf td { display: block; width: 100% !important; }
.ksnd-kontakt__card #zzxf .contentContainer,
.ksnd-kontakt__card #zzxf .contentText { padding: 0; }
.ksnd-kontakt__card #zzxf td.fieldKey {
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 20px;
  color: rgba(67, 66, 66, .72);
  padding: 0 0 4px 18px;
}
.ksnd-kontakt__card #zzxf input[type="text"],
.ksnd-kontakt__card #zzxf textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid rgba(67, 66, 66, .35);
  border-radius: 17px;
  background: #fff;
  padding: 6px 18px;
  font-family: var(--ks-body);
  font-size: 14px !important;
  line-height: 20px;
  color: var(--ks-ink);
  outline: 0;
}
.ksnd-kontakt__card #zzxf input[type="text"] { height: 34px; }
.ksnd-kontakt__card #zzxf textarea { height: 209px; border-radius: 15px; padding: 10px 18px; resize: vertical; }
.ksnd-kontakt__card #zzxf input:focus,
.ksnd-kontakt__card #zzxf textarea:focus { border-color: var(--ks-ink); }
.ksnd-kontakt__card #zzxf tr { margin-bottom: 14px; }
/* Stjerna ligger i verdicella etter feltet, og havner derfor på egen linje når
   cellene stables. Flytt den opp til ledeteksten i stedet. */
.ksnd-kontakt__card #zzxf td.fieldValue .inputRequirement { display: none; }
.ksnd-kontakt__card #zzxf td.fieldKey:not([colspan])::after { content: " *"; color: var(--ks-red); }
.ksnd-kontakt__card #zzxf td.fieldKey .inputRequirement { color: var(--ks-red); }
.ksnd-kontakt__card #zzxf button {
  background: var(--ks-ink);
  color: var(--ks-beige);
  border: 0;
  border-radius: 20px;
  padding: 2px 17px;
  height: auto !important;
  font-family: var(--ks-body);
  font-size: 12px !important;
  line-height: 30px;
  cursor: pointer;
  float: right;
}
.ksnd-kontakt__card #zzxf button:hover { background: #000; }

/* ==========================================================================
   INSPIRASJON (bloggen)
   Figma "Inspirasjon" (71:5879).

   Den gamle sida hadde et bannerbilde med hvit tekst og to spalter med
   flytende innlegg. Figma har i stedet et beige felt på tvers, en rad med
   kategoripiller, og innleggene i et rutenett med tre kort i bredden.
   ========================================================================== */

/* Det beige feltet, 264 px høyt og kant til kant (Figma 71:5881) */
.ksnd-insp__band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ks-beige);
  min-height: 264px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ksnd-insp__bandinner { width: 724px; max-width: calc(100% - 2 * var(--ks-gutter)); }
body.ksnewdesign .ksnd-insp__band h1 {
  border: 0; padding: 0;
  margin: 0 0 10px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink) !important;   /* det gamle temaet setter h1 til ren svart */
  text-transform: none;
}
.ksnd-insp__lead {
  margin: 0 0 17px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}

/* Nyhetsbrevfeltet — samme pille som i footeren, men på hvit bunn (71:5886) */
.ksnd-insp__news {
  width: 476px;
  max-width: 100%;
  height: 41px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: var(--ks-white);
  border-radius: 20px;
  padding: 0 5px 0 37px;
}
body.ksnewdesign .ksnd-insp__news input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  color: var(--ks-ink);
}
body.ksnewdesign .ksnd-insp__news input:focus { outline: 0; }
body.ksnewdesign .ksnd-insp__news button {
  flex: 0 0 auto;
  width: 40px; height: 33px;
  display: flex; align-items: center; justify-content: center;
  border: 0 !important;
  border-radius: 20px;
  background: var(--ks-beige) !important;
  cursor: pointer;
  padding: 0;
}
.ksnd-insp__news button img { width: 20px; height: 19px; display: block; }

/* «Sorter etter kategori» og pillene under (71:5902, 71:5903) */
.ksnd-insp__sorttitle {
  margin: 57px 0 27px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .02em;
  color: var(--ks-ink);
  text-align: center;
}
.ksnd-insp__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-bottom: 58px;
}
body.ksnewdesign .ksnd-insp__filter {
  min-width: 89px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 17px;
  border-radius: 20px;
  background: var(--ks-beige);
  font-family: var(--ks-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: var(--ks-ink);
  text-decoration: none;
  transition: background .15s, color .15s;
}
body.ksnewdesign .ksnd-insp__filter:hover,
body.ksnewdesign .ksnd-insp__filter.is-on {
  background: var(--ks-ink);
  color: var(--ks-beige);
}

/* Rutenettet. Figma: tre kort à 390 px med 66 px mellom (71:5890 flg.) */
.blogwrapper.ksnd-insp__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 76px 66px;
  width: 100%;
}
.ksnd-insp__card { display: flex; flex-direction: column; }
.ksnd-insp__img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  /* Bloggbildene ligger utenfor repoet. Er et bilde borte, står det igjen
     et rolig beige felt i stedet for et ødelagt bildeikon. */
  background: rgba(228, 221, 213, .45);
  margin-bottom: 20px;
}
.ksnd-insp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ksnewdesign .ksnd-insp__title { margin: 0 0 9px; }
body.ksnewdesign .ksnd-insp__title a {
  font-family: var(--ks-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: var(--ks-ink);
  text-decoration: none;
}
body.ksnewdesign .ksnd-insp__title a:hover { text-decoration: underline; }
.ksnd-insp__excerpt {
  margin: 0 0 19px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
/* Merket står nederst, så kortene i en rad får det på samme linje */
.ksnd-insp__tag { margin: auto 0 0; }
body.ksnewdesign .ksnd-insp__tag a {
  display: inline-flex;
  align-items: center;
  padding: 2px 17px;
  border-radius: 20px;
  background: var(--ks-beige);
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #000;
  text-decoration: none;
}
body.ksnewdesign .ksnd-insp__tag a:hover { background: var(--ks-ink); color: var(--ks-beige); }

/* --- Ett blogginnlegg ---------------------------------------------------
   Figma "Bloggpost" (72:6056), "Bloggpost 2" (72:6096), "Bloggpost 3"
   (72:6131). Tittelen midtstilt øverst, bildene i et rutenett, og
   brødteksten i en midtstilt spalte på 871 px. */
.ksnd-post { margin-bottom: 60px; }
body.ksnewdesign .ksnd-post__title {
  border: 0; padding: 0;
  margin: 0 0 33px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-align: center;
  text-transform: none;
}
/* To store bilder øverst (Figma: 629x856 ved siden av hverandre) */
.ksnd-post__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 45px;
  margin-bottom: 45px;
}
/* Bilderammene følger bildene, ikke rammene i Figma. Figma tegner collagen
   med stående produktfoto (629x856 og 406x579), men bloggens bildearkiv har
   ikke slike bilder: 60 av 64 collagebilder er 1200x630, fire er kvadratiske,
   ingen er stående. Et 1200x630-bilde i en 628x855-ramme med object-fit:cover
   viser 38 % av bredden — resten beskjæres bort, og man ser en tilfeldig
   loddrett stripe av motivet i stedet for bildet. Rammene settes derfor til
   husformatet 1200x630. Skal collagen bli stående som i Figma, må bloggen ha
   stående bilder; det er en innholdsjobb, ikke en stilarkjobb. */
.ksnd-post__top .ksnd-post__img { aspect-ratio: 1200 / 630; }
.ksnd-post__top--en { grid-template-columns: 1fr; }
.ksnd-post__top--en .ksnd-post__img { aspect-ratio: 1200 / 630; }

/* Raden under: tre felt der midten er sitatet. Antall spalter følger
   antall felt — se --n1/--n2 under. */
.ksnd-post__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  margin-bottom: 48px;
}
.ksnd-post__row .ksnd-post__img,
.ksnd-post__quote { aspect-ratio: 1200 / 630; }
/* Sitatet står like høyt som bildene ved siden av. I tre spalter blir
   feltet 406x213, og da må skriften ned fra 20/26 for at setninga skal
   få plass. */
.ksnd-post__row--n3 .ksnd-post__quote > span { font-size: 16px; line-height: 22px; max-width: 100%; }
.ksnd-post__row--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Bare sitatet, uten bilder ved siden av: da står det som et bånd over
   brødteksten i stedet for som en ensom boks med to tomme tredjedeler.
   Det er tilfellet på 27 av 38 innlegg. */
.ksnd-post__row--n1 { grid-template-columns: 1fr; }
.ksnd-post__row--n1 .ksnd-post__quote {
  aspect-ratio: auto;
  padding: 44px 30px;
}
.ksnd-post__row--n1 .ksnd-post__quote > span { max-width: 640px; font-size: 24px; line-height: 32px; }

.ksnd-post__img {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(228, 221, 213, .45);
}
.ksnd-post__img { position: relative; }
.ksnd-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Produktmerket oppå bildet (Figma 72:6087 og 72:6088). Etiketten øverst
   til venstre, handlekurv-knappen øverst til høyre — samme plassering på
   alle merkene i rammene. Se newdesign/blogpost_merker.php. */
body.ksnewdesign .ksnd-post__tag {
  position: absolute;
  left: 4.5%;
  top: 3%;
  max-width: 46%;
  font-family: var(--ks-body);
  font-size: 11px;
  line-height: 15px;
  color: var(--ks-white);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.ksnd-post__tagname { display: block; font-weight: 700; }
.ksnd-post__tagprice { display: block; font-weight: 400; }
body.ksnewdesign .ksnd-post__bag {
  position: absolute;
  right: 4.5%;
  top: 3%;
  width: 57px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ks-white);
  text-decoration: none;
  transition: background .15s;
}
.ksnd-post__bag img { width: 24px; height: 24px; display: block; }
body.ksnewdesign .ksnd-post__bag:hover { background: var(--ks-beige); }

/* Sitatfeltet — Figma bruker samme beige som ellers, med teksten midt i */
.ksnd-post__quote {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 30px;
  border-radius: 6px;
  background: var(--ks-beige);
}
.ksnd-post__quote > span {
  max-width: 346px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: var(--ks-ink);
  text-align: center;
}

.ksnd-post__body {
  width: 871px;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  text-align: center;
}
/* «table, p { font-size:12px }» i det gamle temaet treffer avsnittene
   direkte, så størrelsen må settes på dem og ikke bare på spalta. */
.ksnd-post__body p,
.ksnd-post__body table,
.ksnd-post__body td,
.ksnd-post__body li { font-size: 14px; line-height: 20px; }
.ksnd-post__body p { margin: 0 0 20px; }
.ksnd-post__body ul,
.ksnd-post__body ol { margin: 0 0 20px; padding-left: 20px; }
/* Bilde nummer seks og utover blir stående i teksten. De skal da følge
   spaltebredden og ikke sin egen pikselbredde fra editoren. */
.ksnd-post__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto 24px;
  border-radius: 6px;
}
/* Mellomtitlene i Figma er Archason 20 px, ikke fet brødtekst.
   Linjeavstanden var 20 px — nøyaktig like stor som skriften, så en
   mellomtittel over to linjer satte linjene oppi hverandre. */
body.ksnewdesign .ksnd-post__body h1,
body.ksnewdesign .ksnd-post__body h2,
body.ksnewdesign .ksnd-post__body h3,
body.ksnewdesign .ksnd-post__body h4 {
  border: 0; padding: 0;
  margin: 32px 0 8px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: var(--ks-ink) !important;
  text-align: center;
  text-transform: none;
}
body.ksnewdesign .ksnd-post__body a { color: var(--ks-link); }
/* Mellomtittel som står i fet skrift øverst i samme avsnitt som teksten,
   skilt av en <br>. Se ksnd_feteroverskrift() i newdesign/blogpost.php —
   avsnittet kan ikke deles i to, så biten merkes og settes som egen linje.
   Toppmargen kollapser ut gjennom avsnittet, så den gir samme rytme som
   en ekte mellomtittel. */
body.ksnewdesign .ksnd-post__body .ksnd-post__bolk {
  display: block;
  margin: 32px 0 8px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: var(--ks-ink);
}
body.ksnewdesign .ksnd-post__body > *:first-child .ksnd-post__bolk { margin-top: 0; }
/* Tagger editoren setter inn og designet ikke har en form for. Uten disse
   står de med nettleserens standard: <hr> som en grafisk 2px-list, <big>
   1,2 ganger teksten og <small> på 11,7px. Teller 6 hr, 6 big og 4 small. */
body.ksnewdesign .ksnd-post__body hr {
  height: 1px;
  border: 0;
  margin: 36px 0;
  background: rgba(130, 114, 92, .3);   /* --ks-mulvarp, dempet */
}
.ksnd-post__body big { font-size: 16px; line-height: 24px; }
/* <small> brukes til bildetekst og fotokreditering */
.ksnd-post__body small { font-size: 12px; line-height: 18px; color: var(--ks-mulvarp); }

/* Lange og oppdelte innlegg — over 1200 tegn, tre mellomtitler eller en
   liste. Figma midtstiller brødteksten, men rammene er tegnet med fem-ti
   linjer. Det lengste innlegget i basen har 9724 tegn over 49 avsnitt, og
   midtstilt gjør det tungt å lese: øyet må lete etter linjestarten på
   hver linje. Spaltebredde og skrift er den samme — bare stillinga endres.
   Figma 72:6131 setter også avsnittene sine venstrestilt. */
.ksnd-post__body--lang { text-align: left; }
.ksnd-post__body--lang p { margin: 0 0 16px; }
body.ksnewdesign .ksnd-post__body--lang h1,
body.ksnewdesign .ksnd-post__body--lang h2,
body.ksnewdesign .ksnd-post__body--lang h3,
body.ksnewdesign .ksnd-post__body--lang h4 { text-align: left; }

/* «Handle ... her» med produktene fra fokuskategorien */
.ksnd-post__shop { margin-top: 68px; }
body.ksnewdesign .ksnd-post__shoptitle {
  border: 0; padding: 0;
  margin: 0 0 34px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-align: center;
  text-transform: none;
}
.ksnd-post__shop .ksnd-plist { margin-top: 0; }
/* Figma viser bare bilde, navn og pris på de fire produktene — ingen
   «Vis»-knapp, ingen fargeprikker og ingen «Se mer» under. */
.ksnd-post__shop .ksnd-plist ul.column li .tdbLink,
.ksnd-post__shop .ksnd-plist ul.column li a.ui-button,
.ksnd-post__shop .ksnd-plist ul.column li .zipcolor,
.ksnd-post__shop .ksnd-more { display: none !important; }
.ksnd-post__shop .ksnd-plist ul.column { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 35px; }
/* Kategoriens egen overskrift og beskrivelse følger med fokuskategorien.
   Figma har dem ikke — «Handle ... her» står alene over produktene — og de
   gjentar det overskrifta alt sier. Skjules her, ikke andre steder. */
.ksnd-post__shop .ksnd-plist h1,
.ksnd-post__shop .ksnd-plist .subcats_description,
.ksnd-post__shop .ksnd-plist .subcat_desc { display: none; }

/* Figma har ingen brødsmulesti på innleggene */
body.ksnewdesign:has(.ksnd-post) #kortshop_breadcrumblayer { display: none; }

/* ==========================================================================
   INFORMASJONSKAPSLER
   Figma "Informasjonskapsler" (74:6584) og "Cookies" (74:6511) — den siste
   er samme side med popupen oppå.
   ========================================================================== */

/* Beige felt med tittelen, 186 px høyt og kant til kant */
.ksnd-cookies__band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ks-beige);
  min-height: 186px;
  display: flex;
  align-items: center;
}
.ksnd-cookies__bandinner {
  width: var(--ks-wrap);
  max-width: calc(100% - 2 * var(--ks-gutter));
  margin: 0 auto;
}
body.ksnewdesign .ksnd-cookies__band h1 {
  border: 0; padding: 0; margin: 0;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}

.ksnd-cookies { margin: 28px 0 40px; }

/* Kortene: 1 px kant, 20 px hjørner, 34 px inn fra kanten (Figma 74:6621) */
.ksnd-cookies__card {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 26px 34px 30px;
  margin-bottom: 28px;
}
.ksnd-cookies__card--slim { padding: 26px 34px; }
body.ksnewdesign .ksnd-cookies__card h2 {
  border: 0; padding: 0;
  margin: 0 0 12px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: #000 !important;
  text-transform: none;
}
.ksnd-cookies__card p {
  margin: 0;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #000;
}
/* Navnene på de faktiske infokapslene. Den gamle sida viste dem i lilla
   skrivemaskinskrift, og Figma har skjermbilder av nettopp det. */
.ksnd-cookies__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-family: Courier, monospace;
  font-size: 13px;
  line-height: 19px;
  color: #7A1F7A;
}
body.ksnewdesign .ksnd-cookies__subtitle {
  border: 0; padding: 0;
  margin: 34px 0 20px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}
.ksnd-cookies__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 6px;
}
.ksnd-cookies__foot p {
  margin: 0;
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
body.ksnewdesign #ihavecookiesBtn {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 2px 17px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--ks-ink) !important;
  background-image: none !important;
  font-family: var(--ks-body) !important;
  font-size: 12px !important;
  line-height: 24px;
  color: var(--ks-beige) !important;
  text-transform: none;
  cursor: pointer;
  margin: 0 !important;
  float: none !important;
}
body.ksnewdesign #ihavecookiesBtn:hover { background: #000 !important; }

/* --- Popupen (Figma 74:6555) --------------------------------------------
   Markupen kommer fra ext/jquery.ihavecookies.js og kan ikke endres herfra,
   så alt gjøres med CSS. Reglene fra cookie_pop.php ligger i en <style> som
   kommer etter denne fila, derfor er alt her prefikset med body.ksnewdesign
   — det gir høyere spesifisitet og vinner uansett rekkefølge. */
body.ksnewdesign #gdpr-cookie-message {
  box-sizing: border-box;      /* ellers legges de 48 px paddingen utenpå */
  width: 622px;
  max-width: calc(100% - 32px);
  max-height: 90vh;
  padding: 43px 48px 48px;
  border-radius: 10px;
  background: var(--ks-white);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  font-family: var(--ks-body);
  /* Logoen står øverst til høyre i rammen */
  background-image: url(icons/logo.svg);
  background-repeat: no-repeat;
  background-position: right 48px top 41px;
  background-size: 105px auto;
}
body.ksnewdesign #gdpr-cookie-message h4 {
  margin: 0 0 22px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ks-ink);
  text-transform: none;
}
body.ksnewdesign #gdpr-cookie-message p {
  max-width: 328px;
  margin: 0 0 14px;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--ks-ink);
}
body.ksnewdesign #gdpr-cookie-message a {
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--ks-ink);
  text-decoration: underline;
  border: 0;
}
/* Figma viser avkryssingsboksene med en gang, ikke bak «Tilpass» */
body.ksnewdesign #gdpr-cookie-types { display: block !important; margin-top: 20px; }
body.ksnewdesign #gdpr-cookie-types h5 { display: none; }   /* ikke med i rammen */
body.ksnewdesign #gdpr-cookie-types ul {
  margin: 0; padding: 0; list-style: none;
  max-width: 328px;
}
body.ksnewdesign #gdpr-cookie-message li {
  width: 50%;
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ks-ink);
}
body.ksnewdesign #gdpr-cookie-message li label { cursor: pointer; }
/* Rutene: 12 px, gull når valgt, beige på den påkrevde som ikke kan endres */
body.ksnewdesign #gdpr-cookie-message input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px;
  margin: 0 5px 0 0;
  vertical-align: middle;
  border: 0; border-radius: 4px;
  background: #D7CFC5;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, .25);
  cursor: pointer;
  position: relative;
}
body.ksnewdesign #gdpr-cookie-message input[type="checkbox"]:checked { background: var(--ks-link); }
body.ksnewdesign #gdpr-cookie-message input[type="checkbox"]:disabled {
  background: var(--ks-beige); cursor: default;
}
body.ksnewdesign #gdpr-cookie-message input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 3px; top: 1px;
  width: 3px; height: 6px;
  border-right: 1.5px solid var(--ks-white);
  border-bottom: 1.5px solid var(--ks-white);
  transform: rotate(45deg);
}
/* Knappene: Tilpass og Avvis med kant, Aksepter fylt (Figma 74:6579) */
body.ksnewdesign #gdpr-cookie-message p:last-child {
  display: flex;
  gap: 16px;
  max-width: none;
  margin: 17px 0 0;
  text-align: left;
}
body.ksnewdesign #gdpr-cookie-message button {
  min-height: 34px;
  padding: 2px 17px !important;
  border: 1px solid #000 !important;
  border-radius: 20px !important;
  background: none !important;
  font-family: var(--ks-body) !important;
  font-size: 12px !important;
  line-height: 30px;
  color: var(--ks-ink) !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background .15s, color .15s;
}
body.ksnewdesign #gdpr-cookie-message button:hover {
  background: var(--ks-beige) !important;
}
/* Må ta med #gdpr-cookie-message og button her — regelen over er ellers
   mer spesifikk, og da ble Aksepter stående med hvit bakgrunn. */
body.ksnewdesign #gdpr-cookie-message button#gdpr-cookie-accept {
  border-color: var(--ks-ink) !important;
  background: var(--ks-ink) !important;
  color: var(--ks-beige) !important;
  order: 3;                      /* Figma: Tilpass, Avvis, Aksepter */
}
body.ksnewdesign #gdpr-cookie-message button#gdpr-cookie-accept:hover { background: #000 !important; }
body.ksnewdesign #gdpr-cookie-message button#gdpr-cookie-reject { order: 2; }
body.ksnewdesign #gdpr-cookie-message button#gdpr-cookie-advanced { order: 1; }

/* ==========================================================================
   OFTE STILTE SPØRSMÅL
   Figma "Ofte stilte spørsmål" (75:6856).
   ========================================================================== */

/* Sidemenyen med fanene kommer fra mts/includes/common_header.php og hører
   til den gamle visningen — i det nye designet står alle gruppene på sida,
   så den er overflødig. Skjules bare her. */
body.ksnewdesign:has(.ksnd-faq) #kortshop_contentmenulayer { display: none; }

/* Beige felt med de tre punktene (Figma 75:6857, 201 px høyt) */
.ksnd-faq__band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ks-beige);
  min-height: 201px;
  display: flex;
  align-items: center;
}
.ksnd-faq__bandinner {
  width: var(--ks-wrap);
  max-width: calc(100% - 2 * var(--ks-gutter));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 24px 0;
}
.ksnd-faq__usp { flex: 1 1 0; text-align: center; }
.ksnd-faq__usp img { display: block; margin: 0 auto 22px; width: 26px; height: 26px; }
body.ksnewdesign .ksnd-faq__usp h2 {
  border: 0; padding: 0;
  margin: 0 0 4px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}
.ksnd-faq__usp p {
  margin: 0;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}

/* Papir og konvolutter som to ikonkort (Figma 75:6980) */
.ksnd-faq__picks { margin: 60px 0 0; text-align: center; }
body.ksnewdesign .ksnd-faq__picks h2 {
  border: 0; padding: 0;
  margin: 0 0 26px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}
.ksnd-faq__picklist { display: flex; justify-content: center; gap: 92px; }
body.ksnewdesign .ksnd-faq__pick { text-decoration: none; display: block; }
.ksnd-faq__pickbox {
  width: 126px; height: 126px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: var(--ks-beige);
  transition: background .15s;
}
.ksnd-faq__pickbox img { width: 66px; height: 66px; display: block; }
body.ksnewdesign .ksnd-faq__pick:hover .ksnd-faq__pickbox { background: #D7CFC5; }
.ksnd-faq__picklabel {
  display: block;
  margin-top: 17px;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}

body.ksnewdesign .ksnd-faq__title {
  border: 0; padding: 0;
  margin: 60px 0 34px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-align: center;
  text-transform: none;
}

/* Gruppene og spørsmålene. Alt er 684 px bredt og midtstilt (Figma 75:6873) */
.ksnd-faq { margin-bottom: 60px; }
.ksnd-faq__group { width: 684px; max-width: 100%; margin: 0 auto 34px; }
body.ksnewdesign .ksnd-faq__group h2 {
  border: 0; padding: 0;
  margin: 0 0 16px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}
.ksnd-faq__item { margin-bottom: 16px; }
/* Spørsmålsraden: 34 px høy pille med kant, teksten midtstilt og pluss til
   høyre (Figma 75:6875). details/summary gir åpning uten eget skript. */
body.ksnewdesign .ksnd-faq__item > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 46px;
  border: 1px solid var(--ks-ink);
  border-radius: 10px;
  font-family: var(--ks-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: .1em;
  color: var(--ks-ink);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: background .15s;
}
.ksnd-faq__item > summary::-webkit-details-marker { display: none; }
body.ksnewdesign .ksnd-faq__item > summary:hover { background: rgba(228, 221, 213, .5); }
/* Pluss som blir minus når svaret er åpent. To streker, ikke et ikon, fordi
   den skal kunne endre seg. */
.ksnd-faq__item > summary::before,
.ksnd-faq__item > summary::after {
  content: '';
  position: absolute;
  right: 27px;
  top: 50%;
  width: 16px; height: 1.5px;
  margin-top: -.75px;
  background: var(--ks-ink);
  transition: transform .18s;
}
.ksnd-faq__item > summary::after { transform: rotate(90deg); }
.ksnd-faq__item[open] > summary::after { transform: rotate(0deg); }
.ksnd-faq__answer {
  padding: 16px 27px 4px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
.ksnd-faq__answer p { margin: 0 0 14px; font-size: 14px; line-height: 20px; }
.ksnd-faq__answer img { max-width: 100%; height: auto; }
body.ksnewdesign .ksnd-faq__answer a { color: var(--ks-link); }

/* ==========================================================================
   VÅRE PAPIR / VÅRE KONVOLUTTER
   Figma "Våre papir" (75:7158) og "Våre konvolutter" (75:7274).
   Rutenett med fire kort i bredden, bilde 300x300 og navnet under.
   ========================================================================== */
body.ksnewdesign .ksnd-typer__title {
  border: 0; padding: 0;
  margin: 34px 0 40px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-align: center;
  text-transform: none;
}
/* Innledninga over rutenettet — «Hvilket papir skal jeg velge?». Teksten lå
   som første oppføring i infosenteret; den hører ikke hjemme som et kort, men
   er verdt å ha, så den står her i stedet. */
.ksnd-typer__intro {
  width: 871px;
  max-width: 100%;
  margin: 0 auto 54px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  text-align: center;
}
.ksnd-typer__intro p { margin: 0 0 18px; font-size: 14px; line-height: 20px; }
.ksnd-typer__intro p:last-child { margin-bottom: 0; }
.ksnd-typer__intro img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 26px;
  border-radius: 6px;
}
body.ksnewdesign .ksnd-typer__intro h1,
body.ksnewdesign .ksnd-typer__intro h2,
body.ksnewdesign .ksnd-typer__intro h3 {
  border: 0; padding: 0;
  margin: 0 0 12px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}
body.ksnewdesign .ksnd-typer__intro a { color: var(--ks-link); }

.ksnd-typer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 78px 35px;
  margin-bottom: 60px;
}
body.ksnewdesign .ksnd-typer__card { display: block; text-decoration: none; outline-offset: 3px; }
.ksnd-typer__img {
  display: block;
  position: relative;      /* holder hover-panelet inne i kortet */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Bildene ligger på kortshop.no; er et borte, står feltet rolig beige */
  background: rgba(228, 221, 213, .45);
}
.ksnd-typer__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}
body.ksnewdesign .ksnd-typer__card:hover .ksnd-typer__img img { transform: scale(1.04); }

/* Hover (Figma "Hover over papirtyper", 75:7411): beskrivelsen legger seg
   over bildet i et lyst felt. Teksten er den samme som står i infosenteret,
   bare uten bildet. */
.ksnd-typer__info {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 16px 18px;
  background: #EEECE9;
  box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
  font-size: 11px;
  line-height: 15px;
  /* Er beskrivelsen lengre enn feltet, kan den rulles i stedet for å flyte ut */
  overflow-y: auto;
}
body.ksnewdesign .ksnd-typer__card:hover .ksnd-typer__info,
body.ksnewdesign .ksnd-typer__card:focus .ksnd-typer__info,
body.ksnewdesign .ksnd-typer__card:focus-within .ksnd-typer__info {
  opacity: 1;
  visibility: visible;
}
/* margin:auto i stedet for align-items:center — sentrert innhold som er
   høyere enn feltet blir ellers klippet på toppen og lar seg ikke rulle til. */
.ksnd-typer__info > span {
  margin: auto;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  color: var(--ks-ink);
  text-align: center;
}
.ksnd-typer__info p { margin: 0 0 10px; font-size: 11px; line-height: 15px; }
.ksnd-typer__info p:last-child { margin-bottom: 0; }
.ksnd-typer__info strong { font-weight: 700; }
/* Bildet skal ikke gro under panelet */
body.ksnewdesign .ksnd-typer__card:hover .ksnd-typer__img img { transform: none; }
.ksnd-typer__name {
  display: block;
  margin-top: 18px;
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 26px;
  color: var(--ks-ink);
  text-align: center;
}

/* ==========================================================================
   PRODUKTSIDE
   Figma "Produktside" (94:7612).

   Sida er den mest sammensatte i butikken, og markupen kommer fra
   product_info.php og bestillingsmodulene. Dette er derfor en restyling på
   plass, ikke ny markup: spaltene får målene fra rammen, typografien byttes,
   og de svarte bjelkene og turkise flatene fra det gamle temaet erstattes.

   Rammen omorganiserer i tillegg bestillingsdelen til sammenleggbare rader i
   høyrespalta. Det er en endring i selve bestillingsflyten, ikke i utseendet,
   og er derfor ikke gjort her — se notatet i svaret.
   ========================================================================== */

/* Spaltene. Figma har bilde 603 og info 648 med 84 px mellom, i et
   innholdsfelt på 1354. Her er feltet 1300, så målene er regnet om til
   prosent — faste piksler ble til sammen bredere enn feltet, og da falt
   høyrespalta under venstre. */
/* Bare fra 961 px og opp — under det har det gamle temaet egne regler som
   stabler spaltene, og de skal stå. */
@media screen and (min-width: 961px) {
  body.ksnewdesign #cartqc #leftfloat {
    width: 44.5% !important;      /* 603 av 1354 */
    /* ksbxslider/product_info.css setter max-width:520px fra 960 px og opp.
       Uten dette blir bildespalta stående på 520 uansett bredde. */
    max-width: none !important;
    margin-right: 6.2%;           /*  84 av 1354 */
  }
  body.ksnewdesign #cartqc #rightfloat { width: 47.8% !important; max-width: none !important; }
}

/* Hovedbildet og miniatyrene */
body.ksnewdesign #leftfloat .bigimage img,
body.ksnewdesign #leftfloat > div > img { border-radius: 6px; }
body.ksnewdesign #leftfloat img { max-width: 100%; height: auto; }

/* Tittelen */
body.ksnewdesign #rightfloat .pinfoprodname,
body.ksnewdesign #rightfloat > b:first-of-type {
  display: block;
  margin-bottom: 10px;
  font-family: var(--ks-display) !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}
body.ksnewdesign #rightfloat { font-family: var(--ks-body); font-size: 14px; line-height: 20px; }
body.ksnewdesign #rightfloat p { font-size: 14px; line-height: 20px; margin: 0 0 14px; }

/* Prisen (Figma 94:7665) */
body.ksnewdesign #rightfloat .pinfoprice,
body.ksnewdesign #rightfloat .productprice {
  font-family: var(--ks-body) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 28px;
  color: var(--ks-ink) !important;
}

/* Stegbjelken «Tilpass produktet / Handlekurv / Kasse» var turkis */
body.ksnewdesign .ksfullheader {
  background: var(--ks-beige) !important;
  color: var(--ks-ink) !important;
  font-family: var(--ks-body) !important;
}
body.ksnewdesign .ksfullheader * { color: var(--ks-ink) !important; }
body.ksnewdesign .ksfullheader img { filter: none; }

/* Bjelkene over hver del av bestillingen var svarte med hvit tekst */
body.ksnewdesign #productoptions .optionheader,
body.ksnewdesign #productoptions .optionheaderhelp {
  background: var(--ks-beige) !important;
  color: var(--ks-ink) !important;
  font-family: var(--ks-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .1em;
}
body.ksnewdesign #productoptions .optioncontainer { border-radius: 10px; overflow: hidden; }

/* Knappene i bestillingsdelen — samme pille som ellers i designet */
body.ksnewdesign #cartqc .ui-button,
body.ksnewdesign #productoptions button.ui-button {
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--ks-ink) !important;
  background-image: none !important;
  color: var(--ks-beige) !important;
  font-family: var(--ks-body) !important;
  font-size: 12px !important;
  text-transform: none;
}
body.ksnewdesign #cartqc .ui-button:hover,
body.ksnewdesign #productoptions button.ui-button:hover { background: #000 !important; }
body.ksnewdesign #cartqc .ui-button .ui-button-text { color: var(--ks-beige) !important; }

/* De turkise pilene og ikonene rundt bildet */
body.ksnewdesign #cartqc .bxsl { background: var(--ks-beige) !important; }

/* --- Valgene som rader i høyrespalta (Figma 94:7629 flg.) ---------------
   Radene flyttes hit av ext/newdesign/produktside.js. Innholdet er de
   samme skjemafeltene som før, bare flyttet. */
.ksnd-pinfo__rows { margin-top: 26px; border-top: 1px solid #D9D3CB; }
.ksnd-pinfo__row { border-bottom: 1px solid #D9D3CB; }
body.ksnewdesign .ksnd-pinfo__row > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px 16px 0;
  font-family: var(--ks-body);
  font-weight: 500;
  /* Rammen har 20px her, men det ble for stort på sida — satt ned etter
     ønske. Endres dette tilbake, husk at rammen sier 20/20. */
  font-size: 17px;
  line-height: 20px;
  color: var(--ks-ink);
  cursor: pointer;
  list-style: none;
}
.ksnd-pinfo__row > summary::-webkit-details-marker { display: none; }
/* Ikon foran navnet, så man ser hva raden gjelder uten å åpne den */
body.ksnewdesign .ksnd-pinfo__rowicon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: .75;
}
body.ksnewdesign .ksnd-pinfo__rowlabel { flex: 0 0 auto; }
body.ksnewdesign .ksnd-pinfo__rowvalue { flex: 1 1 auto; }
/* Haken vises bare når raden er utfylt — et valg er tatt, eller det er
   skrevet noe. Den står helt til høyre, foran vinkelen. */
body.ksnewdesign .ksnd-pinfo__rowtick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  visibility: hidden;
}
body.ksnewdesign .ksnd-pinfo__row.is-utfylt .ksnd-pinfo__rowtick { visibility: visible; }
/* Rader som ikke er fylt ut ennå står litt lysere */
body.ksnewdesign .ksnd-pinfo__row:not(.is-utfylt) > summary .ksnd-pinfo__rowicon { opacity: .4; }
/* Vinkelen til høyre, som peker ned når raden er åpen */
.ksnd-pinfo__row > summary::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ks-ink);
  border-bottom: 1.5px solid var(--ks-ink);
  transform: rotate(-45deg);
  transition: transform .18s;
}
.ksnd-pinfo__row[open] > summary::after { transform: rotate(45deg); margin-top: -2px; }
/* Bildevalgene — konvolutt, skruefarge, malje og alle andre som er satt opp
   med bilde. Markupen er den samme overalt: en boks per alternativ med
   klassen imgradiosellyr_<id>, med bildet i en lenke og radioknappen med
   navnet under. Alt av mål og farger står i style-attributt på elementene,
   så det må oppheves med !important her.

   Kortet er selve bildelenka: hvit, tynn ramme, avrundet. Valgt alternativ
   får ramme i lenkefargen. Radioknappen og navnet står under kortet, ikke
   inni. */
body.ksnewdesign .ksnd-pinfo__rowbody div:has(> [class*="imgradiosellyr_"]) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}
body.ksnewdesign [class*="imgradiosellyr_"] {
  /* Hele kortet velger varianten, se kortErKnapp() i produktside.js */
  cursor: pointer;
  float: none !important;
  display: block !important;
  width: calc((100% - 32px) / 3) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
}
body.ksnewdesign [class*="imgradiosellyr_"] > br { display: none; }

body.ksnewdesign [class*="imgradiosellyr_"] > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 14px;
  border: 1px solid #D9D3CB;
  border-radius: 10px;
  background: var(--ks-white);
  transition: border-color .15s, box-shadow .15s;
}
body.ksnewdesign [class*="imgradiosellyr_"] > a img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  border: 0 !important;
}
body.ksnewdesign [class*="imgradiosellyr_"]:has(input:checked) > a {
  border-color: var(--ks-link);
  box-shadow: 0 0 0 1px var(--ks-link);
}
body.ksnewdesign [class*="imgradiosellyr_"] > a:hover { border-color: var(--ks-ink); }

/* Navnet under kortet. Den gamle grå bakgrunnen står i style-attributt. */
body.ksnewdesign [class*="imgradiosellyr_"] > div {
  background: none !important;
  margin-top: 12px;
  font-family: var(--ks-body);
  font-size: 15px;
  line-height: 20px;
  color: var(--ks-ink);
  cursor: pointer;
}
body.ksnewdesign [class*="imgradiosellyr_"] small { font-size: 15px; }
body.ksnewdesign [class*="imgradiosellyr_"] input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 0 0 6px !important;
  accent-color: var(--ks-link);
  cursor: pointer;
}

/* Valg uten bilde — individualisering, papirtype og liknende. Karusellen
   som viste ett alternativ om gangen er byttet med en liste der alle står
   samtidig, se valgSomListe() i produktside.js. Karusellen ligger igjen
   uten høyde: den er det som utløser prisregninga. */
.ksnd-valg__karusell { height: 0; overflow: hidden; }
.ksnd-valg { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
body.ksnewdesign .ksnd-valg__rad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--ks-ink);
  cursor: pointer;
}
body.ksnewdesign .ksnd-valg__rad:hover { background: #F7F4F1; }
body.ksnewdesign .ksnd-valg__rad.is-on {
  border-color: var(--ks-link);
  background: #FBF9F7;
}
body.ksnewdesign .ksnd-valg__rad input[type="radio"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0 !important;
  accent-color: var(--ks-link);
  cursor: pointer;
}
body.ksnewdesign .ksnd-valg__navn { flex: 1 1 auto; }
body.ksnewdesign .ksnd-valg__pris {
  flex: 0 0 auto;
  color: var(--ks-mulvarp);
  font-size: 14px;
  white-space: nowrap;
}
body.ksnewdesign .ksnd-valg__bilde {
  flex: 0 0 auto;
  width: 48px;
  height: auto;
  border: 1px solid #D9D3CB;
  border-radius: 6px;
}
/* Papirtypene som bildekort, samme utseende som konvolutt og skruefarge:
   hvitt kvadratisk kort med tynn ramme, radioknapp og navn under. Bildet
   hentes fra infosenteret, se papirbilde() i produktside.js. */
.ksnd-valg--kort {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}
body.ksnewdesign .ksnd-valgkort {
  display: block;
  width: calc((100% - 32px) / 3);
  text-align: center;
  font-family: var(--ks-body);
  font-size: 15px;
  line-height: 20px;
  color: var(--ks-ink);
  cursor: pointer;
}
body.ksnewdesign .ksnd-valgkort__bilde {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #D9D3CB;
  border-radius: 10px;
  background: var(--ks-white);
  transition: border-color .15s, box-shadow .15s;
}
body.ksnewdesign .ksnd-valgkort__bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.ksnewdesign .ksnd-valgkort.is-on .ksnd-valgkort__bilde {
  border-color: var(--ks-link);
  box-shadow: 0 0 0 1px var(--ks-link);
}
body.ksnewdesign .ksnd-valgkort:hover .ksnd-valgkort__bilde { border-color: var(--ks-ink); }
body.ksnewdesign .ksnd-valgkort input[type="radio"] {
  display: block;
  width: 14px;
  height: 14px;
  margin: 12px auto 6px !important;
  accent-color: var(--ks-link);
  cursor: pointer;
}
body.ksnewdesign .ksnd-valgkort__navn { display: block; }
body.ksnewdesign .ksnd-valgkort .ksnd-valg__pris { display: block; }

/* Forklaringa til individualiseringa flyter til høyre med -60px toppmarg,
   beregnet for karusellen. Den la seg oppå lista, og settes derfor under. */
body.ksnewdesign .indie-explanation {
  float: none !important;
  width: auto !important;
  margin: 14px 0 0 !important;
  padding: 12px 14px;
  border-radius: 10px;
  background: #F7F4F1;
  font-family: var(--ks-body);
  font-size: 13px;
  line-height: 19px;
  color: var(--ks-ink);
}

.ksnd-pinfo__rowbody { padding-bottom: 18px; }
.ksnd-pinfo__rowbody .optioncontainer { width: 100% !important; }
/* Seksjonene har grå bunnfarge fra det gamle temaet. Kortene skal stå på
   hvitt, som resten av høyrespalta. */
body.ksnewdesign .ksnd-pinfo__rowbody .optioncontainer { background: none !important; }
/* Egenskaper som er låst til én verdi blir liggende igjen i bestillingsdelen
   med bare et skjult felt i seg. Med grå bunn fra det gamle temaet ble de en
   grå stripe under produktet. Feltene sendes med skjemaet selv om seksjonen
   er skjult — det er bare disabled som holder dem utenfor. */
body.ksnewdesign .ksnd-skjultvalg { display: none !important; }

/* Antall, pris og kjøpsknapp (Figma 94:7662 og 94:7667) */
/* display:flow-root slutter rundt det som flyter inni. Uten det tok boksen
   ingen høyde, og FAQ-boksen la seg oppå. */
.ksnd-pinfo__buy { margin-top: 26px; display: flow-root; }
.ksnd-pinfo__buy #pricecalculatorlyrlower { float: none !important; width: 100% !important; display: flow-root; }
.ksnd-pinfo__buy #prodinfo_lqtycalc { float: none !important; }

/* Fanen med tilpassinga under (Figma 94:7649) */
.ksnd-pinfo__tabs { margin-top: 60px; }
.ksnd-pinfo__tablist { display: flex; gap: 60px; border-bottom: 1px solid #D9D3CB; }
body.ksnewdesign .ksnd-pinfo__tab {
  border: 0 !important;
  border-bottom: 1px solid var(--ks-ink) !important;
  background: none !important;
  padding: 0 0 12px !important;
  margin: 0 0 -1px !important;
  font-family: var(--ks-display) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 1.2;
  color: var(--ks-ink) !important;
  cursor: default;
}
.ksnd-pinfo__panel { padding-top: 26px; }
body.ksnewdesign .ksnd-pinfo__tab { opacity: .55; transition: opacity .15s; }
body.ksnewdesign .ksnd-pinfo__tab.is-on { opacity: 1; cursor: default; }
body.ksnewdesign .ksnd-pinfo__tab:not(.is-on) { border-bottom-color: transparent !important; cursor: pointer; }
.ksnd-pinfo__tablist { justify-content: space-between; }

/* Etikett og verdi i radene (Figma 94:7632: etiketten grå, valget svart) */
.ksnd-pinfo__text {
  max-width: 724px;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
}
/* Pristabellen ligger skjult bak «Vis pristabell». Kopien under fanen
   «Pris og antall» skal stå åpen. */
body.ksnewdesign .ksnd-pinfo__panel .ksnd-pinfo__pristabell { display: block !important; }

/* «Fra kr … pr. stk. (ved 100)» og «Vis pristabell» under kjøpsraden, som i
   det gamle designet (F2). Markupen er den gamle med innebygde stiler. */
body.ksnewdesign .ksnd-pinfo__fra { margin: 18px 0 0 !important; font-family: var(--ks-body); color: var(--ks-ink); }
body.ksnewdesign .ksnd-pinfo__fra > b { font-size: 16px !important; font-weight: 600; }
body.ksnewdesign .ksnd-pinfo__fra > b span { font-size: 13px !important; font-weight: 400; color: #8a8580 !important; }
body.ksnewdesign .ksnd-pinfo__fra > a {
  font-size: 13px; color: var(--ks-ink); text-decoration: underline; text-underline-offset: 3px;
}
body.ksnewdesign .ksnd-pinfo__fra #fullpricetable { float: none !important; margin: 8px 0 0 !important; font-size: 13px; }
/* Tabellen kommer fra den gamle malen: en ytre tabell med align=right rundt
   en indre på 90px, og en tom midtcelle i alle rader unntatt den siste. */
body.ksnewdesign .ksnd-pinfo__fra #fullpricetable table,
body.ksnewdesign .ksnd-pinfo__pristabell table { float: none; width: auto !important; margin: 0; border-collapse: collapse; }
body.ksnewdesign .ksnd-pinfo__fra #fullpricetable td,
body.ksnewdesign .ksnd-pinfo__pristabell td { padding: 0 !important; border: 0; }
body.ksnewdesign .ksnd-pinfo__fra #fullpricetable .infoBoxContents,
body.ksnewdesign .ksnd-pinfo__pristabell .infoBoxContents { padding: 4px 32px 4px 0 !important; border-bottom: 1px solid #ebe6df; font-size: 13px; text-align: left; white-space: nowrap; }
body.ksnewdesign .ksnd-pinfo__fra #fullpricetable .infoBoxContents:last-child,
body.ksnewdesign .ksnd-pinfo__pristabell .infoBoxContents:last-child { padding-right: 0 !important; text-align: right; }
body.ksnewdesign .ksnd-pinfo__fra #fullpricetable .infoBoxContents:empty,
body.ksnewdesign .ksnd-pinfo__pristabell .infoBoxContents:empty { display: none; }

/* «Format: 105x148 mm» over radene */
.ksnd-pinfo__format {
  margin: 18px 0 0;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ks-ink);
}
.ksnd-pinfo__format b { font-weight: 700; }

/* Kjøpsraden (Figma 94:7662 og 94:7665): totalpris til venstre, antall og
   knapp til høyre. Feltene er kalkulatorens egne, bare stylet som tekst. */
/* «Personlig tilpasning» med format og leveringstid, flyttet inn i
   Individualisering-raden. Tabellene er gamle og har egne mål; her holder
   det å gi dem lufta og skriftstørrelsen fra det nye designet. */
.ksnd-pinfo__note { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E6E2DD; }
body.ksnewdesign .ksnd-pinfo__note table { margin: 0 0 8px !important; width: 100% !important; }
body.ksnewdesign .ksnd-pinfo__note td {
  padding: 0 0 4px !important;
  font-family: var(--ks-body) !important;
  font-size: 13px !important;
  line-height: 19px !important;
  color: var(--ks-ink) !important;
}
body.ksnewdesign .ksnd-pinfo__note small { font-size: 13px; }
body.ksnewdesign .ksnd-pinfo__note b { font-weight: 700; font-size: 14px; }
body.ksnewdesign .ksnd-pinfo__note img { width: 14px; height: auto; margin-right: 8px; }

/* Bildevisninga (Figma 94:7614, 94:7616-7618, 94:7619 og 94:7621).
   Hovedbildet er 603x603 — hele spaltebredden, kvadratisk. Under står tre
   miniatyrer på 185x185 med 24px mellom seg, som til sammen blir de samme
   603. Pilene er tynne mørke sjevroner inne i hovedbildet, ikke turkise
   knapper utenfor. Splide skriver bredden på miniatyrene selv; her settes
   bare høyden, så de holder seg kvadratiske uansett spaltebredde. */
body.ksnewdesign #fullimageslider .splide__track { border-radius: 0; }
body.ksnewdesign #thumbimageslider { margin-top: 24px !important; }
/* Splide skriver bare mellomrommet ved perPage og overlater bredden til
   css — temaets splide-css gir den ikke, så miniatyrene ble 2px. Den siste
   sin høyremarg faller utenfor sporet, så tre bilder og to synlige
   mellomrom fyller spalta nøyaktig. */
body.ksnewdesign #thumbimageslider .splide__slide {
  width: calc((100% - 48px) / 3) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
}
/* Sporet og lista må ha full bredde. Uten faste punktbredder på bildene
   krymper de til innholdet, og da har prosentregninga over ingenting å
   regne mot — alt endte på 10px. */
body.ksnewdesign #thumbimageslider .splide__track,
body.ksnewdesign #thumbimageslider .splide__list {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* Miniatyren som vises i hovedbildet var merket med turkis ramme fra det
   gamle temaet. Rammen viser ingen merking i det hele tatt, men uten noe
   vet man ikke hvilket bilde man ser på, så den er byttet til en tynn
   strek i gråsvart. */
body.ksnewdesign #thumbimageslider .splide__slide {
  border: 1px solid transparent !important;
}
body.ksnewdesign #thumbimageslider .splide__slide.is-active {
  border-color: var(--ks-ink) !important;
}

/* Pilene er den samme vinkelen som står til høyre i valgradene: to kanter
   på 1.5px i gråsvart, dreid 45 grader. Splide har sin egen svg inni
   knappen — den skjules, og vinkelen tegnes på nytt her. */
body.ksnewdesign #fullimageslider .splide__arrow,
body.ksnewdesign #thumbimageslider .splide__arrow {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  opacity: 1;
  transition: opacity .15s;
}
body.ksnewdesign #fullimageslider .splide__arrow svg,
body.ksnewdesign #thumbimageslider .splide__arrow svg { display: none !important; }
body.ksnewdesign #fullimageslider .splide__arrow::before,
body.ksnewdesign #thumbimageslider .splide__arrow::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--ks-ink);
  border-bottom: 1.5px solid var(--ks-ink);
}
body.ksnewdesign #fullimageslider .splide__arrow--prev,
body.ksnewdesign #thumbimageslider .splide__arrow--prev,
body.ksnewdesign #fullimageslider .splide__arrow--next,
body.ksnewdesign #thumbimageslider .splide__arrow--next { transform: translateY(-50%); }
body.ksnewdesign .splide__arrow--next::before { transform: translate(-65%, -50%) rotate(-45deg); }
body.ksnewdesign .splide__arrow--prev::before { transform: translate(-35%, -50%) rotate(135deg); }
/* Rammen har pilene 28px innenfor bildekanten, midtstilt i høyden */
body.ksnewdesign #fullimageslider .splide__arrow--prev { left: 28px !important; }
body.ksnewdesign #fullimageslider .splide__arrow--next { right: 28px !important; }
body.ksnewdesign .splide__arrow:hover { opacity: .55; }
body.ksnewdesign .splide__arrow:disabled { opacity: .2; }

/* Raden under miniatyrene (Figma 94:7668, 94:7672 og 94:7673): Pinterest
   og favoritthjertet, begge 20px i mulvarp, 40px fra hverandre og 36px
   under bildene. Teksten «Lagret som favoritt» er 12px i samme farge. */
.ksnd-pinfo__share {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 36px;
  clear: both;
}
body.ksnewdesign .ksnd-pinfo__share > * { float: none !important; margin: 0 !important; }
/* Uten samtykke til informasjonskapsler tegnes verken deleknappen eller
   hjertet. Da skal ikke raden legge igjen luft heller. */
body.ksnewdesign .ksnd-pinfo__share:not(:has(img)) { display: none; }
body.ksnewdesign .ksnd-pinfo__pin a { display: block; line-height: 0; opacity: 1; transition: opacity .15s; }
body.ksnewdesign .ksnd-pinfo__pin a:hover { opacity: .6; }
body.ksnewdesign .ksnd-pinfo__pin img { width: 26px; height: 26px; }

/* Hjertet tegnes på nytt av sida hver gang man slår favoritten av og på,
   så det kan ikke byttes én gang i js. Bildet byttes derfor ut fra css,
   valgt på filnavnet, slik at det holder seg gjennom alle omtegningene. */
body.ksnewdesign #favlyr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto !important;
  color: #AF9778 !important;
  font-family: var(--ks-body);
  font-size: 12px;
  line-height: 20px;
}
body.ksnewdesign #favlyr img.custicon {
  width: 27px !important;
  height: 25px !important;
  border: 0 !important;
  cursor: pointer;
}
body.ksnewdesign #favlyr img[src*="fav_off"] { content: url('icons/hjerte-mulvarp.svg'); }
body.ksnewdesign #favlyr img[src*="fav_on"]  { content: url('icons/hjerte-fylt.svg'); }
/* Teksten hører til når produktet faktisk er lagret */
body.ksnewdesign #favlyr:has(img[src*="fav_on"])::after { content: 'Lagret som favoritt'; }

/* Kjøpsraden. Mål fra rammen: «Totalt: kr 480,- inkl. mva» 24px Karla
   Medium svart på x=730/y=681, «(kr 48,- pr. stk.)» 16px på y=717,
   telleren 89x37 på y=674 og knappen 196x37 på y=731 — begge langs
   høyre kant. Telleren står 7px høyere enn totalsummen. */
.ksnd-pinfo__buy { display: flow-root; }
.ksnd-pinfo__buyrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 26px 0 8px;
}
.ksnd-pinfo__total > div { display: block; }
.ksnd-pinfo__totalsum {
  font-family: var(--ks-body);
  font-weight: 500;
  /* Rammen har 24px. Satt ned etter ønske — hele kjøpsraden er skalert
     ned omtrent 15 % fra målene i rammen. */
  font-size: 20px;
  line-height: 28px;
  color: #000;
}
.ksnd-pinfo__totalitem {
  font-family: var(--ks-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  margin-top: 6px;
}
/* Prisfeltene er input-elementer i kalkulatoren og skal se ut som tekst.
   De flyter og har fast bredde fra gammel css; bredden settes i js etter
   hvor mange tegn verdien har, ellers blir det hull i setninga. */
body.ksnewdesign .ksnd-pinfo__total input,
body.ksnewdesign .ksnd-pinfo__qty input {
  float: none !important;
  display: inline !important;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: inherit !important;
  color: inherit !important;
}
body.ksnewdesign .ksnd-pinfo__total input { text-align: left !important; pointer-events: none; }

/* Telleren og knappen står under hverandre langs høyre kant, 20px fra
   hverandre. Negativ toppmarg gir de 7px rammen har. */
.ksnd-pinfo__buyside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin-top: -6px;
}

/* Telleren «- 10 +»: 1px svart ramme, radius 20, 7px/17px innvendig */
.ksnd-pinfo__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 5px + 21px linje + 5px + 2px ramme = 33 */
  padding: 5px 14px;
  border: 1px solid #000;
  border-radius: 20px;
}
body.ksnewdesign .ksnd-pinfo__qty input {
  font-family: var(--ks-body) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 21px !important;
  color: #000 !important;
  text-align: center !important;
}
body.ksnewdesign button.ksnd-pinfo__step {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--ks-body) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 21px !important;
  color: #000 !important;
  cursor: pointer;
}
body.ksnewdesign button.ksnd-pinfo__step:hover { color: var(--ks-mulvarp) !important; }

/* Knappen: #ddd4cb, radius 20, 7px/17px, Karla 20px svart, uten ikon */
body.ksnewdesign .ksnd-pinfo__buyside #calcbuybut {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 6px 15px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #ddd4cb !important;
  background-image: none !important;
  color: #000 !important;
  font-family: var(--ks-body) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 21px !important;
  text-transform: none;
  white-space: nowrap;
}
body.ksnewdesign .ksnd-pinfo__buyside #calcbuybut:hover { background: #d2c8bd !important; }
body.ksnewdesign .ksnd-pinfo__buyside #calcbuybut .ui-button-text { padding: 0 !important; color: #000 !important; }
/* Den gamle etikettraden «Antall / Stk. pris / Total» er overflødig nå */
body.ksnewdesign .ksnd-pinfo__buy #prodinfo_lqtycalc > span:not(.ksnd-pinfo__buyrow) { display: none; }

.ksnd-pinfo__rowlabel { color: var(--ks-ink); }
.ksnd-pinfo__rowvalue { color: #000; }

/* Rammen har ikke stegbjelka. Matchende produkter vises som i det gamle
   designet (ønsket etter testingen, F3) — stilen står under «Matchende produkter». */
body.ksnewdesign #productoptions .ksfullheader { display: none; }

/* «Ofte stilte spørsmål» i høyrespalta (Figma 94:7674) */
.ksnd-pinfo__faq {
  margin-top: 34px;
  padding: 19px 37px 24px;
  border: 1px solid var(--ks-ink);
  border-radius: 10px;
}
body.ksnewdesign .ksnd-pinfo__faq h2 {
  border: 0; padding: 0;
  margin: 0 0 18px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ks-ink) !important;
  text-transform: none;
}
body.ksnewdesign .ksnd-pinfo__faq a {
  position: relative;
  display: block;
  padding: 0 0 0 25px;
  margin-bottom: 15px;
  font-family: var(--ks-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-ink);
  text-decoration: none;
}
body.ksnewdesign .ksnd-pinfo__faq a:last-child { margin-bottom: 0; }
body.ksnewdesign .ksnd-pinfo__faq a:hover { text-decoration: underline; }
.ksnd-pinfo__faq a::before {
  content: '';
  position: absolute;
  left: 2px; top: 6px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--ks-ink);
  border-bottom: 1.5px solid var(--ks-ink);
  transform: rotate(-45deg);
}

/* ==========================================================================
   INNLOGGING OG REGISTRERING
   Figma "Logg inn" (54:1008), "Registrer privatkonto" (54:1027) og
   "Registrer bedriftskonto" (54:1069).

   Feltene i Figma er 424x34 piller med 20px radius og plassholder i stedet
   for ledetekst over. Loddrett avstand er 57px fra feltstart til feltstart.
   ========================================================================== */
.ksnd-auth {
  width: var(--ks-wrap);
  max-width: calc(100% - 2 * var(--ks-gutter));
  margin: 0 auto;
  padding: 21px 0 76px;
  font-family: var(--ks-body);
  color: var(--ks-ink);
}

/* Innlogging: skjema til venstre, «Registrer ny konto» til høyre. Figma har
   venstrekant 307 og høyrekant 1133 i en 1440-ramme — altså en sentrert blokk
   på 826px, ikke full innholdsbredde. */
.ksnd-auth__cols { display: flex; justify-content: center; gap: 176px; }
.ksnd-auth__col--form { width: 424px; flex: 0 1 424px; min-width: 0; }
.ksnd-auth__col--choose { width: 226px; flex: 0 0 226px; padding-top: 27px; }
.ksnd-auth__single { width: 424px; max-width: 100%; margin: 0 auto; }

/* Bedriftssida har to like spalter à 424px med 148px mellomrom */
.ksnd-auth__cols--firma { gap: 148px; align-items: flex-start; }
.ksnd-auth__cols--firma .ksnd-auth__col { width: 424px; flex: 0 1 424px; min-width: 0; }

.ksnd-auth__kicker { margin: 0; font-size: 16px; line-height: 30px; }
.ksnd-auth__title {
  border: 0;                 /* det gamle temaet gir h1/h2 en border-top */
  padding: 0;
  margin: 0 0 24px;
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ks-ink);
}
.ksnd-auth__kicker + .ksnd-auth__title { margin-top: 2px; }
.ksnd-auth__sub {
  border: 0; padding: 0; margin: 26px 0 8px;
  font-family: var(--ks-body); font-weight: 400; font-size: 14px; color: var(--ks-ink);
}
.ksnd-auth__intro {
  max-width: 862px; margin: 0 auto 46px; text-align: center;
  font-size: 14px; line-height: 21px;
}
.ksnd-auth__note { margin: -14px 0 20px; font-size: 14px; line-height: 21px; }
body.ksnewdesign .ksnd-auth__intro a,
body.ksnewdesign .ksnd-auth__note a { color: var(--ks-ink); font-weight: 700; }

/* Forklaringa over skjemaet på «Glemt passord» */
.ksnd-auth__lead { margin: -8px 0 22px; font-size: 14px; line-height: 22px; color: var(--ks-mulvarp); }
.ksnd-auth__err { margin-bottom: 12px; font-size: 13px; color: var(--ks-red); }
.ksnd-auth__err:empty { margin: 0; }
.ksnd-auth__orglist { margin: -12px 0 20px; font-size: 13px; }
.ksnd-auth__secadr { margin-top: 12px; }

/* Knapperad: «Logg inn» til venstre, glemt-passord på samme linje til høyre */
.ksnd-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.ksnd-auth__forgot { margin: 0; font-size: 14px; line-height: 30px; }
body.ksnewdesign .ksnd-auth__forgot a { color: var(--ks-ink); font-weight: 700; text-decoration: underline; }
.ksnd-auth__alt { margin: 26px 0 0; font-size: 14px; }
body.ksnewdesign .ksnd-auth__alt a { color: var(--ks-ink); font-weight: 700; text-decoration: underline; }

/* --- Felt --------------------------------------------------------------- */
.ksnd-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  margin-bottom: 23px;        /* 57px fra feltstart til feltstart */
  padding: 0 16px;
  border: 1px solid var(--ks-ink);
  border-radius: 20px;
  background: var(--ks-white);
  box-sizing: border-box;
}
/* Det gamle temaet gir input/select egne rammer, bakgrunner og høyder med
   høy spesifisitet — pilla er ramma her, feltet inni skal være helt nakent. */
body.ksnewdesign .ksnd-field input,
body.ksnewdesign .ksnd-field select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--ks-body);
  font-size: 14px;
  line-height: 30px;
  color: var(--ks-ink);
  outline: none;
}
body.ksnewdesign .ksnd-field input::placeholder { color: var(--ks-ink); opacity: 1; }
.ksnd-field:focus-within { border-color: #000; box-shadow: 0 0 0 1px #000; }

.ksnd-field__pair { display: flex; gap: 25px; }
.ksnd-field--zip  { width: 187px; flex: 0 0 187px; }
.ksnd-field--city { width: 212px; flex: 1 1 212px; }

/* Landkoden er låst og skal ikke ta plass fra selve nummeret */
body.ksnewdesign .ksnd-field__lcode {
  flex: 0 0 30px !important; width: 30px !important; color: var(--ks-mulvarp);
}
.ksnd-field__mbwrap { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }

/* Øyeknappen i passordfeltet */
.ksnd-field__eye {
  flex: 0 0 21px; width: 21px; height: 21px; padding: 0;
  border: 0; background: none; cursor: pointer; line-height: 0;
}
body.ksnewdesign .ksnd-field__eye img { width: 21px; height: 21px; max-width: none; display: block; }

/* Nedtrekket: egen pil, den innebygde skjules */
.ksnd-field--select { position: relative; padding-right: 12px; }
.ksnd-field__prefix { flex: 0 0 auto; font-size: 14px; color: var(--ks-ink); }
body.ksnewdesign .ksnd-field--select select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; font-style: italic;
}
body.ksnewdesign .ksnd-field__caret { flex: 0 0 24px; width: 24px; height: 24px; max-width: none; display: block; }

.ksnd-field__warn {
  display: block; margin: -18px 0 12px; font-size: 12px; line-height: 16px; color: var(--ks-red);
}
.ksnd-field__warn:empty { display: none; }

/* --- Avkryssingsbokser -------------------------------------------------- */
.ksnd-checks { margin: 4px 0 25px; }
.ksnd-check {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 10px; font-size: 14px; line-height: 20px; cursor: pointer;
}
body.ksnewdesign .ksnd-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0 !important; padding: 0;
  border: 1px solid var(--ks-ink); border-radius: 4px; background: var(--ks-white);
  cursor: pointer;
}
body.ksnewdesign .ksnd-check input[type="checkbox"]:checked {
  background: var(--ks-ink) url(icons/tick.svg) center/14px 14px no-repeat;
  border-color: var(--ks-ink);
}
body.ksnewdesign .ksnd-check a { color: var(--ks-ink); text-decoration: underline; }

/* --- Knapper i skjemaer -------------------------------------------------
   MERK: het .ksnd-btn før, men det navnet var allerede i bruk av hero-knappen
   på forsida og CTA-en på showrom — de er hvite. Denne regelen kom senere i
   fila og gjorde dem mørke. Eget navn, så de ikke kolliderer igjen. */
body.ksnewdesign .ksnd-formbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 2px 17px;
  border: 0 !important; border-radius: 20px;
  background: var(--ks-ink) !important;
  font-family: var(--ks-body); font-size: 12px !important; line-height: 30px;
  color: var(--ks-beige) !important; text-decoration: none; text-transform: none;
  cursor: pointer; transition: background .15s;
}
body.ksnewdesign .ksnd-formbtn:hover { background: #000 !important; }
body.ksnewdesign .ksnd-formbtn--beige {
  background: var(--ks-beige) !important; color: #000 !important;
}
body.ksnewdesign .ksnd-formbtn--beige:hover { background: #D8CEC2 !important; }
body.ksnewdesign .ksnd-formbtn--wide {
  width: 100%; min-height: 44px; padding: 7px 17px; margin-bottom: 22px; text-transform: uppercase;
}

/* ==========================================================================
   MIN KONTO
   Figma "Min konto (min profil)" (54:1516) og "(passord)" (54:1615).
   Sidemeny til venstre med skillelinje, innholdsspalter à 368px til høyre.
   ========================================================================== */
.ksnd-acc {
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* Foreldren (#kortshop_contentcategorylayer) setter allerede innholdsbredden
     og margen inn fra vinduskanten. Satte vi dem her også, ble marga lagt på to
     ganger: spalta havnet 70px for langt inn og ble 107px for smal, så kortene
     på fakturasida ikke nådde Figmas 286px. */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 21px 0 80px;
  font-family: var(--ks-body);
  color: var(--ks-ink);
}

/* --- Sidemenyen --------------------------------------------------------- */
.ksnd-accnav {
  flex: 0 0 254px;
  width: 254px;
  padding-right: 36px;
  border-right: 1px solid #D9D3CB;   /* Line 5 i Figma */
  box-sizing: border-box;
}
.ksnd-accnav__title {
  border: 0; padding: 0; margin: 0 0 10px;
  font-family: var(--ks-display); font-weight: 400; font-size: 30px;
  line-height: 1.15; color: var(--ks-ink);
}
.ksnd-accnav__hello { margin: 0 0 30px; font-size: 16px; line-height: 20px; }
.ksnd-accnav__list { list-style: none; margin: 0; padding: 0; }
.ksnd-accnav__item { margin: 0 0 21px; }
body.ksnewdesign .ksnd-accnav__item a,
body.ksnewdesign .ksnd-accnav__item span {
  display: flex; align-items: center; gap: 28px;
  font-size: 16px; line-height: 21px; color: var(--ks-ink); text-decoration: none;
}
body.ksnewdesign .ksnd-accnav__item img {
  flex: 0 0 21px; width: 21px; height: 21px; max-width: none; display: block;
}
body.ksnewdesign .ksnd-accnav__item a:hover { text-decoration: underline; }
body.ksnewdesign .ksnd-accnav__item.is-on a { font-weight: 700; }
/* «Aktive rabattkoder» har ingen side ennå og er derfor ikke en lenke */
body.ksnewdesign .ksnd-accnav__item span { cursor: default; opacity: .55; }

/* --- Innholdet ---------------------------------------------------------- */
.ksnd-acc__main { flex: 1 1 auto; min-width: 0; display: flex; gap: 49px; padding-left: 129px; }
.ksnd-acc__col { flex: 0 1 368px; width: 368px; min-width: 0; }
.ksnd-acc__title {
  border: 0; padding: 0; margin: 0 0 10px;
  font-family: var(--ks-display); font-weight: 400; font-size: 30px;
  line-height: 1.15; color: var(--ks-ink);
}
.ksnd-acc__title--spaced { margin-top: 60px; }
.ksnd-acc__desc { margin: 0 0 24px; font-size: 14px; line-height: 20px; font-style: italic; }

/* Felt med ledetekst over pilla — Figma bruker det på kontosidene, mens
   registreringssidene har plassholder inni. Derfor en egen gruppe. */
.ksnd-fieldgrp { margin-bottom: 17px; }
.ksnd-fieldgrp > label {
  display: block; margin: 0 0 5px 18px;
  font-size: 14px; line-height: 20px; color: var(--ks-ink);
}
.ksnd-fieldgrp > label em { font-style: italic; font-size: 13px; }
.ksnd-fieldgrp .ksnd-field { margin-bottom: 0; }
.ksnd-fieldgrp--zip  { flex: 0 0 129px; width: 129px; }   /* Figma: 129 + 190 */
.ksnd-fieldgrp--city { flex: 1 1 190px; min-width: 0; }
.ksnd-fieldgrp .ksnd-field__warn { margin: 4px 0 0 18px; }
.ksnd-checks--tight { margin: 2px 0 14px; }
/* Adressekortene ligger rett under hverandre i høyre spalte */
.ksnd-acc__col form + .ksnd-acc__title { margin-top: 60px; }

/* --- Merkedager og navnelister (Figma 61:3909 / 61:4674) ----------------
   Begge sidene har hjelpeteksten til venstre og to knapper til høyre på
   samme rad, og deretter ett kort per liste. Innholdet lastes med AJAX, så
   alt her er restyling av den gamle markupen. */
body.ksnewdesign #olistsphplayer,
body.ksnewdesign #cplistconflayer,
body.ksnewdesign #olsitexlayer { font-family: var(--ks-body); font-size: 14px; color: var(--ks-ink); }

/* Hjelpeteksten lå i en grå stripe */
body.ksnewdesign #olistsphplayer > span:first-child,
body.ksnewdesign .ksnd-acc__col > span[style*="background"] {
  display: block; background: none !important; padding: 0 !important;
  font-size: 14px; line-height: 20px; color: var(--ks-ink); max-width: 470px;
}

/* «Vis lister» / «Lag ny liste» — beige og mørk pille, høyrestilt */
body.ksnewdesign .ksnd-acc__col > .ui-button,
body.ksnewdesign #olistsshow, body.ksnewdesign #olistnew,
body.ksnewdesign #daylistnew, body.ksnewdesign #daylistsshow {
  min-height: 34px; padding: 2px 20px !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-ink) !important; background-image: none !important;
  font-family: var(--ks-body); font-size: 12px !important;
  color: var(--ks-beige) !important; cursor: pointer;
}
body.ksnewdesign #olistsshow, body.ksnewdesign #daylistsshow {
  background: var(--ks-beige) !important; color: #000 !important;
}
body.ksnewdesign #olistsshow .ui-button-text,
body.ksnewdesign #daylistsshow .ui-button-text { color: #000 !important; }
body.ksnewdesign #olistnew .ui-button-text,
body.ksnewdesign #daylistnew .ui-button-text { color: var(--ks-beige) !important; }
/* det gamle gronne pluss-ikonet horer ikke til designet */
body.ksnewdesign #olistnew img, body.ksnewdesign #daylistnew img,
body.ksnewdesign #olistsshow img, body.ksnewdesign #daylistsshow img { display: none; }
/* knappene til hoyre, hjelpeteksten flyter til venstre — som i Figma */
body.ksnewdesign #olist_navlayer { float: right; display: flex; gap: 12px; margin-bottom: 8px; }
/* hjelpeteksten laa i en graa tabellstripe */
body.ksnewdesign #olistsphplayer > table,
body.ksnewdesign #olistsphplayer > table td { background: none !important; font-size: 14px; line-height: 20px; }
/* «Vis merkedatoliste» er en vanlig lenke i den gamle koden, ikke en knapp */
body.ksnewdesign #olist_navlayer a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 2px 20px;
  border-radius: 20px; background: var(--ks-beige); color: #000 !important;
  font-size: 12px !important; font-weight: 400 !important; text-decoration: none;
}

/* Introteksten over knapperaden (Figma 61:3909) */
.ksnd-daysintro { max-width: 470px; font-size: 14px; line-height: 20px; }
.ksnd-daysintro p { margin: 0 0 14px; }
body.ksnewdesign .ksnd-daysintro a { color: var(--ks-ink); font-weight: 700; text-decoration: underline; }

/* OBS-notatet genereres av JS og var fett; Figma har det i kursiv */
body.ksnewdesign #olistsphplayer b,
body.ksnewdesign #cplistconflayer b {
  font-weight: 400; font-style: italic; font-size: 13px; line-height: 19px;
}
/* Notatet under kortet */
.ksnd-daysnote { margin: 12px 0 0; font-size: 13px; font-style: italic; line-height: 19px; }
/* --- Listekortet (Figma 61:3987) ---------------------------------------
   Kortet er 912x269 med avrundede hjørner, overskrift i store bokstaver med
   strek under, og per liste: navn, «Linjer: N», og tre 49x19-knapper med
   bare ikon. Innholdet genereres av online_lists_mfancybox.js. */
body.ksnewdesign #olistsphplayer > table {
  border: 1px solid var(--ks-ink) !important; border-radius: 8px;
  padding: 6px 22px 18px; box-sizing: border-box; width: 100%;
  /* Malen setter border-collapse:collapse i style-attributtet på tabellen.
     Inline vinner over stilarket, så hjørnene ble firkantede uansett hva
     som sto her. !important og border-spacing:0 gir Figmas avrunding. */
  border-collapse: separate !important; border-spacing: 0 !important;
}
/* OBS-teksten legger JS-en inn som rad to i kortet. Figma har den over
   kortet, i kursiv, og odays.php skriver den der nå — raden skjules. */
body.ksnewdesign .ksnd-acc--dager #olistsphplayer > table
  tr:has(> td > span[style*="font-weight:bold;font-size:12px"]) { display: none; }
/* Uten lister står kortet igjen med bare overskrifta. Figma 61:3909 viser
   ingen ramme i den tilstanden, så den tas bort til det finnes en liste. */
body.ksnewdesign .ksnd-acc--dager #olistsphplayer > table:not(:has(tr:nth-child(3))) {
  display: none;
}
/* OBS-avsnittet der Figma har det */
.ksnd-daysobs {
  max-width: 470px; margin: 0 0 14px;
  font-size: 13px; font-style: italic; line-height: 19px;
}
body.ksnewdesign .ksnd-daysobs a { color: var(--ks-ink); text-decoration: underline; }

/* --- Navnelister (Figma 61:3948 / 61:4674) ------------------------------
   Samme mønster som merkedager: hjelpeteksten står over kortet, til venstre
   for knappene, ikke inne i kortet slik JS-en legger den. */
.ksnd-listsdesc {
  /* Figma bryter teksten i to linjer; 520px gir samme brekk */
  max-width: 520px; margin: 0 0 14px;
  font-size: 14px; line-height: 20px; color: var(--ks-ink);
}
body.ksnewdesign .ksnd-acc--lister #olistsphplayer > table tr:has(> td.thd_olistfb) {
  display: none;
}
/* Uten lister blir kortet en tom ramme; Figma 61:3948 har ingen ramme da. */
body.ksnewdesign .ksnd-acc--lister #olistsphplayer > table:not(:has(tr:nth-child(2))) {
  display: none;
}
/* Malen avslutter hver liste med en rad som bare holder beholderen navnene
   utvides i. Den er tom til man klikker på listenavnet, men har strek og
   høyde. Raden kollapses mens beholderen er skjult — ikke display:none, for
   da mister JS-en stedet den skal utvide navnene inn i. */
body.ksnewdesign #olistsphplayer > table
  tr:has(> td > div[id^="olmemexp_"][style*="display:none"]) > td {
  height: 0; padding: 0 !important; line-height: 0;
  border-bottom: 0 !important;
}
/* Forstørrelsesglasset foran listenavnet er en gammel GIF og finnes ikke i
   Figma — der står navnet alene med hengelåsen etter seg. */
body.ksnewdesign #olistsphplayer img[src*="icons/preview"] { display: none !important; }
/* Overskrifta «Merkedaglister» */
body.ksnewdesign #olistsphplayer td.thd_olistfb { padding: 12px 0 10px !important; }
/* Bare korttittelen på merkedager skal være versaler. Nøyaktig samme klasse
   og posisjon holder HJELPETEKSTEN på navnelister, så det lar seg ikke skille
   i CSS — derfor modifikatorklassen på wrapperen. */
body.ksnewdesign .ksnd-acc--dager #olistsphplayer td.thd_olistfb > span:first-child {
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ks-ink);
}
/* strek under overskrifta, som Line 19 i Figma */
body.ksnewdesign #olistsphplayer tr:first-child td { border-bottom: 1px solid #D9D3CB; }
/* Listenavnet står i kursiv, ikke fet */
body.ksnewdesign #olistsphplayer [id^="dlistnmcontainer"],
body.ksnewdesign #olistsphplayer [id^="olistnmcontainer"] {
  font-size: 14px !important; font-weight: 400 !important; font-style: italic;
  color: var(--ks-ink);
}
body.ksnewdesign #olistsphplayer [id^="dlistlayer_"],
body.ksnewdesign #olistsphplayer [id^="olistlayer_"] {
  font-size: 13px; line-height: 19px; color: var(--ks-ink);
}
/* Linjetallet under navnet sto i fet av det gamle temaet */
body.ksnewdesign #olistsphplayer td[valign="top"] {
  padding: 14px 0 6px !important; font-weight: 400 !important;
  font-size: 14px; line-height: 20px;
}
/* Blyanten foran listenavnet er en grønn PNG fra det gamle settet */
body.ksnewdesign #olistsphplayer img[src*="olistpencil"] {
  content: url("/ext/newdesign/icons/list-edit.svg");
  width: 15px !important; height: 15px !important; margin-right: 4px;
}


/* Ett kort per liste (Figma 61:4674) */
body.ksnewdesign #olistsphplayer .olistline,
body.ksnewdesign #olistsphplayer > div[id^="olist_"] {
  border: 1px solid #D9D3CB; border-radius: 8px;
  padding: 16px 20px; margin-bottom: 14px; background: none !important;
}
body.ksnewdesign #olistsphplayer .oseta,
body.ksnewdesign #olistsphplayer .ui-button {
  min-height: 28px; padding: 2px 12px !important;
  border: 0 !important; border-radius: 16px !important;
  background: var(--ks-beige) !important; background-image: none !important;
  color: #000 !important;
}

/* MERK: denne blokka MÅ stå etter den generelle .ui-button-regelen over.
   Begge har spesifisitet (1,2,1), så rekkefølgen avgjør — står den før,
   nullstiller shorthand-en «background» ikonet igjen. */
/* Rediger / Kopier / Slett: beige piller med ikon og tekst.
   Figma har dem med bare ikon, men «Rediger» og «Kopier» får begge et
   blyantaktig ikon, og «Slett» er permanent — Emma valgte etiketter. */
body.ksnewdesign #olistsphplayer [id^="oedit_"],
body.ksnewdesign #olistsphplayer [id^="ocopy_"],
body.ksnewdesign #olistsphplayer [id^="odelete_"] {
  display: inline-flex; align-items: center;
  width: auto !important; height: auto !important; min-height: 30px !important;
  margin: 10px 10px 0 0 !important;
  padding: 2px 16px 2px 35px !important;
  border: 0 !important; border-radius: 15px !important;
  background: var(--ks-beige) 14px center/15px 15px no-repeat !important;
  font-family: var(--ks-body); font-size: 12px !important; font-weight: 400 !important;
  color: #000 !important; cursor: pointer; vertical-align: middle;
}
body.ksnewdesign #olistsphplayer [id^="oedit_"]   { background-image: url(icons/list-edit.svg) !important; }
body.ksnewdesign #olistsphplayer [id^="ocopy_"]   { background-image: url(icons/list-copy.svg) !important; }
body.ksnewdesign #olistsphplayer [id^="odelete_"] { background-image: url(icons/list-delete.svg) !important; }
body.ksnewdesign #olistsphplayer [id^="oedit_"] .ui-button-text,
body.ksnewdesign #olistsphplayer [id^="ocopy_"] .ui-button-text,
body.ksnewdesign #olistsphplayer [id^="odelete_"] .ui-button-text {
  padding: 0 !important; font-size: 12px !important; color: #000 !important;
}

/* --- Redigering av liste, inline i kortet (Figma 61:4100) ---------------
   «+» legger til en linje, «Lukk» avslutter. Radene er dato- og tekstfelt
   som piller. Alt bygges av online_lists_mfancybox.js. */
body.ksnewdesign [id^="dlistlayer_"] { font-size: 13px; line-height: 19px; }
/* pluss-tegnet: bare et tegn, ikke en knapp i ramme */
body.ksnewdesign a#dladdmrk, body.ksnewdesign a[id^="dladd"] {
  display: inline-block; width: auto !important; height: auto !important;
  padding: 0 !important; margin: 6px 0 2px !important;
  border: 0 !important; background: none !important;
  font-size: 20px !important; line-height: 1; color: var(--ks-ink) !important;
  text-decoration: none;
}
/* «Lukk» er en liten mørk pille */
body.ksnewdesign a#dlclosemrk, body.ksnewdesign a[id^="dlclose"] {
  display: inline-flex; align-items: center; min-height: 22px;
  padding: 2px 14px !important; margin-left: 12px;
  border-radius: 11px !important; background: var(--ks-ink) !important;
  font-size: 12px !important; font-weight: 400 !important;
  color: var(--ks-beige) !important; text-decoration: none;
}
/* dato- og tekstfeltene i hver rad */
body.ksnewdesign [id^="dlistlayer_"] input[type="text"],
body.ksnewdesign [id^="dlistaddmemberlyr_"] input[type="text"] {
  height: 30px !important; margin: 0 8px 8px 0 !important; padding: 0 14px !important;
  border: 1px solid var(--ks-ink) !important; border-radius: 15px !important;
  background: var(--ks-white) !important;
  font-family: var(--ks-body); font-size: 13px; color: var(--ks-ink);
}
/* Oppdater/slett i hver rad er grønne og røde PNG-er fra det gamle temaet.
   Figma har nøytrale ikoner, så de avfarges til GråSvart. */
body.ksnewdesign img[id^="updmrkdag"], body.ksnewdesign img[id^="delmrkdag"],
body.ksnewdesign img[id^="updmrk"], body.ksnewdesign img[id^="delmrk"] {
  width: 15px !important; height: 15px !important; margin: 0 4px !important;
  vertical-align: middle; filter: grayscale(1) brightness(.35);
}
/* «Lukk» hører sammen med pluss-tegnet. Den gamle koden setter
   margin-right:350px inline på plusset for å skyve dem fra hverandre. */
body.ksnewdesign [id^="dlistlayer_"] > span {
  float: none !important; display: inline-block; margin-right: 0 !important;
}
/* hintet over pluss-tegnet */
body.ksnewdesign [id^="dlistlayer_"] small {
  display: block; font-size: 11px; font-style: italic; color: var(--ks-mulvarp);
}

/* --- Popup: ny liste (Figma 61:4088 / 61:4065) --------------------------
   fancybox-innholdet er en naken div med <br>-er. Kortet, overskriftslinja
   og knappene bygges her. */
body.ksnewdesign #cplistconflayer.fancybox-content,
body.ksnewdesign #olistconflayer.fancybox-content {
  width: 565px !important; max-width: calc(100vw - 40px) !important;
  height: auto !important; min-height: 0 !important;
  padding: 0 24px 24px !important;
  border-radius: 12px !important; background: var(--ks-white) !important;
  font-family: var(--ks-body); color: var(--ks-ink);
}
/* Overskriftslinja med tynn strek under, som i Figma */
body.ksnewdesign #cplistconflayer > span:first-child,
body.ksnewdesign #olistconflayer > span:first-child {
  display: block; margin: 0 -24px 22px; padding: 16px 24px 12px;
  border-bottom: 1px solid #D9D3CB;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ks-ink);
}
/* de gamle <br>-ene gir for mye luft */
body.ksnewdesign #cplistconflayer > br,
body.ksnewdesign #olistconflayer > br { display: none; }
body.ksnewdesign #cplistconflayer input[type="text"],
body.ksnewdesign #olistconflayer input[type="text"] {
  display: block; width: 100%; height: 34px !important; margin: 0 0 20px !important;
  padding: 0 16px !important; box-sizing: border-box;
  border: 1px solid var(--ks-ink) !important; border-radius: 20px !important;
  background: var(--ks-white) !important;
  font-family: var(--ks-body); font-size: 14px; color: var(--ks-ink);
}
/* Knappene: mørk pille + beige «Avbryt» */
body.ksnewdesign #cplistconflayer .ui-button,
body.ksnewdesign #olistconflayer .ui-button {
  min-height: 34px; margin-right: 10px; padding: 2px 20px !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-ink) !important; background-image: none !important;
  font-family: var(--ks-body); font-size: 12px !important;
  color: var(--ks-beige) !important; cursor: pointer;
}
body.ksnewdesign #cplistconflayer .ui-button .ui-button-text,
body.ksnewdesign #olistconflayer .ui-button .ui-button-text { color: var(--ks-beige) !important; }
/* «Avbryt» er beige. Må være minst like spesifikk som regelen over
   (#cplistconflayer .ui-button), ellers taper den. */
body.ksnewdesign #cplistconflayer #daylnameexcanc,
body.ksnewdesign #cplistconflayer .ui-button.ksnd-avbryt,
body.ksnewdesign #olistconflayer #olistnameexcanc {
  background: var(--ks-beige) !important; color: #000 !important;
}
body.ksnewdesign #cplistconflayer #daylnameexcanc .ui-button-text,
body.ksnewdesign #olistconflayer #olistnameexcanc .ui-button-text { color: #000 !important; }
/* «Lag ny liste»-popupen (Figma 61:4065).
   Markupen er flate spans, <br>-er og floats. I stedet for å overstyre hver
   enkelt gjøres containeren til en flexkolonne — da stables alt av seg selv,
   og floatene slutter å gjelde. */
body.ksnewdesign #cplistconflayer.fancybox-content {
  display: flex; flex-direction: column; align-items: flex-start;
}
body.ksnewdesign #cplistconflayer > span { float: none !important; }
body.ksnewdesign #cplistconflayer span:has(> input[type="radio"]) {
  display: block; margin: 0 0 7px; font-size: 14px !important; line-height: 20px;
}
body.ksnewdesign #cplistconflayer input[type="radio"] {
  width: 14px; height: 14px; margin: 0 9px 0 0; vertical-align: -2px; accent-color: var(--ks-ink);
}
/* ledeteksten over valgene */
body.ksnewdesign #cplistconflayer > span:nth-of-type(2) {
  display: block; margin: 0 0 12px; font-size: 14px !important; font-weight: 400 !important;
}
/* antall-feltet er en pille, som i Figma */
body.ksnewdesign #cplistconflayer #defqty {
  display: block; width: 84px !important; margin: 16px 0 20px !important;
  text-align: center;
}
/* knapperaden nederst */
body.ksnewdesign #cplistconflayer > span:last-of-type { display: block; margin-top: 4px; }
body.ksnewdesign #cplistconflayer #nwlistpopcanc {
  background: var(--ks-beige) !important; color: #000 !important;
}
body.ksnewdesign #cplistconflayer #nwlistpopcanc .ui-button-text { color: #000 !important; }

/* Figma har et tynt kryss oppe til høyre, ikke fancybox sitt mørke */
body.ksnewdesign .fancybox-close-small { color: var(--ks-ink) !important; opacity: .8; }

/* --- Aktive rabattkoder (Figma 61:3577) --------------------------------- */
.ksnd-rabatt__filtre { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
body.ksnewdesign .ksnd-rabatt__filter {
  min-height: 26px; padding: 3px 16px;
  border: 0; border-radius: 13px; background: var(--ks-beige);
  font-family: var(--ks-body); font-size: 12px; color: var(--ks-ink);
  cursor: pointer; transition: background .15s, color .15s;
}
body.ksnewdesign .ksnd-rabatt__filter:hover { background: #D8CEC2; }
body.ksnewdesign .ksnd-rabatt__filter.is-on { background: var(--ks-mulvarp); color: var(--ks-white); }

.ksnd-rabatt__antall { margin: 0 0 14px; font-size: 14px; line-height: 20px; }
.ksnd-rabatt__liste { display: flex; flex-direction: column; gap: 10px; }
.ksnd-rabatt__kort { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Selve koden er en pille med ramme og kopier-knapp, som i Figma */
.ksnd-rabatt__kode {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 30px; padding: 3px 14px 3px 18px;
  border: 1px solid var(--ks-ink); border-radius: 15px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ks-ink);
}
body.ksnewdesign .ksnd-rabatt__kopier {
  width: 18px; height: 18px; padding: 0; border: 0; background: none;
  cursor: pointer; line-height: 0; opacity: .75; transition: opacity .15s;
}
body.ksnewdesign .ksnd-rabatt__kopier:hover { opacity: 1; }
body.ksnewdesign .ksnd-rabatt__kopier img { width: 15px; height: 15px; max-width: none; display: block; }
/* liten kvittering på at koden er kopiert */
body.ksnewdesign .ksnd-rabatt__kopier.is-copied { opacity: 1; }
body.ksnewdesign .ksnd-rabatt__kopier.is-copied::after {
  content: 'Kopiert'; position: absolute; margin: -2px 0 0 24px;
  font-size: 11px; color: var(--ks-mulvarp); white-space: nowrap;
}
.ksnd-rabatt__rest { font-size: 13px; color: var(--ks-mulvarp); }
.ksnd-rabatt__note { margin: 16px 0 0; font-size: 13px; font-style: italic; line-height: 19px; }

/* --- Mine ordrer (Figma 61:2876) ---------------------------------------- */
/* Innholdsspalta er bredere her enn på profil-/passordsida */
.ksnd-acc__main--wide { padding-left: 104px; }   /* Figma: skillelinje 321 -> innhold 425 */
.ksnd-acc__col--wide { flex: 1 1 auto; width: auto; max-width: 894px; }

.ksnd-order {
  border: 1px solid #D9D3CB; border-radius: 8px;
  padding: 18px 22px 16px; margin-bottom: 22px;
  font-size: 14px; line-height: 20px;
}
.ksnd-order__grid { display: flex; gap: 32px; align-items: flex-start; }
.ksnd-order__meta { flex: 0 0 210px; }
.ksnd-order__meta p { margin: 0 0 3px; }
.ksnd-order__prods { flex: 1 1 auto; min-width: 0; }
.ksnd-order__side { flex: 0 0 190px; text-align: right; }
.ksnd-order__label { margin: 0 0 10px; font-weight: 700; }
.ksnd-order__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
body.ksnewdesign .ksnd-order__thumbs img {
  width: 68px; height: auto; max-width: none; display: block; border: 0;
}
.ksnd-order__lists { font-size: 12px; line-height: 17px; color: var(--ks-mulvarp); margin-bottom: 12px; }
.ksnd-order__sum { margin: 0; }

.ksnd-order__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px;
}
/* Statusen er en pille med ramme, ikke fylt — slik Figma viser den */
.ksnd-order__status {
  display: inline-flex; align-items: center; min-height: 30px; padding: 2px 16px;
  border: 1px solid var(--ks-ink); border-radius: 20px; font-size: 12px;
}
/* Kansellert (status 7) er den ene statusen kunden ikke kan gjøre noe med, og
   den må leses med én gang. Ramme-pilla forsvinner i rekka av like kort, så
   den fylles i stedet. Hvit tekst på --ks-red gir 5,6:1 mot WCAG AA. */
body.ksnewdesign .ksnd-order__status--avbrutt {
  border-color: var(--ks-red); background: var(--ks-red);
  color: var(--ks-white); font-weight: 700;
}
.ksnd-order__statusmsg { font-size: 12px; color: var(--ks-red); }
.ksnd-order__actions { display: flex; align-items: center; gap: 10px; }
/* «Etterbestill» er en jQuery UI-knapp fra den gamle koden */
body.ksnewdesign .ksnd-order__actions button {
  min-height: 34px; padding: 2px 17px !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-beige) !important; background-image: none !important;
  font-family: var(--ks-body); font-size: 12px !important; color: #000 !important;
  cursor: pointer;
}
body.ksnewdesign .ksnd-order__actions button:hover { background: #D8CEC2 !important; }
body.ksnewdesign .ksnd-order__actions .ui-button-text { color: #000 !important; }

/* --- Vis ordre (Figma 61:3084) ------------------------------------------
   Markupen genereres av 139 echo-blokker i account_history_info.php, så
   sida er restylet på plass. De svarte bjelkene og de turkise jQuery
   UI-knappene er det som skiller den mest fra Figma. */
body.ksnewdesign #kortshop_contentcategorylayer .ksboiler_header {
  background: none !important; color: var(--ks-ink) !important;
  border: 0 !important; border-bottom: 1px solid #D9D3CB !important;
  font-family: var(--ks-display) !important; font-size: 30px !important;
  font-weight: 400 !important; text-transform: none !important;
  letter-spacing: 0 !important; padding: 0 0 12px !important; margin-bottom: 18px !important;
}
/* Den øverste overskrifta på sida lå klistret inntil brødsmulene, uten luft
   i det hele tatt. Samme avstand som sidetitlene ellers i designet (22px, se
   .ksnd-carttitle). Bare den første: overskrifter lenger ned på sida har
   allerede luft fra innholdet over seg. */
body.ksnewdesign #kortshop_contentcategorylayer .ksboiler_header:first-child {
  margin-top: 22px !important;
}
/* Produktradene ligger i tabeller med svart bakgrunn og HVIT tekst. Fjernes
   bakgrunnen alene, blir teksten usynlig — derfor må fargen settes med. */
body.ksnewdesign .Orderhistory,
body.ksnewdesign #kortshop_contentcategorylayer table[style*="background"] {
  background: none !important;
}
body.ksnewdesign #kortshop_contentcategorylayer table[style*="background"],
body.ksnewdesign #kortshop_contentcategorylayer table[style*="background"] td,
body.ksnewdesign #kortshop_contentcategorylayer table[style*="background"] span,
body.ksnewdesign #kortshop_contentcategorylayer table[style*="background"] a,
body.ksnewdesign .Orderhistory, body.ksnewdesign .Orderhistory td {
  color: var(--ks-ink) !important;
}
/* Produktkortet får ramme i stedet for fyll, slik Figma viser det.
   Ramma satt på tabellen med bilde og produktnavn, mens valgene ligger i
   laget utenfor den. Den flyttes derfor ut til laget som holder begge. */
body.ksnewdesign #kortshop_contentcategorylayer div[id^="productslyr"] {
  box-sizing: border-box; width: 100% !important;
  border: 1px solid #D9D3CB; border-radius: 8px;
  padding: 0 0 16px !important; margin: 0 0 22px;
}
body.ksnewdesign #kortshop_contentcategorylayer table[style*="background"] {
  border: 0 !important; border-radius: 0;
}
/* Produktnavnet lå nesten inntil bildet */
body.ksnewdesign #kortshop_contentcategorylayer table[style*="background"] span[style*="font-size:1.4em"] {
  margin-left: 28px !important;
}
/* Skillelinje mellom produktet og valgene — bare når det finnes valg */
body.ksnewdesign #kortshop_contentcategorylayer div[id^="productslyr"]:has(span[style*="width:110px"]) table[style*="background"] {
  border-bottom: 1px solid #EDE8E2 !important; margin-bottom: 16px;
}
body.ksnewdesign .headerOrderhistory {
  background: none !important; border-top: 1px solid #D9D3CB !important;
  font-size: 12px; color: var(--ks-ink);
}
/* Statushistorikken: hvitt kort med ramme, som produktkortet lenger ned.
   Radene skilles med en tynn strek i stedet for hver sin beige boks. */
body.ksnewdesign #ostatuscommentslayer {
  background: var(--ks-white) !important;
  border: 1px solid #D9D3CB !important; border-radius: 8px;
  padding: 0 !important;
}
body.ksnewdesign #ostatuscommentslayer > br { display: none; }
/* Malen gir radene chat-boble-stil: width:80% og float. Derfor gikk strekene
   ikke helt ut, og radene ble ulikt høye. Flex gir én rad per status, i full
   bredde, uansett hvilken vei bobla skulle flyte. */
body.ksnewdesign .home_message,
body.ksnewdesign .remote_message {
  display: flex; flex-wrap: wrap; align-items: baseline;
  float: none !important; width: auto !important;
  padding: 14px 16px !important; margin: 0 !important;
  background: none !important; border-radius: 0;
  border-bottom: 1px solid #EDE8E2;
}
/* Datoen står først i markupen, statusteksten etter. Flex snur om på det. */
body.ksnewdesign .home_message > span[style*="float:left"],
body.ksnewdesign .remote_message > span[style*="float:left"] { float: none !important; order: 1; }
body.ksnewdesign .home_message > span[style*="float:right"],
body.ksnewdesign .remote_message > span[style*="float:right"] {
  float: none !important; order: 2; margin-left: auto;
}
body.ksnewdesign .home_message > .clear,
body.ksnewdesign .remote_message > .clear { display: none !important; }
/* Kommentaren, når det finnes en, legger seg på egen linje under */
body.ksnewdesign .home_message > div[style*="width:100%"],
body.ksnewdesign .remote_message > div[style*="width:100%"] { order: 3; flex: 0 0 100%; }
/* Telleren var en hvit boks med turkis tall */
body.ksnewdesign .home_count, body.ksnewdesign .remote_count {
  background: none !important; border-radius: 0; padding: 0 !important;
}
/* Dato og saksbehandler til høyre i raden sto i 10px */
body.ksnewdesign .home_message span[style*="float:right"],
body.ksnewdesign .remote_message span[style*="float:right"] {
  font-size: 13px !important; line-height: 22px;
}
/* «Vis mer» trenger luft inne i kortet */
body.ksnewdesign #sshwmr { padding: 12px 16px; }
/* Statusteksten var hvit for den turkise bakgrunnen */
body.ksnewdesign .home_message, body.ksnewdesign .home_message *,
body.ksnewdesign .remote_message, body.ksnewdesign .remote_message * {
  color: var(--ks-ink) !important;
}
/* Kansellert ordre (status 7) skal være lett å få øye på. Må stå etter
   regelen over, som ellers farger alt inne i raden gråsvart. */
body.ksnewdesign .ksnd-status-avbrutt,
body.ksnewdesign .home_message .ksnd-status-avbrutt,
body.ksnewdesign .remote_message .ksnd-status-avbrutt {
  color: #9B2226 !important; font-weight: 500;
}

/* Statuslinja og ordredatoen øverst sto i fet .8em uten klasser å ta tak i.
   #topstatus er eneste faste kroken. */
body.ksnewdesign span:has(> #topstatus),
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) span[style*="margin-right:20px"] {
  font-family: var(--ks-body); font-size: 14px !important;
  font-weight: 400 !important; line-height: 22px; color: var(--ks-ink);
}
/* «Ordrehistorikk (Nyeste øverst)» er en løs tekstnode i <div class="">, så
   den må styles via foreldren. */
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) > div[class=""] {
  font-family: var(--ks-body); font-size: 14px; line-height: 22px;
  color: var(--ks-ink);
}
/* Statusradene: malen setter alt i fet. Nummeret blir en dempet teller. */
body.ksnewdesign .home_message, body.ksnewdesign .remote_message {
  font-family: var(--ks-body); font-size: 14px; line-height: 22px;
  padding: 10px 14px;
}
body.ksnewdesign .home_message b, body.ksnewdesign .remote_message b { font-weight: 400; }
body.ksnewdesign .home_count, body.ksnewdesign .remote_count {
  display: inline-block; min-width: 20px; margin-right: 6px;
  color: var(--ks-ink) !important; font-size: 12px;
}
/* Valgene under hvert produkt. Malen åpner <i> inne i ledeteksten og lukker
   den inne i verdien. Nettleseren retter opp den feilnøstingen ved å gjenskape
   <i> i begge, så både ledetekst og verdi ble kursiv serif. */
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) i {
  font-style: normal; font-family: var(--ks-body);
}
/* Hver valglinje er ledetekst + verdi. Malen flyter dem ved siden av
   hverandre med faste bredder, så lange ledetekster brakk over to linjer og
   dro verdien ut av stilling. Flex gir en fast venstrekolonne og lar verdien
   bryte inne i sin egen. */
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) span[style*="width:100%;display:block"] {
  box-sizing: border-box; display: flex !important; float: none !important;
  gap: 16px; padding: 0 18px 4px;
}
/* Ledeteksten er halvfet, verdien vanlig — det er ledeteksten som forteller
   hva valget gjelder, og den man leter etter når man skumleser. */
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) span[style*="width:110px"] {
  flex: 0 0 210px; width: 210px !important; float: none !important;
  font-size: 14px; line-height: 22px; font-weight: 700 !important;
  color: var(--ks-ink) !important;
}
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) span[style*="width:150px"] {
  flex: 1 1 auto; width: auto !important; float: none !important;
  font-size: 14px; line-height: 22px;
  font-weight: 400 !important; color: var(--ks-ink);
}
/* Navnelisteboksen ligger nå inne i produktkortet, og malens egne rammer ga
   boks inni boks. Den blir en seksjon skilt med en strek i stedet. */
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtheader"],
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtextwarn"],
body.ksnewdesign #kortshop_contentcategorylayer td[style*="border-bottom-left-radius"] {
  border: 0 !important; border-radius: 0 !important;
  border-top: 1px solid #EDE8E2 !important;
  font-family: var(--ks-body); font-size: 14px !important; line-height: 22px;
  color: var(--ks-ink) !important; padding: 12px 18px !important;
}
/* Hele navnelista er én sak: navn, forklaring, linjetall og knapper. Bare den
   øverste raden får strek over seg, resten henger sammen. */
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtextwarn"] {
  border-top: 0 !important; padding-top: 0 !important;
}
body.ksnewdesign #kortshop_contentcategorylayer td[style*="border-bottom-left-radius"] {
  border-top: 0 !important; padding-top: 10px !important;
}
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtheader"] {
  padding-bottom: 6px !important;
}
/* Listenavnet er en lenke som åpner lista, der man både kan lese, redigere
   og bytte. Den fikk knappeform i forrige runde, men det leste som om den
   bare gjorde én ting — og hengelåsen havnet inni knappen, så den så
   klikkbar ut. Lenka er derfor en lenke igjen. */
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtheader"] a {
  color: var(--ks-ink) !important; font-weight: 500 !important;
  text-decoration: underline; text-underline-offset: 3px;
}
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtheader"] a:hover {
  color: var(--ks-mulvarp) !important;
}
/* Hengelåsen er et statusmerke, ikke en knapp: admin låser lista når produktet
   går i produksjon, kunden kan ikke låse selv. Den står derfor utenfor lenka,
   med teksten ved siden av, så den ikke leses som noe man kan trykke på. */
body.ksnewdesign .ksnd-listestatus {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 2px 10px 2px 8px;
  border-radius: 12px; background: var(--ks-beige);
  font-size: 12px; font-weight: 400; line-height: 20px;
  color: var(--ks-ink); cursor: default; vertical-align: middle;
}
body.ksnewdesign .ksnd-listestatus img {
  width: 15px !important; height: 15px !important; display: block; opacity: .8;
}
/* Skulle malen likevel tegne låsen inne i lenka — online_lists_mfancybox.js
   gjør det etter enkelte handlinger — skal den heller ikke der ta imot klikk. */
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtheader"] a img[id^="tgl_"],
body.ksnewdesign #kortshop_contentcategorylayer td[id^="newbtheader"] a img[src*="lock"] {
  pointer-events: none; opacity: .7;
}
body.ksnewdesign #kortshop_contentcategorylayer span[id^="listdata"] {
  font-size: 14px; line-height: 22px; color: var(--ks-ink);
}

/* Alle jQuery UI-knappene på ordresida: teal og mørkerød blir piller.
   :has() avgrenser til sider som faktisk har statushistorikken — uten den
   traff regelen hele innholdsområdet på ALLE sider og slo ut knappereglene
   for handlekurv, navnelister og merkedager. */
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) .ui-button {
  background: var(--ks-ink) !important; background-image: none !important;
  border: 0 !important; border-radius: 20px !important;
  color: var(--ks-beige) !important; padding: 0 16px !important;
  font-family: var(--ks-body); font-size: 12px !important;
  /* Temaets .ui-state-default setter width:30px, smalere enn knappeteksten.
     Uten dette klemmes ordene sammen til en rund klump. */
  display: inline-flex; align-items: center; justify-content: center;
  width: auto !important; min-width: 0; height: 30px; white-space: nowrap;
}
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) .ui-button .ui-button-text {
  display: block; padding: 0 !important; margin: 0 !important;
  line-height: 1 !important; white-space: nowrap;
}
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) .ui-button .ui-button-text,
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) .ui-ks-smallbuttontext { color: var(--ks-beige) !important; }
body.ksnewdesign #kortshop_contentcategorylayer:has(#ostatuscommentslayer) .ui-button:hover { background: #000 !important; }

/* --- «Se mer» under produktlista (Figma) --------------------------------
   Antallet står til venstre, knappen midtstilt. Erstatter sidetallene som lå
   både over og under lista. */
.ksnd-more {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; min-height: 44px; margin: 34px 0 8px;
  font-family: var(--ks-body);
}
/* Tre kolonner, ikke absolutt plassering: knappen står midt på uansett hvor
   lang telleteksten er, og teksten kan aldri legge seg oppå knappen — det
   gjorde den i smale spalter, som på bloggen, og stjal klikket. */
.ksnd-more__count {
  grid-column: 1; justify-self: start;
  font-size: 14px; line-height: 20px; color: var(--ks-ink);
}
.ksnd-more__btn { grid-column: 2; }
body.ksnewdesign .ksnd-more__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 2px 34px;
  border: 1px solid var(--ks-ink); border-radius: 22px;
  background: none; color: var(--ks-ink); text-decoration: none;
  font-family: var(--ks-body); font-size: 15px; line-height: 20px;
  transition: background .15s, color .15s;
}
body.ksnewdesign .ksnd-more__btn:hover { background: var(--ks-ink); color: var(--ks-white); }
/* Mens neste side hentes — kort nok til at man knapt rekker å se den, men
   den viser at trykket ble registrert på treg linje. */
body.ksnewdesign .ksnd-more.is-laster .ksnd-more__btn { opacity: .5; pointer-events: none; }

/* ==========================================================================
   HANDLEKURV
   Figma "Handlekurv" (54:2398).

   Kurven bygges av en løkke i shopping_cart.php som skriver ut nøstede
   tabeller over ~1400 linjer — markupen er ikke en sammenhengende blokk som
   kan byttes ut. Den er derfor restylet på plass, samme grep som produktlista
   og kontaktskjemaet. Eneste PHP-endring er sidetittelen, som Figma har og
   det gamle designet ikke.
   ========================================================================== */
.ksnd-carttitle {
  border: 0; padding: 0; margin: 22px 0 40px;
  font-family: var(--ks-display); font-weight: 400; font-size: 30px;
  line-height: 1.15; color: var(--ks-ink); text-align: center;
}
body.ksnewdesign .contentContainer { font-family: var(--ks-body); font-size: 14px; color: var(--ks-ink); }

/* Produkttittelen over hver rad — grå bakgrunn i det gamle designet */
body.ksnewdesign td.tgreybg {
  background: none !important;
  padding: 0 0 6px !important;
  font-family: var(--ks-display); font-size: 20px; font-weight: 400; color: var(--ks-ink);
  text-transform: none;
}
/* PRODUKT / SUM-linja */
body.ksnewdesign td.shctblhd {
  border-bottom: 1px solid var(--ks-ink);
  padding: 0 0 6px !important;
  font-family: var(--ks-body); font-size: 12px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ks-ink);
  background: none !important;
}
body.ksnewdesign td.shctblcell { font-size: 14px; line-height: 20px; padding: 7px 0 !important; }
/* Malen legger et hake-ikon som bakgrunnsbilde i produktcella. Det lå utenfor
   teksten så lenge cella hadde 25px venstremarg, men i nytt design starter
   teksten ved kanten, og haken havnet oppå antallet. Figma har ingen hake her. */
body.ksnewdesign td.shctblcellicon { background-image: none !important; }
/* Figma (node 54:2435) har hele valglinja i samme svarte skrift, uten brun
   ledetekst og uten kursiv verdi, med 35px linjeavstand. */
body.ksnewdesign .schoption,
body.ksnewdesign .schoptionoption { font-size: 14px; line-height: 35px; color: #000; font-weight: 400; }
body.ksnewdesign .schoptionvalue { font-size: 14px; line-height: 35px; color: #000; font-style: normal; }
body.ksnewdesign td.schoptiontd,
body.ksnewdesign td.schoptiontd i,
body.ksnewdesign td.schoptiontd small {
  font-style: normal !important; color: #000 !important; font-size: 14px !important; line-height: 35px !important;
}
/* Fargevalg/varianter står med font-size:10px rett i malen, altfor smått ved
   sida av resten av valgene. Inline-stil, så det må overstyres med !important. */
body.ksnewdesign td.schoptiontd > span[style*="font-size:10px"] {
  font-size: 14px !important; line-height: 20px; color: var(--ks-mulvarp);
}
body.ksnewdesign img.schoptionimage { display: none; }   /* de gamle småikonene */

/* Antall/oppdater/slett/rediger. Den gamle stripa er en <span> med
   background:#212121 satt inline, derfor :has() + !important for å nå den. */
body.ksnewdesign .contentContainer span:has(> .shcartnumber) {
  background: none !important;
  display: flex !important; align-items: center; gap: 26px;
  border-top: 1px solid #D9D3CB; padding: 12px 0 !important; margin-top: 8px;
}
body.ksnewdesign .contentContainer span:has(> .shcartnumber) > span { float: none !important; }
/* Ikonene i raden er hvite PNG-er laget for den mørke stripa — snus til mørke
   nå som bakgrunnen er hvit. */
body.ksnewdesign .shcartbutton img { filter: invert(1); opacity: .75; }

body.ksnewdesign .shcartnumber,
body.ksnewdesign .shcartbutton {
  background: none !important; border: 0 !important;
  color: var(--ks-ink) !important; font-family: var(--ks-body); font-size: 13px;
}
body.ksnewdesign .shcartbuttontext { color: var(--ks-ink) !important; font-size: 13px; }
body.ksnewdesign input.cartquantity {
  height: 26px !important; width: 46px !important; padding: 0 8px !important;
  border: 1px solid var(--ks-ink) !important; border-radius: 13px !important;
  background: var(--ks-white) !important; text-align: center;
  font-family: var(--ks-body); font-size: 13px; color: var(--ks-ink);
}
/* «Rediger liste» er en jQuery UI-knapp midt i lista */
body.ksnewdesign .contentContainer .ui-ks-smallbutton {
  background: var(--ks-ink) !important; border: 0 !important; border-radius: 16px !important;
  color: var(--ks-beige) !important; padding: 2px 14px !important;
}
body.ksnewdesign .contentContainer .ui-ks-smallbuttontext { color: var(--ks-beige) !important; font-size: 12px; }

/* Relaterte produkter nederst */
body.ksnewdesign .ksnd-related__head {
  font-family: var(--ks-display) !important; font-size: 30px !important; font-weight: 400 !important;
  text-transform: none !important; color: var(--ks-ink) !important;
  margin: 46px 0 22px 0 !important;
}
body.ksnewdesign .contentContainer img.imagecusticon {
  width: 100%; height: auto; max-width: none; display: block;
}

/* Handle mer / Fortsett til kassen.
   Tom kurv er en egen gren utenfor skjemaet og har knappen i en naken <span>.
   Den grenen får klassen .ksnd-cartempty fra shopping_cart.php. Å bruke
   .contentContainer i stedet traff «Vis» i produktlista, som ligger i samme
   container. */
body.ksnewdesign .buttonSet { border: 0 !important; padding: 0 !important; margin-top: 18px; }
body.ksnewdesign .buttonSet a.ui-button,
body.ksnewdesign .ksnd-cartempty a.ui-button {
  min-height: 34px; padding: 2px 22px !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-ink) !important; background-image: none !important;
  font-family: var(--ks-body); font-size: 12px !important; line-height: 30px;
  color: var(--ks-beige) !important; text-transform: none;
}
body.ksnewdesign .buttonSet a.ui-priority-secondary,
body.ksnewdesign .ksnd-cartempty a.ui-priority-secondary {
  background: var(--ks-beige) !important; color: #000 !important;
}
body.ksnewdesign .buttonSet a.ui-button:hover,
body.ksnewdesign .ksnd-cartempty a.ui-button:hover { background: #000 !important; color: var(--ks-beige) !important; }
body.ksnewdesign .buttonSet a.ui-priority-secondary:hover,
body.ksnewdesign .ksnd-cartempty a.ui-priority-secondary:hover { background: #D8CEC2 !important; color: #000 !important; }

/* ==========================================================================
   KASSE
   Figma "Kasse" (54:2517). Markupen kommer fra kscheckout.php og restyles på
   plass, som handlekurven.

   Mål fra Figma: kort med 1px ramme i --ks-ink og 15px hjørner, overskrift
   Karla Bold 16px i store bokstaver, brødtekst 14/20, piller med 20px hjørner
   og hvit tekst på --ks-ink, firkantede avkryssingsbokser.

   MERK: spaltene er ikke rørt. De to panelene ligger på floats med faste
   bredder og absoluttplasserte barn i det gamle temaet; et forsøk på flex la
   dem oppå hverandre.
   ========================================================================== */
.ksnd-checkouttitle {
  border: 0; padding: 0; margin: 22px 0 10px;
  font-family: var(--ks-display); font-weight: 400; font-size: 30px;
  line-height: 1.15; color: var(--ks-ink); text-align: center;
}
.ksnd-checkoutlead {
  margin: 0 auto 40px; max-width: 512px;
  font-family: var(--ks-body); font-size: 14px; line-height: 20px;
  color: var(--ks-ink); text-align: center;
}
body.ksnewdesign #checkoutlayer {
  /* Figma: innholdet er 1053px bredt og sentrert i en 1440-ramme, ikke
     full innholdsbredde som resten av sidene. */
  box-sizing: border-box;
  width: 100% !important; max-width: 1053px; margin: 0 auto;
  float: none !important;
  font-family: var(--ks-body); font-size: 14px; line-height: 20px; color: var(--ks-ink);
  padding-bottom: 32px;
}
body.ksnewdesign #checkoutlayer b,
body.ksnewdesign #checkoutlayer strong { font-weight: 700; }

/* Spaltene: Figma har 507px + 32px mellomrom + 515px. Malen gir dem 49%
   med nesten ingen luft. Bare bredde og margin settes, ikke float. */
@media (min-width: 1000px) {
  body.ksnewdesign #checkoutshippinglayer,
  body.ksnewdesign #checkoutpaymentlayer,
  body.ksnewdesign #checkoutcommentlayer { box-sizing: border-box; }
  body.ksnewdesign #checkoutshippinglayer { width: 48.1% !important; margin-right: 3% !important; }
  body.ksnewdesign #checkoutpaymentlayer,
  body.ksnewdesign #checkoutcommentlayer { width: 48.9% !important; }
  /* Kommentaren og ledeteksten er egne floats i malen. Uten float:right
     havner de under den høye fraktlista i stedet for i høyre spalte. */
  body.ksnewdesign #checkoutcommentlayer,
  body.ksnewdesign #checkoutlayer > #paymentmoduletitlesublayer {
    float: right !important; clear: right !important; width: 48.9% !important;
  }
  body.ksnewdesign #checkoutcommentlayer textarea { height: 232px !important; }
}
body.ksnewdesign #checkoutcommentlayer { margin-left: 0 !important; }
body.ksnewdesign #checkoutorderlinelayer { width: 100% !important; }
body.ksnewdesign #paymentmoduletitlesublayer { width: 100% !important; }

/* --- Kort med overskriftsbånd ------------------------------------------
   «Fraktinformasjon» og «Betalingsinformasjon» er overskrifter øverst i
   hvert kort, med en strek under. Bandet og kroppen er søsken i markupen,
   så rammen settes sammen av to halvdeler. */
body.ksnewdesign #checkoutlayer #checkoutshippinglayer > .ksboiler_header:not(#shippingmoduletitlelayer),
body.ksnewdesign #checkoutlayer #checkoutpaymentlayer > .ksboiler_header:not(#paymentmoduletitlesublayer) {
  display: block !important;
  box-sizing: border-box;
  width: 100% !important; float: none !important;
  margin: 0 !important; padding: 13px 20px !important;
  background: none !important;
  border: 1px solid var(--ks-ink) !important;
  border-radius: 15px 15px 0 0 !important;
  font-family: var(--ks-body) !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 20px !important; letter-spacing: .02em !important; text-transform: uppercase !important;
  color: var(--ks-ink) !important;
}
/* Kroppen i kortet: adressen (og rabattkoden i betalingskortet) */
body.ksnewdesign #checkoutshippinglayer > span:not(.ksboiler_header),
body.ksnewdesign #checkoutpaymentlayer > span:not(.ksboiler_header) {
  box-sizing: border-box;
  display: block; float: none !important; width: 100% !important;
  margin: 0 !important; padding: 14px 22px 22px !important;
  border: 1px solid var(--ks-ink); border-top: 0;
  font-size: 14px !important;
}
body.ksnewdesign #checkoutshippinglayer > span:not(.ksboiler_header) { border-radius: 0 0 15px 15px; }
/* I betalingskortet fortsetter rammen ned i rabattkode-blokka */
body.ksnewdesign #checkoutpaymentlayer > span:not(.ksboiler_header) { border-bottom: 0; padding-bottom: 0 !important; }
/* Malen har tomme <br> til slutt som ga en stor luke i kortet */
body.ksnewdesign #paymentmoduletitlelayer > br:not(.clear) { display: none; }
/* Betalingskortet fortsetter i rabattkode-blokka under adressen */
body.ksnewdesign #paymentmoduletitlelayer {
  box-sizing: border-box;
  float: none !important; width: 100% !important;
  margin: 0 !important; padding: 0 20px 20px !important;
  border: 1px solid var(--ks-ink); border-top: 0; border-radius: 0 0 15px 15px;
  font-size: 14px !important; font-weight: 400 !important; color: var(--ks-ink) !important;
}

/* Figma: adressen i vanlig vekt, ledeteksten over i kursiv */
body.ksnewdesign #checkoutlayer #sndtoadr,
body.ksnewdesign #checkoutlayer #bltoadr { font-weight: 400 !important; font-size: 14px !important; }
body.ksnewdesign #checkoutlayer #sndtoadr b,
body.ksnewdesign #checkoutlayer #bltoadr b { font-weight: 400; }

/* Forklaringa til betalingsmåten ligger bak et info-ikon til høyre i raden */
body.ksnewdesign .checkoutcusticon { padding-right: 58px !important; }
body.ksnewdesign .ksnd-payinfo {
  position: absolute; right: 20px; top: 21px;
  width: 20px; height: 20px; cursor: help; outline: none;
}
body.ksnewdesign .ksnd-payinfo img { display: block; width: 20px; height: 20px; }
body.ksnewdesign .ksnd-payinfo__boble {
  /* Boblen åpnes oppover, ellers havner den utenfor kortet på siste rad */
  position: absolute; right: -6px; bottom: 30px; z-index: 30;
  display: none; width: 300px; max-width: 80vw;
  padding: 14px 16px;
  background: var(--ks-white); border: 1px solid var(--ks-ink); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(67, 66, 66, .12);
  font-size: 13px; line-height: 19px; font-style: italic; font-weight: 400;
  color: var(--ks-ink); text-align: left; cursor: default;
}
body.ksnewdesign .ksnd-payinfo:hover .ksnd-payinfo__boble,
body.ksnewdesign .ksnd-payinfo:focus .ksnd-payinfo__boble,
body.ksnewdesign .ksnd-payinfo:focus-within .ksnd-payinfo__boble { display: block; }
@media (max-width: 900px) {
  body.ksnewdesign .ksnd-payinfo { right: 16px; top: 19px; }
  body.ksnewdesign .ksnd-payinfo__boble { width: 240px; }
}
/* Rabattkodefeltet er 247px bredt i rammen */
body.ksnewdesign #paymentmoduletitlelayer .ui-ks-input-container { width: auto !important; }
body.ksnewdesign #coupon { width: 150px !important; }

/* Adresselinjer med ikon, som i Figma */
body.ksnewdesign #sndtoadr,
body.ksnewdesign #bltoadr { font-size: 14px !important; line-height: 20px; }
body.ksnewdesign #sndtoadr,
body.ksnewdesign #bltoadr,
body.ksnewdesign #sndtoadr + .clear + br + span,
body.ksnewdesign #checkoutlayer .ui-ks-input-container { position: relative; }
body.ksnewdesign #sndtoadr::before,
body.ksnewdesign #bltoadr::before {
  content: ''; position: absolute; left: -34px; top: 0;
  width: 22px; height: 22px;
  background: url('/ext/newdesign/icons/kasse-adresse.svg') no-repeat center / contain;
}
body.ksnewdesign #sndtoadr,
body.ksnewdesign #bltoadr { margin-left: 34px !important; }

/* Figma viser e-post og mobil som linjer med ikon, ikke som felt med
   ledetekst over. Feltene er fortsatt redigerbare, bare uten ramme. */
body.ksnewdesign #sndtoadr > span[style*="font-weight:bold"] { display: none !important; }
body.ksnewdesign #sndtoadr br.clear { display: none; }
body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr {
  /* Figma har e-post over mobil; i malen står mobilfeltet først */
  display: flex; flex-direction: column; align-items: stretch;
  width: 100% !important;
}
body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr .ui-ks-input-email-image { order: 2; }
body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr .ui-ks-input-mobile-image { order: 3; }

body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr .ui-ks-input-container {
  box-sizing: border-box; position: relative;
  display: block !important; float: none !important; clear: both;
  width: calc(100% + 34px) !important; height: auto !important;
  /* ikonet skal stå på linje med adresse-ikonet, som ligger 34px til venstre */
  margin: 14px 0 0 -34px !important; padding: 0 0 0 34px !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
}
body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr .ui-ks-input-container::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
}
body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr .ui-ks-input-email-image::before {
  background: url('/ext/newdesign/icons/kasse-epost.svg') no-repeat center / contain;
}
body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr .ui-ks-input-mobile-image::before {
  background: url('/ext/newdesign/icons/kasse-mobil.svg') no-repeat center / contain;
}
body.ksnewdesign #checkoutlayer #checkoutshippinglayer #sndtoadr .ui-ks-input-textfield {
  box-sizing: border-box; width: 100% !important; height: auto !important;
  padding: 0 !important; margin: 0 !important;
  font-size: 14px !important; font-weight: 400 !important; line-height: 22px !important;
}

/* Bunnen under sammendraget: knapp og finstilt tekst til høyre (Figma) */
body.ksnewdesign #ksnd-orderfoot {
  /* Sammendragskortet flyter (float:left i malen), så bunnen må klareres,
     ellers legger den seg ved siden av og oppå kortet. */
  clear: both;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin: 0 !important; padding-top: 28px;
}
body.ksnewdesign .ksnd-orderfoot__hoyre {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  margin-left: auto;
}
/* Adressebekreftelsen (egen funksjon, ikke tegnet i Figma) */
body.ksnewdesign .ksnd-bekreftadr {
  flex: 0 1 480px; width: 480px; max-width: 100%; font-size: 14px;
}
body.ksnewdesign .ksnd-bekreftadr > b {
  display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700;
}
body.ksnewdesign #ksnd-orderfoot .kscheckoutbutton { float: none !important; }
body.ksnewdesign #ksnd-orderfoot #ksmatc { float: none !important; margin: 0 !important; }

/* Ledetekstene over adressen og feltene */
body.ksnewdesign #checkoutlayer span[style*="text-transform:uppercase"]:not(.ui-ks-smallbuttontext) {
  /* «Forsendelsesadresse» / «Fakturaadresse»: Karla Italic 14px i GråSvart */
  font-size: 14px !important; font-weight: 400 !important; font-style: italic;
  letter-spacing: 0 !important; color: var(--ks-ink) !important; text-transform: none !important;
}

/* --- Ledetekst over valglistene ---------------------------------------- */
body.ksnewdesign #checkoutlayer #shippingmoduletitlelayer,
body.ksnewdesign #checkoutlayer #paymentmoduletitlesublayer {
  display: block !important;
  box-sizing: border-box;
  background: none !important; border: 0 !important;
  margin: 35px 0 13px !important; padding: 0 !important;
  font-family: var(--ks-body) !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 20px !important; letter-spacing: .02em !important; text-transform: uppercase !important;
  color: var(--ks-ink) !important;
}

/* --- Frakt- og betalingsvalg: ett kort med rader ------------------------ */
body.ksnewdesign #shippingmodulelayer,
body.ksnewdesign #paymentmodulelayer {
  box-sizing: border-box;
  width: 100% !important;
  border: 1px solid var(--ks-ink); border-radius: 15px;
  /* ikke overflow:hidden — det klipper infoboblene. Radene får i stedet
     samme hjørner som kortet, så den valgte raden ikke stikker utenfor. */
}
/* Radene har 14px hjørner, ikke 15: innsida av en 15px ramme som er 1px
   tjukk er 14px. Med 15px stakk bakgrunnen litt utenfor og hjørnene ble hakkete. */
body.ksnewdesign #shippingmodulelayer .checkoutshippingicon:first-of-type,
body.ksnewdesign #paymentmodulelayer .checkoutcusticon:first-of-type { border-radius: 14px 14px 0 0 !important; }
body.ksnewdesign #shippingmodulelayer .checkoutshippingicon:not(:has(~ .checkoutshippingicon)),
body.ksnewdesign #paymentmodulelayer .checkoutcusticon:not(:has(~ .checkoutcusticon)) { border-radius: 0 0 14px 14px !important; }
body.ksnewdesign .checkoutshippingicon,
body.ksnewdesign .checkoutcusticon {
  box-sizing: border-box;
  /* flow-root i stedet for overflow:hidden, ellers klippes infoboblen */
  display: flow-root !important; position: relative;
  float: none !important; width: 100% !important;
  margin: 0 !important; padding: 22px 21px 22px 58px !important;
  border: 0 !important; border-bottom: 1px solid #D9D3CB !important; border-radius: 0 !important;
  background: none !important; background-image: none !important;
  font-size: 14px; line-height: 20px; color: var(--ks-ink);
  cursor: pointer; transition: background-color .15s;
}
body.ksnewdesign #shippingmodulelayer > span[style*="border-bottom"],
body.ksnewdesign #paymentmodulelayer > span[style*="border-bottom"] { display: none !important; }
/* Malen skriver <br class="clear"> etter hver rad. Radene flyter ikke lenger,
   så linjeskifta gjør ingen nytte — de la bare 13px mellom hver rad og en like
   stor tomrad nederst i kortet. */
body.ksnewdesign #shippingmodulelayer > br,
body.ksnewdesign #paymentmodulelayer > br { display: none !important; }
/* Siste alternativ i hver liste skal ikke ha strek under — kortets egen
   ramme avslutter lista */
/* Malen legger skript og skjulte spans etter siste rad, så :last-of-type
   treffer ikke. Regelen under tar den raden som ikke har flere rader etter seg. */
body.ksnewdesign #shippingmodulelayer .checkoutshippingicon:not(:has(~ .checkoutshippingicon)),
body.ksnewdesign #paymentmodulelayer .checkoutcusticon:not(:has(~ .checkoutcusticon)) { border-bottom: 0 !important; }
body.ksnewdesign .checkoutshippingicon:hover,
body.ksnewdesign .checkoutcusticon:hover { background-color: #FBF9F6 !important; }
body.ksnewdesign .checkoutshippingicon_sel,
body.ksnewdesign .checkoutcusticon_sel { background-color: #FBF9F6 !important; }
/* Firkantet avkryssingsboks som i Figma, i stedet for temaets bildefil */
body.ksnewdesign .checkoutshippingicon::before,
body.ksnewdesign .checkoutcusticon::before {
  content: ''; position: absolute; left: 25px; top: 23px;
  width: 18px; height: 18px; box-sizing: border-box;
  border: 1px solid var(--ks-ink); border-radius: 4px; background: var(--ks-white);
}
/* Valgt alternativ: hvit boks med grønn hake, tegna med samme runde
   strekender som ikonene i komponentbiblioteket. */
body.ksnewdesign .checkoutshippingicon_sel::before,
body.ksnewdesign .checkoutcusticon_sel::before { background: var(--ks-white); }
body.ksnewdesign .checkoutshippingicon_sel::after,
body.ksnewdesign .checkoutcusticon_sel::after {
  content: ''; position: absolute; left: 26px; top: 24px;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.2 11.8L13 4.6' stroke='%2352A739' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
body.ksnewdesign .checkoutshippingicon b,
body.ksnewdesign .checkoutcusticon b { font-size: 14px !important; font-weight: 700; }
/* Beskrivelsen under navnet: 230px i malen ga en smal spalte */
body.ksnewdesign .checkoutshippingicon > span[style*="width:230px"] {
  box-sizing: border-box; width: 100% !important; padding-right: 110px;
  font-size: 14px; line-height: 20px;
}

/* Admin-notatet øverst i fraktlista (vises bare for innlogget admin) */
body.ksnewdesign .ksnd-adminnote {
  box-sizing: border-box;
  float: none !important; width: 100% !important;
  margin: 0 !important; padding: 14px 20px !important;
  background: #FBF9F6; border-bottom: 1px solid #D9D3CB;
  font-size: 11px !important; line-height: 16px; color: var(--ks-mulvarp) !important;
}
body.ksnewdesign .ksnd-adminnote small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
/* Innholdet er gamle floats som la seg oppå hverandre */
body.ksnewdesign .ksnd-adminnote * { float: none !important; width: auto !important; }

/* --- Rabattkode --------------------------------------------------------- */
body.ksnewdesign #paymentmoduletitlelayer .ui-ks-input-container {
  display: inline-flex !important; align-items: center; gap: 0;
  float: none !important; height: auto !important; width: auto !important;
  padding: 0 0 0 16px !important;
  border: 1px solid var(--ks-ink) !important; border-radius: 15px !important;
  background: var(--ks-white) !important; overflow: hidden;
}
body.ksnewdesign #coupon {
  box-sizing: border-box;
  width: 100px !important; height: auto !important;
  margin: 0 !important; padding: 5px 8px 5px 0 !important;
  border: 0 !important; background: none !important;
  font-size: 14px !important; font-weight: 400 !important; text-transform: uppercase;
}
body.ksnewdesign #couponbutton {
  display: inline-block !important;
  width: auto !important; height: auto !important;
  margin: 0 !important; padding: 5px 20px !important;
  background: var(--ks-ink) !important; background-image: none !important;
  border: 0 !important; border-radius: 15px !important;
  color: var(--ks-beige) !important; line-height: 20px !important; cursor: pointer;
}
body.ksnewdesign #couponbutton img { display: none !important; }
body.ksnewdesign #couponresmsg { font-size: 13px !important; }
/* «Rabattkode»: Karla Italic 14px i GråSvart, som ledetekstene over adressene */
body.ksnewdesign #checkoutlayer #paymentmoduletitlelayer > span:not([id]):not(.ui-ks-input-container) {
  float: none !important; display: block;
  width: auto !important; margin: 0 0 6px !important;
  font-size: 14px !important; font-style: italic; font-weight: 400 !important;
  letter-spacing: 0; color: var(--ks-ink) !important;
}

/* --- Felt og kommentar -------------------------------------------------- */
body.ksnewdesign #checkoutlayer .ui-ks-input-container:not(#paymentmoduletitlelayer .ui-ks-input-container) {
  box-sizing: border-box;
  border: 1px solid var(--ks-ink) !important; border-radius: 15px !important;
  background-color: var(--ks-white) !important;
}
body.ksnewdesign #checkoutlayer .ui-ks-input-textfield,
body.ksnewdesign #checkoutlayer input[type="text"] {
  font-family: var(--ks-body) !important; font-size: 14px !important; color: var(--ks-ink) !important;
  border: 0 !important; background: none !important;
}
body.ksnewdesign #checkoutcommentlayer { margin-top: 0 !important; }
body.ksnewdesign #checkoutcommentlayer textarea {
  box-sizing: border-box; width: 100% !important;
  border: 1px solid var(--ks-ink) !important; border-radius: 15px !important;
  padding: 16px 18px !important;
  font-family: var(--ks-body); font-size: 14px !important; line-height: 20px; color: var(--ks-ink);
}
body.ksnewdesign #checkoutcommentlayer textarea:focus,
body.ksnewdesign #checkoutlayer .ui-ks-input-container:focus-within { outline: none; box-shadow: 0 0 0 1px var(--ks-ink); }

/* --- Knapper ------------------------------------------------------------ */
body.ksnewdesign #edshipadrbutton img,
body.ksnewdesign #edpayadrbutton img,
body.ksnewdesign #setedshipadrbutton img,
body.ksnewdesign #setremshipadrbutton img { display: none !important; }
body.ksnewdesign #checkoutlayer .ui-button,
body.ksnewdesign #edshipadrbutton,
body.ksnewdesign #edpayadrbutton,
body.ksnewdesign #setedshipadrbutton,
body.ksnewdesign #setremshipadrbutton,
body.ksnewdesign .ksconfirmadr .ui-button {
  box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center;
  height: 34px !important; min-height: 34px;
  background: var(--ks-ink) !important; background-image: none !important;
  border: 0 !important; border-radius: 20px !important;
  padding: 2px 17px !important;
  color: var(--ks-white) !important;
  font-family: var(--ks-body) !important;
  transition: opacity .15s;
}
body.ksnewdesign #checkoutlayer .ui-button:hover { opacity: .88; }
/* «Bekreft adresse» har ingen egen tekst-node, så skrifta settes på knappen */
body.ksnewdesign #acceptdeliadr,
body.ksnewdesign #setedshipadrbutton,
body.ksnewdesign #setremshipadrbutton {
  font-family: var(--ks-body) !important; font-size: 14px !important;
  font-weight: 400 !important; font-style: normal !important; line-height: 30px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ks-white) !important;
}
body.ksnewdesign #checkoutlayer .ui-ks-smallbuttontext,
body.ksnewdesign .ksconfirmadr .ui-ks-smallbuttontext,
body.ksnewdesign #acceptdeliadr .ui-button-text {
  color: var(--ks-white) !important;
  font-family: var(--ks-body) !important;
  font-size: 14px !important; font-style: normal !important; font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important; text-transform: none !important;
}

/* --- Sammendrag --------------------------------------------------------- */
body.ksnewdesign #checkoutorderlinelayer {
  box-sizing: border-box;
  /* Innholdet flyter (tabellene og adressekortet), så kortet må omslutte dem
     — ellers slutter ramma for tidlig og knappen under legger seg oppå. */
  display: flow-root;
  margin-top: 40px !important; padding: 0 !important;
  border: 1px solid var(--ks-ink); border-radius: 15px;
  font-size: 14px;
}
body.ksnewdesign #checkoutlayer #checkoutorderlinelayer > .ksboiler_header {
  box-sizing: border-box;
  display: block; width: 100% !important; float: none !important;
  margin: 0 !important; padding: 16px 30px !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--ks-ink) !important;
  font-family: var(--ks-body) !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 20px !important; letter-spacing: .02em !important; text-transform: uppercase !important;
  color: var(--ks-ink) !important;
}
/* Produktbildet til venstre for teksten i sammendraget */
body.ksnewdesign #checkoutlayer .ksnd-sumbilde {
  float: left; width: 64px; height: 64px; margin: 0 16px 0 0;
  border-radius: 8px; overflow: hidden; background: #F4F1EC;
}
body.ksnewdesign #checkoutlayer .ksnd-sumbilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ksnewdesign #checkoutlayer .ksnd-sumtekst { display: block; overflow: hidden; }

/* Figma viser valgene (papir, konvolutt, individualisering) som punkt under
   hver produktlinje. I malen ligger de i en blokk som åpnes ved klikk. */
body.ksnewdesign #checkoutlayer #orderlines span[id^="ksproductsattrlyr_"] { display: block !important; margin: 4px 0 0; float: none !important; }
body.ksnewdesign #checkoutlayer #orderlines span[id^="ksproductsattrlyr_"] small { font-size: 13px; color: var(--ks-ink); }
body.ksnewdesign #checkoutlayer #orderlines span[id^="ksproductsattrlyr_"] i { font-style: normal; }
/* Bandet har «SAMMENDRAG» til venstre og «TOTAL» til høyre */
body.ksnewdesign #checkoutlayer #checkoutorderlinelayer > .ksboiler_header::after {
  content: 'Total'; float: right; text-transform: uppercase;
}
/* Den gamle PRODUKTER/SUM-rada er erstattet av bandet over */
body.ksnewdesign #checkoutlayer #orderlines table tr:first-child strong { display: none; }
/* Strek mellom produktlinjene, som i Figma */
body.ksnewdesign #checkoutlayer #orderlines > table:first-of-type tr:not(:first-child) td {
  border-bottom: 1px solid #D9D3CB; padding: 24px 30px !important;
}
body.ksnewdesign #checkoutlayer #orderlines > table:first-of-type tr:not(:first-child) td + td { padding-left: 0 !important; }
body.ksnewdesign #checkoutlayer #orderlines > table:first-of-type tr:last-child td { border-bottom: 0; }

body.ksnewdesign #orderlines {
  box-sizing: border-box;
  /* Malen har dette som en <span>; uten display:block hopper tabellene
     inni over polstringa og legger seg helt inntil ramma. */
  display: block !important;
  width: 100% !important; float: none !important;
  /* Polstringa ligger på cellene, ikke her — da går skillelinjene mellom
     produktene helt ut til kantene, som i rammen. */
  padding: 0 !important;
  font-size: 14px !important; text-align: left !important;
}
body.ksnewdesign #orderlines td { padding: 6px 2px !important; }
/* Produktnavnet er en lenke i malen (åpner valgene). I Figma står det som
   vanlig tekst, så understrekinga tas bort. */
body.ksnewdesign #checkoutlayer #orderlines a { color: var(--ks-ink) !important; text-decoration: none !important; font-weight: 400; font-size: 14px; }
body.ksnewdesign #checkoutlayer #orderlines a:hover { text-decoration: underline !important; }
body.ksnewdesign #orderlines table[style*="font-size:10px"] { font-size: 14px !important; }
body.ksnewdesign #orderlines table[style*="font-size:10px"] { margin-right: 30px; }
body.ksnewdesign #orderlines table[style*="font-size:10px"] td {
  padding: 3px 0 3px 22px !important; font-size: 14px !important; line-height: 20px;
}
/* Totalblokka står i en egen tabell med strek over — luft rundt */
body.ksnewdesign #orderlines table[style*="border-top"] > tbody > tr > td { padding: 24px 0 !important; }
/* Figma har en luftlinje før «Totalt». Totalsummen er den viktigste
   tallverdien på sida, så den står større enn de andre linjene. */
body.ksnewdesign #orderlines table[style*="font-size:10px"] tr[style*="font-weight:bold"] td {
  padding-top: 24px !important;
  font-size: 18px !important; font-weight: 700 !important; line-height: 24px;
}
body.ksnewdesign #orderlines table[style*="border-top"] { border-top-color: #D9D3CB !important; }

/* Kortet med leveringsadressen (finnes ikke i Figma, men er egen funksjon) */
body.ksnewdesign .ksconfirmadr {
  box-sizing: border-box;
  display: block; float: none !important;
  width: 100% !important; max-width: 100%;
  background: none !important;
  border: 1px solid #D9D3CB !important; border-radius: 15px !important;
  padding: 0 !important;
}
body.ksnewdesign .ksconfirmadrinner {
  box-sizing: border-box;
  /* Innholdet flyter, så boksen må omslutte det — ellers står «Bekreft
     adresse» helt nede i kanten. */
  display: flow-root !important; float: none !important; width: 100% !important;
  background: none !important; padding: 22px 24px 24px !important;
}

body.ksnewdesign .ksconfirmadr img[src*="apptfile"] {
  border: 1px solid var(--ks-beige) !important; border-radius: 8px;
  padding: 6px !important; background: var(--ks-white);
}

/* --- «Fullfør bestilling» ----------------------------------------------- */
body.ksnewdesign .kscheckoutbutton {
  box-sizing: border-box;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  float: right !important; white-space: nowrap !important; width: auto !important;
  height: 34px !important; padding: 2px 17px !important; margin: 0 !important;
  background: var(--ks-ink) !important; background-image: none !important;
  border: 0 !important; border-radius: 20px !important;
  color: var(--ks-white) !important;
  font-family: var(--ks-body) !important; font-size: 14px !important; line-height: 30px !important;
  text-align: center; cursor: pointer; transition: opacity .15s;
}
body.ksnewdesign .kscheckoutbutton::after {
  content: ''; width: 16px; height: 16px;
  background: url('/ext/newdesign/icons/kasse-handlepose.svg') no-repeat center / contain;
}
body.ksnewdesign .kscheckoutbutton:hover { opacity: .88; }
body.ksnewdesign .kscheckoutbutton * { color: var(--ks-white) !important; }
/* Den lille teksten under knappen, høyrestilt som i Figma */
body.ksnewdesign #ksmatc {
  float: right !important; clear: right;
  width: auto !important; max-width: 260px; margin: 8px 0 0 !important;
  font-size: 12px; font-style: italic; line-height: 15px; color: var(--ks-ink); text-align: right;
}
body.ksnewdesign #ksmatc a { color: var(--ks-ink); text-decoration: underline; }

@media (max-width: 900px) {
  .ksnd-checkoutlead { margin-bottom: 26px; }
  body.ksnewdesign #checkoutlayer #checkoutorderlinelayer > .ksboiler_header,
  body.ksnewdesign #checkoutlayer #checkoutshippinglayer > .ksboiler_header:not(#shippingmoduletitlelayer),
  body.ksnewdesign #checkoutlayer #checkoutpaymentlayer > .ksboiler_header:not(#paymentmoduletitlesublayer) { padding: 12px 16px !important; }
  body.ksnewdesign #checkoutshippinglayer > span:not(.ksboiler_header),
  body.ksnewdesign #checkoutpaymentlayer > span:not(.ksboiler_header) { padding: 16px !important; }
  body.ksnewdesign #paymentmoduletitlelayer { padding: 0 16px 16px !important; }
body.ksnewdesign #orderlines { padding: 14px 16px 16px !important; }
  body.ksnewdesign .checkoutshippingicon,
  body.ksnewdesign .checkoutcusticon { padding: 14px 16px 14px 48px !important; }
  body.ksnewdesign .checkoutshippingicon::before,
  body.ksnewdesign .checkoutcusticon::before { left: 16px; top: 15px; }
  body.ksnewdesign .checkoutshippingicon_sel::after,
  body.ksnewdesign .checkoutcusticon_sel::after { left: 21px; top: 19px; }
  body.ksnewdesign .checkoutshippingicon > span[style*="width:230px"] { padding-right: 0; }
}
/* Felt på berøringsskjerm: 16px, ellers zoomer iOS inn ved fokus */
@media (hover: none) and (pointer: coarse) {
  body.ksnewdesign #checkoutlayer .ui-ks-input-textfield,
  body.ksnewdesign #checkoutlayer input[type="text"],
  body.ksnewdesign #checkoutlayer select,
  body.ksnewdesign #checkoutcommentlayer textarea { font-size: 16px !important; }
}

/* Nedtrekket for hentested, som dukker opp under valgt fraktmetode */
body.ksnewdesign #shippingmodulelayer select,
body.ksnewdesign #checkoutlayer select {
  font-family: var(--ks-body); font-size: 14px; color: var(--ks-ink);
  padding: 8px 12px; border: 1px solid var(--ks-ink); border-radius: 15px;
  background: var(--ks-white); max-width: 100%;
}


/* --- Kvitteringskort (Figma 54:1833 / 54:1123 / 54:1132) ---------------- */
.ksnd-pop {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(67, 66, 66, .35); cursor: pointer;
}
.ksnd-pop__card {
  position: relative;
  width: 622px; max-width: 100%; min-height: 428px;
  padding: 41px 48px;
  border-radius: 20px; background: var(--ks-white);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box;
}
body.ksnewdesign .ksnd-pop__logo {
  position: absolute; top: 41px; right: 48px;
  width: 105px; height: 25px; max-width: none; display: block;
}
.ksnd-pop__text {
  margin: 0 0 33px;
  font-family: var(--ks-display); font-size: 30px; line-height: 1.2;
  color: var(--ks-ink); text-align: center;
}
.ksnd-pop__tick {
  display: flex; align-items: center; justify-content: center;
  width: 63px; height: 63px; border-radius: 8px; background: var(--ks-mulvarp);
}
body.ksnewdesign .ksnd-pop__tick img { width: 40px; height: 40px; max-width: none; display: block; }

/* ==========================================================================
   NYHETSBREV + FOOTER
   ========================================================================== */
.ksnd-news {
  background: var(--ks-beige);
  padding: 17px 70px 18px;
  display: flex;
  justify-content: flex-end;
}
.ksnd-news__inner { display: flex; align-items: center; gap: 20px; }
.ksnd-news__label {
  font-family: var(--ks-display);
  font-size: 20px;
  line-height: 23px;
  color: var(--ks-ink);
}
.ksnd-news__field {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 476px;
  max-width: 100%;
  height: 41px;
  padding: 9px 32px 8px 37px;
  border-radius: 20px;
  background: var(--ks-white);
  box-sizing: border-box;
}
.ksnd-news__field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 12px;
  color: #000;
}
.ksnd-news__field input::placeholder { color: #000; opacity: 1; }
.ksnd-news__field button { border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0; }
.ksnd-news__field img { width: 24px; height: 24px; display: block; }

.ksnd-footer {
  background: var(--ks-ink);
  color: var(--ks-white);
  padding: 76px 35px 26px 145px;
}
.ksnd-footer__inner { max-width: 1260px; }
.ksnd-footer__cols { display: flex; gap: 79px; flex-wrap: wrap; }
.ksnd-footer__col h4 {
  font-family: var(--ks-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  color: var(--ks-beige);
  margin: 0 0 4px;
  border: 0;
  padding: 0;
}
/* Overskriftene er lenker til hver sin side, men skal se ut som før */
body.ksnewdesign .ksnd-footer__col h4 a {
  color: var(--ks-beige);
  text-decoration: none;
}
body.ksnewdesign .ksnd-footer__col h4 a:hover { text-decoration: underline; }
.ksnd-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ksnd-footer__col li,
.ksnd-footer__col p {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-white);
  margin: 0;
}
body.ksnewdesign .ksnd-footer__col a { color: var(--ks-white); text-decoration: none; }
body.ksnewdesign .ksnd-footer__col a:hover { text-decoration: underline; }

.ksnd-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 46px;
}
.ksnd-footer__copy {
  font-family: var(--ks-body);
  font-weight: 300;
  font-size: 12px;
  color: var(--ks-white);
}
.ksnd-footer__social { display: flex; align-items: center; gap: 16px; }
/* Ikonene er eksportert med beige strek (#E4DDD5) — de er tegnet for mørk
   bunn i Figma og skal derfor ikke inverteres. */
.ksnd-footer__social img { width: 24px; height: 24px; display: block; }
.ksnd-footer__social a:hover img { opacity: .7; }

/* ==========================================================================
   RESPONSIVT
   Designet er tegnet for 1440. Trinnene under holder det hele veien ned:

     ≥ 1360    desktop            Figma-verdiene
     1181–1359 stor laptop        strammere meny, fortsatt én linje
     1024–1180 liten laptop       enda strammere meny
     ≤ 1023    nettbrett + mobil  hamburgermeny
     ≤ 640     mobil              alt i én kolonne
   ========================================================================== */

/* --- Laptop ------------------------------------------------------------- */
@media (max-width: 1359px) {
  body.ksnewdesign { --ks-gutter: 40px; }
  .ksnd-nav { gap: 30px; }
  .ksnd-nav__main { gap: 14px; }
  .ksnd-nav__side { gap: 18px; }
  .ksnd-nav__main > li > a,
  .ksnd-nav__side > li > a { font-size: 13px; }
  .ksnd-footer { padding-left: 70px; }
  .ksnd-steps__grid { width: auto; }
  /* Kortet (497) + adresse og kart (699) + luft er 1256px — for bredt herfra,
     så skjemaet legger seg over adressen og kartet. */
  .ksnd-kontakt { flex-direction: column; gap: 44px; }
  .ksnd-kontakt__card { width: 100%; flex: 1 1 auto; }
  .ksnd-kontakt__aside { min-width: 0; }
}
@media (max-width: 1180px) {
  .ksnd-nav { gap: 20px; }
  .ksnd-nav__main { gap: 10px; }
  .ksnd-nav__side { gap: 13px; }
  .ksnd-nav__main > li > a,
  .ksnd-nav__side > li > a { font-size: 12px; }
  .ksnd-showrom__imgs img { height: 460px; }
  .ksnd-team__grid { gap: 40px 30px; }
  .blogwrapper.ksnd-insp__grid { gap: 56px 40px; }
  .ksnd-post__top { gap: 32px; margin-bottom: 32px; }
  .ksnd-post__row { gap: 30px; margin-bottom: 36px; }
  .ksnd-plist ul.column,
  .ksnd-subcats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Slutter å blø ut til sidekanten — det er en desktop-detalj. Raden brytes
     så CTA-en legger seg under i stedet for å presses ut av containeren. */
  .ksnd-showrom__cta { margin-right: 0; }
  .ksnd-showrom__foot { flex-wrap: wrap; gap: 40px; margin-bottom: 110px; }

  /* Innlogging/registrering: Figma-mellomrommene er for brede her */
  .ksnd-auth__cols { gap: 80px; }
  .ksnd-auth__cols--firma { gap: 64px; }

  /* Min konto: sidemenyen står, men innholdet trenger plassen */
  .ksnd-acc__main { padding-left: 48px; gap: 32px; }
}

/* --- Nettbrett og mobil: hamburgermeny ---------------------------------- */
@media (max-width: 1023px) {
  body.ksnewdesign { --ks-gutter: 24px; }

  .ksnd-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ks-beige);
  }
  .ksnd-burger { display: flex; }
  .ksnd-header__logo img { width: 134px; height: 32px; }

  /* Ikonene i verktøykolonnen byttes ut med dem i topplinja */
  .ksnd-header__icons--bar { display: none; }
  .ksnd-header__icons--top {
    display: flex;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    gap: 14px;
    z-index: 620;
  }

  /* Menylinja blir et panel som felles ned under headeren */
  .ksnd-header__bar {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 4px 20px 20px;
    background: var(--ks-white);
    border-bottom: 1px solid var(--ks-beige);
    box-shadow: 0 16px 28px rgba(67, 66, 66, .12);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 610;
  }
  .ksnd-header.is-open .ksnd-header__bar { display: flex; }
  /* Starter under headeren — den ligger inne i .ksnd-header, så `inset:0`
     ville lagt seg over logoen og ikonene og gjort topplinja grå. */
  .ksnd-header.is-open .ksnd-header__scrim {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 100vh;
    background: rgba(67, 66, 66, .25);
    z-index: 590;
  }

  .ksnd-nav { flex-direction: column; align-items: stretch; gap: 0; flex: 1 1 auto; }
  .ksnd-nav__main,
  .ksnd-nav__side { flex-direction: column; align-items: stretch; gap: 0; flex: 1 1 auto; }
  .ksnd-nav__main > li { position: relative; border-bottom: 1px solid var(--ks-beige); }
  .ksnd-nav__main > li > a,
  .ksnd-nav__side > li > a {
    display: block;
    padding: 13px 44px 13px 0;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
  }
  .ksnd-nav__side { margin-top: 8px; }
  .ksnd-nav__side > li > a { padding: 9px 0; }

  /* Nedtrekket blir trekkspill — hover gjelder ikke på berøring */
  .ksnd-nav__toggle { display: block; }
  .ksnd-nav__sub {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 12px 14px;
    border: 0;
    box-shadow: none;
  }
  .ksnd-nav__main > li:hover > .ksnd-nav__sub,
  .ksnd-nav__main > li:focus-within > .ksnd-nav__sub { display: none; }
  .ksnd-nav__main > li.is-open > .ksnd-nav__sub,
  .ksnd-nav__main > li.is-open:hover > .ksnd-nav__sub,
  .ksnd-nav__main > li.is-open:focus-within > .ksnd-nav__sub { display: block; }
  .ksnd-nav__sub a { padding: 7px 0; font-size: 15px; }
  .ksnd-nav__sub a:hover { background: transparent; text-decoration: underline; }
  /* Tredje nivå tas på kategorisiden, som viser dem som rutenett */
  .ksnd-nav__sub .ksnd-nav__sub { display: none !important; }
  /* nivå 2 er skjult i hamburgermenyen, så pila ville lovet noe som ikke skjer */
  .ksnd-nav__sub > li:has(> .ksnd-nav__sub) > a { padding-right: 0; }
  .ksnd-nav__sub > li:has(> .ksnd-nav__sub) > a::after { content: none; }

  /* Søkefeltet fyller panelet — ingen utvidelse her, det er allerede fullbredde */
  .ksnd-header__tools { width: 100%; flex: 1 1 auto; height: auto; margin-top: 16px; }
  .ksnd-search { position: static; width: 100%; transition: none; }

  /* --- Innhold --- */
  .ksnd-pagehero { height: 380px; }
  .ksnd-pagetitle { font-size: 33px; }
  .ksnd-hero { min-height: 440px; padding: 60px 40px; }
  .ksnd-hero__kicker { font-size: 30px; }
  .ksnd-hero__text { font-size: 20px; line-height: 22px; }
  .ksnd-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 36px; width: auto; }
  .ksnd-step__nr { flex-basis: 62px !important; font-size: 130px !important; }
  .ksnd-promo__row { gap: 28px; }
  /* I to spalter på smal skjerm er feltkortet det høyeste. Karusellen må
     da slippe forholdet sitt og strekke seg like høyt, ellers står de to
     korta ulikt høye ved siden av hverandre. */
  .ksnd-promo__card--karusell { aspect-ratio: auto; min-height: 380px; }
  .ksnd-duo, .ksnd-about { flex-direction: column; gap: 40px; }
  .ksnd-duo__img, .ksnd-about__img img { height: 340px; }
  .ksnd-cats { margin-top: 44px; }
  .ksnd-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; max-width: none; }
  .ksnd-kval__grid { gap: 28px; }
  .ksnd-kval__kort h3 { font-size: 21px; line-height: 27px; }
  .ksnd-about { margin: 60px 0 48px; }
  .ksnd-subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 24px; margin-top: 40px; }
  .ksnd-subcat__name { font-size: 17px; }
  .ksnd-catdesc { margin-top: 60px; }
  .ksnd-catband { padding: 30px 0 34px; }
  .ksnd-catband__title { font-size: 30px; }
  .ksnd-siblings { gap: 30px; margin: 34px 0 32px; }
  .ksnd-plist ul.column { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  body.ksnewdesign .ksnd-plist ul.column li a.xlisttitle { font-size: 17px; min-height: 44px; }
  .ksnd-showrom__imgs { grid-template-columns: 1fr; gap: 24px; }
  .ksnd-showrom__imgs img { height: 380px; }
  .ksnd-showrom__body { column-count: 1; }
  .ksnd-showrom__body td { display: block; width: 100% !important; }
  .ksnd-showrom__foot { flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 72px; }
  .ksnd-showrom__person { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ksnd-showrom__cta {
    width: 100%; height: auto; padding: 36px 24px;
    margin-right: 0; border-radius: 20px;
  }
  .ksnd-omoss__cols { column-count: 1; }
  .ksnd-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
  .blogwrapper.ksnd-insp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .ksnd-post__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ksnd-post__row--n1 { grid-template-columns: 1fr; }
  .ksnd-faq__bandinner { gap: 30px; }
  .ksnd-faq__picklist { gap: 48px; }
  .ksnd-typer { gap: 56px 26px; }
  .ksnd-typer__name { font-size: 20px; line-height: 24px; }
  .ksnd-post__shop .ksnd-plist ul.column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .ksnd-insp__filters { gap: 14px; }
  .ksnd-kontakt { flex-direction: column; gap: 40px; margin-top: 40px; }
  .ksnd-kontakt__card { width: 100%; flex: 1 1 auto; }
  .ksnd-kontakt__aside { flex-direction: column; align-items: stretch; gap: 28px; }
  .ksnd-kontakt__adr { width: 100%; flex: 1 1 auto; text-align: left; }
  .ksnd-kontakt__map { width: 100%; flex: 1 1 auto; }
  .ksnd-kontakt__map iframe { width: 100%; height: 320px; }
  .ksnd-news { justify-content: center; padding: 17px 20px 18px; }
  .ksnd-footer { padding: 50px 30px 26px; }
  .ksnd-footer__cols { gap: 40px; }

  /* To spalter får ikke plass — skjema over, valg/brukerinfo under.
     Feltene slipper den faste 424px-bredden og fyller spalta. */
  .ksnd-auth { padding-bottom: 56px; }
  .ksnd-auth__cols, .ksnd-auth__cols--firma { flex-direction: column; gap: 44px; align-items: stretch; }
  .ksnd-auth__col--form, .ksnd-auth__col--choose,
  .ksnd-auth__cols--firma .ksnd-auth__col { width: 100%; flex: 1 1 auto; max-width: 424px; }
  .ksnd-auth__col--choose { padding-top: 0; }
  .ksnd-auth__single { width: 100%; max-width: 424px; }
  .ksnd-auth__intro { margin-bottom: 34px; }

  /* Min konto: tre spalter får ikke plass. Sidemenyen legger seg øverst med
     en vannrett skillelinje i stedet for den loddrette. */
  .ksnd-acc { flex-direction: column; gap: 36px; padding-bottom: 56px; }
  .ksnd-accnav {
    flex: 1 1 auto; width: 100%; padding-right: 0; padding-bottom: 28px;
    border-right: 0; border-bottom: 1px solid #D9D3CB;
  }
  .ksnd-accnav__list { display: flex; flex-wrap: wrap; gap: 10px 32px; }
  .ksnd-accnav__item { margin: 0; }
  .ksnd-acc__main { padding-left: 0; flex-direction: column; gap: 44px; }
  .ksnd-acc__main--wide { padding-left: 0; }
  .ksnd-acc__col--wide { max-width: none; }
  .ksnd-acc__col { flex: 1 1 auto; width: 100%; max-width: 424px; }
  .ksnd-acc__title--spaced { margin-top: 44px; }
}

/* --- Mobil -------------------------------------------------------------- */
@media (max-width: 640px) {
  body.ksnewdesign { --ks-gutter: 18px; }

  .ksnd-header { padding: 14px 16px; }
  .ksnd-burger { left: 16px; }
  .ksnd-header__icons { right: 16px; gap: 12px; }
  .ksnd-header__logo img { width: 120px; height: 28px; }
  .ksnd-header__bar { padding: 4px 16px 18px; }
  body.ksnewdesign a.ksnd-banner { font-size: 13px; line-height: 17px; padding: 8px 16px; margin-bottom: 16px; }
  body.ksnewdesign:has(.ksnd-banner) .ksnd-header { padding-bottom: 16px; }

  .ksnd-pagehero { height: 260px; }
  .ksnd-pagetitle { font-size: 26px; }
  .ksnd-h { font-size: 24px; }
  body.ksnewdesign .ksnd-adrskjema > b,
  body.ksnewdesign .ksnd-adrskjema b[style*="font-size:15px"] { font-size: 24px !important; }

  .ksnd-hero { min-height: 380px; padding: 40px 20px; }
  .ksnd-hero__inner { width: 100%; }
  .ksnd-hero__kicker { font-size: 26px; }
  .ksnd-hero__text { font-size: 18px; line-height: 22px; }

  .ksnd-promo__row { grid-template-columns: 1fr; gap: 24px; }
  /* Står korta under hverandre, skal jubileumsfeltet komme først — det er
     budskapet, karusellen er stemning. Ingen av korta har lenker, så
     order bryter ingen tabulatorrekkefølge. */
  .ksnd-promo__card--felt { order: -1; }
  .ksnd-promo__card--karusell { aspect-ratio: 1 / 1; min-height: 0; }
  .ksnd-steps { padding: 20px 0 42px; }
  .ksnd-steps__title { font-size: 25px; line-height: 31px; margin-bottom: 34px; }
  /* To og to på linje. I ei 168px brei celle er det ikke plass til tallet
     ved siden av teksten — tekstspalta ble 100px, titlene brakk i to og de
     fire blokkene fikk ulik høyde (111/131/154/154px). Tallet står derfor
     over ikonet, og alt er midtstilt. Da blir alle fire cellene 168x175px
     med én tittellinje og to tekstlinjer. */
  .ksnd-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 18px; }
  .ksnd-step { flex-direction: column; align-items: center; text-align: left; gap: 0; }
  .ksnd-step__body { max-width: none; width: 100%; text-align: center; }
  .ksnd-step__body img { margin: 0 auto 8px; }
  /* !important fordi regelen på 1023px setter flex-basis og font-size med
     !important, og den gjelder også her. */
  body.ksnewdesign .ksnd-step__nr {
    flex: 0 0 auto !important;
    font-size: 72px !important;
    line-height: .8;
    margin: 0 0 6px;
  }
  .ksnd-duo { margin-top: 36px; }
  .ksnd-duo__img, .ksnd-about__img img { height: 250px; }
  .ksnd-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .ksnd-jul { margin-top: 48px; padding: 40px 0 44px; }
  .ksnd-jul__h { font-size: 26px; line-height: 32px; }
  .ksnd-jul__bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ksnd-kval { margin-top: 48px; }
  .ksnd-kval__grid { grid-template-columns: 1fr; gap: 32px; }
  .ksnd-cat span { font-size: 17px; }
  .ksnd-about { margin: 44px 0 40px; }

  .ksnd-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; margin-top: 30px; }
  .ksnd-subcat__name { font-size: 17px; }

  .ksnd-catband { padding: 24px 0 28px; margin-top: 16px; }
  .ksnd-catband__title { font-size: 26px; margin-bottom: 10px; }
  .ksnd-siblings { gap: 20px; margin: 26px 0 24px; }
  .ksnd-sibling, .ksnd-sibling__img { width: 84px; }
  .ksnd-sibling__img { height: 84px; }
  .ksnd-plist ul.column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
  body.ksnewdesign .ksnd-plist ul.column li a.xlisttitle { font-size: 16px; margin-top: 12px; min-height: 36px; }
  .ksnd-plist ul.column li .xlistprice { font-size: 14px; }
  .ksnd-plist ul.column li [id^="listfav"] { margin-top: 14px; }
  .ksnd-plist .subcat_nav { flex-direction: column; align-items: flex-start; gap: 12px; }

  .ksnd-showrom__band { padding: 34px 18px 36px; }
  .ksnd-showrom__band h1 { font-size: 26px; }
  .ksnd-showrom__imgs img { height: 260px; }
  .ksnd-showrom__person img { width: 150px; height: 150px; flex-basis: 150px; }
  .ksnd-showrom__rule { margin-top: 54px; }
  .ksnd-showrom__foot { margin-top: 44px; }

  .ksnd-team__grid { grid-template-columns: 1fr; gap: 30px; }
  .blogwrapper.ksnd-insp__grid { grid-template-columns: 1fr; gap: 40px; }
  .ksnd-post__top { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
  .ksnd-post__row { grid-template-columns: 1fr; gap: 24px; }
  .ksnd-post__quote { aspect-ratio: auto; padding: 40px 24px; }
  .ksnd-post__row--n1 .ksnd-post__quote > span { font-size: 20px; line-height: 26px; }
  .ksnd-faq__band { min-height: 0; }
  .ksnd-faq__bandinner { flex-direction: column; gap: 26px; padding: 30px 0; }
  .ksnd-faq__picks { margin-top: 40px; }
  .ksnd-typer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .ksnd-typer__name { font-size: 17px; line-height: 22px; margin-top: 12px; }
  body.ksnewdesign .ksnd-typer__title { font-size: 24px; margin: 24px 0 28px; }
  body.ksnewdesign .ksnd-faq__picks h2, body.ksnewdesign .ksnd-faq__title { font-size: 24px; }
  body.ksnewdesign .ksnd-faq__item > summary { padding: 8px 40px 8px 16px; justify-content: flex-start; text-align: left; }
  .ksnd-faq__item > summary::before, .ksnd-faq__item > summary::after { right: 14px; width: 12px; }
  .ksnd-post__title, .ksnd-post__shoptitle { font-size: 24px !important; }
  body.ksnewdesign .ksnd-cookies__band h1 { font-size: 22px; }
  .ksnd-cookies__band { min-height: 120px; }
  .ksnd-cookies__card { padding: 20px 20px 24px; }
  .ksnd-cookies__card--slim { padding: 20px; }
  .ksnd-cookies__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  body.ksnewdesign #gdpr-cookie-message { padding: 28px 24px 32px; background-position: right 24px top 26px; }
  body.ksnewdesign #gdpr-cookie-message li { width: 100%; margin-bottom: 12px; }
  body.ksnewdesign #gdpr-cookie-message p:last-child { flex-wrap: wrap; }
  .ksnd-insp__band { min-height: 0; padding: 34px 0; }
  .ksnd-insp__sorttitle { margin: 34px 0 18px; }
  .ksnd-insp__filters { margin-bottom: 34px; }
  .ksnd-team__card { padding: 18px 16px; }

  .ksnd-kontakt__card { padding: 30px 20px 20px; }
  .ksnd-kontakt__map iframe { height: 250px; }

  .ksnd-news { flex-direction: column; }
  .ksnd-news__inner { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .ksnd-news__label { text-align: center; }
  .ksnd-news__field { width: 100%; padding: 9px 18px; }

  .ksnd-footer { padding: 40px 18px 24px; }
  .ksnd-footer__cols { gap: 28px; }
  .ksnd-footer__col { flex: 1 1 140px; }
  .ksnd-footer__bottom { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 32px; }

  /* «Logg inn» og glemt-passord får ikke plass side om side */
  .ksnd-auth__row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ksnd-auth__title { font-size: 26px; }
  .ksnd-field__pair { gap: 14px; }
  .ksnd-field--zip { width: 40%; flex: 0 0 40%; }
  .ksnd-field--city { flex: 1 1 auto; }
  .ksnd-fieldgrp--zip { flex: 0 0 40%; width: 40%; }
  .ksnd-fieldgrp--city { flex: 1 1 auto; }
  .ksnd-accnav__list { gap: 10px 22px; }
  .ksnd-accnav__title, .ksnd-acc__title { font-size: 26px; }
  .ksnd-carttitle { font-size: 26px; margin-bottom: 28px; }
  .ksnd-pop__card { min-height: 320px; padding: 30px 24px; }
  .ksnd-pop__text { font-size: 24px; }

  /* Ordrekortet: tre spalter far ikke plass */
  .ksnd-order { padding: 16px; }
  .ksnd-order__grid { flex-direction: column; gap: 16px; }
  .ksnd-order__meta, .ksnd-order__side { flex: 1 1 auto; width: 100%; text-align: left; }
  .ksnd-order__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ksnd-more { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .ksnd-more__btn { grid-column: 1; }
  .ksnd-order__actions { flex-wrap: wrap; }
  body.ksnewdesign .ksnd-order__thumbs img { width: 56px; }
}

/* Mobil: Safari på iPhone zoomer inn når man trykker i et felt med mindre
   skrift enn 16 px, og siden må zoomes ut igjen etterpå. Gjelder alle
   berøringsskjermer, også iPad. */
@media (hover: none) and (pointer: coarse) {
  body.ksnewdesign input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  body.ksnewdesign select,
  body.ksnewdesign textarea,
  .ksnd-kontakt__card #zzxf input[type="text"],
  .ksnd-kontakt__card #zzxf textarea { font-size: 16px !important; }
}

/* Smal skjerm: fanene under produktet (Om produktet / Tilpasning / Pris og
   antall / Produksjon) fikk ikke plass og gikk ut over kanten. Nå kan rekka
   skrolles sidelengs. */
@media (max-width: 640px) {
  .ksnd-pinfo__tablist { gap: 20px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .ksnd-pinfo__tablist::-webkit-scrollbar { display: none; }
  body.ksnewdesign .ksnd-pinfo__tab { font-size: 20px !important; line-height: 1.2 !important; white-space: nowrap; }
}

/* Et spørsmål eller et papir-/konvoluttkort som åpnes fra en lenke
   (/infosenter/<fane>/<id>/) skrolles fram med litt luft over, ikke klistret
   til kanten. */
.ksnd-faq__item,
.ksnd-typer__card { scroll-margin-top: 24px; }

/* Spørsmålet i infosenteret er en lenke til artikkeladressen, men skal se ut
   som før: samme farge og skrift, uten understrek, og fylle hele boksen. */
body.ksnewdesign .ksnd-faq__lenke {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: inherit;
  color: inherit;
  text-decoration: none;
}

/* Matchende produkter på produktsida (F3): som i det gamle designet, men med
   overskrift og rutenett i den nye stilen. .relatedxprodshigher er desktop,
   .relatedxprodslower smal skjerm; det gamle temaet bytter mellom dem. */
body.ksnewdesign .relatedxprodshigher,
body.ksnewdesign .relatedxprodslower { clear: both; }
body.ksnewdesign .relatedxprodshigher > div,
body.ksnewdesign .relatedxprodslower > div { width: 100% !important; }
body.ksnewdesign .relatedxprodshigher .ksnd-related__head,
body.ksnewdesign .relatedxprodslower .ksnd-related__head {
  float: none !important; display: block; margin: 40px 0 18px 0 !important; width: 100%;
}
body.ksnewdesign .relatedxprodshigher td,
body.ksnewdesign .relatedxprodslower td {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px 16px;
}
body.ksnewdesign .relatedxprodslower td { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
body.ksnewdesign .relatedxprodshigher td > span.custicon,
body.ksnewdesign .relatedxprodslower td > span.custicon {
  float: none !important; width: auto !important; margin: 0 !important;
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px;
  font-family: var(--ks-body); font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .06em; line-height: 1.3; white-space: normal !important;
  color: var(--ks-ink);
}
body.ksnewdesign .relatedxprodshigher td > span.custicon img,
body.ksnewdesign .relatedxprodslower td > span.custicon img {
  width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; display: block;
}
body.ksnewdesign .relatedxprodshigher td > span.custicon br,
body.ksnewdesign .relatedxprodslower td > span.custicon br { display: none; }

/* Toppbildet på kategorisidene (mts_banners) vises bare når
   KS_NDES_CATEGORY_BANNER er slått på i admin. */
body.ksnewdesign .ksnd-catbanner { margin: 12px 0 0; }
body.ksnewdesign .ksnd-catbanner img { display: block; width: 100%; height: auto; }

/* --- Navnelista i handlekurven, som popup ------------------------------- */
/* Selve lista bygges av ext/online_lists/, vi rammer den bare inn. */
body.ksnewdesign .ksnd-listmodal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(67, 66, 66, .45);
  padding: 32px 16px;
  overflow: auto;
}
/* Midtstilt. Panelet er aldri høyere enn vinduet - det ruller innvendig -
   så midtstillinga kan ikke klippe toppen av lista. */
body.ksnewdesign .ksnd-listmodal.is-aapen { display: flex; align-items: center; justify-content: center; }
/* Sida bak låses i posisjon. overflow:hidden alene holder ikke: lista gjør
   $("html,body").animate({scrollTop: ...}) rett etter at den er vist, og da
   ville sida bak rykke nedover. Med position:fixed har dokumentet ingen
   rulling å animere, og vi setter den tilbake ved lukking. */
body.ksnewdesign.ksnd-listmodal-aapen {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}
body.ksnewdesign .ksnd-listmodal__panel {
  box-sizing: border-box;
  width: 100%; max-width: 1100px; max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  background: var(--ks-white);
  border: 1px solid var(--ks-ink); border-radius: 15px;
  box-shadow: 0 20px 48px rgba(67, 66, 66, .22);
}
body.ksnewdesign .ksnd-listmodal__head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; border-bottom: 1px solid var(--ks-ink);
}
body.ksnewdesign .ksnd-listmodal__tittel {
  font-family: var(--ks-body); font-size: 16px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ks-ink);
}
body.ksnewdesign .ksnd-listmodal__lukk {
  padding: 0; width: 32px; height: 32px; line-height: 1;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; color: var(--ks-ink);
}
body.ksnewdesign .ksnd-listmodal__lukk:hover { color: var(--ks-mulvarp); }
body.ksnewdesign .ksnd-listmodal__kropp {
  flex: 1 1 auto; overflow: auto; padding: 20px;
}
/* Laget flyttes hit fra produktraden; malen gir det inline display:none */
body.ksnewdesign .ksnd-listmodal__kropp > #olsitexlayer { width: 100% !important; }
@media (max-width: 900px) {
  body.ksnewdesign .ksnd-listmodal { padding: 12px 8px; }
  body.ksnewdesign .ksnd-listmodal__panel { max-height: calc(100vh - 24px); }
  body.ksnewdesign .ksnd-listmodal__kropp { padding: 12px; }
}

/* --- Navnelista: felt og knapper som i Figma ----------------------------- */
/* Figma «Navn/adresselister» (node 61:4724). Målene derfra:
   felt 22px høye, 1px #434242, helt runde (radius = halve høyda), Karla 12/20.
   Knapper 34px høye, radius 20, 17px sideluft, Karla 12/30 — mørk #434242 med
   beige tekst for hovedhandlinga, beige med svart tekst for resten.
   Gjelder overalt lista vises i nytt design, ikke bare i handlekurvpopupen. */
body.ksnewdesign .cpinput,
body.ksnewdesign #addlinesnum,
body.ksnewdesign #edolistnamex,
body.ksnewdesign #defqty {
  box-sizing: border-box;
  height: 22px !important; min-height: 22px;
  padding: 0 12px !important; margin: 2px 0;
  border: 1px solid var(--ks-ink) !important; border-radius: 11px !important;
  background: var(--ks-white) !important; box-shadow: none !important;
  font-family: var(--ks-body) !important; font-size: 12px !important;
  line-height: 20px !important; font-weight: 400 !important;
  color: var(--ks-ink) !important;
}
body.ksnewdesign .cpinput:focus,
body.ksnewdesign #addlinesnum:focus,
body.ksnewdesign #edolistnamex:focus { outline: none; border-color: var(--ks-mulvarp) !important; }
/* Antallsfeltet er smalt og står med tall midt i */
body.ksnewdesign #addlinesnum { width: 46px !important; padding: 0 6px !important; text-align: center; }
/* Postnummerfeltet er 70px i malen, og med runde hjørner og sideluft blir det
   for trangt til ledeteksten «Postnummer». Figma har det bredere enn så. */
body.ksnewdesign input#zip.cpinput { width: 120px !important; }

/* Knappene i lista. Malen setter bredde, farge og vekt rett på elementet,
   så det må overstyres. jQuery UI legger teksten i en egen span. */
body.ksnewdesign #olsitexlayer button:not(.ksnd-teller__knapp),
body.ksnewdesign #custlisttools,
body.ksnewdesign #storeclose,
body.ksnewdesign #newmem,
body.ksnewdesign #edlistname,
body.ksnewdesign #updlistname,
body.ksnewdesign #cancupdlistname,
body.ksnewdesign #capprovelist,
body.ksnewdesign #olcancel,
body.ksnewdesign #olstore,
body.ksnewdesign #olrowdelete {
  box-sizing: border-box;
  width: auto !important; min-width: 0 !important; height: 34px !important;
  padding: 2px 17px !important; margin: 0 8px 0 0;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-beige) !important; color: #000 !important;
  font-family: var(--ks-body) !important; font-size: 12px !important;
  line-height: 30px !important; font-weight: 400 !important;
  text-align: center; white-space: nowrap; cursor: pointer;
}
body.ksnewdesign #olsitexlayer button:not(.ksnd-teller__knapp) .ui-ks-smallbuttontext,
body.ksnewdesign #custlisttools .ui-ks-smallbuttontext,
body.ksnewdesign #storeclose .ui-ks-smallbuttontext {
  font-family: var(--ks-body) !important; font-size: 12px !important;
  line-height: 30px !important; font-weight: 400 !important;
}
/* Hovedhandlingene er mørke, slik Figma viser «Oppdater» og «Lagre».
   Selektorene må være minst like tunge som regelen over — den treffer med
   «#olsitexlayer button», og en ren id-selektor taper mot den. */
body.ksnewdesign #olsitexlayer button#storeclose,
body.ksnewdesign #olsitexlayer button#olstore,
body.ksnewdesign #olsitexlayer button#updlistname,
body.ksnewdesign #olsitexlayer button#capprovelist,
body.ksnewdesign button#storeclose,
body.ksnewdesign button#olstore,
body.ksnewdesign button#updlistname,
body.ksnewdesign button#capprovelist {
  background: var(--ks-ink) !important; color: var(--ks-beige) !important;
}
body.ksnewdesign button#storeclose .ui-ks-smallbuttontext,
body.ksnewdesign button#olstore .ui-ks-smallbuttontext,
body.ksnewdesign button#capprovelist .ui-ks-smallbuttontext { color: var(--ks-beige) !important; }
body.ksnewdesign #olsitexlayer button:not(.ksnd-teller__knapp):hover { opacity: .85; }

/* Slettekrysset på hver rad: Figma har et tynt kryss i gråsvart, ikke den
   gamle røde stjerna. Bildet byttes ut med content, så klikket beholdes. */
body.ksnewdesign #olsitexlayer img.custicon {
  width: 16px !important; height: 16px !important; padding: 2px !important;
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23434242' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}

/* Navnelinja øverst i lista står på hvitt i Figma, med en strek under */
body.ksnewdesign #olsitexlayer td[style*="background-color:#EEEEEE"] {
  background: none !important; border-bottom: 1px solid var(--ks-ink) !important;
}
body.ksnewdesign #olsitexlayer .olistname {
  font-family: var(--ks-body); font-size: 12px; color: var(--ks-ink);
}

/* Antallsteller: utkanta pille med minus og pluss, Figma node 61:4792 —
   1px svart, radius 20, 7px/17px luft, Karla 12. */
body.ksnewdesign .ksnd-teller {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 28px; padding: 0 12px; margin-left: 8px;
  border: 1px solid #000; border-radius: 20px;
  vertical-align: middle;
}
body.ksnewdesign .ksnd-teller__knapp,
body.ksnewdesign #olsitexlayer .ksnd-teller__knapp {
  padding: 0; width: 14px; height: 20px; line-height: 20px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--ks-body); font-size: 14px; color: #000;
}
body.ksnewdesign .ksnd-teller__knapp:hover { color: var(--ks-mulvarp); }
body.ksnewdesign .ksnd-teller input#addlinesnum {
  width: 28px !important; height: 20px !important; min-height: 0;
  padding: 0 !important; margin: 0;
  border: 0 !important; border-radius: 0 !important; background: none !important;
  font-size: 12px !important; line-height: 20px !important; text-align: center;
}
body.ksnewdesign .ksnd-teller input#addlinesnum:focus { border: 0 !important; outline: none; }

/* Foten i lista: «Nye linjer» med telleren til venstre, «Lagre» til høyre.
   Malen skriver lagreknappen først med float:left, så floaten må vekk. */
body.ksnewdesign #olsitexlayer td.ksnd-listefot {
  display: flex; align-items: center; gap: 12px;
  padding-right: 0 !important;
}
body.ksnewdesign #olsitexlayer td.ksnd-listefot > * { float: none !important; }
body.ksnewdesign #olsitexlayer td.ksnd-listefot > span { width: auto !important; }
body.ksnewdesign #olsitexlayer td.ksnd-listefot > button#storeclose {
  margin-left: auto; margin-right: 0;
}

/* Navnelinja: ledetekst over navnet, og «Endre navn» på samme linje.
   Malen lar knappen flyte til høyre, og da faller den ned mot streken under. */
body.ksnewdesign #olsitexlayer td.ksnd-navnelinje {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0 !important;
}
body.ksnewdesign #olsitexlayer td.ksnd-navnelinje > span { float: none !important; }
body.ksnewdesign .ksnd-listenavn { display: block; }
body.ksnewdesign .ksnd-listenavn__merke {
  display: block;
  font-family: var(--ks-body); font-size: 11px; font-weight: 400;
  letter-spacing: .04em; color: var(--ks-mulvarp);
}
body.ksnewdesign .ksnd-listenavn #mlistname {
  display: block; float: none !important;
  font-family: var(--ks-body); font-size: 14px; font-weight: 700; color: var(--ks-ink);
}
/* Når navnet redigeres skriver malen sin egen ledetekst i feltet */
body.ksnewdesign .ksnd-listenavn:has(input:not([type="hidden"])) .ksnd-listenavn__merke { display: none; }
body.ksnewdesign .ksnd-listenavn:has(input:not([type="hidden"])) #mlistname { font-weight: 400; font-size: 12px; }

/* --- Raden redigeres rett i lista ---------------------------------------- */
/* Klikk på en rad gjør den om til felt. «Oppdater» og «Slett» der er unødige:
   lista lagrer alt av seg selv — å klikke en annen rad kaller storeilRow på
   den forrige, Enter og piltastene gjør det samme, og «Lagre» nederst lagrer
   den åpne raden før den lukker. Sletting gjør man med søppelbøtta i raden. */
body.ksnewdesign #olsitexlayer button#olrowupdate { display: none !important; }
/* «Slett» beholdes, men som den samme røde søppelbøtta de lukkede radene har.
   Da slipper vi å bygge en ny knapp — onClick-en i malen sletter alt riktig. */
body.ksnewdesign #olsitexlayer span:has(> button#olrowupdate) {
  width: auto !important; margin-left: auto; white-space: nowrap;
}
body.ksnewdesign #olsitexlayer button#olrowdelete {
  width: 24px !important; height: 24px !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16' fill='none'%3E%3Cg transform='translate(1.875 1.25)' stroke='%23990000' stroke-linecap='round'%3E%3Cpath d='M10.8125 2.6875L10.4252 8.95318C10.3262 10.554 10.2767 11.3545 9.87547 11.9299C9.67708 12.2144 9.42166 12.4546 9.12544 12.635C8.52632 13 7.72437 13 6.12046 13C4.51445 13 3.71144 13 3.11191 12.6343C2.8155 12.4535 2.56 12.213 2.36168 11.928C1.96055 11.3516 1.91216 10.5501 1.81538 8.94697L1.4375 2.6875'/%3E%3Cpath d='M0.5 2.6875H11.75M8.65983 2.6875L8.23316 1.80733C7.94973 1.22266 7.80802 0.930327 7.56357 0.748005C7.50935 0.707563 7.45193 0.67159 7.39189 0.640439C7.1212 0.5 6.79632 0.5 6.14658 0.5C5.48052 0.5 5.14749 0.5 4.8723 0.646326C4.81131 0.678756 4.75311 0.716186 4.69831 0.758231C4.45102 0.947938 4.31289 1.25097 4.03663 1.85704L3.65808 2.6875'/%3E%3Cpath d='M4.5625 9.5625L4.5625 5.8125'/%3E%3Cpath d='M7.6875 9.5625L7.6875 5.8125'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
}
body.ksnewdesign #olsitexlayer button#olrowdelete .ui-ks-smallbuttontext { display: none !important; }
body.ksnewdesign #olsitexlayer button#olrowdelete:hover { opacity: .7; }

/* Feltene i den åpne raden får samme pilleform som resten (Figma 61:4724) */
body.ksnewdesign #olsitexlayer .olistfieldentry {
  box-sizing: border-box;
  height: 22px !important; max-width: none !important;
  padding: 0 12px !important; margin: 2px 4px 2px 0;
  border: 1px solid var(--ks-ink) !important; border-radius: 11px !important;
  background: var(--ks-white) !important; box-shadow: none !important;
  font-family: var(--ks-body) !important; font-size: 12px !important;
  line-height: 20px !important; color: var(--ks-ink) !important;
}
body.ksnewdesign #olsitexlayer .olistfieldentry:focus {
  outline: none; border-color: var(--ks-mulvarp) !important;
}
body.ksnewdesign #olsitexlayer .olistviewentry {
  font-family: var(--ks-body); font-size: 12px; color: var(--ks-ink);
}

/* Slettekrysset blir ei rød søppelbøtte — Figmas «delete-02», farga rød.
   Bildet byttes med content, så klikket på ikonet virker som før. */
body.ksnewdesign #olsitexlayer img.custicon {
  width: 18px !important; height: 18px !important; padding: 2px !important;
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16' fill='none'%3E%3Cg transform='translate(1.875 1.25)' stroke='%23990000' stroke-linecap='round'%3E%3Cpath d='M10.8125 2.6875L10.4252 8.95318C10.3262 10.554 10.2767 11.3545 9.87547 11.9299C9.67708 12.2144 9.42166 12.4546 9.12544 12.635C8.52632 13 7.72437 13 6.12046 13C4.51445 13 3.71144 13 3.11191 12.6343C2.8155 12.4535 2.56 12.213 2.36168 11.928C1.96055 11.3516 1.91216 10.5501 1.81538 8.94697L1.4375 2.6875'/%3E%3Cpath d='M0.5 2.6875H11.75M8.65983 2.6875L8.23316 1.80733C7.94973 1.22266 7.80802 0.930327 7.56357 0.748005C7.50935 0.707563 7.45193 0.67159 7.39189 0.640439C7.1212 0.5 6.79632 0.5 6.14658 0.5C5.48052 0.5 5.14749 0.5 4.8723 0.646326C4.81131 0.678756 4.75311 0.716186 4.69831 0.758231C4.45102 0.947938 4.31289 1.25097 4.03663 1.85704L3.65808 2.6875'/%3E%3Cpath d='M4.5625 9.5625L4.5625 5.8125'/%3E%3Cpath d='M7.6875 9.5625L7.6875 5.8125'/%3E%3C/g%3E%3C/svg%3E");
  cursor: pointer;
}
body.ksnewdesign #olsitexlayer img.custicon:hover { opacity: .7; }
/* Den åpne raden får en grå stripe bak radnummeret i malen. De lukkede
   radene har den ikke, så den tas bort her også. */
body.ksnewdesign #olsitexlayer span[style*="background-color:#EEEEEE"] {
  background: none !important;
  font-family: var(--ks-body); font-size: 12px; color: var(--ks-ink);
}

/* Raden skal ikke hoppe når man klikker i den. Malen gir radnummeret i den
   åpne raden width:100%, så feltet blir dyttet ned på egen linje, og raden
   blir mer enn dobbelt så høy som de lukkede. Den åpne raden ligger i
   #edrowlayer, så den kan rettes uten å røre de lukkede. */
body.ksnewdesign #edrowlayer > div {
  display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px;
  float: none !important; width: 100% !important;
}
body.ksnewdesign #edrowlayer br { display: none !important; }
body.ksnewdesign #edrowlayer > div > span { float: none !important; }
body.ksnewdesign #edrowlayer > div > span[style*="background-color:#EEEEEE"] {
  width: 30px !important; flex: 0 0 30px; height: auto !important;
}
body.ksnewdesign #edrowlayer .olistfieldentrycontainer {
  width: auto !important; max-width: none !important; margin: 0;
}
/* Felt som malen gir full bredde skal fylle raden; de med fast bredde
   (postnummer og liknende) beholder sin. */
body.ksnewdesign #edrowlayer .olistfieldentrycontainer:has(.olistfieldentry[style*="width:100%"]) {
  flex: 1 1 120px; min-width: 0;
}
body.ksnewdesign #edrowlayer .olistfieldentry[style*="width:100%"] { width: 100% !important; }
/* Feltet er litt høyere enn Figmas 22px, slik at en lukket og en åpen rad
   blir like høye og lista står stille når man klikker seg nedover. */
body.ksnewdesign #olsitexlayer .olistfieldentry {
  height: 26px !important; border-radius: 13px !important; margin: 2px 0;
}
body.ksnewdesign #olsitexlayer div[id^="listplmid"] {
  height: auto !important; min-height: 30px;
}
body.ksnewdesign #olsitexlayer div[id^="listplmid"] > span { line-height: 30px; }

/* Figma (54:2435) har rekkefølgen Oppdater – Rediger – Slett, og all tekst i
   raden i svart 14px. Malen skriver Slett før Rediger, så de bytter plass. */
body.ksnewdesign span[id^="shcedbut_"] { order: 1; }
body.ksnewdesign span[id^="shcdelbut_"] { order: 2; }
body.ksnewdesign .shcartnumber,
body.ksnewdesign .shcartbutton,
body.ksnewdesign .shcartbuttontext { font-size: 14px; color: #000 !important; }

/* «Rediger liste»: teksten ligger i en egen span som tar farge fra temaet,
   og ble stående i oransje oppå den mørke pilla. */
body.ksnewdesign .contentContainer .ui-ks-smallbutton .ui-ks-smallbuttontext,
body.ksnewdesign .contentContainer .ui-ks-smallbutton .ui-button-text {
  color: var(--ks-beige) !important; font-family: var(--ks-body) !important;
  font-size: 13px !important; font-weight: 400 !important;
}

/* Navnelistelinja under «Individualisering» */
body.ksnewdesign .contentContainer #listlyr_ { }
body.ksnewdesign td.schoptiontd a { color: var(--ks-ink); }

/* Den lille forklaringa under delsummen */
body.ksnewdesign .contentContainer span[style*="line-height:12px"] {
  font-family: var(--ks-body); font-size: 12px !important; line-height: 18px !important;
  color: var(--ks-mulvarp) !important;
}

/* Produktnummeret under navnet: Karla 14, ikke display-skrifta fra tittelen */
body.ksnewdesign .ksnd-prodnr {
  display: block; margin-top: 2px;
  font-family: var(--ks-body) !important; font-size: 14px !important;
  line-height: 20px; font-weight: 500; color: var(--ks-ink) !important;
  text-transform: none;
}
/* Valglinjene: Figma har 35px mellom hver, og cella legger på egen luft */
body.ksnewdesign td.schoptiontd { padding: 0 !important; }
/* Fargeprøva står i samme svarte skrift som resten av valgene */
body.ksnewdesign td.schoptiontd > span[style*="font-size:10px"] {
  color: #000 !important; line-height: 20px;
}
/* Figma skriver handlingene med vanlige små bokstaver, ikke versaler */
body.ksnewdesign .shcartnumber,
body.ksnewdesign .shcartbutton,
body.ksnewdesign .shcartbuttontext { text-transform: none !important; letter-spacing: 0; }
/* og setter en strek under handlingsraden */
body.ksnewdesign .contentContainer span:has(> .shcartnumber) { border-bottom: 1px solid #D9D3CB; }

/* --- «Rediger liste» / «Bytt liste» -------------------------------------- */
/* Malen gir både knappen og tekstspanet inni background-color:#770000 inline,
   og jQuery UI legger på et sprite-ikon og sin egen tekstboks. Resultatet var
   en mørk pille med et rødt felt bak teksten. Figma har ingen slik knapp, så
   den følger den samme lyse pilla som de andre sekundærknappene. */
body.ksnewdesign .contentContainer button.oseta,
body.ksnewdesign .contentContainer button.osetx {
  box-sizing: border-box;
  height: 34px !important; width: auto !important; min-width: 0 !important;
  padding: 2px 17px !important; margin: 4px 0 !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-beige) !important; background-image: none !important;
  font-family: var(--ks-body) !important; font-size: 13px !important;
  line-height: 30px !important; font-weight: 400 !important;
  color: #000 !important; cursor: pointer;
}
body.ksnewdesign .contentContainer button.oseta .ui-ks-smallbuttontext,
body.ksnewdesign .contentContainer button.osetx .ui-ks-smallbuttontext,
body.ksnewdesign .contentContainer button.oseta .ui-button-text,
body.ksnewdesign .contentContainer button.osetx .ui-button-text {
  background: none !important; background-color: transparent !important;
  padding: 0 !important; border: 0 !important;
  font-family: var(--ks-body) !important; font-size: 13px !important;
  line-height: 30px !important; font-weight: 400 !important; color: #000 !important;
}
/* jQuery UI sitt sprite-ikon hører ikke hjemme i det nye designet */
body.ksnewdesign .contentContainer button.oseta .ui-button-icon-primary,
body.ksnewdesign .contentContainer button.osetx .ui-button-icon-primary,
body.ksnewdesign .contentContainer button.oseta .ui-icon,
body.ksnewdesign .contentContainer button.osetx .ui-icon { display: none !important; }

/* --- Delsum, forklaring og handlingsrad på linje med innholdet ----------- */
/* Malen dytter «Delsum:» inn med faste 190px, og handlingsraden ligger helt
   ute ved kanten. I Figma står begge rett under produktteksten, altså på
   samme venstrekant som resten av innholdskolonnen. */
body.ksnewdesign .contentContainer span[style*="padding-left:190px"] {
  padding-left: calc(20% + 6px) !important;
  font-family: var(--ks-body); font-size: 14px !important; color: #000;
  letter-spacing: 0;
}
body.ksnewdesign .contentContainer span:has(> .shcartnumber) {
  padding-left: calc(20% + 6px) !important;
}
body.ksnewdesign .contentContainer span[style*="line-height:12px"] {
  padding-left: calc(20% + 6px) !important; box-sizing: border-box;
}
/* «Rediger liste» står på samme linje som navnelista, ikke under den */
body.ksnewdesign .contentContainer button.oseta,
body.ksnewdesign .contentContainer button.osetx {
  vertical-align: middle; margin: 0 0 0 12px !important; height: 28px !important;
  line-height: 24px !important; padding: 0 14px !important;
}
/* Navnelistelinja ligger i en flytende blokk som krymper til teksten, og da
   ble det ikke plass til knappen ved sida - den falt ned på egen linje. */
body.ksnewdesign small[id^="listlyr_"] .schoptionvalue {
  float: none !important; display: inline !important; width: auto !important;
}
body.ksnewdesign small[id^="listlyr_"] { display: block; }
/* Fargevalget sto midtstilt og inndytta. Det skal flukte med de andre
   valglinjene på venstre side, og teksten leses lettere i 14px. */
body.ksnewdesign td.schoptiontd > span[style*="text-align:center"] {
  padding-left: 0 !important; margin-left: 0 !important;
  text-align: left !important;
  font-size: 14px !important; line-height: 20px !important; color: #000 !important;
}
body.ksnewdesign td.schoptiontd > span[style*="text-align:center"] img { margin: 6px 0; }

/* All tekst i produktblokka i 14px. Malen pakker navnelistelinja i <small>
   inni <small>, så den krympa to ganger, og forklaringa under delsummen og
   knappeteksten lå også lavere. */
body.ksnewdesign small[id^="listlyr_"],
body.ksnewdesign small[id^="listlyr_"] small,
body.ksnewdesign small[id^="listlyr_"] span,
body.ksnewdesign small[id^="listlyr_"] a,
body.ksnewdesign small[id^="listlyr_"] i {
  font-size: 14px !important; line-height: 22px !important;
}
body.ksnewdesign .contentContainer button.oseta,
body.ksnewdesign .contentContainer button.osetx,
body.ksnewdesign .contentContainer button.oseta .ui-ks-smallbuttontext,
body.ksnewdesign .contentContainer button.osetx .ui-ks-smallbuttontext,
body.ksnewdesign .contentContainer button.oseta .ui-button-text,
body.ksnewdesign .contentContainer button.osetx .ui-button-text {
  font-size: 14px !important;
}
body.ksnewdesign .contentContainer span[style*="line-height:12px"] {
  font-size: 14px !important; line-height: 22px !important;
}

/* --- Bunnen av handlekurven, Figma-ramma «Handlekurv» -------------------- */
/* Totalsummen: Figma har «TOTALSUM» i vanlig 14px uten strek over. */
body.ksnewdesign p.ksnd-totalsum {
  border-top: 0 !important; margin: 18px 0 10px;
}
body.ksnewdesign p.ksnd-totalsum strong {
  font-family: var(--ks-body) !important; font-size: 14px !important;
  font-weight: 500 !important; line-height: 20px; color: #000 !important;
  text-transform: uppercase; letter-spacing: .04em;
}
body.ksnewdesign p.ksnd-totalsum strong span { text-transform: none; letter-spacing: 0; }

/* Knappene: «Fortsett å handle» i #AF9778 med svart tekst, «Fortsett til
   kassen» i gråsvart med hvit tekst. Begge 34px høye, radius 20, Karla 14. */
body.ksnewdesign .buttonSet .buttonAction a.ui-button {
  box-sizing: border-box;
  height: 34px !important; min-height: 34px; padding: 2px 17px !important;
  border: 0 !important; border-radius: 20px !important;
  font-family: var(--ks-body) !important; font-size: 14px !important;
  line-height: 30px !important; font-weight: 400 !important;
}
body.ksnewdesign .buttonSet .buttonAction a.ui-button .ui-button-text {
  padding: 0 !important; font-size: 14px !important; line-height: 30px !important;
}
/* Hver knapp ligger i sin egen span, så :first-of-type treffer begge. jQuery
   UI merker dem derimot med priority-klasser, og dem bruker vi i stedet. */
body.ksnewdesign .buttonSet .buttonAction a.ui-priority-secondary {
  background: #AF9778 !important; color: #000 !important;
}
body.ksnewdesign .buttonSet .buttonAction a.ui-priority-secondary .ui-button-text {
  background: none !important; color: #000 !important;
}
body.ksnewdesign .buttonSet .buttonAction a.ui-priority-primary {
  background: var(--ks-ink) !important; color: #fff !important;
}
body.ksnewdesign .buttonSet .buttonAction a.ui-priority-primary .ui-button-text {
  background: none !important; color: #fff !important;
}

/* Haken som bekrefter leveringsadressa var en liten pikselert PNG
   (images/icons/apptfile.png) i en hard grønn ramme. Den byttes med samme
   grønne hake som kassen bruker ellers, tegna som SVG så den er skarp.
   Bildet byttes med content, så markupen i malen er urørt. */
body.ksnewdesign img[src*="apptfile"] {
  width: 22px !important; height: 22px !important;
  padding: 0 !important; border: 0 !important;
  vertical-align: middle;
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M4.5 11.5L9 16L17.5 6.5' stroke='%2352A739' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Innlogget: kontoikonet er grønt, og navnet står i liten skrift under.
   Navnet ligger absolutt plassert, så ikonrekka beholder høyda si og
   resten av toppfeltet ikke flytter seg. */
.ksnd-header__icons a.ksnd-konto { overflow: visible; }
.ksnd-konto__navn {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 3px; max-width: 96px;
  font-family: var(--ks-body); font-size: 10px; line-height: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ks-mulvarp); text-align: center;
}
.ksnd-konto.is-innlogget .ksnd-konto__navn { color: #52A739; }

/* --- Kvitteringssida etter bestilling ------------------------------------ */
/* Malen setter skriftstørrelsene inline (2em, 1.4em, 15px) og lener seg på
   temaets skrifter. Her settes de i designets egne: Archason på titlene,
   Karla på brødteksten. «Fire enkle steg»-plansjen er tatt ut i PHP. */
body.ksnewdesign .ksnd-ordreok {
  max-width: 760px; margin: 0 auto; padding: 0 16px;
  font-family: var(--ks-body); font-size: 14px; line-height: 22px;
  color: var(--ks-ink);
}
body.ksnewdesign .ksnd-ordreok h1 {
  margin: 22px 0 24px;
  font-family: var(--ks-display) !important; font-weight: 400;
  font-size: 30px !important; line-height: 1.15; color: var(--ks-ink);
}
body.ksnewdesign .ksnd-ordreok h3 {
  margin: 32px 0 0;
  font-family: var(--ks-display); font-weight: 400;
  font-size: 20px; line-height: 1.2; color: var(--ks-ink);
}
body.ksnewdesign .ksnd-ordreok .contentText,
body.ksnewdesign .ksnd-ordreok span,
body.ksnewdesign .ksnd-ordreok div {
  font-size: 14px !important; line-height: 22px !important; color: var(--ks-ink) !important;
}
body.ksnewdesign .ksnd-ordreok a { color: var(--ks-ink); text-decoration: underline; }
body.ksnewdesign .ksnd-ordreok a:hover { color: var(--ks-mulvarp); }

/* --- Nedtrekk på personikonet ------------------------------------------- */
/* Åpnes på hover og på tastaturfokus. Ingen JavaScript: :focus-within gjør at
   den også kan nås med tabulator. På berøringsskjerm åpner ikke hover, men
   der går trykket rett til «Min side», som har den samme menyen i sidefeltet. */
.ksnd-kontoboks { position: relative; display: inline-flex; }
.ksnd-kontomeny {
  position: absolute; top: calc(100% + 8px); right: -8px; z-index: 900;
  display: none; min-width: 210px; margin: 0; padding: 10px 0;
  list-style: none;
  background: var(--ks-white);
  /* Samme ramme, hjørner og skygge som undermenyene i hovedmenyen
     (.ksnd-nav__sub), så nedtrekkene i toppfeltet ser like ut. */
  border: 1px solid var(--ks-beige); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(67, 66, 66, .10);
}
/* Usynlig bru mellom ikonet og menyen. Den må dekke hele bredden menyen har,
   ikke bare ikonets 24px: menyen henger 210px ut mot venstre, så en smal bru
   gjorde at musa falt utenfor med en gang man beveget seg skrått ned mot en
   post, og menyen lukket seg. */
.ksnd-kontoboks.har-meny::after {
  content: ''; position: absolute; top: 100%; right: -8px; left: auto;
  width: 226px; height: 16px;
}
/* Litt større treffflate på selve ikonet, uten at raden flytter seg */
.ksnd-kontoboks.har-meny { padding: 6px; margin: -6px; }
.ksnd-kontoboks.har-meny:hover .ksnd-kontomeny,
.ksnd-kontoboks.har-meny:focus-within .ksnd-kontomeny { display: block; }
.ksnd-kontomeny li { margin: 0; padding: 0; }
.ksnd-kontomeny a {
  display: flex !important; align-items: center; gap: 10px;
  padding: 6px 18px; line-height: 20px;
  font-family: var(--ks-body); font-size: 14px; color: var(--ks-ink);
  text-decoration: none; white-space: nowrap;
}
.ksnd-kontomeny a:hover { background: var(--ks-beige); opacity: 1; }
.ksnd-kontomeny img { width: 18px !important; height: 18px !important; flex: 0 0 18px; }
/* Siste posten er «Logg ut»: skilt fra resten med en strek, og i rødt */
.ksnd-kontomeny li:last-child a { border-top: 1px solid #D9D3CB; margin-top: 6px; padding-top: 12px; }
.ksnd-kontomeny li.er-utlogg a { color: #990000; }
.ksnd-kontomeny li.er-utlogg a:hover { background: var(--ks-beige); color: #990000; }
@media (max-width: 900px) {
  .ksnd-kontomeny { right: -4px; min-width: 190px; }
}

/* --- Passordfelt: maskeringstegnet ---------------------------------------
   Prikkene i et passordfelt tegnes av nettleseren med et eget tegn (U+2022
   eller U+25CF, avhengig av nettleser og system). Karla-fila vi hoster er et
   latin-subsett, og @font-face-erklæringene har ingen unicode-range. Da regner
   nettleseren med at fonten dekker alt, og faller ikke tilbake på en annen —
   mangler tegnet, tegnes en tom firkant med kryss i stedet.

   Prikkene er ikke typografi noen leser, så passordfelt bruker systemfonten.
   Da er tegnet garantert til stede, uansett nettleser og operativsystem.
   Skriftstørrelsen holdes lik de andre feltene, så rekka ser lik ut. */
body.ksnewdesign input[type="password"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  letter-spacing: .08em;
}

/* --- Meldingsbånd --------------------------------------------------------
   Malens bånd er fra det gamle temaet: knallgrønn #99ff00 for vellykket og
   rosa for feil, begge i Verdana 10-12px. De vises over hele butikken, så de
   styles her og ikke på hver enkelt side. */
body.ksnewdesign .messageStackSuccess,
body.ksnewdesign .messageStackError,
body.ksnewdesign .messageStackWarning {
  display: block; box-sizing: border-box;
  margin: 0 0 24px; padding: 12px 18px;
  border: 1px solid; border-radius: 10px;
  font-family: var(--ks-body) !important; font-size: 14px !important;
  font-weight: 400 !important; line-height: 20px;
}
body.ksnewdesign .messageStackSuccess {
  background: #F1F7EE !important; border-color: #52A739; color: #2F6222 !important;
}
body.ksnewdesign .messageStackError,
body.ksnewdesign .messageStackWarning {
  background: #FBF2F2 !important; border-color: #990000; color: #7A0000 !important;
}
/* Det lille ikonet foran teksten hører til det gamle designet */
body.ksnewdesign .messageStackSuccess img,
body.ksnewdesign .messageStackError img,
body.ksnewdesign .messageStackWarning img { display: none; }
/* Meldinga kommer som <tr> og <td> med samme klasse. Bare cella skal
   være boksen, ellers blir det ramme i ramme. */
body.ksnewdesign tr.messageStackSuccess,
body.ksnewdesign tr.messageStackError,
body.ksnewdesign tr.messageStackWarning {
  margin: 0; padding: 0; border: 0; background: none !important;
}

/* --- Mine adresser ------------------------------------------------------- */
/* Malen skriver overskriftene som <b>, adressene som fet 12px, og
   «Rediger» som en <button> uten klasse, som tar turkis fra det gamle temaet. */
body.ksnewdesign .ksnd-adrbok {
  font-family: var(--ks-body); color: var(--ks-ink);
  /* «Tilbake» lå nesten inntil nyhetsbrevfeltet. Sida trenger luft under seg
     før bunnfeltet begynner. */
  padding-bottom: 56px;
}
/* Sidetittelen lå klistret inntil brødsmulene. Den generelle regelen lenger
   oppe treffer bare :first-child, og her står det en <script> først. */
/* Streken under sidetittelen ble dobbel opp med streken under den første
   seksjonstittelen. Den generelle regelen beholder sin for de andre sidene. */
body.ksnewdesign .ksnd-sidetopp,
body.ksnewdesign #kortshop_contentcategorylayer .ksboiler_header.ksnd-sidetopp {
  margin-top: 22px !important;
  border-bottom: 0 !important; padding-bottom: 0 !important;
}
body.ksnewdesign .ksnd-adrbok > b {
  display: block; margin: 0 0 10px;
  font-family: var(--ks-display); font-size: 20px; font-weight: 400;
  line-height: 1.2; color: var(--ks-ink);
}
/* Malen skiller avsnittene med løse <br>-er. Linjeboksene deres kom i tillegg
   til margene og ga sida mye tomrom, så avstandene settes i CSS i stedet. */
body.ksnewdesign .ksnd-adrbok > b + br,
body.ksnewdesign .ksnd-adrbok > .contentText + br,
body.ksnewdesign .ksnd-adrbok > .contentText + br + br { display: none; }
/* Hver adresse skal lese som én blokk: lite mellom delene inne i gruppa,
   mer ned til neste gruppe. */
body.ksnewdesign .ksnd-adrbok .contentText {
  border-top: 1px solid #D9D3CB !important; padding-top: 12px; margin-bottom: 38px;
  font-size: 14px; line-height: 22px;
}
/* Adressen selv: vanlig vekt, samme størrelse som resten */
body.ksnewdesign .ksnd-adrbok p[style*="font-weight:bold"] {
  font-weight: 400 !important; font-size: 14px !important; line-height: 22px;
  margin: 0 0 10px !important; color: var(--ks-ink);
}
/* «Rediger» som lys pille, samme som de andre sekundærknappene. 14px, likt
   resten av sida - de sto i 13 og virket mindre enn «Tilbake» rett under.
   jQuery UI legger teksten i en egen span, så den må settes eksplisitt. */
body.ksnewdesign .ksnd-adrbok button,
body.ksnewdesign .ksnd-adrbok button .ui-button-text {
  font-family: var(--ks-body) !important; font-size: 14px !important;
  line-height: 30px !important; font-weight: 400 !important;
  color: #000 !important;
}
/* Teksten satt skjevt i knappen av to grunner: jQuery UI legger den i en egen
   span med egen linjehøyde, og temaets .ui-state-default setter width:30px, som
   er smalere enn ordet. Flex sentrerer, og width:auto lar pilla følge teksten. */
body.ksnewdesign .ksnd-adrbok button {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto !important; min-width: 0;
  height: 34px; padding: 0 17px; margin: 0;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-beige) !important; background-image: none !important;
  cursor: pointer;
}
body.ksnewdesign .ksnd-adrbok button .ui-button-text {
  display: block; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important;
  line-height: 1 !important;
}
body.ksnewdesign .ksnd-adrbok button:hover { opacity: .85; }

/* --- Skjemaet for å endre adresse ---------------------------------------- */
/* Malen tegner hvert felt som en firkantet boks med en svart ikonklosse til
   venstre, og ledetekstene i fet 11px. Feltene får samme pilleform som på
   innlogging og registrering, og ikonklossene tas bort. */
/* Malen flyter alt til venstre og bryter linjene med <br class="clear">.
   Den flyten beholdes - vi endrer bare utseendet, ellers stables postnummer
   og poststed under hverandre og skjemaet blir dobbelt så høyt. */
body.ksnewdesign .ksnd-adrskjema { max-width: 560px; padding-bottom: 24px; }
body.ksnewdesign .ksnd-adrskjema div[style*="text-align:center"] { clear: both; text-align: left !important; padding: 0 !important; }
/* «Faktura-/postadresse» er sidas overskrift her, og skal være like stor som
   overskriftene ellers. Malen gir den fet 15px grotesk, se .ksnd-h. */
body.ksnewdesign .ksnd-adrskjema > b,
body.ksnewdesign .ksnd-adrskjema b[style*="font-size:15px"] {
  float: none !important; display: block; clear: both;
  /* Samme luft som sidetitlene ellers, se .ksnd-carttitle: 22 over, 40 under.
     Den første ledeteksten tar med seg 12, derfor 28 her. */
  margin: 22px 0 28px !important;
  font-family: var(--ks-display); font-size: 30px !important; font-weight: 400;
  line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ks-ink) !important;
}
/* Malen har <br class="clear"><br> rett etter overskrifta. Linjeboksene deres
   la seg oppå margen over, så begge tas bort og margen styrer avstanden. */
body.ksnewdesign .ksnd-adrskjema b[style*="font-size:15px"] + br,
body.ksnewdesign .ksnd-adrskjema b[style*="font-size:15px"] + br + br { display: none; }
/* Det gamle temaet flyter .buttonAction til høyre. Her skal «Oppdater» stå
   til venstre, i flukt med feltene. */
body.ksnewdesign .ksnd-adrskjema .buttonSet { clear: both; text-align: left !important; }
body.ksnewdesign .ksnd-adrskjema .buttonAction { float: left !important; }
/* Ledetekstene over feltene */
body.ksnewdesign .ksnd-adrskjema span[style*="font-weight:bold"] {
  float: left !important; display: inline !important; width: auto !important;
  margin: 12px 0 4px !important;
  font-family: var(--ks-body); font-size: 12px !important; font-weight: 400 !important;
  line-height: 18px; color: var(--ks-mulvarp) !important; text-align: left !important;
}
/* Selve feltet: pille med ramme, uten ikonklossen */
body.ksnewdesign .ksnd-adrskjema .ui-ks-input-container {
  box-sizing: border-box; display: inline-flex !important; align-items: center;
  float: left !important; clear: left;
  width: auto !important; height: 34px !important; margin: 0 0 6px !important;
  padding: 0 16px !important;
  border: 1px solid var(--ks-ink) !important; border-radius: 20px !important;
  background: var(--ks-white) !important; background-image: none !important;
}
/* Postnummer og poststed deler linje i malen, så de skal ikke tvinges ned */
body.ksnewdesign .ksnd-adrskjema .ui-ks-input-container[style*="margin-right"] { clear: none !important; margin-right: 12px !important; }
body.ksnewdesign .ksnd-adrskjema .ui-ks-input-container[style*="margin-right"] + .ui-ks-input-container { clear: none !important; }
/* Ledeteksten «Postnr:» holder bredden sin så «Poststed:» havner over sitt felt */
body.ksnewdesign .ksnd-adrskjema span[style*="width:50px"][style*="font-weight:bold"] { width: 96px !important; }
body.ksnewdesign .ksnd-adrskjema .ui-ks-input-container:has(.ksfulline) { width: 100% !important; }
body.ksnewdesign .ksnd-adrskjema .ui-ks-input-container:has(.kscity) { width: 260px !important; }
body.ksnewdesign .ksnd-adrskjema .ui-ks-input-textfield {
  box-sizing: border-box; height: 32px !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; outline: none;
  font-family: var(--ks-body) !important; font-size: 14px !important;
  font-weight: 400 !important; line-height: 32px !important; color: var(--ks-ink) !important;
}
body.ksnewdesign .ksnd-adrskjema .ksfulline,
body.ksnewdesign .ksnd-adrskjema .kscity { width: 100% !important; }
body.ksnewdesign .ksnd-adrskjema #uzipacc,
body.ksnewdesign .ksnd-adrskjema span[style*="width:50px"] { width: auto !important; }
/* Knappene: «Oppdater» mørk, «Tilbake» lys, som ellers i designet */
body.ksnewdesign .ksnd-adrskjema button,
body.ksnewdesign .ksnd-adrskjema a.ui-button {
  box-sizing: border-box; height: 34px !important; width: auto !important;
  padding: 2px 17px !important; margin: 14px 12px 0 0 !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-ink) !important; background-image: none !important;
  font-family: var(--ks-body) !important; font-size: 14px !important;
  line-height: 30px !important; font-weight: 400 !important;
  color: #fff !important; cursor: pointer;
}
body.ksnewdesign .ksnd-adrskjema button .ui-button-text,
body.ksnewdesign .ksnd-adrskjema a.ui-button .ui-button-text {
  padding: 0 !important; background: none !important; border: 0 !important;
  font-family: var(--ks-body) !important; font-size: 14px !important;
  line-height: 30px !important; color: #fff !important;
}
/* «Tilbake» står utenfor skjemaboksen i malen, derfor egen krok */
body.ksnewdesign .ksnd-adrtilbake a.ui-button {
  display: inline-block; box-sizing: border-box;
  height: 34px; padding: 2px 17px; margin: 0 0 56px;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-beige) !important; background-image: none !important;
  font-family: var(--ks-body) !important; font-size: 14px !important;
  line-height: 30px !important; font-weight: 400 !important;
  color: #000 !important; text-decoration: none;
}
body.ksnewdesign .ksnd-adrtilbake a.ui-button .ui-button-text {
  padding: 0 !important; background: none !important; border: 0 !important;
  font-size: 14px !important; line-height: 30px !important; color: #000 !important;
}

/* ==========================================================================
   FAKTURA/KREDITNOTA — Figma 61:3457

   Malen bygger kortene av flytende span-er med all stil inline, så de treffes
   på innholdet i style-attributtet. Merk at ";color:#676767" må ha semikolonet
   med: uten det treffer den også "background-color:#676767" i topplinja.

   Figma-kortet (61:3462) er 286x233 px: hvit flate, 1px ramme i gråsvart,
   10px hjørner, og ÉN strek — under fakturanummeret. Radene inni har ingen
   skillelinjer. Beløpsraden er ikke uthevet, og statusen står nederst til
   venstre med «Vis faktura» som mørk knapp til høyre.
   ========================================================================== */
/* Malen legger kortene som floats med <br class="clear"> hver tredje. Det
   holder ikke når et årstallfilter skjuler noen av dem, og det gir ulik
   høyde i rada. Grid gir tre like kolonner uansett hva som er synlig. */
body.ksnewdesign #invoicelayer {
  /* Figma tegner tre kort i bredden, men da får ikke statuslinja plass ved
     siden av knappen når fakturaen har purring og inkassovarsel — «Ikke betalt
     860,00» pluss to ikoner pluss knappen er bredere enn 286px. To kort i
     bredden gir 438px og god margin. auto-fill gjør at det faller til ett kort
     av seg selv på smal skjerm. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 17px 18px;
  padding: 0 !important; font-family: var(--ks-body);
  font-size: 14px !important; color: var(--ks-ink) !important;
}
body.ksnewdesign #invoicelayer > br { display: none !important; }
/* Årstallfiltrene over kortene (Figma 61:3506) */
.ksnd-faktura__ar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
body.ksnewdesign .ksnd-faktura__arknapp {
  min-width: 62px; min-height: 23px; padding: 1px 14px;
  border: 0; border-radius: 12px; background: var(--ks-beige);
  font-family: var(--ks-body); font-size: 12px; line-height: 21px;
  color: var(--ks-ink); text-align: center;
  cursor: pointer; transition: background .15s, color .15s;
}
body.ksnewdesign .ksnd-faktura__arknapp:hover { background: #D8CEC2; }
body.ksnewdesign .ksnd-faktura__arknapp.is-on {
  background: var(--ks-mulvarp); color: var(--ks-white);
}
/* Selve kortet. Flex-kolonne, så statuslinja kan skyves ned til bunnen og
   kortene i samme rad blir like høye selv med ulikt antall varelinjer. */
body.ksnewdesign #invoicelayer > span[style*="border:#DDDDDD 1px solid"] {
  box-sizing: border-box; display: flex; flex-direction: column;
  width: auto !important; margin: 0 !important; float: none !important;
  border: 1px solid var(--ks-ink) !important; border-radius: 10px; overflow: hidden;
  background: var(--ks-white); font-size: 14px !important;
}
body.ksnewdesign #invoicelayer > span[style*="border:#DDDDDD 1px solid"] > br { display: none !important; }
/* Hver rad er ledetekst til venstre og verdi til høyre. Malen flyter dem med
   faste bredder (140px/175px), som ikke får plass i et kort på ~280px.

   Ingen linje i kortet skal brekke over to. Varelinja kan bli rundt tretti tegn
   (to tegn varekode + antall + beskrivelse avkortet til 20 av malen), og det er
   like i overkant av plassen. Ledeteksten kortes derfor med ellipse mens verdien
   til høyre holdes hel — beløpet er det man leter etter, og et halvt beløp er
   verre enn et halvt produktnavn. */
body.ksnewdesign #invoicelayer > span[style*="border:#DDDDDD 1px solid"] > span {
  float: none !important; width: 100% !important; white-space: nowrap;
}
body.ksnewdesign #invoicelayer > span[style*="border:#DDDDDD 1px solid"] > span > span {
  float: none !important; width: auto !important; text-align: inherit !important;
  white-space: nowrap;
}
body.ksnewdesign #invoicelayer > span[style*="border:#DDDDDD 1px solid"] > span > span:first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
body.ksnewdesign #invoicelayer > span[style*="border:#DDDDDD 1px solid"] > span > span + span {
  flex: 0 0 auto;
}
/* Fakturanummeret øverst. Var mørkegrå flate med hvit versaltekst; Figma har
   hvit flate med én strek under. */
body.ksnewdesign #invoicelayer span[style*="background-color:#676767"] {
  box-sizing: border-box; width: 100% !important;
  padding: 9px 20px 9px 24px !important;
  background: none !important;
  border-bottom: 1px solid var(--ks-ink) !important;
  font-size: 14px !important; font-weight: 500 !important;
  letter-spacing: 0; color: var(--ks-ink) !important;
}
/* Radene inni kortet: ingen skillelinjer, 12px som i Figma */
body.ksnewdesign #invoicelayer span[style*=";color:#676767"] {
  box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px;
  width: 100% !important; padding: 0 20px 0 24px !important; border-bottom: 0 !important;
  font-size: 12px !important; line-height: 20px; color: var(--ks-ink) !important;
  font-weight: 400 !important;
}
body.ksnewdesign #invoicelayer span[style*=";color:#676767"]:empty { display: none; }
/* Forfallsdatoen: ledetekst over verdien, begge 14px. display:block må stå
   her — style-attributtet inneholder også ";color:#676767", så raden over
   gjør den ellers til en flex-rad med verdien kastet ut til høyre. */
body.ksnewdesign #invoicelayer span[style*="font-size:16px"] {
  box-sizing: border-box; display: block !important; width: 100% !important;
  padding: 6px 20px 7px 24px !important; border-bottom: 0 !important;
  font-size: 14px !important; line-height: 20px; color: var(--ks-ink) !important;
}
body.ksnewdesign #invoicelayer span[style*="font-size:16px"] span[style*="font-size:11px"] {
  font-size: 14px !important; color: var(--ks-ink) !important;
}
/* KID og BELØP er ledetekster, ikke uthevinger — Karla Medium i Figma */
body.ksnewdesign #invoicelayer span[style*="font-weight:bold;font-size:11px"],
body.ksnewdesign #invoicelayer span[style*="background-color:#FDE869"] {
  box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px;
  width: 100% !important; padding: 0 20px 0 24px !important;
  background: none !important; border: 0 !important;
  font-size: 12px !important; font-weight: 500 !important;
  line-height: 20px; color: var(--ks-ink) !important;
}
/* Statuslinja nederst, med «Vis faktura» til høyre */
/* Har fakturaen både purring og inkassovarsel, er statusteksten, de to
   ikonpillene og knappen til sammen bredere enn kortet — uansett hvor mye vi
   strammer. Da faller knappene ned på egen linje i stedet. Selve teksten
   brekker aldri; det er raden som brytes. */
body.ksnewdesign #invoicelayer span[style*="padding-top:10px"] {
  box-sizing: border-box; display: flex !important; align-items: center;
  flex-wrap: wrap; gap: 8px; row-gap: 10px;
  width: 100% !important; float: none !important;
  margin-top: auto !important;   /* holder statuslinja i bunnen av kortet */
  padding: 5px 20px 7px 24px !important;
  text-align: left !important; white-space: nowrap;
  font-size: 12px !important; font-weight: 500 !important; color: var(--ks-ink) !important;
}
/* Betalt/ikke betalt med haken og krysset fra Figma (61:3488 / 61:3501) */
/* Statusteksten. Ikonet ligger som bakgrunnsbilde ytterst til høyre, ikke som
   ::after — et ::after ville vært en del av teksten og blitt kuttet sammen med
   den. Med bakgrunn står haken eller krysset fast mens teksten kortes.
   «Betalingsinfo ikke tilgjengelig» er den lengste og har ikke noe ikon. */
body.ksnewdesign #invoicelayer span[style*="padding-top:10px"] > span[style^="color:"] {
  display: inline-block; max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 500;
}
body.ksnewdesign #invoicelayer span[style="color:green"],
body.ksnewdesign #invoicelayer span[style="color:red"],
body.ksnewdesign #invoicelayer span[style="color:brown"] {
  padding-right: 20px;
  background-repeat: no-repeat; background-position: right center;
  background-size: 12px 12px;
}
body.ksnewdesign #invoicelayer span[style="color:green"] {
  color: var(--ks-gronn) !important;
  background-image: url("/ext/newdesign/icons/status-betalt.svg");
}
body.ksnewdesign #invoicelayer span[style="color:red"],
body.ksnewdesign #invoicelayer span[style="color:brown"] {
  color: var(--ks-red) !important;
  background-image: url("/ext/newdesign/icons/status-ubetalt.svg");
}
/* Knappen skyves helt til høyre, resten av ikonene ligger foran den */
body.ksnewdesign #invoicelayer .ksnd-visfaktura { margin-left: auto; flex: 0 0 auto; }
/* Purring, inkassovarsel og kreditnota er ikke tegnet i Figma. De blir
   stående som ikonpiller, i designets farger i stedet for gul og rød. */
body.ksnewdesign #invoicelayer a.custicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; flex: 0 0 auto;
  /* Ingen flate bak ikonet. Den beige rundingen trakk ned fargene; rett på
     hvitt leser gull, rødt og grønt tydelig. !important fordi både
     inline-stilen og den generelle PDF-regelen setter sin egen polstring. */
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; vertical-align: middle;
}
/* Ikonene står uten flate bak seg. Betydningen ligger i fargen: gull for
   purring, rødt for inkassovarsel, grønt for kreditnota. Mot hvitt klarer
   alle tre kontrastkravet på 3:1 for grafikk med god margin —
   grønn 7,4:1, rød 5,5:1, gull 4,0:1. */
body.ksnewdesign #invoicelayer a.custicon[style*="background-color:yellow"] img {
  content: url("/ext/newdesign/icons/pdf-gul.svg");
}
body.ksnewdesign #invoicelayer a.custicon[style*="background-color:red"] img {
  content: url("/ext/newdesign/icons/pdf-rod.svg");
}
body.ksnewdesign #invoicelayer a.custicon img { display: block; width: 20px; height: 20px; }
body.ksnewdesign #invoicelayer a.custicon:hover { opacity: .8; }

/* --- Navnelisteikonene --------------------------------------------------
   PHP-en er byttet til det nye settet, men online_lists_mfancybox.js tegner
   den samme linja på nytt etter innlasting og setter PNG-ene tilbake. Den
   JS-en er delt med gammelt design, så i stedet for å gafle den byttes selve
   bildefila her. content: på et <img> gjelder uansett hvem som satte src. */
body.ksnewdesign img[src*="icons/tfile.png"],
body.ksnewdesign img[src*="icons/apptfile.png"] {
  content: url("/ext/newdesign/icons/acc-lists.svg");
  width: 20px !important; height: 20px !important;
}
body.ksnewdesign img[src*="icons/lock_open.png"] {
  content: url("/ext/newdesign/icons/lock-open.svg");
  width: 20px !important; height: 20px !important;
}
body.ksnewdesign img[src*="icons/lock_lock.png"] {
  content: url("/ext/newdesign/icons/lock-closed.svg");
  width: 20px !important; height: 20px !important;
}
body.ksnewdesign img[src*="icons/inctfilex.png"],
body.ksnewdesign img[src*="icons/inctfile.png"] {
  content: url("/ext/newdesign/icons/kasse-info.svg");
  width: 20px !important; height: 20px !important;
}

/* --- PDF-ikonet (F38) -----------------------------------------------------
   Fakturaer, purringer, inkassovarsler, kreditnotaer og ordrekvitteringa
   lenker alle til en PDF. Malen merker dem med to gamle PNG-er:
   `PDF_yellow.png` for faktura og `PDF_red.png` for kreditnota. Markupen
   ligger i filer som deles med gammelt design, så byttet skjer i CSS.
   Admin (styrar_1) har ikke .ksnewdesign og beholder de gamle merkene. */
body.ksnewdesign img[src*="extensions/PDF_yellow"],
body.ksnewdesign img[src*="extensions/PDF_red"] {
  content: url("/ext/newdesign/icons/pdf.svg");
  width: 20px !important; height: 20px !important;
  max-width: none; vertical-align: middle;
}
/* Kreditnotaen står ved siden av fakturaen den hører til, og må skille seg
   fra den. Grønt, ikke rødt: en kreditnota er penger tilbake, og rødt er
   reservert inkassovarselet. */
body.ksnewdesign img[src*="extensions/PDF_red"] {
  content: url("/ext/newdesign/icons/pdf-gronn.svg");
}
/* Malen gir lenka skjev polstring (7px i bunnen) og en utoverskygget ramme
   på hover fra det gamle temaet. Den blir en rolig, kvadratisk flate. */
body.ksnewdesign a.custicon:has(img[src*="extensions/PDF_yellow"]),
body.ksnewdesign a.custicon:has(img[src*="extensions/PDF_red"]) {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px !important; border: 0 !important; border-radius: 8px !important;
  transition: background-color .15s;
}
body.ksnewdesign a.custicon:has(img[src*="extensions/PDF_yellow"]):hover,
body.ksnewdesign a.custicon:has(img[src*="extensions/PDF_red"]):hover {
  background-color: var(--ks-beige) !important; border: 0 !important;
}
/* Purring og inkassovarsel får rå `background-color:yellow` og `:red` på lenka
   i malen. Selve pillefargene eies av MINE FAKTURAER-blokka over — det er
   eneste sida der de forekommer. Her settes bare ikonet: inkassovarselet
   skal ha det røde, så alvoret ligger i ikonet og ikke bare i flata. */
body.ksnewdesign a.custicon[style*="background-color:red"] img[src*="extensions/PDF_yellow"] {
  content: url("/ext/newdesign/icons/pdf-rod.svg");
}
body.ksnewdesign a.custicon[style*="background-color:yellow"] img[src*="extensions/PDF_yellow"] {
  content: url("/ext/newdesign/icons/pdf-gul.svg");
}

/* --- «Last opp flere bilder» ---------------------------------------------
   Boksen hører til bildeopplastinga og flyttes dit av produktside.js. Malen
   gir raden en grå flate (#EDEDED) og selve knappen en grå firkant med rød
   hovertekst, satt i en <style>-blokk midt i pcoption_types.php. */
body.ksnewdesign #productoptions td[style*="background-color:#EDEDED"],
body.ksnewdesign .ksnd-pinfo__rowbody td[style*="background-color:#EDEDED"] {
  background: none !important;
  /* padding-top settes av skille-regelen lenger nede. Sto det «padding: 0»
     her, vant den på spesifisitet og lufta over teksten forsvant. */
  padding: 0 0 0 0 !important;
}
body.ksnewdesign #extraimagesbutton {
  box-sizing: border-box;
  display: inline-flex !important; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  float: none !important;
  width: auto !important; min-width: 148px; height: auto !important;
  margin: 6px 0 4px !important; padding: 16px 20px !important;
  border: 1px dashed #D9D3CB !important; border-radius: 8px !important;
  background: none !important;
  font-family: var(--ks-body); font-size: 11px !important; line-height: 16px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ks-ink) !important; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
body.ksnewdesign #extraimagesbutton:hover {
  background: #FBF9F6 !important; border-color: var(--ks-ink) !important;
  color: var(--ks-ink) !important;
}
/* det grønne rundingsplusset hører til det gamle settet */
body.ksnewdesign #extraimagesbutton img[src*="roundplus"] {
  content: url("/ext/newdesign/icons/plus.svg");
  width: 20px !important; height: 20px !important; margin: 2px 0;
}
/* «(maks 8 bilder)» er en dempet undertekst, ikke en del av knappeteksten */
body.ksnewdesign #exbuttxt {
  font-size: 10px; letter-spacing: .03em; color: var(--ks-mulvarp);
  text-transform: none;
}
/* overskrifta over de opplastede bildene var en grå stripe */
body.ksnewdesign [id^="extrafilestitle"] {
  background: none !important; margin-top: 10px;
  font-family: var(--ks-body); font-size: 13px !important;
  font-weight: 500 !important; color: var(--ks-ink) !important;
}

/* --- Popup: «Last opp ekstra bilder» -------------------------------------
   Det finnes ingen Figma-ramme for denne, så den er bygd i samme språk som
   «Ny liste»-popupen (61:4088): hvitt kort med 12px hjørner, overskrift i
   versaler med tynn strek under, mørk pille for det som fullfører og beige
   for «Avbryt». Markupen er gammel — svart overskriftsstripe, grå knappe-
   stripe og en slippsone med grønt PNG-pluss. */
body.ksnewdesign .fancybox-skin:has(#xextrapics),
body.ksnewdesign .fancybox-wrap:has(#xextrapics) .fancybox-skin {
  padding: 0 !important; border-radius: 12px !important;
  background: var(--ks-white) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .14) !important;
}
body.ksnewdesign #xextrapics {
  box-sizing: border-box;
  width: 565px !important; max-width: calc(100vw - 40px) !important;
  padding: 0 24px 24px !important;
  border-radius: 12px !important; background: var(--ks-white) !important;
  font-family: var(--ks-body); font-size: 15px !important;
  color: var(--ks-ink) !important;
}
/* Overskrifta var en svart stripe med hvit tekst */
body.ksnewdesign #xextrapics #actheader.ksboiler_header {
  /* det gamle temaet gjør .ksboiler_header til en inline-blokk, så både
     streken og «(Maks …)» la seg på samme linje som tittelen */
  display: block !important; float: none !important; clear: both;
  box-sizing: border-box;
  width: auto !important; margin: 0 -24px 18px !important;
  padding: 16px 24px 12px !important;
  border: 0 !important; border-bottom: 1px solid #D9D3CB !important;
  background: none !important;
  font-family: var(--ks-body); font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ks-ink) !important; text-align: left;
}
/* «(Maks antall bilder som kan lastes opp: 8 stk.)» */
body.ksnewdesign #xextrapics span[style*="margin-bottom:30px"] {
  float: none !important; display: block;
  margin: 0 0 16px !important; font-size: 15px !important;
  color: var(--ks-ink) !important;
}
/* Slippsona. Malen legger et grønt PNG-pluss som bakgrunn midt i, og bruker
   tre <br> for å lage plass til det. */
body.ksnewdesign #xextrapics #zuploadfiles { float: none !important; width: 100% !important; }
body.ksnewdesign #xextrapics .qq-upload-button {
  box-sizing: border-box; display: block !important;
  width: 100% !important; min-height: 128px; padding: 22px 18px !important;
  border: 1px dashed #D9D3CB !important; border-radius: 8px !important;
  background: var(--ks-white) url("/ext/newdesign/icons/plus.svg") center center / 20px 20px no-repeat !important;
  font-family: var(--ks-body); font-size: 12px !important; font-weight: 500 !important;
  line-height: 18px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ks-ink) !important; text-align: center;
  transition: background-color .15s, border-color .15s;
}
/* malen bruker tre <br> for å lage plass til plusset; de gir for mye luft */
body.ksnewdesign #xextrapics .qq-upload-button br { line-height: 9px; }
body.ksnewdesign #xextrapics .qq-upload-button:hover {
  background-color: #FBF9F6 !important; border-color: var(--ks-ink) !important;
}
body.ksnewdesign #xextrapics .qq-upload-drop-area {
  box-sizing: border-box; border: 1px dashed var(--ks-ink) !important;
  border-radius: 8px !important; background: #FBF9F6 !important;
  font-family: var(--ks-body); font-size: 13px !important;
  letter-spacing: .04em; color: var(--ks-ink) !important;
}
/* Hjelpeteksten under sona og lista over opplastede filer */
body.ksnewdesign #xextrapics #yoman {
  margin-top: 14px; font-size: 15px; line-height: 21px; color: var(--ks-ink);
}
body.ksnewdesign #xextrapics .qq-upload-list { margin: 0; padding: 0; list-style: none; }
body.ksnewdesign #xextrapics .qq-upload-list li {
  padding: 6px 0; border-bottom: 1px solid #EDE8E2;
  font-size: 15px; color: var(--ks-ink);
}
/* Knapperaden var en grå stripe midt over hele bredden */
body.ksnewdesign #xextrapics #zxcbut {
  /* Hjelpeteksten om Ctrl er en naken tekstnode, og den står ETTER knappene
     i markupen. Knappene flyter, så teksten la seg rundt dem. Flex gjør
     tekstnoden til et eget element, og ::before med full bredde tvinger et
     linjeskift mellom teksten og knappene — uten å røre rekkefølgen i DOM. */
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 10px; row-gap: 16px;
  float: none !important; box-sizing: border-box;
  width: 100% !important; margin: 18px 0 0 !important; padding: 0 !important;
  background: none !important; text-align: left !important;
  font-size: 15px; line-height: 21px; color: var(--ks-ink);
}
body.ksnewdesign #xextrapics #zxcbut::before {
  content: ''; flex: 0 0 100%; height: 0; order: 1;
}
body.ksnewdesign #xextrapics #zxcbut br { display: none; }
body.ksnewdesign #xextrapics #cancexupl { order: 2; }
body.ksnewdesign #xextrapics #execexupl { order: 3; }
body.ksnewdesign #xextrapics .ui-button {
  display: inline-flex; align-items: center; justify-content: center;
  float: none !important;
  min-height: 34px !important; height: auto !important;
  margin: 0 !important; padding: 2px 20px !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--ks-ink) !important; background-image: none !important;
  font-family: var(--ks-body); font-size: 13px !important; font-weight: 400 !important;
  color: var(--ks-beige) !important; cursor: pointer;
}
body.ksnewdesign #xextrapics .ui-button .ui-button-text {
  padding: 0 !important; color: var(--ks-beige) !important;
}
/* jQuery UI legger inn et tomt ikon-span på 16px foran etiketten. Det vises
   ikke, men tar plass, så teksten sto til høyre for midten i pilla. */
body.ksnewdesign #xextrapics .ui-button > .ui-button-icon,
body.ksnewdesign #xextrapics .ui-button > .ui-icon,
body.ksnewdesign #xextrapics .ui-button > .ui-button-icon-space {
  display: none !important;
}
/* «Avbryt» er beige. To id-er slår regelen over (én id + én klasse). */
body.ksnewdesign #xextrapics #cancexupl { background: var(--ks-beige) !important; }
body.ksnewdesign #xextrapics #cancexupl,
body.ksnewdesign #xextrapics #cancexupl .ui-button-text { color: #000 !important; }
/* framdriftsteksten var mørkerød */
body.ksnewdesign #xextrapics #exPiProgress { color: var(--ks-ink) !important; font-weight: 500; }

/* --- Den vanlige bildeopplastinga («Bilde 1», «Bilde 2» …) ----------------
   Malen gir denne et nakent <input type="file"> — nettleserens egen «Velg
   fil / ingen fil er markert» — ved siden av en grå plassholder. Den skal se
   ut som «Last opp flere»-boksen ved siden av. Feltet legges usynlig oppå en
   stiplet boks, så hele flata åpner filvelgeren.

   Etikettene står i CSS fordi malen ikke gir noe å henge dem på: feltet er
   en bar kontroll uten <label>. Blir det flere språk, må de flyttes til
   PHP-en som genererer feltet. */
body.ksnewdesign .optionbody span:has(> input[type="file"].xfilex) {
  position: relative; box-sizing: border-box;
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: space-between;
  float: left !important; width: 148px; height: 131px;
  margin: 0 0 4px !important; padding: 16px 12px !important;
  border: 1px dashed #D9D3CB; border-radius: 8px;
  background: url("/ext/newdesign/icons/plus.svg") center center / 20px 20px no-repeat;
  font-family: var(--ks-body); font-size: 11px; line-height: 16px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ks-ink);
  text-align: center; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
body.ksnewdesign .optionbody span:has(> input[type="file"].xfilex):hover {
  background-color: #FBF9F6; border-color: var(--ks-ink);
}
body.ksnewdesign .optionbody span:has(> input[type="file"].xfilex)::before { content: 'Last opp'; }
body.ksnewdesign .optionbody span:has(> input[type="file"].xfilex)::after { content: 'Bilde'; }
/* selve feltet dekker boksen, men er usynlig */
body.ksnewdesign .optionbody input[type="file"].xfilex {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important; opacity: 0; cursor: pointer;
}
body.ksnewdesign .optionbody span:has(> input[type="file"].xfilex) > br { display: none; }
/* filstørrelsen legger seg under boksen i stedet for inni */
body.ksnewdesign .optionbody span:has(> input[type="file"].xfilex) > span[id^="fztxt_"] {
  position: absolute; top: calc(100% + 6px); left: 0;
  margin: 0 !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--ks-mulvarp) !important;
}
/* Forhåndsvisninga skal være nøyaktig like stor som opplastingsboksen, så
   de to leser som ett par. contain, ikke cover — bildet skal ikke beskjæres. */
body.ksnewdesign .optionbody img[id^="imgtxt_"] {
  box-sizing: border-box;
  width: 148px !important; height: 131px !important;
  object-fit: contain; background: var(--ks-white);
  border: 1px solid #D9D3CB !important; border-radius: 8px;
  margin: 0 14px 0 0 !important;
}
/* Før noen har lastet opp noe står det en 1x1 grå GIF i ramma
   (src="onepx_lgrey.gif", alt="placeholder"). object-fit: contain blåser den
   opp til hele høyden, så ramma ble fylt med grått. Pikselen byttes med en
   gjennomsiktig 1x1, slik at ramma står tom til bildet kommer. Når kunden
   laster opp, setter JS-en src til miniatyren og regelen slutter å treffe.
   Ikonene for HEIC/PDF/doc/tif heter noe annet og røres ikke. */
body.ksnewdesign .optionbody img[id^="imgtxt_"][src*="onepx_lgrey"] {
  content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

/* Begge spanene rundt forhåndsvisninga har fast bredde inline — 160px og
   110px — og bildet har max-width:100% fra den generelle bilderegelen, så
   det ble klippet til 110 uansett hva bredden på selve bildet var satt til. */
body.ksnewdesign .optionbody span[id^="sptxt_"],
body.ksnewdesign .optionbody span:has(> span[id^="sptxt_"]) {
  float: left; width: auto !important; margin-right: 0 !important;
}

/* --- Skillet mot «ekstra bilder» ----------------------------------------
   De to boksene sto rett under hverandre og var lette å blande. Seksjonen
   for ekstra bilder får en strek over seg og en setning som sier hva den
   er til. Teksten kommer fra pcoption_types.php, ikke fra CSS. */
body.ksnewdesign #productoptions td[style*="background-color:#EDEDED"],
body.ksnewdesign .ksnd-pinfo__rowbody td[style*="background-color:#EDEDED"] {
  border-top: 1px solid #EDE8E2 !important;
  padding-top: 32px !important;
}
/* luft også over selve streken — filstørrelsen ligger like over den */
body.ksnewdesign .ksnd-pinfo__rowbody > table:has(#extraimagesbutton) {
  margin-top: 26px;
}
.ksnd-exintro {
  margin: 0 0 14px; max-width: 470px;
  font-family: var(--ks-body); font-size: 15px; line-height: 21px;
  color: var(--ks-ink);
}
/* malen legger et <br> rett etter td-en som gir dobbel luft over boksen */
body.ksnewdesign td[style*="background-color:#EDEDED"] > br:first-of-type { display: none; }

/* Filstørrelsen etter valg: malen gir den grå flate og fet svart tekst */
body.ksnewdesign .optionbody span[id^="fztxt_"] {
  background: none !important;
}

/* --- «Nyhet»-merket ------------------------------------------------------
   Var en 30x14 PNG med «NY!» — den skalerte ikke med skriften, ble uskarp
   på skjermer med høy tetthet, og kunne ikke leses av skjermlesere. Nå en
   pille i merkerødt med hvit tekst: 5,5:1, godt over kravet. */
/* I lista ligger merket over produktbildet, oppe til venstre */
.ksnd-nyhetplass { position: absolute; z-index: 300; margin: 10px 0 0 10px; }
body.ksnewdesign .ksnd-nyhetplass .ksnd-nyhet { margin-left: 0; top: 0; }

body.ksnewdesign .ksnd-nyhet {
  display: inline-flex; align-items: center;
  margin-left: 12px; padding: 4px 12px 3px;
  border-radius: 20px; background: var(--ks-red);
  font-family: var(--ks-body); font-size: 12px; font-weight: 700;
  line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ks-white); white-space: nowrap;
  vertical-align: middle; position: relative; top: -2px;
}

/* --- Ikonene i produktteksten -------------------------------------------
   «Format», «Produksjon og leveringstid» og haken foran punktene under
   «Personlig tilpasning» er gamle PNG-er fra ndes-settet — to turkise og en
   liten svart hake på 7x6 px. De byttes i CSS, som resten av det gamle
   settet, fordi markupen ligger spredt i product_info.php. */
/* Ikonene dukker opp både i «Om produktet» og i notatene i valgradene, så
   reglene kan ikke scopes til én av delene — det var grunnen til at bare
   noen av dem ble byttet i første runde. */
body.ksnewdesign img[src*="icons/ndes/format"] {
  content: url("/ext/newdesign/icons/format.svg");
}
body.ksnewdesign img[src*="icons/ndes/preview"] {
  content: url("/ext/newdesign/icons/faq-delivery.svg");
}
body.ksnewdesign img[src*="icons/ndes/format"],
body.ksnewdesign img[src*="icons/ndes/preview"],
body.ksnewdesign img[src$="/ext/newdesign/icons/format.svg"] {
  width: 18px !important; height: 18px !important;
  margin-right: 10px !important; vertical-align: middle;
}
/* Haken var 7x6 px og ble dyttet 115px opp med en inline-margin fra det
   gamle oppsettet. */
body.ksnewdesign img[src*="icons/ndes/blackcheck"] {
  content: url("/ext/newdesign/icons/check.svg");
  width: 16px !important; height: 16px !important;
  margin: 0 !important; padding-right: 12px !important;
  vertical-align: middle;
}
/* radene får samme linjehøyde som brødteksten rundt */
body.ksnewdesign .ui-ks-producttext table td { line-height: 22px; vertical-align: middle !important; }