/* Бургер-меню. Макет Claude Design «Кнопка наверх и бургер-меню · 10g»
   (меню-витрина).

   Разметку печатает mydecor-child/inc/mobile-menu.php внутрь родного
   контейнера #group-icon-header, открытие и закрытие остаётся за main.js темы.

   Селекторы почти всюду начинаются с #group-icon-header.tk-menu, а не с
   #group-icon-header: css/responsive.css темы подключается ПОСЛЕ стилей
   child-темы, и её правила при равном весе побеждают. Лишний класс
   в селекторе перевешивает их без !important.

   Шрифт — Golos Text, как в подвале: шторка занимает весь экран и живёт
   отдельно от шапки, поэтому гарнитура макета здесь не спорит с Jost темы. */

#group-icon-header.tk-menu {
	--tk-deep: #1D3A37;
	--tk-accent: #8A6A3B;
	--tk-bg: #FBF9F6;
	--tk-panel: #FFFDF9;
	--tk-border: #E4DCCF;
	--tk-muted: #7C756C;
	--tk-label: #A9A093;
	--tk-cream: #F7F4EF;
	--tk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- каркас шторки ---------- */

/* Витрина открывается на всех ширинах, а reset.css темы прячет её выше 768px:
   раньше там жила другая панель (#vertical-menu-sidebar), и мобильную шторку
   тема считала ненужной. Теперь бургер один на все экраны. */
#group-icon-header.tk-menu {
	display: flex;
	flex-direction: column;
}

/* Тема блокирует прокрутку страницы только ниже 768px — там, где шторка
   была раньше. Класс на body ставит assets/menu.js. */
body.menu-mobile-active { overflow: hidden; }

/* У темы 340px. Плиток в ряду две, и на такой ширине они сжимаются
   до неразличимых марок — берём всю ширину телефона.

   left/right задаём явно: выше 768px style.css темы прижимает панель вправо
   (right:0), и наш translateX(-100%) выехал бы не за край, а на середину
   экрана — закрытая шторка была бы видна. */
#group-icon-header.tk-menu .ts-sidebar-content {
	width: min(100%, 420px);
	max-width: 100%;
	left: 0;
	right: auto;
	transform: translateX(-100%);
	padding: 0;
	/* Прокручивается внутренняя часть, иначе нижняя панель уезжает
	   вместе с содержимым. */
	overflow: hidden;
	background: var(--tk-bg);
}

#group-icon-header.tk-menu.active .ts-sidebar-content { transform: translateX(0); }

#group-icon-header.tk-menu .tk-menu__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--tk-deep);
}

#group-icon-header.tk-menu .tk-menu__panel *,
#group-icon-header.tk-menu .tk-menu__panel *::before,
#group-icon-header.tk-menu .tk-menu__panel *::after { box-sizing: border-box; }

#group-icon-header.tk-menu .tk-menu__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 18px;
}

/* В теме этого класса нет, а подписи к полю поиска он нужен. */
#group-icon-header.tk-menu .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- шапка шторки ---------- */

#group-icon-header.tk-menu .tk-menu__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px 14px;
}

/* mydecor_theme_logo() печатает сразу три картинки — обычную, мобильную
   и для липкой шапки; какая из них видна, тема решает своим CSS в шапке.
   Общее правило по img выстроило бы в шторке все три столбиком. */
#group-icon-header.tk-menu .tk-menu__logo .mobile-logo,
#group-icon-header.tk-menu .tk-menu__logo .sticky-logo { display: none; }

#group-icon-header.tk-menu .tk-menu__logo .normal-logo {
	display: block;
	position: static;
	height: 40px;
	width: auto;
	max-width: none;
	opacity: 1;
}

/* Тема кладёт .close абсолютом в правый верхний угол и рисует крестик
   глифом themify. Здесь он — обычный элемент строки со своим SVG. */
#group-icon-header.tk-menu .ts-sidebar-content .close {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	line-height: 1;
	border: 1px solid var(--tk-border);
	border-radius: 50%;
	background: var(--tk-panel);
	color: var(--tk-deep);
	cursor: pointer;
	transition: border-color 240ms ease, color 240ms ease;
}

#group-icon-header.tk-menu .ts-sidebar-content .close::after { content: none; }

#group-icon-header.tk-menu .ts-sidebar-content .close:hover,
#group-icon-header.tk-menu .ts-sidebar-content .close:focus-visible {
	border-color: var(--tk-accent);
	color: var(--tk-accent);
}

/* ---------- поиск ---------- */

#group-icon-header.tk-menu .tk-menu__search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 20px 18px;
	padding: 11px 16px;
	border: 1px solid var(--tk-border);
	border-radius: 100px;
	background: var(--tk-panel);
	color: var(--tk-label);
	transition: border-color 240ms ease;
}

#group-icon-header.tk-menu .tk-menu__search:focus-within { border-color: var(--tk-accent); }

#group-icon-header.tk-menu .tk-menu__search svg { flex: none; }

#group-icon-header.tk-menu .tk-menu__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--tk-deep);
	-webkit-appearance: none;
	appearance: none;
}

#group-icon-header.tk-menu .tk-menu__search input[type="search"]:focus { outline: none; }

#group-icon-header.tk-menu .tk-menu__search input::placeholder {
	color: var(--tk-label);
	opacity: 1;
}

/* ---------- секции ---------- */

#group-icon-header.tk-menu .tk-menu__section { padding: 0 20px; }

#group-icon-header.tk-menu .tk-menu__section + .tk-menu__section { margin-top: 20px; }

#group-icon-header.tk-menu .tk-menu__label {
	margin-bottom: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tk-label);
}

/* ---------- плитки категорий ---------- */

#group-icon-header.tk-menu .tk-menu__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

#group-icon-header.tk-menu .tk-menu__tile {
	position: relative;
	display: block;
	height: 132px;
	overflow: hidden;
	text-decoration: none;
	/* Заливка видна, только если у категории нет ни своей картинки,
	   ни товара с фотографией. Оттенки чередуются, чтобы ряд пустых
	   плиток не выглядел браком вёрстки. */
	background: linear-gradient(150deg, #2E4A50, #4B6167);
}

#group-icon-header.tk-menu .tk-menu__tile:nth-child(2n) { background: linear-gradient(150deg, #B79C86, #8F7660); }
#group-icon-header.tk-menu .tk-menu__tile:nth-child(4n) { background: linear-gradient(150deg, #4A4F52, #6B7174); }
#group-icon-header.tk-menu .tk-menu__tile:nth-child(4n + 3) { background: linear-gradient(150deg, #9E8A72, #7A6952); }

#group-icon-header.tk-menu .tk-menu__tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms var(--tk-ease);
}

#group-icon-header.tk-menu .tk-menu__tile:hover .tk-menu__tile-img,
#group-icon-header.tk-menu .tk-menu__tile:focus-visible .tk-menu__tile-img { transform: scale(1.04); }

/* Подпись кремовая, а фотографии светлые — без затемнения снизу
   название теряется на ткани. */
#group-icon-header.tk-menu .tk-menu__tile-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(29, 58, 55, 0.72), rgba(29, 58, 55, 0.12) 58%, rgba(29, 58, 55, 0.04));
}

#group-icon-header.tk-menu .tk-menu__tile-title {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--tk-panel);
}

#group-icon-header.tk-menu .tk-menu__tile:focus-visible {
	outline: 2px solid var(--tk-accent);
	outline-offset: 2px;
}

/* ---------- разделы сайта ---------- */

#group-icon-header.tk-menu .tk-menu__sections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 18px;
}

#group-icon-header.tk-menu .tk-menu__sections a {
	padding: 7px 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tk-deep);
	text-decoration: none;
	transition: color 200ms ease;
}

#group-icon-header.tk-menu .tk-menu__sections a:hover,
#group-icon-header.tk-menu .tk-menu__sections a:focus-visible { color: var(--tk-accent); }

/* ---------- сервисные ссылки ---------- */

#group-icon-header.tk-menu .tk-menu__service {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px 0;
}

/* Без точек ссылки разделять нечем — расстояние между ними давали только
   отступы точки. Поэтому в этом случае список становится честно
   вертикальным: по ссылке на строку, и «Доставка и оплата Возврат и обмен»
   уже не читается одной фразой. */
#group-icon-header.tk-menu .tk-menu__service:not(.has-dots) a { flex: 0 0 100%; }

#group-icon-header.tk-menu .tk-menu__service a {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--tk-muted);
	text-decoration: none;
	transition: color 200ms ease;
}

#group-icon-header.tk-menu .tk-menu__service a:hover,
#group-icon-header.tk-menu .tk-menu__service a:focus-visible { color: var(--tk-accent); }

/* Точка-разделитель — часть ссылки, а не отдельный элемент: так она
   переносится вместе с ней и не начинает новую строку.

   Ставится, только когда все ссылки стоят одной строкой: класс has-dots
   вешает assets/menu.js. На переносе точка повисает в конце строки
   и читается как опечатка — то же правило работает в подвале. */
#group-icon-header.tk-menu .tk-menu__service.has-dots a::after {
	content: "";
	width: 3px;
	height: 3px;
	margin: 0 11px;
	border-radius: 50%;
	background: #C9BFAE;
}

#group-icon-header.tk-menu .tk-menu__service.has-dots a:last-child::after { content: none; }

/* ---------- нижняя панель ---------- */

#group-icon-header.tk-menu .tk-menu__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-top: 1px solid var(--tk-border);
	background: var(--tk-panel);
	/* Чтобы панель не пряталась под системной полосой iOS. */
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

#group-icon-header.tk-menu .tk-menu__account {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--tk-deep);
	text-decoration: none;
	transition: color 200ms ease;
}

#group-icon-header.tk-menu .tk-menu__account:hover,
#group-icon-header.tk-menu .tk-menu__account:focus-visible { color: var(--tk-accent); }

#group-icon-header.tk-menu .tk-menu__cart {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border: 1px solid var(--tk-deep);
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tk-deep);
	background: var(--tk-panel);
	text-decoration: none;
	white-space: nowrap;
	transition: background 240ms ease, color 240ms ease;
}

#group-icon-header.tk-menu .tk-menu__cart:hover,
#group-icon-header.tk-menu .tk-menu__cart:focus-visible {
	background: var(--tk-deep);
	color: var(--tk-cream);
}

#group-icon-header.tk-menu .tk-menu__count {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	background: var(--tk-deep);
	color: var(--tk-cream);
	transition: background 240ms ease, color 240ms ease;
}

#group-icon-header.tk-menu .tk-menu__cart:hover .tk-menu__count,
#group-icon-header.tk-menu .tk-menu__cart:focus-visible .tk-menu__count {
	background: var(--tk-cream);
	color: var(--tk-deep);
}

/* Пустой ноль в кружке — шум; класс ставит и снимает assets/menu.js. */
#group-icon-header.tk-menu .tk-menu__count.is-empty { display: none; }

/* ---------- появление ---------- */

/* Анимации объявлены только под .active: разметка лежит в документе с самой
   загрузки, и без этого условия всё отыграло бы один раз при открытии
   страницы — задолго до того, как шторку откроют. Класс тема снимает при
   закрытии, поэтому на каждое открытие анимация проигрывается заново. */
@keyframes tk-menu-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

#group-icon-header.tk-menu.active .tk-menu__logo,
#group-icon-header.tk-menu.active .tk-menu__search,
#group-icon-header.tk-menu.active .tk-menu__tile,
#group-icon-header.tk-menu.active .tk-menu__section:not(.tk-menu__section--tiles),
#group-icon-header.tk-menu.active .tk-menu__bar {
	animation: tk-menu-rise 520ms var(--tk-ease) both;
}

#group-icon-header.tk-menu.active .tk-menu__search { animation-delay: 60ms; }

/* Плитки выезжают по очереди: индекс приходит из PHP инлайновым --tk-i. */
#group-icon-header.tk-menu.active .tk-menu__tile {
	animation-delay: calc(120ms + var(--tk-i, 0) * 60ms);
}

#group-icon-header.tk-menu.active .tk-menu__section:not(.tk-menu__section--tiles) { animation-delay: 340ms; }
#group-icon-header.tk-menu.active .tk-menu__bar { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
	#group-icon-header.tk-menu .ts-sidebar-content,
	#group-icon-header.tk-menu .tk-menu__tile-img,
	#group-icon-header.tk-menu.active .tk-menu__logo,
	#group-icon-header.tk-menu.active .tk-menu__search,
	#group-icon-header.tk-menu.active .tk-menu__tile,
	#group-icon-header.tk-menu.active .tk-menu__section:not(.tk-menu__section--tiles),
	#group-icon-header.tk-menu.active .tk-menu__bar {
		animation: none;
		transition: none;
	}
}

/* ---------- узкие экраны ---------- */

/* Шторку тема показывает только ниже 768px, но у самых узких телефонов
   (320–360px) две колонки ссылок «Разделы» встают в две строки каждая. */
@media (max-width: 359px) {
	#group-icon-header.tk-menu .tk-menu__sections { grid-template-columns: 1fr; }
	#group-icon-header.tk-menu .tk-menu__tile { height: 118px; }
}