.prs-widget {
	--prs-thumb-size: 20px;
	--prs-track-height: 6px;
	--prs-accent: #1e1e1e;
	--prs-accent-contrast: #fff;
	--prs-track-color: #ddd;
	margin: 0 0 2em;
}

.prs-slider-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.6em;
}

/* The number box and the slider sit side by side, splitting the row
 * evenly — number field first, slider second. */
.prs-controls-row {
	display: flex;
	align-items: center;
	gap: 1.5em;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}

.prs-number-wrap,
.prs-slider-wrap {
	flex: 0 0 calc(50% - 0.75em);
	width: calc(50% - 0.75em);
	max-width: calc(50% - 0.75em);
	box-sizing: border-box;
	min-width: 140px;
}

.prs-slider-wrap {
	position: relative;
	/* Room above the track for the value bubble. */
	padding-top: 2.4em;
}

.prs-slider {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: var(--prs-track-height);
	border-radius: 999px;
	background: var(--prs-track-color);
	outline: none;
	margin: 0;
}

.prs-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--prs-thumb-size);
	height: var(--prs-thumb-size);
	border-radius: 50%;
	background: var(--prs-accent);
	border: 2px solid var(--prs-accent-contrast);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	margin-top: calc((var(--prs-track-height) - var(--prs-thumb-size)) / 2);
}

.prs-slider::-moz-range-thumb {
	width: var(--prs-thumb-size);
	height: var(--prs-thumb-size);
	border-radius: 50%;
	background: var(--prs-accent);
	border: 2px solid var(--prs-accent-contrast);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	cursor: pointer;
}

.prs-slider::-moz-range-track {
	height: var(--prs-track-height);
	border-radius: 999px;
	background: var(--prs-track-color);
}

/* The floating number bubble that tracks the thumb as it's dragged. */
.prs-slider-bubble {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	white-space: nowrap;
	background: var(--prs-accent);
	color: var(--prs-accent-contrast);
	font-weight: 600;
	font-size: 0.85em;
	line-height: 1;
	padding: 0.45em 0.7em;
	border-radius: 999px;
	pointer-events: none;
}

.prs-slider-bubble::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 8px;
	height: 8px;
	background: var(--prs-accent);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 0 0 2px 0;
}

.prs-slider-bubble-num {
	font-variant-numeric: tabular-nums;
}

.prs-number-wrap {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.prs-number-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.4em 0.5em;
	border: 1px solid var(--prs-track-color);
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.prs-number-input:focus {
	outline: 2px solid var(--prs-accent);
	outline-offset: 1px;
}

.prs-number-unit {
	font-size: 0.85em;
	opacity: 0.75;
	white-space: nowrap;
}

.prs-range-ends {
	display: flex;
	justify-content: space-between;
	font-size: 0.85em;
	opacity: 0.65;
	margin-top: 0.25em;
}

.prs-results {
	margin-top: 1.5em;
}

/* Loading spinner shown while fetching products */
.prs-loading-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2.5em 1em;
	gap: 1em;
}

@keyframes prs-spin {
	to { transform: rotate(360deg); }
}

.prs-spinner {
	display: block;
	width: 40px;
	height: 40px;
	border: 4px solid var(--prs-track-color);
	border-top-color: var(--prs-accent);
	border-radius: 50%;
	animation: prs-spin 0.75s linear infinite;
}

.prs-loading-text {
	margin: 0;
	font-size: 0.95em;
	font-style: italic;
	opacity: 0.75;
	text-align: center;
}

.prs-no-match {
	font-style: italic;
	opacity: 0.75;
}

.prs-widget ul.products {
	margin-top: 0;
}