/* Bento — tema för den delade till-salu-motorn. Plattor + hårlinjer som mellanrum. */
.ts {
  --ts-red: #AE171A;
  --ts-fg: #2F383C;
  --ts-bg: #FFFFFF;
  --ts-muted: rgba(47, 56, 60, 0.55);
  --ts-line: rgba(47, 56, 60, 0.14);
  --ts-card-bg: #FFFFFF;
  --ts-radius: 0px;              /* bento = raka plattor */
  --ts-font: "Open Sans", system-ui, sans-serif;
  --ts-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ts-gap: 1px;                 /* hårlinjen ÄR mellanrummet */
}

/* Plattorna sitter ihop i ett rutnät med hårlinjer mellan sig */
.ts .ts-grid { background: rgba(47,56,60,.14); border: 1px solid rgba(47,56,60,.14); }
.ts .ts-card { border: 0; background: #fff; transition: background .18s; }
.ts .ts-card:hover { background: #FAFAFA; }
.ts .ts-card__title { font-weight: 800; letter-spacing: -.01em; }
.ts .ts-card__spec dd { color: #2F383C; }
.ts .ts-badge--used { background: #2F383C; border-radius: 0; }
.ts .ts-badge--demo { background: var(--ts-red); border-radius: 0; }
.ts .ts-btn { border-radius: 0; }
.ts .ts-btn--primary { background: var(--ts-red); }
.ts .ts-page-btn { border-radius: 0; }
.ts .ts-page-btn.is-active { background: var(--ts-red); border-color: var(--ts-red); }
.ts .ts-search, .ts .ts-brand, .ts .ts-cat, .ts .ts-sort { border-radius: 0; background: #FAFAFA; }

/* Sidhuvud-strip (om sidan har en .ts-page-hero) */
.ts-page-hero { padding: clamp(80px,11vw,120px) 0 clamp(24px,4vw,40px); }
.ts-page-hero h1 { font-weight: 800; letter-spacing: -.01em; font-size: clamp(2.4rem,6vw,4rem); color: #2F383C; margin: 0 0 16px; }
.ts-page-hero .kicker { color: #AE171A; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }