/**
 * filters.css — the catalogue filter rail.
 *
 * THE GRID GOES ON `.bedi-woo`, AND THE CHILDREN ARE PLACED BY NAME.
 *
 * The obvious implementation is to wrap the rail and the loop in two new divs
 * and flex them. That would mean changing `Woo::open_wrapper()` and
 * `close_wrapper()` to open and close extra elements around markup that
 * WooCommerce emits from four different hooks — and the moment one of those
 * hooks does not fire (which is exactly what happens on an archive that matched
 * nothing) the wrapper is left unbalanced and the page's HTML breaks.
 *
 * Making the EXISTING wrapper a grid and assigning each child a column is
 * order-independent and cannot be unbalanced: whichever of the breadcrumb,
 * header, notices, toolbar, grid, pagination or empty state happen to render,
 * each lands where it belongs.
 *
 * 288px + 32px gap, measured rather than chosen: `.bedi-woo` is 1280px at the
 * 1440px design width, so the grid keeps 960px. At 3 columns that is a 299px
 * tile, still within a handful of pixels of the unfiltered 4-up tile — so the
 * catalogue does not visibly shrink when the rail appears. At 4 columns it
 * would be 216px, which is too narrow for this shop's product names.
 *
 * It was 256px until the client asked for a wider rail. The 32px it gained
 * comes straight off the main column and costs each of the three tiles about
 * ten pixels — worth it, because the rail carries Georgian category names that
 * do not hyphenate and were wrapping to three lines at the old width.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. THE TWO-COLUMN ARCHIVE
 * ====================================================================== */

@media (min-width: 62em) {
	.bedi-woo:has(.bedi-filters) {
		align-items: start;
		/* 48px, up from 32px: the client asked for more air between the rail
		   and the grid, and at 288px the rail is wide enough that the old gap
		   read as a seam between two blocks rather than a margin. */
		column-gap: var(--bedi-space-9);
		display: grid;
		grid-template-columns: 288px minmax(0, 1fr);
	}

	/*
	 * The breadcrumb and the page title sit above both columns. They are named
	 * individually rather than with a blanket `> *` so anything a plugin
	 * injects into this wrapper keeps default placement instead of being
	 * silently stretched across the page.
	 */
	.bedi-woo:has(.bedi-filters) > .woocommerce-breadcrumb,
	.bedi-woo:has(.bedi-filters) > .woocommerce-products-header {
		grid-column: 1 / -1;
	}

	/*
	 * NOT STICKY, AND THE CATEGORY COUNT IS WHY.
	 *
	 * A sticky rail is right when it is shorter than the viewport — it follows
	 * the customer down a long grid and the filters stay in reach. This rail is
	 * not: კომპიუტერის ნაწილები alone lists eleven categories above the price
	 * slider, the stock toggle and whatever attribute filters the category
	 * carries, and a sticky element taller than the viewport pins its TOP to
	 * the offset and makes its own bottom unreachable — the last filters can
	 * only be seen by scrolling the rail past them, which a sticky element does
	 * not do.
	 *
	 * So it scrolls with the page. The trade is that the filters leave the
	 * screen on a long grid, which is the lesser problem: they are at the top,
	 * where a customer looks for them, and the toolbar above the products
	 * carries the sort and the view switch independently.
	 */
	.bedi-woo:has(.bedi-filters) > .bedi-filters {
		grid-column: 1;
	}

	/*
	 * EVERYTHING ELSE IS ONE GRID ITEM, which is the whole reason
	 * `.bedi-woo__main` exists — see the note in Woo::render_rail(). Placing
	 * the toolbar, the grid and the pagination individually in column 2 gave
	 * the rail a row of its own and left a 775px hole above the products.
	 */
	.bedi-woo:has(.bedi-filters) > .bedi-woo__main {
		grid-column: 2;
		min-inline-size: 0;
	}

	/*
	 * THREE ACROSS, NOT FOUR, while the rail is present. At 1440px the content
	 * column is 992px, so three tiles are 309px — within a few pixels of the
	 * unfiltered four-up tile, which is why the catalogue does not appear to
	 * shrink when the rail appears. Four would be 229px, too narrow for this
	 * shop's product names.
	 *
	 * `:not([class*="is-view-"])` matters: archive.js writes a view class ONLY
	 * when the visitor has actually chosen one, precisely so this default can
	 * exist. An explicit choice still wins.
	 */
	.bedi-woo:has(.bedi-filters) ul.products:not([class*="is-view-"]) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * NO `:has()` — the rail simply stacks above the grid. Every browser without
 * it (Safari below 15.4, Chromium below 105) gets a single-column archive with
 * the filters at the top, which is the mobile layout and is entirely usable.
 * Nothing is hidden and nothing overlaps.
 */

/* =========================================================================
 * 2. THE RAIL
 * ====================================================================== */

.bedi-filters {
	min-inline-size: 0;
}

.bedi-filters__form {
	display: flex;
	flex-direction: column;
	row-gap: var(--bedi-space-5);
}

.bedi-facet {
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	padding-block-end: var(--bedi-space-5);
}

.bedi-facet:last-of-type {
	border-block-end: 0;
	padding-block-end: 0;
}

.bedi-facet__title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	margin: 0 0 var(--bedi-space-3);
}

.bedi-facet__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 2px;
}

/* --- a category row (a link) --- */

.bedi-facet__link {
	align-items: center;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-ink);
	column-gap: 8px;
	display: flex;
	font-size: var(--bedi-text-sm);
	justify-content: space-between;
	margin-inline: -6px;
	padding: 7px 6px;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-facet__link:hover {
	background-color: var(--bedi-surface-2);
	color: var(--bedi-navy);
}

.bedi-facet__link:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: -2px;
}

/*
 * THE CATEGORY YOU ARE STANDING IN.
 *
 * Tinted fill plus navy ink plus weight 500 — the same three signals the sort
 * listbox uses for its chosen option, so the two lists in this column agree
 * about what "current" looks like. No border and no left rule: the row is
 * already inset by the negative margin above, and an extra edge in a column of
 * plain links reads as a second kind of object.
 *
 * It stays legible with the tint removed — forced-colors and greyscale both
 * keep the weight — and it is announced regardless, because the markup carries
 * aria-current="page" and not merely this class.
 */
.bedi-facet__link.is-active {
	background-color: var(--bedi-bg-2);
	color: var(--bedi-navy);
	font-weight: var(--bedi-weight-medium);
}

.bedi-facet__link.is-active:hover {
	background-color: var(--bedi-bg-2);
}

/*
 * THE WAY BACK UP, above the list rather than inside it.
 *
 * It is not a category and must not read as one, so it takes the muted ink and
 * the small size of a utility control and sits outside `.bedi-facet__list`
 * entirely — a chevron pointing left, then where it goes. On hover it comes up
 * to navy like every other link in this rail.
 */
.bedi-facet__back {
	align-items: center;
	color: var(--bedi-ink-muted);
	column-gap: 6px;
	display: flex;
	font-size: var(--bedi-text-sm);
	margin-block-end: var(--bedi-space-2);
	margin-inline: -6px;
	padding: 6px;
	border-radius: var(--bedi-radius-md);
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-facet__back:hover {
	background-color: var(--bedi-surface-2);
	color: var(--bedi-navy);
}

.bedi-facet__back:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: -2px;
}

.bedi-facet__back-icon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
}

.bedi-facet__back-label {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.bedi-facet__name {
	min-inline-size: 0;
	/* Georgian does not hyphenate, and these names are long. */
	overflow-wrap: anywhere;
}

.bedi-facet__count {
	color: var(--bedi-ink-muted);
	flex: 0 0 auto;
	font-size: var(--bedi-text-xs);
	font-variant-numeric: tabular-nums;
}

/* --- a radio / checkbox row --- */

.bedi-facet__control {
	align-items: center;
	border-radius: var(--bedi-radius-md);
	column-gap: 10px;
	cursor: pointer;
	display: flex;
	font-size: var(--bedi-text-sm);
	margin-inline: -6px;
	padding: 7px 6px;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-facet__control:hover {
	background-color: var(--bedi-surface-2);
}

/*
 * THE REAL INPUT IS STILL THE CONTROL — visually hidden, focusable, in the tab
 * order, and the thing that submits. The mark beside it is drawn; it is not a
 * replacement. Swapping in a div and a click handler is how "in stock only"
 * stops working for a keyboard and how the form stops working without JS.
 */
.bedi-facet__input {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.bedi-facet__mark {
	background-color: var(--bedi-surface);
	block-size: 18px;
	border: 1.5px solid var(--bedi-rule-strong);
	border-radius: var(--bedi-radius-round);
	display: grid;
	flex: 0 0 auto;
	inline-size: 18px;
	place-items: center;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		border-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

/* A checkbox is square; a radio is round. The shape is the affordance. */
.bedi-facet__mark--box {
	border-radius: var(--bedi-radius-sm);
}

.bedi-facet__mark::after {
	background-color: var(--bedi-on-accent);
	block-size: 8px;
	border-radius: var(--bedi-radius-round);
	content: "";
	inline-size: 8px;
	opacity: 0;
	transform: scale(0.4);
	transition:
		opacity var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-facet__mark--box::after {
	background-color: transparent;
	block-size: 12px;
	border-radius: 0;
	inline-size: 12px;
	-webkit-mask: var(--bedi-check-mask) center / contain no-repeat;
	mask: var(--bedi-check-mask) center / contain no-repeat;
}

.bedi-facet__input:checked + .bedi-facet__mark {
	background-color: var(--bedi-accent);
	border-color: var(--bedi-accent);
}

.bedi-facet__input:checked + .bedi-facet__mark--box::after {
	background-color: var(--bedi-on-accent);
}

.bedi-facet__input:checked + .bedi-facet__mark::after {
	opacity: 1;
	transform: scale(1);
}

.bedi-facet__input:focus-visible + .bedi-facet__mark {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

/* --- the exact price inputs --- */

.bedi-facet__range {
	align-items: center;
	column-gap: 8px;
	display: flex;
	margin-block-start: var(--bedi-space-3);
}

.bedi-facet__num {
	appearance: textfield;
	background-color: var(--bedi-surface);
	block-size: 40px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-ink);
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-sm);
	font-variant-numeric: tabular-nums;
	inline-size: 100%;
	min-inline-size: 0;
	padding-inline: 10px;
	-webkit-appearance: textfield;
}

/* The native spinner is useless on a price and takes 16px of a 90px field. */
.bedi-facet__num::-webkit-inner-spin-button,
.bedi-facet__num::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
	-webkit-appearance: none;
}

.bedi-facet__num:focus {
	border-color: var(--bedi-accent);
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.18);
	outline: none;
}

.bedi-facet__dash {
	color: var(--bedi-ink-muted);
	flex: 0 0 auto;
}

/* --- the "N more" disclosure --- */

.bedi-facet__more-toggle {
	color: var(--bedi-accent);
	cursor: pointer;
	font-size: var(--bedi-text-sm);
	list-style: none;
	margin-block-start: var(--bedi-space-2);
	padding: 4px 0;
}

.bedi-facet__more-toggle::-webkit-details-marker { display: none; }

.bedi-facet__more-toggle:hover { text-decoration: underline; }

.bedi-facet__more[open] .bedi-facet__more-toggle {
	margin-block-end: var(--bedi-space-2);
}

/* =========================================================================
 * 3. APPLIED-FILTER CHIPS
 * ====================================================================== */

.bedi-filters__chips-row:empty { display: none; }

.bedi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 var(--bedi-space-4);
	padding: 0;
}

.bedi-chip__link {
	align-items: center;
	background-color: var(--bedi-bg-2);
	block-size: 32px;
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-navy);
	column-gap: 6px;
	display: inline-flex;
	font-size: var(--bedi-text-sm);
	padding-inline: 12px;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-chip__link:hover {
	background-color: var(--bedi-accent);
	color: var(--bedi-on-accent);
}

.bedi-chip__link:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

/*
 * THE × TAKES THE LABEL'S OWN COLOUR, at full opacity.
 *
 * It was 0.6 — which on `--bedi-navy` over `--bedi-bg-2` computes to roughly
 * 3.1:1, under the 4.5:1 AA threshold for text, and the × IS text here: it is
 * the only thing indicating the chip removes something. Dropping the opacity
 * and letting it inherit `currentColor` puts it at the label's own contrast,
 * which the chip already passes.
 *
 * The affordance that opacity was carrying moves to the hover fill, which the
 * chip already had.
 */
.bedi-chip__x {
	color: inherit;
	display: inline-flex;
}

/* Clear-all is a text link, not a chip — it removes rather than represents. */
.bedi-chip--clear .bedi-chip__link {
	background: none;
	color: var(--bedi-ink-muted);
	padding-inline: 6px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bedi-chip--clear .bedi-chip__link:hover {
	background: none;
	color: var(--bedi-accent);
}

/* =========================================================================
 * 4. THE APPLY BUTTON
 *
 * The no-JS path. filters.js hides it once it has taken over, so a visitor
 * with script gets live filtering and one without still has a working form.
 * ====================================================================== */

/*
 * STYLED HERE, NOT BORROWED FROM .bedi-btn.
 *
 * This button carries `.bedi-btn .bedi-btn--primary` in the markup, and that
 * component is defined only in account.css — which src/Assets.php enqueues on
 * is_account_page() and nowhere else. On a product archive the classes matched
 * nothing, so the one control that makes filtering work without JavaScript
 * rendered as bare text: transparent background, no padding, no radius.
 *
 * It is invisible to almost everyone, because filters.js sets `hidden` the
 * moment it takes over — which is exactly why it went unnoticed, and exactly
 * why it mattered: the only people who ever saw this button were the people
 * with no working alternative.
 */
.bedi-filters__apply {
	align-items: center;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--bedi-accent);
	border: 0;
	border-radius: var(--bedi-radius-pill);
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-base);
	font-weight: 700;
	inline-size: 100%;
	justify-content: center;
	min-block-size: 46px;
	padding-inline: var(--bedi-space-5);
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-filters__apply:hover,
.bedi-filters__apply:focus-visible {
	background-color: var(--bedi-accent-strong);
}

.bedi-js .bedi-filters__apply[hidden] { display: none; }

/* =========================================================================
 * 5. PHONE AND TABLET — the rail becomes a sheet
 * ====================================================================== */

.bedi-filters__open svg,
.bedi-filters__fab svg {
	flex: none;
}

.bedi-filters__open {
	align-items: center;
	appearance: none;
	background-color: var(--bedi-surface);
	block-size: 40px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-ink);
	column-gap: 8px;
	cursor: pointer;
	display: none;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-sm);
	padding-inline: 14px;
}

.bedi-filters__count {
	background-color: var(--bedi-accent);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-on-accent);
	font-size: var(--bedi-text-xs);
	font-variant-numeric: tabular-nums;
	padding: 1px 7px;
}

@media (max-width: 61.9375em) {
	/* The button is injected by filters.js and lives in the toolbar. */
	.bedi-filters__open { display: inline-flex; }

	/*
	 * THE FLOATING FILTER BUTTON.
	 *
	 * Revealed by filters.js once the toolbar's own button has scrolled out of
	 * view, so exactly one of the two is ever on screen. It sits above the
	 * mobile bottom bar by reading the same token everything else in that
	 * corner reads, and centres itself rather than taking a side: the dock owns
	 * the bottom-inline-end corner and two floating pills fighting over it is
	 * how that corner becomes unusable.
	 */
	.bedi-filters__fab {
		align-items: center;
		-webkit-appearance: none;
		appearance: none;
		background-color: var(--bedi-navy);
		border: 0;
		border-radius: var(--bedi-radius-pill);
		box-shadow: 0 10px 30px -12px rgba(7, 0, 36, 0.7);
		color: #fff;
		column-gap: var(--bedi-space-2);
		cursor: pointer;
		display: inline-flex;
		font-family: var(--bedi-font-body);
		font-size: var(--bedi-text-sm);
		font-weight: 700;
		inset-block-end: calc(var(--bedi-bottombar-h, 0px) + env(safe-area-inset-bottom, 0px) + var(--bedi-space-4));
		inset-inline-start: 50%;
		min-block-size: 44px;
		opacity: 0;
		padding-inline: var(--bedi-space-5);
		pointer-events: none;
		position: fixed;
		/* translateY is what it animates on; translateX is what centres it, so
		   both live in one transform and the rest state carries the offset. */
		transform: translate(-50%, 16px);
		transition:
			opacity var(--bedi-dur) var(--bedi-ease-out),
			transform var(--bedi-dur) var(--bedi-ease-out),
			visibility var(--bedi-dur) var(--bedi-ease-out);
		visibility: hidden;
		/* Above the bottom bar (90) so it is reachable, below the header (100)
		   and far below the sheet it opens. */
		z-index: 95;
	}

	.bedi-filters__fab.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, 0);
		visibility: visible;
	}

	/* The sheet it opens covers the screen, so the button must not float over it. */
	.bedi-filters.is-open ~ .bedi-filters__fab,
	.bedi-scroll-locked .bedi-filters__fab {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}

	.bedi-filters__fab .bedi-filters__count {
		background-color: #fff;
		color: var(--bedi-navy);
	}

	.bedi-filters {
		background-color: var(--bedi-surface);
		inset: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--bedi-space-5);
		position: fixed;
		/* Above the page veil, below the drawer — the same rung the dock's
		   own panel uses. */
		z-index: var(--bedi-z-dock-panel, 195);
		transform: translateX(-100%);
		transition:
			transform var(--bedi-dur) var(--bedi-ease-in),
			visibility var(--bedi-dur) var(--bedi-ease-in);
		visibility: hidden;
	}

	.bedi-filters.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	/*
	 * WITHOUT JAVASCRIPT THE SHEET MUST NOT SWALLOW THE PAGE. `.bedi-js` is
	 * written on the root by nav.js/header.js, so a visitor whose script never
	 * ran gets the rail in the flow above the grid instead of a fixed panel
	 * they have no button to open.
	 */
	html:not(.bedi-js) .bedi-filters {
		inset: auto;
		overflow: visible;
		padding: 0;
		position: static;
		transform: none;
		visibility: visible;
		z-index: auto;
		margin-block-end: var(--bedi-space-5);
	}

	.bedi-filters__close {
		align-items: center;
		appearance: none;
		background: none;
		block-size: 40px;
		border: 0;
		color: var(--bedi-ink);
		cursor: pointer;
		display: inline-flex;
		inline-size: 40px;
		inset-block-start: var(--bedi-space-4);
		inset-inline-end: var(--bedi-space-4);
		justify-content: center;
		padding: 0;
		position: absolute;
	}

	html:not(.bedi-js) .bedi-filters__close { display: none; }
}

@media (min-width: 62em) {
	.bedi-filters__close { display: none; }
}

/* =========================================================================
 * 6. REDUCED MOTION
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bedi-facet__link,
	.bedi-facet__control,
	.bedi-facet__mark,
	.bedi-facet__mark::after,
	.bedi-chip__link,
	.bedi-filters {
		transition-duration: 1ms !important;
	}
}

/* =========================================================================
 * 7. FORCED COLOURS
 * ====================================================================== */

@media (forced-colors: active) {
	.bedi-facet__mark,
	.bedi-facet__num,
	.bedi-chip__link,
	.bedi-filters__open {
		border: 1px solid ButtonText;
	}

	.bedi-facet__input:checked + .bedi-facet__mark {
		background-color: Highlight;
		border-color: Highlight;
		forced-color-adjust: none;
	}

	.bedi-facet__input:checked + .bedi-facet__mark::after {
		background-color: HighlightText;
	}
}

/* =========================================================================
 * THE PRICE RANGE
 *
 * TWO NATIVE <input type="range"> STACKED ON ONE TRACK. Not a div-and-pointer
 * -events reimplementation: the native control already gives keyboard support
 * (arrows, Home, End), the correct ARIA role and value announcements, touch
 * targets that respect the platform, and it cannot desync from its own value.
 * What is restyled is only its appearance.
 *
 * The inputs are transparent and overlaid; the visible track and fill are the
 * two spans beneath them. `pointer-events: none` on the input with `auto` on
 * its thumb is what lets both thumbs be grabbed even where they overlap — the
 * transparent body of the upper input would otherwise swallow every press
 * aimed at the lower one.
 * ====================================================================== */

.bedi-range {
	block-size: 24px;
	margin-block: var(--bedi-space-2) var(--bedi-space-4);
	position: relative;
}

.bedi-range__track {
	background-color: var(--bedi-rule);
	block-size: 4px;
	border-radius: var(--bedi-radius-pill);
	display: block;
	inset-block-start: 50%;
	inset-inline: 0;
	position: absolute;
	transform: translateY(-50%);
}

.bedi-range__fill {
	background-color: var(--bedi-accent);
	block-size: 100%;
	border-radius: inherit;
	display: block;
	/* The script writes these two; the transition is what makes a keyboard
	   press glide instead of jump. A drag sets them every frame, so the
	   duration is the micro token — long enough to smooth, short enough that
	   the fill never lags the thumb visibly. */
	inset-inline-start: 0;
	inline-size: 100%;
	position: relative;
	transition:
		inset-inline-start var(--bedi-dur-micro) linear,
		inline-size var(--bedi-dur-micro) linear;
}

.bedi-range.is-dragging .bedi-range__fill {
	transition: none;
}

.bedi-range__input {
	appearance: none;
	background: none;
	block-size: 24px;
	inline-size: 100%;
	inset-block-start: 0;
	inset-inline-start: 0;
	margin: 0;
	pointer-events: none;
	position: absolute;
}

.bedi-range__input:focus { outline: none; }

/* --- the thumb, twice, because the two vendor selectors cannot be grouped --- */

.bedi-range__input::-webkit-slider-thumb {
	appearance: none;
	background-color: var(--bedi-surface);
	block-size: 20px;
	border: 2px solid var(--bedi-accent);
	border-radius: var(--bedi-radius-round);
	box-shadow: 0 1px 3px rgba(37, 37, 49, 0.22);
	cursor: grab;
	inline-size: 20px;
	pointer-events: auto;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-range__input::-moz-range-thumb {
	appearance: none;
	background-color: var(--bedi-surface);
	block-size: 20px;
	border: 2px solid var(--bedi-accent);
	border-radius: var(--bedi-radius-round);
	box-shadow: 0 1px 3px rgba(37, 37, 49, 0.22);
	cursor: grab;
	inline-size: 20px;
	pointer-events: auto;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-range__input:hover::-webkit-slider-thumb { border-color: var(--bedi-accent-strong); transform: scale(1.08); }
.bedi-range__input:hover::-moz-range-thumb     { border-color: var(--bedi-accent-strong); transform: scale(1.08); }

.bedi-range__input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.bedi-range__input:active::-moz-range-thumb     { cursor: grabbing; transform: scale(1.12); }

/* The focus ring goes on the THUMB, not the input: the input is a
   full-width transparent strip, so a ring on it would draw a rectangle
   across the whole rail. */
.bedi-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.28);
}

.bedi-range__input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(45, 129, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.bedi-range__fill,
	.bedi-range__input::-webkit-slider-thumb,
	.bedi-range__input::-moz-range-thumb {
		transition-duration: 1ms;
	}
}