/* Шапка. Макет Claude Design «Шапка при скролле» + полоска «9a».

   Поведение: у верха страницы шапка обычная, ниже 90px — сжимается
   (ниже ростом, мельче логотип, полупрозрачный фон с размытием, золотая нить),
   при скролле вниз уезжает вверх, при скролле вверх возвращается.
   Классы is-condensed / is-hidden ставит assets/header.js.

   Прилипание сделано position:sticky, а не фиксированной шапкой поверх
   контента, как в прототипе: макет рассчитан на страницу с полноэкранной
   обложкой под шапкой, а тут под ней сразу зелёная плашка про доставку —
   прозрачная шапка легла бы на неё. Сцепка со скроллом от этого не меняется.

   Шрифт в шапке — основной шрифт сайта (тема грузит Jost): Golos из макета
   оставлен только подвалу, иначе в одном экране жили бы две гарнитуры.

   Родные иконки темы — глифы Font Awesome в кружках с рамкой; они гасятся,
   а на их место кладётся макетная графика фоном. Разметку при этом не трогаем:
   корзину WooCommerce перерисовывает фрагментами. */

.tk-head,
.tk-strip {
	--tk-deep: #1D3A37;
	--tk-accent: #8A6A3B;
	--tk-bg: #FBF9F6;
	--tk-border: #E4DCCF;
	--tk-link: #55504A;
	--tk-cream: #F7F4EF;
	--tk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- каркас ---------- */

/* Прилипание не работает внутри контейнера с overflow:hidden, а тема ставит
   его на #page — гасит горизонтальные выносы каруселей и анимаций.
   overflow:clip режет ровно так же, но не создаёт скролл-контейнер,
   и position:sticky оживает. Браузеры без поддержки clip просто оставят
   тему как есть: шапка не будет липнуть, но ничего не сломается. */
#page.site { overflow: clip; }

header.ts-header.tk-head {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--tk-bg);
	color: var(--tk-deep);
	transition: transform 420ms var(--tk-ease), background 320ms ease, box-shadow 320ms ease;
	will-change: transform;
}

body.admin-bar header.ts-header.tk-head { top: 32px; }

header.ts-header.tk-head.is-hidden { transform: translateY(-100%); }

header.ts-header.tk-head.is-condensed {
	background: rgba(251, 249, 246, 0.78);
	-webkit-backdrop-filter: saturate(1.4) blur(18px);
	backdrop-filter: saturate(1.4) blur(18px);
	box-shadow: 0 1px 0 rgba(29, 58, 55, 0.05), 0 18px 34px -22px rgba(29, 58, 55, 0.35);
}

/* Золотая нить по нижней кромке — только в сжатом состоянии. */
.tk-head .header-container::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(138, 106, 59, 0.55) 18%, rgba(138, 106, 59, 0.55) 82%, transparent);
	opacity: 0;
	transition: opacity 320ms ease;
	pointer-events: none;
}

.tk-head.is-condensed .header-container::after { opacity: 1; }

.tk-head .header-container { position: relative; }

/* ---------- верхняя строка ---------- */

.tk-head .container.tk-head__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	width: auto;
	max-width: none;
	padding: 0 44px;
	height: 88px;
	transition: height 380ms var(--tk-ease);
}

.tk-head.is-condensed .container.tk-head__grid { height: 66px; }

.tk-head__left {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

/* ---------- бургер ---------- */

/* Бургер один на все ширины и полностью свой (см. templates/headers/header-v2.php):
   классы темы ts-mobile-icon-toggle и vertical-menu-button не используются,
   поэтому и перебивать её оформление — кружок с рамкой и глиф из responsive.css —
   больше не нужно. Это обычная кнопка, отсюда сброс её собственных стилей. */
.tk-head .tk-head__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	flex: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.tk-head .tk-head__burger i {
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--tk-deep);
	border-radius: 2px;
	transition: background 200ms ease;
}

/* Все три полоски одной длины. В макете нижняя была короче, но вживую
   это читалось как недорисованный значок, а не как приём. При наведении
   значок целиком уходит в фирменную бронзу — длина не меняется. */
.tk-head .tk-head__burger:hover i,
.tk-head .tk-head__burger:focus-visible i { background: var(--tk-accent); }

.tk-head .tk-head__burger:focus-visible {
	outline: 2px solid var(--tk-accent);
	outline-offset: 4px;
}

/* ---------- инлайн-меню сжатой шапки ---------- */

.tk-head__nav {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 320ms ease, transform 380ms var(--tk-ease), visibility 0s linear 380ms;
}

.tk-head.is-condensed .tk-head__nav {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 320ms ease, transform 380ms var(--tk-ease), visibility 0s;
}

/* Просветы и внутренние поля тут скупые: в одну строку с логотипом и четырьмя
   иконками шесть пунктов встают впритык, а логотип с подписью занял больше,
   чем занимал один знак. */
.tk-head .tk-head__nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-head .tk-head__nav-list > li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.tk-head .tk-head__nav-list > li > a {
	display: block;
	padding: 7px 10px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--tk-link);
	text-decoration: none;
	transition: color 200ms ease, background 200ms ease;
}

.tk-head .tk-head__nav-list > li > a:hover { color: var(--tk-accent); }

.tk-head .tk-head__nav-list > li.current-menu-item > a,
.tk-head .tk-head__nav-list > li.current_page_item > a,
.tk-head .tk-head__nav-list > li.current-menu-ancestor > a {
	padding: 7px 12px;
	background: var(--tk-deep);
	color: var(--tk-cream);
}

/* ---------- логотип ---------- */

/* Логотип собран из двух частей: знака и подписи. Между состояниями шапки
   он не подменяется другой картинкой, а складывается — знак уменьшается
   и уходит влево, подпись переезжает из-под него вбок. Две сменяющиеся
   картинки читались как мигание, особенно когда шапка возвращалась.

   Всё считается от двух чисел: --tk-logo это высота полного лоцкапа,
   --tk-sign — высота знака в сжатой шапке. Остальные множители сняты
   с исходного файла логотипа (1233×1276): знак занимает в нём 1120×946
   с отступом 35 слева, подпись 1233×182 начинается на 1056-й строке.
   Числа без единиц — иначе долями от них не посчитать.

   Считает их `tools/cut-logo.py` — он же режет части. Логотип сменили
   08.09.2026: к знаку добавилась веточка листьев слева, и знак из высокого
   стал широким (1.18 против 0.88). Из-за этого сложенный логотип шире
   прежнего — см. `fitNav` в assets/header.js.

   В сложенном виде подпись крупнее относительно знака, чем в лоцкапе:
   в пропорциях лоцкапа она на такой высоте превращается в шестипиксельную
   полоску — из-за этого раньше и показывали один знак. */
.tk-head .tk-head__logo {
	--tk-logo: 68;
	--tk-sign: 34;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	height: calc(var(--tk-logo) * 1px);
	transition: width 380ms var(--tk-ease), height 380ms var(--tk-ease);
}

.tk-head.is-condensed .tk-head__logo { height: calc(var(--tk-sign) * 1px); }

.tk-head .tk-head__brand {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* Размер меняем шириной и высотой, а не transform: scale() — картинку
   тогда каждый раз рисуют в нужном разрешении, и подпись не мылится. */
.tk-head .tk-head__sign,
.tk-head .tk-head__word {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	max-width: none;
	transition: width 380ms var(--tk-ease), height 380ms var(--tk-ease),
		transform 380ms var(--tk-ease);
}

/* 946/1276 — доля знака в высоте лоцкапа, 35/1276 — его отступ слева. */
.tk-head .tk-head__sign {
	width: auto;
	height: calc(0.7414 * var(--tk-logo) * 1px);
	transform: translateX(calc(0.0274 * var(--tk-logo) * 1px));
}

.tk-head.is-condensed .tk-head__sign {
	height: calc(var(--tk-sign) * 1px);
	transform: none;
}

/* 1233/1276 — ширина подписи в долях высоты лоцкапа, 1056/1276 — её верх. */
.tk-head .tk-head__word {
	width: calc(0.9663 * var(--tk-logo) * 1px);
	height: auto;
	transform: translateY(calc(0.8276 * var(--tk-logo) * 1px));
}

/* Сложенный вид: подпись ростом в треть знака встаёт справа от него.
   1.4739 — ширина знака (1.1839) плюс просвет (0.29); 0.34 — половина
   разницы высот, чтобы подпись села по центру знака. */
.tk-head.is-condensed .tk-head__word {
	width: calc(2.1679 * var(--tk-sign) * 1px);
	transform: translate(calc(1.4739 * var(--tk-sign) * 1px), calc(0.34 * var(--tk-sign) * 1px));
}

/* ---------- иконки справа ---------- */

.tk-head .tk-head__icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
}

.tk-head .tk-head__icons .search-button > a,
.tk-head .tk-head__icons .my-account-wrapper .account-control > a,
.tk-head .tk-head__icons .my-wishlist-wrapper a.tini-wishlist,
.tk-head .tk-head__icons .shopping-cart-wrapper .cart-control {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	transition: opacity 200ms ease;
}

.tk-head .tk-head__icons .search-button > a:hover,
.tk-head .tk-head__icons .my-account-wrapper .account-control > a:hover,
.tk-head .tk-head__icons .my-wishlist-wrapper a.tini-wishlist:hover,
.tk-head .tk-head__icons .shopping-cart-wrapper .cart-control:hover { opacity: 0.62; }

/* Глифы Font Awesome гасим — рисунок приходит фоном. */
.tk-head .tk-head__icons .search-button > a::before,
.tk-head .tk-head__icons .my-account-wrapper .account-control > a::before,
.tk-head .tk-head__icons .my-wishlist-wrapper a.tini-wishlist::before,
.tk-head .tk-head__icons .shopping-cart-wrapper .ic-cart::before { content: none; }

.tk-head .tk-head__icons .search-button > a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%231D3A37' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='9.6' cy='9.6' r='6.4'/%3E%3Cpath d='M14.4 14.4L19 19'/%3E%3C/svg%3E");
}

.tk-head .tk-head__icons .my-account-wrapper .account-control > a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%231D3A37' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='7.2' r='3.9'/%3E%3Cpath d='M3.8 19c0-4 3.2-6.2 7.2-6.2s7.2 2.2 7.2 6.2'/%3E%3C/svg%3E");
}

.tk-head .tk-head__icons .my-wishlist-wrapper a.tini-wishlist {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%231D3A37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 18.4S3 13.6 3 8.6A4.1 4.1 0 0111 6.4a4.1 4.1 0 018 2.2c0 5-8 9.8-8 9.8z'/%3E%3C/svg%3E");
}

.tk-head .tk-head__icons .shopping-cart-wrapper .cart-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%231D3A37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 6.6h12.8l-1.1 11.2H5.7z'/%3E%3Cpath d='M8.2 6.6V4.9a2.8 2.8 0 015.6 0v1.7'/%3E%3C/svg%3E");
}

/* Счётчики: у темы это кружки 14px в углу иконки, у макета — крупнее
   и золотой у корзины. Селекторы длиннее темы, иначе не перебить. */
.tk-head .tk-head__icons .shopping-cart-wrapper .cart-control .cart-number,
.tk-head .tk-head__icons .my-wishlist-wrapper .tini-wishlist .count-number {
	position: absolute;
	top: -6px;
	right: -7px;
	left: auto;
	width: auto;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	overflow: visible;
	/* Скрыт, пока не доказано, что считать есть что. Раньше было наоборот:
	   счётчик приезжал видимым, а гасил его `is-empty` из header.js — то есть
	   уже после того, как страница нарисована. На каждом переходе по меню
	   кружок успевал мигнуть и пропасть. Разметка приходит из кеша страницы
	   и врать может в обе стороны (корзину WooCommerce всё равно
	   перерисовывает фрагментами, избранное — своим запросом), поэтому
	   единственное надёжное состояние до ответа скрипта — «не показывать». */
	display: none;
}

/* Селектор той же длины, что и правило выше: короче — и `display: none`
   из него перевесил бы. */
.tk-head .tk-head__icons .shopping-cart-wrapper .cart-control .cart-number.is-filled,
.tk-head .tk-head__icons .my-wishlist-wrapper .tini-wishlist .count-number.is-filled {
	display: block;
}

.tk-head .tk-head__icons .my-wishlist-wrapper .tini-wishlist .count-number {
	background: var(--tk-deep);
	color: var(--tk-cream);
}

.tk-head .tk-head__icons .shopping-cart-wrapper .cart-control .cart-number {
	background: var(--tk-accent);
	color: #FFFDF9;
}



/* ---------- строка меню ---------- */

.tk-head .tk-head__menu {
	height: 44px;
	overflow: hidden;
	transition: height 380ms var(--tk-ease), opacity 260ms ease;
}

.tk-head.is-condensed .tk-head__menu {
	height: 0;
	opacity: 0;
	visibility: hidden;
}

.tk-head .tk-head__menu nav.main-menu > ul.menu > li > a,
.tk-head .tk-head__menu nav.main-menu > ul > li > a {
	font-size: 13.5px;
	color: var(--tk-link);
}

.tk-head .tk-head__menu nav.main-menu > ul.menu > li > a:hover,
.tk-head .tk-head__menu nav.main-menu > ul > li > a:hover { color: var(--tk-accent); }

/* ---------- полоска 9a ---------- */

.tk-strip {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 998;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 240ms ease, transform 340ms var(--tk-ease);
}

body.admin-bar .tk-strip { top: 32px; }

.tk-strip.is-on {
	opacity: 1;
	transform: none;
}

/* Полоска заодно показывает, сколько страницы пройдено: дорожка едва
   заметна, заполнение растёт вместе со скроллом и добирается до правого
   края ровно в конце страницы. Ширину ставит header.js. */
.tk-strip__line {
	width: 100%;
	height: 4px;
	background: rgba(29, 58, 55, 0.09);
	overflow: hidden;
}

.tk-strip__fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(to right, #8A6A3B 0%, #C09A5E 100%);
	transition: width 120ms linear;
}

/* Тема раскладывает шапку v2 процентами (25% / 50% / 25%) в responsive.css,
   и подключается он ПОСЛЕ наших стилей — поэтому здесь селекторы на класс
   длиннее темы, иначе колонки грида разъезжаются, а бургер растягивается
   на четверть строки. */
@media only screen and (min-width: 768px) {
	.tk-head .header-middle .tk-head__grid .tk-head__left,
	.tk-head .header-middle .tk-head__grid .tk-head__icons { width: auto; }

	/* Ячейке логотипа ширина нужна своя: картинки внутри лежат абсолютом,
	   и с auto колонка схлопнулась бы в ноль. Сложенный логотип шире
	   развёрнутого: 3.285 это знак (0.881) плюс просвет (0.29) плюс
	   подпись (2.114). Колонка грида центральная и `auto`, так что смена
	   ширины просто пересобирает строку. */
	.tk-head .header-middle .tk-head__grid .tk-head__logo {
		width: calc(0.9663 * var(--tk-logo) * 1px);
	}

	.tk-head.is-condensed .header-middle .tk-head__grid .tk-head__logo {
		width: calc(3.6418 * var(--tk-sign) * 1px);
	}

	.tk-head .header-middle .tk-head__grid .tk-head__burger { width: 34px; }
}

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

/* Меню в строке с логотипом убирается, когда перестаёт помещаться. Ширину
   считает assets/header.js (fitNav): она зависит от того, что владелец
   написал в пунктах, и медиавыражением её не угадать. Правило ниже —
   грубый пол на случай, если скрипт не отработал: до 1300px шесть пунктов
   не встают ни при каком раскладе. */
.tk-head.is-cramped .tk-head__nav { display: none; }

@media (max-width: 1299px) {
	.tk-head__nav { display: none; }
}

@media (max-width: 1199px) {
	.tk-head .container.tk-head__grid { padding: 0 24px; }
	.tk-head__left { gap: 18px; }
}

@media (max-width: 991px) {
	.tk-head .container.tk-head__grid { height: 74px; }
	.tk-head.is-condensed .container.tk-head__grid { height: 58px; }
	.tk-head .tk-head__logo { --tk-logo: 54; --tk-sign: 30; }
	.tk-head .header-middle .tk-head__grid .tk-head__logo {
		width: calc(0.9663 * var(--tk-logo) * 1px);
	}
	.tk-head.is-condensed .header-middle .tk-head__grid .tk-head__logo {
		width: calc(3.6418 * var(--tk-sign) * 1px);
	}
	.tk-head .tk-head__icons { gap: 16px; }
}

@media (max-width: 767px) {
	/* Золотая нить опускается под полосу объявлений: полоса остаётся
	   на экране и стоит ровно там, где раньше была нить, — без сдвига
	   нить оказывалась под ней и не читалась вовсе (проверено:
	   в точке 195×1 ловился уже не индикатор, а полоса). */
	.tk-strip { top: var(--tk-ann-h, 0px); }
	body.admin-bar .tk-strip { top: calc(32px + var(--tk-ann-h, 0px)); }

	/* Шапка уезжает не целиком: полосу объявлений оставляем на экране.
	   Обещание бесплатной доставки читают именно на телефоне и именно
	   в момент выбора, а до правки оно исчезало на первой же прокрутке
	   вместе со всей шапкой.

	   Высоту полосы меряет assets/header.js и кладёт в `--tk-ann-h`
	   на документе: числом её не задать — на узком экране фраза
	   переносится на две строки, а крестиком полосу и вовсе удаляют,
	   и тогда величина обнуляется, а шапка уезжает целиком, как раньше. */
	header.ts-header.tk-head.is-hidden {
		transform: translateY(calc(-100% + var(--tk-ann-h, 0px)));
	}

	.tk-head .container.tk-head__grid {
		padding: 0 16px;
		height: 64px;
		gap: 12px;
	}

	.tk-head.is-condensed .container.tk-head__grid { height: 54px; }

	.tk-head .tk-head__logo { --tk-logo: 44; --tk-sign: 26; }
	.tk-head .header-middle .tk-head__grid .tk-head__logo {
		width: calc(0.9663 * var(--tk-logo) * 1px);
	}
	.tk-head.is-condensed .header-middle .tk-head__grid .tk-head__logo {
		width: calc(3.6418 * var(--tk-sign) * 1px);
	}

	/* Строку меню на телефоне тема и так не печатает (hidden-phone),
	   но подстрахуемся: высота 0, чтобы шапка не подпрыгивала. */
	.tk-head .tk-head__menu { height: 0; }
}

@media (prefers-reduced-motion: reduce) {
	header.ts-header.tk-head,
	.tk-head .container.tk-head__grid,
	.tk-head .tk-head__logo img,
	.tk-head .tk-head__menu,
	.tk-head__nav,
	.tk-strip { transition: none; }
}