/* Shop filters bar. Every value comes from the theme tokens. */

@keyframes pt-filters-bar-slide {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

.pt-filters-bar {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 24px;
	padding: 15px;
	border: 2px solid var(--pt-box-brd, #e6e6e6);
	border-radius: var(--pt-outer-brd-radius, 15px);
	background: var(--bgcolor-white, #fff);
}

.pt-filters-bar-widget {
	/*
	 * Sticky lives on the Elementor wrapper: its parent is the tall column that
	 * holds the grid, whereas the inner bar's parent is only as tall as the bar
	 * itself and so gives it nothing to stick within.
	 *
	 * The offset is a header's height by default and only drops to zero once
	 * filtersBar.js has confirmed the header has slid away, so the bar can
	 * never end up underneath it.
	 *
	 * The delay is what orders the two movements. A transition is governed by
	 * the rule in force at its destination, so the wait lives here — on the
	 * state the bar moves into as the header arrives — and the header gets its
	 * .3s slide finished before the bar starts following it down. Going the
	 * other way the delay is dropped, so the bar gives the space back at once.
	 */
	position: -webkit-sticky;
	position: sticky;
	top: var(--pt-header-sticky-h, 0px);
	z-index: 91;
	align-self: stretch;
	transition: top .3s ease;
}

/*
 * Below the header builder's mobile breakpoint the header does not shrink on
 * scroll — it keeps its mobile height — so the sticky offset has to come from
 * the mobile token. The desktop sticky token is a good deal taller and would
 * leave the gap the phone layout showed between the header and the bar.
 */
@media (max-width: 1024px) {
	.pt-filters-bar-widget {
		top: var(--pt-header-sm-h, 0px);
	}
}

/* Header gone: take the top back, and give it back without waiting. */
html.pt-header-hidden .pt-filters-bar-widget,
html.pt-header-hidden .pt-filters-bar-widget.is-stuck .pt-filters-bar {
	top: 0;
}



.pt-filters-bar-widget.is-stuck .pt-filters-bar {
	/*
	 * The bar stays in its own column, so it lines up with the grid by
	 * construction — no width maths that could drift when the viewport changes,
	 * such as when devtools opens. The band across the viewport is painted by a
	 * spread shadow instead, with clip-path letting it escape sideways while
	 * still showing the drop shadow underneath.
	 */
	margin-bottom: 0;
	border-radius: 0;
	border-inline: 0;
	border-top: 0;
	box-shadow: 0 0 0 100vmax var(--bgcolor-white, #fff), 0 6px 18px rgba(0, 0, 0, .06);
	clip-path: inset(0 -100vmax -24px -100vmax);
	animation-name: pt-filters-bar-slide;
	animation-duration: .3s;
	animation-timing-function: ease;
	animation-delay: .2s;
	animation-fill-mode: both;
	padding: 20px 0;
}


.pt-filters-bar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pt-filters-bar__scroll {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.pt-filters-bar__side {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

/* Dropdown trigger */

.pt-filters-bar__item {
	position: relative;
	flex: 0 0 auto;
}

.pt-filters-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--btn-brd-radius, 10px);
	background: var(--bgcolor-white, #fff);
	color: var(--pt-title-color, #1f2430);
	font-size: var(--pt-fs-sm);
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.pt-filters-bar__btn:hover,
.pt-filters-bar__item.is-active > .pt-filters-bar__btn {
	border-color: var(--pt-primary-color, #d4262c);
	color: var(--pt-primary-color, #d4262c);
}

.pt-filters-bar__caret {
	/*
	 * The rule is drawn on the caret's leading edge and stretched over the
	 * button's vertical padding, so it reads as a full height divider rather
	 * than a short dash beside the arrow.
	 */
	/*
	 * Stretching to the button's content box and then reaching back over its
	 * padding is what makes the rule run the full height of the button rather
	 * than just past the arrow.
	 */
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-block: -8px;
	margin-inline-start: 4px;
	padding-block: 8px;
	padding-inline-start: 10px;
	border-inline-start: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	transition: transform .2s ease;
}

.pt-filters-bar__caret::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}

.pt-filters-bar__btn.is-open .pt-filters-bar__caret::after,
.pt-filters-bar__item.is-open .pt-filters-bar__caret::after {
	transform: rotate(-135deg) translateY(-2px);
}

/*
 * Button icons. The Picon glyph map is not enqueued on the front end, so the
 * face and the codepoints are declared here rather than relying on the
 * picon-* utility classes.
 */
@font-face {
	font-family: "Picon";
	src: url(../../inc/admin/assets/fonts/Picon.woff2) format("woff2"),
		 url(../../inc/admin/assets/fonts/Picon.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.pt-filters-bar__icon {
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 1;
	color: var(--color-gray-500, #8b93a3);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pt-filters-bar__icon::before {
	font-family: "Picon";
	font-weight: 400;
	font-style: normal;
}

.pt-filters-bar__icon--sort::before     { content: "\e619"; }
.pt-filters-bar__icon--category::before { content: "\e206"; }
.pt-filters-bar__icon--price::before    { content: "\e603"; }
.pt-filters-bar__icon--color::before    { content: "\e149"; }
.pt-filters-bar__icon--size::before     { content: "\e524"; }
.pt-filters-bar__icon--popular::before  { content: "\e372"; }
.pt-filters-bar__icon--rating::before   { content: "\e591"; }
.pt-filters-bar__icon--new::before      { content: "\e183"; }
.pt-filters-bar__icon--price-up::before { content: "\e138"; }
.pt-filters-bar__icon--price-down::before { content: "\e107"; }
.pt-filters-bar__icon--clear::before    { content: "\e160"; }

.pt-filters-bar__btn:hover .pt-filters-bar__icon,
.pt-filters-bar__item.is-active .pt-filters-bar__icon,
.pt-filters-bar__item.is-open .pt-filters-bar__icon {
	color: inherit;
}

/*
 * The drawer grows the bar itself rather than floating a popup over the grid.
 * The 0fr/1fr grid trick animates to the content's own height, so nothing has
 * to be measured in script.
 */
.pt-filters-bar__drawer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .28s ease;
}

.pt-filters-bar.is-expanded .pt-filters-bar__drawer {
	grid-template-rows: 1fr;
}

.pt-filters-bar__drawer-inner {
	min-height: 0;
	overflow: hidden;
}

.pt-filters-bar__panel[hidden] {
	display: none;
}

.pt-filters-bar__panel {
	margin-top: 14px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--pt-inner-brd-radius, 10px);
	background: var(--bgcolor-gray-100, #f8f8f8);
}

.pt-filters-bar__panel-body {
	padding: 16px;
}

.pt-filters-bar__panel-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-top: 1px solid var(--brdcolor-gray-300, #e5e8ec);
}

.pt-filters-bar__collapse {
	margin-inline-start: auto;
	border: 0;
	background: none;
	color: var(--color-gray-500, #8b93a3);
	font-size: var(--pt-fs-sm);
	cursor: pointer;
}

.pt-filters-bar__collapse:hover {
	color: var(--pt-title-color, #1f2430);
}

/* Swatches and chips spread across the full width instead of scrolling. */
.pt-filters-bar__colors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.pt-filters-bar__chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 10px;
}

.pt-filters-bar__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 4px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Price sits on one row: the two fields side by side, slider and shortcuts below. */
.pt-filters-bar__price-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}


@media (max-width: 576px) {
	.pt-filters-bar__price-fields {
		grid-template-columns: 1fr;
	}
}

.pt-filters-bar__apply {
	flex: 1 1 auto;
	min-height: var(--btn-height, 42px);
	padding: 0 18px;
	border: 0;
	border-radius: var(--btn-brd-radius, 10px);
	background: var(--btn-bgcolor, var(--pt-primary-color, #d4262c));
	color: var(--btn-color, #fff);
	font-size: var(--btn-font-size, var(--pt-fs-md));
	font-weight: var(--btn-font-weight, 600);
	cursor: pointer;
}

.pt-filters-bar__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-height: var(--btn-height, 42px);
	padding: 0 16px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--btn-brd-radius, 10px);
	color: var(--pt-title-color, #1f2430);
	font-size: var(--pt-fs-sm);
}

.pt-filters-bar__clear:hover {
	border-color: var(--pt-primary-color, #d4262c);
	color: var(--pt-primary-color, #d4262c);
}

.pt-filters-bar__cat {
	background: var(--bgcolor-white, #fff);
	border-radius: var(--pt-inner-brd-radius, 10px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--pt-inner-brd-radius, 10px);
	color: var(--pt-text-color, #4a5060);
	font-size: var(--pt-fs-sm);
}

.pt-filters-bar__cat:hover {
	background: var(--bgcolor-gray-100, #f6f7f9);
	color: var(--pt-primary-color, #d4262c);
}

.pt-filters-bar__cat.is-current {
	background: var(--bgcolor-gray-100, #f6f7f9);
	color: var(--pt-primary-color, #d4262c);
	font-weight: 600;
}

.pt-filters-bar__count {
	color: var(--color-gray-500, #8b93a3);
	font-size: var(--pt-fs-2xs);
}

.pt-filters-bar__color {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: var(--pt-fs-sm);
	color: var(--pt-text-color, #4a5060);
}

.pt-filters-bar__color input,
.pt-filters-bar__chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pt-filters-bar__dot {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: 50%;
	background: var(--bgcolor-gray-100, #f6f7f9);
	box-shadow: 0 0 0 0 var(--pt-primary-color, #d4262c);
	transition: box-shadow .2s ease;
}

.pt-filters-bar__color.is-checked .pt-filters-bar__dot {
	box-shadow: 0 0 0 2px var(--bgcolor-white, #fff), 0 0 0 4px var(--pt-primary-color, #d4262c);
}

.pt-filters-bar__color.is-checked .pt-filters-bar__term {
	color: var(--pt-title-color, #1f2430);
	font-weight: 600;
}

.pt-filters-bar__chip {
	background: var(--bgcolor-white, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--pt-inner-brd-radius, 10px);
	color: var(--pt-text-color, #4a5060);
	font-size: var(--pt-fs-md);
	text-align: center;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.pt-filters-bar__chip:hover {
	border-color: var(--pt-primary-color, #d4262c);
}

.pt-filters-bar__chip.is-checked {
	border-color: var(--pt-primary-color, #d4262c);
	color: var(--pt-primary-color, #d4262c);
	font-weight: 600;
}

.pt-filters-bar__price-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--bgcolor-white, #fff);
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--pt-inner-brd-radius, 10px);
}

.pt-filters-bar__price-label {
	flex: 0 0 auto;
	color: var(--color-gray-500, #8b93a3);
	font-size: var(--pt-fs-sm);
}

.pt-filters-bar__price-field input {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0 !important;
	background: transparent;
	color: var(--pt-title-color, #1f2430);
	font-size: var(--pt-fs-md);
	text-align: start;
}

.pt-filters-bar__price-field input::-webkit-outer-spin-button,
.pt-filters-bar__price-field input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.pt-filters-bar__price-unit {
	flex: 0 0 auto;
	padding-inline-start: 8px;
	border-inline-start: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	color: var(--color-gray-500, #8b93a3);
	font-size: var(--pt-fs-xs);
}

.pt-filters-bar__slider {
	position: relative;
	height: 26px;
	margin: 18px 4px 6px;
}

.pt-filters-bar__slider-track,
.pt-filters-bar__slider-fill {
	position: absolute;
	top: 50%;
	height: 5px;
	border-radius: 999px;
	transform: translateY(-50%);
}

.pt-filters-bar__slider-track {
	inset-inline: 0;
	background: var(--bgcolor-gray-200, #ececec);
}

.pt-filters-bar__slider-fill {
	background: var(--pt-primary-color, #d4262c);
}

.pt-filters-bar__slider input[type="range"] {
	position: absolute;
	inset-inline: 0;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent;
	appearance: none;
	pointer-events: none;
	/*
	 * The theme sizes every input to the button height with !important, which
	 * left the range taller than its track and the handles riding above it.
	 */
	height: 26px !important;
	min-height: 0 !important;
}

.pt-filters-bar__slider input[type="range"]::-webkit-slider-runnable-track {
	height: 26px;
	background: transparent;
	border: 0;
}

.pt-filters-bar__slider input[type="range"]::-moz-range-track {
	height: 26px;
	background: transparent;
	border: 0;
}

.pt-filters-bar__slider input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--pt-primary-color, #d4262c);
	border-radius: 50%;
	background: var(--bgcolor-white, #fff);
	cursor: pointer;
	pointer-events: auto;
	/* Half the difference between the track and the thumb. */
	margin-top: 4px;
}

.pt-filters-bar__slider input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--pt-primary-color, #d4262c);
	border-radius: 50%;
	background: var(--bgcolor-white, #fff);
	cursor: pointer;
	pointer-events: auto;
}

.pt-filters-bar__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.pt-filters-bar__quick-link {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--bgcolor-gray-200, #ececec);
	color: var(--pt-text-color, #4a5060);
	font-size: var(--pt-fs-xs);
	line-height: 1.7;
	transition: background .2s ease, color .2s ease;
}

/*
 * One rule, because two of them set colour and the later one won: the link
 * ended up with primary text on a primary background, which is no text at all.
 */
.pt-filters-bar__quick-link:hover {
	border-color: var(--pt-primary-color, #d4262c);
	background: var(--pt-primary-color, #d4262c);
	color: var(--bgcolor-white, #fff);
}

/* Toggles */

.pt-filters-bar__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pt-text-color, #4a5060);
	font-size: var(--pt-fs-sm);
	white-space: nowrap;
}

.pt-filters-bar__switch {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 21px;
	border-radius: 999px;
	background: var(--bgcolor-gray-200, #ececec);
	transition: background .2s ease;
}

.pt-filters-bar__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--bgcolor-white, #fff);
	transition: transform .2s ease;
}

.pt-filters-bar__toggle.is-on .pt-filters-bar__switch {
	background: var(--pt-primary-color, #d4262c);
}

.pt-filters-bar__toggle.is-on .pt-filters-bar__switch::after {
	transform: translateX(-17px);
}

:where([dir="ltr"]) .pt-filters-bar__toggle.is-on .pt-filters-bar__switch::after {
	transform: translateX(17px);
}

.pt-filters-bar__toggle.is-on .pt-filters-bar__toggle-label {
	color: var(--pt-title-color, #1f2430);
	font-weight: 600;
}

.pt-filters-bar__total {
	color: var(--color-gray-500, #8b93a3);
	font-size: var(--pt-fs-sm);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.pt-filters-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.pt-filters-bar__side {
		justify-content: space-between;
	}
}

@media (max-width: 576px) {
	.pt-filters-bar__colors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pt-filters-bar__chips {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Phone: two buttons, and the filters open as a sheet ────────────────── */

.pt-filters-bar__sheet-btn,
.pt-filters-bar__backdrop,
.pt-filters-bar__sheet-head,
.pt-filters-bar__acc {
	display: none;
}

.pt-filters-bar__icon--filters::before { content: "\e338"; }

@media (max-width: 767px) {
	/*
	 * The individual filter buttons would wrap onto three or four lines and
	 * push the products off the screen, so on a phone they are replaced by a
	 * single button that brings the whole set up as a sheet. Sorting keeps its
	 * own button beside it — it is the control people reach for first.
	 */
	/* On a phone the bar sits straight on top of the grid. */
	.pt-filters-bar {
		margin-bottom: 0;
	}

	/* The top row stacks so the two buttons get the full width to share. */
	.pt-filters-bar__top {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.pt-filters-bar__scroll {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		width: 100%;
	}

	.pt-filters-bar__scroll > .pt-filters-bar__btn {
		display: none;
	}

	/* Sorting is the first panel, so it keeps its button. */
	.pt-filters-bar__scroll > .pt-filters-bar__btn:first-child {
		display: inline-flex;
		justify-content: space-between;
	}

	.pt-filters-bar__sheet-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 8px 14px;
		border: 2px solid var(--pt-box-brd, #e6e6e6);
		border-radius: var(--btn-brd-radius, 10px);
		background: var(--bgcolor-white, #fff);
		color: var(--pt-title-color, #1f2430);
		font-size: var(--pt-fs-sm);
		font-weight: 600;
		line-height: 1.6;
		cursor: pointer;
	}

	.pt-filters-bar__side {
		margin-top: 12px;
	}

	.pt-filters-bar__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
	}

	.pt-filters-bar__backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}

	/*
	 * Which element owns the page scroll is the browser's business, so the
	 * lock goes on both. It has to be the longhand and it has to be forced:
	 * the theme already pins overflow-y to scroll on <html> and overflow-x to
	 * clip on <body>, and a plain `overflow: hidden` loses to both — which is
	 * what let the page carry on scrolling under an open sheet.
	 */
	html.pt-filters-lock,
	body.pt-filters-lock {
		overflow-y: hidden !important;
	}

	/*
	 * A clip-path makes the bar a containing block and clips everything inside
	 * it, the fixed sheet included — which is why the sheet vanished the moment
	 * the bar stuck to the top. While the sheet is up the stuck band steps
	 * aside; it comes straight back when the sheet closes.
	 */
	.pt-filters-bar.is-sheet.is-expanded {
		clip-path: none;
		animation: none;
	}

	/* The drawer becomes the sheet. */
	.pt-filters-bar.is-sheet .pt-filters-bar__drawer {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		max-height: 85vh;
		padding-bottom: calc(var(--plt-toolbar-h, 0px) + env(safe-area-inset-bottom, 0px));
		border-radius: var(--pt-outer-brd-radius, 15px) var(--pt-outer-brd-radius, 15px) 0 0;
		background: var(--bgcolor-white, #fff);
		box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
		/*
		 * The sticky toolbar floats over the bottom of every phone page, so the
		 * sheet ends above it rather than behind it. The token is only set while
		 * that toolbar is on the page, which makes this nothing when it is not.
		 */
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s;
	}

	.pt-filters-bar.is-sheet.is-expanded .pt-filters-bar__drawer {
		transform: translateY(0);
		visibility: visible;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		padding: 16px 20px;
		border-bottom: 1px solid var(--pt-box-brd, #e6e6e6);
	}

	.pt-filters-bar__sheet-title {
		font-size: var(--pt-fs-lg);
		font-weight: 600;
		color: var(--pt-title-color, #1f2430);
	}

	/*
	 * The theme-wide control reset sets every button's radius and minimum
	 * height with !important, so a round 30px button has to say so in the same
	 * terms — specificity alone does not reach it.
	 */
	.pt-filters-bar.is-sheet .pt-filters-bar__sheet-close {
		position: relative;
		width: 30px;
		height: 30px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 50% !important;
		background: var(--bgcolor-gray-100, #f6f7f9);
		color: var(--color-gray-500, #8b93a3);
		cursor: pointer;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__sheet-close::before,
	.pt-filters-bar.is-sheet .pt-filters-bar__sheet-close::after {
		content: "";
		position: absolute;
		inset-inline-start: 9px;
		top: 14px;
		width: 12px;
		height: 1.5px;
		background: currentColor;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__sheet-close::before { transform: rotate(45deg); }
	.pt-filters-bar.is-sheet .pt-filters-bar__sheet-close::after  { transform: rotate(-45deg); }

	.pt-filters-bar.is-sheet .pt-filters-bar__drawer-inner {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 0 20px 20px;
	}

	/* Every filter is present; the accordions decide what is unfolded. */
	.pt-filters-bar.is-sheet .pt-filters-bar__panel {
		display: block;
		margin: 0;
		border: 0;
		border-bottom: 1px dashed #f0f0f0;
		border-radius: 0;
		background: transparent;
	}

	/*
	 * Sorting keeps its own button next to the trigger, so its panel stays out
	 * of the sheet — asking the same question in two places is just clutter.
	 */
	.pt-filters-bar.is-sheet .pt-filters-bar__panel--sort {
		display: none;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__acc {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 16px 0;
		border: 0;
		background: none;
		color: var(--pt-title-color, #1f2430);
		font-size: var(--pt-fs-md);
		font-weight: 600;
		text-align: start;
		cursor: pointer;
	}

	.pt-filters-bar__acc-label {
		flex: 1 1 auto;
	}

	/*
	 * The opener is a Picon glyph rather than a pair of rotated borders, so it
	 * sits on the same font as every other icon in the bar and swaps outright
	 * between the two states instead of spinning through them.
	 */
	.pt-filters-bar__acc-caret {
		flex: 0 0 auto;
		color: var(--color-gray-500, #8b93a3);
		font-size: 20px;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.pt-filters-bar__acc-caret::before {
		content: "\e118";
		font-family: "Picon";
		font-weight: 400;
		font-style: normal;
	}

	.pt-filters-bar__panel.is-unfolded .pt-filters-bar__acc-caret::before {
		content: "\e129";
	}

	/* Folded away until asked for, animating to the content's own height. */
	.pt-filters-bar.is-sheet .pt-filters-bar__panel-body {
		display: grid;
		grid-template-rows: 0fr;
		padding: 0;
		transition: grid-template-rows .28s ease;
	}

	/*
	 * An unfolded filter sits in a soft tray. The dressing lives on the
	 * unfolded state alone, so nothing paints a sliver of grey while the panel
	 * is shut and the fold still animates from nothing to its own height.
	 */
	.pt-filters-bar.is-sheet .pt-filters-bar__panel.is-unfolded .pt-filters-bar__panel-body {
		grid-template-rows: 1fr;
		margin-bottom: 16px;
		padding: 12px;
		border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
		border-radius: var(--pt-outer-brd-radius, 15px);
		background: var(--bgcolor-gray-100, #f6f7f9);
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__panel-body > * {
		min-height: 0;
		overflow: hidden;
	}

	/*
	 * The lists in the sheet read the way the sorting list does: one row per
	 * card, its own outline, room to breathe between them. Left as a plain
	 * grid the rows ran the full width of the sheet and the count drifted an
	 * arm's length from the name it belonged to.
	 */
	.pt-filters-bar.is-sheet .pt-filters-bar__list {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__list > li {
		margin: 0;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__cat {
		padding: 8px 15px;
		border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
		border-radius: var(--pt-inner-brd-radius, 10px);
		background: var(--bgcolor-white, #fff);
		font-size: var(--pt-fs-md);
		text-align: start;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__cat.is-current {
		border-color: var(--pt-primary-color, #d4262c);
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__panel-foot {
		display: none;
	}

	.pt-filters-bar.is-sheet .pt-filters-bar__panel.is-unfolded .pt-filters-bar__panel-foot {
		display: flex;
		padding-inline: 0;
		border: 0;
	}
}