/* Нижняя панель на телефоне (15.10.2026): Главная · Каталог · Корзина · Консультация · Меню. Оформление — своё (вариант «Б»,
   выбор владельца 15.10.2026: «панель один в один как на хаер онлайн… нужно своего плана»): свои значки, подписи обычными
   буквами, активный пункт — значок в голубой капсуле фирменного градиента, подпись тёмно-синяя.
   Разметка — include/nk_tabbar.php (общая для главной и внутренних страниц), поведение — js/nk-tabbar.js.
   Подключается обоими шаблонами после их стилей. Панель — только на телефоне в книжной ориентации (≤767 px): на планшете
   и компьютере её нет, в альбомной ориентации тоже — там высота экрана 360–390 px, а шапка и панель заняли бы треть.
   Слой 960: выше содержимого страницы, ниже окон (≥1000), шторки фильтра (1050), мобильного меню (1200),
   подсказок «?» у характеристик (980) и выпадающих списков (990) — всё это открывается поверх панели. */
.nk-tabbar { display: none; }

@media (max-width: 767px) and (orientation: portrait) {
	:root {
		--nk-tabbar-h: 64px;
		/* запас под полоску «домой» iPhone: ненулевой только при viewport-fit=cover (сейчас в шаблонах его нет — iOS сам держит
		   закреплённое у низа над своей панелью); оставлен, чтобы не забыть, если viewport-fit=cover когда-нибудь включат */
		--nk-tabbar-safe: env(safe-area-inset-bottom, 0px);
		--nk-tabbar-total: calc(var(--nk-tabbar-h) + var(--nk-tabbar-safe));
	}

	.nk-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 960;
		display: grid;
		/* колонки по длине подписей: «Консультация» — шире, «Меню» — уже, чтобы подписи не обрезались и при увеличенном
		   шрифте телефона (настройка «Размер шрифта» до 115 % на Android) на экранах 320–360 px */
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr) minmax(0, .85fr);
		height: var(--nk-tabbar-total);
		padding: 0 4px var(--nk-tabbar-safe);
		box-sizing: border-box;
		border-top: 1px solid #e6eaf0;
		background: #fff;
		box-shadow: 0 -4px 16px rgba(30, 45, 80, .06);
		font-family: 'Geologica', 'Geologica Fallback', Arial, sans-serif;
	}
	.nk-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		height: var(--nk-tabbar-h);
		margin: 0;
		padding: 0 2px;
		border: 0;
		border-radius: 0;
		background: none;
		color: #2d2d2d;
		font: inherit;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		-webkit-appearance: none;
		appearance: none;
	}
	.nk-tabbar__item:hover,
	.nk-tabbar__item:focus { color: #2d2d2d; text-decoration: none; }
	/* значок в капсуле 40×32: у активного пункта капсула залита фирменным градиентом, значок белый */
	.nk-tabbar__ic {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 32px;
		border-radius: 16px;
		color: #6b7685;
		transition: transform .15s, background-color .2s, box-shadow .2s;
	}
	.nk-tabbar__i { display: block; width: 24px; height: 24px; }
	.nk-tabbar__t {
		display: block;
		max-width: 100%;
		overflow: hidden;
		color: #5f6b7a;
		font-size: 11px;
		font-weight: 500;
		line-height: 1.15;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.nk-tabbar__item.is-active .nk-tabbar__ic,
	.nk-tabbar__item[aria-expanded="true"] .nk-tabbar__ic {
		background: linear-gradient(135deg, #4bbaf9 0%, #5cc4fa 50%, #9ee9ff 100%);
		box-shadow: 0 4px 10px rgba(75, 186, 249, .35);
		color: #fff;
	}
	.nk-tabbar__item.is-active .nk-tabbar__t,
	.nk-tabbar__item[aria-expanded="true"] .nk-tabbar__t { color: #36529d; font-weight: 700; }
	.nk-tabbar__item:active .nk-tabbar__ic { transform: scale(.92); }
	.nk-tabbar__item:focus { outline: none; }
	.nk-tabbar__item:focus-visible { outline: 2px solid #1479bb; outline-offset: -4px; border-radius: 12px; }

	/* счётчик корзины — как бейдж в шапке (nk-base.css, .nk-ico .count) */
	.nk-tabbar__count {
		position: absolute;
		top: -4px;
		left: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		border-radius: 9px;
		background: #4bbaf9;
		box-shadow: 0 0 0 2px #fff;
		color: #fff;
		font-size: 11px;
		font-style: normal;
		font-weight: 700;
		line-height: 1;
	}
	.nk-tabbar__count[hidden] { display: none; }

	/* место под панелью: конец страницы (подвал) прокручивается выше неё; поле формы или кнопка, к которым браузер
	   прокручивает при переходе фокуса (Tab, «Далее», экранный диктор), не уходят под панель (сверху такой же отступ —
	   под липкую шапку, scroll-padding-top в nk-base.css) */
	body { padding-bottom: var(--nk-tabbar-total); }
	html { scroll-padding-bottom: calc(var(--nk-tabbar-total) + 12px); }

	/* что закреплено у низа экрана — над панелью */
	html .nk-cookie { bottom: calc(var(--nk-tabbar-total) + 10px); }
	body.nk-inner .scroll-to-top,
	.nk-totop { right: 16px; bottom: calc(var(--nk-tabbar-total) + 14px); }
	html[data-nk-cookie-open] body.nk-inner .scroll-to-top,
	html[data-nk-cookie-open] .nk-totop { bottom: calc(var(--nk-cookie-h, 96px) + var(--nk-tabbar-total) + 24px); }
}

/* очень узкие экраны (320–359 px): «Консультация» не должна обрезаться */
@media (max-width: 359px) {
	.nk-tabbar { padding-left: 0; padding-right: 0; }
	.nk-tabbar__t { font-size: 10px; }
	.nk-tabbar__ic { width: 36px; }
	.nk-tabbar__count { left: 22px; }
}

@media print { .nk-tabbar { display: none !important; } }

/* Колонка контактов над «Консультацией» (15.10.2026): звонок · MAX · Telegram · ВКонтакте — оформление как у плавающей
   панели каталога «Позвонить / Написать» (nk-catalog.css, .catalog-section-fix), кружки крупнее — под палец.
   Место по горизонтали (над кнопкой) ставит js/nk-tabbar.js; панель скрыта на компьютере — колонка вместе с ней. */
@media (max-width: 767px) and (orientation: portrait) {
	.nk-tabbar-contacts {
		position: fixed;
		bottom: calc(var(--nk-tabbar-total) + 10px);
		left: 0;
		z-index: 961;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 68px;
		padding: 12px 0;
		box-sizing: border-box;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 10px 30px rgba(20, 38, 100, .18), 0 0 0 1px rgba(20, 38, 100, .04);
		opacity: 0;
		transform: translateY(8px) scale(.96);
		transform-origin: 50% 100%;
		transition: opacity .16s ease, transform .16s ease;
	}
	.nk-tabbar-contacts[hidden] { display: none; }
	.nk-tabbar-contacts.is-open { opacity: 1; transform: none; }
	.nk-tabbar-contacts__a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #f5f6f9;
		-webkit-tap-highlight-color: transparent;
		transition: background .2s, transform .15s;
	}
	.nk-tabbar-contacts__a:active { transform: scale(.94); background: #e3f1fc; }
	.nk-tabbar-contacts__a:focus { outline: none; }
	.nk-tabbar-contacts__a:focus-visible { outline: 2px solid #1479bb; outline-offset: 2px; }
	.nk-tabbar-contacts__a svg { display: block; width: 30px; height: 30px; }
	/* значки в синей палитре сайта: подложки — синие, белые глифы остаются белыми (как в панели каталога) */
	.nk-tabbar-contacts__a svg :is(path, circle):not([fill="white"]):not([fill="#FEFEFE"]):not([fill="#fff"]) { fill: #4bbaf9; }
	.nk-tabbar-contacts__sep { display: block; width: 28px; height: 1px; margin: -2px 0; background: #e6ecf3; }
	/* пока колонка открыта, «Консультация» подсвечена, как активный пункт (капсула — выше, вместе с .is-active) */
}