/* ==========================================================================
   Kortshop BEDRIFT — nytt design
   Figma «Bedrift» (zeN9x4My80hxvDeS62YD2t). Lastes etter newdesign.css, bare
   på butikk 2 (se includes/template_top.php), og alt er avgrenset til
   body.ksnd-bedrift. Privatsida påvirkes ikke.

   Bedrift har egen skrift (Degular) og rust i stedet for gull/mulvarp.
   Degular er ikke selvhostet ennå — til fontfilene er på plass faller den
   tilbake til Karla.
   ========================================================================== */
body.ksnd-bedrift {
  --ks-rust:     #BA4712;  /* Figma «Rust» — logo, Privat, Nyhetsbrev. 5,3:1 mot hvitt */
  --ks-lysbeige: #F8F6F4;  /* Figma «Lys beige» — nyhetsbrevstripa, footertekst */
  --ks-bedrift:  'Degular', 'Karla', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Bedrift har én skrift til alt (Figma). Ved å peke de to felles
     skrifttokenene hit får også sidene som ikke er restylet egen for egen
     (konto, kasse, handlekurv, popuper) Degular. */
  --ks-display:  var(--ks-bedrift);
  --ks-body:     var(--ks-bedrift);
}

/* ==========================================================================
   HEADER — Frame 159 (360:1823), innlogget Frame 160 (360:2668)
   Logo midt på øverst, ikonene til høyre på samme høyde. Under: kategoriene
   fra venstre, «Privat» i rust og et fast, bredt søkefelt.
   Høyde: 29 + 47 (logo) + 16 + 41 (rad) + 22 = 155px, som i Figma.
   ========================================================================== */
body.ksnd-bedrift .ksnd-header { padding: 29px 24px 22px; }
body.ksnd-bedrift .ksnd-header__logo img { width: 199px; height: 47px; }

body.ksnd-bedrift .ksnd-header__bar {
  height: 41px;
  margin-top: 16px;
  gap: 46px;             /* «Privat» → søkefeltet */
}
body.ksnd-bedrift .ksnd-nav { gap: 37px; }

/* Figma har 37px mellom kategoriene, men er tegnet med seks. Menyen har i dag
   åtte (mengen.php), og med 37 ble «Privat» skjøvet inn under søkefeltet.
   Skriftstørrelsen er beholdt; lukene er strammet til de får plass. */
body.ksnd-bedrift .ksnd-nav__main { gap: 20px; flex-wrap: nowrap; }
body.ksnd-bedrift .ksnd-nav__main > li > a,
body.ksnd-bedrift .ksnd-nav__side > li > a {
  font-family: var(--ks-bedrift);
  font-weight: 400;
  font-size: 18px;
  line-height: 41px;
  text-transform: uppercase;
  color: var(--ks-ink);
}
body.ksnd-bedrift .ksnd-nav__main > li > a:hover { color: var(--ks-rust); }
body.ksnd-bedrift .ksnd-nav__side > li.is-privat > a { color: var(--ks-rust); }
body.ksnd-bedrift .ksnd-nav__side > li.is-privat > a:hover { color: var(--ks-ink); }
body.ksnd-bedrift .ksnd-nav__sub a { font-family: var(--ks-bedrift); font-size: 15px; }
body.ksnd-bedrift .ksnd-nav__sub a:hover { background: var(--ks-lysbeige); }

/* Ikonene står 43px fra toppen, søkefeltet 92px: 24 + 25 + 41 = 90 */
body.ksnd-bedrift .ksnd-header__tools {
  width: 314px;
  flex: 0 0 314px;
  height: 90px;
  gap: 25px;
}
body.ksnd-bedrift .ksnd-header__icons { gap: 38px; }
/* Innlogget er det fem ikoner, tettere (360:2668) */
body.ksnd-bedrift .ksnd-header__icons:has(> a:nth-of-type(4)) { gap: 22px; }
body.ksnd-bedrift .ksnd-badge { background: var(--ks-rust); }

body.ksnd-bedrift .ksnd-search {
  width: 314px;
  height: 41px;
  padding: 0 24px 0 14px;
  border-color: var(--ks-ink);
}
body.ksnd-bedrift .ksnd-search input {
  font-family: var(--ks-bedrift);
  font-weight: 400;
  font-size: 16px;
  color: var(--ks-ink);
}
body.ksnd-bedrift .ksnd-search input::placeholder { color: var(--ks-ink); }

/* ==========================================================================
   NYHETSBREV + FOOTER — Footer (4:335)
   ========================================================================== */
body.ksnd-bedrift .ksnd-news { background: var(--ks-lysbeige); }
body.ksnd-bedrift .ksnd-news__label {
  font-family: var(--ks-bedrift);
  font-weight: 500;
  font-size: 20px;
  color: var(--ks-rust);
}
body.ksnd-bedrift .ksnd-news__field input {
  font-family: var(--ks-bedrift);
  font-weight: 400;
  font-size: 14px;
}
body.ksnd-bedrift .ksnd-news__field input::placeholder { color: #AAA; }

body.ksnd-bedrift .ksnd-footer { padding-top: 86px; }
body.ksnd-bedrift .ksnd-footer__cols { gap: 105px; }
body.ksnd-bedrift .ksnd-footer__col h4,
body.ksnd-bedrift .ksnd-footer__col h4 a {
  font-family: var(--ks-bedrift);
  font-weight: 700;
  color: var(--ks-lysbeige);
}
body.ksnd-bedrift .ksnd-footer__col li,
body.ksnd-bedrift .ksnd-footer__col p,
body.ksnd-bedrift .ksnd-footer__col a {
  font-family: var(--ks-bedrift);
  font-weight: 400;
  color: var(--ks-lysbeige);
}
/* Figma har litt ekstra luft mellom adressen og Telefon/Epost/Org.nr. */
body.ksnd-bedrift .ksnd-footer__col p:nth-of-type(4) { margin-top: 8px; }
body.ksnd-bedrift .ksnd-footer__copy { color: var(--ks-lysbeige); }
body.ksnd-bedrift .ksnd-footer__social { gap: 30px; }

/* ==========================================================================
   RESPONSIVT — samme trinn som newdesign.css
   ========================================================================== */
@media (max-width: 1439px) {
  body.ksnd-bedrift .ksnd-nav,
  body.ksnd-bedrift .ksnd-nav__main { gap: 22px; }
  body.ksnd-bedrift .ksnd-nav__main > li > a,
  body.ksnd-bedrift .ksnd-nav__side > li > a { font-size: 15px; }
  body.ksnd-bedrift .ksnd-header__bar { gap: 32px; }
  body.ksnd-bedrift .ksnd-footer__cols { gap: 64px; }
}
@media (max-width: 1180px) {
  body.ksnd-bedrift .ksnd-nav,
  body.ksnd-bedrift .ksnd-nav__main { gap: 14px; }
  body.ksnd-bedrift .ksnd-nav__main > li > a,
  body.ksnd-bedrift .ksnd-nav__side > li > a { font-size: 13px; }
  body.ksnd-bedrift .ksnd-header__bar { gap: 24px; }
  body.ksnd-bedrift .ksnd-header__tools { width: 240px; flex-basis: 240px; }
  body.ksnd-bedrift .ksnd-search { width: 240px; }
}
@media (max-width: 1023px) {
  body.ksnd-bedrift .ksnd-header { padding: 16px 20px; }
  body.ksnd-bedrift .ksnd-header__logo img { width: 134px; height: 32px; }
  body.ksnd-bedrift .ksnd-header__bar { height: auto; margin-top: 0; gap: 0; }
  /* Trinnene over gir luker mellom kategoriene; her står de i en kolonne */
  body.ksnd-bedrift .ksnd-nav,
  body.ksnd-bedrift .ksnd-nav__main { gap: 0; flex-wrap: wrap; }
  body.ksnd-bedrift .ksnd-nav__main > li > a,
  body.ksnd-bedrift .ksnd-nav__side > li > a { font-size: 16px; line-height: 30px; }
  body.ksnd-bedrift .ksnd-header__icons { gap: 14px; }
  body.ksnd-bedrift .ksnd-header__icons:has(> a:nth-of-type(4)) { gap: 14px; }
  body.ksnd-bedrift .ksnd-header__tools { width: 100%; flex: 1 1 auto; height: auto; }
  body.ksnd-bedrift .ksnd-search { width: 100%; }
}

/* ==========================================================================
   FORSIDE — «Hjem» (28:384), includes/newdesign/frontpage_bedrift.php
   Toppbildet, logostripa, tjenestene og miljøfeltet går kant til kant
   (.ksnd-bleed). Bare de populære kategoriene har innholdsbredde.
   ========================================================================== */
body.ksnd-bedrift { --ks-skog: #30532B; }   /* Figma: FSC-teksten. 9,1:1 mot lys beige */

/* Toppbildet starter 21px under headeren (155 → 176) */
body.ksnd-bedrift:has(.ksnd-flushtop) .ksnd-header { padding-bottom: 43px; }

.ksnd-bforside { font-family: var(--ks-bedrift); color: var(--ks-ink); }
.ksnd-bforside h2 { border: 0; padding: 0; margin: 0; }
.ksnd-bforside ul { list-style: none; margin: 0; padding: 0; }
.ksnd-bforside a { text-decoration: none; }
.ksnd-bforside img { display: block; max-width: 100%; }

/* --- Toppvideo (76:212) ------------------------------------------------- */
.ksnd-bhero { position: relative; }
.ksnd-bhero img,
.ksnd-bhero video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 749;
  object-fit: cover;
}

/* --- Kundelogoer (76:176), rullende -------------------------------------
   To like lister etter hverandre. Sporet flyttes -50 %, altså nøyaktig én
   liste, og starter på nytt — skjøten synes ikke. 4,5 s per logo gir samme
   fart uansett antall. Står stille når musa er over, og for den som har
   bedt om mindre bevegelse. */
.ksnd-bkunder {
  background: var(--ks-lysbeige);
  overflow: hidden;
  /* myk inn- og uttoning mot kantene */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ksnd-bkunder__spor {
  display: flex;
  width: max-content;
  animation: ksnd-kunder calc(var(--ksnd-antall, 7) * 4.5s) linear infinite;
}
.ksnd-bkunder:hover .ksnd-bkunder__spor { animation-play-state: paused; }
.ksnd-bforside .ksnd-bkunder ul {
  display: flex;
  align-items: center;
  gap: 90px;
  height: 141px;
  padding-right: 90px;   /* samme luke i skjøten mellom de to listene */
}
.ksnd-bkunder li { flex: 0 0 auto; }
.ksnd-bforside .ksnd-bkunder img {
  max-width: none;
  /* Alle logoene i samme middels grå (#808080), uansett egen farge:
     brightness(0) gjør alt som ikke er gjennomsiktig svart, invert(50%)
     løfter det til grått. Krever logo med gjennomsiktig bunn — en jpg
     eller en png med hvit bakgrunn blir en grå firkant. */
  filter: brightness(0) invert(50%);
}
@keyframes ksnd-kunder {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ksnd-bkunder { -webkit-mask-image: none; mask-image: none; }
  .ksnd-bkunder__spor { animation: none; width: auto; }
  .ksnd-bkunder__spor ul[aria-hidden] { display: none; }
  .ksnd-bforside .ksnd-bkunder ul { flex-wrap: wrap; justify-content: center; gap: 24px 60px; height: auto; padding: 32px 24px; }
}

/* --- Storformat + digitaltrykk (60:269 / 60:270) ------------------------ */
.ksnd-btjenester {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.ksnd-btjeneste { display: block; color: var(--ks-ink); }
.ksnd-btjeneste img {
  width: 100%;
  height: auto;
  aspect-ratio: 713 / 448;
  object-fit: cover;
}
.ksnd-btjeneste__tittel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
}
.ksnd-btjeneste:hover img { opacity: .9; }
.ksnd-btjeneste:hover .ksnd-btjeneste__tittel { color: var(--ks-rust); }

/* --- FSC + miljø (39:1547 / 39:1508) ------------------------------------ */
.ksnd-bmiljo {
  display: grid;
  grid-template-columns: minmax(0, 930fr) minmax(0, 496fr);
  gap: 14px;
}
.ksnd-bmiljo__fsc {
  background: var(--ks-lysbeige);
  color: var(--ks-skog);
  padding: 58px 45px 48px;
}
body.ksnewdesign .ksnd-bmiljo__fsc h2 {
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 50px;
  /* Figma har 30px, men det tåler bare én linje. Med reserveskrifta (og på
     smalere skjermer) brekker overskrifta, og da la linjene seg oppå
     hverandre. 50px gir samme plassering av første linje. */
  line-height: 50px;
  text-transform: uppercase;
  color: var(--ks-skog);
  margin: -10px 0 24px;
}
.ksnd-bmiljo__fsc h2 sup { font-size: 32px; line-height: 0; vertical-align: .55em; }
.ksnd-bmiljo__fsc p {
  max-width: 841px;
  margin: 0 0 25px;
  font-weight: 300;
  font-size: 20px;
  line-height: 25px;
}
.ksnd-bmiljo__fsc ul { display: flex; flex-direction: column; gap: 22px; margin: 10px 0 36px; }
.ksnd-bmiljo__fsc li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
}
.ksnd-bmiljo__fsc li img { flex: 0 0 17px; width: 17px; height: 17px; }
.ksnd-bmiljo__fsc p:last-child { margin-bottom: 0; }

.ksnd-bmiljo__bilde { position: relative; min-height: 579px; }
.ksnd-bmiljo__bilde img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ksnd-bmiljo__tekst {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 18px;   /* Figma setter gruppa litt under midten */
}
.ksnd-bmiljo__tekst span {
  font-weight: 700;
  font-size: 50px;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--ks-lysbeige);
}
body.ksnewdesign .ksnd-bmiljo__tekst a {
  background: var(--ks-lysbeige);
  color: #355B2F;
  border-radius: 20px;
  padding: 7px 17px;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}
body.ksnewdesign .ksnd-bmiljo__tekst a:hover { background: var(--ks-white); }

/* --- Populære kategorier (54:262) --------------------------------------- */
.ksnd-bpop { max-width: 1306px; margin: 31px auto 49px; }
body.ksnewdesign .ksnd-bpop h2 {
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 30px;
  line-height: 22px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ks-ink);
  margin-bottom: 31px;
}
.ksnd-bpop ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ksnd-bpop a { display: block; color: #000; text-align: center; }
.ksnd-bpop img {
  width: 100%;
  height: auto;
  aspect-ratio: 316 / 387;
  object-fit: cover;
}
/* Bildet med beskrivelsen oppå (Figma Frame 12, 76:205): lys beige på 75 %
   og teksten midt i, vist ved mus over eller tastaturfokus. */
.ksnd-bpop__bilde { position: relative; display: block; overflow: hidden; }
.ksnd-bpop__tekst {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 20px 10%;
  background: rgba(248, 246, 244, .75);
  /* Figma har 15/25px på et 316px kort; kortene her er ~307px, og den
     lengste teksten (Visittkort) gikk da helt opp i kanten. */
  font-weight: 300; font-size: 14px; line-height: 21px; color: var(--ks-ink);
  opacity: 0; transition: opacity .25s ease;
}
.ksnd-bpop__tekst span { display: block; }
.ksnd-bpop a:hover .ksnd-bpop__tekst,
.ksnd-bpop a:focus-visible .ksnd-bpop__tekst { opacity: 1; }
.ksnd-bpop__navn { display: block; margin-top: 9px; font-size: 25px; line-height: 30px; }
.ksnd-bpop a:hover .ksnd-bpop__navn { color: var(--ks-rust); }

/* --- Forsida: mer luft og mindre skrift (Emma, 7. oktober 2026) ---------
   Seksjonene går fortsatt kant til kant med 14px mellom flisene, som i
   Figma, men har luft mellom seg, og overskriftene er tatt ned. */
.ksnd-btjenester { margin-top: 64px; }
.ksnd-btjeneste__tittel { height: auto; padding: 18px 0 0; font-size: 22px; letter-spacing: .02em; }
.ksnd-bmiljo { margin-top: 64px; }
.ksnd-bmiljo__fsc { padding: 48px 48px 44px; }
body.ksnewdesign .ksnd-bmiljo__fsc h2 { font-size: 34px; line-height: 40px; margin: 0 0 22px; }
.ksnd-bmiljo__fsc p { font-size: 16px; line-height: 24px; margin-bottom: 18px; }
.ksnd-bmiljo__fsc ul { gap: 14px; margin: 6px 0 26px; }
.ksnd-bmiljo__fsc li { font-size: 16px; }
.ksnd-bmiljo__fsc li img { flex-basis: 16px; width: 16px; height: 16px; }
.ksnd-bmiljo__bilde { min-height: 520px; }
.ksnd-bmiljo__tekst span { font-size: 38px; line-height: 30px; }
.ksnd-bpop { margin: 80px auto 90px; }
body.ksnewdesign .ksnd-bpop h2 { font-size: 24px; margin-bottom: 32px; }
.ksnd-bpop ul { gap: 24px; }
.ksnd-bpop__navn { margin-top: 12px; font-size: 18px; line-height: 24px; }

/* --- Forsida, responsivt ------------------------------------------------ */
@media (max-width: 1180px) {
  .ksnd-bmiljo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  body.ksnewdesign .ksnd-bmiljo__fsc h2 { font-size: 30px; line-height: 36px; }
}
@media (max-width: 1023px) {
  body.ksnd-bedrift:has(.ksnd-flushtop) .ksnd-header { padding-bottom: 16px; }
  .ksnd-bforside .ksnd-bkunder ul { gap: 56px; height: 100px; padding-right: 56px; }
  .ksnd-btjenester, .ksnd-bmiljo { margin-top: 48px; }
  .ksnd-btjeneste__tittel { font-size: 20px; }
  .ksnd-bmiljo { grid-template-columns: 1fr; }
  .ksnd-bmiljo__fsc { padding: 36px 24px; }
  .ksnd-bmiljo__bilde { min-height: 380px; }
  .ksnd-bpop { margin: 56px auto 64px; padding: 0 24px; }
  .ksnd-bpop ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
}
@media (max-width: 640px) {
  .ksnd-btjenester { grid-template-columns: 1fr; gap: 32px; }
  body.ksnewdesign .ksnd-bmiljo__fsc h2 { font-size: 26px; line-height: 30px; margin-bottom: 18px; }
  .ksnd-bmiljo__tekst span { font-size: 32px; }
  body.ksnewdesign .ksnd-bpop h2 { font-size: 22px; }
  .ksnd-bpop__navn { font-size: 17px; }
}

/* ==========================================================================
   KATEGORISIDE — 272:1138  og  PRODUKTLISTE — 274:521
   Samme markup som privatsida (index_subcategories.php, index_products.php,
   product_listing.php). Figma: overskrift i rust midt på, fire felt à 300px
   per rad med 35px mellom (67 → 1372), lys beige bak bildene. Privatsida har
   fem per rad; bedrift følger sin egen ramme.
   ========================================================================== */
body.ksnd-bedrift .ksnd-pagetitle,
body.ksnd-bedrift .ksnd-catband__title {
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  /* !important: det gamle temaet har «h1 { color:#000 !important }», og
     newdesign.css svarer med samme vekt (body.ksnewdesign h1) */
  color: var(--ks-rust) !important;
}
body.ksnd-bedrift .ksnd-pagetitle { margin: 40px 0 0; }

/* Kategorifeltene: fem per rad og samme størrelse som på kortshop.no, som
   produktlista (Emma, 5. oktober 2026). Rutenett, tekst og trinn for mindre
   skjermer kommer fra newdesign.css; her settes bare farger. */
body.ksnd-bedrift .ksnd-subcat__img { background: var(--ks-lysbeige); }
body.ksnd-bedrift .ksnd-subcat:hover .ksnd-subcat__name { color: var(--ks-rust); }

/* Kategoriteksten under rutenettet / produktlista */
body.ksnd-bedrift .ksnd-catdesc { font-family: var(--ks-bedrift); font-size: 16px; line-height: 25px; color: var(--ks-ink); }
body.ksnd-bedrift .ksnd-catdesc h1,
body.ksnd-bedrift .ksnd-catdesc h2,
body.ksnd-bedrift .ksnd-catdesc h3 { font-family: var(--ks-bedrift); font-weight: 700; color: var(--ks-ink); }
body.ksnewdesign.ksnd-bedrift .ksnd-catdesc a,
body.ksnewdesign.ksnd-bedrift .ksnd-catband__text a { color: var(--ks-rust); }

/* Produktlista: Figma har bare tittelen øverst — ingen beige flate */
body.ksnd-bedrift .ksnd-catband { background: none; padding: 0; margin-top: 40px; }
body.ksnd-bedrift .ksnd-catband__title { margin: 0; }

/* Søskensirklene (filter) — bare skrifta */
body.ksnd-bedrift .ksnd-sibling__name,
body.ksnewdesign.ksnd-bedrift .ksnd-siblings__clear { font-family: var(--ks-bedrift); }

/* «4 resultater» til venstre over lista, 34px over bildene */
body.ksnd-bedrift .ksnd-plist { max-width: 1305px; margin: 60px auto 0; }
.ksnd-bantall {
  margin: 0 0 14px;
  font-family: var(--ks-body);
  font-size: 12px;
  line-height: 20px;
  color: #000;
}

/* Produktkortene har samme størrelse og tetthet som på kortshop.no: fem per
   rad (Emma, 5. oktober 2026 — Figmas fire à 300px ble for store). Rutenett,
   tekststørrelser og trinnene for mindre skjermer kommer fra newdesign.css;
   her settes bare farger. */
body.ksnd-bedrift .ksnd-plist ul.column li .xlistimage { background: var(--ks-lysbeige); }
body.ksnd-bedrift .ksnd-plist ul.column li .xlistprice { color: var(--ks-ink); }
/* «Vis»: mørk pille med lys tekst (Figma), rust ved mus over */
body.ksnewdesign.ksnd-bedrift .ksnd-plist ul.column li .tdbLink a,
body.ksnewdesign.ksnd-bedrift .ksnd-plist ul.column li a.ui-button {
  margin-top: 9px;
  background: var(--ks-ink) !important;
  color: var(--ks-lysbeige) !important;
  font-family: var(--ks-bedrift) !important;
  font-weight: 500 !important;
}
body.ksnewdesign.ksnd-bedrift .ksnd-plist ul.column li a.ui-button:hover,
body.ksnewdesign.ksnd-bedrift .ksnd-plist ul.column li .tdbLink a:hover {
  background: var(--ks-rust) !important;
  color: var(--ks-white) !important;
}

/* «Se mer» nederst */
body.ksnd-bedrift .ksnd-more,
body.ksnewdesign.ksnd-bedrift .ksnd-more__btn { font-family: var(--ks-bedrift); }
body.ksnewdesign.ksnd-bedrift .ksnd-more__btn:hover { background: var(--ks-rust); border-color: var(--ks-rust); }

@media (max-width: 1023px) {
  body.ksnd-bedrift .ksnd-pagetitle,
  body.ksnd-bedrift .ksnd-catband__title { font-size: 36px; }
  body.ksnd-bedrift .ksnd-plist { margin-top: 32px; }
}

/* ==========================================================================
   OM OSS — «Om oss» (86:368), malen er includes/newdesign/about.php
   Toppbilde 489px i farger, «Om oss» og teksten midtstilt i én spalte,
   «Folka på kortshop» med kort i lys beige.
   ========================================================================== */
body.ksnd-bedrift .ksnd-pagehero { height: 489px; }
body.ksnd-bedrift .ksnd-omoss__intro,
body.ksnd-bedrift .ksnd-team { text-align: center; }
body.ksnd-bedrift .ksnd-omoss__intro { margin-top: 48px; }
body.ksnd-bedrift .ksnd-omoss__intro .ksnd-h,
body.ksnd-bedrift .ksnd-team .ksnd-h,
body.ksnd-bedrift .ksnd-bmiljoside__intro h1 {
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ks-ink) !important;   /* det gamle temaet tvinger h1 til svart */
  margin: 0 0 30px;
}
body.ksnd-bedrift .ksnd-omoss__cols {
  column-count: 1;
  max-width: 1183px;
  margin: 0 auto;
  font-family: var(--ks-bedrift);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
}
body.ksnd-bedrift .ksnd-omoss__cols p { margin: 0 0 25px; }
body.ksnd-bedrift .ksnd-team { margin: 70px 0 80px; }
body.ksnd-bedrift .ksnd-team .ksnd-h { margin-bottom: 40px; }
body.ksnd-bedrift .ksnd-team__lead { margin-left: auto; margin-right: auto; font-family: var(--ks-bedrift); font-size: 16px; }
body.ksnd-bedrift .ksnd-team__grid { text-align: left; }
body.ksnd-bedrift .ksnd-team__card { background: var(--ks-lysbeige); }
body.ksnd-bedrift .ksnd-team__hover { background: var(--ks-lysbeige); }
body.ksnd-bedrift .ksnd-team__card h3 {
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  margin: 0 0 2px;
}
body.ksnd-bedrift .ksnd-team__role {
  font-family: var(--ks-bedrift);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ks-rust);
}
body.ksnd-bedrift .ksnd-team__desc,
body.ksnd-bedrift .ksnd-team__contact {
  font-family: var(--ks-bedrift);
  font-weight: 300;
  font-size: 15px;
  line-height: 20px;
  color: var(--ks-ink);
}

/* ==========================================================================
   MILJØ — «Miljø» (109:675), miljo.php + includes/newdesign/miljo.php
   Toppvideo 489px, innledning midtstilt, deretter tre seksjoner med tekst
   (637px) og bilde (640x490) annenhver vei.
   ========================================================================== */
.ksnd-bmiljoside { font-family: var(--ks-bedrift); color: var(--ks-ink); }
.ksnd-bmiljoside .ksnd-pagehero video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ksnd-bmiljoside__intro h1 { border: 0; padding: 0; }   /* det gamle temaet gir h1 en strek over */
.ksnd-bmiljoside__intro {
  max-width: 1183px;
  margin: 33px auto 0;
  text-align: center;
}
.ksnd-bmiljoside__intro p {
  margin: 0 0 25px;
  font-size: 20px;
  line-height: 25px;
}
.ksnd-bseksjon {
  display: grid;
  grid-template-columns: minmax(0, 637fr) minmax(0, 640fr);
  gap: 25px;
  align-items: start;
  margin-top: 60px;
}
.ksnd-bseksjon + .ksnd-bseksjon { margin-top: 37px; }
.ksnd-bseksjon:last-child { margin-bottom: 80px; }
.ksnd-bseksjon--snudd { grid-template-columns: minmax(0, 640fr) minmax(0, 637fr); }
.ksnd-bseksjon--snudd .ksnd-bseksjon__bilde { order: -1; }
.ksnd-bseksjon__bilde {
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 490;
  object-fit: cover;
  display: block;
}
/* Tjenestesidene: hele bildet i sin egen form, aldri større enn fila
   (max-width settes på taggen fra bildets bredde). */
.ksnd-bseksjon__bilde--egen { width: auto; aspect-ratio: auto; justify-self: center; }
body.ksnewdesign .ksnd-bseksjon h2 {
  border: 0; padding: 0;
  margin: 0 0 16px;
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  color: var(--ks-ink);
}
.ksnd-bseksjon h2 sup,
.ksnd-bseksjon b sup { font-size: .64em; line-height: 0; vertical-align: .5em; }
.ksnd-bseksjon p {
  margin: 0 0 25px;
  font-weight: 300;
  font-size: 20px;
  line-height: 25px;
}
.ksnd-bseksjon p:last-child { margin-bottom: 0; }
.ksnd-bseksjon b { font-weight: 500; }
.ksnd-bseksjon ul { margin: 0 0 25px; padding-left: 30px; list-style: disc; }
.ksnd-bseksjon li { font-weight: 400; font-size: 20px; line-height: 25px; }
body.ksnewdesign .ksnd-bseksjon a { color: var(--ks-ink); font-weight: 500; text-decoration: underline; }
body.ksnewdesign .ksnd-bseksjon a:hover { color: var(--ks-rust); }

@media (max-width: 1023px) {
  body.ksnd-bedrift .ksnd-pagehero { height: 300px; }
  body.ksnd-bedrift .ksnd-omoss__intro .ksnd-h,
  body.ksnd-bedrift .ksnd-team .ksnd-h,
  body.ksnd-bedrift .ksnd-bmiljoside__intro h1 { font-size: 36px; margin-bottom: 20px; }
  body.ksnd-bedrift .ksnd-omoss__cols,
  .ksnd-bmiljoside__intro p,
  .ksnd-bseksjon p,
  .ksnd-bseksjon li { font-size: 17px; line-height: 23px; }
  .ksnd-bseksjon,
  .ksnd-bseksjon--snudd { grid-template-columns: 1fr; gap: 24px; }
  .ksnd-bseksjon--snudd .ksnd-bseksjon__bilde { order: 0; }
  body.ksnewdesign .ksnd-bseksjon h2 { font-size: 30px; line-height: 34px; }
}

/* ==========================================================================
   KONTAKT OSS — 269:432, malen er includes/newdesign/kontakt.php
   Kartet øverst i gråtoner (Figma har et gråtonekart). Under: skjemakortet
   (497px) og en tekstspalte (636px) med 47px mellom.
   ========================================================================== */
.ksnd-pagehero--kart iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(1);
}
body.ksnd-bedrift .ksnd-kontakt {
  justify-content: flex-start;
  gap: 47px;
  margin: 57px 0 80px;
}
body.ksnd-bedrift .ksnd-kontakt__card { background: var(--ks-lysbeige); padding: 36px 26px 22px 26px; }
body.ksnd-bedrift .ksnd-kontakt__card .ksnd-h {
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ks-rust) !important;
  margin-bottom: 12px;
}
body.ksnd-bedrift .ksnd-kontakt__lead { font-family: var(--ks-bedrift); font-weight: 300; }
body.ksnewdesign.ksnd-bedrift .ksnd-kontakt__lead a { font-weight: 400; }
body.ksnd-bedrift .ksnd-kontakt__card #zzxf td.fieldKey { font-family: var(--ks-bedrift); font-style: italic; }
body.ksnd-bedrift .ksnd-kontakt__card #zzxf input[type="text"],
body.ksnd-bedrift .ksnd-kontakt__card #zzxf textarea {
  border-color: var(--ks-ink);
  font-family: var(--ks-bedrift);
}
body.ksnd-bedrift .ksnd-kontakt__card #zzxf button {
  background: var(--ks-rust);
  color: var(--ks-lysbeige);
  font-family: var(--ks-bedrift);
}
body.ksnd-bedrift .ksnd-kontakt__card #zzxf button:hover { background: var(--ks-ink); }

.ksnd-kontakt__info {
  flex: 0 1 636px;
  min-width: 0;
  font-family: var(--ks-bedrift);
  font-weight: 300;
  font-size: 20px;
  line-height: 25px;
  color: var(--ks-ink);
}
body.ksnewdesign .ksnd-kontakt__info p,
body.ksnewdesign .ksnd-kontakt__info address {
  margin: 0 0 25px;
  font-family: var(--ks-bedrift);
  font-weight: 300;
  font-size: 20px;
  line-height: 25px;
  font-style: normal;
}
body.ksnewdesign .ksnd-kontakt__info address { font-style: italic; }
body.ksnewdesign .ksnd-kontakt__info h2 {
  border: 0; padding: 0; margin: 0;
  font-family: var(--ks-bedrift);
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  text-transform: none;
  color: var(--ks-ink) !important;
}
body.ksnewdesign .ksnd-kontakt__info a { color: var(--ks-ink); }
body.ksnewdesign .ksnd-kontakt__info p:first-child a { font-weight: 400; text-decoration: underline; }
body.ksnewdesign .ksnd-kontakt__info a:hover { color: var(--ks-rust); }

/* ==========================================================================
   OFTE STILTE SPØRSMÅL — 137:1470, åpent spørsmål 212:367
   Tittel og undertittel midt på, deretter én liste à 684px med 20px mellom.
   Gruppeoverskriftene vises ikke — Figma har én flat liste. Det åpne
   spørsmålet får rammen rundt hele boksen, også svaret.
   ========================================================================== */
body.ksnewdesign.ksnd-bedrift .ksnd-faq__title {
  margin: 70px 0 8px;
  font-family: var(--ks-bedrift);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
}
.ksnd-faq__sub {
  margin: 0 0 50px;
  font-family: var(--ks-bedrift);
  font-weight: 600;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  color: var(--ks-ink);
}
body.ksnewdesign.ksnd-bedrift .ksnd-faq__group h2 { display: none; }
body.ksnd-bedrift .ksnd-faq__group { margin-bottom: 20px; }
body.ksnd-bedrift .ksnd-faq__item { margin-bottom: 20px; border: 1px solid transparent; border-radius: 10px; }
body.ksnewdesign.ksnd-bedrift .ksnd-faq__item > summary {
  font-family: var(--ks-bedrift);
  font-weight: 500;
  letter-spacing: 1.4px;
}
body.ksnd-bedrift .ksnd-faq__item[open] { border-color: var(--ks-ink); }
body.ksnewdesign.ksnd-bedrift .ksnd-faq__item[open] > summary { border-color: transparent; }
body.ksnd-bedrift .ksnd-faq__answer { font-family: var(--ks-bedrift); padding: 8px 27px 14px; }
body.ksnewdesign.ksnd-bedrift .ksnd-faq__answer a { color: var(--ks-rust); }

@media (max-width: 1180px) {
  body.ksnd-bedrift .ksnd-kontakt { flex-direction: column; }
  body.ksnd-bedrift .ksnd-kontakt__card { width: 100%; flex: 1 1 auto; }
  .ksnd-kontakt__info { flex: 1 1 auto; }
}
@media (max-width: 1023px) {
  body.ksnewdesign.ksnd-bedrift .ksnd-faq__title { font-size: 36px; margin-top: 40px; }
  .ksnd-faq__sub { font-size: 20px; margin-bottom: 32px; }
  body.ksnewdesign .ksnd-kontakt__info p,
  body.ksnewdesign .ksnd-kontakt__info address { font-size: 17px; line-height: 23px; }
}

/* ==========================================================================
   KONTO OG INNLOGGING — Logg inn 287:855, Min profil 287:1837,
   Mine ordrer 287:3064 m.fl. Samme maler som privatsida. Bedrift har fete
   overskrifter (privatsidas serif er bare Regular), rust skillelinje og
   rust ikoner i sidemenyen (accountnav.php bytter til *-rust.svg).
   ========================================================================== */
body.ksnd-bedrift .ksnd-accnav__title,
body.ksnd-bedrift .ksnd-acc__title,
body.ksnd-bedrift .ksnd-auth__title,
body.ksnd-bedrift .ksnd-carttitle,
body.ksnd-bedrift .ksnd-h { font-weight: 700; letter-spacing: 0; }
body.ksnd-bedrift .ksnd-auth__kicker { font-weight: 400; }
body.ksnd-bedrift .ksnd-accnav { border-right-color: var(--ks-rust); }
/* Menypostene står i gråsvart med rust ikon; bare ikonet er farget (287:1837) */
body.ksnewdesign.ksnd-bedrift .ksnd-accnav__item a { color: var(--ks-ink); }
body.ksnewdesign.ksnd-bedrift .ksnd-accnav__item a:hover { color: var(--ks-rust); }

/* Kvitteringsboksene (popup.php): rust logo, rust hake uten boks */
body.ksnd-bedrift .ksnd-pop__card { border-radius: 15px; }
/* Logoen står midt over teksten i bedrift-rammene, ikke oppe til høyre */
body.ksnewdesign.ksnd-bedrift .ksnd-pop__logo { position: static; width: 118px; height: 28px; margin: 0 0 14px; }
body.ksnd-bedrift .ksnd-pop__text { font-weight: 500; font-size: 30px; margin-bottom: 18px; }
body.ksnd-bedrift .ksnd-pop__tick--strek { background: none; width: auto; height: auto; }
body.ksnewdesign.ksnd-bedrift .ksnd-pop__tick--strek img { width: 56px; height: 56px; }

/* «Velg konto» etter innlogging (logreg.php, #xroleplay i fancybox). Ikke
   tegnet i Figma, men alle med firmakonto møter den. Samme uttrykk som
   kvitteringsboksene. */
body.ksnd-bedrift #xroleplay {
  font-family: var(--ks-bedrift);
  font-size: 16px;
  line-height: 24px;
  color: var(--ks-ink);
  padding: 8px 12px;
}
body.ksnd-bedrift #xroleplay b { display: block; margin-bottom: 8px; font-weight: 700; font-size: 20px; }
body.ksnd-bedrift #xroleplay input[type="radio"] { accent-color: var(--ks-rust); margin-right: 6px; }
body.ksnd-bedrift #xroleplay #rolechooser {
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--ks-rust) !important;
  color: var(--ks-white) !important;
  font-family: var(--ks-bedrift) !important;
  font-size: 14px !important;
  padding: 6px 22px !important;
}
body.ksnd-bedrift #xroleplay #rolechooser .ui-button-icon,
body.ksnd-bedrift #xroleplay #rolechooser .ui-button-icon-space,
body.ksnd-bedrift #xroleplay #rolechooser .ui-icon { display: none; }
body.ksnd-bedrift #xroleplay #rolechooser .ui-button-text { padding: 0; }

/* «Bedriftskonto»: lys knapp med rust tekst (287:855). !important fordi
   newdesign.css setter beige og svart med samme vekt. */
body.ksnewdesign.ksnd-bedrift .ksnd-formbtn--beige {
  background: var(--ks-lysbeige) !important;
  color: var(--ks-rust) !important;
}
body.ksnewdesign.ksnd-bedrift .ksnd-formbtn--beige:hover { background: var(--ks-rust) !important; color: var(--ks-white) !important; }

/* Merkedager / navnelister (287:4649): «Vis …» er hvit med rust kant og
   tekst, «Ny …» er mørk som før. */
body.ksnewdesign.ksnd-bedrift #olist_navlayer a,
body.ksnewdesign.ksnd-bedrift #olistsshow,
body.ksnewdesign.ksnd-bedrift #daylistsshow {
  background: var(--ks-white) !important;
  border: 1px solid var(--ks-rust) !important;
  color: var(--ks-rust) !important;
}
body.ksnewdesign.ksnd-bedrift #olistsshow .ui-button-text,
body.ksnewdesign.ksnd-bedrift #daylistsshow .ui-button-text { color: var(--ks-rust) !important; }
body.ksnewdesign.ksnd-bedrift #olist_navlayer a:hover,
body.ksnewdesign.ksnd-bedrift #olistsshow:hover,
body.ksnewdesign.ksnd-bedrift #daylistsshow:hover { background: var(--ks-rust) !important; color: var(--ks-white) !important; }
body.ksnewdesign.ksnd-bedrift #olistsshow:hover .ui-button-text,
body.ksnewdesign.ksnd-bedrift #daylistsshow:hover .ui-button-text { color: var(--ks-white) !important; }
body.ksnd-bedrift .ksnd-daysintro { font-size: 16px; line-height: 22px; }

/* ==========================================================================
   KNAPPER PÅ KONTOSIDENE — Mine ordrer 287:3064, Vis ordre 287:3563,
   Navnelister 289:2332 / 289:2610. Privatsida bruker beige for alt som ikke
   er hovedhandlingen. Bedrift har tre typer:
     rust fylt         «Etterbestill», handlingene på listekortene
     hvit, rust kant   sekundære: «Rediger liste», «Endre navn», «Konverter …»
     mørk              hovedhandlingene, f.eks. «Lagre» (#storeclose, #olstore)
   ========================================================================== */
body.ksnewdesign.ksnd-bedrift .ksnd-order__actions button,
body.ksnewdesign.ksnd-bedrift #olistsphplayer .oseta,
body.ksnewdesign.ksnd-bedrift #olistsphplayer .ui-button {
  background: var(--ks-rust) !important;
  color: var(--ks-white) !important;
}
body.ksnewdesign.ksnd-bedrift .ksnd-order__actions .ui-button-text,
body.ksnewdesign.ksnd-bedrift #olistsphplayer .ui-button-text,
body.ksnewdesign.ksnd-bedrift #olistsphplayer .ui-ks-smallbuttontext { color: var(--ks-white) !important; }
/* ikonene i listekortene blir hvite på rust */
body.ksnewdesign.ksnd-bedrift #olistsphplayer .oseta img,
body.ksnewdesign.ksnd-bedrift #olistsphplayer .ui-button img { filter: brightness(0) invert(1); }
body.ksnewdesign.ksnd-bedrift .ksnd-order__actions button:hover,
body.ksnewdesign.ksnd-bedrift #olistsphplayer .oseta:hover,
body.ksnewdesign.ksnd-bedrift #olistsphplayer .ui-button:hover { background: #9C3B0F !important; }

body.ksnewdesign.ksnd-bedrift .contentContainer button.oseta,
body.ksnewdesign.ksnd-bedrift .contentContainer button.osetx,
body.ksnewdesign.ksnd-bedrift #olsitexlayer button:not(.ksnd-teller__knapp),
body.ksnewdesign.ksnd-bedrift #custlisttools,
body.ksnewdesign.ksnd-bedrift #newmem,
body.ksnewdesign.ksnd-bedrift #edlistname,
body.ksnewdesign.ksnd-bedrift #updlistname,
body.ksnewdesign.ksnd-bedrift #cancupdlistname,
body.ksnewdesign.ksnd-bedrift #capprovelist,
body.ksnewdesign.ksnd-bedrift #olcancel,
body.ksnewdesign.ksnd-bedrift #olrowdelete {
  background: var(--ks-white) !important;
  border: 1px solid var(--ks-rust) !important;
  color: var(--ks-rust) !important;
}
body.ksnewdesign.ksnd-bedrift .contentContainer button.oseta .ui-button-text,
body.ksnewdesign.ksnd-bedrift .contentContainer button.osetx .ui-button-text,
body.ksnewdesign.ksnd-bedrift .contentContainer button.oseta .ui-ks-smallbuttontext,
body.ksnewdesign.ksnd-bedrift .contentContainer button.osetx .ui-ks-smallbuttontext,
body.ksnewdesign.ksnd-bedrift #olsitexlayer button .ui-button-text,
body.ksnewdesign.ksnd-bedrift #olsitexlayer button .ui-ks-smallbuttontext,
body.ksnewdesign.ksnd-bedrift #custlisttools .ui-ks-smallbuttontext { color: var(--ks-rust) !important; }
body.ksnewdesign.ksnd-bedrift .contentContainer button.oseta:hover,
body.ksnewdesign.ksnd-bedrift .contentContainer button.osetx:hover,
body.ksnewdesign.ksnd-bedrift #olsitexlayer button:not(.ksnd-teller__knapp):hover,
body.ksnewdesign.ksnd-bedrift #custlisttools:hover,
body.ksnewdesign.ksnd-bedrift #olcancel:hover {
  background: var(--ks-rust) !important;
  color: var(--ks-white) !important;
}
body.ksnewdesign.ksnd-bedrift .contentContainer button.oseta:hover .ui-button-text,
body.ksnewdesign.ksnd-bedrift .contentContainer button.osetx:hover .ui-button-text,
body.ksnewdesign.ksnd-bedrift .contentContainer button.oseta:hover .ui-ks-smallbuttontext,
body.ksnewdesign.ksnd-bedrift .contentContainer button.osetx:hover .ui-ks-smallbuttontext,
body.ksnewdesign.ksnd-bedrift #olsitexlayer button:hover .ui-ks-smallbuttontext,
body.ksnewdesign.ksnd-bedrift #custlisttools:hover .ui-ks-smallbuttontext { color: var(--ks-white) !important; }

/* ==========================================================================
   TJENESTESIDER — Storformat / Trykksaker (tjeneste.php)
   Ingen Figma-ramme. Toppbilde, innledning og seksjoner som Miljø
   (.ksnd-bmiljoside, .ksnd-bseksjon), så de mest solgte produktene med de
   vanlige produktkortene og en knapp til hele kategorien.
   ========================================================================== */
.ksnd-btjeneste__pop { margin: 80px 0 90px; }
body.ksnewdesign .ksnd-btjeneste__pop h2 {
  border: 0; padding: 0; margin: 0 0 32px;
  font-family: var(--ks-bedrift); font-weight: 700; font-size: 24px; line-height: 30px;
  text-transform: uppercase; text-align: center; color: var(--ks-ink);
}
.ksnd-btjeneste__pop .ksnd-plist { margin-top: 0; }
/* Telling og «Se mer» hører til de vanlige listene, ikke et utvalg på ti */
.ksnd-btjeneste__pop .ksnd-bantall,
.ksnd-btjeneste__pop .ksnd-more { display: none; }
.ksnd-btjeneste__alle { text-align: center; margin: 44px 0 0; }
body.ksnewdesign .ksnd-btjeneste__alle a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 2px 28px;
  border: 1px solid var(--ks-rust); border-radius: 20px;
  font-family: var(--ks-bedrift); font-size: 15px; color: var(--ks-rust); text-decoration: none;
}
body.ksnewdesign .ksnd-btjeneste__alle a:hover { background: var(--ks-rust); color: var(--ks-white); }

/* ==========================================================================
   SKRIFTSTØRRELSER — én skala for alle bedriftssidene (Emma, 8. oktober 2026)
   Figma-verdiene (50px titler, 40px seksjonstitler, 20px brødtekst) ble for
   store. Samme nivå som forsida etter #249:
     sidetittel      34px   (Om oss, Miljø, tjenestesidene, kategori,
                             produktliste, Ofte stilte spørsmål)
     seksjonstittel  26px   (seksjonene på Miljø og tjenestesidene, «Folka
                             på kortshop», «Kontakt oss»-kortet)
     ingress/tekst   16px / 24px
   ========================================================================== */
body.ksnd-bedrift .ksnd-pagetitle,
body.ksnd-bedrift .ksnd-catband__title,
body.ksnd-bedrift .ksnd-omoss__intro .ksnd-h,
body.ksnd-bedrift .ksnd-bmiljoside__intro h1,
body.ksnewdesign.ksnd-bedrift .ksnd-faq__title { font-size: 34px; line-height: 40px; }
body.ksnd-bedrift .ksnd-omoss__intro .ksnd-h,
body.ksnd-bedrift .ksnd-bmiljoside__intro h1 { margin-bottom: 20px; }
body.ksnd-bedrift .ksnd-team .ksnd-h { font-size: 26px; line-height: 32px; margin-bottom: 32px; }

body.ksnewdesign .ksnd-bseksjon h2 { font-size: 26px; line-height: 32px; margin-bottom: 14px; }
body.ksnd-bedrift .ksnd-kontakt__card .ksnd-h { font-size: 26px; }

body.ksnd-bedrift .ksnd-omoss__cols,
.ksnd-bmiljoside__intro p,
.ksnd-bseksjon p,
.ksnd-bseksjon li { font-size: 16px; line-height: 24px; }
body.ksnd-bedrift .ksnd-omoss__cols p,
.ksnd-bmiljoside__intro p,
.ksnd-bseksjon p { margin-bottom: 18px; }
.ksnd-bseksjon p:last-child { margin-bottom: 0; }
.ksnd-bseksjon ul { margin-bottom: 18px; }
body.ksnewdesign .ksnd-kontakt__info p,
body.ksnewdesign .ksnd-kontakt__info address,
body.ksnewdesign .ksnd-kontakt__info h2 { font-size: 16px; line-height: 24px; }
body.ksnewdesign .ksnd-kontakt__info p,
body.ksnewdesign .ksnd-kontakt__info address { margin-bottom: 18px; }
.ksnd-faq__sub { font-size: 18px; line-height: 24px; margin-bottom: 40px; }

@media (max-width: 1023px) {
  body.ksnd-bedrift .ksnd-pagetitle,
  body.ksnd-bedrift .ksnd-catband__title,
  body.ksnd-bedrift .ksnd-omoss__intro .ksnd-h,
  body.ksnd-bedrift .ksnd-bmiljoside__intro h1,
  body.ksnewdesign.ksnd-bedrift .ksnd-faq__title { font-size: 28px; line-height: 34px; }
  body.ksnewdesign .ksnd-bseksjon h2 { font-size: 22px; line-height: 28px; }
}

/* --- Forespørsel på tjenestesidene ---------------------------------------
   Tekst til venstre, skjemakortet fra Kontakt oss til høyre (samme klasse,
   så feltene og knappen får de samme stilene). */
.ksnd-bforesporsel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 497px;
  gap: 60px;
  align-items: start;
  margin: 0 0 90px;
  padding-top: 64px;
  border-top: 1px solid #E4DDD5;
}
body.ksnewdesign .ksnd-bforesporsel h2 {
  border: 0; padding: 0; margin: 0 0 14px;
  font-family: var(--ks-bedrift); font-weight: 700; font-size: 26px; line-height: 32px;
  color: var(--ks-ink);
}
.ksnd-bforesporsel__tekst p { margin: 0 0 18px; font-size: 16px; line-height: 24px; color: var(--ks-ink); }
body.ksnd-bedrift .ksnd-bforesporsel__kort { width: auto; flex: none; padding-top: 30px; }
.ksnd-btjeneste__pop { margin-bottom: 64px; }
@media (max-width: 1023px) {
  .ksnd-bforesporsel { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
}

/* --- Forsida: logostripa og toppbildet (Emma, 8. oktober 2026) -----------
   Stripa har samme hvite bunn som sida, og fyller hele mellomrommet mellom
   toppbildet og Storformat/Trykksaker (205px), så logoene står midt i det.
   Før satt de i en beige stripe rett under bildet, med 64px luft under.
   Toppbildet starter rett under headeren (var 27px lenger ned). */
body.ksnd-bedrift .ksnd-bkunder { background: var(--ks-white); }
.ksnd-bforside .ksnd-bkunder ul { height: 170px; gap: 76px; padding-right: 76px; }   /* var 205px og 90px */
.ksnd-bforside .ksnd-bkunder + .ksnd-btjenester { margin-top: 0; }
body.ksnd-bedrift:has(.ksnd-bforside) .ksnd-header { padding-bottom: 16px; }
@media (max-width: 1023px) {
  .ksnd-bforside .ksnd-bkunder ul { height: 148px; }
}

/* --- Toppvideoen på forsida lavere (Emma, 8. oktober 2026) ----------------
   Var 1440x749 (Figma). Nå 1440x560: full bredde, og videoen beskjæres
   oppe og nede (object-fit: cover) i stedet for å strekkes. Utsnittet står
   30 % fra toppen, så hodene i klippene ikke kuttes. */
.ksnd-bhero img,
.ksnd-bhero video { aspect-ratio: 1440 / 620; object-position: 50% 30%; }   /* 560 → 620 */

/* --- Inspirasjon på forsida (Emma, 8. oktober 2026) ----------------------
   Mellom tjenestene og miljøfeltet. Overskrift og ingress som «Populære
   kategorier», bildene kant til kant med 14px mellom, som tjenestene.
   Bildene leses fra img/bedrift/inspirasjon/ (se frontpage_bedrift.php).
   Små, like store ruter, fire i bredden og midtstilt innenfor innholdet
   (28. oktober 2026: kant til kant forstørret 800px-bildene til nesten
   1000px). Bildeteksten ligger nede til venstre. */
.ksnd-binsp { margin-top: 80px; }
body.ksnewdesign .ksnd-binsp h2 {
  border: 0; padding: 0; margin: 0 0 10px;
  font-family: var(--ks-bedrift); font-weight: 700; font-size: 24px; line-height: 30px;
  text-transform: uppercase; text-align: center; color: var(--ks-ink);
}
.ksnd-binsp__ingress { margin: 0 auto 32px; max-width: 760px; text-align: center; font-size: 16px; line-height: 24px; color: var(--ks-ink); }
.ksnd-bforside .ksnd-binsp__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; list-style: none; padding: 0;
}
.ksnd-binsp__grid li { flex: 0 1 calc((100% - 42px) / 4); }
.ksnd-binsp__grid figure { position: relative; margin: 0; overflow: hidden; border-radius: 10px; }
.ksnd-binsp__grid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .4s ease; }
.ksnd-binsp__grid li:hover img { transform: scale(1.03); }
.ksnd-binsp__grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 18px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  font-size: 15px; line-height: 20px; color: var(--ks-white);
}
.ksnd-binsp + .ksnd-bmiljo { margin-top: 64px; }
@media (max-width: 1023px) {
  .ksnd-binsp { margin-top: 56px; }
  .ksnd-binsp__grid li { flex-basis: calc((100% - 14px) / 2); }
}

/* --- «Dette kan vi også lage» på tjenestesidene (9. oktober 2026) --------
   Alt maskinene kan lage, også det som ikke ligger i nettbutikken. Gruppert,
   fire kort per rad i lys beige. Forespørselsskjemaet følger rett under, uten
   knapp imellom (Emma, 28. oktober 2026: «et synlig skjema, ikke bare en knapp»). */
.ksnd-bmulig { margin: 0 0 56px; }
body.ksnewdesign .ksnd-bmulig h2 {
  border: 0; padding: 0; margin: 0 0 10px;
  font-family: var(--ks-bedrift); font-weight: 700; font-size: 24px; line-height: 30px;
  text-transform: uppercase; text-align: center; color: var(--ks-ink);
}
.ksnd-bmulig__ingress { max-width: 760px; margin: 0 auto 36px; text-align: center; font-size: 16px; line-height: 24px; color: var(--ks-ink); }
body.ksnewdesign .ksnd-bmulig h3 {
  border: 0; padding: 0; margin: 32px 0 14px;
  font-family: var(--ks-bedrift); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--ks-ink);
}
.ksnd-bmulig__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0;
}
.ksnd-bmulig__grid li {
  background: var(--ks-lysbeige); border-radius: 10px; padding: 18px 20px 20px;
  font-size: 14px; line-height: 21px; color: var(--ks-ink);
}
.ksnd-bmulig__grid b { display: block; margin-bottom: 6px; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--ks-rust); }
@media (max-width: 1180px) { .ksnd-bmulig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .ksnd-bmulig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ksnd-bmulig__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOBIL OG NETTBRETT — gjennomgang 28. oktober 2026
   Emma: «sørg for at siden er responsiv og at ipad og mobil størrelse
   fungerer helt optimalt». Målt på 360, 390, 768 og 1024 px.
   ========================================================================== */

/* Toppfeltet på mobil: logoen (134px) gikk inn i kontoikonet på 360 px.
   Innlogget er det fem ikoner, og da lå de oppå logoen. Ordrer og Logg ut
   står også i kontomenyen, så de to tas ut av topplinja på mobil. */
@media (max-width: 640px) {
  body.ksnd-bedrift .ksnd-header__logo img { width: 112px; height: 26px; }
  body.ksnd-bedrift .ksnd-header__icons,
  body.ksnd-bedrift .ksnd-header__icons:has(> a:nth-of-type(4)) { gap: 12px; }
  body.ksnd-bedrift .ksnd-header__icons--top:has(> a:nth-of-type(4)) > a:nth-of-type(2),
  body.ksnd-bedrift .ksnd-header__icons--top:has(> a:nth-of-type(4)) > a:nth-of-type(4) { display: none; }
}

/* Footeren: 86px topp og 64px mellom spaltene er desktopmål, men de slo
   gjennom på mobil også (høyere spesifisitet enn trinnene i newdesign.css).
   Spaltene sto da én og én med store hull. Nå to og to på mobil. */
@media (max-width: 1023px) {
  body.ksnd-bedrift .ksnd-footer { padding-top: 50px; }
  body.ksnd-bedrift .ksnd-footer__cols { gap: 40px; }
}
@media (max-width: 640px) {
  body.ksnd-bedrift .ksnd-footer { padding-top: 40px; }
  body.ksnd-bedrift .ksnd-footer__cols { gap: 32px 20px; }
}
/* Lenkene i footeren var 17px høye — for smått å treffe med tommelen */
@media (hover: none) and (pointer: coarse) {
  body.ksnd-bedrift .ksnd-footer__col li a { display: inline-block; padding: 6px 0; }
}

/* Forsida: ®-tegnet var 32px fast og ble større enn selve overskrifta på
   mobil (26px), så linja brakk rart. Nå følger det overskrifta. */
.ksnd-bmiljo__fsc h2 sup { font-size: .6em; }

/* Populære kategorier: fire på rad på nettbrett også (to store bilder i
   bredden ble over 300px høye hver). Lista hadde egen sidemarg i tillegg
   til sidas, så bildene ble smalere enn nødvendig på mobil. */
@media (max-width: 1023px) {
  .ksnd-bpop { padding: 0; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .ksnd-bpop ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Inspirasjon: tre på rad på nettbrett, to på mobil */
@media (min-width: 641px) and (max-width: 1023px) {
  .ksnd-binsp__grid li { flex-basis: calc((100% - 28px) / 3); }
}

/* «Les mer» i miljøfeltet var 12px skrift og 34px høy */
@media (hover: none) and (pointer: coarse) {
  body.ksnewdesign .ksnd-bmiljo__tekst a { padding: 10px 22px; font-size: 14px; }
}

/* Tjenestesidene: bildene vises i egen størrelse (aldri strukket), men et
   stående bilde ble nesten 800px høyt på nettbrett. Høyden tak, bredden
   følger med, så forholdet er det samme. */
@media (max-width: 1023px) {
  .ksnd-bseksjon__bilde--egen { max-height: 560px; }
}

/* Produktlista: common_styles.css tvinger navnet ned til 0,9em (11px) under
   376px med !important, og «Vis» var 10px skrift i en 26px høy pille. */
@media (max-width: 375px) {
  body.ksnewdesign.ksnd-bedrift .ksnd-plist ul.column li a.xlisttitle { font-size: 15px !important; }
}
@media (hover: none) and (pointer: coarse) {
  body.ksnewdesign.ksnd-bedrift .ksnd-plist ul.column li .tdbLink a,
  body.ksnewdesign.ksnd-bedrift .ksnd-plist ul.column li a.ui-button {
    padding: 10px 22px !important;
    font-size: 13px !important;
  }
}

/* Produktsida på nettbrett. ksbxslider/product_info.css gir høyrespalta
   float:left og margin-left:20px fra 768 til 1200 px:
   - 961–1200 (iPad på tvers): sammen med prosentene i newdesign.css ble
     det over 100 %, og bestillingsdelen falt ned under bildet, i halv
     bredde med tomrom til høyre.
   - 768–960 (iPad på høykant): bildet 400px + 20 + 42 % fikk ikke plass,
     samme resultat.
   Over 960 står spaltene side om side igjen; under stables de i full
   bredde, slik mobil allerede gjør. */
@media (min-width: 961px) and (max-width: 1200px) {
  body.ksnd-bedrift #cartqc #rightfloat { float: right; margin-left: 0; }
}
@media (max-width: 960px) {
  body.ksnd-bedrift #cartqc #leftfloat { float: none; max-width: 520px; margin: 0 auto; }
  body.ksnd-bedrift #cartqc #rightfloat { float: none; width: auto; margin: 30px 0 0; }
}

/* Trykkflater på berøringsskjerm. Ikonene øverst er 24px og hamburgeren
   30px; en usynlig ramme rundt gjør flaten 40–44px uten å flytte noe.
   «−» og «+» i antallsvelgeren på produktsida var bare 6–9px brede. */
@media (hover: none) and (pointer: coarse) {
  body.ksnd-bedrift .ksnd-header__icons a::after {
    content: ""; position: absolute; inset: -8px -6px;
  }
  body.ksnd-bedrift .ksnd-burger::after {
    content: ""; position: absolute; inset: -7px;
  }
  body.ksnd-bedrift .ksnd-pinfo__qty { padding: 0 4px; gap: 0; }
  body.ksnewdesign.ksnd-bedrift button.ksnd-pinfo__step {
    width: 40px; height: 40px;
    font-size: 20px !important;
  }
}