/* ============================================================
   CRANEPARTNER · V3 — KATALOGEN · TELESKOPLASTARE TILL SALU
   Temat för den delade listnings-motorn. Sätter --ts-* till
   katalogens poster-tokens (röd + svart på vitt) och lägger
   chevron-detaljer + kantigare kort ovanpå base.css.
   Rör inte engine.js / base.css — temat lever här.
   ============================================================ */

/* ---------- nav: aktiv post "Till salu" ---------- */
.nav__here{
  text-decoration:none; font-weight:800; font-size:.82rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--red);
  border-bottom:2px solid var(--red); padding-bottom:2px;
}
.nav__here:hover{ color:var(--red); }
@media (max-width:680px){
  /* följ katalogens nav-kollaps: dölj alla utom ring-knappen */
  .nav__links a:not(.nav__call){ display:none; }
}

/* ---------- poster header strip ---------- */
.ts-poster{
  padding-top:clamp(var(--s4),7vh,var(--s6));
  padding-bottom:var(--s3);
  padding-left:calc(var(--rail) + var(--gut));
  padding-right:var(--gut);
  max-width:calc(var(--maxw) + var(--rail));
  margin-inline:auto;
}
.display--ts{
  font-size:clamp(2.6rem,9vw,6.2rem);
  line-height:.86;
}
.display--ts .ln{ display:block; }
.display--ts .w{ display:inline-block; hyphens:manual; }
.ts-poster__lede{
  max-width:54ch;
  font-size:clamp(1.02rem,1.4vw,1.28rem);
  line-height:1.5;
  margin:var(--s3) 0 var(--s3);
  color:var(--ink);
}
.ts-poster__chev{
  display:flex; gap:clamp(8px,1.6vw,16px);
  color:var(--red); font-weight:800; line-height:.7;
  font-size:clamp(20px,2.6vw,34px);
}
.ts-poster__chev span{ transform:rotate(-90deg); display:inline-block; }

/* ---------- listing wrapper (matchar katalogens gutter) ---------- */
.ts-listing{
  padding-left:calc(var(--rail) + var(--gut));
  padding-right:var(--gut);
  padding-bottom:var(--s6);
  max-width:calc(var(--maxw) + var(--rail));
  margin-inline:auto;
}

/* ============================================================
   MOTOR-TEMA — överstyr --ts-* med katalogens tokens
   ============================================================ */
.ts{
  --ts-red:var(--red);
  --ts-fg:var(--ink);
  --ts-bg:#fff;
  --ts-muted:var(--ink-65);
  --ts-line:var(--ink-14);
  --ts-card-bg:#fff;
  --ts-radius:3px;                       /* kantigare poster-kort */
  --ts-font:var(--sans);
  --ts-mono:var(--mono);
  --ts-gap:var(--s3);
}

/* Toolbar — kraftigare poster-kant under filterraden */
.ts .ts-toolbar{
  border-bottom:2px solid var(--ink);
  padding-bottom:var(--s2);
  margin-bottom:var(--s3);
}
.ts .ts-search,
.ts .ts-brand,
.ts .ts-cat,
.ts .ts-sort{
  border-radius:2px;
  font-weight:600;
}
.ts .ts-search::placeholder{ color:var(--ink-65); }
.ts .ts-search:focus,
.ts .ts-brand:focus,
.ts .ts-cat:focus,
.ts .ts-sort:focus{
  outline:none; border-color:var(--red);
  box-shadow:0 0 0 2px var(--red-08);
}
.ts .ts-count{
  text-transform:uppercase; letter-spacing:.04em;
  font-weight:600; color:var(--red);
}

/* Kort — poster-känsla: kantigt, kraftig titel, svart underdel-linje */
.ts .ts-card{
  border:1px solid var(--ink-14);
  border-radius:3px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.ts .ts-card:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
}
.ts .ts-card__media{ border-bottom:2px solid var(--ink); }
.ts .ts-card__title{
  font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.1;
  font-size:15px;
}
.ts .ts-card__spec dt{ color:var(--ink-65); }
.ts .ts-card__spec dd{ color:var(--ink); font-weight:500; }

/* Badge — poster-rektanglar (ingen pill) */
.ts .ts-badge{
  border-radius:2px;
  font-weight:600;
  letter-spacing:.06em;
}
.ts .ts-badge--demo{ background:var(--red); }
.ts .ts-badge--used{ background:var(--ink); }

/* CTA-knappar — röd primär (poster), svart-kantad ghost */
.ts .ts-btn{ border-radius:2px; font-weight:700; }
.ts .ts-btn--primary{ background:var(--red); color:#fff; }
.ts .ts-btn--primary:hover{ background:#8f1316; opacity:1; }
.ts .ts-btn--ghost{
  border:1px solid var(--ink-14); color:var(--ink);
}
.ts .ts-btn--ghost:hover{ background:var(--ink); color:#fff; opacity:1; }

/* Pager — kantig, röd aktiv ruta */
.ts .ts-page-btn{
  border-radius:2px; font-weight:600;
  border:1px solid var(--ink-14);
}
.ts .ts-page-btn.is-active{ background:var(--red); border-color:var(--red); }
.ts .ts-page-btn:not([disabled]):not(.is-active):hover{ border-color:var(--ink); }

/* Källrad */
.ts .ts-source{ color:var(--ink-65); }
.ts .ts-source a{ color:var(--red); font-weight:600; }

/* Fokus — följ sajtens röda :focus-visible-stil överallt i motorn */
.ts .ts-search:focus-visible,
.ts .ts-brand:focus-visible,
.ts .ts-cat:focus-visible,
.ts .ts-sort:focus-visible,
.ts .ts-page-btn:focus-visible,
.ts .ts-btn:focus-visible,
.ts .ts-card__media:focus-visible{
  outline:3px solid var(--red); outline-offset:3px;
}

/* ---------- responsivt: rail av < 768 (matcha katalogen) ---------- */
@media (max-width:768px){
  .ts-poster,
  .ts-listing{ padding-left:var(--gut); }
}
@media (max-width:768px){
  .chevron-rail{ display:none; }
}

/* extra luft i botten så mobilens ring-bar inte täcker pagern */
@media (max-width:768px){
  .ts-listing{ padding-bottom:calc(var(--s6) + 64px); }
}

/* reduced-motion: inga transforms (base.css släcker bild-zoom; vi släcker kort-lyft) */
@media (prefers-reduced-motion:reduce){
  .ts .ts-card,
  .ts .ts-card:hover{ transition:none; transform:none; }
}