/* ============================================================
   SVART PÅ VITT · Produkt-motor — TEMA
   Temar bara den delade produkt-motorn (assets/products/base.css)
   till svart-på-vitt-språket. Motorns funktion + data rörs inte.
   Vitt papper · svart bläck (#2F383C) · tunna 1px-linjer ·
   nästan raka hörn · rött FINNS INTE här (reserverat för jourlinjen).
   PRODUKTFOTON I FÄRG — aldrig gråskala/duotone (Williams regel).
   ============================================================ */

/* ---------- TOKEN-MAPPNING: motorns --pg-* → svart-på-vitt ---------- */
.pg {
  --pg-red:     var(--ink);     /* motorns "röda" accenter blir SVART bläck */
  --pg-fg:      var(--ink);     /* #2F383C — sidans svart */
  --pg-bg:      var(--paper);   /* #FFFFFF */
  --pg-muted:   var(--ink-2);   /* dämpad grå för meta */
  --pg-line:    var(--ink-3);   /* svag 1px-linje */
  --pg-card-bg: #fff;
  --pg-radius:  2px;            /* dokumentets nästan-raka hörn */
  --pg-font:    var(--sans);
  --pg-mono:    var(--mono);
  --pg-gap:     0;             /* flush rutnät — kort delar 1px-linjer */
}

/* fokusring i sidans bläck, inte rött */
.pg :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ============================================================
   SÄKERHET: produktfoton ALLTID i färg — inget filter, någonsin
   ============================================================ */
.pg-card img,
.pg-tile img,
.pg-detail img,
.pg-card__media img,
.pg-tile__media img,
.pg-detail__media img { filter: none !important; }

/* mediepaneler: rent vitt papper i stället för motorns ljusgrå */
.pg-tile__media,
.pg-card__media,
.pg-detail__media { background: #fff; }

/* ============================================================
   ÖVERSTYRNINGAR — dokument/datablads-disciplin ovanpå base.css
   Flush rektanglar, 1px-bläcklinjer, raka hörn.
   ============================================================ */

/* GRID: flush ledger — kort sitter kant-i-kant med delad 1px-linje */
.pg-grid--cards,
.pg-grid {
  gap: 0;
  border-top: 1px solid var(--ink);
}

/* TILE (familjekort) */
.pg-tile {
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  background: #fff;
  transition: background .3s var(--ease);
}
a.pg-tile:hover {
  border-color: var(--ink);         /* svart, inte rött */
  background: var(--paper-2);
  transform: none;                  /* dokument lyfter inte */
}
.pg-tile__label { font-weight: 800; letter-spacing: -0.01em; }
.pg-tile__sub { color: var(--ink-2); }
.pg-tile__count {
  font-family: var(--mono);
  color: var(--ink);               /* svart räknare, inte röd */
  font-weight: 600;
}

/* CARD (maskinkort i grupplista) */
.pg-card {
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  background: #fff;
  transition: background .3s var(--ease);
}
a.pg-card:hover {
  border-color: var(--ink);
  background: var(--paper-2);
  transform: none;
}
.pg-card__model { font-weight: 800; letter-spacing: -0.01em; }
.pg-card__spec b { font-family: var(--mono); font-weight: 600; color: var(--ink); }

/* HEAD + tillbaka-länk: mono-etikett i bläck */
.pg-back {
  font-family: var(--mono);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.pg-head h3 { font-weight: 800; letter-spacing: -0.01em; }

/* SUBBAR (personlift-filter): rena rektangulära mono-knappar */
.pg-subbar { border-bottom: 1px solid var(--ink-3); }
.pg-sub {
  border-radius: 2px;
  font-family: var(--mono);
  border: 1px solid var(--ink-3);
  color: var(--ink-2);
  background: #fff;
}
.pg-sub.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* DETALJ (fullt Magni-datablad) */
.pg-detail { background: #fff; }
.pg-detail__fam {
  color: var(--ink-2);             /* familjelabel grå, inte röd */
  font-family: var(--mono);
}
.pg-detail__model { font-weight: 800; letter-spacing: -0.01em; }

/* nyckelspec + full spec-tabell: tabulära mono-siffror, 1px-linjer */
.pg-keyspec dt,
.pg-spectable dt { color: var(--ink-2); }
.pg-keyspec dd,
.pg-spectable dd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}
.pg-keyspec > div,
.pg-spectable > div { border-bottom: 1px solid var(--ink-3); }

/* CTA-knappar i datablads-vy: svart bläck-knapp + ghost */
.pg-btn { border-radius: 2px; font-weight: 700; }
.pg-btn--primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.pg-btn--primary:hover { background: #fff; color: var(--ink); }
.pg-btn--ghost { border: 1px solid var(--ink); color: var(--ink); }
.pg-btn--ghost:hover { background: var(--ink); color: #fff; }

/* note-länkar i bläck (understruket), inte röda */
.pg-note a { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* redskaps-rutnätet (#grupp/Redskap → pg-grid--red): håll det neutralt/svart */
.pg-grid--red .pg-tile { border-color: var(--ink-3); }

/* ============================================================
   SEKTIONS-RAM runt motorn — matchar dokumentspalten
   ============================================================ */
.produkter-engine {
  max-width: var(--maxw);
  margin: var(--s6) auto 0;
  padding-inline: var(--s3);
}
@media (max-width: 768px) {
  .produkter-engine { margin-top: var(--s5); }
}

/* ============================================================
   § 04 TILL SALU — Mascus-widgeten oförändrad i en dokumentram
   ============================================================ */
.tillsalu { padding-bottom: var(--s7); border-bottom: 1px solid var(--ink-3); }
.tillsalu .doc { padding-top: var(--s6); }

.tillsalu__frame {
  max-width: var(--maxw);
  margin: var(--s6) auto 0;
  padding-inline: var(--s3);
}
/* den oförändrade Mascus-widgeten i en ren dokumentram */
.tillsalu__frame > iframe {
  width: 100%;
  height: 1700px;
  border: 1px solid #d8dcdd;
  display: block;
  background: #fff;
  overflow: hidden;
}
@media (max-width: 768px) {
  .tillsalu__frame { margin-top: var(--s5); }
  .tillsalu__frame > iframe { height: 1500px; }
}