/* WM Product Filter — frontend. Light by design so it inherits the theme. RTL-safe. */

.wm-pf { margin-block-end: 1.5em; }
.wm-pf-facet { margin-block-end: 1em; border-block-end: 1px solid rgba(0,0,0,.08); padding-block-end: 1em; }
.wm-pf-facet:last-child { border-block-end: 0; }

/* Titles (button = collapsible, static = plain) */
.wm-pf-facet-title {
	display: flex; align-items: center; justify-content: space-between; gap: .5em;
	width: 100%;
	font-weight: 600; font-size: inherit;
	background: transparent; border: 0; padding: 0; margin: 0 0 .5em;
	color: inherit; text-align: start; cursor: pointer;
}
.wm-pf-facet-title-static { cursor: default; }
.wm-pf-facet-label { flex: 1 1 auto; }

/* Chevron caret (down by default, up when open) */
.wm-pf-chevron {
	flex: 0 0 auto;
	width: .5em; height: .5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	opacity: .65;
	margin-inline-start: .25em;
}
.is-collapsible:not(.is-collapsed) > .wm-pf-facet-title .wm-pf-chevron,
.wm-pf-dropdown.is-open .wm-pf-chevron { transform: rotate(-135deg); }

/* Collapsible body */
.is-collapsible.is-collapsed > .wm-pf-facet-body { display: none; }

/* Sort */
.wm-pf-sort { margin-block-end: 1.25em; }
.wm-pf-sort-dropdown { display: inline-block; min-width: 12em; max-width: 100%; vertical-align: top; }

/* Options list */
.wm-pf-options { list-style: none; margin: 0; padding: 0; max-height: 16em; overflow-y: auto; }
.wm-pf-options li { margin: 0; padding: 0; }
.wm-pf-opt > label { display: flex; align-items: center; gap: .5em; padding: .2em 0; cursor: pointer; }
.wm-pf-opt.is-empty > label { opacity: .45; }
.wm-pf-opt-name { flex: 1 1 auto; }
.wm-pf-count { opacity: .6; font-size: .85em; }
.wm-pf-hide-counts .wm-pf-count { display: none; }

.wm-pf-no-filter { opacity: .6; font-size: .9em; padding: .35em 0; }

/* Custom select dropdown */
.wm-pf-dropdown { position: relative; }
.wm-pf-dd-toggle {
	display: flex; align-items: center; gap: .4em;
	width: 100%;
	padding: .5em .7em;
	background: #fff;
	border: 1px solid rgba(0,0,0,.25);
	border-radius: 4px;
	cursor: pointer;
	color: inherit;
	text-align: start;
	line-height: 1.4;
}
.wm-pf-dd-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-pf-dd-count { opacity: .7; font-size: .9em; }
.wm-pf-dd-panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 4px);
	z-index: 50;
	background: #fff;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	padding: .5em .7em;
	max-height: 18em;
	overflow-y: auto;
}
.wm-pf-dd-panel[hidden] { display: none; }
.wm-pf-dd-panel .wm-pf-options { max-height: none; }

/* Price */
.wm-pf-price { padding-block-start: .25em; }
.wm-pf-range { position: relative; height: 34px; }
.wm-pf-range-track {
	position: absolute; inset-block-start: 50%; inset-inline: 0; height: 4px;
	transform: translateY(-50%); background: currentColor; opacity: .18; border-radius: 4px;
}
.wm-pf-range-fill { position: absolute; inset-block-start: 0; height: 100%; background: currentColor; opacity: .9; border-radius: 4px; }
.wm-pf-range input[type="range"] {
	position: absolute; inset-block-start: 0; inset-inline: 0; width: 100%; margin: 0;
	background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; height: 34px;
}
.wm-pf-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; pointer-events: auto;
	width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid currentColor; cursor: pointer;
}
.wm-pf-range input[type="range"]::-moz-range-thumb {
	pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid currentColor; cursor: pointer;
}
.wm-pf-range input[type="range"]::-moz-range-track { background: transparent; }
.wm-pf-price-inputs { display: flex; align-items: center; gap: .35em; margin-block-start: .6em; flex-wrap: wrap; }
.wm-pf-price-inputs input { width: 6em; max-width: 40%; }
.wm-pf-cur { opacity: .7; }
.wm-pf-dash { opacity: .5; }

/* Apply */
.wm-pf-actions { margin-block-start: 1em; }

/* Active chips */
.wm-pf-active { margin-block-end: 1em; }
.wm-pf-chips { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.wm-pf-chip {
	display: inline-flex; align-items: center; gap: .4em;
	padding: .25em .7em; border: 1px solid currentColor; border-radius: 2em;
	background: transparent; cursor: pointer; font-size: .9em; line-height: 1.4; color: inherit;
}
.wm-pf-chip-label { display: inline; }
.wm-pf-chip-x { font-weight: 700; opacity: .7; }
.wm-pf-clear-all { background: transparent; border: 0; text-decoration: underline; cursor: pointer; opacity: .8; font-size: .9em; color: inherit; }

/* Pagination */
.wm-pf-pagination-wrap { margin-block-start: 1.25em; }
.wm-pf-pagination.wm-pf-loadmore-wrap { text-align: center; }
.wm-pf-pagination.wm-pf-numbered { display: flex; flex-wrap: wrap; gap: .35em; justify-content: center; align-items: center; }
.wm-pf-page {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.2em; height: 2.2em; padding: 0 .6em;
	border: 1px solid rgba(0,0,0,.2); border-radius: 4px; text-decoration: none; color: inherit;
}
.wm-pf-page.is-current { background: currentColor; color: #fff; }
.wm-pf-page.is-disabled { opacity: .4; pointer-events: none; }
.wm-pf-prev, .wm-pf-next { font-size: 1.2em; line-height: 1; }
.wm-pf-ellipsis { padding: 0 .2em; opacity: .6; }

/* States */
.wm-pf-no-results { padding: 2em 0; opacity: .8; }
.wm-pf-loading { opacity: .55; transition: opacity .15s ease; pointer-events: none; }
.wm-pf-facets-updating { cursor: progress; }
.wm-pf-tpl-error { color: #b32d2e; font-size: .85em; padding: .5em; border: 1px dashed #b32d2e; }
.wm-pf-missing { color: #b32d2e; padding: .5em; border: 1px dashed #b32d2e; }

/* Mobile "show filters" trigger.
   Default behaviour: hidden on desktop; on small screens the trigger shows and
   the panel collapses until toggled open. Override the breakpoint or any of
   these rules from the per-set Custom CSS box if you need different behaviour. */
.wm-pf-mob-trigger {
	display: none;
	cursor: pointer;
	user-select: none;
	padding: .7em 1em;
	margin-block-end: 1em;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 4px;
	text-align: center;
	font-weight: 600;
}
@media (max-width: 849px) {
	.wm-pf-mob-trigger { display: block; }
	.wm-pf-mob-trigger.is-open { /* styling hook for the open state */ }
	.wm-pf { display: none; }
	.wm-pf.is-open { display: block; }
}