/* ============================================================================
   GI CATMENU — рестайл сквозного меню «Каталог» (сайтвайд, см. inc/catmenu.php)
   Дизайн-док: docs/plans/2026-08-03-catalog-menu-restyle-design.md
   Блоки: .gi-catmenu (десктоп-сайдбар, дерево развёрнуто)
          .gi-bottombar (мобильная нижняя панель)
          .gi-catsheet (мобильная шторка-аккордеон)
   Палитра: navy #0F2F5C · red #E0231C · text #1C2634 · muted #5B6B7F
   ========================================================================== */

:root {
	--gi-navy: #0F2F5C;
	--gi-red: #E0231C;
	--gi-text: #1C2634;
	--gi-muted: #5B6B7F;
	--gi-line: #E3E8EF;
	--gi-bg-soft: #F3F6FB;
	--gi-bg-active: #EDF2FA;
}

/* ────────────────────────────────────────────────────────────────────────────
   ДЕСКТОП: сайдбар
   ──────────────────────────────────────────────────────────────────────────── */

.gi-catmenu {
	background: #fff;
	border: 1px solid var(--gi-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(15, 47, 92, 0.05);
	margin-bottom: 30px;
	font-family: 'Inter', Arial, sans-serif;
}

/* на странице категории шапка тянется до высоты полосы хлебных крошек
   (низ шапки вровень с низом полосы; сама разметка шапки подменяется
   в inc/catmenu-preview.php, стили общие с прототипом) */
.gi-catmenu__head--band {
	height: 70px;
	padding-top: 0;
	padding-bottom: 0;
}

/* сбросы отступов темы на списке — слева всё по одной сетке */
.gi-catmenu ul.gi-cm {
	margin: 0;
	padding: 6px 0 8px;
	list-style: none;
}

.gi-catmenu ul.gi-cm li {
	margin: 0;
	padding: 0;
	border: 0;
}

.gi-catmenu .gi-cm .sub-menu {
	margin: 0 0 6px;
	padding: 2px 0 4px 25px;
}

.gi-catmenu p.widget-title::before {
	content: '';
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>") center / contain no-repeat;
}

.gi-catmenu__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	background: var(--gi-navy);
	color: #fff;
	font-family: 'Manrope', Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.gi-catmenu__head svg { flex: 0 0 auto; }

/* список */
ul.gi-cm {
	list-style: none;
	margin: 0;
	padding: 6px 0 8px;
}

.gi-cm li { margin: 0; padding: 0; list-style: none; }

/* пункт 1-го уровня */
.gi-cm > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px 9px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--gi-text);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

/* красная риска слева при ховере/активном */
.gi-cm > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 60%;
	background: var(--gi-red);
	border-radius: 0 2px 2px 0;
	transform: translateY(-50%) scaleY(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.gi-cm > li > a:hover,
.gi-cm > li > a:focus {
	background: var(--gi-bg-soft);
	color: var(--gi-navy);
	text-decoration: none;
}

.gi-cm > li > a:hover::after,
.gi-cm > li.current-menu-item > a::after,
.gi-cm > li.current-menu-ancestor > a::after { transform: translateY(-50%) scaleY(1); }

.gi-cm > li.current-menu-item > a,
.gi-cm > li.current-menu-ancestor > a {
	background: var(--gi-bg-active);
	color: var(--gi-navy);
	font-weight: 600;
}

/* заголовки-псевдопункты (href="#") — не выглядят кликабельными */
.gi-cm > li > a[href='#'] { cursor: default; }

/* разделители смысловых групп: перед первым брендом, после брендов, перед «по технике» */
.gi-cm > li:not(.gi-mi--brand) + li.gi-mi--brand,
.gi-cm > li.gi-mi--brand + li:not(.gi-mi--brand),
.gi-cm > li.gi-mi--machine {
	border-top: 1px solid #EAEFF5;
	margin-top: 6px;
	padding-top: 6px;
}

/* ── иконки разделов (CSS-mask, цвет = цвет текста ссылки) ─────────────────── */

.gi-mi > a::before {
	content: '';
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: var(--gi-navy);
	transition: background-color 0.2s ease;
	-webkit-mask: var(--gi-icon) center / contain no-repeat;
	mask: var(--gi-icon) center / contain no-repeat;
}

.gi-cm > li.gi-mi > a:hover::before { background-color: var(--gi-red); }

.gi-mi--motor {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><line x1='12' y1='2' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='22'/><line x1='2' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='22' y2='12'/><line x1='4.9' y1='4.9' x2='7' y2='7'/><line x1='17' y1='17' x2='19.1' y2='19.1'/><line x1='19.1' y1='4.9' x2='17' y2='7'/><line x1='7' y1='17' x2='4.9' y2='19.1'/></svg>");
}

.gi-mi--pump {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 3c3.2 4 6 6.9 6 10a6 6 0 0 1-12 0c0-3.1 2.8-6 6-10z'/></svg>");
}

.gi-mi--gst {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.6-6.4'/><polyline points='21 3 21 8 16 8'/></svg>");
}

.gi-mi--brand {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 2l8 4.6v9.2L12 22l-8-4.6V6.6z'/><path d='M12 22V12'/><path d='M20 6.6L12 12 4 6.6'/></svg>");
}

.gi-mi--valve {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='8' rx='1.5'/><line x1='7' y1='12' x2='15' y2='12'/><polyline points='13 9.5 15.5 12 13 14.5'/></svg>");
}

.gi-mi--steering {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='2.5'/><line x1='12' y1='3' x2='12' y2='9.5'/><line x1='4.2' y1='16.5' x2='9.8' y2='13.4'/><line x1='19.8' y1='16.5' x2='14.2' y2='13.4'/></svg>");
}

.gi-mi--unit {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><rect x='3' y='9' width='13' height='9' rx='1.5'/><path d='M16 12h3.5L21 15v3h-5'/><circle cx='7.5' cy='18' r='1.6'/><circle cx='16.5' cy='18' r='1.6'/></svg>");
}

.gi-mi--fuel {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='10' height='18' rx='1.5'/><line x1='4' y1='10' x2='14' y2='10'/><path d='M14 8h2.5L20 11v6a1.7 1.7 0 0 1-3.4 0v-3H14'/></svg>");
}

.gi-mi--machine {
	--gi-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17h14'/><circle cx='6' cy='19.5' r='1.7'/><circle cx='14' cy='19.5' r='1.7'/><path d='M4 17v-5h8l2 5'/><path d='M12 12V9h4l4 4v4h-2'/></svg>");
}

/* ── подкатегории (2-й уровень), всегда развёрнуты на десктопе ─────────────── */

.gi-cm .sub-menu {
	list-style: none;
	margin: 0 0 6px;
	padding: 2px 0 4px 25px;
}

.gi-cm .sub-menu li { position: relative; }

.gi-cm .sub-menu a {
	position: relative;
	display: block;
	padding: 5px 14px 5px 21px;
	font-size: 13px;
	font-weight: 400;
	color: var(--gi-muted);
	text-decoration: none;
	border-left: 1px solid var(--gi-line);
	transition: color 0.18s ease, border-color 0.18s ease;
}

/* точка-маркер */
.gi-cm .sub-menu a::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: #B9C4D4;
	transition: background 0.18s ease, transform 0.18s ease;
}

.gi-cm .sub-menu a:hover,
.gi-cm .sub-menu a:focus {
	color: var(--gi-navy);
	border-left-color: var(--gi-navy);
	text-decoration: none;
}

.gi-cm .sub-menu a:hover::before {
	background: var(--gi-red);
	transform: scale(1.4);
}

.gi-cm .sub-menu .current-menu-item > a {
	color: var(--gi-navy);
	font-weight: 600;
	border-left-color: var(--gi-red);
}

.gi-cm .sub-menu .current-menu-item > a::before { background: var(--gi-red); }

/* сайдбар едет вместе со страницей, где раскладка это позволяет
   (на категориях BS3-float — правило инертно) */
@media (min-width: 1024px) {
	.gi-catmenu {
		position: sticky;
		top: 92px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   МОБИЛКА (<1024): сайдбар прячем, включаем панель + шторку
   ──────────────────────────────────────────────────────────────────────────── */

.gi-bottombar,
.gi-catsheet,
.gi-catsheet-backdrop { display: none; }

@media (max-width: 1023px) {

	.gi-catmenu { display: none; }

	/* панель сайтвайд: контент/футер не перекрываются */
	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
	}

	/* бургер-шторка не заезжает под нижнюю панель */
	.gi-drawer {
		height: calc(100vh - 60px - env(safe-area-inset-bottom, 0px));
		height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px));
	}

	/* КП в бургер-шторке дублирует кнопку нижней панели — прячем */
	.gi-drawer__cta { display: none; }

	/* ── нижняя панель ── */
	.gi-bottombar {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1100;
		height: calc(60px + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #fff;
		border-top: 1px solid var(--gi-line);
		box-shadow: 0 -4px 18px rgba(15, 47, 92, 0.10);
	}

	.gi-bottombar__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		border: 0;
		background: none;
		padding: 0;
		font-family: 'Inter', Arial, sans-serif;
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		color: #33475E;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.2s ease;
	}

	.gi-bottombar__btn:hover,
	.gi-bottombar__btn:focus { color: var(--gi-navy); text-decoration: none; }

	.gi-bottombar__btn--kp { color: var(--gi-red); }
	.gi-bottombar__btn--kp:hover,
	.gi-bottombar__btn--kp:focus { color: #B81813; }

	body.gi-cat-open .gi-bottombar__btn--cat { color: var(--gi-red); }

	/* ── шторка ── */
	.gi-catsheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1200;
		height: 85vh;
		height: 85dvh;
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -12px 40px rgba(9, 20, 38, 0.25);
		transform: translateY(105%);
		transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.33, 1);
		will-change: transform;
	}

	.gi-catsheet[hidden] { display: none; }

	.gi-catsheet.is-open { transform: translateY(0); }

	.gi-catsheet__grip {
		width: 42px;
		height: 4px;
		border-radius: 2px;
		background: #D4DCE6;
		margin: 8px auto 0;
		flex: 0 0 auto;
	}

	.gi-catsheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 8px 10px 18px;
		border-bottom: 1px solid var(--gi-line);
		flex: 0 0 auto;
	}

	.gi-catsheet__title {
		font-family: 'Manrope', Arial, sans-serif;
		font-size: 18px;
		font-weight: 800;
		color: var(--gi-navy);
	}

	.gi-catsheet__close {
		border: 0;
		background: none;
		padding: 10px;
		color: var(--gi-muted);
		cursor: pointer;
	}

	.gi-catsheet__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain; /* докрутка списка не скроллит страницу под шторкой */
		padding: 4px 0 calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.gi-catsheet-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1150;
		background: rgba(9, 20, 38, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.28s ease;
	}

	body.gi-cat-open .gi-catsheet-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* ── список в шторке (аккордеон) ── */
	ul.gi-cs {
		list-style: none;
		margin: 0;
		padding: 0;
		font-family: 'Inter', Arial, sans-serif;
	}

	.gi-cs li { margin: 0; padding: 0; list-style: none; }

	.gi-cs > li { border-bottom: 1px solid #F0F3F8; }

	.gi-cs__row {
		display: flex;
		align-items: stretch;
	}

	.gi-cs > li > .gi-cs__row > a {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 13px 8px 13px 18px;
		font-size: 15px;
		font-weight: 500;
		color: var(--gi-text);
		text-decoration: none;
	}

	/* иконки — те же классы gi-mi, что на десктопе */
	.gi-cs .gi-mi > .gi-cs__row > a::before {
		content: '';
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
		background-color: var(--gi-navy);
		-webkit-mask: var(--gi-icon) center / contain no-repeat;
		mask: var(--gi-icon) center / contain no-repeat;
	}

	.gi-cs__tgl {
		flex: 0 0 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		background: none;
		color: var(--gi-muted);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.gi-cs__tgl svg { transition: transform 0.25s ease; }

	.gi-cs li.is-open > .gi-cs__row .gi-cs__tgl svg { transform: rotate(180deg); }

	.gi-cs .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0 0 0 52px;
		max-height: 0;
		overflow: hidden;
		visibility: hidden; /* свёрнутые ссылки вне таб-порядка */
		transition: max-height 0.25s ease, visibility 0.25s;
	}

	.gi-cs li.is-open > .sub-menu { visibility: visible; }

	.gi-cs li.is-open > .sub-menu { /* высоту ставит JS */ }

	.gi-cs .sub-menu a {
		display: block;
		padding: 11px 18px 11px 0;
		font-size: 14px;
		color: var(--gi-muted);
		text-decoration: none;
		border-bottom: 1px solid #F4F6FA;
	}

	.gi-cs .sub-menu li:last-child a { border-bottom: 0; }

	.gi-cs .sub-menu a:active,
	.gi-cs .sub-menu a:hover { color: var(--gi-navy); }
}

/* при открытой шторке — контент не скроллим */
body.gi-cat-open { overflow: hidden; }

/* пользователь просил «меньше движения» — без анимаций */
@media (prefers-reduced-motion: reduce) {
	.gi-catsheet,
	.gi-catsheet-backdrop,
	.gi-cs__tgl svg,
	.gi-cs .sub-menu,
	.gi-cm > li > a,
	.gi-cm > li > a::after,
	.gi-cm .sub-menu a,
	.gi-cm .sub-menu a::before,
	.gi-mi > a::before,
	.gi-bottombar__btn {
		transition: none !important;
	}
}