/*
 * Filterleiste der Shop-Übersicht — patterns/filterleiste.php, Klasse
 * .hh-filterleiste.
 *
 * WAS HIER STEHT UND WARUM
 * WooCommerce liefert die drei Filter mit einem eigenen Kasten aus: heller
 * Grund, eigener Rahmen, eigener Radius. Der Entwurf zeigt statt dessen eine
 * nackte Liste in der Seitenspalte, getrennt durch zwei Haarlinien. Keine
 * dieser Angaben laesst sich als Blockattribut setzen - die Filterbloecke
 * haben weder background- noch border-Attribute (an ihren block.json
 * abgelesen: nur isPreview, showCounts, queryType, displayStyle,
 * selectType, sortOrder, hideEmpty).
 *
 * 🔴 GEMESSENE ABWEICHUNG, die hier NICHT behoben wird:
 * Der Entwurf zeigt die Kategorien als schlichte Liste mit einem Zeichen am
 * rechten Rand, OHNE Ankreuzfeld; nur beim Format zeichnet er Kaestchen.
 * Der Kern kennt fuer beide denselben Anzeigeblock
 * (product-filter-checkbox-list). Das Ankreuzfeld bei den Kategorien
 * wegzunehmen waere keine Farb-, sondern eine BEDIENENTSCHEIDUNG - es ist
 * das einzige sichtbare Zeichen dafuer, dass sich mehrere Kategorien
 * gleichzeitig waehlen lassen. Deshalb bleibt es stehen und steht im
 * Abnahmeblatt als offener Punkt.
 *
 * Ausschliesslich Token, keine Hexfarbe, keine absolute Laenge (P2).
 */

/*
 * Den mitgelieferten Kasten der drei Filter aufloesen.
 */
.hh-filterleiste .wp-block-woocommerce-product-filter-taxonomy,
.hh-filterleiste .wp-block-woocommerce-product-filter-attribute,
.hh-filterleiste .wp-block-woocommerce-product-filter-price {
	background: none;
	border: 0;
	padding: 0;
}

/*
 * Die zwei Haarlinien. Der Entwurf setzt rgba(128,0,139,.1); das Theme kennt
 * nur rand.gedaempft mit 20 Prozent. Die Abweichung in der Deckkraft ist im
 * Kopf von filterleiste.php benannt - ein eigenes Token fuer zwei Linien
 * waere zu viel.
 */
.hh-filterleiste .hh-filter-linie {
	border: 0;
	border-top: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft);
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
	opacity: 1;
}

/*
 * ⚠️ Die zwei Eingabefelder des Preisreglers laufen ohne Deckel aus der
 * 230px-Spalte heraus - gemessen am gebauten Stand, bevor diese Regel
 * existierte: das rechte Feld ragte ueber die Spaltenkante hinaus in das
 * Produktraster. min-width:0 ist noetig, weil ein Eingabefeld eine
 * eingebaute Mindestbreite mitbringt, die width:100% allein nicht schlaegt -
 * dieselbe Fehlerklasse wie beim Suchsymbol im Kopf.
 */
.hh-filterleiste .wc-block-product-filter-price-slider__left input,
.hh-filterleiste .wc-block-product-filter-price-slider__right input,
.hh-filterleiste .wc-block-product-filter-price-slider input[type="text"] {
	width: 100%;
	min-width: 0;
	border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft);
	border-radius: var(--wp--custom--radius--eingabe);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-light);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/*
 * 🔴 WooCommerce fasst die Ankreuzliste in ein <fieldset>. Gemessen am
 * gebauten Stand: der Browser gibt einem <fieldset> ohne eigene Regel
 * "2px groove rgb(240,240,240)" plus eigenes Polster - sichtbar als heller
 * Kasten um jede Filtergruppe, den der Entwurf nicht zeigt. Das Theme setzt
 * <fieldset> nirgends zurueck, weil es bis Etappe C keins gab. Kein
 * Blockattribut kann das erreichen; die Regel gehoert genau hierher.
 */
.hh-filterleiste fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/*
 * Die Beschriftungen der Ankreuzlisten auf die Fliesstextschrift ziehen -
 * WooCommerce setzt dort seine eigene Groesse.
 */
.hh-filterleiste .wc-block-product-filter-checkbox-list__label,
.hh-filterleiste .wc-block-product-filter-checkbox-list label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
}