/* PelletRadar - Produktkarten der Amazon-Empfehlungen (gemeinsam fuer alle Seiten).
   Cache: wie recs.js - nach Aenderung ?v=N in den Seiten hochzaehlen.
   Erwartet --green auf :root. Layout (Spalte/Karussell) regelt die jeweilige Seite. */
  /* Empfehlungen: Karten statt Werbezeilen */
  .recs-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:14px 0 2px; }
  .recs-head h3 { margin:0; font-size:1.05rem; }
  .recs-sub { margin:0 0 10px; color:#666; font-size:.85rem; }
  .cards { display:grid; gap:12px; }
  .card { display:flex; gap:12px; align-items:center; padding:10px; border:1px solid #eee;
    border-radius:12px; background:#fff; text-decoration:none; color:inherit;
    transition:box-shadow .15s, border-color .15s; }
  .card:hover { border-color:#ddd; box-shadow:0 4px 14px rgba(0,0,0,.07); }
  .card-img { flex:0 0 104px; height:104px; border-radius:8px; background:#fff center / contain no-repeat;
    display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .card-img img { width:100%; height:100%; object-fit:contain; }
  .card-img[data-bg], .card-img:has(img[data-src]) { background-color:#f5f3ef; }  /* bis zur ersten Interaktion */
  .card-img img[data-src] { display:none; }  /* sonst zeigt der Browser den alt-Text als kaputtes Bild */
  .card-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .card-title { font-weight:600; font-size:.95rem; line-height:1.25; }
  .card-desc { color:#666; font-size:.82rem; line-height:1.35; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card-cta { color:var(--green); font-size:.82rem; font-weight:600; margin-top:2px; }
  .recs-group + .recs-group { margin-top:6px; }
  .zubehoer-heading { margin:0 0 4px; font-size:1.1rem; }
  .zubehoer-badge { font-weight:400; font-size:.75rem; color:#999; text-transform:uppercase;
    letter-spacing:.05em; }
  .zubehoer-disclosure { font-size:.75rem; color:#999; margin:0 0 14px; }