/* ==========================================================================
   Mobile menu — offcanvas, дерево категорий
   ========================================================================== */

.mobile_menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: rgba(15, 17, 23, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
.mobile_menu.is-open { opacity: 1; visibility: visible; }

.mobile_menu_wrap {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(340px, 88vw);
	background: var(--color-surface);
	padding: var(--space-6) var(--space-5);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--dur-base) var(--ease);
	box-shadow: var(--shadow-lg);
}
.mobile_menu.is-open .mobile_menu_wrap { transform: translateX(0); }

.mobile_menu_close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: auto;
	margin-bottom: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: none;
	cursor: pointer;
	color: var(--color-text-secondary);
}
.mobile_menu_close svg { width: 16px; height: 16px; }

.mobile_menu_title {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	font-weight: 700;
	margin-bottom: var(--space-2);
}

.mobile_menu_list {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}
.mobile_menu_list > li { margin-bottom: 2px; }

.mobile_menu_list a {
	display: block;
	padding: var(--space-2) var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.mobile_menu_list a:hover { background: var(--color-bg-muted); }

.mobile_menu_list ul {
	list-style: none;
	margin: 0 0 0 var(--space-3);
	padding: 0;
	border-left: 1px solid var(--color-border);
}
.mobile_menu_list ul a {
	font-weight: 400;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}

body.no-scroll { overflow: hidden; }