/* "Beliebt in <Land>" – Top-Liste links neben den Angeboten auf der
 * Duftseite (Auftrag 30.09.2026, Mockup theme/out/mockup-links-top10.png).
 * Eigene Datei (REGELN-AGENTEN.md), nur auf der Duftseite eingebunden
 * (siehe inc/top-liste.php, wp_enqueue_scripts).
 *
 * Ab 1100px: Grid 250px (Liste) + Rest (Angebote), Liste startet auf
 * Höhe der ersten Angebotskarte (Überschrift+Sortierung bleiben oben
 * über dem Grid) und ist sticky. Darunter (Tablet/Handy): Liste
 * UNTER allen Angeboten (normale Dokumentreihenfolge im HTML).
 */
.pp-tl-shopcol{min-width:0}
.pp-tl{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 16px}
.pp-tl-kopf{margin:0 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold-2)}
.pp-tl-titel{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pp-tl-liste{list-style:none;margin:0;padding:0}
.pp-tl-item{display:grid;grid-template-columns:18px 38px minmax(0,1fr);gap:8px;align-items:center;
  padding:9px 6px;border-top:1px solid var(--line)}
.pp-tl-liste li:first-child .pp-tl-item{border-top:0}
.pp-tl-liste li.an .pp-tl-item{background:var(--gold-bg);border-radius:10px;border-top-color:transparent}
.pp-tl-liste li.an + li .pp-tl-item{border-top-color:transparent}
.pp-tl-n{font-size:13px;font-weight:600;color:var(--ink-3);text-align:center}
.pp-tl-b{display:flex;align-items:center;justify-content:center}
.pp-tl-b img{width:38px;height:46px;object-fit:contain}
.pp-tl-t{min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.3;color:var(--ink)}
.pp-tl-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pp-tl-m{font-size:12px;color:var(--ink-2)}
.pp-tl-p{font-size:13px;font-weight:700;color:var(--gruen);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pp-tl-p .kmeta{font-weight:400;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;white-space:nowrap}
.pp-tl-alle{display:block;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--gold-2)}
.pp-tl-alle:hover{color:var(--gold)}

@media(min-width:1100px){
  .pp-tl-wrap.pp-tl-hat{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
  .pp-tl-wrap.pp-tl-hat .pp-tl{order:-1;margin-top:0;position:sticky;top:84px}
}