/* ============================================
   Side Menu — мобільне меню (бургер) і дерево категорій.
   Макет: «Меню 375» 471:40551 (панель 375×1677, поля 24).
   Дерево категорій тут — БАЗА компонента: ту саму розмітку
   використовує мобільна відкривашка «Категорії» в каталог-лайтбоксі
   (контекстні правила — components/03-menu.css).
   ============================================ */

/* Menu Header Lightbox - Start */
/* z-index: wrapper 99999 > background 10 — background використовується як overlay для click-outside */
.menu-header-wrapper {
	display: flex;
	flex-direction: column;
	padding: 24px;
	height: 100dvh;
	overflow-y: auto;
	background: var(--bg-page);
	position: fixed;
	top: 0;
	left: -120vw;
	width: 375px;
	max-width: 100%;
	z-index: 99999;
	box-shadow: 0 0 20px rgb(0 0 0 / 15%);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
.menu-header-wrapper.active {
	left: 0vw;
	pointer-events: all;
	opacity: 1;
	visibility: visible;
}
/* Клік-зовні: було width:100% — тобто рівно ширині панелі, і повністю перекривалося
   самою панеллю: на планшеті (панель 375, екран ширший) закриття кліком зовні не працювало. */
.menu-header-background {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	width: 100vw;
	height: 100dvh;
	z-index: 10;
}
.menu-header {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	position: relative;
	top: 0px;
	z-index: 30;
	box-sizing: border-box;
	padding-bottom: 30px;
}
/* Хрестик у макеті стоїть у самому кутку панелі (10/10), вище за поле контенту 24 —
   тому виноситься з потоку, інакше зсуває заголовок «Категорії». */
.menu-block-top {
	position: absolute;
	top: -10px;
	right: -10px;
	display: flex;
	z-index: 40;
}
.side-menu-close {
	display: flex;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.side-menu-close img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}
.menu-block-middle {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.menu-block-bottom {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}
/* Menu Header Lightbox - End */

/* Заголовки блоків - Start */
.side-menu-title {
	font-family: var(--font-family-1);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--black);
	margin-bottom: 16px;
}
.side-menu-title.side-menu-title-muted {
	font-size: 16px;
	line-height: 20px;
	color: rgb(0 0 0 / 48%);
	margin-bottom: 8px;
}
/* Заголовки блоків - End */

/* Меню-списки (Навігація / Клієнтам) - Start */
/* Ритм пункту задає padding базового .menu-item (8px 0) — свій gap не додаємо,
   інакше він складеться з базовим (instructions/layout/css-structure.md). */
.side-menu .side-menu-list {
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 20px;
	color: var(--black);
}
.side-menu .side-menu-list > .menu-item > a {
	color: var(--black);
	transition: color 0.3s ease;
}
.side-menu .side-menu-list > .menu-item > a:hover,
.side-menu .side-menu-list > .menu-item.current-menu-item > a {
	color: var(--primary);
}
/* Меню-списки (Навігація / Клієнтам) - End */

/* Контакти і соцмережі - Start */
.side-menu-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.side-menu-label {
	font-family: var(--font-family-1);
	font-size: 14px;
	line-height: 20px;
	color: rgb(0 0 0 / 48%);
}
.side-menu-phone {
	font-family: var(--font-family-1);
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: var(--black);
	transition: color 0.3s ease;
}
.side-menu-phone:hover {
	color: var(--primary);
}
.side-menu-socials-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.side-menu-socials-row .icon-element {
	transition: opacity 0.3s ease;
}
.side-menu-socials-row .icon-element:hover {
	opacity: 0.7;
}
.side-menu-socials-row .icon-mask {
	--icon-base: 20px;
}
/* Контакти і соцмережі - End */

/* Каталог аккордеон - Start */
/* Базовий компонент дерева категорій. Використовується двічі:
   у бургер-меню (тут) і в мобільній відкривашці «Категорії» (03-menu.css). */
.sidebar-catalog {
	display: flex;
	flex-direction: column;
}
.catalog-content {
	display: none;
	border-top: 1px solid rgb(0 0 0 / 10%);
}
.sidebar-catalog.active .catalog-content {
	display: block;
}
.catalog-category {
	border-bottom: 1px solid rgb(0 0 0 / 10%);
}
.category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 0;
	transition: color 0.3s ease;
}
.catalog-category.has-children .category-header {
	cursor: pointer;
}
.category-link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	text-decoration: none;
	color: var(--black);
}
.catalog-category .category-name {
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 20px;
	color: var(--black);
	transition: color 0.3s ease;
}
.catalog-category.has-children:hover .category-name,
.catalog-category:not(.has-children) .category-header:hover .category-name {
	color: var(--primary);
}
.catalog-category .category-expand {
	width: 16px;
	height: 8px;
	flex-shrink: 0;
	object-fit: contain;
	transition: transform 0.3s ease;
}
.catalog-category.expanded .category-expand {
	transform: rotate(180deg);
}

/* Підкатегорії - Start */
.subcategories {
	display: none;
	flex-direction: column;
	gap: 10px;
	padding: 0 0 16px 20px;
}
.catalog-category.expanded .subcategories {
	display: flex;
}
.subcategory-level-2 {
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	text-decoration: none;
	color: var(--black);
	transition: color 0.3s ease;
}
.subcategory-level-2:hover {
	color: var(--primary);
}
/* Дубль батьківської категорії: у макеті рядка немає, тому робимо його тихим —
   він службовий, а не частиною списку підкатегорій. */
.subcategory-level-2.show-all,
.subcategory-level-3.show-all-level-3 {
	color: rgb(0 0 0 / 48%);
	font-size: 14px;
	line-height: 20px;
}
.subcategory-level-2.show-all:hover,
.subcategory-level-3.show-all-level-3:hover {
	color: var(--primary);
}

/* Третій рівень (у поточному каталозі не зустрічається, розмітка залишена на виріст) */
.subcategory-level-2-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.subcategory-level-2-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	cursor: pointer;
}
.subcategory-level-2-wrapper.has-children .subcategory-level-2 {
	flex: 1;
}
.subcategory-expand {
	width: 14px;
	height: 7px;
	flex-shrink: 0;
	object-fit: contain;
	transition: transform 0.3s ease;
}
.subcategory-level-2-wrapper.expanded .subcategory-expand {
	transform: rotate(180deg);
}
.subcategories-level-3 {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 4px 0 4px 20px;
}
.subcategory-level-2-wrapper.expanded .subcategories-level-3 {
	display: flex;
}
.subcategory-level-3 {
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: rgb(0 0 0 / 48%);
	text-decoration: none;
	transition: color 0.3s ease;
}
.subcategory-level-3:hover {
	color: var(--black);
}
/* Підкатегорії - End */
/* Каталог аккордеон - End */