@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/**
 * Vico AB — sajtdesign
 * =====================================================================
 * All projektspecifik CSS ligger här (laddas sist via main.css @import).
 * Ändra aldrig variables.css-strukturen, components.css eller cms.css.
 *
 * VARFÖR TOKENS OCH TYPSNITT LIGGER HÄR, INTE I variables.css / fonts.php:
 * båda de filerna ägs av sajten i drift, inte av oss.
 *   · assets/css/variables.css är deploy-exkluderad (kundens färgval via
 *     /settings) — på servern fanns bara bootstrap.php:s tomma stub, så
 *     hela paletten föll bort och sidan renderades i mallens standardfärger.
 *   · includes/fonts.php skrivs om av setup-wizarden — serverns version
 *     saknade vikt 800, så alla extrabold-rubriker föll tillbaka på 700.
 * overrides.css deployas och mergas alltid, och laddas sist i kedjan.
 * Flytta inget härifrån tillbaka till de filerna.
 *
 * Principer
 *  · Plus Jakarta Sans genomgående. Rubriker 700/800, tight lh, negativ ls.
 *  · Primär #981a29, sekundär #FFE990, yta #FFFAF4, mörk sektion #1A1A1A.
 *  · Djup skapas med 1px-linjer och tonala ytor — INGEN box-shadow.
 *  · Rundade hörn, gott om luft, mobil först.
 * =====================================================================
 */

:root {
  /* ========== Vico AB — brand palette ========== */
  --color-primary: #981a29;
  --color-primary-dark: #7a1421;
  --color-primary-light: #b8323f;
  --color-primary-soft: #f3e2e3;

  --color-secondary: #FFE990;
  --color-secondary-dark: #f2d55f;
  --color-secondary-soft: #fff6d4;

  --color-accent: #FFE990;

  /* Ytor */
  --color-surface: #FFFCF8;      /* grundbakgrund */
  --color-surface-2: #FFFFFF;    /* kort/paneler */
  --color-surface-3: #FAF4EC;    /* svag avdelare */

  /* Mörk sektion */
  --color-dark: #1A1A1A;
  --color-dark-2: #232120;
  --color-on-dark: #F7F2EB;
  --color-on-dark-muted: rgba(247, 242, 235, 0.66);
  --color-on-dark-line: rgba(247, 242, 235, 0.14);

  /* Text (aldrig ren svart på ren vit) */
  --color-ink: #211C1A;
  --color-ink-muted: #6B605A;
  --color-line: rgba(33, 28, 26, 0.12);
  --color-line-strong: rgba(33, 28, 26, 0.20);

  /* Sid-bakgrund + typsnitt (skriver över variables.css/typography.css) */
  --color-background: #FFFCF8;
  --color-foreground: #211C1A;
  --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout-rytm */
  --container-max-width: 1240px;
  --section-padding: clamp(4.5rem, 8vw, 7.5rem);
}

/* =====================================================================
   1. Bas
   ===================================================================== */

:root {
    --vc-header-h: 92px;
    --vc-gutter: 1.5rem;
    --vc-radius-card: 24px;
    --vc-radius-media: 18px;
    --vc-radius-sm: 12px;
    --vc-pill: 999px;
    --vc-section: clamp(4.5rem, 8vw, 7.5rem);
    --vc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--vc-header-h) + 1rem);
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 1.0625rem;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Förhandsgranskningsspärr: länkar som ännu inte leder någonstans ska inte
   se klickbara ut. Tas bort tillsammans med JS-blocket i footer.php. */
.vc-inert { cursor: default; }

/* [hidden] måste vinna över komponenternas display-värden — annars visas t.ex.
   .vc-btn (display: inline-flex) trots hidden-attributet. */
[hidden] { display: none !important; }

::selection { background: var(--color-secondary); color: var(--color-ink); }

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

.vc-skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
    z-index: 10001;
    background: var(--color-primary);
    color: #fff;
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--vc-radius-sm) 0;
}
.vc-skip:focus {
    position: fixed; left: 0; top: 0;
    width: auto; height: auto; overflow: visible;
    color: #fff;
}

/* Layout-primitiv ---------------------------------------------------- */

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

.vc-section { padding-block: var(--vc-section); }
.vc-section--tight { padding-block: clamp(3.25rem, 6vw, 5rem); }

/* Halv luft mot grannsektionen. Används där två sektioner ligger på samma yta
   och full padding i båda ändarna läser som en tom sektion emellan. */
.vc-section--halv-under { padding-bottom: calc(var(--vc-section) / 2); }
.vc-section--halv-over  { padding-top: calc(var(--vc-section) / 2); }

.vc-section--light { background: var(--color-surface); color: var(--color-ink); }
.vc-section--paper { background: var(--color-surface-3); color: var(--color-ink); }

.vc-section--dark {
    background: var(--color-dark);
    color: var(--color-on-dark);
}
.vc-section--dark .vc-lead,
.vc-section--dark .vc-text { color: var(--color-on-dark-muted); }

/* Typografi ---------------------------------------------------------- */

.vc-h1, .vc-h2, .vc-h3, .vc-h4 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: inherit;
    text-wrap: balance;
    margin: 0;
}

.vc-h1 {
    font-size: clamp(2.5rem, 6.2vw, 4.25rem);
    font-weight: 800;
    /* 1.03 klämde ihop raderna så prickarna på å/ä nästan nuddade raden under */
    line-height: 1.14;
    letter-spacing: -0.038em;
}

.vc-h2 {
    font-size: clamp(1.95rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.032em;
}

.vc-h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.vc-h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.vc-lead {
    font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--color-ink-muted);
    font-weight: 400;
    margin: 0;
    max-width: 62ch;
}

.vc-text {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--color-ink-muted);
    margin: 0;
}

/* Sektionsrubrik-block */
.vc-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.vc-head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}
.vc-head--center .vc-lead { text-align: center; }

/* Bredare rubrikblock - för rubriker som ska rymmas på en rad på desktop.
   Bryter fortfarande normalt på smalare skärmar. */
.vc-head--bred { max-width: 56rem; }

.vc-head--split {
    max-width: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}
.vc-head--split > div { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; }

@media (max-width: 860px) {
    .vc-head--split { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   2. Knappar
   ===================================================================== */

/* Knappens hovring: en cirkel växer från den punkt pekaren kom in vid och
   täcker knappen (origin-fill). JS sätter --vc-fx/--vc-fy/--vc-fr per knapp;
   utan JS faller den tillbaka på mitten + en radie som täcker de flesta
   knappar, så effekten fungerar ändå.

   ::before ligger på z-index:-1 inuti knappens egen stacking-kontext
   (isolation:isolate) — då målas den ovanpå knappens bakgrund men UNDER text
   och pilikon, utan att markupen behöver ett extra <span>. Det är viktigt här:
   CMS:ets auto-editable byter text direkt i knappens textnod. */

.vc-btn {
    --vc-fx: 50%;
    --vc-fy: 50%;
    --vc-fr: 22rem;
    --vc-fill: var(--color-ink);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: auto;
    min-height: 3.125rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--vc-pill);
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 220ms var(--vc-ease);
}

.vc-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: var(--vc-fx);
    top: var(--vc-fy);
    width: var(--vc-fr);
    height: var(--vc-fr);
    border-radius: 50%;
    background: var(--vc-fill);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.vc-btn:hover::before,
.vc-btn:focus-visible::before,
.vc-btn[data-pressed="true"]::before {
    transform: translate(-50%, -50%) scale(1);
}

.vc-btn:hover { text-decoration: none; }
.vc-btn:active { transform: scale(0.985); }

.vc-arrow { flex: none; transition: transform 260ms var(--vc-ease); }
.vc-btn:hover .vc-arrow,
.vc-btn:focus-visible .vc-arrow,
.vc-btn[data-pressed="true"] .vc-arrow { transform: translateX(3px); }

/* Varianterna byter bara textfärg + kantlinje på hover — själva ytan
   målas av fyllnadscirkeln ovan. */

.vc-btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    --vc-fill: var(--color-secondary);
}
.vc-btn--primary:hover,
.vc-btn--primary:focus-visible,
.vc-btn--primary[data-pressed="true"] {
    border-color: var(--color-secondary);
    color: var(--color-ink);
}

.vc-btn--secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-ink);
    --vc-fill: var(--color-primary);
}
.vc-btn--secondary:hover,
.vc-btn--secondary:focus-visible,
.vc-btn--secondary[data-pressed="true"] {
    border-color: var(--color-primary);
    color: #fff;
}

/* Sekundär över mörk yta / hjältebild */
.vc-btn--outline-light {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
    --vc-fill: var(--color-secondary);
}
.vc-btn--outline-light:hover,
.vc-btn--outline-light:focus-visible,
.vc-btn--outline-light[data-pressed="true"] {
    border-color: var(--color-secondary);
    color: var(--color-ink);
}

.vc-btn--outline {
    background: transparent;
    border-color: var(--color-line-strong);
    color: var(--color-ink);
    --vc-fill: var(--color-ink);
}
.vc-btn--outline:hover,
.vc-btn--outline:focus-visible,
.vc-btn--outline[data-pressed="true"] {
    border-color: var(--color-ink);
    color: var(--color-surface);
}

.vc-btn--light {
    background: var(--color-surface);
    border-color: var(--color-surface);
    color: var(--color-ink);
    --vc-fill: var(--color-ink);
}
.vc-btn--light:hover,
.vc-btn--light:focus-visible,
.vc-btn--light[data-pressed="true"] {
    border-color: var(--color-ink);
    color: var(--color-surface);
}

.vc-btn--sm { min-height: 2.625rem; padding: 0.5rem 1.125rem; font-size: 0.875rem; }
.vc-btn--block { width: 100%; }

/* =====================================================================
   3. Header
   ===================================================================== */

/* OBS: ingen backdrop-filter här. Ett filter gör headern till containing block
   för position:fixed-barn — mobilmenyn (#vc-nav) skulle då krympa till headerns
   egen box i stället för att täcka skärmen. Solid yta i stället. */
/* Skiljelinjen ritas som box-shadow, inte border-bottom. En border lägger
   1px till headerns layouthöjd — då räcker inte hjältens
   margin-top: -(--vc-header-h) hela vägen upp, och en 1px ljus remsa av
   body-bakgrunden syns överst på sidan genom den transparenta headern. */
.vc-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--color-surface);
    box-shadow: 0 1px 0 0 var(--color-line);
    transition: background-color 300ms var(--vc-ease), box-shadow 300ms var(--vc-ease);
}

.vc-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--vc-header-h);
}

.vc-header__logo {
    position: relative;
    z-index: 96; /* ovanför mobilmenyns overlay */
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}
.vc-header__logo-img { height: 44px; width: auto; }
.vc-header__logo-img--light { display: none; }

/* Meny i mitten */
/* Nav-objekten sträcks till headerns fulla höjd. Annars är <li> bara så högt
   som länken (~40px) och centrerat i den 92px höga headern — musen tappar
   :hover på vägen ned mot megamenyn och panelen stängs. */
.vc-nav {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    justify-content: center;
}
.vc-nav__list {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-nav__item {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
}

.vc-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--vc-pill);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-nav__link:hover { background: var(--color-surface-3); color: var(--color-primary); }
.vc-nav__caret { opacity: 0.5; transition: transform 220ms var(--vc-ease); }
.vc-nav__item--has-sub:hover .vc-nav__caret,
.vc-nav__item--has-sub.is-hover .vc-nav__caret { transform: rotate(180deg); }

/* Megameny — bred panel som ligger flush under headern och därför ankras mot
   .vc-header (sticky = positionerad), inte mot <li>. Ingen glipa att tappa
   hovringen i, alltså behövs ingen osynlig "brygga". */
.vc-nav__item--has-sub { position: static; }

.vc-nav__sub {
    --vc-sub-gap: 12px;

    position: absolute;
    top: calc(100% + var(--vc-sub-gap));
    left: 50%;
    z-index: 5;
    width: min(1020px, calc(100vw - 3rem));
    transform: translateX(-50%) translateY(-10px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: 1.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--vc-radius-card);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms var(--vc-ease), transform 240ms var(--vc-ease), visibility 240ms;
}

/* Osynlig brygga över mellanrummet (+ headerns 1px-kant) så hovringen
   inte bryts mellan menylänken och panelen. Inert när panelen är stängd
   eftersom hela panelen då har pointer-events: none. */
.vc-nav__sub::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--vc-sub-gap) - 2px);
    height: calc(var(--vc-sub-gap) + 2px);
}
.vc-nav__sub--split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* .is-hover sätts av skriptet och håller panelen kvar en stund efter att
   pekaren lämnat - se kommentaren i includes/header.php. */
.vc-nav__item--has-sub:hover .vc-nav__sub,
.vc-nav__item--has-sub:focus-within .vc-nav__sub,
.vc-nav__item--has-sub.is-hover .vc-nav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Stängd med Escape. Måste stå efter regeln ovan: samma specificitet, så
   ordningen är det enda som avgör. */
.vc-nav__item--has-sub.is-stangd .vc-nav__sub {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vc-nav__mega-group--aside {
    padding-left: clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid var(--color-line);
}

.vc-nav__mega-heading {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0 0 1rem 0.75rem;
}

.vc-nav__mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.5rem;
}
.vc-nav__mega-grid--single { grid-template-columns: minmax(0, 1fr); }

.vc-nav__mega-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-ink);
    transition: background-color 180ms var(--vc-ease);
}
.vc-nav__mega-item:hover { background: var(--color-surface-3); }

.vc-nav__mega-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transition: background-color 180ms var(--vc-ease), color 180ms var(--vc-ease);
}
.vc-nav__mega-item:hover .vc-nav__mega-icon {
    background: var(--color-primary);
    color: #fff;
}

.vc-nav__mega-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.vc-nav__mega-title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.vc-nav__mega-desc {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-ink-muted);
}


/* --- Kolumnpanelen: en spalt per produktfamilj -------------------------
   Med 15 modeller under tre familjer räcker inte ikonkort-rutnätet till.
   Här ligger hela sortimentet framme: familjen som rubrik, modellerna som
   länkar under. Ingen hovergymnastik, inget extra skript. */

.vc-nav__sub--kolumner {
    width: min(1180px, calc(100vw - 3rem));
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    grid-template-areas:
        "kolumner utvalt"
        "rad      rad"
        "fot      fot";
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    padding: 1.75rem 1.75rem 1.25rem;
}
.vc-nav__sub--utan-utvalt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kolumner" "rad" "fot";
}

/* Panelfoten: vägen till hela sortimentet, under familjerna och länkraden.
   Låg vikt med flit - den ska finnas för den som letar efter den, inte
   konkurrera med spalterna som är panelens egentliga innehåll. */
.vc-nav__panelfot {
    grid-area: fot;
    display: inline-flex;
    align-self: start;
    /* Utan justify-self sträcker sig griditemet över hela panelbredden, och
       då blir en tom rad på 1100px klickbar i stället för bara etiketten. */
    justify-self: start;
    align-items: center;
    gap: 0.45rem;
    margin-top: -0.75rem;
    padding: 0.5rem 0;
    font-size: 0.8438rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.vc-nav__panelfot-text { border-bottom: 1px solid transparent; transition: border-color 160ms var(--vc-ease); }
.vc-nav__panelfot:hover .vc-nav__panelfot-text { border-bottom-color: currentColor; }
.vc-nav__panelfot svg { transition: transform 160ms var(--vc-ease); }
.vc-nav__panelfot:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .vc-nav__panelfot:hover svg { transform: none; }
}

/* align-items: start - annars sträcks spalterna till det utvalda kortets
   höjd och "Alla ..."-länken trycks ned med en tom lucka ovanför sig. */
.vc-nav__kolumner {
    grid-area: kolumner;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1rem, 2vw, 2rem);
}

.vc-nav__kol { display: flex; flex-direction: column; min-width: 0; }

.vc-nav__kol-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-line);
    text-decoration: none;
    color: var(--color-ink);
}
.vc-nav__kol-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transition: background-color 180ms var(--vc-ease), color 180ms var(--vc-ease);
}
.vc-nav__kol-icon svg { width: 16px; height: 16px; }
.vc-nav__kol-head:hover .vc-nav__kol-icon { background: var(--color-primary); color: #fff; }

.vc-nav__kol-titel {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}
.vc-nav__kol-head:hover .vc-nav__kol-titel { color: var(--color-primary); }
.vc-nav__kol-caret { display: none; }

.vc-nav__kol-lista {
    display: grid;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-nav__kol-lista li { margin: 0; }
.vc-nav__kol-lista a {
    display: block;
    padding: 0.4rem 0.5rem;
    margin-inline: -0.5rem;
    border-radius: 8px;
    font-size: 0.9063rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: background-color 160ms var(--vc-ease), color 160ms var(--vc-ease);
}
.vc-nav__kol-lista a:hover { background: var(--color-surface-3); color: var(--color-ink); }

.vc-nav__kol-alla {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;
    padding-top: 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.vc-nav__kol-alla svg { transition: transform 220ms var(--vc-ease); }
.vc-nav__kol-alla:hover svg { transform: translateX(3px); }

/* Utvalt kort: vägen för den som inte vet vilken tvätt som behövs. */
.vc-nav__utvalt {
    grid-area: utvalt;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-surface-3);
    text-decoration: none;
    color: var(--color-ink);
    transition: background-color 200ms var(--vc-ease);
}
.vc-nav__utvalt:hover { background: var(--color-secondary-soft); }

.vc-nav__utvalt-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.vc-nav__utvalt-media img { width: 100%; height: 100%; object-fit: cover; }

.vc-nav__utvalt-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem 1.1rem;
}
.vc-nav__utvalt-eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.vc-nav__utvalt-titel {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.vc-nav__utvalt-text {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}
.vc-nav__utvalt-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
}
.vc-nav__utvalt-cta svg { transition: transform 220ms var(--vc-ease); }
.vc-nav__utvalt:hover .vc-nav__utvalt-cta svg { transform: translateX(3px); }

/* Länkrad: sidor utan egna modeller (tjänster och förbrukning).
   På desktop en rad med etikett + pills, i mobilvyn öppna menyrader med ikon. */
.vc-nav__rad {
    grid-area: rad;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--color-line);
}
.vc-nav__rad-rubrik {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.vc-nav__rad-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-nav__rad-lista li { margin: 0; }

/* Synlig pill-yta i stället för naken text - annars blir raden en lös
   textremsa under de tydligt strukturerade spalterna. */
.vc-nav__rad-lank {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--vc-pill);
    background: var(--color-surface-3);
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color 160ms var(--vc-ease), color 160ms var(--vc-ease);
}
.vc-nav__rad-lank:hover { background: var(--color-primary); color: #fff; }
.vc-nav__rad-ikon { display: none; }

/* Panelen är bred - på mellanstora skärmar krymper spalterna först. */
@media (max-width: 1240px) {
    .vc-nav__sub--kolumner { grid-template-columns: minmax(0, 1fr) 13rem; }
}

.vc-nav__mobile-foot { display: none; }

/* Höger-actions */
.vc-header__actions {
    position: relative;
    z-index: 96; /* hamburgaren måste ligga ovanför mobilmenyns overlay */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}
.vc-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color 200ms var(--vc-ease), border-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-header__icon:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface); }
.vc-header__cta { min-height: 2.75rem; padding: 0.55rem 1.25rem; font-size: 0.9063rem; }

/* Språkväljare (SV | EN)
   Samma formspråk som sök-ikonen: en pill med linjeram som byter till ljus
   kontur när headern ligger transparent över hjältebilden. Det aktiva språket
   fylls med ink-färgen i stället för att bara markeras med vikt - vid två så
   korta etiketter är fetstil ensamt för svagt för att läsas som ett läge. */
.vc-lang {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    line-height: 1;
}
.vc-lang__val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.125rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: background-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-lang__val:hover { color: var(--color-ink); }
.vc-lang__val.is-aktiv {
    background: var(--color-ink);
    color: var(--color-surface);
}
.vc-lang__val.is-aktiv:hover { color: var(--color-surface); }

.vc-header--transparent .vc-lang { border-color: rgba(255, 255, 255, 0.34); }
.vc-header--transparent .vc-lang__val { color: rgba(255, 255, 255, 0.72); }
.vc-header--transparent .vc-lang__val:hover { color: #fff; }
.vc-header--transparent .vc-lang__val.is-aktiv { background: #fff; color: var(--color-ink); }

.vc-header--transparent.vc-header--menu-open .vc-lang { border-color: var(--color-line); }
.vc-header--transparent.vc-header--menu-open .vc-lang__val { color: var(--color-ink-muted); }
.vc-header--transparent.vc-header--menu-open .vc-lang__val.is-aktiv { background: var(--color-ink); color: var(--color-surface); }

/* I mobilmenyns fot ligger väljaren på egen rad och ska inte sträckas ut av
   förälderns column-flex. */
.vc-lang--mobil { align-self: flex-start; margin-bottom: 0.25rem; }

.vc-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 10px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.vc-header__burger-bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--color-ink);
    transition: transform 260ms var(--vc-ease), opacity 200ms var(--vc-ease);
}
.vc-header__burger[aria-expanded="true"] .vc-header__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vc-header__burger[aria-expanded="true"] .vc-header__burger-bar:nth-child(2) { opacity: 0; }
.vc-header__burger[aria-expanded="true"] .vc-header__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Transparent läge över hjältebilden (sätts av JS, no-JS = solid) */
/* Transparent läge över hjältebilden.
   Klassen sätts av PHP redan i markupen på hjältesidor, så första målningen är
   rätt och headern aldrig hinner blinka vit. JS sköter växlingen vid scroll,
   och <noscript>-blocket i includes/header.php återställer det solida läget
   för den som kör utan skript.

   RÖR INTE klassnamnet. overrides.css importeras med en fast ?v=-stämpel från
   main.css (en CORE-fil) och cachas ett dygn - byter man namn här slutar den
   cachade CSS:en matcha markupen, och headern blir liggande i sitt solida
   grundläge tills cachen går ut. */
.vc-header--transparent {
    background: transparent;
    box-shadow: 0 1px 0 0 transparent;
}

/* Megamenyn är öppen → headern tillbaka till solid läge (sätts av JS) */
.vc-header--transparent.vc-header--menu-open {
    background: var(--color-surface);
    box-shadow: 0 1px 0 0 transparent;
}
.vc-header--transparent.vc-header--menu-open .vc-header__logo-img--dark { display: block; }
.vc-header--transparent.vc-header--menu-open .vc-header__logo-img--light { display: none; }
.vc-header--transparent.vc-header--menu-open .vc-nav__link { color: var(--color-ink); }
.vc-header--transparent.vc-header--menu-open .vc-nav__link:hover { background: var(--color-surface-3); color: var(--color-primary); }
.vc-header--transparent.vc-header--menu-open .vc-header__icon { color: var(--color-ink); border-color: var(--color-line); }
.vc-header--transparent.vc-header--menu-open .vc-header__burger { border-color: var(--color-line); }
.vc-header--transparent.vc-header--menu-open .vc-header__burger-bar { background: var(--color-ink); }
.vc-header--transparent .vc-header__logo-img--dark { display: none; }
.vc-header--transparent .vc-header__logo-img--light { display: block; }
.vc-header--transparent .vc-nav__link { color: #fff; }
.vc-header--transparent .vc-nav__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.vc-header--transparent .vc-header__icon { color: #fff; border-color: rgba(255, 255, 255, 0.34); }
.vc-header--transparent .vc-header__icon:hover { background: #fff; border-color: #fff; color: var(--color-ink); }
.vc-header--transparent .vc-header__burger { border-color: rgba(255, 255, 255, 0.34); }
.vc-header--transparent .vc-header__burger-bar { background: #fff; }

@media (max-width: 1180px) {
    .vc-nav__link { padding: 0.5rem 0.6rem; font-size: 0.875rem; }
    .vc-header__inner { gap: 1rem; }
}

@media (max-width: 1024px) {
    :root { --vc-header-h: 76px; }

    .vc-header__burger { display: flex; }
    .vc-header__cta,
    .vc-lang--header,
    .vc-header__icon { display: none; }

    /* Menyn blir position:fixed här och lämnar flex-flödet — utan detta
       hamnar hamburgaren direkt efter logotypen i stället för i högerkanten. */
    .vc-header__actions { margin-left: auto; }

    .vc-nav {
        position: fixed;
        inset: 0;
        z-index: 95;
        display: block;
        overflow-y: auto;
        background: var(--color-surface);
        padding: calc(var(--vc-header-h) + 2.5rem) var(--vc-gutter) 3rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 280ms var(--vc-ease), transform 280ms var(--vc-ease), visibility 280ms;
    }
    .vc-nav.is-open { opacity: 1; visibility: visible; transform: none; }

    .vc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .vc-nav__item { display: block; border-bottom: 1px solid var(--color-line); }
    .vc-nav__link {
        justify-content: space-between;
        padding: 1.125rem 0.25rem;
        border-radius: 0;
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: -0.025em;
    }
    .vc-nav__link:hover { background: transparent; }
    .vc-nav__caret { width: 14px; height: 14px; opacity: 0.7; }

    /* Megamenyn fälls ut som en vanlig lista i mobilvyn */
    .vc-nav__sub,
    .vc-nav__sub--split {
        position: static;
        width: auto;
        transform: none;
        border: 0;
        background: transparent;
        border-radius: 0;
        padding: 0 0 1rem;
        display: none;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .vc-nav__item--has-sub.is-open .vc-nav__sub { display: grid; }
    .vc-nav__sub::before { content: none; }
    .vc-nav__item--has-sub:hover .vc-nav__sub,
    .vc-nav__item--has-sub:focus-within .vc-nav__sub { transform: none; }
    .vc-nav__item--has-sub.is-open .vc-nav__caret { transform: rotate(180deg); }

    /* Kolumnpanelen i mobilvyn: spalterna staplas och varje familj blir en
       egen fäll-ut. Utan det syns 20+ modeller så fort Produkter öppnas. */
    .vc-nav__sub--kolumner,
    .vc-nav__sub--utan-utvalt {
        width: auto;
        grid-template-columns: minmax(0, 1fr);
        /* Kortet sist i mobilvyn: menyvalen först, erbjudandet efter dem.
           Foten hamnar direkt efter familjerna: här öppnar första tappet på
           Produkter panelen i stället för att navigera, så det här är enda
           synliga vägen till hela sortimentet. */
        grid-template-areas: "kolumner" "fot" "rad" "utvalt";
        padding: 0 0 1rem;
        gap: 1rem;
    }

    /* Samma form som familjeraderna ovanför - en egen menyrad, inte en
       textlänk som hänger löst mellan blocken. */
    .vc-nav__panelfot {
        display: flex;
        margin-top: 0;
        padding: 0.9rem 0.25rem;
        font-size: 0.9375rem;
        border-top: 1px solid var(--color-line);
    }
    .vc-nav__panelfot svg { margin-left: auto; }
    .vc-nav__kolumner { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .vc-nav__kol--fallbar { border-bottom: 1px solid var(--color-line); }
    .vc-nav__kol--fallbar:last-child { border-bottom: 0; }

    .vc-nav__kol-head {
        margin-bottom: 0;
        padding: 0.9rem 0.25rem;
        border-bottom: 0;
    }
    .vc-nav__kol-titel { font-size: 0.9375rem; letter-spacing: 0.06em; }
    .vc-nav__kol-caret {
        display: block;
        margin-left: auto;
        opacity: 0.6;
        transition: transform 220ms var(--vc-ease);
    }
    .vc-nav__kol--fallbar.is-open .vc-nav__kol-caret { transform: rotate(180deg); }

    .vc-nav__kol--fallbar .vc-nav__kol-lista,
    .vc-nav__kol--fallbar .vc-nav__kol-alla { display: none; }
    .vc-nav__kol--fallbar.is-open .vc-nav__kol-lista { display: grid; }
    .vc-nav__kol--fallbar.is-open .vc-nav__kol-alla { display: inline-flex; }

    .vc-nav__kol-lista { padding: 0 0 0.75rem 2.4rem; }
    .vc-nav__kol-lista a { font-size: 1rem; padding: 0.5rem; }
    .vc-nav__kol-alla { padding: 0 0 1rem 2.4rem; margin-top: 0; }

    /* Kortet ligger vågrätt här - stående blir det en bild i skärmbredd. */
    .vc-nav__utvalt { flex-direction: row; align-items: center; gap: 0.875rem; padding: 0.5rem; }
    .vc-nav__utvalt-media { flex: none; width: 5.5rem; aspect-ratio: 1; border-radius: 12px; }
    .vc-nav__utvalt-body { padding: 0.25rem 0.25rem 0.25rem 0; }
    .vc-nav__utvalt-text { display: none; }

    /* Raden fälls inte ut - varje länk ligger öppen som en egen menyrad,
       i samma form som produktfamiljerna men utan caret: de navigerar
       direkt i stället för att öppna något. */
    .vc-nav__rad {
        display: block;
        padding-top: 0;
        border-top: 1px solid var(--color-line);
    }
    .vc-nav__rad-rubrik { padding: 1rem 0.25rem 0.35rem; }
    .vc-nav__rad-lista { display: grid; gap: 0; }

    .vc-nav__rad-lank {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.75rem 0.25rem;
        border-radius: 0;
        background: transparent;
        font-size: 0.9375rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-ink);
    }
    .vc-nav__rad-lank:hover { background: transparent; color: var(--color-primary); }
    .vc-nav__rad-ikon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 30px; height: 30px;
        border-radius: 9px;
        background: var(--color-primary-soft);
        color: var(--color-primary);
    }
    .vc-nav__rad-ikon svg { width: 16px; height: 16px; }

    .vc-nav__mega-group--aside {
        padding-left: 0;
        padding-top: 1.25rem;
        border-left: 0;
        border-top: 1px solid var(--color-line);
    }
    .vc-nav__mega-heading { margin-left: 0.5rem; }
    /* Föräldralänken säger redan "Produkter" — dubblera inte rubriken */
    .vc-nav__mega-group:first-child .vc-nav__mega-heading { display: none; }
    .vc-nav__mega-grid,
    .vc-nav__mega-grid--single { grid-template-columns: minmax(0, 1fr); }
    .vc-nav__mega-item { padding: 0.6rem 0.5rem; }
    .vc-nav__mega-icon { width: 32px; height: 32px; border-radius: 10px; }
    .vc-nav__mega-title { font-size: 1rem; }

    .vc-nav__mobile-foot {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 2rem;
    }
    .vc-nav__mobile-contact {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-ink-muted);
        text-decoration: none;
    }
    .vc-nav__mobile-contact:hover { color: var(--color-primary); }
    .vc-nav__mobile-foot .vc-btn { margin-top: 0.75rem; }

    /* Menyn är öppen → headern måste vara läsbar mot den ljusa panelen */
    .vc-header:has(.vc-nav.is-open) {
        background: var(--color-surface);
        border-bottom-color: transparent;
    }
    .vc-header:has(.vc-nav.is-open) .vc-header__logo-img--dark { display: block; }
    .vc-header:has(.vc-nav.is-open) .vc-header__logo-img--light { display: none; }
    .vc-header:has(.vc-nav.is-open) .vc-header__burger { border-color: var(--color-line); }
    .vc-header:has(.vc-nav.is-open) .vc-header__burger-bar { background: var(--color-ink); }
    .vc-header:has(.vc-nav.is-open) .vc-nav__link { color: var(--color-ink); }
}

/* =====================================================================
   4. Hjältesektion
   ===================================================================== */

.vc-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(660px, 90vh, 1000px);
    margin-top: calc(-1 * var(--vc-header-h));
    padding-top: calc(var(--vc-header-h) + clamp(5rem, 10vw, 9rem));
    padding-bottom: clamp(5rem, 9vw, 8rem);
    background: var(--color-dark);
    color: #fff;
    overflow: hidden;
}
.vc-hero > .vc-wrap { width: 100%; }

.vc-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.vc-hero__bg img,
.vc-hero__bg picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.vc-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(16, 14, 13, 0.82) 0%, rgba(16, 14, 13, 0.62) 42%, rgba(16, 14, 13, 0.88) 100%),
        linear-gradient(100deg, rgba(26, 26, 26, 0.90) 0%, rgba(26, 26, 26, 0.42) 62%, rgba(26, 26, 26, 0.20) 100%);
}

.vc-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.75rem, 3vw, 2.5rem);
    max-width: 46rem;
}

.vc-hero .vc-h1 { color: #fff; }

.vc-hero__lead {
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.82);
    max-width: 44rem;
    margin: 0;
}

.vc-usp {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-usp li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.9688rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}
.vc-usp li::before {
    content: '';
    flex: none;
    width: 20px; height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* En punkt per rad. Med längre punkter bryter raden 2 + 1 i en hjältes
   textkolumn, vilket läser som ett misstag. */
.vc-usp--kol {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}

/* Samma punktlista på ljus yta (produktsidans hjälte): mörk text och röd
   bock i stället för hjältebildens vita text och gula bock. */
/* En punkt per rad. I hjältens smala textkolumn bröt raden efter två av tre
   punkter, vilket läste som ett misstag - staplat blir det en tydlig lista. */
.vc-usp--ink {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}
.vc-usp--ink li { color: var(--color-ink); }
.vc-usp--ink li::before {
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.vc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* =====================================================================
   5. Kort-grid — produkter
   ===================================================================== */

.vc-grid {
    display: grid;
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.vc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vc-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 980px) {
    .vc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .vc-grid--3,
    .vc-grid--2 { grid-template-columns: 1fr; }
}

/* --- Horisontell karusell -------------------------------------------------
   Native scroll-snap i stället för ett slider-bibliotek: sidan är ren PHP
   utan byggsteg, och CSP:n tillåter inga externa skript. Piltangenter,
   swipe och musdrag fungerar ändå eftersom det är en riktig scroll-container.

   Spåret bryter ut till full bredd så korten kan "titta fram" i kanterna,
   men första kortet linjerar med innehållets vänsterkant. */

.vc-slider {
    --vc-slider-edge: max(var(--vc-gutter), calc((100vw - 1240px) / 2 + var(--vc-gutter)));
    --vc-slider-gap: clamp(1rem, 1.6vw, 1.5rem);

    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.vc-slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--vc-slider-edge);
    padding-block: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}
.vc-slider__viewport::-webkit-scrollbar { display: none; }
.vc-slider__viewport:focus-visible { outline-offset: -3px; }

.vc-slider__track {
    display: flex;
    gap: var(--vc-slider-gap);
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--vc-slider-edge);
}

/* Slutmarginalen måste vara ett flex-objekt, inte padding: varken
   padding-inline-end på scroll-containern eller på spåret räknas in i
   scrollWidth i Chrome — sista kortet skulle då hamna kant i kant med
   skärmkanten vid full scroll i stället för i linje med innehållet. */
.vc-slider__track::after {
    content: '';
    flex: 0 0 calc(var(--vc-slider-edge) - var(--vc-slider-gap));
}

.vc-slider__slide {
    flex: 0 0 clamp(272px, 30vw, 372px);
    scroll-snap-align: start;
}
/* Sista kortet snappar mot slutet — annars ligger den sista snap-punkten
   före maxScroll och "är vi längst till höger?" blir aldrig sant, så pilen
   skulle aldrig gå runt till början. */
.vc-slider__slide:last-child { scroll-snap-align: end; }

.vc-slider__nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: clamp(2rem, 3vw, 2.75rem);
    position: relative;
    z-index: 3;
}

.vc-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--vc-pill);
    border: 1.5px solid var(--color-line-strong);
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color 240ms var(--vc-ease), border-color 240ms var(--vc-ease), color 240ms var(--vc-ease);
}
.vc-slider__arrow:hover:not([disabled]) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.vc-slider__arrow svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 620px) {
    .vc-slider__slide { flex-basis: min(80vw, 320px); }
}

/* --- Avslöjande av sektionsrubriker vid scroll ---------------------------
   Utgångsläget sätts av JS (data-vc-reveal-armed) så innehållet aldrig blir
   osynligt om skriptet inte kör. */
[data-vc-reveal][data-vc-reveal-armed] {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-vc-reveal][data-vc-reveal-armed].is-revealed {
    opacity: 1;
    transform: none;
}

.vc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-3);
    border-radius: var(--vc-radius-card);
    padding: 0.625rem 0.625rem 0;
    overflow: hidden;
}

.vc-card__media {
    position: relative;
    border-radius: var(--vc-radius-media);
    overflow: hidden;
    background: var(--color-surface-3);
    aspect-ratio: 4 / 3;
}
.vc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vc-card__tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: var(--vc-pill);
    background: var(--color-secondary);
    color: var(--color-ink);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

.vc-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: 1.25rem 0.875rem 1.375rem;
}

.vc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.125rem;
}

.vc-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.vc-card__more::after { content: ''; position: absolute; inset: 0; z-index: 3; }

.vc-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    color: var(--color-ink);
}

/* =====================================================================
   6. Två-kolumnsblock (bild + text/checklista)
   ===================================================================== */

.vc-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.vc-split--reverse .vc-split__media { order: 2; }
.vc-split--tall { grid-template-columns: 1.15fr 0.85fr; }
.vc-split--tall .vc-split__media { aspect-ratio: 4 / 5; }

.vc-split__media {
    position: relative;
    border-radius: var(--vc-radius-card);
    overflow: hidden;
    background: var(--color-dark-2);
    aspect-ratio: 5 / 4;
}
.vc-split__media img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.vc-split__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.vc-split__actions { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.75rem; }

@media (max-width: 900px) {
    .vc-split,
    .vc-split--tall { grid-template-columns: 1fr; }
    .vc-split--reverse .vc-split__media { order: 0; }
    .vc-split__media,
    .vc-split--tall .vc-split__media { aspect-ratio: 16 / 10; }
}

/* Checklista */
.vc-checklist {
    display: grid;
    gap: 1.375rem;
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}
.vc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding-bottom: 1.375rem;
    border-bottom: 1px solid var(--color-line);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}
.vc-checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.vc-checklist li::before {
    content: '';
    flex: none;
    width: 22px; height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center;
}
/* Två spalter när listan är en uppräkning och inte en sekvens - fyra rader
   i en enda kolumn läser som en väldigt smal textremsa på bred skärm. */
.vc-checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }

/* :last-child-undantaget gäller sista posten i DOM:en, alltså bara den högra
   spalten. Det lämnade vänsterspalten med streck och högerspalten utan, så
   här får alla poster sitt streck. */
.vc-checklist--2 li:last-child {
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 1.375rem;
}
.vc-section--dark .vc-checklist--2 li:last-child { border-bottom-color: var(--color-on-dark-line); }

@media (max-width: 760px) {
    .vc-checklist--2 { grid-template-columns: minmax(0, 1fr); }
    .vc-checklist--2 li:last-child { border-bottom: 0; padding-bottom: 0; }
}

.vc-section--dark .vc-checklist li { border-bottom-color: var(--color-on-dark-line); }
.vc-section--dark .vc-checklist li::before {
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* =====================================================================
   6b. Tvättväljaren
   ===================================================================== */

.vc-tv {
    background: var(--color-surface-3);
    border-radius: var(--vc-radius-card);
    padding: clamp(1.5rem, 4vw, 3.25rem);
}

/* --- Förlopp --- */
.vc-tv__progress { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.vc-tv__count {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0 0 0.6rem;
}
.vc-tv__rail {
    height: 3px;
    border-radius: 3px;
    background: var(--color-line);
    overflow: hidden;
}
.vc-tv__rail-fill {
    display: block;
    height: 100%;
    width: 16.6%;
    border-radius: 3px;
    background: var(--color-primary);
    transition: width 420ms var(--vc-ease);
}

/* --- Frågesteg --- */
.vc-tv__step { display: none; border: 0; margin: 0; padding: 0; }
.vc-tv__step.is-active { display: block; }

.vc-tv__q {
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.028em;
    padding: 0;
    margin: 0;
}
.vc-tv__help {
    font-size: 0.9375rem;
    color: var(--color-ink-muted);
    margin: 0.5rem 0 1.5rem;
}

.vc-tv__opts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 900px) { .vc-tv__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vc-tv__opts { grid-template-columns: minmax(0, 1fr); } }

.vc-tv__opt { position: relative; display: block; cursor: pointer; }
.vc-tv__opt input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}

.vc-tv__opt-box {
    display: block;
    position: relative;
    padding: 1rem 1rem 1rem 3rem;
    border: 1.5px solid var(--color-line);
    border-radius: 14px;
    background: var(--color-surface);
    transition: border-color 200ms var(--vc-ease), background-color 200ms var(--vc-ease);
}
.vc-tv__opt:hover .vc-tv__opt-box { border-color: var(--color-line-strong); }

/* Markören: rund för enkelval, rundad fyrkant för flerval */
.vc-tv__opt-box::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid var(--color-line-strong);
    border-radius: 50%;
    background: transparent;
    transition: background-color 180ms var(--vc-ease), border-color 180ms var(--vc-ease);
}
.vc-tv__opts--multi .vc-tv__opt-box::before { border-radius: 7px; }

.vc-tv__opt input:checked + .vc-tv__opt-box {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.vc-tv__opt input:checked + .vc-tv__opt-box::before {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center;
}
.vc-tv__opt input:focus-visible + .vc-tv__opt-box {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.vc-tv__opt-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.vc-tv__opt-text {
    display: block;
    font-size: 0.8438rem;
    line-height: 1.45;
    color: var(--color-ink-muted);
    margin-top: 2px;
}

.vc-tv__error {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 1rem 0 0;
}
.vc-tv__error:empty { display: none; }

.vc-tv__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}
.vc-tv__nav .vc-btn { min-height: 2.875rem; }

/* Stegknapparna står stilla — fyllningseffekten hör hemma i sidans CTA:er */
.vc-tv .vc-btn::before { content: none; }
.vc-tv .vc-btn:hover .vc-arrow { transform: none; }
.vc-tv .vc-btn--primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.vc-tv .vc-btn--outline:hover { background: transparent; border-color: var(--color-line-strong); color: var(--color-ink); }

.vc-tv__noscript {
    font-size: 0.9375rem;
    color: var(--color-ink-muted);
    margin: 1.5rem 0 0;
}
.vc-tv__noscript a { color: var(--color-primary); font-weight: 700; }

/* --- Resultatkortet --- */
.vc-tv__eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 0.5rem;
}
.vc-tv__maskin {
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
}
.vc-tv__maskin-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-ink-muted);
    margin: 0.75rem 0 0;
    max-width: 44rem;
}

.vc-tv__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}
.vc-tv__chips-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-right: 0.25rem;
}
.vc-tv__chip {
    padding: 0.3rem 0.75rem;
    border-radius: var(--vc-pill);
    background: var(--color-secondary);
    color: var(--color-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
}

.vc-tv__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 2rem;
    background: var(--color-line);
    border: 1px solid var(--color-line);
    border-radius: var(--vc-radius-media);
    overflow: hidden;
}
@media (max-width: 700px) { .vc-tv__facts { grid-template-columns: minmax(0, 1fr); } }

.vc-tv__fact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.25rem;
    background: var(--color-surface);
}
.vc-tv__fact span {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.vc-tv__fact strong {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.vc-tv__fact em {
    font-style: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-ink-muted);
}

.vc-tv__notiser {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--vc-radius-media);
    background: var(--color-secondary-soft);
    border: 1px solid var(--color-secondary);
}
.vc-tv__notiser-rubrik {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}
.vc-tv__notiser ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.vc-tv__notiser li { font-size: 0.9375rem; line-height: 1.55; margin: 0; }

.vc-tv__svar-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
}


.vc-tv__svar dt {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.vc-tv__svar dd {
    margin: 0.15rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.vc-tv__disclaimer {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
    margin: 1.5rem 0 0;
}

.vc-tv__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.vc-tv__actions .vc-btn { min-height: 2.875rem; }

/* --- Förfrågan --- */
.vc-tv__lead {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-line);
}
.vc-tv__lead-rubrik {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}
.vc-tv__lead-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 46rem;
}
@media (max-width: 620px) { .vc-tv__lead-grid { grid-template-columns: minmax(0, 1fr); } }

.vc-tv__check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    cursor: pointer;
}
.vc-tv__check input { margin-top: 0.25rem; accent-color: var(--color-primary); }

.vc-tv__lead-note {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
    margin: 1rem 0 0;
}
.vc-tv__lead-note a { color: var(--color-primary); text-decoration: underline; }

.vc-tv__status {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 1rem 0 0;
}
.vc-tv__status:empty { display: none; }
.vc-tv__lead button[type=submit] { margin-top: 1.25rem; }

/* --- Utskrift: bara receptet --- */
@media print {
    body > *:not(main) { display: none !important; }
    main > section:not(#tvattvaljaren) { display: none !important; }
    #tvattvaljaren .vc-head,
    .vc-tv__actions,
    .vc-tv__lead { display: none !important; }
    .vc-tv { background: none; padding: 0; }
    .vc-tv__notiser { background: none; border: 1px solid #999; }
}

@media (prefers-reduced-motion: reduce) {
    .vc-tv__rail-fill { transition: none; }
}

/* =====================================================================
   7. Bransch-brickor
   ===================================================================== */

.vc-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    padding: 1.5rem;
    border-radius: var(--vc-radius-card);
    overflow: hidden;
    background: var(--color-dark-2);
    isolation: isolate;
}

.vc-tile__media { position: absolute; inset: 0; z-index: -2; }
.vc-tile__media img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.vc-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(20, 18, 17, 0.10) 24%, rgba(20, 18, 17, 0.82) 100%);
}

.vc-tile__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
.vc-tile__title {
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    text-wrap: balance;
}
.vc-tile__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: #fff;
    transition: background-color 240ms var(--vc-ease), border-color 240ms var(--vc-ease), color 240ms var(--vc-ease);
}
.vc-tile:hover .vc-tile__arrow {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-ink);
}
.vc-tile__link { position: absolute; inset: 0; z-index: 3; }

/* =====================================================================
   8. Kontakt + stegformulär
   ===================================================================== */

/* Knapparna i dialogrutan står stilla — fyllningseffekten hör hemma i
   sidans CTA:er, inte mitt i ett formulärflöde. */
.vc-modal .vc-btn::before { content: none; }
.vc-modal .vc-btn:hover .vc-arrow,
.vc-modal .vc-btn:focus-visible .vc-arrow { transform: none; }
.vc-modal .vc-btn--primary:hover,
.vc-modal .vc-btn--primary:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.vc-modal .vc-btn--outline:hover,
.vc-modal .vc-btn--outline:focus-visible {
    background: transparent;
    border-color: var(--color-line-strong);
    color: var(--color-ink);
}

/* --- Dialogruta ---------------------------------------------------------- */

.vc-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vc-gutter);
}
.vc-modal[hidden] { display: none; }

.vc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 17, 0.62);
}

.vc-modal__panel {
    position: relative;
    width: min(38rem, 100%);
    max-height: calc(100dvh - 2 * var(--vc-gutter));
    overflow-y: auto;
    background: var(--color-surface-2);
    border-radius: var(--vc-radius-card);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}

.vc-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-modal__close:hover { background: var(--color-ink); color: var(--color-surface); }

.vc-modal__eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 0.4rem;
}
.vc-modal__lead {
    font-size: 1.0625rem;
    color: var(--color-ink-muted);
    margin: 0 0 1.75rem;
}

.vc-form__choices[hidden] { display: none; }

/* Stegindikator */
.vc-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}
.vc-steps__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    padding-top: 0.65rem;
    border-top: 2px solid var(--color-line);
    transition: color 260ms var(--vc-ease), border-color 260ms var(--vc-ease);
}
.vc-steps__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem; height: 1.375rem;
    border-radius: 50%;
    background: var(--color-surface-3);
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    transition: background-color 260ms var(--vc-ease), color 260ms var(--vc-ease);
}
.vc-steps__item.is-active { color: var(--color-ink); border-top-color: var(--color-primary); }
.vc-steps__item.is-active span { background: var(--color-primary); color: #fff; }
.vc-steps__item.is-done { border-top-color: var(--color-primary); }
.vc-steps__item.is-done span { background: var(--color-secondary); color: var(--color-ink); }

/* Formulär */
.vc-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vc-form__step { display: none; border: 0; margin: 0; padding: 0; }
.vc-form__step.is-active { display: flex; flex-direction: column; gap: 1.125rem; }

.vc-form__legend {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 0;
    margin-bottom: 0.25rem;
}

.vc-form__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.vc-choice { position: relative; display: block; cursor: pointer; }
.vc-choice input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.vc-choice span {
    display: block;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color 200ms var(--vc-ease), background-color 200ms var(--vc-ease);
}
.vc-choice:hover span { border-color: var(--color-line-strong); }
.vc-choice input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.vc-choice input:focus-visible + span {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.vc-field { display: flex; flex-direction: column; gap: 0.4rem; }
.vc-field__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink);
}
.vc-field__label em { color: var(--color-primary); font-style: normal; }

.vc-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-ink);
    transition: border-color 200ms var(--vc-ease);
}
.vc-input:focus { outline: none; border-color: var(--color-primary); }
.vc-input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
textarea.vc-input { resize: vertical; min-height: 6rem; line-height: 1.6; }
.vc-input.has-error { border-color: var(--color-primary); }

.vc-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .vc-field-row { grid-template-columns: minmax(0, 1fr); } }

.vc-field__error {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
}
.vc-field__error:empty { display: none; }

.vc-form__note { font-size: 0.8125rem; color: var(--color-ink-muted); margin: 0; }
.vc-form__note a { color: var(--color-primary); text-decoration: underline; }

.vc-form__status {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 1rem 0 0;
}
.vc-form__status:empty { display: none; }

.vc-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.vc-form__actions .vc-btn { min-height: 2.875rem; }

.vc-form__done { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.vc-form__done[hidden] { display: none; }
.vc-form__done-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0;
}
.vc-form__done-text { color: var(--color-ink-muted); margin: 0 0 0.75rem; }
.vc-form__done-text a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.vc-form__done-text a:hover { text-decoration: underline; }

/* Ring-oss-genvägen längst ned i kontaktdialogen. Avskild med en linje så den
   läses som ett alternativ till formuläret, inte som ännu ett formulärfält. */
.vc-modal__call {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.9375rem;
    color: var(--color-ink-muted);
}
.vc-modal__call-text { flex: 1 1 auto; }
.vc-modal__call-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 200ms var(--vc-ease), color 200ms var(--vc-ease), background-color 200ms var(--vc-ease);
}
.vc-modal__call-link svg { flex: none; color: var(--color-primary); transition: color 200ms var(--vc-ease); }
.vc-modal__call-link:hover,
.vc-modal__call-link:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.vc-modal__call-link:hover svg,
.vc-modal__call-link:focus-visible svg { color: #fff; }

/* Tack-läget nämner redan numret - då är genvägen överflödig. */
.vc-form__done:not([hidden]) + .vc-modal__call { display: none; }

/* ---------------------------------------------------------------------
   Kontaktdialogen på mobil

   Sex ämnesval staplade i en kolumn gjorde steg 1 nästan tre skärmhöjder
   högt. Här flödar valen i stället som chips (flex-wrap), och panelens
   luft, textrutan och stegindikatorn dras ihop - allt utan att tryckytan
   blir mindre än 44px.
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
    .vc-modal { align-items: flex-end; padding: 0; }
    .vc-modal__panel {
        width: 100%;
        max-height: 92dvh;
        border-radius: var(--vc-radius-card) var(--vc-radius-card) 0 0;
        padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    }
    .vc-modal__close { top: 0.75rem; right: 0.75rem; width: 36px; height: 36px; }

    .vc-modal__eyebrow { margin-bottom: 0.3rem; }
    .vc-modal__lead { font-size: 0.9375rem; margin-bottom: 1.25rem; padding-right: 2.5rem; }

    .vc-steps { gap: 0.4rem; margin-bottom: 1.25rem; }
    .vc-steps__item { font-size: 0.75rem; gap: 0.375rem; padding-top: 0.5rem; }
    .vc-steps__item span { width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; }

    .vc-form__step.is-active { gap: 0.875rem; }
    .vc-form__legend { font-size: 1.0625rem; }

    /* Chips i stället för staplade kort */
    .vc-form__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .vc-choice span {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        font-size: 0.875rem;
    }

    textarea.vc-input { min-height: 4.75rem; }

    .vc-form__actions { margin-top: 1.25rem; }
    .vc-modal__call { margin-top: 1.25rem; padding-top: 1rem; font-size: 0.875rem; }
    .vc-modal__call-text { flex: 1 1 100%; }
    .vc-modal__call-link { width: 100%; justify-content: center; }
}

/* =====================================================================
   9. Nyheter — rutnät (desktop) / slider (mobil)
   ===================================================================== */

.vc-news { position: relative; }

.vc-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.vc-news__card { min-width: 0; }
.vc-news__link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

.vc-news__media {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--vc-radius-media);
    overflow: clip;
    background: var(--color-surface-3);
}
.vc-news__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pilcirkeln står stilla — bara fyllningen växlar till gult vid hovring. */
.vc-news__arrow {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 10rem;
    background: var(--color-surface-2);
    color: var(--color-ink);
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.vc-news__arrow-icon { width: 1.5rem; height: 1.5rem; }

.vc-news__link:hover .vc-news__arrow { background: var(--color-secondary); }

.vc-news__body { display: flex; flex-direction: column; gap: 0.5rem; }

.vc-news__meta {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0;
}

.vc-news__title {
    font-size: clamp(1.1875rem, 1.7vw, 1.4rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
}

/* Pilarna visas bara i sliderläget */
.vc-news__nav {
    display: none;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Under 768px blir rutnätet en slider med ett kort i taget */
@media (max-width: 767px) {
    .vc-news__grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
    }
    .vc-news__grid::-webkit-scrollbar { display: none; }
    .vc-news__card {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
    .vc-news__nav { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .vc-news__arrow { transition: none; }
}

/* =====================================================================
   10. Sidfot
   ===================================================================== */

.vc-footer {
    background: var(--color-dark);
    color: var(--color-on-dark);
    padding-block: clamp(3.5rem, 6vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
    overflow: clip;
}

.vc-footer__layout {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.vc-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 22rem;
    flex: 1 1 16rem;
}

.vc-footer__tagline {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-on-dark);
    margin: 0;
    text-wrap: balance;
}

.vc-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-style: normal;
    font-size: 0.9688rem;
    line-height: 1.6;
    color: var(--color-on-dark-muted);
}
.vc-footer__contact a { color: inherit; text-decoration: none; transition: color 200ms var(--vc-ease); }
.vc-footer__contact a:hover { color: var(--color-secondary); }

/* Tre länkkolumner */
.vc-footer__cols {
    display: flex;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    max-width: 47.5rem;
}
.vc-footer__col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}
.vc-footer__col-heading {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 242, 235, 0.45);
    margin: 0 0 0.25rem;
}
.vc-footer__text {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-on-dark-muted);
    margin: 0 0 0.5rem;
}

/* Länk med sveps-understrykning: linjen är parkerad på translateX(-100%)
   och sveper in till 0 när man hovrar över klipp-ytan. */
.vc-fl {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    color: var(--color-on-dark-muted);
    text-decoration: none;
    transition: color 300ms var(--vc-ease);
}
.vc-fl:hover { color: var(--color-on-dark); }

.vc-fl__clip {
    display: flex;
    flex-direction: column;
    overflow: clip;
}
.vc-fl__text {
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.vc-fl__line {
    display: block;
    height: 0.06rem;
    background: var(--color-secondary);
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.vc-fl__clip:hover .vc-fl__line { transform: translateX(0%); }

@media (prefers-reduced-motion: reduce) {
    .vc-fl__line { transition: none; }
}

.vc-footer__social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.75rem;
}
.vc-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-on-dark-line);
    color: var(--color-on-dark);
    transition: background-color 220ms var(--vc-ease), border-color 220ms var(--vc-ease), color 220ms var(--vc-ease);
}
.vc-footer__social a:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-ink); }

.vc-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-top: 1.75rem;
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid var(--color-on-dark-line);
}
.vc-footer__copy {
    font-size: 0.875rem;
    color: rgba(247, 242, 235, 0.5);
    margin: 0;
}
.vc-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.vc-footer__legal .vc-fl__text { font-size: 0.875rem; }

/* Logotyp som avslutning */
.vc-footer__logo {
    display: inline-block;
    line-height: 0;
}
.vc-footer__logo img {
    height: clamp(58px, 6.5vw, 86px);
    width: auto;
}

@media (max-width: 991px) {
    .vc-footer__layout {
        flex-flow: column;
        gap: 3.5rem;
    }
    .vc-footer__brand { max-width: none; }
    .vc-footer__cols { max-width: none; }
}

@media (max-width: 620px) {
    .vc-footer__cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem;
    }
    .vc-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   10b. Sidan "Bygg din egen tvätt"
   =====================================================================
   Egna mönster för undersidan — medvetet andra än startsidans, så sidorna
   känns besläktade men inte kopierade:
     .vc-phero  kompakt sidhjälte (startsidan har fullhöjds .vc-hero)
     .vc-lede   asymmetriskt textblock i stället för centrerad rubrik
     .vc-flow   numrerad processrad
     .vc-panel  två paneler med bild-topp (startsidan har .vc-card i karusell)
     .vc-specs  spec-rutnät med räknare
     .vc-ask    formulär direkt på sidan (startsidan har det i dialogruta)
   ===================================================================== */

/* --- Etiketter ---------------------------------------------------------- */

.vc-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-secondary);
}
.vc-eyebrow--ink { color: var(--color-primary); }

/* --- Sidhjälte ---------------------------------------------------------- */

.vc-phero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(520px, 68vh, 720px);
    margin-top: calc(-1 * var(--vc-header-h));
    padding-top: calc(var(--vc-header-h) + clamp(3.5rem, 7vw, 6rem));
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
    background: var(--color-dark);
    color: #fff;
    overflow: hidden;
}
.vc-phero > .vc-wrap { width: 100%; }

.vc-phero__bg { position: absolute; inset: 0; z-index: -2; }
.vc-phero__bg img,
.vc-phero__bg picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

.vc-phero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(16, 14, 13, 0.74) 0%, rgba(16, 14, 13, 0.55) 38%, rgba(16, 14, 13, 0.90) 100%),
        linear-gradient(100deg, rgba(26, 26, 26, 0.88) 0%, rgba(26, 26, 26, 0.40) 66%, rgba(26, 26, 26, 0.18) 100%);
}

/* Ljusare variant för branschsidorna: deras bilder är miljöfoton som förlorar
   för mycket under standardoverlayen. Texten ligger till vänster, så
   vänsterkanten hålls fortfarande mörk nog för vit text. */
.vc-phero--ljus .vc-phero__overlay {
    background:
        linear-gradient(180deg, rgba(16, 14, 13, 0.60) 0%, rgba(16, 14, 13, 0.34) 40%, rgba(16, 14, 13, 0.78) 100%),
        linear-gradient(100deg, rgba(26, 26, 26, 0.78) 0%, rgba(26, 26, 26, 0.26) 62%, rgba(26, 26, 26, 0.08) 100%);
}

.vc-phero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
    max-width: 44rem;
}
.vc-phero .vc-h1 { color: #fff; }
.vc-phero__lead {
    font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.82);
    max-width: 42rem;
    margin: 0;
}
.vc-phero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

/* --- Konceptet: etikett/rubrik vänster, brödtext höger ------------------- */

.vc-lede {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.vc-lede__aside { display: flex; flex-direction: column; gap: 0.9rem; }
.vc-lede__body { display: flex; flex-direction: column; gap: 1.25rem; }

.vc-lede__text {
    font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
    line-height: 1.75;
    color: var(--color-ink-muted);
    margin: 0;
    max-width: 60ch;
}
.vc-lede__text:first-child { color: var(--color-ink); font-weight: 500; }

@media (max-width: 900px) {
    .vc-lede { grid-template-columns: 1fr; }
}

/* Nyckel/värde-lista under brödtexten */
.vc-facts {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
}
.vc-facts li {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 0.35rem 1.5rem;
    margin: 0;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--color-line);
}
.vc-facts__k {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}
.vc-facts__v {
    font-size: 0.9688rem;
    line-height: 1.65;
    color: var(--color-ink-muted);
}
@media (max-width: 620px) {
    .vc-facts li { grid-template-columns: 1fr; }
}

/* --- Processrad --------------------------------------------------------- */

.vc-flow--3 { grid-template-columns: repeat(3, 1fr) !important; }

@media (max-width: 860px) { .vc-flow--3 { grid-template-columns: 1fr !important; } }

.vc-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.vc-flow__step {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 2px solid var(--color-on-dark-line);
}
/* Siffran markerar sekvensen — den bär ingen egen betydelse för skärmläsare,
   därför aria-hidden i markupen. */
.vc-flow__no {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
}
.vc-flow__step .vc-h3 { color: var(--color-on-dark); }
.vc-flow__step .vc-text { color: var(--color-on-dark-muted); }

/* Samma processrad på ljus yta. Måste stå EFTER reglerna ovan: selektorerna
   har samma specificitet, så ordningen är det enda som avgör. */
.vc-flow--ink { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.vc-flow--ink .vc-flow__step { border-top-color: var(--color-line); }
.vc-flow--ink .vc-flow__no { color: var(--color-primary); }
.vc-flow--ink .vc-h3 { color: var(--color-ink); }
.vc-flow--ink .vc-text { color: var(--color-ink-muted); }

@media (max-width: 980px) {
    .vc-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .vc-flow { grid-template-columns: 1fr; }
}

/* --- Två paneler -------------------------------------------------------- */

/* Panelerna sträcks lika höga (grid-default) så bild- och underkanter
   linjerar även när exempel-listorna är olika långa. */
.vc-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);
}
@media (max-width: 900px) { .vc-duo { grid-template-columns: 1fr; } }

.vc-panel {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-3);
    border-radius: var(--vc-radius-card);
    padding: 0.625rem 0.625rem 0;
    overflow: hidden;
}

.vc-panel__media {
    position: relative;
    border-radius: var(--vc-radius-media);
    overflow: hidden;
    background: var(--color-surface-3);
    aspect-ratio: 16 / 9;
}
.vc-panel__media img,
.vc-panel__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vc-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1;
    padding: 1.5rem 1.125rem 1.75rem;
}

.vc-panel__label {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink);
}

/* Exempel-lista: streck i stället för bock — det här är referenser, inte
   fördelar, och ska inte läsa som .vc-checklist. */
.vc-marks {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-marks li {
    position: relative;
    margin: 0;
    padding-left: 1.5rem;
    font-size: 0.9688rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}
.vc-marks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
}

/* Bock i stället för streck. Strecket markerar en referens, bocken något
   maskinen klarar - och det är det senare listan säger. */
.vc-marks--bock li { padding-left: 1.9rem; }
.vc-marks--bock li::before {
    top: 0.28em;
    width: 20px; height: 20px;
    border-radius: 50%;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Exempellista i flera spalter: 6 till 13 poster i en enda kolumn blir en
   onödigt lång remsa på bred skärm.

   Spalterna görs med multi-column, inte grid. I ett rutnät binds posterna i
   rader, så en post som tar två textrader trycker ner sina radgrannar och
   lämnar hål i de andra spalterna. Här flödar de i stället kolumnvis och
   packas tätt oavsett hur långa de är. */
.vc-marks--kolumner {
    display: block;
    columns: 3;
    column-gap: clamp(2rem, 4vw, 3.5rem);
}
.vc-marks--kolumner li {
    break-inside: avoid;
    margin-bottom: 0.85rem;
}
.vc-marks--kolumner li:last-child { margin-bottom: 0; }

@media (max-width: 900px) { .vc-marks--kolumner { columns: 2; } }
@media (max-width: 560px) { .vc-marks--kolumner { columns: 1; } }

/* --- Spec-rutnät -------------------------------------------------------- */

.vc-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    counter-reset: vc-spec;
    border-top: 1px solid var(--color-line);
}
.vc-spec {
    counter-increment: vc-spec;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--color-line);
}
.vc-spec:nth-child(odd) { border-right: 1px solid var(--color-line); }
.vc-spec:nth-child(even) { padding-left: clamp(1.25rem, 3vw, 2.75rem); padding-right: 0; }
.vc-spec::before {
    content: counter(vc-spec, decimal-leading-zero);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}
@media (max-width: 760px) {
    .vc-specs { grid-template-columns: 1fr; }
    .vc-spec,
    .vc-spec:nth-child(even) { padding: 1.75rem 0; border-right: 0; }
}

/* --- Förfrågan: intro + formulärkort ------------------------------------ */

.vc-ask {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
@media (max-width: 980px) { .vc-ask { grid-template-columns: 1fr; } }

/* Formulärkortet är högre än introt — introt följer med i stället för att
   lämna en tom mörk yta. Bara på desktop; i staplat läge är det meningslöst. */
.vc-ask__intro { display: flex; flex-direction: column; gap: 1.125rem; }
@media (min-width: 981px) {
    .vc-ask__intro { position: sticky; top: calc(var(--vc-header-h) + 2rem); }
}

.vc-ask__contact {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
}
.vc-ask__contact li {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    align-items: baseline;
    margin: 0;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.9688rem;
    color: var(--color-ink);
}
.vc-ask__k {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.vc-ask__contact a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.vc-ask__contact a:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .vc-ask__contact li { grid-template-columns: 1fr; gap: 0.2rem; }
}

.vc-ask__card {
    background: var(--color-surface-3);
    border-radius: var(--vc-radius-card);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--color-ink);
}

/* Fälten mot kortets papper-yta: den varmvita standardbakgrunden ligger för
   nära kortet för att läsa som en inmatningsyta. */
.vc-ask__card .vc-input { background: var(--color-surface-2); }
.vc-ask__card .vc-choice span { background: var(--color-surface-2); }
.vc-ask__card .vc-choice input:checked + span { background: var(--color-primary-soft); }

.vc-bygg { display: flex; flex-direction: column; gap: 1.25rem; }
.vc-bygg[hidden] { display: none; }

/* Stegläget sätts av JS (data-vc-armed på kortet) — precis som reveal-effekten
   och headerns transparenta läge. Utan skript vore ett stegat formulär låst
   vid steg 1 med dold skicka-knapp; då visas i stället alla fält på en gång.
   Selektorernas specificitet (0,3,0) vinner över [hidden]-regelns !important. */
.vc-ask__card:not([data-vc-armed]) .vc-steps { display: none; }
.vc-ask__card:not([data-vc-armed]) .vc-form__step {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}
.vc-ask__card:not([data-vc-armed]) [data-vc-bygg-prev],
.vc-ask__card:not([data-vc-armed]) [data-vc-bygg-next] { display: none !important; }
.vc-ask__card:not([data-vc-armed]) [data-vc-bygg-submit] { display: inline-flex !important; }

.vc-bygg .vc-form__legend { color: var(--color-ink); }
.vc-bygg .vc-form__actions { margin-top: 0.5rem; }
.vc-bygg .vc-form__actions .vc-btn { flex: 1; }

.vc-fieldset { border: 0; margin: 0; padding: 0; }
.vc-fieldset .vc-field__label { display: block; margin-bottom: 0.5rem; padding: 0; }

/* Tre korta alternativ per fråga — de ryms på en rad och slipper lämna ett
   ensamt val på rad två (modalens tvåkolumnsval har längre etiketter). */
.vc-bygg .vc-form__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) {
    .vc-bygg .vc-form__choices { grid-template-columns: minmax(0, 1fr); }
}

.vc-bygg__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 560px) { .vc-bygg__row { grid-template-columns: minmax(0, 1fr); } }

/* Skicka-knappen står stilla — fyllningseffekten hör hemma i sidans CTA:er,
   inte i slutet av ett formulärflöde (samma resonemang som i dialogrutan). */
.vc-bygg .vc-btn::before { content: none; }
.vc-bygg .vc-btn--primary:hover,
.vc-bygg .vc-btn--primary:focus-visible {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}
.vc-bygg .vc-btn[disabled] { opacity: 0.6; cursor: progress; }

.vc-bygg__done { display: flex; flex-direction: column; gap: 0.75rem; }
.vc-bygg__done[hidden] { display: none; }

/* =====================================================================
   10c. Produktsida (kategorisidor, t.ex. /ultraljudstvattar)
   =====================================================================
     .vc-prodhero  text + produktbild sida vid sida (ingen fotobakgrund -
                   på en produktsida ÄR bilden produkten, inte en kuliss)
     .vc-prodgrid  modellrutnätet, med ett avvikande accentkort sist
     .vc-perks     fördelar i fyra rutor
     .vc-note      enradig hänvisning vidare
     .vc-faq       accordion byggd på <details>/<summary> (ingen JS behövs)
     .vc-cta       avslutande uppmaningsrad
   ===================================================================== */

/* --- Produkthjälte ------------------------------------------------------ */

/* Sidan har ingen mörk hjältebild, så headern behöver luft under sig -
   annars hamnar brödsmulorna under den fasta headern. */
.vc-prodhero { padding-top: calc(var(--vc-header-h) + clamp(2rem, 4vw, 3.5rem)); }

.vc-prodhero__grid {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (max-width: 900px) {
    .vc-prodhero__grid { grid-template-columns: 1fr; }
    /* Kvadratiskt kort i full bredd blir en halv skärmhöjd hög - håll igen. */
    .vc-prodhero__media { max-width: 26rem; margin-inline: auto; width: 100%; }
}

.vc-prodhero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

/* Produktsidans h1 är en rubrik i ett flöde, inte en affisch över en bild -
   den får därför en lugnare skala än hjältens. */
.vc-h1--prod { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }

.vc-prodhero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

/* Modellernas egen undertitel, mellan rubrik och ingress. */
.vc-prodhero__tagline {
    margin: -0.35rem 0 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Produktbilden står fritt på sektionsytan. Ett kort runt den lade en ram
   kring något som redan är friställt, och bilden läste som en platshållare. */
.vc-prodhero__media { aspect-ratio: 1 / 1; }
.vc-prodhero__media img,
.vc-prodhero__media picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Miljöfoto i stället för friställd rendering: multiply mot en mörk bild ger
   en svart ruta, så den fyller mediaytan i egen ram i stället. */
.vc-prodhero__media--foto { border-radius: var(--vc-radius-card); overflow: hidden; }
.vc-prodhero__media--foto img,
.vc-prodhero__media--foto picture { object-fit: cover; mix-blend-mode: normal; }

/* --- Modellrutnätet ----------------------------------------------------- */

.vc-prodgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (max-width: 980px) { .vc-prodgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vc-prodgrid { grid-template-columns: 1fr; } }

.vc-prod {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-3);
    border-radius: var(--vc-radius-card);
    padding: 0.625rem 0.625rem 0;
    overflow: hidden;
}

.vc-prod__media {
    position: relative;
    border-radius: var(--vc-radius-media);
    overflow: hidden;
    background: #fff;
    aspect-ratio: 4 / 3;
    padding: 1.25rem;
}
.vc-prod__media img,
.vc-prod__media picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ett par produktbilder är miljöfoton i stället för friställda renderingar.
   contain skulle lägga dem som en mörk kvadrat mitt i den vita kortytan, så
   de fyller rutan i stället. */
.vc-prod__media--foto { padding: 0; background: var(--color-surface-3); }
.vc-prod__media--foto img,
.vc-prod__media--foto picture { object-fit: cover; }

.vc-prod__tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: var(--vc-pill);
    background: var(--color-secondary);
    color: var(--color-ink);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

.vc-prod__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: 1.25rem 0.875rem 1.375rem;
}

.vc-prod__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.125rem;
}

.vc-prod__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.vc-prod__more::after { content: ''; position: absolute; inset: 0; z-index: 3; }

/* Accentkortet öppnar formuläret i stället för att navigera - knappen ska
   ändå läsa som kortets länk. */
.vc-prod__more--knapp {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.vc-prod__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    color: var(--color-ink);
    transition: background-color 240ms var(--vc-ease), border-color 240ms var(--vc-ease), color 240ms var(--vc-ease);
}
.vc-prod:hover .vc-prod__arrow {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Sista rutan är vägen vidare, inte en modell - den får gul yta och
   centrerat innehåll så den läser som ett avbrott i serien. */
.vc-prod--accent {
    background: var(--color-secondary-soft);
    border: 1.5px solid var(--color-secondary);
    justify-content: center;
    padding: 0.625rem;
}
.vc-prod--accent .vc-prod__body {
    justify-content: center;
    padding: clamp(1.5rem, 2.5vw, 2rem) 1rem;
    gap: 0.75rem;
}
/* Foten ska sitta strax under texten, inte tryckas till kortets botten -
   det är ett textkort, inte ett produktkort med bild att linjera mot. */
.vc-prod--accent .vc-prod__foot { margin-top: 0.5rem; }
.vc-prod--accent .vc-prod__arrow { border-color: var(--color-line-strong); }

/* --- Hubbkortet (/produkter) -------------------------------------------- */

/* Kategorikortet på produkthubben listar sina modeller inuti kortet. Det gör
   att kortets vanliga helytetäckande länk inte går att ha kvar: ::after på
   .vc-prod__more lägger ett osynligt lager över hela kortet, och det skulle
   svälja klicken på modellänkarna. Här får "Alla X" i stället vara en vanlig
   länk, och varje modell sin egen. */
.vc-prod--hub .vc-prod__more::after { content: none; }

.vc-prodhub__lista {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0.875rem 0 0;
    border-top: 1px solid var(--color-line);
}
.vc-prodhub__lista li + li { margin-top: 0.125rem; }

.vc-prodhub__lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    transition: color 200ms var(--vc-ease);
}

/* Chevron i stället för den runda pilen: raderna ligger tätt, och en ring per
   rad hade gjort listan till fem knappar i stället för en innehållsförteckning. */
.vc-prodhub__lista a::after {
    content: '';
    flex: none;
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.35;
    transition: opacity 200ms var(--vc-ease), transform 200ms var(--vc-ease);
}
.vc-prodhub__lista a:hover { color: var(--color-primary); }
.vc-prodhub__lista a:hover::after { opacity: 1; transform: rotate(-45deg) translate(2px, 2px); }

/* --- Vägar vidare (/produkter) ------------------------------------------ */

.vc-vidare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.75rem, 1.2vw, 1rem);
    margin-top: clamp(2rem, 3vw, 2.75rem);
}
@media (max-width: 900px) { .vc-vidare { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vc-vidare { grid-template-columns: 1fr; } }

.vc-vidare__kort {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem 1.375rem;
    border-radius: var(--vc-radius-sm);
    background: var(--color-surface-3);
    text-decoration: none;
    transition: background-color 240ms var(--vc-ease), transform 240ms var(--vc-ease);
}
.vc-vidare__kort:hover { background: var(--color-primary-soft); transform: translateY(-2px); }

.vc-vidare__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary);
}

.vc-vidare__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vc-vidare__titel { font-size: 1rem; font-weight: 700; color: var(--color-ink); }
.vc-vidare__desc  { font-size: 0.875rem; color: var(--color-ink-muted); line-height: 1.45; }

/* Pilen sitter i högerkanten och lyfts fram först vid hover - annars skriker
   sju kort samtidigt om att de går att klicka på. */
.vc-vidare__pil {
    margin-left: auto;
    align-self: center;
    flex: none;
    color: var(--color-primary);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 240ms var(--vc-ease), transform 240ms var(--vc-ease);
}
.vc-vidare__kort:hover .vc-vidare__pil { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .vc-vidare__kort:hover { transform: none; }
    .vc-vidare__pil { transition: opacity 240ms var(--vc-ease); transform: none; }
    .vc-vidare__kort:hover .vc-vidare__pil { transform: none; }
}

/* --- Fördelar ----------------------------------------------------------- */

.vc-perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}
.vc-perk {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.5rem, 2.4vw, 2rem);
    border-radius: var(--vc-radius-card);
    background: var(--color-surface-3);
}

/* Bocken markerar att rutan är en fördel, inte ett steg i en ordning. */
.vc-perk::before {
    content: '';
    width: 38px; height: 38px;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background-color: var(--color-primary-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23981a29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Samma rutor på mörk yta: kortet får den mörkare tonen och bocken byter
   till gult, som checklistan gör i mörka sektioner. */
.vc-perks--dark .vc-perk { background: var(--color-dark-2); }
.vc-perks--dark .vc-perk::before {
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

@media (max-width: 980px) { .vc-perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vc-perks { grid-template-columns: 1fr; } }

/* Tre per rad, i lite större format. För sex rutor blir fyrakolumnsvarianten
   4 + 2 med ett hål på slutet; tre kolumner ger två fulla rader.
   Måste stå efter mediereglerna ovan - samma specificitet. */
.vc-perks--3 { grid-template-columns: repeat(3, 1fr); }
.vc-perks--3 .vc-perk {
    gap: 0.85rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
}
.vc-perks--3 .vc-perk::before {
    width: 44px; height: 44px;
    background-size: 20px 20px;
}
.vc-perks--3 .vc-h4 { font-size: 1.125rem; }
.vc-perks--3 .vc-text { font-size: 1rem; }

@media (max-width: 980px) { .vc-perks--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vc-perks--3 { grid-template-columns: 1fr; } }

/* Hänvisningsrad under fördelarna */
.vc-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: clamp(2rem, 3vw, 2.75rem) 0 0;
    padding: 1.125rem 1.5rem;
    border-radius: var(--vc-radius-sm);
    background: var(--color-surface-3);
}
.vc-note__text { font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.vc-note__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.vc-note__link:hover { text-decoration: underline; }

/* --- Specpunkter i produktkort ------------------------------------------ */

.vc-specpunkter {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.vc-specpunkter li {
    position: relative;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9063rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}
.vc-specpunkter li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* --- Datatabell --------------------------------------------------------- */

/* Sex kolumner ryms inte i en mobilbredd. Tabellen scrollar i sin egen
   container i stället för att pressa sidan bred - kravet i ai-rules. */
.vc-tabell__scroll {
    overflow-x: auto;
    border-radius: var(--vc-radius-card);
    background: var(--color-surface-2);
    -webkit-overflow-scrolling: touch;
}
.vc-tabell__scroll:focus-visible { outline-offset: -3px; }

.vc-tabell__tabell {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9063rem;
    white-space: nowrap;
}
.vc-tabell__caption {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.vc-tabell__tabell th,
.vc-tabell__tabell td {
    padding: 0.85rem 1.125rem;
    text-align: left;
    border-bottom: 1px solid var(--color-line);
}
.vc-tabell__tabell thead th {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink);
    background: var(--color-surface-3);
    white-space: nowrap;
}
.vc-tabell__tabell tbody th {
    font-weight: 600;
    color: var(--color-ink);
}
.vc-tabell__tabell tbody td { color: var(--color-ink-muted); }
.vc-tabell__tabell tbody tr:last-child th,
.vc-tabell__tabell tbody tr:last-child td { border-bottom: 0; }
.vc-tabell__tabell tbody tr:hover th,
.vc-tabell__tabell tbody tr:hover td { background: var(--color-surface-3); }

/* Radrubriken följer med när man bläddrar i sidled - annars tappar man
   vilken specifikation siffrorna hör till. */
.vc-tabell__tabell th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface-2);
    border-right: 1px solid var(--color-line);
}
.vc-tabell__tabell thead th:first-child { background: var(--color-surface-3); z-index: 2; }
.vc-tabell__tabell tbody tr:hover th:first-child { background: var(--color-surface-3); }

@media (max-width: 620px) {
    .vc-tabell__tabell { font-size: 0.8438rem; }
    .vc-tabell__tabell th,
    .vc-tabell__tabell td { padding: 0.7rem 0.875rem; }
}

/* --- Processen som lodrät sekvens --------------------------------------- */

.vc-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}
@media (max-width: 900px) { .vc-process { grid-template-columns: 1fr; } }

.vc-process__intro { display: flex; flex-direction: column; gap: 1.125rem; }
.vc-process__intro .vc-text:first-of-type { color: var(--color-ink); font-weight: 500; }
@media (min-width: 901px) {
    .vc-process__intro { position: sticky; top: calc(var(--vc-header-h) + 2rem); }
}

/* Linjen mellan siffrorna är tvättlinan: stegen hänger ihop lodrätt i stället
   för att ligga som tre fristående rutor bredvid varandra. */
.vc-linje {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Cirkeln är 52px hög, rubriken bredvid har en betydligt kortare radhöjd.
   Utan den här nudgen startar sekvensen ovanför rubrikens överkant. */
@media (min-width: 901px) { .vc-linje { padding-top: 0.5rem; } }
.vc-linje__steg {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 1.25rem;
    margin: 0;
    padding-bottom: clamp(2rem, 3.5vw, 2.75rem);
}
.vc-linje__steg:last-child { padding-bottom: 0; }

/* Sträcket löper från siffrans underkant till nästa siffra. */
.vc-linje__steg:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.625rem;
    top: 3.25rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--color-line);
}

.vc-linje__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vc-linje__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.6rem;
}

/* --- Utföranden: tre lika stora boxar ----------------------------------- */

.vc-utfor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (max-width: 900px) { .vc-utfor { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vc-utfor { grid-template-columns: 1fr; } }

.vc-utfor__item {
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: var(--vc-radius-card);
    overflow: hidden;
    background: var(--color-surface-3);
}

/* Bilden går kant i kant. Med luft runt om blev bildens egen ljusa
   studiobakgrund en synlig ruta inuti den vita kortytan - motivet ligger
   centrerat, så beskärningen tar bara bort tom bakgrund. */
.vc-utfor__img,
.vc-utfor__item picture {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.vc-utfor__cap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    padding: 1.25rem clamp(1.125rem, 1.8vw, 1.5rem) 1.5rem;
}
.vc-utfor__titel {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}
.vc-utfor__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

/* Friställd produktbild i ett två-kolumnsblock: den ska rymmas hel, inte
   beskäras som ett miljöfoto (som .vc-split__media annars gör). Bilden är
   liten i original, så den visas nära sin egna storlek i stället för att
   sträckas ut till kolumnens fulla höjd och bli mjuk. */
.vc-split__media--produkt {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    aspect-ratio: auto;
    min-height: 22rem;
}
.vc-split__media--produkt img,
.vc-split__media--produkt picture {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 26rem;
    object-fit: contain;
}

/* Produktfoto med vit studiobakgrund. multiply låter det vita smälta in i
   sektionsytan i stället för att ligga som en ljus ruta bakom produkten.
   Egen modifier: generatorbilden är redan urklippt och skulle bli mörk. */
.vc-split__media--vit img,
.vc-split__media--vit picture { mix-blend-mode: multiply; }

/* Diagram får inte beskäras - hela grafen måste synas. Vit panel eftersom
   axlar och linjer är ritade för ljus botten. */
.vc-split__media--diagram {
    display: flex;
    align-items: center;
    background: var(--color-surface-2);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    aspect-ratio: 16 / 11;
}
.vc-split__media--diagram img,
.vc-split__media--diagram picture {
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* --- Tvättvätskor: kort med fakta i nyckel/värde-form -------------------- */

.vc-vatskor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (max-width: 980px) { .vc-vatskor { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vc-vatskor { grid-template-columns: 1fr; } }

.vc-vatska {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.5rem, 2.4vw, 2rem);
    border-radius: var(--vc-radius-card);
    background: var(--color-surface-3);
}
.vc-vatska__tagg {
    align-self: flex-start;
    padding: 0.25rem 0.65rem;
    border-radius: var(--vc-pill);
    background: var(--color-secondary);
    color: var(--color-ink);
    font-size: 0.6563rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Fakta som definitionslista: etiketten kan då läsas ihop med sitt värde av
   skärmläsare, till skillnad från två fristående textrader. */
.vc-vatska__fakta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.875rem;
    margin: auto 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.8438rem;
    line-height: 1.5;
}
.vc-vatska__fakta dt {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    padding-top: 0.15rem;
}
.vc-vatska__fakta dd { margin: 0; color: var(--color-ink-muted); }

/* Friställd produktbild i ett utförande-kort: den ska rymmas hel, inte
   beskäras som ett miljöfoto. */
.vc-utfor__img--contain {
    object-fit: contain !important;
    background: var(--color-surface-3);
    padding: 1.25rem;
}

/* Kontaktlistan i en ljus CTA-box */
.vc-ask__contact--ink { margin-top: 0.5rem; }

/* --- FAQ: sök, filter och frågekort -------------------------------------- */

.vc-fragor { max-width: 58rem; margin-inline: auto; }

/* Verktygsraden visas först när skriptet armerat den. Utan JS syns ingen
   sökruta som inte söker - alla frågor ligger ändå framme. */
.vc-fragor__verktyg { display: none; }
.vc-fragor[data-vc-faq-armed] .vc-fragor__verktyg {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.vc-fragor__sok {
    position: relative;
    display: block;
}
.vc-fragor__sok-etikett {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.vc-fragor__sok-ikon {
    position: absolute;
    left: 1.125rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--color-ink-muted);
    pointer-events: none;
}
.vc-fragor__falt {
    width: 100%;
    padding: 0.9rem 1.125rem 0.9rem 3rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--vc-pill);
    background: var(--color-surface-2);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-ink);
    transition: border-color 200ms var(--vc-ease);
}
.vc-fragor__falt:focus { outline: none; border-color: var(--color-primary); }
.vc-fragor__falt:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.vc-fragor__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vc-fragor__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--vc-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background-color 180ms var(--vc-ease), border-color 180ms var(--vc-ease), color 180ms var(--vc-ease);
}
.vc-fragor__chip:hover { border-color: var(--color-line-strong); color: var(--color-ink); }
.vc-fragor__chip.is-vald {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-surface);
}
.vc-fragor__antal {
    font-size: 0.75rem;
    font-weight: 800;
    opacity: 0.6;
}

.vc-fragor__lista { display: grid; gap: 0.625rem; }

/* Varje fråga är ett eget kort, inte en rad i en lista. Det gör listan
   skannbar och ger plats åt ämnesetiketten, som behövs när filtret visar
   frågor från flera ämnen om varandra. */
.vc-fraga {
    border-radius: var(--vc-radius-sm);
    background: var(--color-surface-3);
    transition: background-color 180ms var(--vc-ease);
}
.vc-fraga[hidden] { display: none; }
.vc-fraga:hover { background: var(--color-secondary-soft); }
.vc-fraga[open] { background: var(--color-surface-2); }

.vc-fraga__topp {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.125rem 3.5rem 1.125rem 1.375rem;
    position: relative;
    list-style: none;
    cursor: pointer;
}
.vc-fraga__topp::-webkit-details-marker { display: none; }
.vc-fraga__topp::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 22px; height: 22px;
    border-radius: 50%;
    background-color: var(--color-surface-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211C1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 240ms var(--vc-ease), background-color 240ms var(--vc-ease);
}
.vc-fraga[open] .vc-fraga__topp::after {
    transform: rotate(180deg);
    background-color: var(--color-secondary);
}

.vc-fraga__amne {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.vc-fraga__q {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--color-ink);
}
.vc-fraga__a {
    margin: 0;
    padding: 0 3.5rem 1.375rem 1.375rem;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--color-ink-muted);
}

.vc-fragor__tomt {
    margin: 1.5rem 0 0;
    padding: 1.5rem;
    border-radius: var(--vc-radius-sm);
    background: var(--color-surface-3);
    text-align: center;
    color: var(--color-ink-muted);
}
.vc-fragor__tomt[hidden] { display: none; }

@media (max-width: 560px) {
    .vc-fraga__topp { padding-right: 3rem; }
    .vc-fraga__a { padding-right: 1.375rem; }
}

/* --- Läs vidare-kort ----------------------------------------------------- */

.vc-lasmer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.5rem, 2.4vw, 2rem);
    border-radius: var(--vc-radius-card);
    background: var(--color-surface-3);
    text-decoration: none;
    color: var(--color-ink);
    transition: background-color 200ms var(--vc-ease);
}
.vc-lasmer:hover { background: var(--color-secondary-soft); }
.vc-lasmer--accent {
    background: var(--color-secondary-soft);
    border: 1.5px solid var(--color-secondary);
}
.vc-lasmer--accent:hover { background: var(--color-secondary); }

.vc-lasmer__body { display: flex; flex-direction: column; gap: 0.4rem; }
.vc-lasmer__titel {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.vc-lasmer__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}
.vc-lasmer__pil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    color: var(--color-ink);
    transition: background-color 200ms var(--vc-ease), border-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-lasmer:hover .vc-lasmer__pil {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* --- Milstolpar ---------------------------------------------------------- */

/* Årtalen låg som en bild på gamla sidan. Här är de text, med en linje över
   varje kort som antyder tidsaxeln utan att låsa layouten till en rad. */
.vc-milstolpar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-milstolpe {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding-top: 1.125rem;
    border-top: 2px solid var(--color-line);
}
.vc-milstolpe:first-child { border-top-color: var(--color-primary); }
.vc-milstolpe__ar {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-primary);
}
.vc-milstolpe__text {
    margin: 0;
    font-size: 0.9688rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

@media (max-width: 900px) { .vc-milstolpar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vc-milstolpar { grid-template-columns: 1fr; } }

/* --- Kampanjkort --------------------------------------------------------- */

.vc-kampanjer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);
}
@media (max-width: 900px) { .vc-kampanjer { grid-template-columns: 1fr; } }

.vc-kampanj {
    display: flex;
    flex-direction: column;
    border-radius: var(--vc-radius-card);
    overflow: hidden;
    background: var(--color-surface-3);
}

/* Två saker krävs för att bildytorna ska bli lika höga i alla kort:
   flex: none, annars sväljer rutan kortets överskottshöjd och kortet med
   minst text får störst bild; och en bild tagen ur flödet, annars trycker
   dess egen höjd upp rutan förbi sin aspect-ratio. Luften runt bilden ligger
   på bilden själv, så object-fit räknar mot padding-boxen. */
.vc-kampanj__media {
    position: relative;
    flex: none;
    background: var(--color-surface-2);
    aspect-ratio: 4 / 3;
}
.vc-kampanj__media img,
.vc-kampanj__media picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    object-fit: contain;
}

/* Rabatten är sidans hela poäng - den ska synas före rubriken, inte
   ligga begravd i brödtexten som på den gamla sidan. */
.vc-kampanj__rabatt {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 1rem;
    border-radius: var(--vc-radius-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.vc-kampanj__rabatt-av {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

.vc-kampanj__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: clamp(1.5rem, 2.4vw, 2rem);
}
.vc-kampanj__ingress {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.vc-kampanj__fakta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.875rem;
}
.vc-kampanj__fakta dt {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    padding-top: 0.15rem;
}
.vc-kampanj__fakta dd { margin: 0; color: var(--color-ink); }

.vc-kampanj__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
}

/* --- Tomt läge ----------------------------------------------------------- */

/* Att sektionen finns kvar men är tom är ett besked i sig: lagret växlar.
   Bättre än att dölja den och lämna menyns ankare hängande. */
.vc-tomt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--vc-radius-card);
    background: var(--color-surface-3);
}
.vc-tomt__titel {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}
.vc-tomt__text {
    margin: 0 0 0.75rem;
    max-width: 46ch;
    color: var(--color-ink-muted);
}

/* --- Kundlogotyper ------------------------------------------------------ */

.vc-kunder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Bricka bakom varje logotyp, så de får en gemensam ram trots att de är
   andras varumärken i olika format. Logotypernas egen vita botten är
   bortnycklad, därför kan brickan ha papper-ytan utan att det syns en
   ljusare fyrkant inuti den. */
.vc-kunder li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 9rem;
    height: 5.25rem;
    padding: 0 clamp(1.25rem, 2.4vw, 2rem);
    border-radius: var(--vc-radius-sm);
    background: var(--color-surface-3);
}
/* Både höjd och bredd begränsas. Med bara max-height blir ett brett ordmärke
   fem gånger så stort som ett kvadratiskt emblem trots samma höjd; taket på
   bredden jämnar ut den optiska vikten. */
.vc-kunder img {
    height: auto;
    width: auto;
    max-height: 2.75rem;
    max-width: 9rem;
}

@media (max-width: 620px) {
    .vc-kunder li { min-width: 7rem; height: 4.5rem; padding: 0 0.875rem; }
    .vc-kunder img { max-height: 2.25rem; max-width: 7rem; }
}

/* --- Fördelar som numrerade rutor (branschsidorna) ----------------------- */

.vc-fordelar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-fordelar__post {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: clamp(1.5rem, 2.4vw, 2rem);
    border-radius: var(--vc-radius-card);
    background: var(--color-dark-2);
}
/* Siffran ordnar läsningen, den rangordnar inte fördelarna - därför dold
   för skärmläsare. */
.vc-fordelar__no {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-secondary);
}
.vc-fordelar__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-on-dark);
}

@media (max-width: 980px) { .vc-fordelar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vc-fordelar { grid-template-columns: 1fr; } }

/* --- Valguide: behov till vänster, rekommendation till höger ------------- */

.vc-guide {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
}
.vc-guide__rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin: 0;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-line);
}
.vc-guide__behov { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.vc-guide__titel {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}
.vc-guide__text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
}
.vc-guide__svar {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.55rem 1.15rem;
    border-radius: var(--vc-pill);
    border: 0;
    background: var(--color-surface-2);
    font-size: 0.9063rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color 200ms var(--vc-ease), border-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-guide__svar:hover {
    background: var(--color-primary);
    color: #fff;
}
.vc-guide__svar svg { transition: transform 220ms var(--vc-ease); }
.vc-guide__svar:hover svg { transform: translateX(3px); }

@media (max-width: 620px) {
    .vc-guide__rad { flex-direction: column; align-items: flex-start; }
}

/* --- Vanliga frågor ----------------------------------------------------- */

.vc-faq {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
@media (max-width: 900px) { .vc-faq { grid-template-columns: 1fr; } }

.vc-faq__aside { display: flex; flex-direction: column; gap: 1rem; }
.vc-faq__phone {
    align-self: flex-start;
    margin-top: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.vc-faq__phone:hover { text-decoration: underline; }

.vc-faq__list { border-top: 1px solid var(--color-line); }

/* <details> ger accordion utan skript: fungerar även med JS avstängt och
   är sökbar med webbläsarens egen sidsökning när den är öppen. */
.vc-faq__item {
    border-bottom: 1px solid var(--color-line);
}
.vc-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    list-style: none;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.4;
    color: var(--color-ink);
}
.vc-faq__q::-webkit-details-marker { display: none; }
.vc-faq__q::after {
    content: '';
    flex: none;
    width: 22px; height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background-color: var(--color-surface-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211C1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 240ms var(--vc-ease), background-color 240ms var(--vc-ease);
}
.vc-faq__item[open] .vc-faq__q::after {
    transform: rotate(180deg);
    background-color: var(--color-secondary);
}
.vc-faq__a {
    margin: 0;
    padding: 0 3.5rem 1.5rem 0;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--color-ink-muted);
}
@media (max-width: 560px) {
    .vc-faq__a { padding-right: 0; }
}

/* --- Avslutande uppmaning ----------------------------------------------- */

.vc-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.vc-cta > div:first-child { display: flex; flex-direction: column; gap: 0.75rem; max-width: 42rem; }
.vc-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; min-width: 0; }
.vc-cta > div:first-child { min-width: 0; }

/* Inboxad variant: samma mörka yta, men som ett kort inne i en ljus sektion
   i stället för ett band tvärs över sidan. Färgerna sätts här eftersom
   .vc-section--dark-reglerna inte gäller i en ljus sektion. */
.vc-cta--box {
    background: var(--color-dark);
    color: var(--color-on-dark);
    border-radius: var(--vc-radius-card);
    padding: clamp(2rem, 4vw, 3.5rem);
}
.vc-cta--box .vc-lead { color: var(--color-on-dark-muted); }

/* Boxens padding äter 112px av raden: texten på sin naturliga bredd plus
   knapparna landade två pixlar över och bröt till ny rad. Textblocket får
   därför krympa medan knapparna behåller sin bredd.

   Bara på desktop: i mobilbredd gjorde flex-basis 22rem plus knappar som
   vägrade krympa boxen bredare än skärmen, så hela sidan gick att dra i
   sidled. Där ska raden i stället brytas fritt. */
@media (min-width: 861px) {
    .vc-cta--box > div:first-child,
    .vc-cta--gul > div:first-child { flex: 1 1 22rem; max-width: 40rem; }
    .vc-cta--box .vc-cta__actions,
    .vc-cta--gul .vc-cta__actions { flex: 0 0 auto; }
}

/* Gul boxvariant. Knyter an till accentkortet "Kundanpassad ultraljudstvätt"
   på kategorisidan - båda leder till /bygg-din-egen-tvatt, så de delar färg. */
.vc-cta--gul {
    background: var(--color-secondary-soft);
    border: 1.5px solid var(--color-secondary);
    border-radius: var(--vc-radius-card);
    padding: clamp(2rem, 4vw, 3.5rem);
}


/* =====================================================================
   11. Rörelse
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* =====================================================================
   12. Detaljer: <picture>-wrapper + edit-mode
   ===================================================================== */

/* editable_image() kan rendera <picture> när WebP-varianter finns */
.vc-hero__bg picture,
.vc-phero__bg picture,
.vc-card__media picture,
.vc-panel__media picture,
.vc-prod__media picture,
.vc-prodhero__media picture,
.vc-split__media picture,
.vc-tile__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* I CMS:ets edit-läge får de utsträckta länkarna inte ligga över texten —
   annars går rubriker och bilder inte att klicka på för redigering. */
body.cms-edit-mode .vc-card__more::after { content: none; }
body.cms-edit-mode .vc-prod__more::after { content: none; }
body.cms-edit-mode .vc-tile__link { display: none; }

/* ==========================================================================
   Sök på sajten (/sok)
   Sökfältet lånar formen från FAQ-sökningen men är större, eftersom det är
   sidans enda uppgift. Resultaten är hela klickytor: sektion, rubrik, snutt
   med markerad träff och sökvägen längst ned.
   ========================================================================== */

.vc-sokhero { padding-bottom: 2.5rem; }
.vc-sokhero__rubrik { margin: 0 0 1.75rem; }

.vc-sokfalt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 44rem;
}
.vc-sokfalt__etikett {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.vc-sokfalt__ikon {
    position: absolute;
    left: 1.25rem;
    top: 1.99rem;
    transform: translateY(-50%);
    display: flex;
    color: var(--color-ink-muted);
    pointer-events: none;
    z-index: 1;
}
.vc-sokfalt__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.05rem 1.25rem 1.05rem 3.35rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--vc-pill);
    background: var(--color-surface-2);
    font-family: inherit;
    font-size: 1.0625rem;
    color: var(--color-ink);
    transition: border-color 200ms var(--vc-ease);
}
.vc-sokfalt__input::placeholder { color: var(--color-ink-muted); }
.vc-sokfalt__input:focus { outline: none; border-color: var(--color-primary); }
.vc-sokfalt__input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Kryss-knappen i Safari/Chrome krockar med den rundade formen. */
.vc-sokfalt__input::-webkit-search-cancel-button { margin-right: 0.25rem; }

.vc-sokfalt__knapp {
    flex: 0 0 auto;
    padding: 1.05rem 1.75rem;
    border: none;
    border-radius: var(--vc-pill);
    background: var(--color-primary);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms var(--vc-ease);
}
.vc-sokfalt__knapp:hover { background: var(--color-primary-dark, #7d1522); }

/* Genvägar under fältet */
.vc-sokgenvag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.vc-sokgenvag__rubrik {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-right: 0.25rem;
}
.vc-sokgenvag__lank {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--vc-pill);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: border-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-sokgenvag__lank:hover { border-color: var(--color-line-strong); color: var(--color-ink); }

/* Resultatlistan */
.vc-sokresultat { max-width: 52rem; }
.vc-sokresultat__antal {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-ink-muted);
}
.vc-sokresultat__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vc-traff__lank {
    display: block;
    padding: 1.4rem 1.6rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--vc-radius-card);
    background: var(--color-surface-3);
    text-decoration: none;
    transition: border-color 200ms var(--vc-ease), transform 200ms var(--vc-ease);
}
.vc-traff__lank:hover {
    border-color: var(--color-line-strong);
    transform: translateY(-2px);
}
.vc-traff__lank:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

.vc-traff__sektion {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.vc-traff__titel {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-ink);
}
.vc-traff__snutt {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}
.vc-traff__snutt mark {
    background: var(--color-secondary);
    color: var(--color-ink);
    padding: 0 0.15em;
    border-radius: 0.2em;
}
.vc-traff__vag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink-muted);
}
.vc-traff__lank:hover .vc-traff__vag { color: var(--color-primary); }
.vc-traff__lank:hover .vc-arrow { transform: translateX(3px); }

/* Tomt läge: för kort sökning eller inga träffar */
.vc-soktomt {
    padding: 2.75rem 2rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--vc-radius-card);
    background: var(--color-surface-3);
}
.vc-soktomt__rubrik {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-ink);
}
.vc-soktomt__text {
    margin: 0.6rem 0 0;
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-ink-muted);
}
.vc-sokgenvag--tomt { margin-top: 1.5rem; }
.vc-soktomt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

@media (max-width: 640px) {
    .vc-sokfalt { flex-wrap: wrap; }
    .vc-sokfalt__input { flex: 1 1 100%; font-size: 1rem; }
    .vc-sokfalt__knapp { flex: 1 1 100%; }
    .vc-traff__lank { padding: 1.2rem 1.25rem; }
    .vc-traff__titel { font-size: 1.125rem; }
    .vc-soktomt { padding: 2rem 1.35rem; }
}

/* ==========================================================================
   Sökpopupen
   Öppnas av förstoringsglaset i headern. Panelen ligger en bit ned från
   toppen i stället för mitt på skärmen, så resultatlistan får växa nedåt
   utan att hoppa när antalet träffar ändras.
   ========================================================================== */

.vc-sokmodal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 8vh, 6rem) var(--vc-gutter) var(--vc-gutter);
}
.vc-sokmodal[hidden] { display: none; }

.vc-sokmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 17, 0.62);
    opacity: 0;
    transition: opacity 200ms var(--vc-ease);
}
.vc-sokmodal.is-oppen .vc-sokmodal__backdrop { opacity: 1; }

.vc-sokmodal__panel {
    position: relative;
    width: min(42rem, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-2);
    border-radius: var(--vc-radius-card);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(20, 18, 17, 0.22);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 200ms var(--vc-ease), transform 200ms var(--vc-ease);
}
.vc-sokmodal.is-oppen .vc-sokmodal__panel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .vc-sokmodal__backdrop, .vc-sokmodal__panel { transition: none; }
}

/* Sökraden */
.vc-sokmodal__topp {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    border-bottom: 1px solid var(--color-line);
}
.vc-sokmodal__ikon {
    position: absolute;
    left: 1.4rem;
    display: flex;
    color: var(--color-ink-muted);
    pointer-events: none;
}
.vc-sokmodal__falt {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.35rem 1rem 1.35rem 3.6rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.0625rem;
    color: var(--color-ink);
}
.vc-sokmodal__falt::placeholder { color: var(--color-ink-muted); }
.vc-sokmodal__falt:focus { outline: none; }
.vc-sokmodal__falt::-webkit-search-cancel-button { display: none; }

.vc-sokmodal__stang {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-right: 0.9rem;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-sokmodal__stang:hover { background: var(--color-surface-3); color: var(--color-ink); }

/* Resultatytan */
.vc-sokmodal__kropp {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem;
    min-height: 6rem;
}
.vc-sokmodal__info {
    margin: 0;
    padding: 1.6rem 1rem 1.9rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

.vc-sokmodal__lista { list-style: none; margin: 0; padding: 0; }

.vc-soktraff {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: var(--vc-radius-sm);
    text-decoration: none;
    transition: background-color 150ms var(--vc-ease);
}
.vc-soktraff:hover, .vc-soktraff.is-vald { background: var(--color-surface-3); }
.vc-soktraff:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.vc-soktraff__sektion {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.vc-soktraff__titel {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-ink);
}
.vc-soktraff__snutt {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
}
.vc-soktraff__snutt mark {
    background: var(--color-secondary);
    color: var(--color-ink);
    padding: 0 0.15em;
    border-radius: 0.2em;
}

.vc-sokmodal__alla {
    display: block;
    margin: 0.4rem 0.4rem 0.2rem;
    padding: 0.8rem 0.6rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--vc-radius-sm);
}
.vc-sokmodal__alla:hover, .vc-sokmodal__alla.is-vald { background: var(--color-surface-3); }

/* Utgångsläget */
.vc-sokmodal__start { padding: 0.6rem 1rem 1rem; }
.vc-sokmodal__rubrik {
    margin: 0 0 0.85rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.vc-sokmodal__snabb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vc-sokmodal__snabb a {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--vc-pill);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: border-color 200ms var(--vc-ease), color 200ms var(--vc-ease);
}
.vc-sokmodal__snabb a:hover, .vc-sokmodal__snabb a.is-vald {
    border-color: var(--color-line-strong);
    color: var(--color-ink);
}

@media (max-width: 640px) {
    .vc-sokmodal { padding: 0; align-items: stretch; }
    .vc-sokmodal__panel {
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        transform: none;
    }
    .vc-sokmodal__falt { padding-left: 3.4rem; font-size: 1rem; }
}