/* ==========================================================================
   Меню категорий (.drawer.categories-drawer) на мобильной версии:
   переоформлено в нижний bottom-sheet (выезжает снизу, а не сбоку), как
   нативный UI-паттерн мобильных приложений. Только для мобильной ширины —
   на ПК/планшете это по-прежнему боковая панель темы без изменений.
   ========================================================================== */

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

	.drawer.categories-drawer {
		align-items: flex-end; /* прижимаем панель к низу экрана */
	}

	.drawer.categories-drawer .drawer-inner {
		width: 100%;
		max-height: 82vh;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -12px 40px -8px rgba(0, 0, 0, 0.25);
		/* Слайд снизу вместо слайда сбоку. Не трогаем JS: та же логика
		   класса .active, просто задаём transform напрямую (в обход
		   переменной --drawer-translate-x, которая рассчитана на
		   горизонтальный слайд) — наша более специфичная связка
		   .categories-drawer .drawer-inner побеждает базовое правило темы. */
		transform: translateY(100%);
		transition: transform 0.4s cubic-bezier(0.22, 0.68, 0, 1);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.drawer.categories-drawer.active .drawer-inner {
		transform: translateY(0);
	}

	/* "Ручка" bottom-sheet — визуальная подсказка, что панель можно закрыть
	   свайпом/тапом, стандартный паттерн нижних шторок в мобильных приложениях. */
	.drawer.categories-drawer .drawer-inner::before {
		content: '';
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 4px;
		border-radius: 999px;
		background-color: rgba(0, 0, 0, 0.15);
	}

	.drawer.categories-drawer .drawer-inner-header {
		padding-top: 22px;
		border-radius: 20px 20px 0 0;
	}

	.drawer.categories-drawer .drawer-inner-header .entry-title {
		font-size: 15px;
		letter-spacing: 0.02em;
	}

	.drawer.categories-drawer .drawer-inner-header .close-button a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.06);
		transition: background-color 0.2s ease;
	}

	.drawer.categories-drawer .drawer-inner-header .close-button a:hover,
	.drawer.categories-drawer .drawer-inner-header .close-button a:active {
		background-color: rgba(0, 0, 0, 0.12);
	}

	.drawer.categories-drawer .drawer-inner-body {
		padding-bottom: 24px;
		-webkit-overflow-scrolling: touch;
	}

	/* Затемнение фона плавнее и мягче под низкую шторку. */
	.drawer.categories-drawer .drawer-overlay {
		background-color: rgba(0, 0, 0, 0.45);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.drawer.categories-drawer .drawer-inner {
		transition: none;
	}
}