.kpf {
	--kpf-border: #e5e7eb;
	--kpf-muted: #6b7280;
	--kpf-surface: #fff;
	--kpf-soft: #f7f7f8;
	margin-block: 0 24px;
	padding: 16px;
	border: 1px solid var(--kpf-border);
	border-radius: 12px;
	background: var(--kpf-surface);
	box-shadow: 0 5px 20px rgba(0, 0, 0, .04);
}

.kpf,
.kpf__topbar,
.kpf__groups,
.kpf__current,
.kpf__chips {
	display: flex;
	flex-direction: column;
}

.kpf {
	gap: 14px;
}

.kpf__topbar {
	align-items: stretch;
	gap: 10px;
}

.kpf__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.5;
}

.kpf__reset,
.kpf__status button {
	appearance: none;
	width: 100%;
	border: 1px solid var(--kpf-border);
	border-radius: 8px;
	background: var(--kpf-surface);
	padding: 8px 11px;
	font: inherit;
	cursor: pointer;
}

.kpf__reset:disabled {
	display: none;
}

.kpf__groups {
	gap: 12px;
}

.kpf-group {
	width: 100%;
	border: 1px solid var(--kpf-border);
	border-radius: 10px;
	overflow: hidden;
}

.kpf-group__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 12px;
	font-weight: 700;
	cursor: pointer;
	background: var(--kpf-soft);
}

.kpf-group__count {
	display: inline-grid;
	place-items: center;
	min-width: 23px;
	height: 23px;
	padding-inline: 6px;
	border-radius: 999px;
	background: var(--kpf-surface);
	font-size: .78rem;
}

.kpf-group__body {
	padding: 10px;
}

.kpf-group__search {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	margin-block-end: 9px;
	border: 1px solid var(--kpf-border);
	border-radius: 8px;
	padding-inline: 10px;
	font: inherit;
}

.kpf-group__options {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-height: 320px;
	overflow: auto;
	overscroll-behavior: contain;
}

.kpf-option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 37px;
	padding: 6px 7px;
	border-radius: 7px;
	cursor: pointer;
}

.kpf-option:hover {
	background: var(--kpf-soft);
}

.kpf-option input {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: 0 0 auto;
}

.kpf-option__text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding-inline-start: calc(var(--kpf-depth, 0) * 13px);
}

.kpf-option__text small,
.kpf__status,
.kpf__no-filters {
	color: var(--kpf-muted);
}

.kpf__current {
	align-items: stretch;
	gap: 8px;
}

.kpf__chips {
	align-items: stretch;
	gap: 6px;
}

.kpf-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 7px;
	width: 100%;
	min-height: 32px;
	padding: 5px 9px;
	border: 1px solid var(--kpf-border);
	border-radius: 8px;
	background: var(--kpf-surface);
	font-size: .86rem;
}

.kpf-chip button {
	appearance: none;
	display: inline-grid;
	place-items: center;
	width: 21px;
	height: 21px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .08);
	font: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.kpf__status {
	min-height: 1.2em;
}

.kpf-results-host {
	position: relative;
	min-height: 40px;
	width: 100%;
}

.kpf-results-host.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(1px);
	cursor: progress;
}

.kpf-results-fragment__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-block-end: 18px;
}

.kpf-results-fragment__toolbar .woocommerce-result-count,
.kpf-results-fragment__toolbar .woocommerce-ordering {
	margin: 0;
}

.kpf-pagination {
	margin-block-start: 22px;
}

.kpf-results-host--woodmart .products {
	width: 100%;
}

.kpf-results-host--woodmart.is-loading .products {
	pointer-events: none;
}

@media (max-width: 767px) {
	.kpf {
		padding: 13px;
	}

	.kpf-results-fragment__toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.kpf-results-fragment__toolbar .woocommerce-ordering,
	.kpf-results-fragment__toolbar select {
		width: 100%;
	}
}