/**
 * Мобільна панель фільтрів у каталозі.
 *
 * Механіку показу лишаємо ту, що вже є в app.css: на телефоні оверлей
 * завжди в DOM і зсунутий за екран (right: -100%), а клас .open висуває
 * його. Тому тут не чіпаємо display — тільки геометрію й вміст.
 * Палітра сайту: #cd2122, #282828, #767676, #e9eaea, Montserrat, 3px.
 */

@media screen and (max-width: 768px) {

	.vp-filter-overlay {
		background: rgba(0, 0, 0, 0);
		transition: right .25s cubic-bezier(.2, .9, .3, 1), background-color .25s ease;
	}

	.vp-filter-overlay.open {
		background: rgba(0, 0, 0, .45);
	}

	/* Панель — колонка: шапка й кнопка прибиті, скролиться лише список.
	   Раніше скролилось усе разом, і кнопки «показати» просто не було. */
	.vp-filter-wrapper {
		/* Було float: right — колонку зносило вниз на висоту шапки,
		   і під кнопкою лишалась порожня біла смуга. Прибиваємо до країв. */
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		float: none;
		/* app.css лишав margin-top: 60px — панель починалась нижче краю,
		   а знизу під кнопкою висіла порожня біла смуга. */
		margin: 0 !important;
		/* Розкладка на абсолютах, а не flex: у цій панелі flex-grow чомусь
		   не забирав вільне місце (стилі теми), і кнопка висіла в повітрі
		   за 160px від низу екрана. Абсолюти дають однозначний результат. */
		display: block;
		width: 88%;
		max-width: 420px;
		/* Явна висота, а не top/bottom: інакше flex рахував вільне місце
		   від вмісту й кнопка не доходила до низу екрана.
		   dvh — щоб панель не лізла під адресний рядок на телефоні. */
		height: 100vh !important;
		height: 100dvh !important;
		padding: 0 !important;
		overflow: hidden !important;
		font-family: "Montserrat", Helvetica, Arial, sans-serif;
		box-shadow: 0 0 40px rgba(0, 0, 0, .25);
	}

	/* --- шапка --- */

	.tf-panel__head {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 56px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		background: #fff;
		border-bottom: 1px solid #e9eaea;
	}

	.tf-panel__title {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #282828;
	}

	.vp-filter-wrapper .closeFilter,
	.vp-filter-wrapper .closeFilter:focus {
		position: static !important;
		top: auto !important;
		right: auto !important;
		width: 34px !important;
		height: 34px !important;
		background-position: center center;
	}

	/* --- смуга очікування ---
	   Відповідь сервера йде ~1–1.5 с. Без неї тап виглядав як зависання. */

	.tf-panel__progress {
		position: absolute;
		top: 56px;
		left: 0;
		right: 0;
		height: 2px;
		z-index: 2;
		overflow: hidden;
		background: #e9eaea;
		opacity: 0;
		transition: opacity .15s ease;
	}

	.vp-filter-overlay.is-busy .tf-panel__progress {
		opacity: 1;
	}

	.tf-panel__progress span {
		display: block;
		width: 40%;
		height: 100%;
		background: #cd2122;
		transform: translateX(-100%);
	}

	.vp-filter-overlay.is-busy .tf-panel__progress span {
		animation: tf-bar 1s linear infinite;
	}

	@keyframes tf-bar {
		from { transform: translateX(-100%); }
		to   { transform: translateX(350%); }
	}

	/* Список глушимо, але не блокуємо: видно, що тап зарахований,
	   і можна одразу відмітити ще один фільтр. */
	.vp-filter-overlay.is-busy .tf-panel__body {
		opacity: .55;
		transition: opacity .15s ease;
	}

	/* --- тіло --- */

	.tf-panel__body {
		position: absolute;
		top: 58px;
		bottom: calc(70px + env(safe-area-inset-bottom));
		left: 0;
		right: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 6px 16px 16px;
	}

	.tf-panel__body .zn_sidebar,
	.tf-panel__body .widget {
		display: block !important;
		width: auto;
		float: none;
	}

	/* Пошук у панелі дублює лупу в шапці й займає перший екран —
	   прибираємо, щоб фільтри були одразу видно. */
	.tf-panel__body .widget_search {
		display: none !important;
	}

	/* Пальцю потрібна мішень, а не 13-піксельний квадратик. Але висоту
	   набирає лише підпис: сам квадратик — це label з намальованою рамкою,
	   і будь-який padding на ньому зсуває його вгору відносно тексту. */
	.tf-panel__body .filter__checkgroup-link {
		display: flex;
		align-items: center;
		gap: 9px;
	}

	.tf-panel__body .filter__checkgroup-check {
		flex: 0 0 auto;
		/* Тема зсувала квадратик на 1.8px вниз під старий рядковий макет —
		   при вирівнюванні по центру цей зсув уже зайвий. */
		top: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	.tf-panel__body .filter__checkgroup-title {
		padding: 10px 0;
		line-height: 1.35;
		cursor: pointer;
	}

	/* --- підвал --- */

	.tf-panel__foot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(70px + env(safe-area-inset-bottom));
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #e9eaea;
	}

	.tf-panel__reset {
		flex: 0 0 auto;
		font-size: 13px;
		color: #767676;
		text-decoration: underline;
	}

	.tf-panel__reset:hover {
		color: #cd2122;
	}

	.tf-panel__apply {
		flex: 1 1 auto;
		height: 46px;
		padding: 0 14px;
		font-family: inherit;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #fff;
		background: #282828;
		border: 0;
		border-radius: 3px;
		cursor: pointer;
		transition: background-color .18s ease;
	}

	.tf-panel__apply:disabled {
		background: #b6b7b8;
		cursor: default;
	}

	html.tf-filters-open,
	html.tf-filters-open body {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vp-filter-overlay { transition: none; }
	.tf-panel__progress span { animation-duration: 2.4s; }
}