.webino-storefront-filter,
.webino-filter-chips {
	--webino-accent: var(--wd-primary-color, var(--wp--preset--color--primary, #2b57d6));
}

.webino-storefront-filter {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--webino-bg, transparent);
	box-shadow: none;
}

.webino-storefront-filter.webino-storefront-filter--background,
.webino-storefront-filter.webino-storefront-filter--border { --webino-panel-padding: 16px; padding: 16px; border-radius: 12px; }
.webino-storefront-filter.webino-storefront-filter--border { border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.webino-storefront-filter .webino-storefront-filter__title { margin: 0 0 1rem; padding: 0; border: 0; box-shadow: none; font: inherit; font-weight: 700; }

.webino-storefront-filter--automatic {
	clear: both;
}

.webino-storefront-filter__section,
.webino-storefront-filter__form,
.webino-storefront-filter fieldset {
	display: grid;
	gap: .75rem;
}

.webino-storefront-filter fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.webino-storefront-filter h3,
.webino-storefront-filter legend {
	margin: 0 0 .25rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 700;
}

.webino-storefront-filter ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.webino-storefront-filter a {
	text-decoration: none;
}

.webino-storefront-filter__prices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.webino-storefront-filter__prices label,
.webino-storefront-filter__choice {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.webino-storefront-filter__prices label {
	align-items: stretch;
	flex-direction: column;
}

.webino-storefront-filter input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: .55rem .65rem;
}

.webino-storefront-filter__submit {
	width: 100%;
}

.webino-storefront-filter button.webino-storefront-filter__submit {
	appearance: none;
	background: var(--webino-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	min-height: 38px;
	padding: 8px 16px;
	box-shadow: none;
	font: inherit;
	text-transform: none;
	cursor: pointer;
}
.webino-storefront-filter button.webino-storefront-filter__submit:hover { background: var(--webino-accent); color: #fff; box-shadow: none; filter: brightness(.95); }

.webino-filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-block: 0 1rem;
	min-width: 0;
	width: 100%;
	flex: 1 0 100%;
	grid-column: 1;
	font-size: .9em;
}

.webino-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	padding: .25rem .65rem;
	border: 1px solid var(--webino-accent);
	border-radius: 999px;
	color: var(--webino-accent);
	background: #f0f3fc;
	background: color-mix(in srgb, var(--webino-accent) 12%, #fff);
}

.webino-filter-chip > span { overflow-wrap: anywhere; }
.webino-filter-chip__remove { display: inline-flex; flex: 0 0 24px; justify-content: center; align-items: center; min-height: 24px; color: var(--webino-accent); text-decoration: none; font-size: 1.25em; }
.webino-filter-chips__clear { padding: .25rem .5rem; color: var(--webino-accent); text-decoration: underline; }
.webino-storefront-filter input[type="checkbox"],
.webino-storefront-filter input[type="radio"] { accent-color: var(--webino-accent); }
.webino-storefront-filter :where(a, button, input):focus-visible,
.webino-filter-chips a:focus-visible { outline: 2px solid var(--webino-accent); outline-offset: 3px; }
body.woocommerce .shop-loop-head:has(.webino-filter-chips),
body.woocommerce .wd-shop-tools:has(> .webino-filter-chips) { flex-wrap: wrap; }

.webino-storefront-filter > .webino-storefront-filter__form { display: none; }
.webino-storefront-filter > .webino-storefront-filter__section { margin: 0; padding: 0; border: 0; }
.webino-storefront-filter > .webino-storefront-filter__section ~ .webino-storefront-filter__section { margin-block-start: 1.1rem; padding-block-start: 1.1rem; border-block-start: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.webino-storefront-filter > .webino-storefront-filter__submit { margin-block-start: 1rem; }
.webino-price-slider { position: relative; min-width: 0; padding-top: 32px; direction: rtl; --price-start: 0%; --price-end: 100%; }
.webino-price-slider__track { position: absolute; top: 3px; inset-inline: 0; height: 24px; border-radius: 5px; background: transparent; cursor: pointer; }
.webino-price-slider__track::before { content: ''; position: absolute; inset-inline: 0; top: 9px; height: 5px; border-radius: 5px; background: #e2e4e7; }
.webino-price-slider__fill { position: absolute; right: var(--price-start); left: calc(100% - var(--price-end)); top: 9px; height: 5px; background: var(--webino-accent); border-radius: inherit; }
.webino-price-slider input[type="range"] { appearance: none; -webkit-appearance: none; position: absolute; inset-inline: 0; top: 0; width: 100%; height: 29px; padding: 0; margin: 0; border: 0; background: transparent; pointer-events: none; direction: rtl; box-shadow: none; }
.webino-price-slider input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--webino-accent); box-shadow: 0 0 0 1px #777; cursor: ew-resize; pointer-events: auto; }
.webino-price-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: var(--webino-accent); box-shadow: 0 0 0 1px #777; cursor: ew-resize; pointer-events: auto; }
.webino-price-slider input[type="range"]:focus-visible { outline: 2px solid var(--webino-accent); outline-offset: 2px; }
.webino-price-slider__label { text-align: center; font-size: .9em; font-variant-numeric: tabular-nums; }

.webino-category-filter-list,
.webino-category-filter-tree,
.webino-category-filter-tree ul {
	display: grid;
	gap: .35rem;
}

.webino-category-filter-list a,
.webino-category-filter-tree a {
	display: inline-flex;
	padding: .2rem 0;
	color: inherit;
}

.webino-category-filter-list .is-active > a,
.webino-category-filter-tree__item.is-active > a,
.webino-category-filter-tree__item.is-active > details > summary a {
	color: var(--webino-accent);
	font-weight: 700;
}

.webino-category-filter-tree details > ul {
	margin: .35rem 1rem 0 0;
}

.webino-category-filter-tree summary {
	cursor: pointer;
}

.webino-category-filter-tree summary a {
	margin-inline-start: .25rem;
}

.webino-attribute-filter + .webino-attribute-filter {
	margin-top: .9rem;
	padding-top: .9rem;
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.webino-attribute-filter ul {
	display: grid;
	gap: .35rem;
}

.webino-attribute-filter__value {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: .5rem;
	padding: .25rem 0;
	color: inherit;
}

.webino-attribute-filter__value small {
	color: #646970;
}

.webino-attribute-filter__checkbox,
.webino-attribute-filter__swatch {
	box-sizing: border-box;
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	background: #fff;
}

.webino-attribute-filter__swatch {
	border-radius: 50%;
	background: var(--webino-swatch-color);
	box-shadow: inset 0 0 0 2px #fff;
}

.webino-attribute-filter__value.is-selected .webino-attribute-filter__checkbox {
	border-color: var(--webino-accent);
	background: var(--webino-accent);
	box-shadow: inset 0 0 0 3px #fff;
}

.webino-attribute-filter__value.is-selected .webino-attribute-filter__swatch {
	outline: 2px solid var(--webino-accent);
	outline-offset: 2px;
}

.webino-attribute-filter__toggle {
	width: fit-content;
	font-size: .9em;
	margin-block-start: .5rem;
}

.webino-storefront-filter--above-loop .webino-storefront-filter__form {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	align-items: end;
}

.webino-storefront-filter--above-loop .webino-storefront-filter__submit {
	align-self: end;
}

body.woocommerce .shop-loop-head:has(.webino-storefront-filter--above-loop) {
	flex-wrap: wrap;
}

body.woocommerce .shop-loop-head .wd-shop-tools:has(.webino-storefront-filter--above-loop) {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	width: 100%;
}

body.woocommerce .shop-loop-head .webino-storefront-filter--above-loop {
	flex: 1 0 100%;
	width: 100%;
}

@supports selector(:has(*)) {
	@media (min-width: 783px) {
		body.woocommerce :where(main, section, div):has(> .webino-storefront-filter--sidebar):has(> .products) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
			column-gap: 1.5rem;
			row-gap: 0;
			align-items: start;
		}

		body.woocommerce :where(main, section, div):has(> .webino-storefront-filter--sidebar):has(> .products) > .webino-storefront-filter--sidebar {
			grid-column: 2;
			grid-row: 1 / span 100;
			position: sticky;
			top: 2rem;
		}

		body.woocommerce :where(main, section, div):has(> .webino-storefront-filter--sidebar):has(> .products) > :not(.webino-storefront-filter--sidebar) {
			grid-column: 1;
		}

		body.woocommerce .wd-content-area:has(.shop-loop-head .webino-storefront-filter--sidebar) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
			column-gap: 1.5rem;
			row-gap: 0;
			align-items: start;
		}

		body.woocommerce .wd-content-area:has(.shop-loop-head .webino-storefront-filter--sidebar) > * {
			grid-column: 1;
		}

		body.woocommerce .wd-content-area:has(.shop-loop-head .webino-storefront-filter--sidebar) > .shop-loop-head:has(.webino-storefront-filter--sidebar),
		body.woocommerce .shop-loop-head:has(.webino-storefront-filter--sidebar) > .wd-shop-tools:has(.webino-storefront-filter--sidebar) {
			display: contents;
		}

		body.woocommerce .wd-content-area:has(.shop-loop-head .webino-storefront-filter--sidebar) .shop-loop-head > .wd-shop-tools:not(:has(.webino-storefront-filter--sidebar)),
		body.woocommerce .wd-content-area:has(.shop-loop-head .webino-storefront-filter--sidebar) .wd-shop-tools:has(.webino-storefront-filter--sidebar) > :not(.webino-storefront-filter--sidebar) {
			grid-column: 1;
		}

		body.woocommerce .wd-content-area:has(.shop-loop-head .webino-storefront-filter--sidebar) .webino-storefront-filter--sidebar {
			grid-column: 2;
			grid-row: 1 / span 100;
			position: sticky;
			top: 2rem;
		}
	}
}

@media (max-width: 782px) {
	.webino-storefront-filter {
		position: static;
		width: 100%;
	}

	.webino-storefront-filter__prices,
	.webino-storefront-filter--above-loop .webino-storefront-filter__form {
		grid-template-columns: minmax(0, 1fr);
	}
	.webino-price-slider { padding-top: 56px; }
	.webino-price-slider__track { top: 10px; height: 44px; }
	.webino-price-slider__track::before,
	.webino-price-slider__fill { top: 19px; }
	.webino-price-slider input[type="range"] { height: 44px; touch-action: pan-y; }
	.webino-price-slider input[type="range"]::-webkit-slider-thumb { width: 44px; height: 44px; }
	.webino-price-slider input[type="range"]::-moz-range-thumb { width: 40px; height: 40px; }
	.webino-price-slider__label { overflow-wrap: anywhere; }
}

@media (min-width: 783px) {
	.webino-storefront-filter--sticky {
		position: sticky;
		top: calc(var(--webino-sticky-top, 100px) + var(--wp-admin--admin-bar--height, 0px));
		max-height: calc(100vh - var(--webino-sticky-top, 100px) - var(--wp-admin--admin-bar--height, 0px) - 16px);
		overflow-y: auto;
		align-self: start;
	}
	.webino-manual-sticky-host {
		position: sticky;
		top: calc(var(--webino-sticky-top, 100px) + var(--wp-admin--admin-bar--height, 0px));
		align-self: start;
	}
	.webino-manual-sticky-host .webino-storefront-filter--sticky { position: static; }
}

.webino-filter-chips[hidden],
.webino-storefront-filter [data-webino-filter-extra][hidden],
.webino-storefront-filter .webino-attribute-filter__extra[hidden] { display: none !important; }
body.woocommerce .wd-content-area > .webino-filter-chips--above-loop { grid-column: 1; width: 100%; min-width: 0; }
body.woocommerce .shop-loop-head .webino-filter-chips--above-loop { grid-column: 1; }
@supports selector(:has(*)) {
	body.woocommerce:has(.webino-filter-chips--above-loop) .webino-filter-chips--panel-fallback { display: none !important; }
}

.webino-storefront-filter details.webino-storefront-filter__section { display: block; }
.webino-storefront-filter details.webino-storefront-filter__section > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 36px; margin: 0; padding: 0; list-style: none; cursor: pointer; font-size: 1rem; font-weight: 700; }
.webino-storefront-filter details.webino-storefront-filter__section > summary::-webkit-details-marker { display: none; }
.webino-storefront-filter details.webino-storefront-filter__section > summary::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; margin-inline-end: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(135deg); }
.webino-storefront-filter details.webino-storefront-filter__section[open] > summary::after { transform: rotate(45deg); }
.webino-storefront-filter details.webino-storefront-filter__section[open] > summary { margin-block-end: .5rem; }
.webino-storefront-filter details.webino-storefront-filter__section:not([open]) > :not(summary) { display: none; }
.webino-storefront-filter .webino-category-filter-list,
.webino-storefront-filter .webino-category-filter-tree,
.webino-storefront-filter .webino-category-filter-tree ul { gap: 0; }
.webino-storefront-filter .webino-category-filter-list li,
.webino-storefront-filter .webino-category-filter-tree li { margin: 0; padding: 0; line-height: 1.4; }
.webino-storefront-filter .webino-category-filter-list a,
.webino-storefront-filter .webino-category-filter-tree a { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 32px; padding: 2px 0; margin: 0; line-height: 1.4; }
.webino-storefront-filter .webino-category-filter-tree summary { margin: 0; padding: 0; line-height: 1.4; }
.webino-storefront-filter .webino-category-filter-tree details > ul { margin: .1rem .75rem 0 0; }
.webino-storefront-filter .webino-storefront-filter__categories > .webino-attribute-filter__toggle { margin-block-start: .5rem; }
@media (max-width: 782px) {
	.webino-storefront-filter .webino-category-filter-list a,
	.webino-storefront-filter .webino-category-filter-tree a { min-height: 40px; }
}

.webino-storefront-filter .webino-category-filter-tree__row { display: flex; align-items: center; gap: .35rem; }
.webino-storefront-filter .webino-category-filter-tree__toggle { min-width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.webino-storefront-filter .webino-category-filter-tree__toggle span:first-child { display: inline-block; transition: transform .15s ease; transform: rotate(0deg); }
.webino-storefront-filter .webino-category-filter-tree__toggle[aria-expanded="false"] span:first-child { transform: rotate(-90deg); }
.webino-storefront-filter:dir(ltr) .webino-category-filter-tree__toggle[aria-expanded="false"] span:first-child { transform: rotate(90deg); }
.webino-storefront-filter .webino-category-filter-tree ul { margin-inline-start: 1rem; padding-inline-start: .75rem; border-inline-start: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.webino-storefront-filter .webino-category-filter-tree a[aria-current="page"] { font-weight: 700; }
.webino-storefront-filter [hidden] { display: none !important; }

@media (min-width: 783px) {
	body.webino-panel-sticky .webino-storefront-filter {
		position: sticky;
		top: calc(var(--webino-sticky-top, 100px) + var(--wp-admin--admin-bar--height, 0px));
		align-self: start;
		max-height: calc(100vh - var(--webino-sticky-top, 100px) - var(--wp-admin--admin-bar--height, 0px) - 16px);
		overflow-y: auto;
		overscroll-behavior: auto;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, currentColor 25%, transparent) transparent;
		scrollbar-gutter: stable;
		padding-inline-end: var(--webino-panel-padding, .35rem);
	}
	body.webino-panel-sticky .webino-storefront-filter:hover,
	body.webino-panel-sticky .webino-storefront-filter:focus-within { scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent; }
	body.webino-panel-sticky .webino-storefront-filter::-webkit-scrollbar { width: 6px; }
	body.webino-panel-sticky .webino-storefront-filter::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; }
	body.webino-panel-sticky .webino-storefront-filter:hover::-webkit-scrollbar-thumb,
	body.webino-panel-sticky .webino-storefront-filter:focus-within::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 50%, transparent); }
	body.webino-panel-sticky .elementor-widget:has(> .elementor-shortcode > .webino-storefront-filter),
	body.webino-panel-sticky .elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .webino-storefront-filter) {
		position: sticky;
		top: calc(var(--webino-sticky-top, 100px) + var(--wp-admin--admin-bar--height, 0px));
		align-self: flex-start;
	}
	body.webino-panel-sticky .elementor-widget:has(> .elementor-shortcode > .webino-storefront-filter) > .elementor-shortcode > .webino-storefront-filter,
	body.webino-panel-sticky .elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .webino-storefront-filter) > .elementor-widget-container > .elementor-shortcode > .webino-storefront-filter {
		position: static;
		max-height: calc(100vh - var(--webino-sticky-top, 100px) - var(--wp-admin--admin-bar--height, 0px) - 16px);
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, currentColor 25%, transparent) transparent;
		scrollbar-gutter: stable;
		padding-inline-end: var(--webino-panel-padding, .35rem);
	}
	body.webino-panel-sticky .elementor-widget:has(> .elementor-shortcode > .webino-storefront-filter) > .elementor-shortcode > .webino-storefront-filter:hover,
	body.webino-panel-sticky .elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .webino-storefront-filter) > .elementor-widget-container > .elementor-shortcode > .webino-storefront-filter:hover,
	body.webino-panel-sticky .elementor-widget:has(> .elementor-shortcode > .webino-storefront-filter) > .elementor-shortcode > .webino-storefront-filter:focus-within,
	body.webino-panel-sticky .elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .webino-storefront-filter) > .elementor-widget-container > .elementor-shortcode > .webino-storefront-filter:focus-within { scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent; }
	body.webino-panel-sticky .webino-storefront-filter::-webkit-scrollbar { width: 6px; }
	body.webino-panel-sticky .webino-storefront-filter::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; }
	body.webino-panel-sticky .webino-storefront-filter:hover::-webkit-scrollbar-thumb,
	body.webino-panel-sticky .webino-storefront-filter:focus-within::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 50%, transparent); }
	body.webino-panel-sticky .e-con:has(> .elementor-widget:has(.webino-storefront-filter)) { align-self: stretch; }
}
@media (max-width: 782px) {
	body.webino-panel-sticky .webino-storefront-filter { position: static; }
}

.webino-storefront-filter button.webino-attribute-filter__toggle,
.webino-storefront-filter button.webino-category-filter-tree__toggle {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 6px 0;
	min-height: 0;
	min-width: 0;
	height: auto;
	width: auto;
	text-transform: none;
	font: inherit;
	font-size: .92em;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--webino-accent, currentColor);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.webino-storefront-filter button.webino-attribute-filter__toggle::before,
.webino-storefront-filter button.webino-category-filter-tree__toggle::before,
.webino-storefront-filter button.webino-category-filter-tree__toggle span:first-child { display: none; }
.webino-storefront-filter button.webino-attribute-filter__toggle::after,
.webino-storefront-filter button.webino-category-filter-tree__toggle::after {
	content: '';
	display: inline-block;
	position: static;
	width: 6px;
	height: 6px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.webino-storefront-filter button.webino-attribute-filter__toggle[aria-expanded="true"]::after,
.webino-storefront-filter button.webino-category-filter-tree__toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
.webino-storefront-filter button.webino-attribute-filter__toggle:hover,
.webino-storefront-filter button.webino-category-filter-tree__toggle:hover { background: none; box-shadow: none; color: var(--webino-accent, currentColor); text-decoration: underline; }

@media (min-width: 783px) {
	body.webino-panel-sticky .webino-sticky-target {
		position: sticky;
		top: calc(var(--webino-sticky-top, 100px) + var(--wp-admin--admin-bar--height, 0px));
		align-self: flex-start;
	}
	body.webino-panel-sticky .webino-sticky-target .webino-storefront-filter { position: static; }
	body.webino-panel-sticky .webino-storefront-filter.webino-storefront-filter--background,
	body.webino-panel-sticky .webino-storefront-filter.webino-storefront-filter--border { padding: 16px; }
}
