/* velodeals – Listen (Kategorie, Marke, Suche). Grundlage sind die Regeln „Liste“ und „Filter-Blatt“ in velodeals.css;
   hier stehen nur die Teile, die im Theme anders sein müssen als auf der Tafel. Alles unter .liste, weil die Datei
   auch auf anderen Produkt-Taxonomien geladen wird. */
.liste [hidden]{display:none!important}
html.vd-gesperrt{overflow:hidden}

/* Kopf der Liste */
.liste .crumb a:hover{color:var(--fg)}
.liste .lhead form{margin:0;font-size:14px}
/* Auf der Tafel nimmt .only-d dem Label das Flex; das Feld steht direkt hinter „Sortieren“ */
.liste .lhead .sort{display:block}

/* Handy-Leiste: unter dem klebenden Kopf (64 px), zwei gleich breite Knöpfe */
.liste .fbar{top:64px}
.liste .fbar .wrap{display:flex;gap:8px;width:100%}
.liste .fbar .btn{flex:1}
.sortm{position:relative;margin:0}
.sortm select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.sortm:focus-within{outline:3px solid var(--fg);outline-offset:2px}

/* Pills sind Knöpfe */
.liste .pill{cursor:pointer;color:var(--fg);font-family:inherit}
.liste .pill.on{color:var(--c-ink)}
.liste .pill[aria-expanded="true"]{box-shadow:0 0 0 2px var(--fg)}
.liste .pill.on[aria-expanded="true"]{box-shadow:0 0 0 2px var(--c-paper)}

/* Ohne aktive Filter fehlt die Chip-Zeile; der Abstand zum Raster bleibt wie mit Chips */
.liste .fpos + .lgrid{margin-top:18px}

/* Chips sind Links */
.liste .chips{margin:14px 0 18px}
.liste .chip.reset{min-height:36px}

/* Größen: Häkchen, die wie die Knöpfe der Tafel aussehen (.sz button) */
.liste .sz label{position:relative;display:block}
.liste .sz input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.liste .sz span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;min-height:40px;padding:0 10px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--bg);font-weight:700;font-size:14px;cursor:pointer;line-height:1.55;text-align:center}
.liste .sz small{display:block;font-size:10.5px;color:var(--mute);font-weight:600;line-height:1}
.liste .sz input:checked + span{background:var(--chip-on);color:var(--chip-on-fg);border-color:var(--chip-on)}
.liste .sz input:checked + span small{color:inherit}
.liste .sz input:focus-visible + span{outline:3px solid var(--fg);outline-offset:2px}
.liste .range input{color:var(--fg);font-size:16px}
.liste .range input::placeholder{color:var(--mute);font-weight:500}
.liste .cb-list label{cursor:pointer}
.liste .cb-list input{flex:0 0 auto}

/* Mehr Filter klappt auf */
.mehrbox > summary{list-style:none;cursor:pointer}
.mehrbox > summary::-webkit-details-marker{display:none}
.mehrbox[open] > summary{border-bottom:0}
.mehrbox > .fg:last-child{border-bottom:1px solid var(--line)}

/* Blatt von unten (Handy) */
.liste .veil{position:fixed;inset:0;z-index:60}
.liste .sheet{position:fixed;z-index:61;max-height:88vh;max-height:88dvh;margin:0}
.liste .sheet .sb{overscroll-behavior:contain}
.liste .sheet .sf [data-filter-loeschen]{flex:0 0 auto}
.liste .sheet .sh b{font-size:18px}

/* Am Computer: dasselbe Formular als Klappfenster unter dem angeklickten Pill */
.fpos{position:relative}
@media (min-width:900px){
  .liste .fpos{z-index:15}
  .liste .veil{display:none!important}
  .liste .sheet{position:absolute;top:8px;left:var(--pop-x,0px);right:auto;bottom:auto;width:380px;max-height:var(--pop-h,min(70vh,620px));
    border-radius:18px;background:var(--c-ink-2);border:1px solid var(--c-ink-3);box-shadow:0 30px 80px -20px oklch(0% 0 0 / .8)}
  .liste .sheet .grip,.liste .sheet .sh{display:none}
  .liste .sheet.pop .sb > .fg,.liste .sheet.pop .sb > .mehrbox{display:none}
  .liste .sheet.pop .sb > .zeigen{display:block}
  .liste .sheet .sb > .zeigen.fg,.liste .sheet .mehrbox.zeigen > .fg:first-of-type{border-top:0}
  .liste .sheet .mehrbox.zeigen > summary{display:none}
  .liste .sheet .mehrbox.zeigen > .fg:last-child{border-bottom:0}
  .liste .sheet .sz span,.liste .sheet .range input{background:var(--c-ink)}
  .liste .sheet .sf{padding:12px 20px 16px}
  .liste .sheet .sf .btn{min-height:48px;font-size:16px}
}

/* Leere Liste und Laden */
.liste .leer{padding:32px 0 48px;color:var(--mute);max-width:56ch}
.liste .leer p{margin:0;font-size:17px}
.liste .pager .btn{color:var(--fg)}
.liste .pager{margin:28px 0 8px}