/*
 * Svenska Motor – Blocket Fordon
 *
 * Designtokens hämtade från svenskamotor.se. Typsnitten laddas medvetet INTE
 * här: Enreal och HK Grotesk Pro är licensierade och levereras redan av temat.
 * Vi refererar bara familjenamnen och har systemfonter som reserv, så
 * pluginet varken dubbelladdar eller bryter mot licensen.
 */

:root {
  --sm-font-heading: 'Enreal', 'HK Grotesk Pro', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sm-font-body: 'HK Grotesk Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sm-ink: #242424;
  --sm-ink-deep: #05141f;
  --sm-muted: #697279;
  --sm-muted-semi: #a5a5a5;
  --sm-surface: #f7f8f8;
  --sm-line: #edeeef;
  --sm-line-strong: #dcdedf;
  --sm-accent: #c02b0a;
  --sm-white: #fff;
  --sm-box-line: #333;
  /* Sidans bakgrund. Ligger som egen token eftersom fade-outen i
     beskrivningen måste tona mot exakt samma färg som ytan bakom. */
  --sm-bg: #fff;

  --sm-pill: 30px;
  --sm-btn: 70px;
  --sm-radius: 8px;

  --sm-wrap: 1180px;
  --sm-gap: 24px;
}

/* ============ Arkiv ============ */

/*
 * Twenty Twenty-Five sätter brödtexten i vikt 300. Allt i pluginet som inte
 * har en egen vikt ärver den och blir för tunt. Vi sätter därför 400 på
 * rotelementen i stället för att jaga varje enskild selektor.
 */
.fordon-arkiv {
  font-family: var(--sm-font-body);
  font-weight: 400;
  color: var(--sm-ink);
  padding: 48px 0 80px;
}

.fordon-arkiv__wrap,
.fordon-detalj__wrap {
  max-width: var(--sm-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.fordon-arkiv__topp {
  margin-bottom: 28px;
}

.fordon-arkiv__topp h1 {
  font-family: var(--sm-font-heading);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.2;
  color: var(--sm-ink);
  margin: 0 0 10px;
}

.fordon-arkiv__ingress {
  font-size: 20px;
  line-height: 1.5;
  color: var(--sm-ink);
  margin: 0;
  max-width: 62ch;
}

/* ============ Filterfält ============ */

.fordon-filterfalt {
  margin-bottom: 8px;
}

.fordon-sok {
  position: relative;
  max-width: 500px;
  margin-bottom: 20px;
}

.fordon-sok input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--sm-ink);
  background: var(--sm-white);
  border: 1px solid var(--sm-line-strong);
  border-radius: var(--sm-pill);
  padding: 11px 52px 11px 18px;
  outline: none;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.fordon-sok input:focus {
  border-color: var(--sm-line-strong);
}

.fordon-sok__knapp {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--sm-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.fordon-sok__knapp svg {
  width: 19px;
  height: 19px;
  color: var(--sm-muted);
}

.fordon-pillar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.fordon-pill-wrap {
  position: relative;
}

.fordon-pill-wrap.is-last .fordon-pill {
  color: var(--sm-muted);
}

.fordon-last {
  margin: 0;
  padding: 4px 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sm-muted);
}

.fordon-pill {
  font-family: var(--sm-font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--sm-ink);
  background: var(--sm-surface);
  border: 1px solid var(--sm-surface);
  border-radius: var(--sm-pill);
  padding: 7px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fordon-pill:hover:not([disabled]) {
  border-color: var(--sm-line-strong);
  opacity: .75;
}

.fordon-pill[disabled] {
  cursor: not-allowed;
}

.fordon-pill--alla {
  background: var(--sm-ink);
  border-color: transparent;
  color: var(--sm-white);
}

.fordon-pill--alla svg {
  width: 17px;
  height: 17px;
}

.fordon-pill--rensa {
  border-color: transparent;
  color: var(--sm-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fordon-pill__antal {
  background: var(--sm-muted);
  color: var(--sm-white);
  border-radius: var(--sm-pill);
  font-size: 13px;
  line-height: 1;
  padding: 3px 8px;
}

.fordon-pill__chevron {
  width: 15px;
  height: 15px;
  color: var(--sm-muted);
  transition: transform 0.2s ease;
}

.fordon-pill[aria-expanded='true'] .fordon-pill__chevron {
  transform: rotate(180deg);
}

/* ---- Utfällbar panel ---- */

.fordon-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 260px;
  max-width: 340px;
  background: var(--sm-white);
  border: 1px solid var(--sm-line);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(5, 20, 31, 0.12);
  padding: 14px 16px;
  animation: fordon-fram 0.16s ease;
}

@keyframes fordon-fram {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.fordon-panel__sok {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-pill);
  padding: 7px 14px;
  margin-bottom: 10px;
  outline: none;
}

.fordon-val {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
}

.fordon-val li.is-tom {
  opacity: 0.4;
}

.fordon-val label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  font-size: 16px;
  cursor: pointer;
}

.fordon-val input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--sm-ink);
  flex: none;
  margin: 0;
  cursor: pointer;
}

.fordon-val__namn {
  flex: 1;
}

.fordon-val__antal {
  color: var(--sm-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.fordon-val__tomt {
  color: var(--sm-muted);
  font-size: 15px;
  padding: 6px 0;
}

/* ---- Intervall ---- */

.fordon-range__varden {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}

.fordon-range__varden label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--sm-muted);
}

.fordon-range__varden input {
  font-family: inherit;
  font-size: 16px;
  color: var(--sm-ink);
  border: 1px solid var(--sm-line);
  border-radius: 8px;
  padding: 7px 10px;
  width: 100%;
  outline: none;
}

.fordon-range__enhet {
  font-size: 14px;
  color: var(--sm-muted);
  padding-bottom: 9px;
}

/* Två överlagrade reglage ger dubbla tumgrepp utan externt bibliotek. */
.fordon-range__reglage {
  position: relative;
  height: 26px;
  margin: 0 6px 4px;
}

/*
 * Spåret ligger UNDER reglagen. Låg z-index och pointer-events:none — annars
 * fångar det klicken och tumgreppen blir omöjliga att dra.
 */
.fordon-range__spar {
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--sm-line);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

.fordon-range__fyllning {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--sm-ink);
  border-radius: 2px;
}

.fordon-range__reglage input[type='range'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
}

.fordon-range__reglage input[type='range']:focus-visible {
  outline: none;
}

.fordon-range__reglage input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(36, 36, 36, 0.25);
}

.fordon-range__reglage input[type='range']::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sm-white);
  border: 2px solid var(--sm-ink);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(5, 20, 31, 0.25);
}

.fordon-range__reglage input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sm-white);
  border: 2px solid var(--sm-ink);
  cursor: grab;
}

.fordon-range__reglage input[type='range']::-moz-range-track {
  background: none;
}

/* ---- Valda filter som chips ---- */

.fordon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.fordon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sm-font-body);
  font-size: 15px;
  color: var(--sm-white);
  background: var(--sm-accent);
  border: 1px solid var(--sm-accent);
  border-radius: var(--sm-pill);
  padding: 6px 12px 6px 16px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fordon-chip:hover {
  border-color: var(--sm-accent);
  opacity: .75;
  transition: background-color .2s, opacity .2s;
}

.fordon-chip svg {
  width: 13px;
  height: 13px;
  color: var(--sm-white);
  flex: none;
}

.fordon-chip:hover svg {
  color: var(--sm-muted);
}

.fordon-chip--rensa {
  background: transparent;
  border-color: transparent;
  color: var(--sm-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 6px;
  padding-right: 6px;
}

.fordon-chip--rensa:hover {
  border-color: transparent;
  color: var(--sm-ink);
}

/* ---- Resultatrad ---- */

.fordon-resultatrad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.fordon-antal {
  margin: 0;
  font-size: 15px;
  color: var(--sm-muted);
}

.fordon-antal strong {
  color: var(--sm-ink);
}

.fordon-sortering {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--sm-muted);
}

/*
 * Den riktiga <select> ligger kvar för besökare utan JavaScript, och behåller
 * sin gamla stil. Med skript göms den och rullgardinen nedan tar över.
 */
.fordon-sortering select {
  font-family: inherit;
  font-size: 15px;
  color: var(--sm-ink);
  border: 1px solid var(--sm-line-strong);
  border-radius: var(--sm-pill);
  padding: 6px 14px 6px 14px;
  background: var(--sm-white);
  cursor: pointer;
  outline: none;
}

/* Båda kontrollerna sätts som göms av JavaScript — hidden ska räcka. */
.fordon-sortering select[hidden],
.fordon-valj[hidden] {
  display: none;
}

/*
 * Sorteringen använder samma rullgardin som konfiguratorns leveransval, men i
 * pillerform: den står i en rad med träffräknaren och ska väga lika lätt som
 * filterpillren ovanför, inte som ett formulärfält.
 */
.fordon-valj--pill {
  max-width: none;
}

.fordon-valj--pill .fordon-valj__knapp {
  width: auto;
  font-size: 15px;
  padding: 6px 36px 6px 14px;
  border: 1px solid var(--sm-line-strong);
  border-radius: var(--sm-pill);
}

.fordon-valj--pill .fordon-valj__knapp::after {
  right: 14px;
  width: 7px;
  height: 7px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

/*
 * Listan hänger från högerkanten. Knappen sitter längst ut till höger i raden,
 * och en lista som växer åt höger skulle hamna utanför sidan.
 */
.fordon-valj--pill .fordon-valj__lista {
  left: auto;
  right: 0;
  min-width: 220px;
}

.fordon-valj--pill .fordon-valj__lista li {
  font-size: 15px;
  padding: 9px 12px;
  white-space: nowrap;
}

/* ============ Modal ============ */

body.fordon-modal-oppen {
  overflow: hidden;
}

.fordon-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: var(--sm-font-body);
  font-weight: 400;
}

.fordon-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 20, 31, 0.42);
  animation: fordon-tona 0.2s ease;
}

@keyframes fordon-tona {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fälls ut från vänster. */
.fordon-modal__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(440px, 100%);
  background: var(--sm-white);
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 40px rgba(5, 20, 31, 0.18);
  animation: fordon-in-vanster 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes fordon-in-vanster {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

.fordon-modal__topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--sm-line);
}

.fordon-modal__topp h2 {
  font-family: var(--sm-font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.fordon-modal__stang {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--sm-surface);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sm-ink);
}

.fordon-modal__stang svg {
  width: 17px;
  height: 17px;
}

.fordon-modal__innehall {
  flex: 1;
  overflow-y: auto;
  padding: 4px 24px 24px;
}

.fordon-modal__grupp {
  border-bottom: 1px solid var(--sm-line);
}

.fordon-modal__grupp summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  list-style: none;
}

.fordon-modal__grupp summary::-webkit-details-marker {
  display: none;
}

.fordon-modal__grupp summary::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  color: var(--sm-muted);
  font-weight: 400;
}

.fordon-modal__grupp[open] summary::after {
  content: '–';
}

.fordon-modal__vald {
  background: var(--sm-ink);
  color: var(--sm-white);
  border-radius: var(--sm-pill);
  font-size: 12.5px;
  padding: 2px 9px;
}

.fordon-modal__kropp {
  padding: 0 0 18px;
}

.fordon-modal__kropp .fordon-val {
  max-height: none;
}

.fordon-modal__botten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  border-top: 1px solid var(--sm-line);
  background: var(--sm-white);
}

.fordon-knapp {
  font-family: var(--sm-font-heading);
  font-size: 17px;
  font-weight: 500;
  color: var(--sm-white);
  background: var(--sm-ink);
  border: none;
  border-radius: var(--sm-btn);
  padding: 11px 26px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.fordon-knapp:hover {
  opacity: 0.88;
}

.fordon-lank-knapp {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: var(--sm-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ============ Resultat ============ */

.fordon-resultat {
  transition: opacity 0.18s ease;
  min-height: 200px;
}

.fordon-resultat.is-laddar {
  opacity: 0.4;
  pointer-events: none;
}

.fordon-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px var(--sm-gap);
}

@media (max-width: 1000px) {
  .fordon-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .fordon-lista {
    grid-template-columns: 1fr;
  }
}

/*
 * min-width: 0 är avgörande. Rutnätets celler har annars min-width: auto,
 * vilket betyder att de aldrig krymper under sitt innehålls minsta bredd —
 * och rubriken med white-space: nowrap har ingen minsta bredd att tala om.
 * Utan detta växte spalterna efter den längsta biltiteln och rutnätet
 * spillde ut över sidans bredd.
 */
.fordon-kort {
  background: transparent;
  min-width: 0;
}

.fordon-kort__lank {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fordon-kort__bild {
  position: relative;
  aspect-ratio: 4 / 2.7;
  background: var(--sm-surface);
  border-radius: var(--sm-radius);
  overflow: hidden;
  margin-bottom: 14px;
}

.fordon-kort__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.fordon-kort__lank:hover .fordon-kort__bild img {
  transform: scale(1.03);
}

.fordon-kort__platshallare {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #f2f3f4, #f2f3f4 12px, #eaebec 12px, #eaebec 24px);
}

.fordon-kort__ort {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sm-ink);
  font-size: 13px;
  padding: 5px 11px;
  border-radius: var(--sm-pill);
}

.fordon-kort__ort svg {
  width: 13px;
  height: 13px;
}

.fordon-kort__flagga {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--sm-ink);
  color: var(--sm-white);
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: var(--sm-pill);
}

.fordon-kort__flagga--pris {
  background: var(--sm-accent);
}

.fordon-kort__titel, .fordon-kort__innehall h2.fordon-kort__titel {
  font-family: var(--sm-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sm-ink);
  margin: 0 0 12px;
  /* Alltid en rad — korten i rutnätet ska ha samma höjd. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fordon-kort__version {
  font-size: 16px;
  color: var(--sm-muted);
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fordon-kort__fakta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 15px;
  color: var(--sm-muted);
  margin: 0 0 12px;
}

.fordon-kort__punkt {
  color: var(--sm-line-strong);
  font-size: 11px;
}

/*
 * Priset och månadskostnaden delar raden lika, 50/50, och båda talen är
 * vänsterställda i sin egen halva. Grid och inte flex: med space-between hade
 * månadskostnadens position hoppat med prisets längd, och kolumnerna ska stå
 * still mellan korten i rutnätet.
 *
 * Blocken är display: contents, så etiketterna hamnar på rad ett och talen på
 * rad två oavsett hur höga de blir. Utan det sjunker "Finansiering" ner i
 * jämnhöjd med ett pris som brutit rad ("269 900 kr" över "249 900 kr") och
 * etiketterna står inte längre på samma linje.
 */
.fordon-kort__prisrad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 2px 10px;
}

.fordon-kort__prisblock {
  display: contents;
}

.fordon-kort__prisblock:first-child > * {
  grid-column: 1;
}

.fordon-kort__prisblock + .fordon-kort__prisblock > * {
  grid-column: 2;
}

/* Etiketterna "Pris" och "Finansiering" över respektive tal. */
.fordon-kort__etikett {
  grid-row: 1;
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sm-muted);
  margin: 0;
}

.fordon-kort__pris,
.fordon-kort__manad {
  grid-row: 2;
  min-width: 0;
}

/*
 * Månadskostnaden sätts som köppriset — samma grad, vikt och färg. De två
 * talen är likvärdiga sätt att köpa bilen, och att sätta det ena svagare gör
 * det till en fotnot. Gäller bara kortet; på detaljsidan har .fordon-pris__manad
 * sin egen, mindre grad under priset.
 */
.fordon-kort__manad, .fordon-kort__pris {
  font-family: var(--sm-font-body);  
  color: var(--sm-ink);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

.fordon-kort__manad {
  white-space: nowrap;
}

.fordon-kort__pris {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.fordon-kort__pris-tidigare {
  color: var(--sm-muted);
  font-size: 15px;
  font-weight: 400;
}

.fordon-moms {
  font-size: 13px;
  font-weight: 400;
  color: var(--sm-muted);
}

.fordon-tomt {
  padding: 48px 0;
  text-align: center;
  color: var(--sm-muted);
}

.fordon-tomt strong {
  color: var(--sm-ink);
  font-size: 18px;
}

.fordon-paginering {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.fordon-sida {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sm-pill);
  border: 2px solid var(--sm-surface);
  color: var(--sm-ink);
  text-decoration: none;
  font-size: 15px;
  padding: 0 12px;
}

.fordon-sida.is-aktiv {
  background: var(--sm-ink);
  border-color: var(--sm-ink);
  color: var(--sm-white);
}

/* ============ Detaljsida ============ */

.fordon-detalj {
  font-family: var(--sm-font-body);
  font-weight: 400;
  color: var(--sm-ink);
  padding: 0 0 80px;
}

.fordon-såld {
  background: var(--sm-surface);
  border-left: 3px solid var(--sm-accent);
  padding: 14px 20px;
  margin: 0 auto 24px;
  max-width: calc(var(--sm-wrap) - 48px);
}

/* ---- Bildslider ---- */

.fordon-slider {
  position: relative;
  margin: 0 0 40px;
  outline: none;
  --fordon-slide-bredd: min(72vw, 940px);
}

.fordon-slider:focus-visible {
  outline: 2px solid var(--sm-ink);
  outline-offset: 4px;
}

.fordon-slider__spar {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 calc((100% - var(--fordon-slide-bredd)) / 2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fordon-slider__spar::-webkit-scrollbar {
  display: none;
}

.fordon-slider__bild {
  flex: 0 0 var(--fordon-slide-bredd);
  margin: 0;
  scroll-snap-align: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sm-surface);
  border-radius: var(--sm-radius);
}

.fordon-slider__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * Dimningen ligger med flit INNE i @supports, tillsammans med effekten som
 * lyfter den centrerade bilden tillbaka. De två hör ihop och måste stå och
 * falla tillsammans.
 *
 * Låg opacity: 0.4 utanför blocket, som tidigare, blev varje bild permanent
 * nedtonad i varje webbläsare utan scrolldrivna animationer — Safari och
 * Firefox. Undantaget :not(--aktiv) hjälpte inte, eftersom fordon.js lägger
 * på den klassen villkorslöst så fort galleriet har mer än en bild. Resultatet
 * var en vit slöja över bilderna på 165 av 168 annonser, och den syntes bara
 * inte för den som slagit på "minska rörelse".
 */
@supports (animation-timeline: view()) {
  .fordon-slider--aktiv .fordon-slider__bild {
    opacity: 0.4;
    transition: opacity 0.35s ease;
    animation: fordon-slide-fokus linear both;
    animation-timeline: view(inline);
    animation-range: cover 25% cover 75%;
  }

  @keyframes fordon-slide-fokus {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
}

.fordon-slider:not(.fordon-slider--aktiv) .fordon-slider__bild,
.fordon-slider--enkel .fordon-slider__bild {
  opacity: 1;
}

/*
 * Klonade bilder i spårets båda ändar. De ser likadana ut som originalen —
 * skillnaden är att de aldrig får fokus eller läses upp. Tidigare låg här en
 * dekorativ yta som fejkade sista bilden i vänstra gluggen; nu finns bilden
 * där på riktigt, som en del av spåret.
 */
.fordon-slider__bild[data-klon] {
  pointer-events: none;
}

.fordon-slider__pil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(5, 20, 31, 0.12);
}

.fordon-slider__pil svg {
  width: 20px;
  height: 20px;
}

.fordon-slider__pil[disabled] {
  opacity: 0.25;
  cursor: default;
}

.fordon-slider__pil--forra {
  left: calc((100% - var(--fordon-slide-bredd)) / 2 + 14px);
}

.fordon-slider__pil--nasta {
  right: calc((100% - var(--fordon-slide-bredd)) / 2 + 14px);
}

.fordon-slider__raknare {
  position: absolute;
  right: calc((100% - var(--fordon-slide-bredd)) / 2 + 14px);
  bottom: 14px;
  margin: 0;
  background: rgba(5, 20, 31, 0.7);
  color: var(--sm-white);
  font-size: 12.5px;
  padding: 4px 11px;
  border-radius: var(--sm-pill);
  z-index: 2;
}

.fordon-slider__punkter {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.fordon-slider__punkt {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sm-line-strong);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fordon-slider__punkt[aria-current='true'] {
  background: var(--sm-ink);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .fordon-slider__spar { scroll-behavior: auto; }
  .fordon-slider__bild { transition: none; animation: none; opacity: 1; }
  .fordon-modal__panel, .fordon-modal__overlay, .fordon-panel { animation: none; }
}

@media (max-width: 900px) {
  .fordon-slider {
    --fordon-slide-bredd: 90vw;
  }

  .fordon-slider__pil {
    display: none;
  }
}

/* ---- Rubrik och pris ---- */

/* Rubriken tar två tredjedelar, priset den sista. */
.fordon-detalj__topp {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: start;
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 760px) {
  .fordon-detalj__topp {
    grid-template-columns: 1fr;
  }
}

.fordon-detalj__topp h1 {
  font-family: var(--sm-font-heading);
  font-weight: 700;
  margin: 0 0 4px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  color: var(--sm-ink);
}

.fordon-detalj__version {
  margin: 0;
  color: var(--sm-muted);
  font-size: 18px;
}

.fordon-detalj__pris {
  text-align: right;
}

@media (max-width: 760px) {
  .fordon-detalj__pris {
    text-align: left;
  }
}

.fordon-pris__rad {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 760px) {
  .fordon-pris__rad {
    justify-content: flex-start;
  }
}

.fordon-pris__manad {
  font-weight: 600;
  margin: 4px 0 0;
  color: var(--sm-muted);
  font-size: 18px;
}

/* Temat sätter normalt border-box globalt, men pluginet ska inte falla
   sönder om det inte gör det. */
.fordon-arkiv *,
.fordon-arkiv *::before,
.fordon-arkiv *::after,
.fordon-detalj *,
.fordon-detalj *::before,
.fordon-detalj *::after,
.fordon-modal *,
.fordon-modal *::before,
.fordon-modal *::after {
  box-sizing: border-box;
}

/* ---- Kalkylator och anläggningsruta ---- */

.fordon-detalj__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sm-gap);
  align-items: stretch;
  margin: 0 0 40px;
}

@media (max-width: 860px) {
  .fordon-detalj__par {
    grid-template-columns: 1fr;
  }
}

/* Grid-cellernas stretch räcker för lika höga boxar. Ett height: 100 %
   ovanpå det räknas mot cellen och lägger paddingen utanför, om temat inte
   råkar sätta border-box globalt — boxarna sticker då ut nedåt. */
.fordon-kalkyl,
.fordon-anlaggning {
  background: var(--sm-surface);
  border-radius: var(--sm-radius);
  padding: 26px 28px 24px;
  margin: 0;
}

.fordon-kalkyl h2,
.fordon-anlaggning h2 {
  font-size: 20px;
  margin: 0 0 14px;
}

.fordon-kalkyl__belopp {
  font-family: var(--sm-font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--sm-ink);
  margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}

.fordon-kalkyl__rad {
  display: block;
  margin-bottom: 20px;
}

.fordon-kalkyl__etikett {
  display: block;
  font-size: 14px;
  color: var(--sm-muted);
  margin-bottom: 2px;
}

.fordon-kalkyl__varde {
  display: block;
  font-size: 17px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.fordon-kalkyl__sub {
  color: var(--sm-muted);
  font-size: 15px;
}

.fordon-kalkyl input[type='range'] {
  width: 100%;
  height: 22px;
  margin: 0;
  accent-color: var(--sm-ink);
  cursor: pointer;
}

.fordon-kalkyl input[type='range']:disabled {
  opacity: 0.35;
  cursor: default;
}

.fordon-kalkyl__summering {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 24px 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--sm-line-strong);
}

.fordon-kalkyl__summering div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fordon-kalkyl__summering dt {
  font-size: 14px;
  color: var(--sm-muted);
  margin: 0;
}

.fordon-kalkyl__summering dd {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.fordon-kalkyl__villkor,
.fordon-kalkyl__varning {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sm-muted);
  margin: 0 0 10px;
}

.fordon-kalkyl__varning strong {
  color: var(--sm-ink);
  display: block;
}

.fordon-anlaggning__ort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  margin: 0 0 14px;
}

.fordon-anlaggning__ort svg {
  width: 18px;
  height: 18px;
  color: var(--sm-muted);
  flex: none;
}

.fordon-pris__tidigare s {
  color: #9aa2a8;
  font-size: clamp(18px, 2.2vw, 26px);
  text-decoration-thickness: 1px;
}

.fordon-pris__nu {
  font-family: var(--sm-font-body);
  font-size: clamp(28px, 3.6vw, 44px);
  //font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  white-space: nowrap;
  color: var(--sm-ink);
  letter-spacing: -0.02em;
}

.fordon-pris__badge {
  background: var(--sm-accent);
  color: var(--sm-white);
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--sm-pill);
  align-self: center;
}

/* ---- Nyckeltal ---- */

.fordon-nyckeltal {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 20px;
}

.fordon-nyckeltal__box {
  border: 1px solid var(--sm-line-strong);
  border-radius: var(--sm-radius);
  background: var(--sm-white);
  padding: 16px 18px 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 112px;
}

.fordon-nyckeltal__ikon {
  color: var(--sm-muted);
  margin-bottom: 25px;
  line-height: 0;
}

.fordon-nyckeltal__ikon svg {
  width: 20px;
  height: 20px;
}

.fordon-nyckeltal__varde {
  font-size: 18px;
  font-weight: 600;
  color: var(--sm-ink);
}

.fordon-nyckeltal__etikett {
  font-size: 13px;
  color: var(--sm-muted);
}

@media (max-width: 600px) {
  .fordon-nyckeltal {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Kolumner ---- */

.fordon-detalj__kolumner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 50px;
}

/*
 * Grid-celler har min-width: auto som förval, alltså "aldrig smalare än
 * innehållets naturliga minsta bredd". Flerspaltslistorna i Utrustning och
 * Specifikation har en stor sådan — fyra spalter gånger längsta raden — och
 * när de fälldes ut sprängde de 2fr-spåret och sköt ut högerspalten utanför
 * vyn. min-width: 0 säger att spåret får vinna över innehållet.
 */
.fordon-detalj__huvud,
.fordon-detalj__sida {
  min-width: 0;
}

.fordon-detalj h2 {
  font-family: var(--sm-font-heading);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 34px;
}

.fordon-detalj section {
  margin-bottom: 40px;
}

/* I vänsterspalten finns inte plats för fyra spalter — två läser bättre. */
.fordon-detalj__huvud .fordon-utrustning {
  columns: 2;
}

@media (max-width: 780px) {
  .fordon-detalj__huvud .fordon-utrustning {
    columns: 1;
  }
}

.fordon-utrustning {
  columns: 4;
  column-gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
}

.fordon-utrustning li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  break-inside: avoid;
}

.fordon-utrustning__bock {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--sm-ink);
  /* Optisk centrering mot första textraden, inte mot hela li:n. */
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .fordon-utrustning { columns: 3; }
}

@media (max-width: 800px) {
  .fordon-utrustning { columns: 2; }
}

@media (max-width: 520px) {
  .fordon-utrustning { columns: 1; }
}

/* ---- Inbäddningsytor (Serviceform, Gravity Forms) ---- */

.fordon-embed {
  margin-top: 24px;
}

.fordon-embed__rubrik {
  font-family: var(--sm-font-heading);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Formuläret ligger i en ruta som redan har bakgrund — dra inte på en till. */
.fordon-anlaggning .fordon-embed {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--sm-line-strong);
}

/*
 * Platshållarläget syns bara för inloggade med redigeringsrätt (se
 * Embed::slot). Den streckade ramen är avsiktligt tydlig — den ska gå att se
 * på en skärmbild att ytan finns men står tom.
 */
.fordon-embed.ar-tom {
  border: 1px dashed var(--sm-line-strong);
  border-radius: var(--sm-radius);
  padding: 18px 20px;
  background: var(--sm-surface);
}

.fordon-anlaggning .fordon-embed.ar-tom {
  border: 1px dashed var(--sm-line-strong);
  background: var(--sm-white);
}

.fordon-embed__platshallare {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--sm-muted);
}

.fordon-embed__krok {
  margin: 0 0 8px;
}

.fordon-embed__krok code {
  font-size: 13px;
  background: var(--sm-white);
  border: 1px solid var(--sm-line-strong);
  border-radius: 3px;
  padding: 2px 6px;
}

.fordon-anlaggning .fordon-embed__krok code {
  background: var(--sm-surface);
}

.fordon-embed__notis {
  margin: 0;
  font-size: 13px;
  color: var(--sm-muted);
  font-style: italic;
}

/* Gravity Forms sätter egna bredder — håll det innanför rutan. */
.fordon-embed__kropp {
  max-width: 100%;
}

.fordon-embed__kropp .gform_wrapper {
  margin: 0;
}

.fordon-embed__kropp input,
.fordon-embed__kropp select,
.fordon-embed__kropp textarea {
  max-width: 100%;
}

/*
 * Serviceforms inline-chatt. Marginalen gäller bara när behållaren faktiskt
 * fått innehåll — en tom div ska inte lämna ett hål ovanför beskrivningen.
 */
#sf-inline:not(:empty) {
  margin-bottom: 32px;
}

/* ---- Läs mer ---- */

/*
 * Klampningen ligger på en klass som JS sätter, inte i grundstilen. Är
 * beskrivningen kortare än taket — eller är JS avstängt — syns hela texten
 * utan knapp, i stället för att en fade lägger sig över en text som redan får
 * plats.
 */
.fordon-beskrivning__text {
  font-size: 17px;
  line-height: 1.5;
}

.fordon-beskrivning__text > *:first-child {
  margin-top: 0;
}

.fordon-beskrivning__text > *:last-child {
  margin-bottom: 0;
}

.fordon-beskrivning.ar-klamrad .fordon-beskrivning__text {
  position: relative;
  overflow: hidden;
  /* 11 rader — 1.65 i radhöjd gånger elva. */
  max-height: 18.15em;
}

.fordon-beskrivning.ar-klamrad .fordon-beskrivning__text::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5.5em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--sm-bg) 85%);
  pointer-events: none;
}

.fordon-beskrivning.ar-oppen .fordon-beskrivning__text {
  max-height: none;
}

.fordon-lasmer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--sm-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.fordon-lasmer::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.fordon-beskrivning.ar-oppen .fordon-lasmer::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.fordon-lasmer:hover {
  color: var(--sm-accent);
}

/* ============ Finansiering och tillval ============ */

/*
 * Rutan har samma ram som nyckeltalsboxarna i toppen, men en ljusare botten och
 * betydligt mer luft — den är sidans arbetsyta, inte en faktaruta.
 */
.fordon-konfig {
  background: var(--sm-surface);
  //border: 1px solid var(--sm-box-line);
  border-radius: var(--sm-radius);
  padding: 92px 90px 74px;
  margin: 0 0 var(--sm-gap);
}

.fordon-konfig__rubrik {
  font-family: var(--sm-font-heading);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 24px;
}

.fordon-konfig__rader {
  border-top: 1px solid var(--sm-line-strong);
}

.fordon-konfig__rad {
  border-bottom: 1px solid var(--sm-line-strong);
}

.fordon-konfig__rad > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

.fordon-konfig__rad > summary::-webkit-details-marker {
  display: none;
}

.fordon-konfig__etikett {
  font-size: 18px;
  font-weight: 600;
  color: var(--sm-ink);
}

/* Värdet står till höger, direkt till vänster om chevronen. */
.fordon-konfig__varde {
  margin-left: auto;
  text-align: right;
}

/*
 * Valet visas som ett pill. Ett gjort val är fyllt och mörkt, ett ogjort är
 * en tunn kontur — skillnaden syns på en halv sekund när man skummar raderna.
 */
.fordon-konfig__pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--sm-pill);
  border: 1px solid var(--sm-line-strong);
  background: var(--sm-white);
  font-size: 15px;
  line-height: 1.3;
  color: var(--sm-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fordon-konfig__pill.ar-vald {
  background: var(--sm-accent);
  border-color: var(--sm-accent);
  color: var(--sm-white);
  font-weight: 400;
}

.fordon-konfig__rad > summary::after {
  content: '';
  flex: none;
  margin-right: 2px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--sm-muted-semi);
  border-bottom: 1px solid var(--sm-muted-semi);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.fordon-konfig__rad[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.fordon-konfig__kropp {
  padding: 4px 0 26px;
}

.fordon-konfig__ingress {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--sm-muted);
  max-width: 62ch;
}

/* ---- Val: radioknappar och kryssrutor ---- */

.fordon-konfig__valj {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.fordon-konfig__alternativ {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  background: var(--sm-white);
  border: 1px solid var(--sm-line-strong);
  border-radius: var(--sm-radius);
  cursor: pointer;
  opacity: .75;
}

.fordon-konfig__alternativ:has(input:checked) {
  border-color: var(--sm-accent);
  opacity: 1;
  //box-shadow: inset 0 0 0 1px var(--sm-ink);
}

.fordon-konfig__alternativ input {
  margin: 2px 0 0;
  accent-color: var(--sm-ink);
  flex: none;
}

.fordon-konfig__alternativ strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.fordon-konfig__hjalp {
  display: block;
  font-size: 14px;
  color: var(--sm-muted);
  margin-top: 2px;
}

.fordon-konfig__kryss {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
}

.fordon-konfig__kryss input {
  margin: 3px 0 0;
  accent-color: var(--sm-ink);
  flex: none;
}

/* ---- Inbytesbil ---- */

.fordon-konfig__falt {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.fordon-konfig__falt-rad input,
.fordon-konfig__textarea,
.fordon-forfragan__form input,
.fordon-forfragan__form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 11px 14px;
  background: var(--sm-white);
  border: 1px solid var(--sm-box-line);
  border-radius: var(--sm-radius);
  color: var(--sm-ink);
}

.fordon-konfig__falt-rad {
  flex: 1 1 150px;
  max-width: 190px;
}

.fordon-konfig__textarea {
  max-width: 62ch;
  resize: vertical;
}

/*
 * Registreringsskylten. Den blå EU-remsan gör fältet omedelbart igenkännligt —
 * man ser vad som ska in utan att läsa etiketten.
 */
.fordon-regskylt {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  background: var(--sm-white);
  border: 1px solid var(--sm-box-line);
  border-radius: var(--sm-radius);
  overflow: hidden;
}

.fordon-regskylt__eu {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 26px;
  padding-bottom: 5px;
  background-image: url("sweregnr_new.png");
  background-position: center;
  background-size: cover;
  color: var(--sm-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.fordon-regskylt input {
  width: 150px;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 11px 14px;
  border: none;
  outline-offset: -2px;
  background: none;
  color: var(--sm-ink);
}

.fordon-konfig__spara[disabled] {
  opacity: 0.45;
  cursor: default;
}

.fordon-konfig__fel {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--sm-accent);
}

/* ---- Summering och CTA ---- */

.fordon-konfig__summa {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 48px;
  margin: 26px 0 22px;
}

.fordon-konfig__summa div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
 * display: flex ovan vinner över webbläsarens [hidden] { display: none }, så
 * månadsraden syntes kvar vid kontantköp trots att JS satt hidden. Samma fälla
 * gäller alla element som både får display i CSS och döljs med attributet.
 */
.fordon-konfig__summa div[hidden],
.fordon-konfig__notor div[hidden] {
  display: none;
}

.fordon-konfig__summa dt {
  margin: 0;
  font-size: 15px;
  color: var(--sm-muted);
}

.fordon-konfig__summa dd {
  margin: 0;
  font-family: var(--sm-font-body);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fordon-konfig__cta {
  display: block;
  width: 100%;
  max-width: 340px;
  font-size: 18px;
  padding: 15px 26px;
}

/* ---- Finstilt ---- */

.fordon-konfig__finstilt {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--sm-line-strong);
}

.fordon-konfig__notor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 40px;
  margin: 0 0 14px;
}

.fordon-konfig__notor div {
  display: flex;
  gap: 8px;
  font-size: 14px;
}

.fordon-konfig__notor dt {
  margin: 0;
  color: var(--sm-muted);
}

.fordon-konfig__notor dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fordon-konfig__villkor {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sm-muted);
  //max-width: 88ch;
}

.fordon-konfig__varning {
  background: var(--sm-white);
  border-radius: var(--sm-radius);
  padding: 25px 30px;
  display: flex;
  gap: 16px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sm-muted);
  //max-width: 88ch;
}

.fordon-konfig__varning svg {
  width: 56px;
  height: 56px;
  flex: none;
  color: var(--sm-accent);
}

.fordon-konfig__varning strong {
  display: block;
  color: var(--sm-ink);
}

/* ---- Leveransvalet: egen rullgardin ---- */

.fordon-valj {
  position: relative;
  max-width: 460px;
}

.fordon-valj__knapp {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  text-align: left;
  padding: 13px 44px 13px 16px;
  background: var(--sm-white);
  border: 1px solid var(--sm-box-line);
  border-radius: var(--sm-radius);
  color: var(--sm-ink);
  cursor: pointer;
}

.fordon-valj__knapp::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--sm-muted);
  border-bottom: 2px solid var(--sm-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.fordon-valj__knapp[aria-expanded='true']::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* Tiden ligger längst till höger, både i knappen och i listan. */
.fordon-valj__tid {
  margin-left: auto;
  color: var(--sm-muted);
  font-size: 15px;
  white-space: nowrap;
}

.fordon-valj__har {
  display: block;
  font-size: 13px;
  color: var(--sm-muted);
}

.fordon-valj__lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--sm-white);
  border: 1px solid var(--sm-box-line);
  border-radius: var(--sm-radius);
  box-shadow: 0 18px 40px rgba(5, 20, 31, 0.16);
}

.fordon-valj__lista[hidden] {
  display: none;
}

.fordon-valj__lista li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  border-radius: var(--sm-radius);
  font-size: 16px;
  cursor: pointer;
}

.fordon-valj__lista li:hover,
.fordon-valj__lista li:focus {
  background: var(--sm-surface);
  outline: none;
}

.fordon-valj__lista li[aria-selected='true'] {
  background: var(--sm-surface);
  font-weight: 500;
}

/* Reglagen står bredvid varandra på desktop — de jämförs mot varandra. */
@media (min-width: 900px) {
  .fordon-konfig .fordon-kalkyl__reglage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .fordon-konfig .fordon-kalkyl__rad {
    margin-bottom: 0;
  }
}

/* Kalkylatorn inuti rutan ska inte ha egen bakgrund — den ligger redan i en. */
.fordon-konfig .fordon-kalkyl {
  background: none;
  padding: 0;
}

.fordon-konfig .fordon-kalkyl h2,
.fordon-konfig .fordon-kalkyl__belopp,
.fordon-konfig .fordon-kalkyl__summering,
.fordon-konfig .fordon-kalkyl__villkor,
.fordon-konfig .fordon-kalkyl__varning {
  display: none;
}

@media (max-width: 1080px) {
  .fordon-konfig {
    padding: 48px 40px 40px;
  }
}

@media (max-width: 720px) {
  .fordon-konfig {
    padding: 30px 22px 26px;
  }

  .fordon-konfig__rubrik {
    font-size: 22px;
  }

  .fordon-konfig__cta {
    max-width: none;
  }
}

/* ============ Sammanställningen ============ */

.fordon-forfragan {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fordon-forfragan[hidden] {
  display: none;
}

.fordon-forfragan__bakgrund {
  position: absolute;
  inset: 0;
  background: rgba(5, 20, 31, 0.55);
}

.fordon-forfragan__ruta {
  position: relative;
  width: min(760px, 100%);
  max-height: min(92vh, 1000px);
  overflow-y: auto;
  background: var(--sm-white);
  border-radius: var(--sm-radius);
  padding: 48px 56px 44px;
  box-shadow: 0 30px 70px rgba(5, 20, 31, 0.3);
}

.fordon-forfragan__kryss {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
  background: none;
  border: none;
  color: var(--sm-muted);
  cursor: pointer;
}

.fordon-forfragan__ruta h2 {
  font-family: var(--sm-font-heading);
  font-size: 24px;
  margin: 0 0 2px;
}

.fordon-forfragan__fordon {
  margin: 0 0 20px;
  color: var(--sm-muted);
}

.fordon-forfragan__val {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--sm-surface);
  border-radius: var(--sm-radius);
}

.fordon-forfragan__val div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  font-size: 15px;
}

.fordon-forfragan__val div + div {
  border-top: 1px solid var(--sm-line);
}

.fordon-forfragan__val dt {
  margin: 0;
  color: var(--sm-muted);
  flex: none;
}

.fordon-forfragan__val dd {
  margin: 0;
  text-align: right;
  font-weight: 500;
}

.fordon-forfragan__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/*
 * När förfrågan är skickad sätter JavaScript hidden på formuläret och
 * vallistan. Attributet räcker inte av sig självt: display: grid ovan är en
 * författardeklaration och slår webbläsarens egen [hidden] { display: none }.
 * Utan de här två raderna låg formuläret kvar under tack-texten.
 */
.fordon-forfragan__form[hidden],
.fordon-forfragan__val[hidden] {
  display: none;
}

.fordon-forfragan__form label {
  display: block;
  font-size: 15px;
}

.fordon-forfragan__form label > span {
  display: block;
  margin-bottom: 4px;
  color: var(--sm-muted);
}

.fordon-forfragan__helbredd,
.fordon-forfragan__form .fordon-konfig__fel,
.fordon-forfragan__skicka,
.fordon-forfragan__integritet {
  grid-column: 1 / -1;
}

.fordon-forfragan__skicka {
  width: 100%;
  padding: 14px 26px;
  font-size: 17px;
}

.fordon-forfragan__integritet {
  margin: 0;
  font-size: 13px;
  color: var(--sm-muted);
}

.fordon-forfragan__klart h3 {
  font-family: var(--sm-font-heading);
  font-size: 20px;
  margin: 0 0 6px;
}

.fordon-forfragan__klart p {
  margin: 0;
  color: var(--sm-muted);
}

body.har-fordon-forfragan {
  overflow: hidden;
}

@media (max-width: 560px) {
  .fordon-forfragan__ruta {
    padding: 26px 20px 22px;
  }

  .fordon-forfragan__form {
    grid-template-columns: 1fr;
  }
}

/* Etikett som bara finns för skärmläsare. */
.fordon-konfig .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Fällbara sektioner ---- */

.fordon-fallbar {
  border-top: 1px solid var(--sm-line);
}

.fordon-fallbar:last-of-type {
  border-bottom: 1px solid var(--sm-line);
}

.fordon-fallbar > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.fordon-fallbar > summary::-webkit-details-marker {
  display: none;
}

.fordon-fallbar > summary h2 {
  margin: 0;
  font-size: 20px;
}

.fordon-fallbar > summary::after {
  content: '';
  margin-left: auto;
  margin-right: 2px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--sm-muted-semi);
  border-bottom: 1px solid var(--sm-muted-semi);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}

.fordon-fallbar[open] > summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.fordon-fallbar__kropp {
  padding: 0 0 32px;
}

.fordon-ravarde-info {
  color: var(--sm-muted);
  font-size: 14px;
  margin: 0 0 12px;
}

.fordon-specar--ra dt code {
  font-size: 13px;
  color: var(--sm-ink);
}

/*
 * Råfälten längst ner. En spalt: nycklarna är långa och listan läses
 * uppifrån och ner, inte som ett uppslag. Etiketten får ta den plats den
 * behöver, värdet resten.
 */
.fordon-specar.fordon-specar--ra {
  columns: 1;
}

.fordon-ravarden {
  margin-top: 48px;
}

.fordon-ravarden .fordon-specar__rad {
  font-size: 14px;
}

.fordon-moms-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
  color: var(--sm-muted);
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--sm-white);
  border-radius: var(--sm-radius);
}

.fordon-moms-note strong {
  color: var(--sm-ink);
  font-size: 17px;
}

/*
 * En spalt inne i en grupp. Två vore fel här: grupperna är korta, och en lista
 * på fyra rader delad i två spalter läses sämre än samma lista rak.
 */
/* Dubbel klass för att gå före .fordon-specar { columns: 2 }, som står längre
   ner i filen och annars vinner på källordning. */
.fordon-specar.fordon-specar--grupp {
  columns: 1;
  padding: 0 0 12px;
}

/* Sista raden i en grupp behöver ingen linje — gruppen har redan en. */
.fordon-specar--grupp .fordon-specar__rad:last-child {
  border-bottom: 0;
}

/*
 * Rader vi ännu inte har data för visar ett streck. Vill du hellre dölja dem
 * helt tills uppgiften finns räcker det med:
 *
 *   .fordon-specar__rad[data-saknas] { display: none; }
 */
.fordon-specar__streck {
  color: var(--sm-line-strong);
}

/*
 * Specifikationen är etikett/värde-par som flödar över två spalter på
 * desktop. Varje rad hålls ihop med break-inside: avoid så att en etikett
 * aldrig hamnar i en spalt och sitt värde i nästa.
 */
.fordon-specar {
  columns: 2;
  column-gap: 56px;
  margin: 0;
  padding: 0;
}

/* API-nycklarna är långa ord utan brytpunkter. Utan detta blir de en egen
   minsta bredd som spaltens 2fr inte kan hålla emot. */
.fordon-specar--ra dt,
.fordon-specar--ra dt code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fordon-specar__rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sm-line);
  break-inside: avoid;
  font-size: 16px;
}

.fordon-specar dt {
  color: var(--sm-muted);
  margin: 0;
  flex: 0 1 auto;
}

.fordon-specar dd {
  margin: 0;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  .fordon-specar {
    columns: 1;
  }
}

/*
 * Momsnoten i sidhuvudet. Samma ruta som tidigare låg i prisrutan, men mot
 * ljus bakgrund i stället för mot prisrutans yta — därför en egen ram.
 */
.fordon-moms-note--topp {
  align-items: flex-end;
  text-align: right;
  margin: 12px 0 0;
  background: var(--sm-surface);
}

@media (max-width: 760px) {
  .fordon-moms-note--topp {
    align-items: flex-start;
    text-align: left;
  }
}

/* Carfax står nu under nyckeltalen i stället för i den borttagna prisrutan. */
.fordon-carfax {
  margin: -18px 0 34px;
  font-size: 15px;
}

/* Serviceform ligger direkt under anläggningsrutan och behöver ingen extra
   luft ovanpå rutans egen marginal. */
.fordon-detalj__sida > .fordon-embed {
  margin-top: 0;
}

/* ---- Relaterade bilar ---- */

.fordon-relaterade {
  margin: 70px 0 0;
  //padding-top: 40px;
  //border-top: 1px solid var(--sm-line-strong);
}

.fordon-relaterade__rubrik {
  font-family: var(--sm-font-heading);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 24px;
}

/* Tre kort oavsett hur brett rutnätet annars skulle bli. */
.fordon-lista--relaterade {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .fordon-lista--relaterade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .fordon-lista--relaterade {
    grid-template-columns: 1fr;
  }
}

/* ---- Anläggningsrutan i högerspalten ---- */

.fordon-anlaggningsbox {
  background: var(--sm-surface);
  border-radius: var(--sm-radius);
  padding: 22px 24px 24px;
  margin: 0 0 var(--sm-gap);
}

.fordon-anlaggningsbox__topp {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.fordon-anlaggningsbox__foto,
.fordon-anlaggningsbox__platshallare {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: var(--sm-radius);
  object-fit: cover;
  display: block;
}

/* Platshållaren tills riktiga bilder på anläggningarna finns. */
.fordon-anlaggningsbox__platshallare {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sm-white);
  border: 1px solid var(--sm-line-strong);
  color: var(--sm-muted);
}

.fordon-anlaggningsbox__platshallare svg {
  width: 34px;
  height: 34px;
}

.fordon-anlaggningsbox__text {
  min-width: 0;
}

.fordon-anlaggningsbox__namn {
  font-family: var(--sm-font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--sm-ink);
  margin: 0 0 4px;
  line-height: 1.3;
}

.fordon-anlaggningsbox__adress {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sm-muted);
}

.fordon-anlaggningsbox__telefon {
  margin: 0 0 4px;
  font-size: 15px;
}

.fordon-anlaggningsbox__telefon a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fordon-anlaggningsbox__telefon svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--sm-muted);
}

.fordon-anlaggningsbox__karta {
  margin: 0;
  font-size: 15px;
}

.fordon-anlaggningsbox__karta a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fordon-anlaggningsbox__karta svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--sm-muted);
}

.fordon-anlaggningsbox__knapp {
  display: block;
  margin-top: 20px;
  text-align: center;
  text-decoration: none;
}

/*
 * Sidhuvudet på sajten ligger sticky. Utan marginal här hamnar formuläret
 * delvis bakom det när man klickar sig ner via knappen.
 */
.fordon-anlaggning,
.fordon-konfig {
  scroll-margin-top: 110px;
}

.fordon-pris-box {
  position: sticky;
  top: 24px;
  background: var(--sm-surface);
  border-radius: var(--sm-radius);
  padding: 26px;
}

.fordon-pris-box__pris {
  font-family: var(--sm-font-heading);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
}

.fordon-pris-box__tidigare {
  color: var(--sm-muted);
  margin: 0 0 2px;
  font-size: 15px;
}

.fordon-pris-box__plats {
  font-size: 16px;
  margin: 0 0 16px;
}

.fordon-carfax a {
  color: var(--sm-ink);
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .fordon-detalj__kolumner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fordon-pris-box {
    position: static;
  }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/*
 * Kia Godkänd-rutan i högerspalten. Tunn ram och ingen fylld yta — den ska
 * läsas som en märkning, inte som ännu en knapp att trycka på.
 */
.fordon-godkand {
  margin-top: 16px;
  padding: 26px 24px 24px;
  border: 1px solid var(--sm-line-strong);
  border-radius: var(--sm-radius);
}

.fordon-godkand__logotyp {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 14px;
}

.fordon-godkand__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sm-muted);
}

/* ---------------------------------------------------------------------------
   Inbäddad lista — [fordon_lista] på en vanlig sida

   Arkivets egen centrering och vertikala luft hör hemma på en helsida. Inuti
   en sidas innehållskolumn blir det dubbel centrering: sidans rubrik fyller
   kolumnen medan listan lägger på ännu ett max-width och hamnar indragen.
   Låt sidan bestämma bredd, marginal och avstånd — en inbäddad komponent ska
   följa sin behållare, inte överrösta den.

   Reglerna står sist i filen med flit. De har samma specificitet som
   basreglerna ovan, så det är källordningen som avgör.
   --------------------------------------------------------------------------- */

.fordon-arkiv--inbaddad {
  padding: 0;
}

.fordon-arkiv--inbaddad .fordon-arkiv__wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}