/**
 * Каталог: фильтры на телефоне.
 *
 * На мобильном сайдбар занимал ~1200px до первого товара — покупатель
 * пролистывал два экрана фильтров, прежде чем что-то увидеть.
 * Теперь панель свёрнута, а над списком стоит кнопка.
 */

.olymp-filters-toggle {
	display: none;
}

@media (max-width: 991px) {

	.olymp-filters-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 50px;
		margin: 0 0 16px;
		padding: 0 16px;
		border: 1px solid #dcdcdc;
		border-radius: 12px;
		background: #fff;
		color: #1c1c1c;
		font-family: inherit;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
		transition: border-color .2s ease, background-color .2s ease;
	}

	.olymp-filters-toggle:hover,
	.olymp-filters-toggle:focus-visible {
		border-color: #ee2b2b;
		background: #fff8f8;
	}

	.olymp-filters-toggle:focus-visible {
		outline: 2px solid #ee2b2b;
		outline-offset: 2px;
	}

	.olymp-filters-toggle__icon {
		flex: none;
		width: 20px;
		height: 20px;
		color: #ee2b2b;
	}

	.olymp-filters-toggle__label {
		margin-right: auto;
	}

	/* Сколько значений выбрано: под свёрнутой панелью иначе не понять,
	   что список уже отфильтрован. */
	.olymp-filters-toggle__count {
		flex: none;
		display: grid;
		place-items: center;
		min-width: 24px;
		height: 24px;
		padding: 0 7px;
		border-radius: 12px;
		background: #ee2b2b;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
	}

	.olymp-filters-toggle__count[hidden] {
		display: none;
	}

	/* Стрелка показывает состояние панели */
	.olymp-filters-toggle__chevron {
		flex: none;
		width: 16px;
		height: 16px;
		color: #8a8a8a;
		transition: transform .2s ease;
	}

	.olymp-filters-toggle[aria-expanded="true"] .olymp-filters-toggle__chevron {
		transform: rotate(180deg);
	}

	/* Сама панель: по умолчанию свёрнута */
	.hill_wc_left_sidebar {
		display: none;
	}

	.hill_wc_left_sidebar.is-open {
		display: block;
		margin-bottom: 18px;
		padding: 4px 16px 12px;
		border: 1px solid #ececec;
		border-radius: 12px;
		background: #fafafa;
	}
}

@media (prefers-reduced-motion: reduce) {
	.olymp-filters-toggle,
	.olymp-filters-toggle__chevron {
		transition: none;
	}
}