.vs-panel {
	display: none;
}
.vs-header__catalog.vs-panel {
	display: block;
}
.vs-header__catalog .vs-panel__back,
.vs-header__catalog .vs-panel__close,
.vs-header__catalog .vs-panel__title {
	display: none;
}
@media (max-width: 1024px) {
	.vs-panel {
		
		--vs-panel-w: min(88vw, 400px);
		display: block;
		position: fixed;
		inset: 0;
		
		z-index: 99000;
		
		visibility: hidden;
		transition: visibility 0s linear var(--vs-slow);
	}
	
	.vs-panel .vs-panel__back {
		display: block;
		position: absolute;
		inset: 0;
		background: var(--vs-backdrop);
		opacity: 0;
		transition: opacity var(--vs-slow) var(--vs-ease);
	}
	
	.vs-panel .vs-panel__box {
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: var(--vs-panel-w);
		max-width: none;
		margin: 0;
		padding: 16px 18px 24px;
		overflow-y: auto;
		
		overscroll-behavior: contain;
		background: var(--vs-surface);
		box-shadow: 0 0 40px rgba(0, 0, 0, .28), 0 0 0 1px var(--vs-edge);
		transition: transform var(--vs-slow) var(--vs-ease);
	}
	.vs-panel--left .vs-panel__box {
		left: 0;
		transform: translateX(-100%);
	}
	.vs-panel--right .vs-panel__box {
		right: 0;
		transform: translateX(100%);
	}
	
	.vs-panel:target,
	.vs-panel--open {
		visibility: visible;
		transition-delay: 0s;
	}
	.vs-panel:target .vs-panel__back,
	.vs-panel--open .vs-panel__back {
		opacity: 1;
	}
	.vs-panel:target .vs-panel__box,
	.vs-panel--open .vs-panel__box {
		transform: none;
	}
	
	.vs-panel .vs-panel__title {
		display: block;
		margin: 0 40px 14px 0;
		color: var(--vs-text);
		font-family: "Montserrat", sans-serif;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.2;
	}
	
	.vs-panel__dash {
		color: var(--vs-accent);
	}
	.vs-panel .vs-panel__close {
		display: flex;
		position: absolute;
		top: 8px;
		right: 10px;
		align-items: center;
		justify-content: center;
		
		width: 40px;
		height: 40px;
		color: var(--vs-close);
		font-size: 30px;
		line-height: 1;
		text-decoration: none;
		transition: color var(--vs-fast) var(--vs-ease);
	}
	.vs-panel .vs-panel__close:hover,
	.vs-panel .vs-panel__close:focus-visible {
		color: var(--vs-text);
	}
	
	
	.vs-panel__body {
		font-family: "Montserrat", sans-serif;
	}
	
	.vs-panel__body .menu-item a img,
	.vs-panel__body a img.menu-image {
		width: 24px;
		height: 24px;
		flex: 0 0 auto;
		object-fit: contain;
	}
	.vs-nav,
	.vs-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.vs-nav li {
		margin: 0;
	}
	.vs-nav a {
		display: block;
		padding: 11px 2px;
		border-bottom: 1px solid var(--vs-line);
		color: var(--vs-text);
		font-size: 16px;
		line-height: 1.3;
		text-decoration: none;
		transition: color var(--vs-fast) var(--vs-ease);
	}
	.vs-nav a:hover,
	.vs-nav a:focus-visible,
	.vs-nav a[aria-current] {
		color: var(--vs-accent);
	}
	
	.vs-nav ul {
		padding-left: 14px;
	}
	.vs-nav ul a {
		font-size: 15px;
	}
	.vs-nav ul ul a {
		color: var(--vs-text-dim);
		font-size: 14px;
	}
	
	.vs-nav summary {
		display: block;
		position: relative;
		list-style: none;
		cursor: pointer;
	}
	.vs-nav summary::-webkit-details-marker {
		display: none;
	}
	.vs-nav summary a {
		padding-right: 48px;
	}
	
	.vs-nav summary::after {
		content: "+";
		position: absolute;
		top: 0;
		right: 0;
		width: 46px;
		color: var(--vs-accent);
		font-size: 22px;
		line-height: 44px;
		text-align: center;
		transition: transform var(--vs-slow) var(--vs-ease);
	}
	.vs-nav details[open] > summary::after {
		transform: rotate(45deg);
	}
	
	
	.vs-header__catalog.vs-panel {
		
		--vs-panel-w: min(92vw, 420px);
		
		padding: 0;
		border-bottom: 0;
	}
	
	.vs-panel .vs-catalog {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.vs-panel .vs-catalog > li {
		display: block;
	}
	.vs-panel .vs-catalog a {
		height: 100%;
		padding: 12px 6px;
		border-radius: var(--vs-radius);
		font-size: 13px;
	}
	.vs-panel .vs-catalog img {
		height: 46px;
	}
	
	.vs-panel .vs-catalog .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		min-width: 0;
		margin-top: 6px;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: none;
	}
	.vs-panel .vs-catalog .sub-menu a {
		height: auto;
		gap: 7px;
		padding: 5px 4px;
		font-size: 12px;
		text-align: left;
	}
	
	.vs-panel .vs-catalog .sub-menu img {
		width: 46px;
		height: 26px;
	}
	
	.vs-panel .vs-catalog > li::after {
		content: none;
	}
	
	
	.vs-panel__contacts {
		margin: 0 0 18px;
		padding: 0;
		list-style: none;
		font-family: "Montserrat", sans-serif;
	}
	.vs-panel__contacts li {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 10px 0;
		border-bottom: 1px solid var(--vs-line);
		font-size: 15px;
		line-height: 1.35;
	}
	
	.vs-panel__contacts .vs-micon {
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
	}
	.vs-panel__contacts a {
		color: var(--vs-text);
		text-decoration: none;
		transition: color var(--vs-fast) var(--vs-ease);
	}
	.vs-panel__contacts a:hover,
	.vs-panel__contacts a:focus-visible {
		color: var(--vs-accent);
	}
	.vs-panel__social {
		display: flex;
		gap: 12px;
		margin: 0 0 20px;
		padding: 0;
		list-style: none;
	}
	.vs-panel__social li {
		margin: 0;
	}
	.vs-panel__social img {
		display: block;
		width: 32px;
		height: 32px;
	}
	
	.vs-panel__btn {
		position: relative;
		z-index: 0;
		display: block;
		margin-top: auto;
		padding: 14px 20px;
		border-radius: var(--vs-radius-btn);
		background-color: var(--vs-accent);
		background-image: linear-gradient(90deg, var(--vs-accent) 0%, var(--vs-accent-light) 100%);
		box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
		color: var(--vs-btn-text);
		font-family: "Montserrat", sans-serif;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		transition: transform var(--vs-fast) var(--vs-ease);
	}
	.vs-panel__btn::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background-image: linear-gradient(90deg, var(--vs-accent-light) 0%, var(--vs-accent) 100%);
		opacity: 0;
		transition: opacity var(--vs-slow) var(--vs-ease);
	}
	.vs-panel__btn:hover::after,
	.vs-panel__btn:focus-visible::after {
		opacity: 1;
	}
	.vs-panel__btn:hover,
	.vs-panel__btn:focus-visible {
		color: var(--vs-btn-text);
		transform: translateY(-1px);
	}
	.vs-panel__btn:active {
		transform: translateY(0);
	}
	
	
	@media (max-width: 420px) {
		.vs-panel {
			--vs-panel-w: 94vw;
		}
		.vs-header__catalog.vs-panel {
			--vs-panel-w: 96vw;
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	.vs-panel,
	.vs-panel__back,
	.vs-panel .vs-panel__box,
	.vs-nav summary::after,
	.vs-panel__btn,
	.vs-panel__btn::after {
		transition: none;
	}
	.vs-panel--left .vs-panel__box,
	.vs-panel--right .vs-panel__box {
		transform: none;
	}
	.vs-panel__btn:hover,
	.vs-panel__btn:focus-visible {
		transform: none;
	}
}