/* PC Builder — layout & komponenter.
   Färg-/yt-tokens (--ink/--bg/--line/--green m.fl.) kommer från temats
   semantiska lager i style.css :root (ovanpå ACSS). Här definieras BARA det
   komponentspecifika: SVG-illustrationens --art-*, skuggor och easing. */

.pcb {
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px rgba(0,0,0,.45);

  --art-bg-1: #1a1a1a;
  --art-bg-2: #0c0c0c;
  --art-case-top: #232323;
  --art-case-bot: #161616;
  --art-case-stroke: #3a3a3a;
  --art-glass-1: #2e2e2e;
  --art-glass-2: #1c1c1c;
  --art-glass-stroke: #4a4a4a;
  --art-mesh: #6a6a6a;
  --art-mobo: #1a3a1a;
  --art-mobo-stroke: #2a5a2a;
  --art-cpu: #2a2a2a;
  --art-cpu-stroke: #5a5a5a;
  --art-cooler: #2a2a2a;
  --art-cooler-stroke: #8a8a8a;
  --art-ram: #2a2a2a;
  --art-ram-stroke: #6a6a6a;
  --art-ssd: #2a2a2a;
  --art-ssd-stroke: #6a6a6a;
  --art-gpu: #1f1f1f;
  --art-gpu-stroke: #6a6a6a;
  --art-psu: #1a1a1a;
  --art-psu-stroke: #6a6a6a;
  --art-shadow: #000000;

  --ease: cubic-bezier(.2, .7, .2, 1);

  background: transparent;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

/* PROGRESS */
.pcb-progress { margin: 0 0 28px; }
.pcb-progress-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pcb-progress-meta .progress-current { color: var(--ink); font-weight: 600; white-space: nowrap; }
.pcb-progress-track { position: relative; height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pcb-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--green); border-radius: 999px; transition: width .5s var(--ease); box-shadow: 0 0 10px rgba(var(--primary-rgb), .5), 0 0 3px rgba(var(--primary-rgb), .8); }
/* Stegraden som chips. Tidigare var varje steg bara en textetikett med en grön
   topplinje — aktivt steg skilde sig då enbart genom något ljusare text, och i
   praktiken gick det inte att se var man var. Nu bär aktivt steg en fylld grön
   platta, precis som den framhävning resten av systemet använder för "valt".

   Grid → flex: etiketterna är olika långa ("CPU" mot "SKJERMKORT"), och lika
   breda celler gjorde korta chips onödigt luftiga. Inline-style sätter fortfarande
   grid-template-columns på elementet, men den ignoreras när display är flex.
   wrap så nio steg aldrig kan spilla ut ur containern. */
.pcb-progress-ticks { display: flex; flex-wrap: wrap; margin-top: 12px; gap: 6px; }

.pcb-tick {
  padding: 7px 12px;
  background: var(--bg-sunken, rgba(255, 255, 255, .04));
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.pcb-tick:hover { background: color-mix(in oklab, var(--green) 8%, var(--bg-sunken, transparent)); color: var(--ink); }
.pcb-tick:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }

/* Klarat steg: bockar av utan att ta uppmärksamhet från det aktiva.
   Bocken har reserverad plats på ALLA steg och syns bara när steget är klart.
   Lades den till först vid is-done växte knappen och hela raden hoppade. */
.pcb-tick::after { content: "\2713"; display: inline-block; width: 1em; margin-left: .3em; text-align: left; font-weight: 700; color: var(--green-ink); visibility: hidden; }
.pcb-tick.is-done { color: var(--ink-2); }
.pcb-tick.is-done::after { visibility: visible; }

/* Aktivt steg: systemets starkaste "här är du". Mörkt bläck på grön fyllning —
   aldrig ljus text, grönt bär inte text (12,6:1 med --on-green). */
.pcb-tick.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
}
.pcb-tick.is-active::after { visibility: hidden; }
.pcb-tick.is-active:hover { background: var(--green); color: var(--on-green); }

/* MAIN GRID */
/* 160px botten behövdes när docken var en fixed fot över sidan. Panelen ligger
   nu i kolumnen på desktop; mobil-brytpunkterna sätter tillbaka luften. */
.pcb-config { margin: 0 0 64px; display: grid; grid-template-columns: minmax(340px, 5fr) 9fr; gap: 48px; align-items: start; }
/* 5:9 — ~455px vänsterkolumn på en 1440-skärm, lite bredare än 4:8 (~425px)
   nu när högerkolumnen aldrig behöver rymma tre kort. Ett försök med en fast
   300–380px-kolumn blev för trångt (23 sep 2026). */

/* [sticky-steg] — avsnittet tas bort i deploypaket som inte ska ha det */
/* Stegraden följer med vid scroll (desktop). Raden "STEG 01 – KABINETT · 11%"
   glider in under headern (top = headerhöjd − radens 28px), så det som står
   kvar är förloppsstapeln + stegknapparna, ~62px. Byggkolumnen (också sticky)
   flyttas ned lika mycket. Under 980px har progress en egen sticky-variant.
   --pcb-hdr-h mäts av JS (syncDockMetrics); 94px är headerns höjd i dag. */
@media (min-width: 981px) {
  .pcb { --pcb-bar-h: 62px; }
  .pcb-progress {
    position: sticky;
    top: calc(var(--pcb-hdr-h, 94px) - 28px);
    z-index: 40;
    margin-bottom: 16px;
    padding-bottom: 12px;
    background: color-mix(in srgb, var(--bg-page) 90%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
/* [/sticky-steg] */

/* BUILD ART */
.pcb-build-col {
  position: sticky;
  /* Under headern + den sticky stegraden (se ovan), 12px luft. */
  top: calc(var(--pcb-hdr-h, 94px) + var(--pcb-bar-h, 18px) + 12px);
  /* Kolumnen får aldrig bli högre än skärmen (24px andrum mot nederkanten).
     Innehållet delas i två: .pcb-build-scroll scrollar internt, prispanelen
     står kvar i botten så total och köpknapp alltid är synliga. */
  max-height: calc(100vh - var(--pcb-hdr-h, 94px) - var(--pcb-bar-h, 18px) - 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pcb-build-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Flex-kolumn: när kolumnen når skärmens höjd är det renderingen som krymper
     (ner till 120px), inte listan som klipps. Först därefter scrollar den. */
  display: flex;
  flex-direction: column;
  /* Scrollbaren ärvs från den globala regeln i style.css. Hade tidigare en
     egen, svagare tumme (--line); nu samma som resten av sajten. */
}
/* 360px när det finns plats; krymper med skärmhöjden (se .pcb-build-scroll) så
   att konfigurationen och trygghetsraderna under alltid syns hela. */
.pcb-build-stage { position: relative; background: linear-gradient(180deg, var(--art-bg-1), var(--art-bg-2)); border-radius: var(--radius-xxl); border: 1px solid var(--line); padding: 12px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; }
.pcb-build-meta { flex: 0 0 auto; }

/* ── Byggvyn (build_art_svg + updateArt i JS) ────────────────────────────
   Datorn är svart i båda färglägena (se light-mode.css §8), så ritningens
   färger är egna --art-* och vänder inte. Bara scenen runt den gör det. */
.pcb {
  --art-chamber: #0f0f0f;
  --art-case-line: #262626;
  --art-part: #1c1c1c;
  --art-part-2: #2a2a2a;
  --art-part-stroke: #454545;
  --art-pcb: #15181a;
  --art-pcb-line: #343b3e;
  --art-sink: #262b2d;
  --art-slot: #0c0e0f;
  --art-trace: #22302a;
  --art-fan: #121212;
  --art-blade: #2c2c2c;
  --art-fan-ring: #454545;
  --art-cable: #2f2f2f;
  --art-label: #7a7a7a;
  --art-label-strong: #d9d9d9;
  --art-warn: #f5b400;
  --art-bad: #ff5a5a;
}
.pcb-build-art { width: 100%; }
/* Datorn fyller scenens bredd och scenen får ritningens höjd (480:440) — ingen
   tom yta runt datorn. Blir kolumnen för låg scrollar .pcb-build-scroll; under
   700px höjd döljs scenen helt (regeln nedan). Nålar och etikett placeras i px
   av JS (artToFrame). */
.pcb-art-frame { position: relative; width: 100%; aspect-ratio: 480 / 440; }
.pcb-build-svg { display: block; width: 100%; height: 100%; }

/* Delarnas tillstånd: aktiv del full styrka + grön kontur, resten tonas ner.
   Oppsummeringen (is-complete) visar allt. */
.pcb-part { transition: opacity .35s var(--ease); opacity: .5; }
/* Chassit tonas aldrig: genomskinligt chassi blir grått mot den ljusa scenen. */
.pcb-part[data-pcb-part="kabinett"] { opacity: 1; }
.pcb-part.is-custom { opacity: .68; }
.pcb-part.is-active { opacity: 1; }
.pcb-part .art-ol { transition: stroke .3s var(--ease); }
.pcb-part.is-active .art-ol { stroke: var(--green); }
/* CPU-steget: pumpen ligger ovanpå sockeln — tona bort kylaren så CPU:n syns. */
.pcb-build-svg:has([data-pcb-part="cpu"].is-active) [data-pcb-part="kjoler"] { opacity: .15; }
.pcb-build-art.is-complete .pcb-part { opacity: 1; }

/* Belysning ur produktdatan (pa_belysning): RGB på RAM, ARGB på AiO. */
.art-rgb-glow, .art-argb-glow { opacity: 0; transition: opacity .35s var(--ease); }
.is-rgb .art-rgb { fill: var(--green); }
.is-rgb .art-rgb-glow { opacity: .25; }
.is-argb .art-argb-ring { stroke: var(--green); }
.is-argb .art-argb-glow { opacity: .14; }
.is-argb .art-fan-ring { stroke: rgba(var(--primary-rgb), .55); }

.art-halo { fill: none; stroke: var(--green); stroke-width: 1.5; opacity: .9; pointer-events: none; }
.art-halo--soft { stroke-width: 8; opacity: .12; }
.art-halo--inner { opacity: 1; }
.art-psu-bar { fill: var(--green); }
.art-dim { color: var(--green); }
.art-dim[data-state="tight"] { color: var(--art-warn); }
.art-dim[data-state="bad"] { color: var(--art-bad); }

/* Nålar: numret = raden i konfigurationslistan. Ligger på den (alltid mörka)
   datorn, därför fasta mörka ytor i stället för temats tokens. */
.pcb-art-pin { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1.5px solid var(--green); background: #0a0a0a; color: var(--green); font-family: "Chakra Petch", sans-serif; font-size: 10px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.pcb-art-pin::after { content: ""; position: absolute; inset: -10px; }   /* träffyta 44px */
.pcb-art-pin[hidden] { display: none; }
.pcb-art-pin.is-active { background: var(--green); color: #1e2e05; }
.pcb-art-pin:hover { background: var(--green); color: #1e2e05; }
.pcb-art-pin:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Etikett vid aktiv nål (stegläge). Ligger på den mörka datorn i båda
   färglägena, därför fasta färger. */
.pcb-art-callout { position: absolute; z-index: 2; left: 0; top: 0; width: 216px; box-sizing: border-box; padding: 10px 12px; background: rgba(10, 10, 10, .92); border: 1px solid rgba(158, 230, 39, .45); border-radius: var(--radius-m); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.pcb-art-callout[hidden] { display: none; }
.pcb-art-callout-kicker { font-family: "Chakra Petch", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9ee627; }
/* Avskiljaren i CSS: en fristående " · "-textnod mellan två spans kom ut som
   två ersättningstecken (TranslatePress tolkar den som en egen sträng). */
.pcb-art-callout-step::before { content: "·"; margin: 0 .5em; }
.pcb-art-callout-name { font-family: "Chakra Petch", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; color: #f2f2f2; }
.pcb-art-callout-spec { font-size: 12px; color: #a6a6a6; }
.pcb-art-callout-spec:empty { display: none; }

/* Faktarutor: Strøm (krav mot effekt) och Plass (kortlängd mot kabinett). */
.pcb-build-facts { flex: 0 0 auto; margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Bara Plass när strömregeln är av (GAMEIFY_PSU_RULE) — då fyller den raden. */
.pcb-build-facts:has(> .pcb-fact:only-child) { grid-template-columns: 1fr; }
.pcb-fact { --fact: var(--green-ink); min-width: 0; padding: 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 6px; }
.pcb-fact[data-state="tight"] { --fact: var(--stock-low); }
.pcb-fact[data-state="bad"] { --fact: var(--stock-out); }
.pcb-fact[data-state="unknown"] { --fact: var(--ink-4); }
.pcb-fact-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pcb-fact-label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pcb-fact-status { font-size: 11.5px; font-weight: 600; color: var(--fact); white-space: nowrap; }
.pcb-fact-value { font-family: "Chakra Petch", sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pcb-fact-value > span:not([data-no-translation]) { font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.pcb-fact-bar { position: relative; height: 4px; border-radius: 2px; background: var(--line); }
.pcb-fact-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--fact); transition: width .4s var(--ease); }
.pcb-fact-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.pcb-fact-mark[hidden] { display: none; }
.pcb-fact-note { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .pcb-part, .pcb-part .art-ol, .art-rgb-glow, .art-argb-glow, .pcb-fact-fill { transition: none; }
}

/* Konfigurationen i en egen ram, som prisrutan hade förut — utan ram flöt listan
   och trygghetsraderna fritt under renderingen. */
.pcb-build-meta { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 18px 14px 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-xxl); }
.pcb-build-meta-head { padding: 0 8px; }
.pcb-build-meta-name { font-family: "Chakra Petch", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: -0.005em; }
.pcb-build-meta-eyebrow { font-size: 12px; letter-spacing: .12em; font-weight: 500; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
/* Låga skärmar (laptop ~660px): tätare rader och utan produktnamnsrubriken,
   så renderingen inte trycks ner till sitt minsta. */
@media (max-height: 760px) and (min-width: 981px) {
  .pcb-chip { padding-block: 6px; }
  .pcb-build-meta { gap: 8px; padding-top: 14px; }
  .pcb-build-meta-name { display: none; }
  .pcb-build-stage { min-height: 100px; }
  .pcb-fact-note { display: none; }
}
/* Riktigt låga skärmar (≤700px): renderingen skulle bli ~80px hög och ändå
   trycka ut sista raden — listan är viktigare än bilden. */
@media (max-height: 700px) and (min-width: 981px) {
  .pcb-build-stage { display: none; }
  .pcb-build-meta { margin-top: 0; }
}
/* Numrerad konfig-lista: en del per RAD — nummer, kategori, produkt. Namnet
   ellipsas (hela namnet står kvar i DOM:en, så TranslatePress matchar fortfarande
   rätt rad) och hela listan ryms utan att kolumnen behöver scrolla. */
.pcb-build-chips { display: flex; flex-direction: column; }
.pcb-chip { display: grid; grid-template-columns: 22px 86px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; padding: 9px 8px 9px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; color: var(--ink-3); text-align: left; cursor: pointer; transition: background .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease); }
.pcb-chip-body { display: contents; }
.pcb-chip-up { align-self: center; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); white-space: nowrap; }
.pcb-chip-up[hidden] { display: none; }
.pcb-chip:last-child { border-bottom: 0; }
.pcb-chip:hover { background: color-mix(in oklab, var(--green) 4%, transparent); }
.pcb-chip-num { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-4); }
.pcb-chip-cat { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcb-chip strong { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.35; color: var(--ink); letter-spacing: -0.005em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Raka hörn: med radie böjde den gröna linjen (inset-skuggan) av i topp och botten.
   14px vänsterpadding ger luft mellan linjen och numret, även på ej aktiva rader
   så att texten inte hoppar när markeringen flyttas. */
.pcb-chip.is-active { background: color-mix(in oklab, var(--green) 6%, transparent); box-shadow: inset 2px 0 0 var(--green-ink); }
.pcb-chip.is-active .pcb-chip-num { color: var(--green-ink); }
/* Default-steg (ej aktivt valda av användaren) tonas ner så de valda sticker ut */
.pcb-chip:not(.is-chosen):not(.is-active) { opacity: .62; }

/* STEP VIEW */
.pcb-step-view { display: flex; flex-direction: column; gap: 28px; align-items: stretch; text-align: left; animation: pcbStepIn .45s var(--ease); }
@keyframes pcbStepIn { from { opacity: 0; transform: translateX(-20px) translateY(4px); } to { opacity: 1; transform: translateX(0) translateY(0); } }
/* Bakåt kommer in från HÖGER — motsatt väg mot framåt. "If something
   disappears one way, we expect it to emerge from where it came": kommer allt
   in från vänster oavsett riktning säger rörelsen att man går framåt även när
   man backar. goToStep() i pc-builder.js stämplar riktningen på wrappern. */
[data-pcb-dir="back"] .pcb-step-view { animation-name: pcbStepInBack; }
@keyframes pcbStepInBack { from { opacity: 0; transform: translateX(20px) translateY(4px); } to { opacity: 1; transform: translateX(0) translateY(0); } }

.pcb-step-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.pcb-step-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pcb-step-eyebrow .eyebrow-num { color: var(--ink); font-weight: 600; }
.pcb-step-eyebrow .eyebrow-dot { color: var(--green-deep); }
.pcb-step-title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; margin: 0; text-transform: uppercase; }
.pcb-step-desc { margin: 0; font-size: 15px; color: var(--ink-3); max-width: 56ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   VY-VÄXLARE · kort ⇄ lista
   Läget sitter som data-pcb-view på .pcb-roten, inte på rutnätet. Skälet är
   att renderStep() i JS skriver över hela .pcb-step-view vid varje stegbyte —
   en klass på rutnätet hade försvunnit direkt. Roten står kvar, så CSS:en
   nedan behöver ingen hjälp av JS efter att läget väl är satt.
   ═══════════════════════════════════════════════════════════════════════════ */

.pcb-opt-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* .pcb-step-view har gap 28px; raden hör ihop med rutnätet under, inte med
     rubriken över — dra ihop avståndet nedåt. */
  margin-bottom: -14px;
}
.pcb-opt-count {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pcb-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
.pcb-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.pcb-view-btn svg { flex: none; }
.pcb-view-btn:hover { color: var(--ink); }
.pcb-view-btn[aria-pressed="true"] {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.pcb-view-btn:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
/* Etiketten är redundant bredvid ikonen när det är trångt */
@media (max-width: 400px) {
  .pcb-view-btn-label { display: none; }
  .pcb-view-btn { padding: 0 10px; }
}

/* OPTION GRID — alltid två kort per rad (en på mobil). Tre per rad på breda
   skärmar provades 23 sep 2026 och togs bort: namnen bröts i tre rader i ett
   kort och en i grannen, så raden såg ojämn ut.
   Varje kort spänner över tre rader i rutnätet (namn, bild+specs, prisfot) och
   ärver dem via subgrid. Namnraden blir då lika hög i alla kort i samma rad —
   bilderna börjar på samma höjd även när ett namn bryts och grannens inte gör
   det, och prisfötterna hamnar på samma linje. */
.pcb-opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pcb[data-pcb-view="card"] .pcb-opt-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

/* ── LISTLÄGE ───────────────────────────────────────────────────────────────
   Samma markup som kortläget, omdisponerad. display:contents löser upp de tre
   wrapparna (-card-top, -row, -card-foot) så att deras barn blir grid-items i
   kortets eget rutnät — annars går bilden inte att flytta ut ur .pcb-opt-row.
   Raden blir ~68px hög mot kortlägets ~500px på mobil. */
.pcb[data-pcb-view="list"] .pcb-opt-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
/* Fyra kolumner på ~295px är trångt, så priset och info-knappen DELAR kolumn
   (de står på var sin rad) och radion spänner över båda raderna längst ut.
   Kolumn 3 blir då så bred som det bredaste av "Inkludert" och ikonen. */
.pcb[data-pcb-view="list"] .pcb-opt-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "img namn pris radio"
    "img spec info radio";
  align-items: center;
  /* Utan align-content sträcks de två raderna ut över min-height och namnet
     hamnar i övre halvan, specs i nedre — ~30px isär på desktop. Centrerat
     hålls de ihop som ett textblock mitt i raden. */
  align-content: center;
  gap: 2px 10px;
  padding: 10px;
  border-radius: var(--radius-m);
  /* Fast höjd i stället för att låta innehållet bestämma: annars blir raden
     med tvåradigt namn högre än grannarna och listan tappar sin rytm. Ger
     samtidigt miniatyren luft — poängen med att ha bild i listan alls. */
  min-height: 88px;
}
/* Alla tre wrapparna löses upp — barnen placeras var för sig i rutnätet. */
.pcb[data-pcb-view="list"] .pcb-opt-card-top,
.pcb[data-pcb-view="list"] .pcb-opt-row,
.pcb[data-pcb-view="list"] .pcb-opt-card-foot { display: contents; }

/* :not() behövs — .pcb-opt-meta är också en div och fångades annars här,
   med högre specificitet än sin egen regel nedan. */
/* Miniatyren spänner över båda raderna och delar sin höjd jämnt mellan dem,
   så varje rad blir högre än sin text. Namnet lutar därför mot sin rads
   nederkant och specs mot sin överkant — annars hamnar luften mellan dem. */
.pcb[data-pcb-view="list"] .pcb-opt-card-top > div:not(.pcb-opt-meta) { grid-area: namn; min-width: 0; align-self: end; }
.pcb[data-pcb-view="list"] .pcb-opt-meta  { grid-area: info; align-items: center; justify-self: end; }
/* Miniatyren är hela poängen med att ha bild i listan — för liten och den
   säger inget. 56px på mobil, 64px när det finns plats. */
.pcb[data-pcb-view="list"] .pcb-opt-image { grid-area: img; width: 56px; padding: 4px; border-radius: var(--radius-s); align-self: center; }
.pcb[data-pcb-view="list"] .pcb-opt-specs { grid-area: spec; align-self: start; }

.pcb[data-pcb-view="list"] .pcb-opt-pricebox {
  grid-area: pris;
  justify-self: end;
  align-items: flex-end;
  text-align: right;
}
.pcb[data-pcb-view="list"] .pcb-opt-price { font-size: 12.5px; }
/* (0,4,0) — slår listlägets prisstorlekar ovan och i brytpunkten nedan. */
.pcb[data-pcb-view="list"] .pcb-opt-price.is-current { font-size: 10px; padding: 0 8px; gap: 7px; min-height: 22px; }
.pcb[data-pcb-view="list"] .pcb-opt-total { font-size: 11px; }
.pcb[data-pcb-view="list"] .pcb-opt-radio {
  grid-area: radio;
  justify-self: end;
  width: 20px;
  height: 20px;
}
.pcb[data-pcb-view="list"] .pcb-opt-radio-dot { width: 8px; height: 8px; }

/* Badgen ("Inkludert i basisprisen") bryts på två rader i en tät rad och
   säger ändå samma sak som prisetiketten. */
.pcb[data-pcb-view="list"] .pcb-opt-badge,
.pcb[data-pcb-view="list"] .pcb-opt-tagline { display: none; }

.pcb[data-pcb-view="list"] .pcb-opt-name {
  font-size: 14px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Specs på EN rad. Etiketterna ("FORMFAKTOR:") är brus när raden är tät —
   värdena räcker, separerade med punkt. */
.pcb[data-pcb-view="list"] .pcb-opt-specs {
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.3;
  /* Tonar ut sista 24px i stället för att kapa mitt i ett ord — avhugget läser
     då som "det finns mer", inte som ett renderingsfel. */
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.pcb[data-pcb-view="list"] .pcb-opt-spec-k { display: none; }
.pcb[data-pcb-view="list"] .pcb-opt-specs li { white-space: nowrap; }
.pcb[data-pcb-view="list"] .pcb-opt-specs li + li::before {
  content: "·";
  margin: 0 6px;
  color: var(--ink-4);
}

/* Hover-lyftet hör hemma på ett kort, inte på en rad i en lista */
.pcb[data-pcb-view="list"] .pcb-opt-card:hover { transform: none; }

/* ── Listläge på breda vyer ─────────────────────────────────────────────────
   INGEN egen kolumnlayout här, och det är ett medvetet val. Frestelsen är att
   lägga namn | specs | pris på EN rad som en jämförelsetabell. Det kräver
   ~700px radbredd för att specs-kolumnen ska rymma mer än ett par tecken, men
   stegkolumnen är 7/12 av en container som toppar runt 1230px — den når som
   mest ~688px. Tabellayouten blir alltså aldrig läsbar inuti byggarens
   tvåkolumnslayout; specs kokade ner till "E-ATX, /". Tvåradsraden nedan
   använder bredden bättre: namn och specs får hela vänsterhalvan.
   Här höjs bara typografin något när det finns plats. */
@media (min-width: 981px) {
  /* Rejälare rader på desktop. Byggkolumnen till vänster (illustration +
     konfiguration + prisruta) är ungefär tre gånger så hög som en femradig
     lista, så listan lämnade en stor död yta under sig. Höjden styrs av
     miniatyren — 84px gör att man faktiskt ser vilket kabinett det är. */
  /* Här finns bredd nog att lägga ⓘ, pris och radio på EN linje, mitt i raden,
     i stället för prisets och ikonens trappsteg i två rader. Priskolumnen har
     fast minsta bredd: varje rad är sitt eget rutnät, så med auto blev
     "Inkludert" bredare än "+ 91 kr" och ⓘ hoppade i sidled rad för rad. */
  .pcb[data-pcb-view="list"] .pcb-opt-card {
    grid-template-columns: 84px minmax(0, 1fr) auto minmax(76px, auto) auto;
    grid-template-areas:
      "img namn info pris radio"
      "img spec info pris radio";
    padding: 14px 18px;
    min-height: 124px;
    gap: 4px 16px;
  }
  .pcb[data-pcb-view="list"] .pcb-opt-image { width: 84px; padding: 6px; }
  .pcb[data-pcb-view="list"] .pcb-opt-name  { font-size: 15.5px; }
  .pcb[data-pcb-view="list"] .pcb-opt-specs { font-size: 12.5px; }
  .pcb[data-pcb-view="list"] .pcb-opt-price { font-size: 14px; text-align: right; }
  .pcb[data-pcb-view="list"] .pcb-opt-meta  { justify-self: center; }
}

/* I kortläget ligger info-knappen absolut i kortets övre högra hörn. I en rad
   finns inget hörn att lägga den i — då hamnar den ovanpå priset, och
   .pcb-opt-meta blir 0px bred eftersom dess enda barn är ur flödet. */
.pcb[data-pcb-view="list"] .pcb-opt-info {
  position: static;
  width: 28px;
  height: 28px;
}

.pcb-opt-card { text-align: left; display: flex; flex-direction: column; gap: 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-xxl); padding: 24px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); position: relative; overflow: hidden; cursor: pointer; }
.pcb-opt-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; border: 1.5px solid transparent; transition: border-color .25s var(--ease); }
.pcb-opt-card:hover { border-color: var(--ink-4); transform: translateY(-1px); box-shadow: var(--shadow); }
.pcb-opt-card.is-selected { border-color: var(--green-deep); background: color-mix(in oklab, var(--green) 6%, var(--bg-elev)); }
.pcb-opt-card.is-selected::after { border-color: var(--green-ink); }
/* Kortet ÄR valkontrollen och var den enda tryckytan i byggaren utan
   kvittens — alla småknappar runt omkring har en. Feedback hör hemma på
   nedtrycket, inte på släppet, så transition-duration kortas här: 0,2s in i
   ett presstillstånd känns som fördröjning. Ut får den långsammare vägen. */
.pcb-opt-card:active { transform: scale(.99); transition-duration: .06s; }
.pcb[data-pcb-view="list"] .pcb-opt-card:active { transform: scale(.995); }
/* Tryck på ⓘ ska öppna modalen, inte pressa hela kortet. Faller :has() bort i
   en äldre webbläsare tappas bara den här nyansen, inte presstillståndet. */
.pcb-opt-card:has(.pcb-opt-info:active) { transform: none; }

.pcb-opt-card:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }
.pcb-opt-card:focus-visible::after { border-color: var(--green-ink); }

.pcb-opt-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
/* 4:3, inte 1:1 — 256 av 262 produktbilder är exakt 4:3, så en kvadratisk
   platta lade till ~12,5% dött utrymme över och under enbart för formatets
   skull. object-fit: contain ligger kvar, så ingenting beskärs. */
/* min-height: 0 är det som håller formatet: rutan är ett flex-barn i en kolumn,
   och där är minsta höjden annars bildens egen — en kvadratisk eller stående
   produktbild tänjde rutan förbi 4:3, så korten fick olika stora bildytor. */
.pcb-opt-image { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 0; flex-shrink: 0; background: var(--photo-bg); border-radius: var(--radius-xl); border: 1px solid var(--line); padding: 16px; align-self: stretch; overflow: hidden; pointer-events: none; }
/* Bilden ligger absolut över hela rutan och tar rutans padding som egen
   (padding: inherit). height: 100% i flödet räknades i Safari mot rutans
   höjd INKLUSIVE padding — bilden blev 32px för hög, började 16px ner och
   klipptes nertill (kort- och listläget, sep 2026). Mot en absolut
   positionerad bild är procenten alltid rutans egen, så object-fit: contain
   centrerar på riktigt i alla webbläsare. */
.pcb-opt-image img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: inherit; object-fit: contain; display: block; pointer-events: none; }

/* Info-knapp: öppnar produkt-detalj-modal. Resten av kortet väljer produkten. */
.pcb-opt-info {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-3);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.pcb-opt-info:hover { border-color: var(--green-ink); color: var(--green-ink); }
.pcb-opt-info:active { transform: scale(.92); }
.pcb-opt-info:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }

/* Ge plats för info-knappen i kort-headern (så badge/titel inte överlappar) */
.pcb-opt-card-top { padding-right: 44px; }


/* ── Produktdetalj-modal ────────────────────────────────────────── */
/* OBS: modal appendas till body, så pc-builder root-vars inte gäller.
   Fallback-värden inom var() är obligatoriska. */
@keyframes pcbLbIn { from { opacity: 0 } to { opacity: 1 } }
.pcb-pmodal { position: fixed; inset: 0; z-index: 99999; background: rgba(10,10,10,.92); display: flex; align-items: center; justify-content: center; padding: 40px 24px; animation: pcbLbIn .2s ease; cursor: pointer; }

/* Panelen växer ur ⓘ-knappen den öppnades från och krymper tillbaka dit.
   transform-origin sätts av JS i panelens eget koordinatsystem (se
   openProductModal); här styrs bara själva rörelsen.

   scale(.96), inte scale(0): en ruta som veckla ut sig från ingenting läser
   som en effekt, inte som ett fönster som öppnas. 200ms håller den inom
   budget för en yta man öppnar då och då — och exakt samma tal står i
   closeProductModal()s setTimeout. Ändras det ena måste det andra med. */
.pcb-pmodal__panel {
  transform: scale(.96);
  opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 140ms var(--ease-out);
}
.pcb-pmodal.is-in .pcb-pmodal__panel { transform: scale(1); opacity: 1; }
.pcb-pmodal__panel { position: relative; display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 24px; width: 100%; max-width: 880px; max-height: calc(100vh - 80px); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-xxl); padding: 24px; overflow: hidden; cursor: default; }
.pcb-pmodal__close { position: fixed; top: max(16px, env(safe-area-inset-top, 16px)); right: max(16px, env(safe-area-inset-right, 16px)); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.85); color: var(--ink); border: 1.5px solid rgba(255,255,255,.2); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100000; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
.pcb-pmodal__close:active { transform: scale(.92); }
.pcb-pmodal__close:hover { background: rgba(255,255,255,.12); border-color: var(--ink-4); }

/* Vänsterkolumn: bild */
.pcb-pmodal__media { position: relative; aspect-ratio: 4 / 3; background: var(--photo-bg); border-radius: var(--radius-xxl); border: 1px solid var(--line); padding: 16px; overflow: hidden; align-self: start; }
.pcb-pmodal__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Högerkolumn: info — scrollar internt.
   max-height är OBLIGATORISK: som grid-barn växer kolumnen annars förbi
   panelens max-height (gridrader storleksätts efter innehåll, inte efter
   containerns tak) — panelens overflow:hidden klipper då resten och den
   interna scrollen aktiveras aldrig. 128px = modalens 80px + panelens 48px. */
.pcb-pmodal__info { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; max-height: calc(100vh - 128px); overflow-y: auto; padding-right: 10px; }

/* Scrollbaren ärvs från den globala regeln i style.css. */
.pcb-pmodal__title { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.015em; margin: 0 48px 0 0; line-height: 1.2; color: var(--ink); }
.pcb-pmodal__rating { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.pcb-pmodal__rating-stars { display: inline-flex; gap: 2px; color: var(--green-ink); }
.pcb-pmodal__rating-stars svg { width: 14px; height: 14px; }
.pcb-pmodal__rating-link { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.pcb-pmodal__rating-link:hover { color: var(--ink); }
.pcb-pmodal__price { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.pcb-pmodal__section-title { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 4px; font-weight: 600; }

/* Specs-tabell */
.pcb-pmodal__specs { display: flex; flex-direction: column; width: 100%; }
.pcb-pmodal__spec-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
.pcb-pmodal__spec-row:last-child { border-bottom: 0; }
.pcb-pmodal__spec-label { font-size: 12px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pcb-pmodal__spec-value { font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }

/* Beskrivning — expanderbar */
.pcb-pmodal__desc { position: relative; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
/* Enhetlig luft mellan stycken — beskrivningen kommer ur post_content och
   ärver annars ett globalt margin:0 som klumpar ihop styckena. */
.pcb-pmodal__desc-inner p { margin: 0 0 .8em; }
.pcb-pmodal__desc-inner p:last-child { margin-bottom: 0; }

/* Rubriker, listor och fetstil i beskrivningen var HELT ostylade — bara p
   hade en regel. Texten är importerad tillverkartext som kommer med h1–h4,
   ul och strong rakt in, och eftersom modalen appendas till body (se noten
   ovan) faller de utanför #brx-content och plockar upp sidans globala
   rubrikfärg, som är mörk. Rubrikerna blev därmed nästan osynliga mot
   modalens mörka yta, och storlekarna okapade.

   Skalan hålls medvetet liten: det här är en modal, inte en artikel —
   rubrikerna ska dela upp texten, inte konkurrera med produktnamnet. */
.pcb-pmodal__desc-inner :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.4em 0 .5em;
}
.pcb-pmodal__desc-inner :is(h1, h2) { font-size: 17px; }
.pcb-pmodal__desc-inner :is(h3, h4, h5, h6) { font-size: 15px; }
.pcb-pmodal__desc-inner :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

.pcb-pmodal__desc-inner :is(ul, ol) { margin: 0 0 .8em; padding-left: 1.4em; }
.pcb-pmodal__desc-inner li { margin-bottom: .25em; }
.pcb-pmodal__desc-inner strong { color: var(--ink); font-weight: 600; }
.pcb-pmodal__desc-inner a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }
.pcb-pmodal__desc-inner img { max-width: 100%; height: auto; }
.pcb-pmodal__desc-inner { max-height: 72px; overflow: hidden; position: relative; transition: max-height .35s ease; }
.pcb-pmodal__desc-inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--bg-elev)); pointer-events: none; transition: opacity .25s ease; }
.pcb-pmodal__desc.is-expanded .pcb-pmodal__desc-inner { max-height: 4000px; }
.pcb-pmodal__desc.is-expanded .pcb-pmodal__desc-inner::after { opacity: 0; }
.pcb-pmodal__desc-toggle { margin-top: 6px; background: transparent; border: 0; color: var(--green-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; }
.pcb-pmodal__desc-toggle:hover { color: var(--secondary); }

/* CTA — "Velg denne" */
.pcb-pmodal__cta { font-family: "Chakra Petch", sans-serif; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 18px; background: var(--primary); color: var(--on-green); border: 0; border-radius: var(--radius-s); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.pcb-pmodal__cta:hover { background: var(--secondary); }
.pcb-pmodal__cta:active { transform: translateY(1px); }
.pcb-pmodal__cta-total { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .pcb-pmodal { padding: 12px; }
  .pcb-pmodal__panel { grid-template-columns: 1fr; gap: 16px; padding: 16px; max-height: calc(100vh - 24px); overflow-y: auto; }
  /* Här scrollar hela panelen, och ett element med transform blir referensram
     för position:fixed-ättlingar — krysset följde därför med innehållet ut ur
     bild i stället för att sitta kvar i hörnet. När panelen väl har vuxit in
     behövs ingen transform; utan den räknas krysset mot viewporten igen.
     Öppnings- och stängningsanimationen påverkas inte (scale(.96) ↔ none). */
  .pcb-pmodal.is-in .pcb-pmodal__panel { transform: none; }
  /* Mobil: hela panelen scrollar — släpp info-kolumnens eget tak */
  .pcb-pmodal__info { overflow-y: visible; max-height: none; padding-right: 0; }
  .pcb-pmodal__media { max-height: 240px; aspect-ratio: auto; }
}

.pcb-opt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pcb-opt-badge { font-size: 10px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-l); text-align: center; max-width: 130px; background: var(--bg-sunken); color: var(--ink-2); border: 1px solid var(--line); }
.pcb-opt-badge.is-rec { background: var(--green); color: var(--on-green); border-color: var(--green); }
/* Badgen ligger i bildens hörn, inte bredvid namnet: där gjorde den kortets
   topp ~18px högre än grannarnas och bröts i två rader. På bilden tar den
   ingen plats i flödet. Utan bild står den kvar i .pcb-opt-meta. */
.pcb-opt-image .pcb-opt-badge { position: absolute; top: 10px; left: 10px; z-index: 1; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Med badgen på bilden håller .pcb-opt-meta bara info-knappen, som är absolut
   placerad mot kortet. Den tomma behållaren gav ändå ett flex-gap — 12px extra
   mellan namn och bild på mobil, där kortets topp staplas. */
.pcb[data-pcb-view="card"] .pcb-opt-meta:not(:has(.pcb-opt-badge)) { display: contents; }

.pcb-opt-row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.pcb-opt-name { font-size: 1.4rem; margin: 0; letter-spacing: -0.005em; }
.pcb-opt-tagline { margin: 0; font-size: 14px; color: var(--ink-3); }
.pcb-opt-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; color: var(--ink-2); flex: 1; }
.pcb-opt-specs li { display: inline-flex; align-items: baseline; gap: 5px; }
/* Etikett + värde separata noder (konsekvent översättning). Etikett som liten versal-eyebrow. */
.pcb-opt-spec-k { text-transform: uppercase; letter-spacing: .03em; font-size: .82em; color: var(--ink-3); }
.pcb-opt-spec-k::after { content: ':'; }
/* Punkten före varje spec borttagen — separationen sköts av flex-gap */

.pcb-opt-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line-2); }
/* Pris mot NUVARANDE val ("+ 1 000 kr", "− 9 500 kr", "Valgt") och vad totalen
   blir. Bara det valda är grönt — grönt betyder "valt" i hela byggaren, så
   billigare alternativ får inte samma färg (designens förslag, borttaget). */
.pcb-opt-pricebox { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
/* min-height = badgens höjd på ALLA etiketter, inte bara den valda. Annars
   växer foten när ett kort väljs, och med subgrid följer hela raden med —
   korten skulle hoppa några pixlar vid varje klick. */
.pcb-opt-price { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Det valda: "✓ Valgt" som grön badge, samma form som .pcb-opt-badge.is-rec.
   Bocken är ::before så att "Valgt" förblir en egen textnod för TranslatePress. */
.pcb-opt-price.is-current { gap: 8px; padding: 0 10px; border-radius: var(--radius-l); background: var(--green); color: var(--on-green); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
/* Andra content-raden (alt-text "") tystar bocken för skärmläsare; webbläsare
   som inte kan syntaxen hoppar över den och behåller den första. */
.pcb-opt-price.is-current::before { content: "✓"; content: "✓" / ""; letter-spacing: 0; }
.pcb-opt-total { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Strömregelns besked under totalen: "Inkl. strømforsyning på 1000 W" på
   skjermkort som drar med sig en kraftigare PSU, "For svak …" på spärrade. */
.pcb-opt-note { font-size: 12px; line-height: 1.35; color: var(--ink-3); white-space: normal; }
.pcb-opt-note[hidden] { display: none; }
/* Spärrat kort (strømforsyning för svag / skjermkort utan räckande PSU):
   synligt, så kunden ser varför det inte går, men inte valbart. */
.pcb-opt-card.is-disabled { cursor: not-allowed; }
/* Löv-elementen, inte kortets barn: i listläget är topp/fot display: contents
   och tar då ingen opacity. ⓘ hålls fullt synlig — detaljerna går att läsa. */
.pcb-opt-card.is-disabled :is(.pcb-opt-name, .pcb-opt-tagline, .pcb-opt-image, .pcb-opt-specs, .pcb-opt-price, .pcb-opt-total, .pcb-opt-radio, .pcb-opt-badge) { opacity: .45; }
.pcb-opt-card.is-disabled .pcb-opt-note { color: var(--ink-2); }
.pcb-opt-card.is-disabled:hover { border-color: var(--line); transform: none; box-shadow: none; }
.pcb-opt-card.is-disabled:active { transform: none; }

.pcb-opt-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-4); display: inline-flex; align-items: center; justify-content: center; transition: all .25s var(--ease); background: transparent; }
.pcb-opt-radio-dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background .3s var(--ease), transform .35s cubic-bezier(.2,.7,.2,1); transform: scale(0); }
.pcb-opt-card.is-selected .pcb-opt-radio { border-color: var(--green-deep); background: var(--green); }
.pcb-opt-card.is-selected .pcb-opt-radio-dot { background: var(--ink); transform: scale(1.2); animation: pcbDotBounce .4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes pcbDotBounce { 0% { transform: scale(0); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* SUMMARY */
.pcb-sum-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-xxl); padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.pcb-sum-total { margin-left: auto; text-align: right; }
/* Kassa-block längst ner i kortet: totalt ovanför knappen, allt högerställt */
.pcb-sum-checkout { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; width: 100%; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.pcb-sum-checkout .pcb-btn-lg, .pcb-sum-checkout .pcb-btn-xl { width: auto; }
.pcb-sum-total-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.pcb-sum-total-amount { font-weight: 700; font-size: 24px; letter-spacing: -0.01em; text-align: right; }
.pcb-sum-list { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pcb-sum-row { display: grid; grid-template-columns: 140px 1fr auto auto; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.pcb-sum-row:last-child { border-bottom: 0; }
.pcb-sum-row-label { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pcb-sum-row-name { font-weight: 500; font-size: 15px; color: var(--ink); }
.pcb-sum-row-hint { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.pcb-sum-row-price { font-weight: 500; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pcb-sum-row-edit { background: none; padding: 6px 10px; border-radius: var(--radius-m); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); cursor: pointer; }
.pcb-sum-row-edit:hover { border-color: var(--ink); color: var(--ink); }
.pcb-sum-foot { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding-top: 6px; }
.pcb-sum-foot-meta { display: grid; grid-template-columns: repeat(3, max-content); gap: 40px; font-size: var(--text-s); color: var(--ink-3); margin-top: -10px; padding: 0 4px; }
.pcb-sum-foot-meta strong { color: var(--ink-2); font-weight: 600; display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }

/* HANDLINGSRAD (.pcb-dock)
   Bor sist i .pcb-step-col — direkt under produktkorten, där blicken redan är.
   Desktop: självbärande sticky mot viewportens nederkant (den gamla placeringen
   ärvde sin bottenposition av att FÖRÄLDERN .pcb-build-col var höjdbegränsad och
   sticky; .pcb-step-col är det inte). Mobil (≤980px): fixed rad i tumzonen, se
   responsive-blocket längre ned — oförändrat, det hänger på klassnamnet. */
/* align-items: stretch är INTE default här — något utanför temat (ACSS/Bricks)
   sätter center på kolumnen. Utan den här raden krymper varje barn till sitt
   innehålls bredd och centreras, så stegvyn blir olika bred i varje steg
   (500px på Kabinett, 389px på CPU …) medan docken står kvar i full bredd —
   den har ett eget width:100% som var en lapp på just det här symptomet. */
.pcb-step-col { display: flex; flex-direction: column; align-items: stretch; }
/* Samma sak här som på .pcb-step-col: något utanför temat gör wrappern till en
   flex-kolumn med align-items: flex-start, så stegvyn krymper till innehållets
   bredd. Stretch på BÅDA nivåerna behövs — annars blir listan olika bred i
   varje steg. */
.pcb-step-view-wrap { flex: 1 1 auto; min-width: 0; align-items: stretch; }
.pcb-dock {
  width: 100%;
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex: 0 0 auto;
  margin-top: 28px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-xxl);
  /* Raden anpassar sig efter sin EGEN bredd (högerkolumnen), inte skärmens. */
  container-type: inline-size;
}
/* Klassregler vinner över UA-stilens [hidden]{display:none} — utan den här
   raden gör dock.hidden ingenting (samma fälla som .pcb-btn[hidden] nedan). */
.pcb-dock[hidden] { display: none; width: 100%  }
/* Ordning: Forrige · Valgt · Total · Neste. Inget köp här — det finns bara i
   oppsummeringen. Neste låses till sin bredaste etikett (--pcb-next-w), så
   totalen står still mellan stegen; det är "Valgt" som krymper när det behövs. */
.pcb-dock-inner { width: 100%; padding: 12px 14px; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
/* Vad klicket precis gjorde, sagt i klartext intill knappen som går vidare. */
/* flex-basis 0, inte auto/px: knapparna får aldrig tvingas ner på en egen rad
   för att produktnamnet är långt — namnet ellipsas i stället. */
.pcb-dock-selected { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pcb-dock-selected[hidden] { display: none; }
.pcb-dock-selected-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pcb-dock-selected strong { font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* TOTALEN — bor i raden sedan "Pris i sikte", inte i vänsterkolumnen. */
/* Extra luft mot Neste (24px i stället för radens 12px) — utan den läste
   beloppet och den gröna knappen som ett enda block. */
.pcb-dock-total { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-right: 12px; }
.pcb-dock-price-row { display: flex; align-items: center; gap: 8px; }
.pcb-dock-price-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pcb-dock-price-amount { font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Brickan med skillnaden vid ett val ("+ 1 000 kr"). En transition, inte en
   keyframe: kunden kan klicka flera kort i rad, och då ska brickan ta vid där
   den står i stället för att börja om. Snabbt in, lugnt ut. */
.pcb-dock-delta {
  padding: 3px 7px;
  border-radius: var(--radius-s);
  background: color-mix(in oklab, var(--green) 16%, transparent);
  color: var(--green-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.pcb-dock-delta.is-visible { opacity: 1; transform: none; transition-duration: .16s; }
.pcb-dock-delta:empty { display: none; }
/* Delbetalningsraden renderas bara när gameify_pcb_financing_months är påslagen */
.pcb-dock-finance { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcb-dock-prev { flex: 0 0 auto; }
.pcb-dock-next { flex: 0 0 auto; }
.pcb-btn-arrow { font-size: 1.1em; line-height: 1; }
/* Bottenarkets knapp hör bara mobilen till. (.pcb-dock-prefixet behövs: .pcb-btn
   längre ned sätter display:inline-flex med samma specificitet.) */
.pcb-dock .pcb-dock-sheet-btn { display: none; }
@media (min-width: 981px) {
  .pcb-dock-next { min-width: var(--pcb-next-w, 0px); }
}
/* Smal rad (laptop, eller 981–1100px skärm): pilen räcker för Forrige, och
   "Valgt" får ge vika först — valet syns ändå på det markerade kortet. */
@container (max-width: 760px) {
  .pcb-dock-prev-label { display: none; }
  .pcb-dock-prev { padding-inline: 14px; }
}
@container (max-width: 620px) {
  .pcb-dock-selected { display: none; }
}

/* Under konfigurationen: trygghetsraderna. Totalraden och köplänken hör till
   mobilens bottenark och döljs här. */
.pcb-build-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-xxl); }
.pcb-build-foot .pcb-dock-trust { padding-top: 0; border-top: 0; }
.pcb-sheet-head, .pcb-sheet-total { display: none; }
.pcb-sheet-backdrop { display: none; }
.pcb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Köpet i handlingsraden är en TYST TEXTLÄNK, inte en knapp: i steg 01–08 ska
   ingenting konkurrera visuellt med "Neste". Vägen till att köpa ett delvis
   bygge finns kvar — den ropar bara inte. Oppsummeringens egen köpknapp är en
   riktig .pcb-btn-xl och byggs separat i renderSummaryView(). */
.pcb-dock-add {
  flex: 0 0 auto;
  padding: 8px 4px;
  background: none;
  border: 0;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* Understrykningen måste synas för att läsas som klickbar, men får inte vara
     lika stark som texten — var(--line) försvinner helt mot mörk bakgrund. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.pcb-dock-add:hover { color: var(--ink); text-decoration-color: currentColor; }
.pcb-dock-add:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }
.pcb-dock-add:disabled { opacity: .5; cursor: not-allowed; }
.pcb-dock-trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: var(--text-s); line-height: 1.35; color: var(--ink-3); }
.pcb-dock-trust li { position: relative; padding-left: 18px; }
/* Bocken kodar "detta ingår" — samma gröna signal som valda kort, aldrig som yta */
.pcb-dock-trust li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-ink); font-size: 11px; }

/* BUTTONS */
.pcb-btn { font-family: "Chakra Petch", sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-s); border: 1px solid transparent; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; background: transparent; color: var(--ink); transition: all .2s var(--ease); white-space: nowrap; cursor: pointer; }
.pcb-btn:disabled { opacity: .35; cursor: not-allowed; }
/* .pcb-btn sätter display:inline-flex, vilket vinner över UA-stilens
   [hidden]{display:none}. Utan den här raden gjorde nextBtn.hidden ingenting. */
.pcb-btn[hidden] { display: none; }
.pcb-btn-ghost { border-color: var(--line); color: var(--ink-2); }
.pcb-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.pcb-btn-primary { background: var(--green); color: var(--on-green); border-color: var(--green); transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); }
.pcb-btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); transform: scale(1.03); box-shadow: 0 0 12px rgba(var(--primary-rgb), .7), 0 0 32px rgba(var(--primary-rgb), .45), 0 0 64px rgba(var(--primary-rgb), .2); }
.pcb-btn-primary:active { transform: scale(.97); box-shadow: 0 0 8px rgba(var(--primary-rgb), .5), 0 0 20px rgba(var(--primary-rgb), .3); }
.pcb-btn-lg { padding: 16px 26px; font-size: 14px; }
/* Bara oppsummeringens köpknapp. Efter åtta steg med fylld grön "Neste" måste
   sista handlingen läsa som ett annat sorts steg, inte som steg nio i samma
   stil — större yta än .pcb-btn-lg, och priset står i knappens egen text. */
.pcb-btn-xl { padding: 20px 40px; font-size: 16px; }

/* RESPONSIVE */
@media (max-width: 980px) {
  .pcb-config { grid-template-columns: 1fr; gap: 28px; }

  /* BOTTENARKET — vänsterkolumnen glider upp bakom "Se bygget" i den fasta
     raden. Ut samma väg som in. visibility följer med i transitionen så det
     stängda arket varken går att tabba till eller läses upp. z-index över
     sajtens header: arket och fördunklingen ska täcka hela sidan. */
  .pcb-build-col {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 1001;
    max-height: min(80vh, 640px);
    gap: 14px;
    padding: 12px max(16px, var(--pcb-dock-pad, 16px)) calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elev);
    border-top: 1px solid color-mix(in oklab, var(--green) 30%, transparent);
    border-radius: var(--radius-xxl) var(--radius-xxl) 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, .45);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .32s var(--ease-drawer), visibility 0s linear .32s;
  }
  .pcb.is-sheet-open .pcb-build-col { transform: none; visibility: visible; transition: transform .32s var(--ease-drawer); }
  .pcb-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden;
    transition: opacity .32s var(--ease-out), visibility 0s linear .32s;
  }
  .pcb.is-sheet-open .pcb-sheet-backdrop { opacity: 1; visibility: visible; transition: opacity .32s var(--ease-out); }
  html.pcb-sheet-lock { overflow: hidden; }

  .pcb-build-stage { display: none; }
  .pcb-build-meta { margin-top: 0; }
  .pcb-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pcb-sheet-title { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .pcb-sheet-close { padding: 8px 4px; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
  .pcb-sheet-close:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
  .pcb-sheet-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .pcb-sheet-total-label { font-size: 13px; color: var(--ink-3); }
  .pcb-sheet-total-amount { font-weight: 700; font-size: 22px; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
  .pcb-build-meta, .pcb-build-foot { padding: 0; background: none; border: 0; border-radius: 0; }
  .pcb-build-meta-head { display: none; }
  .pcb-build-foot .pcb-dock-trust { padding-top: 12px; border-top: 1px solid var(--line); }

  /* Handlingsraden blir fast rad i tumzonen — brandguiden föreskriver det.
     Full-bleed: --pcb-dock-pad mäts av JS ur .pcb:s vänsterindrag så
     innehållet linjerar med korten i stället för att ligga flush mot kanten.
     Positionen är fixed mot viewporten och därmed oberoende av vilken kolumn
     elementet ligger i — därför krävde flytten till .pcb-step-col inga
     ändringar här utöver innehållets nya rader. */
  .pcb-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    margin-top: 0;
    background: var(--bg);
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Fast tvåradslayout i stället för flex-wrap: raden får inte byta höjd mellan
     stegen bara för att "Neste: <kategori>" är olika lång — den är fixed mot
     viewporten och en hoppande höjd flyttar sidans botten under fingret.
     Rad 1: total + köp. Rad 2: navigering, med Neste bredast (målet i steg 1–8). */
  /* Fast tvåradslayout: rad 1 total + "Se bygget", rad 2 navigering med Neste
     bredast. Tre kolumner så att Forrige (kolumn 1) inte ärver totalens bredd. */
  .pcb-dock-inner {
    padding: 10px max(16px, var(--pcb-dock-pad, 32px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "total total sheet"
      "prev  next  next";
    align-items: center;
    gap: 8px;
  }
  /* "Valgt" hör till desktopraden — på mobil står valet i det markerade kortet. */
  .pcb-dock-selected { display: none; }
  .pcb-dock-total { grid-area: total; margin-right: 0; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 0; }
  .pcb-dock-delta { order: 2; }
  .pcb-dock-finance { flex-basis: 100%; }
  .pcb-dock .pcb-dock-sheet-btn { display: inline-flex; grid-area: sheet; padding: 8px 12px; font-size: 12px; }
  .pcb-dock-prev  { grid-area: prev; justify-self: start; }
  .pcb-dock-next  { grid-area: next; }
  .pcb-dock-price-amount { font-size: 20px; }

  /* Docken är fixed och täcker annars sidans sista innehåll (sektioner efter
     byggaren, footer). Kompensera på body-nivå — .pcb-config-marginalerna
     skyddar bara korten inuti byggaren. --pcb-dock-h sätts av JS
     (ResizeObserver på docken); fallback motsvarar uppmätt höjd och inkluderar
     redan safe-area-paddingen. */
  body:has(.pcb-dock) { padding-bottom: calc(var(--pcb-dock-h, calc(96px + env(safe-area-inset-bottom, 0px))) + 24px); }
  .pcb-progress-ticks { display: none; }
  .pcb-opt-card-top { flex-direction: column; }
  .pcb-sum-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .pcb-sum-row-label { grid-column: 1 / -1; }

  /* Progress sticky vid toppen — visar "STEG X/9 · NAMN" + fyllning */
  .pcb-progress {
    position: sticky;
    top: 0;
    margin: 0 -16px 16px;
    padding: 12px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    z-index: 50;
  }
  .pcb-progress-meta { display: flex; margin-bottom: 8px; font-size: 11px; }
  .pcb-progress-track { height: 3px; }
  .pcb-progress-fill { box-shadow: 0 0 12px rgba(var(--primary-rgb), .7); }
  /* Kompensationen för den fasta raden sköts av body:has(.pcb-dock) ovan.
     Den gamla extramarginalen här låg ovanpå den och gav ~140px dött utrymme
     under prisboxen. */
  .pcb-config { margin-bottom: 24px; }
}
@media (max-width: 720px) {
  /* Stacka korten i en kolumn på mobil + telefon-storlek */
  .pcb-opt-grid { grid-template-columns: 1fr; gap: 16px; }
  .pcb-opt-card { padding: 18px; }
  .pcb-step-title { font-size: clamp(26px, 6vw, 36px); }

  /* Två rader i stället för fyra knappar i bredd: navigering överst (Neste
     bredast — den är målet i steg 01–08), köp/dela under. "Valgt: …" ryms inte
     och står ändå i konfigurationslistan. */
  /* Bara pilen: "Neste: <kategori>" är den långa etiketten och måste rymmas på
     samma rad, annars blir raden tre våningar hög och äter halva skärmen. */
  .pcb-dock-prev-label { display: none; }
  .pcb-dock-prev { padding-inline: 16px; }
}
@media (max-width: 640px) {
  .pcb-sum-foot-meta { grid-template-columns: 1fr; gap: 12px; }
  /* Högre specificitet än .pcb-sum-checkout .pcb-btn-xl { width: auto } ovan */
  .pcb-sum-checkout .pcb-btn-xl { padding: 16px 24px; font-size: 15px; width: 100%; }
  .pcb-btn { padding: 10px 14px; font-size: 13px; }
  .pcb-opt-name { font-size: 1.1rem; }
  .pcb-opt-specs { font-size: 13.5px; }
  /* Progress matchar nya stackade dock-höjden (~96px) */
  .pcb-progress { bottom: 96px; }
  /* Stackad dock är högre — no-JS-fallback; med JS mäter --pcb-dock-h själv */
  body:has(.pcb-dock) { padding-bottom: calc(var(--pcb-dock-h, calc(110px + env(safe-area-inset-bottom, 0px))) + 24px); }
}
/* Reduced motion betyder inte "ingen feedback" — det betyder en variant utan
   vestibulär rörelse. Förflyttning, skalning och studs tas bort; färg, ram och
   opacitet behålls, för de BÄR betydelse här (vald / hovrad / nedtryckt). */
@media (prefers-reduced-motion: reduce) {
  .pcb-step-view { animation: none; }
  .pcb-opt-card.is-selected .pcb-opt-radio-dot { animation: none; transform: scale(1); }
  .pcb-progress-fill { transition: none; }

  /* Totalen räknar inte upp (JS skriver beloppet direkt) och brickan tonar
     bara in — ingen förflyttning. */
  .pcb-dock-delta { transform: none; }

  /* Modalens intoning och panelens skalning. JS river modalen direkt under
     reduced motion, så ingen väntan uppstår. */
  .pcb-pmodal { animation: none; }
  .pcb-pmodal__panel { transform: none; opacity: 1; transition: none; }

  /* Alla transform-baserade tillstånd nollas ... */
  .pcb-opt-card:hover,
  .pcb-opt-card:active,
  .pcb-opt-info:active,
  .pcb-pmodal__close:active,
  .pcb-pmodal__cta:active,
  .pcb-btn-primary:active { transform: none; }

  /* ... men kortet måste fortfarande kvittera tryck. Ramen gör jobbet i
     stället för skalningen. */
  .pcb-opt-card:active { border-color: var(--green-ink); }
  .pcb-opt-card { transition-property: border-color, background-color, box-shadow; }
}
/* ── Preselect-notice ─────────────────────────────────────────────── */
.pcb-notice {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: rgba(var(--primary-rgb),  .08);
  border: 1px solid rgba(var(--primary-rgb),  .22);
  border-radius: var(--radius-l);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}
.pcb-notice__text { flex: 1; line-height: 1.4; text-align: left; }
.pcb-notice__cta {
  background: transparent;
  border: 0;
  color: var(--green-ink);
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.pcb-notice__cta:hover { color: var(--secondary); }
.pcb-notice__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s ease;
}
.pcb-notice__close:hover { opacity: 1; }

/* ── Dela bygget (pc-share) ─────────────────────────────────────────────── */
.pcb-share-panel {
  /* Full bredd under knapparna, allt på en rad: länk | Kopier | Del.
     (Var flex-wrap i en smal kolumn → knapparna bröts på flera rader.) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.pcb-share-panel[hidden] { display: none; }
.pcb-share-label { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pcb-share-url {
  width: 100%;
  min-width: 0;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
}
.pcb-share-url:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 1px; }
.pcb-share-panel .pcb-btn { height: 44px; padding-block: 0; }
/* Sekundär handling: bara en grön knapp i kortet (köp). */
.pcb-share-panel .pcb-btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.pcb-share-native { display: inline-flex; align-items: center; gap: 8px; }
.pcb-share-status { grid-column: 1 / -1; color: var(--ink-3); font-size: 14px; }
@media (max-width: 640px) {
  .pcb-share-panel { grid-template-columns: 1fr 1fr; }
  .pcb-share-url { grid-column: 1 / -1; }
  .pcb-share-panel .pcb-btn:only-of-type { grid-column: 1 / -1; }
}

/* Prisankare i hero — inte en del av builder-UI:t, men delar dess prisdata. */
.pcb-from-price {
  margin-block-start: var(--space-s);
  font-size: var(--text-s);
  color: var(--text-light-muted, var(--text-light));
}
.pcb-from-price strong {
  color: var(--green-ink);
  font-weight: 700;
}

/* Reducerad rörelse: bottenarket tonar in på plats i stället för att glida upp. */
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .pcb-build-col { transform: none; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  .pcb.is-sheet-open .pcb-build-col { opacity: 1; transition: opacity .2s ease; }
}