Produktfilter: Leiste mit Sortierung und Kategorie, einheitliche Abstände

Die Leiste über den Produktkacheln hat Sortierung und im Sortiment eine Kategorieauswahl; Felder gleich hoch und auf einer Grundlinie, am Handy unter einem umrandeten Knopf mit Zahl der aktiven Filter. Ohne Treffer nennt der Hinweis den Filter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 42 insertions, 12 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 4515211..d40cf5b 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -649,18 +649,48 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 /* Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto */
 .wpsg-block-product-list :where(.wpsg-product-list__count) { margin:0 0 var(--wpsg-gap); }
 .wpsg-block-product-list :where(.wpsg-product-list__count:empty) { display:none; }
-/* Produktkacheln (Abfrage-Schleife, Kategorievorlage): Statuszeile des Filters und Filter als Leiste über den Kacheln */
-.wpsg-product-tiles :where(.wpsg-product-list__count) { margin:0 0 var(--wpsg-gap); }
-.wpsg-product-tiles :where(.wpsg-product-list__count:empty) { display:none; }
-.wpsg-product-tiles :where(.wpsg-block-product-filter) { margin:0 0 calc(var(--wpsg-gap) * 2) 0; }
-.wpsg-product-tiles :where(.wpsg-pvf__fields) { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--wpsg-gap) calc(var(--wpsg-gap) * 2); margin-top:var(--wpsg-gap); }
-.wpsg-product-tiles :where(.wpsg-pvf__fields > .wpsg-pvf__item) { margin:0; }
-.wpsg-product-tiles :where(.wpsg-pvf__fields > .wpsg-pvf__actions) { align-self:flex-end; }
-.wpsg-pvf__summary { display:inline-flex; list-style:none; cursor:pointer; }
-.wpsg-pvf__summary::-webkit-details-marker { display:none; }
+/*
+ * Produktkacheln (Abfrage-Schleife, Kategorievorlage): Statuszeile und Filter als Leiste über den Kacheln.
+ * Abstände aus dem Theme (Blocklücke, Spacing-Presets); alle Felder und Knöpfe gleich hoch, auf einer Grundlinie.
+ * Höhere Spezifität als die Fluss-Regel des Kerns (:root :where(.is-layout-flow) > *), die sonst den Abstand nimmt.
+ */
+.wpsg-product-tiles { --wpsg-pvf-gap:var(--wp--style--block-gap, var(--wpsg-gap)); --wpsg-pvf-gap-small:var(--wp--preset--spacing--20, 0.5em); --wpsg-pvf-control:2.75em; }
+.wpsg-product-tiles > .wpsg-product-list__count { margin-block:0 var(--wpsg-pvf-gap); }
+.wpsg-product-tiles > .wpsg-product-list__count:empty { display:none; }
+.wpsg-product-tiles > .wpsg-block-product-filter { margin-block:var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--60, 2rem); }
+.wpsg-product-tiles .wpsg-pvf__fields { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--wpsg-pvf-gap); padding:var(--wp--preset--spacing--40, 1rem); border:1px solid var(--wpsg-color-line-soft); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-surface); }
+.wpsg-product-tiles .wpsg-pvf__fields > * { margin:0; padding:0; border:0; min-width:0; }
+.wpsg-product-tiles .wpsg-pvf__title { display:block; margin:0 0 var(--wpsg-pvf-gap-small) 0; padding:0; font-size:inherit; font-weight:600; line-height:1.3; }
+.wpsg-product-tiles .wpsg-pvf__options { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap-small) var(--wpsg-pvf-gap); min-height:var(--wpsg-pvf-control); }
+.wpsg-product-tiles .wpsg-pvf__price .wpsg-pvf__options { flex-wrap:nowrap; gap:var(--wpsg-pvf-gap-small); }
+.wpsg-product-tiles .wpsg-pvf__price label { display:flex; flex:1 1 0; align-items:center; gap:var(--wpsg-pvf-gap-small); min-width:0; }
+.wpsg-product-tiles .wpsg-pvf__price label > span { min-width:0; }
+.wpsg-product-tiles .wpsg-pvf__price input { flex:1 1 auto; width:6em; min-width:0; }
+.wpsg-product-tiles .wpsg-pvf__option { margin:0; }
+.wpsg-product-tiles .wpsg-pvf input[type="checkbox"] { width:1.25em; height:1.25em; margin:0; }
+/* Felder, Auswahllisten und Knöpfe gleich hoch */
+.wpsg-product-tiles .wpsg-pvf :is(input[type="number"], select, .wpsg-pvf__actions .wpsg_button) { box-sizing:border-box; height:var(--wpsg-pvf-control); margin:0; padding-block:0; }
+.wpsg-product-tiles .wpsg-pvf .wpsg-pvf__actions .wpsg_button { display:inline-flex; align-items:center; justify-content:center; }
+.wpsg-product-tiles .wpsg-pvf__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap); }
+.wpsg-product-tiles .wpsg-pvf__reset[hidden] { display:none; }
+/* Knopf „Filter“ (nur am Handy): umrandet, Pfeil dreht sich, Zahl der aktiven Filter */
+.wpsg-product-tiles .wpsg-pvf__summary, .wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__summary { box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--wpsg-pvf-gap-small); min-height:var(--wpsg-pvf-control); padding:0 1.2em; border:1px solid currentColor; border-radius:var(--wpsg-radius); background:transparent; color:inherit; font-weight:600; list-style:none; cursor:pointer; }
+.wpsg-product-tiles .wpsg-pvf__summary::-webkit-details-marker { display:none; }
+.wpsg-product-tiles .wpsg-pvf__summary::after { content:""; width:0.45em; height:0.45em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-25%) rotate(45deg); transition:transform 0.15s ease-out; }
+.wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__summary::after { transform:translateY(25%) rotate(-135deg); }
+.wpsg-product-tiles .wpsg-pvf__badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.5em; padding:0 0.4em; border:1px solid currentColor; border-radius:999px; font-size:var(--wpsg-font-size-small); line-height:1.4; }
+.wpsg-product-tiles .wpsg-pvf__badge[hidden] { display:none; }
+.wpsg-product-tiles .wpsg-pvf__none { margin:0; }
+@media (max-width:781px) {
+	.wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__fields { margin-top:var(--wpsg-pvf-gap-small); }
+	.wpsg-product-tiles .wpsg-pvf__fields { flex-direction:column; align-items:stretch; }
+	.wpsg-product-tiles .wpsg-pvf__select select { width:100%; }
+	/* Feste Breite zählte sonst als Mindestbreite und schob die Zeile über den Rand */
+	.wpsg-product-tiles .wpsg-pvf__price input { flex-basis:5em; width:0; }
+	.wpsg-product-tiles .wpsg-pvf__actions .wpsg_button { flex:1 1 auto; }
+}
 @media (min-width:782px) {
-	.wpsg-pvf__toggle > .wpsg-pvf__summary { display:none; }
-	.wpsg-product-tiles :where(.wpsg-pvf__fields) { margin-top:0; }
+	.wpsg-product-tiles .wpsg-pvf__toggle > .wpsg-pvf__summary, .wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__summary { display:none; }
 }
 .wpsg-block-product-list :where(.wpsg-product-list__items) { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 3), minmax(0, 1fr)); gap:calc(var(--wpsg-gap) * 2) var(--wpsg-gap); list-style:none; margin:0; padding:0; }
 .wpsg-block-product-list :where(.wpsg-product-list__item) { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; }
@@ -711,7 +741,7 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg-pvf :where(.wpsg-pvf__item) { margin:0 0 var(--wpsg-gap) 0; padding:0; border:0; min-width:0; }
 .wpsg-pvf :where(.wpsg-pvf__title) { margin:0 0 0.5em 0; padding:0; font-size:1em; font-weight:bold; }
 .wpsg-pvf :where(.wpsg-pvf__item ul) { margin:0; padding-left:1.2em; }
-.wpsg-pvf :where(.wpsg-pvf__price) { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; }
+.wpsg-pvf :where(.wpsg-pvf__price .wpsg-pvf__options) { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; }
 .wpsg-pvf :where(.wpsg-pvf__price label) { display:flex; align-items:center; gap:0.35em; }
 .wpsg-pvf :where(.wpsg-pvf__price input) { width:7em; }
 .wpsg-pvf :where(.wpsg-pvf__price label > span) { min-width:1.75em; }