/*
 * Шапка сайта (header#navbar.mk-header). Подключается из index.php после
 * template.css. Старые правила `header #top_menu …` / `#header_items` сюда
 * не применяются: у обёрток теперь другие id (#mk-menu, #mk-nav).
 *
 * Шапка фиксированная, поэтому её высота задана переменной и тем же
 * значением отодвигается #center — при сжатии шапки контент не прыгает.
 */
:root {
	--mk-dark: #1E1C1C;
	--mk-dark-2: #2a2727;
	--mk-purple: #51379F;
	--mk-purple-hover: #4A2CA3;
	--mk-purple-light: #7E58EC;
	--mk-header-h: 64px;
}
@media (min-width: 1200px) {
	:root { --mk-header-h: 146px; }
}

html { scroll-padding-top: calc(var(--mk-header-h) + 1rem); }
#center { margin-top: var(--mk-header-h); }
/* 6rem в template.css компенсировал старую шапку, заходившую на контент;
   теперь #center начинается ровно под шапкой */
#center #top .breadcrumb { margin-top: 2rem !important; }

/* ---------- каркас ---------- */
#navbar.mk-header {
	display: block;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--mk-dark) !important;
	color: #fff;
	font-size: 15px;
	line-height: 1.35;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
	transition: box-shadow .25s ease;
}
#navbar.mk-header.is-compact { box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }

.mk-header__top > .container {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 64px;
	padding-top: .5rem;
	padding-bottom: .5rem;
	transition: min-height .25s ease, padding .25s ease;
}

/* ---------- логотип ---------- */
/* #navbar #logo — перебить `header #logo {width: 52%}` из template.css */
#navbar #logo.mk-header__logo {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	line-height: 0;
}
.mk-header .mk-header__logo img {
	display: block;
	width: auto;
	height: 48px;
	transition: height .25s ease;
}

/* ---------- инфо-блоки (модули header_item) ---------- */
.mk-header__info {
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	min-width: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .85);
}
.mk-header__info .moduletable { display: flex; align-items: center; gap: .6rem; }
.mk-header__info p { margin: 0; }
.mk-header__info a { color: #fff; }
.mk-header__info a:hover,
.mk-header__info a:focus { color: var(--mk-purple-light); }

/* иконки перед блоками — маской, цвет берётся из currentColor */
.mk-header__info .mod-time::before,
.mk-header__info .mod-address::before,
.mk-header__info .mod-phone::before {
	content: '';
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: var(--mk-purple-light);
	-webkit-mask: var(--mk-ico) center / contain no-repeat;
	mask: var(--mk-ico) center / contain no-repeat;
}
.mk-header__info .mod-time { --mk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.mk-header__info .mod-address { --mk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.mk-header__info .mod-phone { --mk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }

/* «Режим работы» — подпись мелким серым */
.mk-header__info .mod-time p.mb-1 { font-size: 12px; color: rgba(255, 255, 255, .55); }
.mk-header__info .mod-time .moduletable, .mk-header__info .mod-time > p { margin: 0; }
.mk-header__info .mod-time,
.mk-header__info .mod-address { flex-wrap: nowrap; }
.mk-header__info .mod-time > p + p,
.mk-header__info .mod-time > p.mb-1 { margin: 0; }
.mk-header__info .mod-time { display: grid; grid-template-columns: 18px auto; gap: 1px .6rem; align-items: center; }
.mk-header__info .mod-time p.mb-1 { margin: 0 !important; }
.mk-header__info .mod-time::before { grid-row: 1 / span 2; }

/* телефоны: основной крупнее */
.mk-header__info .mod-phone { display: grid; grid-template-columns: 18px auto; gap: 1px .6rem; align-items: center; }
.mk-header__info .mod-phone::before { grid-row: 1 / span 2; }
.mk-header__info .mod-phone p:first-of-type a { font-size: 17px; font-weight: 700; white-space: nowrap; }
.mk-header__info .mod-phone p + p a { font-size: 14px; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.mk-header__info .mod-phone p.mb-1 { margin: 0 !important; }

/* мессенджеры */
.mk-header__info .mod-soc p { display: flex; gap: .5rem; }
.mk-header__info .mod-soc img { width: 30px; height: 30px; margin: 0 !important; transition: transform .2s ease; }
.mk-header__info .mod-soc a:hover img { transform: translateY(-2px); }

/* ---------- действия справа ---------- */
.mk-header__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-left: auto;
	flex: 0 0 auto;
}

.mk-header__cta {
	align-items: center;
	height: 42px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 6px;
	background: var(--mk-purple);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 8px 20px -8px rgba(126, 88, 236, .6);
	transition: background .2s ease, box-shadow .2s ease;
}
.mk-header__cta:hover,
.mk-header__cta:focus-visible { background: var(--mk-purple-light); box-shadow: 0 10px 24px -8px rgba(126, 88, 236, .8); outline: none; }

/* телефон на мобильном — видно сразу */
.mk-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}
.mk-header__phone::before {
	content: '';
	width: 18px;
	height: 18px;
	background: var(--mk-purple-light);
	--mk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	-webkit-mask: var(--mk-ico) center / contain no-repeat;
	mask: var(--mk-ico) center / contain no-repeat;
}
.mk-header__phone:hover,
.mk-header__phone:focus { color: var(--mk-purple-light); }

/* корзина */
.mk-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 6px;
	color: #fff;
	background: rgba(255, 255, 255, .06);
	transition: background .2s ease, color .2s ease;
}
.mk-header__cart::before {
	content: '';
	width: 22px;
	height: 22px;
	background: currentColor;
	--mk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.2a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.5L22 8H6.2'/%3E%3C/svg%3E");
	-webkit-mask: var(--mk-ico) center / contain no-repeat;
	mask: var(--mk-ico) center / contain no-repeat;
}
.mk-header__cart:hover,
.mk-header__cart:focus { background: var(--mk-purple); color: #fff; }
.mk-header__cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--mk-purple-light);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--mk-dark);
}
.mk-header__cart-count[hidden] { display: none; }

/* бургер */
.mk-header .mk-header__toggler {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
}
.mk-header .mk-header__toggler:focus { outline: 2px solid var(--mk-purple-light); outline-offset: 1px; }
.mk-header .mk-header__toggler .navbar-toggler-icon { filter: none; width: 24px; height: 24px; }

/* ---------- меню ---------- */
.mk-menu ul { list-style: none; margin: 0; padding: 0; }
.mk-menu li { margin: 0; padding: 0; position: relative; }
.mk-menu li::before, .mk-menu li::after { content: none; }
.mk-menu a { display: block; color: #fff; text-decoration: none; }
.mk-menu a::before, .mk-menu a::after { content: none; }

/* стрелка-раскрывашка у родителей (кнопка добавляется header.js) */
.mk-sub-toggle {
	display: none;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.mk-sub-toggle::before,
.mk-menu > ul > li.parent > a::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background: currentColor;
	--mk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
	-webkit-mask: var(--mk-ico) center / contain no-repeat;
	mask: var(--mk-ico) center / contain no-repeat;
	transition: transform .2s ease;
}

@media (min-width: 1200px) {
	.mk-header__top > .container { min-height: 88px; padding-top: .75rem; padding-bottom: .75rem; }
	.mk-header .mk-header__logo img { height: 64px; }

	.mk-header__nav { border-top: 1px solid rgba(255, 255, 255, .08); }

	.mk-menu > ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-between;
		width: 100%;
	}
	.mk-menu > ul > li { display: flex; }
	.mk-menu > ul > li > a {
		display: flex;
		align-items: center;
		gap: .4rem;
		height: 56px;
		padding: 0 .9rem;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: .01em;
		white-space: nowrap;
		position: relative;
		transition: color .2s ease, background .2s ease;
	}
	.mk-menu > ul > li:first-child > a { padding-left: 0; }
	.mk-menu > ul > li:last-child > a { padding-right: 0; }
	/* полоска снизу: hover — короткая, active — во всю ширину текста */
	.mk-menu > ul > li > a::before {
		content: '';
		position: absolute;
		left: .9rem;
		right: .9rem;
		bottom: 0;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var(--mk-purple-light);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .25s ease;
	}
	.mk-menu > ul > li:first-child > a::before { left: 0; }
	.mk-menu > ul > li:last-child > a::before { right: 0; }
	.mk-menu > ul > li:hover > a,
	.mk-menu > ul > li:focus-within > a { color: #fff; }
	.mk-menu > ul > li:hover > a::before,
	.mk-menu > ul > li:focus-within > a::before { transform: scaleX(.35); }
	.mk-menu > ul > li.active > a { color: #fff; font-weight: 700; }
	.mk-menu > ul > li.active > a::before { transform: scaleX(1); }
	.mk-menu > ul > li.parent:hover > a::after { transform: rotate(180deg); }

	/* выпадающее меню */
	.mk-menu .nav-child {
		display: block;
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		width: 290px;
		max-width: calc(100vw - 2rem);
		padding: .5rem 0;
		border-radius: 0 0 8px 8px;
		background: #fff;
		box-shadow: 0 16px 40px rgba(20, 14, 40, .22);
		font-size: 14px;
		transform: translateY(6px);
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	}
	.mk-menu .nav-child .nav-child {
		top: -.5rem;
		left: 100%;
		border-radius: 8px;
		transform: translateX(6px);
	}
	/* у края экрана — раскрываем влево (класс ставит header.js) */
	.mk-menu .nav-child.mk-flip { left: auto; right: 100%; }
	.mk-menu li:hover > .nav-child,
	.mk-menu li:focus-within > .nav-child {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}
	.mk-menu .nav-child li { display: block; }
	.mk-menu .nav-child a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .5rem;
		padding: .55rem 1.25rem;
		color: var(--mk-dark);
		line-height: 1.3;
		transition: background .15s ease, color .15s ease;
	}
	.mk-menu .nav-child li:hover > a,
	.mk-menu .nav-child li:focus-within > a,
	.mk-menu .nav-child li.active > a { background: #f3effd; color: var(--mk-purple); }
	.mk-menu .nav-child li.active > a { font-weight: 700; }
	.mk-menu .nav-child li.parent > a::after {
		content: '';
		flex: 0 0 8px;
		width: 8px;
		height: 8px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .5;
	}

	/* компактный режим при прокрутке: прячем инфо-строку, уменьшаем логотип */
	.mk-header.is-compact .mk-header__top > .container { min-height: 60px; padding-top: .35rem; padding-bottom: .35rem; }
	.mk-header.is-compact .mk-header__logo img { height: 44px; }
	.mk-header.is-compact .mk-menu > ul > li > a { height: 48px; }
}

/* ---------- мобильная версия ---------- */
@media (max-width: 1199.98px) {
	.mk-header__top > .container { flex-wrap: nowrap; gap: .5rem; }
	.mk-header__actions { gap: .5rem; }

	.mk-header__nav {
		max-height: calc(100vh - var(--mk-header-h));
		max-height: calc(100dvh - var(--mk-header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid rgba(255, 255, 255, .08);
		background: var(--mk-dark);
	}
	.mk-header__nav > .container { padding-top: .5rem; padding-bottom: 1.25rem; }

	.mk-menu > ul { display: block; width: 100%; }
	.mk-menu li { display: flex; flex-wrap: wrap; align-items: center; }
	.mk-menu li > a { flex: 1 1 0; min-width: 0; padding: .8rem 0; font-size: 16px; }
	.mk-menu > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.mk-menu > ul > li.parent > a::after { display: none; }
	.mk-menu li.active > a { color: var(--mk-purple-light); font-weight: 700; }

	.mk-sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		border-radius: 6px;
	}
	.mk-sub-toggle:focus { outline: 2px solid var(--mk-purple-light); outline-offset: -2px; }
	li.is-open > .mk-sub-toggle::before { transform: rotate(180deg); }

	.mk-menu .nav-child { display: none; flex: 0 0 100%; padding: 0 0 .5rem .9rem; border-left: 2px solid var(--mk-purple); margin-bottom: .5rem; }
	.mk-menu li.is-open > .nav-child { display: block; }
	.mk-menu .nav-child a { padding: .55rem 0; font-size: 15px; color: rgba(255, 255, 255, .85); }

	.mk-header__info--mobile {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding-top: 1.25rem;
		font-size: 15px;
		color: rgba(255, 255, 255, .85);
	}
	.mk-header__info--mobile .moduletable { display: flex; align-items: flex-start; gap: .6rem; }
	.mk-header__info--mobile .mod-time,
	.mk-header__info--mobile .mod-phone { display: grid; grid-template-columns: 18px auto; gap: 2px .6rem; }
	.mk-header__info--mobile .mod-time::before,
	.mk-header__info--mobile .mod-phone::before { grid-row: 1 / span 2; align-self: center; }
	.mk-header__info--mobile .mod-soc { padding-left: calc(18px + .6rem); }
}

@media (max-width: 420px) {
	.mk-header .mk-header__logo img { height: 42px; }
	.mk-header__phone { font-size: 14px; }
	.mk-header__phone::before { display: none; }
}
@media (max-width: 359px) {
	.mk-header__cart { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-header *, .mk-header *::before, .mk-header *::after { transition: none !important; }
}