/**
 * Filter-Modul – Frontend-Struktur.
 *
 * Struktur ist statisch; gestaltbare Werte laufen über --pasf-*-Variablen, auf
 * .pasf gescopt (konsistent zur CSS-Custom-Property-Strategie des Plugins). Die
 * konkreten Werte erzeugt PAS_Filter_Design_CSS als Inline-Style; hier stehen nur
 * die Fallbacks (Theme-Standard, falls eine Variable nicht gesetzt ist).
 *
 * Die responsive/Drawer-Media-Query wird NICHT hier hartcodiert, sondern dynamisch
 * aus dem konfigurierten Breakpoint generiert (PAS_Filter_Design_CSS::structure_css()),
 * damit Backend-Breakpoint und CSS konsistent bleiben.
 */
.pasf {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: var(--pasf-panel-gap, 24px);
	align-items: start;
}

/* Modi ohne eigene Ergebnis-Loop (existing_loop/filter_only) und das Layout
   „stacked": die Filter stehen allein/untereinander – keine zweite Grid-Spalte. */
.pasf[data-mode='existing_loop'],
.pasf[data-mode='filter_only'] {
	display: block;
}

/* --- Filterspalte --------------------------------------------------------- */
.pasf-filters {
	min-width: 0;
	background: var(--pasf-panel-bg, transparent);
	border-radius: var(--pasf-panel-radius, 0);
	padding: var(--pasf-panel-padding, 0);
}

.pasf-drawer-title {
	display: none;
	margin: 0 0 18px;
	padding-inline-end: 44px;
	color: var(--pasf-drawer-title-color, inherit);
	font-family: var(--pasf-drawer-title-font, inherit);
	font-size: var(--pasf-drawer-title-size, 20px);
	font-weight: var(--pasf-drawer-title-weight, 600);
	line-height: 1.25;
	text-align: var(--pasf-drawer-title-align, left);
}

.pasf-design-preview[data-drawer='always'].pasf-drawer-open .pasf-drawer-title {
	display: block;
}

.pasf[data-drawer-title-show='0'] .pasf-drawer-title,
.pasf-filters[data-drawer-title-show='0'] .pasf-drawer-title {
	display: none !important;
}

.pasf-form {
	display: flex;
	flex-direction: column;
	gap: var(--pasf-panel-gap, 18px);
}

.pasf-group {
	border: 0;
	margin: 0;
	padding: 0;
}

.pasf-legend {
	display: flex;
	align-items: center;
	gap: var(--pasf-panel-border-gap, 14px);
	box-sizing: border-box;
	width: 100%;
	font-family: var(--pasf-panel-legend-font, inherit);
	font-weight: var(--pasf-panel-legend-weight, 600);
	font-size: var(--pasf-panel-legend-size, 14px);
	color: var(--pasf-panel-legend-color, inherit);
	padding: 0;
	margin: 0 0 8px;
	cursor: default;
}

.pasf-legend::after {
	content: "";
	display: var(--pasf-panel-border-display, block);
	flex: 1 1 auto;
	min-width: 24px;
	border-top: 1px solid var(--pasf-panel-border-color, #e5e7eb);
}

.pasf-group--dropdown summary.pasf-legend {
	cursor: pointer;
	list-style: revert;
}

.pasf-options {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Theme-/WooCommerce-Listenstile aushebeln (Bullets, Einrückung, Hintergründe). */
.pasf-options li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	text-indent: 0 !important;
}

.pasf-options li::before,
.pasf-options li::marker {
	content: none !important;
	display: none !important;
}

.pasf-group--swatch .pasf-options,
.pasf-group--chip .pasf-options {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--pasf-swatch-gap, 10px);
}

.pasf-group--chip .pasf-options {
	gap: var(--pasf-chip-gap, 8px);
}

.pasf-option-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	line-height: 1.3;
	font-family: var(--pasf-option-font-family, inherit);
	font-size: var(--pasf-option-font-size, 14px);
	font-weight: var(--pasf-option-font-weight, inherit);
	color: var(--pasf-option-text-color, inherit);
}

.pasf-check {
	accent-color: var(--pasf-option-accent, #111827);
}

.pasf-option-count {
	color: var(--pasf-option-count-color, #6b7280);
	font-size: 0.85em;
}

/* 0-Treffer-Optionen: ausgegraut und nicht klickbar (nicht verstecken – §3.5). */
.pasf-option--disabled {
	opacity: 0.4;
}

.pasf-option--disabled .pasf-option-label {
	cursor: not-allowed;
}

/* Swatch-Darstellung: Checkbox verstecken, Swatch klickbar. */
.pasf-group--swatch .pasf-check {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pasf-swatch {
	display: inline-block;
	position: relative;
	width: var(--pasf-swatch-size, 22px);
	height: var(--pasf-swatch-size, 22px);
	border-radius: var(--pasf-swatch-radius, 999px);
	border: var(--pasf-swatch-border-width, 1px) solid var(--pasf-swatch-border-color, #e5e7eb);
	background-size: cover;
	background-position: center;
}

.pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch {
	outline: var(--pasf-swatch-border-width-selected, 2px) solid var(--pasf-swatch-border-color-selected, #111827);
	outline-offset: 2px;
}

.pasf[data-marker='check'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch,
.pasf-filters[data-pasf-portal-active='1'][data-marker='check'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch {
	border-color: var(--pasf-swatch-border-color-selected, #111827);
	border-width: var(--pasf-swatch-border-width-selected, 2px);
	outline: 0;
}

.pasf[data-marker='check'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch::after,
.pasf-filters[data-pasf-portal-active='1'][data-marker='check'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch::after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--pasf-swatch-border-color-selected, #111827);
	box-shadow: 0 0 0 2px var(--pasf-drawer-bg, #fff);
}

.pasf[data-marker='check'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch::before,
.pasf-filters[data-pasf-portal-active='1'][data-marker='check'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch::before {
	content: "";
	position: absolute;
	z-index: 1;
	right: -1px;
	bottom: -1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Marker „Unterstrich" (gespiegelt von der Attribut-Darstellung, eigene Vars). */
.pasf[data-marker='underline'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch,
.pasf-filters[data-pasf-portal-active='1'][data-marker='underline'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch {
	outline: 0;
}

.pasf[data-marker='underline'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch::after,
.pasf-filters[data-pasf-portal-active='1'][data-marker='underline'] .pasf-group--swatch .pasf-option-label.is-selected .pasf-swatch::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--pasf-swatch-underline-offset, 6px));
	height: var(--pasf-swatch-underline-width, 2px);
	background: var(--pasf-swatch-underline-color, var(--pasf-swatch-border-color-selected, #111827));
}

.pasf-swatch--none {
	background: repeating-linear-gradient( 45deg, #fff, #fff 4px, #e5e7eb 4px, #e5e7eb 8px );
}

/* --- Chip-Darstellung (UI-Typ; funktional in einer späteren Phase) -------- */
.pasf-group--chip .pasf-check {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pasf-group--chip .pasf-option-label {
	gap: 0;
	background: var(--pasf-chip-bg, #f3f4f6);
	color: var(--pasf-chip-text, #111827);
	border: var(--pasf-chip-border-width, 1px) solid var(--pasf-chip-border-color, #d1d5db);
	border-radius: var(--pasf-chip-radius, 999px);
	padding: var(--pasf-chip-padding-y, 8px) var(--pasf-chip-padding-x, 16px);
	font-family: var(--pasf-chip-font-family, inherit);
	font-weight: var(--pasf-chip-font-weight, 500);
	font-size: var(--pasf-chip-font-size, 14px);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pasf-group--chip .pasf-option-label:hover {
	background: var(--pasf-chip-bg-hover, #e5e7eb);
}

.pasf-group--chip .pasf-option-label.is-selected {
	background: var(--pasf-chip-bg-selected, #111827);
	color: var(--pasf-chip-text-selected, #fff);
	border-color: var(--pasf-chip-bg-selected, #111827);
}

/* Single-Select: Dropdown-Menü */
.pasf-group--select .pasf-select {
	width: 100%;
	padding: 8px 10px;
	border: var(--pasf-dropdown-border-width, 1px) solid var(--pasf-dropdown-border-color, #d1d5db);
	border-radius: var(--pasf-dropdown-radius, 8px);
	background: var(--pasf-dropdown-bg, #fff);
	font-family: var(--pasf-dropdown-font-family, var(--pasf-option-font-family, inherit));
	font-size: var(--pasf-dropdown-font-size, var(--pasf-option-font-size, 14px));
	font-weight: var(--pasf-dropdown-font-weight, var(--pasf-option-font-weight, inherit));
	color: var(--pasf-dropdown-text, var(--pasf-option-text-color, inherit));
	cursor: pointer;
}

/* Single-Select: reine Wörter-Liste (ohne Checkbox/Radio) */
.pasf-wordlist {
	gap: 2px;
}

.pasf-listitem {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 4px 6px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	line-height: 1.3;
	border-radius: var(--pasf-option-radius, 6px);
	font-family: var(--pasf-option-font-family, inherit);
	font-size: var(--pasf-option-font-size, 14px);
	font-weight: var(--pasf-option-font-weight, inherit);
	color: var(--pasf-option-text-color, inherit);
}

.pasf-listitem:hover {
	background: var(--pasf-chip-bg-hover, #f3f4f6);
}

.pasf-listitem.is-selected {
	font-weight: 600;
	color: var(--pasf-option-accent, #111827);
}

/* Produkt-Kategorien: eigene Darstellung; leere Werte erben vom Theme. */
.pasf-group--category .pasf-option-label,
.pasf-group--category .pasf-listitem {
	background: var(--pasf-category-bg, transparent);
	border-radius: var(--pasf-category-radius, var(--pasf-option-radius, 6px));
	font-family: var(--pasf-category-font-family, inherit);
	font-size: var(--pasf-category-font-size, inherit);
	font-weight: var(--pasf-category-font-weight, inherit);
	color: var(--pasf-category-text-color, inherit);
}

.pasf-group--category .pasf-select {
	background: var(--pasf-category-bg, var(--pasf-dropdown-bg, #fff));
	border-radius: var(--pasf-category-radius, var(--pasf-dropdown-radius, 8px));
	font-family: var(--pasf-category-font-family, inherit);
	font-size: var(--pasf-category-font-size, inherit);
	font-weight: var(--pasf-category-font-weight, inherit);
	color: var(--pasf-category-text-color, inherit);
}

.pasf-group--category .pasf-select:hover {
	background: var(--pasf-category-bg-hover, var(--pasf-category-bg, var(--pasf-dropdown-bg-hover, var(--pasf-dropdown-bg, #fff))));
	color: var(--pasf-category-text-hover, var(--pasf-category-text-color, inherit));
}

.pasf-group--category .pasf-option-count {
	color: var(--pasf-category-count-color, inherit);
}

.pasf-group--category .pasf-option-label:hover,
.pasf-group--category .pasf-listitem:hover {
	/* Kein Chip-Fallback: Kategorien erben nie die Chip-Hover-Farbe (auch wenn sie
	   nicht als Chips dargestellt werden). Ohne eigenen Hover-Wert bleibt der
	   Hintergrund wie im Normalzustand (Kategorie-BG bzw. transparent). */
	background: var(--pasf-category-bg-hover, var(--pasf-category-bg, transparent));
	color: var(--pasf-category-text-hover, var(--pasf-category-text-color, inherit));
}

.pasf-group--category .pasf-listitem.is-selected,
.pasf-group--category .pasf-option-label.is-selected {
	color: var(--pasf-category-accent, var(--pasf-category-text-color, inherit));
}

/* Hierarchie: Kind-Knoten einrücken (Tiefe via --pasf-depth). */
.pasf-group--hierarchy .pasf-option--child {
	padding-inline-start: calc(var(--pasf-depth, 0) * 1.1em) !important;
}

/* Parents (Kategorien mit Unterkategorien): eigenes Schriftgewicht. */
.pasf-group--category .pasf-option--parent .pasf-option-label,
.pasf-group--category .pasf-option--parent .pasf-listitem {
	font-weight: var(--pasf-category-font-weight-parent, var(--pasf-category-font-weight, inherit));
}

/* Preis */
.pasf-price {
	display: flex;
	gap: 10px;
}

.pasf-price-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85em;
	flex: 1;
}

.pasf-price-field input {
	box-sizing: border-box;
	width: 100%;
	height: var(--pasf-price-field-height, auto);
	padding: 0 12px;
	border: 1px solid var(--pasf-price-field-border, #d1d5db);
	border-radius: var(--pasf-price-field-radius, 4px);
}

/* „Getrennte Felder (von/bis)": Zahlenfelder nicht über die volle Breite ziehen. */
.pasf[data-price-mode='fields'] .pasf-price-field,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='fields'] .pasf-price-field {
	max-width: 150px;
}

.pasf[data-price-mode='fields'] .pasf-price-slider,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='fields'] .pasf-price-slider {
	display: none;
}

.pasf[data-price-mode='both'] .pasf-price,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='both'] .pasf-price {
	order: 1;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 8px 0 -2px;
}

.pasf[data-price-mode='both'] .pasf-price-field,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='both'] .pasf-price-field {
	flex: 0 1 104px;
	max-width: 112px;
}

.pasf[data-price-mode='both'] .pasf-price-field input,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='both'] .pasf-price-field input {
	max-width: 112px;
}

.pasf[data-price-mode='both'] .pasf-price-slider,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='both'] .pasf-price-slider {
	order: 2;
}

.pasf[data-price-mode='both'] .pasf-price-slider__values,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='both'] .pasf-price-slider__values {
	display: none;
}

.pasf [hidden],
.pasf-filters [hidden],
.pasf-active-filters[hidden],
.pasf-reset[hidden],
.pasf-resetall[hidden],
.pasf-price-slider[hidden] {
	display: none !important;
}

.pasf[data-price-mode='slider'] .pasf-price,
.pasf-filters[data-pasf-portal-active='1'][data-price-mode='slider'] .pasf-price,
.pasf-price-mode--slider .pasf-price {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pasf-price-slider {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0 4px;
	touch-action: none;
}

.pasf-price-slider__values {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: var(--pasf-option-text-color, inherit);
	font-family: var(--pasf-option-font-family, inherit);
	font-size: var(--pasf-option-font-size, 14px);
	font-weight: var(--pasf-option-font-weight, inherit);
}

.pasf-price-slider__separator {
	color: var(--pasf-option-count-color, #6b7280);
}

.pasf-slider-track {
	position: relative;
	height: 4px;
	margin: calc(var(--pasf-price-handle-size, 16px) / 2) calc(var(--pasf-price-handle-size, 16px) / 2);
	border-radius: 999px;
	background: var(--pasf-price-track-color, #e5e7eb);
}

.pasf-slider-range {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pasf-price-range-start, 0%);
	right: var(--pasf-price-range-end, 0%);
	border-radius: inherit;
	background: var(--pasf-price-range-color, #111827);
}

.pasf-slider-handle {
	position: absolute;
	top: 50%;
	width: var(--pasf-price-handle-size, 16px);
	height: var(--pasf-price-handle-size, 16px);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--pasf-price-handle-color, #111827);
	box-shadow: 0 0 0 3px var(--pasf-drawer-bg, #fff), 0 1px 4px rgba(0, 0, 0, 0.2);
	cursor: grab;
	transform: translate(-50%, -50%);
}

.pasf-slider-handle:focus-visible {
	outline: 2px solid var(--pasf-price-range-color, #111827);
	outline-offset: 4px;
}

.pasf-slider-handle:active {
	cursor: grabbing;
}

.pasf-slider-handle--min {
	left: var(--pasf-price-min-pos, 0%);
}

.pasf-slider-handle--max {
	left: var(--pasf-price-max-pos, 100%);
}

/* --- Buttons (Filter-Toggle + Reset) -------------------------------------- */
.pasf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pasf-button-bg, #fff);
	color: var(--pasf-button-text, inherit);
	border: var(--pasf-button-border-width, 1px) solid var(--pasf-button-border-color, #e5e7eb);
	border-radius: var(--pasf-button-radius, 8px);
	padding: var(--pasf-button-padding-y, 10px) var(--pasf-button-padding-x, 16px);
	font-family: var(--pasf-button-font-family, inherit);
	font-weight: var(--pasf-button-font-weight, inherit);
	font-size: var(--pasf-button-font-size, 14px);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pasf-btn:hover {
	background: var(--pasf-button-bg-hover, var(--pasf-button-bg, #fff));
	color: var(--pasf-button-text-hover, var(--pasf-button-text, inherit));
	border-color: var(--pasf-button-border-color-hover, #111827);
}

.pasf-btn__icon {
	flex: 0 0 auto;
}

.pasf-reset {
	align-self: flex-start;
}

/* --- Ergebnisspalte ------------------------------------------------------- */
.pasf-results {
	margin-top: 10px;
	min-width: 0;
	transition: opacity 0.15s ease;
}

.pasf-results[aria-busy='true'] {
	opacity: 0.5;
	pointer-events: none;
}

.pasf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.pasf-count {
	color: #6b7280;
}

.pasf-empty {
	text-align: center;
	padding: 40px 20px;
}

/* Sortier-Select (erbt die Dropdown-Optik). */
.pasf-sort-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pasf-sort-label {
	color: var(--pasf-panel-legend-color, inherit);
	font-family: var(--pasf-panel-legend-font, inherit);
	font-weight: var(--pasf-panel-legend-weight, 600);
	font-size: var(--pasf-panel-legend-size, 14px);
}

.pasf-sort {
	background: var(--pasf-dropdown-bg, #fff);
	color: var(--pasf-dropdown-text, #1f2937);
	border: var(--pasf-dropdown-border-width, 1px) solid var(--pasf-dropdown-border-color, #d1d5db);
	height: var(--pasf-dropdown-height, auto);
	border-radius: var(--pasf-dropdown-radius, 8px);
	font-family: var(--pasf-dropdown-font-family, inherit);
	font-weight: var(--pasf-dropdown-font-weight, inherit);
	font-size: var(--pasf-dropdown-font-size, inherit);
	padding: 0 10px;
}

.pasf-group--select .pasf-select:hover,
.pasf-sort:hover {
	background: var(--pasf-dropdown-bg-hover, var(--pasf-dropdown-bg, #fff));
}

/* Paginierung */
.pasf-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 24px;
}

.pasf-page {
	min-width: 38px;
	padding: 8px 12px;
	border: 1px solid var(--pasf-pagination-border-color, #e5e7eb);
	border-radius: var(--pasf-pagination-radius, 8px);
	background: var(--pasf-pagination-bg, #fff);
	color: var(--pasf-pagination-text, inherit);
	cursor: pointer;
}

.pasf-page:hover {
	border-color: var(--pasf-pagination-active-bg, #111827);
}

.pasf-page.is-current {
	background: var(--pasf-pagination-active-bg, #111827);
	color: var(--pasf-pagination-active-text, #fff);
	border-color: var(--pasf-pagination-active-bg, #111827);
}

.pasf-ellipsis {
	padding: 8px 4px;
	color: #9ca3af;
}

/* „Mehr laden" / „Endlos scrollen". */
.pasf-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.pasf-load-more {
	justify-content: center;
}

.pasf-infinite-sentinel {
	width: 100%;
	height: 1px;
}

/* --- Drawer-Toggle -------------------------------------------------------- */
/* Standard ausgeblendet; Breakpoints mit Darstellung "drawer" blenden ihn ueber
   die generierten Struktur-Regeln ein (PAS_Filter_Design_CSS). */
.pasf-drawer-toggle {
	display: none;
	margin-bottom: 16px;
}

/* Overlay des aktiven Drawers. */
.pasf-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483645;
	display: none;
	padding: 0;
	background: var(--pasf-drawer-overlay, rgba(0, 0, 0, 0.5));
	border: 0;
	cursor: pointer;
}

/* Close-Button sitzt immer in der oberen rechten Ecke des Panels (unabhängig
   von der Drawer-Seite). Absolut im fixierten/relativen Panel positioniert. */
.pasf-drawer-close {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	margin: 0;
	padding: 4px 10px;
	font-size: 22px;
	line-height: 1;
}

body.pasf-has-open-drawer {
	overflow: hidden;
}

/* --- Aktive Filter (entfernbare Chips) ----------------------------------- */
.pasf-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 4px;
}

/* Im Grid-Layout (own_loop, responsive) volle Breite über beiden Spalten. */
.pasf > .pasf-active-filters {
	grid-column: 1 / -1;
}

/* Im Drawer oben sitzt die Leiste innerhalb des Panels – etwas Abstand nach unten. */
.pasf-filters > .pasf-active-filters {
	margin-bottom: 16px;
}

/* Chips fließen direkt in die Flex-Leiste (neben „Alle zurücksetzen"). */
.pasf-active-filters__list {
	display: contents;
}

/* --- „Alle zurücksetzen" (Link-Text / Chip / Button) --------------------- */
.pasf-resetall {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 1.4;
	font-family: var(--pasf-resetall-font-family, inherit);
	font-weight: var(--pasf-resetall-font-weight, 500);
	font-size: var(--pasf-resetall-font-size, 13px);
	color: var(--pasf-resetall-text, #1f2937);
	text-decoration: underline;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pasf-resetall:hover {
	color: var(--pasf-resetall-text-hover, var(--pasf-resetall-text, #1f2937));
}

/* Chip- und Button-Darstellung: Box mit Hintergrund, Rahmen und Innenabstand. */
.pasf-resetall[data-display="chip"],
.pasf-resetall[data-display="button"] {
	text-decoration: none;
	padding: var(--pasf-resetall-padding-y, 4px) var(--pasf-resetall-padding-x, 12px);
	background: var(--pasf-resetall-bg, #fff);
	border: var(--pasf-resetall-border-width, 1px) solid var(--pasf-resetall-border-color, #e5e7eb);
}

.pasf-resetall[data-display="chip"] {
	border-radius: 999px;
}

.pasf-resetall[data-display="button"] {
	border-radius: var(--pasf-resetall-radius, 8px);
}

.pasf-resetall[data-display="chip"]:hover,
.pasf-resetall[data-display="button"]:hover {
	background: var(--pasf-resetall-bg-hover, var(--pasf-resetall-bg, #fff));
	color: var(--pasf-resetall-text-hover, var(--pasf-resetall-text, inherit));
	border-color: var(--pasf-resetall-border-color-hover, var(--pasf-resetall-border-color, #e5e7eb));
}

.pasf-active-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pasf-active-filter-color, #1f2937);
	background: var(--pasf-active-filter-bg, #eef2ff);
	border: 1px solid var(--pasf-active-filter-border-color, #c7d2fe);
	border-radius: 999px;
	cursor: pointer;
}

.pasf-active-filter:hover {
	background: var(--pasf-active-filter-hover-bg, #e0e7ff);
}

.pasf-active-filter__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	border-radius: 50%;
}

.pasf-active-filter:hover .pasf-active-filter__remove {
	background: rgba(0, 0, 0, 0.08);
}

/* --- Kopf-Filter (horizontale Popover-Leiste über der Loop) --------------- */
/* Trigger-Button und Popover-Wrapper werden vom JS erzeugt und existieren immer.
   Im Normalmodus ist der Trigger verborgen und der Wrapper layout-transparent
   (display:contents), sodass die Sidebar-/Drawer-Darstellung unverändert bleibt. */
.pasf-hbtn {
	display: none;
}

.pasf-hpop {
	display: contents;
}

/* Aktiver Kopf-Filter (Klasse wird vom JS je Breakpoint gesetzt): Leiste statt
   Sidebar/Drawer; Drawer-Steuerung in diesem Band ausgeblendet. */
.pasf.pasf-header {
	display: block;
}

.pasf.pasf-header .pasf-drawer-toggle,
.pasf.pasf-header .pasf-drawer-close,
.pasf.pasf-header .pasf-drawer-title {
	display: none !important;
}

.pasf.pasf-header .pasf-filters {
	background: var(--pasf-panel-bg, transparent);
	border-radius: var(--pasf-panel-radius, 0);
	padding: var(--pasf-panel-padding, 0);
}

.pasf.pasf-header .pasf-form {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.pasf.pasf-header .pasf-group {
	position: relative;
	border-top: 0;
	padding: 0;
}

.pasf.pasf-header .pasf-legend::after {
	display: none;
}

.pasf.pasf-header .pasf-hbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: var(--pasf-dropdown-bg, #fff);
	color: var(--pasf-dropdown-text, #1f2937);
	border: var(--pasf-dropdown-border-width, 1px) solid var(--pasf-dropdown-border-color, #d1d5db);
	border-radius: var(--pasf-dropdown-header-radius, var(--pasf-dropdown-radius, 8px));
	padding: 8px 14px;
	font-family: var(--pasf-dropdown-font-family, var(--pasf-panel-legend-font, inherit));
	font-weight: var(--pasf-dropdown-font-weight, var(--pasf-panel-legend-weight, 600));
	font-size: var(--pasf-dropdown-font-size, var(--pasf-panel-legend-size, 14px));
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pasf.pasf-header .pasf-hbtn:hover {
	background: var(--pasf-dropdown-bg-hover, var(--pasf-dropdown-bg, #fff));
}

.pasf.pasf-header .pasf-hbtn::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin: -3px 0 0 2px;
	transition: transform 0.15s ease;
}

.pasf.pasf-header .pasf-hgroup.is-open .pasf-hbtn::after {
	transform: rotate(225deg);
	margin-top: 1px;
}

.pasf.pasf-header .pasf-hbtn__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--pasf-dropdown-badge-radius, 999px);
	background: var(--pasf-dropdown-badge-bg, var(--pasf-pagination-active-bg, #111827));
	color: var(--pasf-dropdown-badge-text, var(--pasf-pagination-active-text, #fff));
	font-family: var(--pasf-dropdown-badge-font-family, var(--pasf-dropdown-font-family, inherit));
	font-size: var(--pasf-dropdown-badge-font-size, 11px);
	font-weight: var(--pasf-dropdown-badge-font-weight, 600);
}

.pasf.pasf-header .pasf-hbtn__badge[hidden] {
	display: none;
}

.pasf.pasf-header .pasf-hpop {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 2147483646;
	min-width: 240px;
	max-width: min(90vw, 360px);
	max-height: 70vh;
	overflow: auto;
	background: var(--pasf-drawer-bg, #fff);
	border: 1px solid var(--pasf-panel-border-color, #e5e7eb);
	border-radius: var(--pasf-panel-radius, 10px);
	padding: 14px 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.pasf.pasf-header .pasf-hgroup.is-open .pasf-hpop {
	display: block;
}

/* Nahe am rechten Rand rechtsbündig öffnen (Klasse vom JS gesetzt). */
.pasf.pasf-header .pasf-hgroup.pasf-pop-right .pasf-hpop {
	left: auto;
	right: 0;
}

/* Das Label trägt der Trigger; die Legende/Summary der Gruppe ausblenden – egal ob
   direktes Kind (Checkbox/Preis/Lager) oder Summary im Popover (Aufklappliste). */
.pasf.pasf-header .pasf-hgroup .pasf-legend {
	display: none;
}

/* Sortierung bleibt als kompaktes Select inline in der Leiste. */
.pasf.pasf-header .pasf-group--sort {
	align-self: center;
}