/* ============================================================
   Kranky — технический дизайн (стиль teenage engineering)
   Токены заменим, когда дизайнер отдаст макеты.
   ============================================================ */

:root {
	--bg: #ffffff;
	--bg-soft: #f5f5f7; /* цвет плиток и hero = запечённый фон рендеров Apple: фото сливаются с плиткой (тот же приём у TE) */
	/* Фирменный чёрный из палитры дизайнера (Цвета Крэнки.pdf): #313131 */
	--ink: #313131;
	--ink-soft: #6e6e6e;
	--line: #e4e4e4;
	/* Решение пользователя (6 авг): всё чёрно-белое, акценты расставим позже.
	   Когда появится акцентный цвет — меняем только этот токен. */
	--accent: #313131;
	--ink-hover: #4a4a4a;
	/* Один шрифт на весь сайт — Source Code Pro (вариативный). Токены оставлены
	   раздельными на случай, если дизайнер позже разведёт текст и акценты. */
	--font-sans: "Source Code Pro", ui-monospace, Consolas, monospace;
	--font-mono: "Source Code Pro", ui-monospace, Consolas, monospace;
	--container: 1200px;
	/* Отступы КОНТЕКСТНЫЕ, сняты с TE по замерам (1265px viewport):
	   хедер ~52px, витрина ~59px, карточка справа ~106px, секции плиток ~20px */
	--pad-header: clamp(20px, 4.2vw, 80px);
	--pad-store: clamp(20px, 4.7vw, 90px);
	--pad-tight: 20px;
	--pad: var(--pad-store); /* обратная совместимость */
	--tile-gap: 13px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-soft); }

/* ЕДИНАЯ разметка всего сайта (как у TE): вся ширина экрана, один отступ --pad */
.container {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--pad);
}

.page-narrow { max-width: 760px; }

/* ---------- Шапка ----------
   Массивный хедер: название слева, меню+поиск в центре, корзина и маскот справа.
   Цветовые режимы (docs/DESIGN.md): theme-mono / theme-color / theme-base
   задаются классом на body и меняют только токены хедера. */

:root {
	--header-bg: var(--bg);
	--header-ink: var(--ink);
	--header-ink-soft: var(--ink-soft);
	--header-line: var(--line);
}

/* Карточка товара — монохром (по умолчанию совпадает с базой). */
.theme-mono {
	--header-bg: #ffffff;
	--header-ink: #313131;
	--header-ink-soft: #6e6e6e;
	--header-line: #e4e4e4;
}

/* Идеологические страницы — инвертированный хедер (пока ч/б; цвет — позже). */
.theme-color {
	--header-bg: #313131;
	--header-ink: #ffffff;
	--header-ink-soft: rgba(255, 255, 255, 0.72);
	--header-line: rgba(255, 255, 255, 0.28);
}

/* Разделительные полосы на сайте не нужны (решение 6 авг) — чистый белый как у TE.
   Хедер статичный (не sticky): товар должен помещаться на экран целиком;
   стики-элемент один — корзина в правом нижнем углу. */
/* Без transition: между загрузками страниц он всё равно не работает,
   а вот дёрганья добавляет */
.site-header {
	/* Стики-хедер (13 авг): только логотип, буквы шагают при скролле */
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--header-bg);
	color: var(--header-ink);
}

/* Свой отступ хедера (у TE он чуть уже витринного) */
/* Вертикальные отступы здесь: специфичность выше, чем у .header-inner.
   Хедер компактный — в нём только логотип, и он стики */
.site-header .container { padding: 18px var(--pad-header) 14px; }


.site-header a { color: var(--header-ink); }

/* Массивный хедер (пересборка 10 авг): логотип слева | МАСКОТ в центре |
   блоки навигации по обе стороны. Зоны flex 1-auto-1 — маскот в геометрическом центре. */
/* Хедер (пересборка 11 авг): анимированный логотип слева, блоки меню справа,
   маскота в хедере нет (уйдёт в тело сайта). */
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(28px, 4vw, 72px);
}

/* Анимированный логотип: К р э статичны, «н» и «ки» прыгают (фирстиль) */
.site-logo { line-height: 0; }

.logo-anim {
	display: block;
	height: 74px;
	width: auto;
	overflow: visible;
}

/* Буквы двигает JS от позиции скролла (main.js, kranky scroll-logo).
   Таймерная анимация отключена — движение только при прокрутке. */
.klogo-n, .klogo-ki { will-change: transform; }

@keyframes kr-logo-n {
	0%    { transform: translateY(0); }
	5%    { transform: translateY(3.426px); }
	10%   { transform: translateY(13.369px); }
	15%   { transform: translateY(28.855px); }
	20%   { transform: translateY(48.369px); }
	25%   { transform: translateY(70px); }
	30%   { transform: translateY(91.631px); }
	35%   { transform: translateY(111.145px); }
	40%   { transform: translateY(126.631px); }
	45%   { transform: translateY(136.574px); }
	50%   { transform: translateY(140px); }
	55%   { transform: translateY(136.574px); }
	60%   { transform: translateY(126.631px); }
	65%   { transform: translateY(111.145px); }
	70%   { transform: translateY(91.631px); }
	75%   { transform: translateY(70px); }
	80%   { transform: translateY(48.369px); }
	85%   { transform: translateY(28.855px); }
	90%   { transform: translateY(13.369px); }
	95%   { transform: translateY(3.426px); }
	100%  { transform: translateY(0); }
}

@keyframes kr-logo-ki {
	0%    { transform: translateY(0); }
	5%    { transform: translateY(6.999px); }
	10%   { transform: translateY(27.288px); }
	15%   { transform: translateY(58.947px); }
	20%   { transform: translateY(98.753px); }
	25%   { transform: translateY(143px); }
	30%   { transform: translateY(187.247px); }
	35%   { transform: translateY(227.053px); }
	40%   { transform: translateY(258.712px); }
	45%   { transform: translateY(279.001px); }
	50%   { transform: translateY(286px); }
	55%   { transform: translateY(279.001px); }
	60%   { transform: translateY(258.712px); }
	65%   { transform: translateY(227.053px); }
	70%   { transform: translateY(187.247px); }
	75%   { transform: translateY(143px); }
	80%   { transform: translateY(98.753px); }
	85%   { transform: translateY(58.947px); }
	90%   { transform: translateY(27.288px); }
	95%   { transform: translateY(6.999px); }
	100%  { transform: translateY(0); }
}

.site-logo {
	flex: none;
	font-size: clamp(24px, 2.3vw, 32px);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	white-space: nowrap;
	line-height: 1;
}

.logo-dot { font-size: 12px; vertical-align: super; color: var(--header-ink-soft); }

.header-blocks {
	display: flex;
	gap: clamp(18px, 2.2vw, 40px);
	flex: 1 1 auto;
	min-width: 0;
	justify-content: space-between;
	/* Заголовки блоков на одной верхней линии, подссылки свисают вниз */
	align-items: flex-start;
	align-items: flex-start;
	min-width: 0;
}

/* Порядок блоков (27 авг): товары → акции → рассрочка → поиск → о нас */
.hblock[href*="o-nas"] { order: 1; }

.hblock {
	display: flex;
	gap: 14px;
	/* Референс дизайнера (13 авг): иконка крупная слева, текст растянут
	   по её высоте — заголовок на уровне верха, подссылки уходят вниз */
	align-items: stretch;
	color: var(--header-ink);
}

/* Фирменные иконки вертикальные (пиксель-стиль) — фиксируем высоту, ширина своя */
.hblock-icon { width: auto; height: 64px; flex: none; overflow: visible; }

/* Жирнее линии иконок (фидбек 27 авг): обводка тем же цветом наращивает
   заливку. Ширина в ЛОКАЛЬНЫХ единицах путей (масштаб 0.1). Молния и так жирная. */
.istairs g path,
.hblock-products .hblock-icon g path {
	stroke: currentColor;
	stroke-width: 50;
}

/* Корзина-«карман» (дизайнер, 27 авг): 5 кадров заглатывания, один цикл 0.65s.
   Запуск — класс .playing (JS: hover блока и добавление в корзину). */
.pframe { opacity: 0; }
.pframe-0 { opacity: 1; }

.kranky-pocket.playing .pframe-0 { animation: kp-fr0 0.65s linear 1; }
.kranky-pocket.playing .pframe-1 { animation: kp-fr1 0.65s linear 1; }
.kranky-pocket.playing .pframe-2 { animation: kp-fr2 0.65s linear 1; }
.kranky-pocket.playing .pframe-3 { animation: kp-fr3 0.65s linear 1; }
.kranky-pocket.playing .pframe-4 { animation: kp-fr4 0.65s linear 1; }

@keyframes kp-fr0 { 0% { opacity: 1; } 10% { opacity: 1; } 19.25% { opacity: 0; } 90.75% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kp-fr1 { 0% { opacity: 0; } 10% { opacity: 0; } 19.25% { opacity: 1; } 28.5% { opacity: 0; } 81.5% { opacity: 0; } 90.75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kp-fr2 { 0% { opacity: 0; } 19.25% { opacity: 0; } 28.5% { opacity: 1; } 37.75% { opacity: 0; } 72.25% { opacity: 0; } 81.5% { opacity: 1; } 90.75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kp-fr3 { 0% { opacity: 0; } 28.5% { opacity: 0; } 37.75% { opacity: 1; } 47% { opacity: 0; } 63% { opacity: 0; } 72.25% { opacity: 1; } 81.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kp-fr4 { 0% { opacity: 0; } 37.75% { opacity: 0; } 47% { opacity: 1; } 63% { opacity: 1; } 72.25% { opacity: 0; } 100% { opacity: 0; } }

/* Размер кармана в хедере — как у остальных иконок блоков */
.hblock-icon-wrap .pocket-icon { height: 64px; width: auto; display: block; }

/* Счётчик — НИЖЕ, в «окошке» кармана, где ему и место (фидбек 27 авг).
   a.kranky-pocket — специфичность выше базовых правил счётчика. */
/* 81% = центр нижней секции кармана (у дизайнера y=192 из viewBox 230) */
a.kranky-pocket .header-cart-count {
	top: 81%;
	font-size: 15px;
	font-weight: 800;
}

.hblock-icon .iarc {
	stroke: currentColor;
	stroke-width: 44;
}

.hblock-search .hblock-icon > g:first-of-type path {
	stroke: currentColor;
	stroke-width: 40;
}

.hblock-icon .idash { stroke: currentColor; stroke-width: 4; }

/* Текст: основная ссылка — по вертикальному ЦЕНТРУ иконки (фидбек 27 авг),
   подссылки подвешены под ней абсолютом и центровку не сбивают */
.hblock-text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 64px;
}

.hblock-text .hblock-sub {
	position: absolute;
	top: calc(50% + 15px);
	margin-top: 0;
}

/* ---------- Анимация иконок хедера (от пользователя, 9 авг) ---------- */

/* Рассрочка: лестница «стирается» сверху вниз и отрастает обратно */
.hblock:hover .istairs { animation: kr-stairs-wipe 2.4s ease-in-out infinite; }
@keyframes kr-stairs-wipe {
	0%   { clip-path: inset(0% 0% 0% 0%);   opacity: 1; }
	40%  { clip-path: inset(0% 0% 100% 0%); opacity: 0.15; }
	41%  { clip-path: inset(100% 0% 0% 0%); opacity: 0.15; }
	59%  { clip-path: inset(100% 0% 0% 0%); opacity: 0.15; }
	100% { clip-path: inset(0% 0% 0% 0%);   opacity: 1; }
}

/* Акции: молния «бьёт» */
.ibolt { transform-box: fill-box; transform-origin: 50% 50%; }
.hblock:hover .ibolt { animation: kr-bolt 1.1s ease-in-out infinite; }
@keyframes kr-bolt {
	0%   { transform: skewX(0deg) skewY(0deg) scaleX(1); }
	20%  { transform: skewX(-6deg) skewY(2deg) scaleX(0.96); }
	40%  { transform: skewX(4deg) skewY(-3deg) scaleX(1.04); }
	60%  { transform: skewX(-3deg) skewY(1deg) scaleX(0.98); }
	80%  { transform: skewX(2deg) skewY(-1deg) scaleX(1.01); }
	100% { transform: skewX(0deg) skewY(0deg) scaleX(1); }
}

/* Товары: клетки шкафчика зажигаются по диагонали */
.icell { fill: transparent; }
.hblock:hover .icell { animation: kr-light-up 2s ease-in-out infinite; }
@keyframes kr-light-up {
	0%   { fill: transparent; }
	12%  { fill: currentColor; }
	45%  { fill: currentColor; }
	60%  { fill: transparent; }
	100% { fill: transparent; }
}

/* Поиск: зрачки бинокля моргают (точка <-> тире) */
.ipupil { opacity: 1; }
.idash { opacity: 0; }
.hblock:hover .ipupil { animation: kr-blink-dot 1.6s steps(1) infinite; }
.hblock:hover .idash { animation: kr-blink-dash 1.6s steps(1) infinite; }
@keyframes kr-blink-dot {
	0%, 100% { opacity: 1; }
	10%, 20% { opacity: 0; }
	30%, 45% { opacity: 1; }
	55%, 65% { opacity: 0; }
	75% { opacity: 1; }
}
@keyframes kr-blink-dash {
	0%, 100% { opacity: 0; }
	10%, 20% { opacity: 1; }
	30%, 45% { opacity: 0; }
	55%, 65% { opacity: 1; }
	75% { opacity: 0; }
}

/* Контакты: дуги радара гаснут/загораются от центра */
.iarc { opacity: 1; }
.hblock:hover .iarc1 { animation: kr-fade-arc 1.8s ease-in-out infinite 0s; }
.hblock:hover .iarc2 { animation: kr-fade-arc 1.8s ease-in-out infinite 0.15s; }
.hblock:hover .iarc3 { animation: kr-fade-arc 1.8s ease-in-out infinite 0.3s; }
@keyframes kr-fade-arc {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.hblock-icon-wrap { position: relative; flex: none; line-height: 0; }

.hblock-icon-wrap .header-cart-count {
	position: absolute;
	left: 50%;
	top: 62%;
	transform: translate(-50%, -50%);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--header-ink);
}

.hblock-icon-wrap .header-cart-count:empty { display: none; }

.hblock-sub a { color: var(--header-ink-soft); }
.hblock-sub a:hover { color: var(--header-ink); }
.hblock-title { color: var(--header-ink); }

.hblock-title {
	display: block;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-transform: lowercase;
	white-space: nowrap;
}

.hblock-sub {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--header-ink-soft);
	text-transform: lowercase;
	white-space: nowrap;
}

.hblock:hover .hblock-title { color: var(--ink-soft); }

/* Тесновато — прячем подссылки, оставляем иконки+заголовки */
@media (max-width: 1500px) {
	.hblock-sub { display: none; }
	.hblock { align-items: center; }
	.header-blocks { align-items: center; }
	.hblock-icon { width: auto; height: 48px; }
	.hblock-title { font-size: 18px; }
	.hblock-text { min-height: 0; justify-content: center; }
}

/* Поиск-блок: кнопка, строка выезжает вниз */
.hblock-search { position: relative; }

.search-toggle {
	display: flex;
	gap: 14px;
	/* Как у остальных блоков: заголовок по центру иконки */
	align-items: stretch;
	background: none;
	border: none;
	padding: 0;
	color: var(--header-ink);
	font-family: var(--font-sans);
	text-align: left;
	cursor: pointer;
}

.search-toggle:hover .hblock-title { color: var(--ink-soft); }

/* ---------- Поиск в стиле TE: тёмная модалка с живыми результатами ---------- */

.ksearch-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
}

.ksearch-panel {
	position: absolute;
	/* Ниже хедера, но с запасом до низа — результаты не обрезаются экраном */
	top: clamp(150px, 17vh, 230px);
	left: 50%;
	transform: translateX(-50%);
	width: min(680px, 92vw);
	background: #1d1d1d;
	border-radius: 0;
	padding: 22px;
	color: #fff;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.ksearch-field {
	position: relative;
	display: flex;
	align-items: center;
}

.ksearch-glass {
	position: absolute;
	left: 20px;
	width: 20px;
	height: 20px;
	color: #9a9a9a;
	pointer-events: none;
}

#ksearch-input {
	width: 100%;
	height: 58px;
	background: #2c2c2c;
	border: none;
	border-radius: 0;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 17px;
	padding: 0 20px 0 54px;
	outline: none;
}

#ksearch-input::placeholder { color: #8a8a8a; text-transform: lowercase; }

/* Без браузерного крестика очистки */
#ksearch-input::-webkit-search-cancel-button,
#ksearch-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.ksearch-results {
	max-height: min(52vh, calc(100vh - 17vh - 170px));
	overflow-y: auto;
	scrollbar-width: thin;
	margin-top: 4px;
	/* Зазор между плитками и скроллбаром — крайняя колонка не впритык */
	padding-right: 12px;
}

.ksearch-label {
	font-family: var(--font-mono);
	font-size: 13px;
	color: #9a9a9a;
	text-transform: lowercase;
	margin: 20px 4px 12px;
}

.ksearch-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.ksearch-card { display: block; color: #fff; }

.ksearch-card-img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 0;
	height: 128px;
	padding: 12px;
	border: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.ksearch-card:hover .ksearch-card-img { border-color: #4a90ff; }

.ksearch-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.ksearch-card-name {
	display: block;
	font-size: 14px;
	text-transform: lowercase;
	margin-top: 8px;
	padding: 0 2px;
}

.ksearch-page {
	display: block;
	color: #fff;
	font-size: 20px;
	text-transform: lowercase;
	padding: 6px 4px;
}

.ksearch-page:hover { color: #bdbdbd; }

@media (max-width: 700px) {
	.ksearch-grid { grid-template-columns: repeat(2, 1fr); }
	.ksearch-panel { top: 6%; }
}

/* Старая выезжающая строка поиска отключена — поиск теперь модальный */
.search-form { display: none; position: absolute; top: 100%; left: 0; padding-top: 10px; background: var(--header-bg); z-index: 10; }
.header-search.is-open .search-form,
.hblock-search.is-open .search-form { display: block; }

.search-form input[type="search"] {
	border: none;
	border-bottom: 1px solid var(--header-ink);
	background: transparent;
	color: var(--header-ink);
	border-radius: 0;
	padding: 6px 2px;
	width: 220px;
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: lowercase;
}

.search-form input[type="search"]::placeholder { color: var(--header-ink-soft); }
.search-form input[type="search"]:focus { outline: none; }

/* Мобильное меню (простые ссылки) */
.site-nav { display: none; }
.site-nav.is-open {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 20px 20px;
	text-transform: lowercase;
}
.site-nav a { color: var(--header-ink-soft); }
.site-nav a:hover { color: var(--header-ink); }

/* Кнопка «меню» — у правого края своей зоны (видна только на mobile) */
.header-zone-right .nav-toggle { margin-left: auto; }

/* Корзина — иконка без подписи; цифра появляется внутри, когда не пуста */
.header-cart {
	position: relative;
	display: block;
	line-height: 0;
}

.cart-icon { width: 36px; height: 36px; }

.cart-icon .cart-outline,
.cart-icon .cart-handle {
	fill: none;
	stroke: var(--header-ink);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.header-cart-count {
	position: absolute;
	left: 50%;
	top: 58%;
	transform: translate(-50%, -50%);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var(--header-ink);
}

.header-cart-count:empty { display: none; }

/* ---------- Страница «О нас»: живой градиент (референс Playdate, 27 авг) ----------
   Оранжевый -> фиолетовый -> индиго; угол и стопы привязаны к --kgp (прогресс
   скролла 0..1 из main.js, с демпфером) — градиент «дышит» при прокрутке.
   Хедер прозрачный, вся страница белым по градиенту. */

body.page-onas {
	/* Единый градиент страницы и хедера: у хедера ТОТ ЖЕ fixed-фон,
	   поэтому он выглядит прозрачным, но «обрезает» контент под собой */
	--onas-bg:
		radial-gradient(120% 90% at calc(8% + var(--kgp, 0) * 30%) calc(96% - var(--kgp, 0) * 40%), rgba(244, 150, 68, 0.9) 0%, rgba(244, 150, 68, 0) 42%),
		linear-gradient(calc(210deg + var(--kgp, 0) * 90deg), #6d3df0 0%, #8b45f5 38%, #4a3fe0 100%);
	background: var(--onas-bg);
	background-attachment: fixed;
	color: #ffc733;
	--header-bg: transparent;
	/* Жёлтый Playdate (цвет устройства из презентации) — «материальный» текст */
	--ink: #ffc733;
	--ink-soft: rgba(255, 199, 51, 0.78);
	--ink-hover: rgba(255, 214, 102, 0.95);
	--accent: #ffc733;
	--line: rgba(255, 199, 51, 0.35);
	--header-ink: #ffc733;
	--header-ink-soft: rgba(255, 199, 51, 0.78);
}

/* Материальность и читаемость жёлтого на градиенте: тонкая тень-гравировка */
.page-onas .entry-title,
.page-onas .page-title,
.page-onas .onas-text,
.page-onas .site-header a,
.page-onas .hblock-title {
	text-shadow: 0 1px 2px rgba(40, 10, 80, 0.35);
}

/* Рюкзак на «о нас» — левее, не прижат к краю (фидбек 27 авг) */
.page-onas .sticky-cart { right: 26px; }

/* Хедер на градиенте: визуально «прозрачный», фактически — тот же
   fixed-градиент, что у страницы: слои совпадают, контент при скролле
   уходит ПОД хедер и обрезается (фидбек 27 авг) */
.page-onas .site-header {
	background: var(--onas-bg);
	background-attachment: fixed;
}
.page-onas .site-header a,
.page-onas .hblock-title,
.page-onas .search-toggle { color: #ffc733; }
.page-onas .hblock-sub a { color: rgba(255, 199, 51, 0.78); }
.page-onas .hblock-sub a:hover,
.page-onas .site-header a:hover { color: #ffd666; }

/* Запас высоты, чтобы градиенту было где дышать при скролле */
.page-onas main { min-height: 170vh; }

.page-onas .entry-title,
.page-onas .page-title {
	font-size: clamp(40px, 6vw, 84px);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	margin: 8vh 0 32px;
}

.page-onas .entry-content { font-size: 18px; line-height: 1.7; max-width: 720px; }

/* ---------- Тамагочи-маскот (нейкед, 27 авг): живёт в углу, реагирует ----------
   Состояния переключает main.js (data-emo): idle/joy/about/leaving.
   Кроссфейд кадров — те же kr-mascot-a/b, что у карточного робота. */

/* Угловой тамагочи удалён (27 авг) — маскот теперь контекстный актёр */
.kranky-tama { display: none; }

/* Маскот-актёр: немой, размер задаёт контекст. Анимация — событие (.is-live) */
.kranky-actor {
	display: block;
	width: 72px;
	color: var(--ink);
	cursor: pointer;
	user-select: none;
}

/* Сердце (поза из фирстиля): при оживлении — сердцебиение */
.tama-emo-heart { transform-origin: 50% 60%; }
.kranky-actor.is-live .tama-emo-heart.is-on { animation: kr-heart-beat 0.9s ease-in-out infinite; }

@keyframes kr-heart-beat {
	0%   { transform: scale(1); }
	18%  { transform: scale(1.12); }
	34%  { transform: scale(1); }
	48%  { transform: scale(1.08); }
	64%  { transform: scale(1); }
	100% { transform: scale(1); }
}

/* Кадры A/B: в покое СТАТИЧНЫЙ кадр A; кроссфейд — только на время события */
.kranky-actor .kmascot-a { animation: none; opacity: 1; }
.kranky-actor .kmascot-b { animation: none; opacity: 0; }
.kranky-actor.is-live .kmascot-a { animation: kr-mascot-a 1.2s ease-in-out infinite; }
.kranky-actor.is-live .kmascot-b { animation: kr-mascot-b 1.2s ease-in-out infinite; }

/* Позиции актёра */
.ksearch-top { display: flex; align-items: center; gap: 16px; }
.ksearch-top .kranky-actor { width: 56px; flex: none; color: #ffffff; }
.ksearch-top .ksearch-field { flex: 1 1 auto; }

.checkout-actor { display: flex; justify-content: center; margin: 6px 0 14px; }
.checkout-actor .kranky-actor { width: 72px; }

.kranky-empty-actor { display: flex; justify-content: center; margin-bottom: 18px; }
.kranky-empty-actor .kranky-actor { width: 96px; }

/* «О нас»: маскот слева от текста, sticky — сопровождает до низа */
.onas-layout {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.onas-actor { position: sticky; top: 140px; }
.onas-actor .kranky-actor { width: 96px; }

@media (max-width: 900px) {
	.onas-layout { grid-template-columns: 1fr; }
	.onas-actor { position: static; margin-bottom: 12px; }
}

.tama-emo { display: none; width: 100%; height: auto; }
.tama-emo.is-on { display: block; }

/* Сцена «4 эмоции»: масштаб выровнен по КОРПУСУ робота (161 unit в обоих
   файлах) — при переключении сцен робот не меняет размер. Холст сцены шире
   и выше (рычаг сверху), поэтому width > 100% и компенсация пустоты снизу. */
.tama-emo-cycle { width: 104%; margin-bottom: -15px; margin-left: -2px; }

/* Реплика — голый текст фирменным шрифтом, по центру над роботом,
   без подложек и рамок (фидбек 27 авг). Цвет = чернила страницы. */
.tama-bubble {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 2px);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.kranky-tama.has-bubble .tama-bubble { opacity: 1; transform: translate(-50%, 0); }

/* Реакции движением */
.kranky-tama.is-bounce { animation: kr-tama-bounce 0.55s ease; }
.kranky-tama.is-wobble { animation: kr-tama-wobble 0.5s ease; }

@keyframes kr-tama-bounce {
	0%   { transform: translateY(0); }
	30%  { transform: translateY(-14px); }
	55%  { transform: translateY(0); }
	75%  { transform: translateY(-6px); }
	100% { transform: translateY(0); }
}

@keyframes kr-tama-wobble {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-4deg); }
	60%  { transform: rotate(3deg); }
	100% { transform: rotate(0deg); }
}

@media (max-width: 900px) {
	.kranky-tama { width: 68px; left: 12px; bottom: 12px; }
}

/* ---------- Маскот (живой — видео пользователя, docs/MASCOT.md) ---------- */

.header-mascot { display: block; line-height: 0; }

.mascot-video {
	height: 92px;
	aspect-ratio: 270 / 340; /* резервируем место до загрузки видео — хедер не прыгает */
	width: auto;
	display: block;
	object-fit: contain;
	mix-blend-mode: multiply; /* белый фон видео сливается с хедером */
}

/* На чёрном хедере маскот инвертируется в белого */
.theme-color .mascot-video { filter: invert(1); mix-blend-mode: screen; }

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	padding: 6px 10px;
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: lowercase;
	cursor: pointer;
}

/* (hero удалён — главная страница теперь витрина как /store у TE) */

/* ---------- Кнопки ---------- */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	display: inline-block;
	background: var(--ink);
	color: #fff;
	border: none;
	border-radius: 0;
	padding: 12px 24px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	text-transform: lowercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--ink-hover);
	color: #fff;
}

/* (секции «новинки/хиты/инфо» удалены — главная = витрина, ориентир TE) */

/* Пагинации нет — все товары на одной странице, фильтрация рубриками */
.woocommerce nav.woocommerce-pagination { display: none; }

/* ---------- Панель фильтрации по разделам (под хедером, как у TE) ---------- */

/* Ссылки-разделы — по центру прямо под хедером, количество справа */
/* Быстрые фильтры над каталогом: ОДНА строка по центру, без счётчика.
   На узких экранах строка скроллится горизонтально (скроллбар спрятан). */
.catalog-filterbar {
	display: flex;
	justify-content: center;
	padding: 6px 0 26px;
	margin-bottom: 24px;
}

.filterbar-links {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.3vw, 24px);
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
	/* Бар почти в край (как у TE) — даёт крупный кегль без скролла */
	padding: 0 var(--pad-tight);
	text-transform: lowercase;
}

.filterbar-links::-webkit-scrollbar { display: none; }

/* Размер TE: 20.5px на 1920 — влезает одной строкой после сокращения
   названий категорий («активированные» вместо «предактивированные» и т.д.) */
.filterbar-links a { color: var(--ink-soft); font-size: clamp(14px, 1.04vw, 20px); }
.filterbar-links a:hover { color: var(--ink); }
.filterbar-links a.is-active { color: var(--ink); font-weight: 600; }

/* Уведомления WooCommerce («удалён — отменить?») — без окошек и иконок:
   голый центрированный текст в нашем стиле (решение 28 авг) */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	border: none !important;
	background: none !important;
	padding: 6px 0 !important;
	margin: 0 0 14px !important;
	text-align: center;
	font-family: var(--font-mono);
	color: var(--ink);
}

.woocommerce-message::before,
.woocommerce-info::before { display: none !important; }

.woocommerce-message a.restore-item,
.woocommerce-message .button { float: none; margin-left: 8px; }

/* Пустая категория/корзина: центр ЭКРАНА независимо от контейнера страницы */
.kranky-empty {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 52vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6vh 20px;
}

.kranky-empty-title {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	margin: 0 0 10px;
}

.kranky-empty-sub {
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--ink-soft);
	margin: 0 0 26px;
}

.kranky-empty-link {
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.kranky-empty-link:hover { color: var(--ink-soft); }

/* ---------- Сетка товаров (WooCommerce, выкладка как у TE) ----------
   Размер плитки = приоритет: featured («Рекомендуемый» в админке) —
   большая плитка на 2 колонки, остальные — обычные, 4 в ряд.
   Название+цена под плиткой слева, «+» справа. */

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: row dense;
	gap: 32px var(--tile-gap);
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

/* Clearfix-псевдоэлементы WooCommerce становятся фантомными grid-ячейками
   и ломают раскладку (пустая первая колонка) — отключаем. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; content: none !important; }

.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product.tile-lg { grid-column: span 2; }

/* Пропорции плиток — исходные (как в первоначальной выкладке) */
.tile-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-soft);
	aspect-ratio: 5 / 6;
	overflow: hidden;
}

.tile-lg .tile-media { aspect-ratio: 12 / 7; }

/* Товар КРУПНО, как у TE — заполняет большую часть плитки.
   Без blend-режимов: фон картинок совпадает с фоном плитки — один фон */
/* Абсолютное позиционирование: проценты работают во всех браузерах,
   в отличие от % высоты против aspect-ratio контейнера */
.tile-media img {
	position: absolute;
	inset: 0;
	margin: auto !important;
	width: 84% !important;
	height: 80% !important;
	object-fit: contain;
}

/* Плюс — под фото у правого края (вернули 27 авг), крупный */
.tile-meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding-top: 12px;
}

.tile-name {
	display: block;
	font-size: 14px;
	text-transform: lowercase;
	line-height: 1.35;
}

.tile-price,
.woocommerce ul.products li.product .price {
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink) !important;
	margin: 4px 0 0;
}

.woocommerce ul.products li.product .price del { color: var(--ink-soft); }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--accent); }

/* «+» вместо кнопки */
.woocommerce ul.products li.product .button {
	background: none;
	color: var(--ink);
	padding: 0 4px;
	/* В два раза крупнее, по линии названия товара */
	margin: -12px 0 0;
	line-height: 1;
	font-family: var(--font-sans);
	font-size: 48px;
	font-weight: 300;
	line-height: 1;
}

.woocommerce ul.products li.product .button:hover {
	background: none;
	color: var(--ink-soft);
}

/* После добавления — НИКАКИХ галочек и «Просмотр корзины» (фидбек 28 авг):
   нажал плюс — товар упал на стойку, это и есть фидбек */
.woocommerce ul.products li.product .added_to_cart { display: none !important; }
.woocommerce ul.products li.product .button.added::after,
.woocommerce ul.products li.product .button.loading::after { display: none !important; }

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--accent);
	color: #fff;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: lowercase;
	min-height: 0;
	line-height: 1;
	padding: 6px 9px;
	margin: 12px;
}

/* ---------- Страница товара (референс: TE tp-7-black) ----------
   Фото слева на сером фоне, справа: крупный заголовок, цена,
   свотчи-плитки вариаций, широкая чёрная кнопка, описание под ней. */

.woo-page { padding: 32px var(--pad) 64px; }

/* На карточке товара серый hero стыкуется с чёрным хедером без белой полосы */
.single-product .woo-page { padding-top: 0; }
.single-product .product-hero { margin-top: 0; }

/* Hero-блок: ОДИН фон на фото и текст, во всю ширину экрана,
   заканчивается с блоком (как у TE). Ниже — белый. */
.product-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--bg-soft);
}

/* Галерея от края экрана; правая колонка ~420px с большим правым отступом (TE).
   Маскот из карточки убран (27 авг) — он теперь тамагочи в углу сайта. */
.product-hero-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
	gap: 40px clamp(32px, 5vw, 80px);
	align-items: start;
	padding: 40px clamp(24px, 8.4vw, 160px) 48px 0;
}

/* По умолчанию кадры не крутятся — анимацию включает контекст (.is-live) */
.kmascot-a { opacity: 1; }
.kmascot-b { opacity: 0; }

@keyframes kr-mascot-a {
	0%   { opacity: 1; }
	45%  { opacity: 1; }
	50%  { opacity: 0; }
	95%  { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes kr-mascot-b {
	0%   { opacity: 0; }
	45%  { opacity: 0; }
	50%  { opacity: 1; }
	95%  { opacity: 1; }
	100% { opacity: 0; }
}

@media (max-width: 900px) {
	.product-mascot { display: none; }
}

/* Товар целиком помещается на экран: высота фото ограничена вьюпортом */
.woocommerce div.product .woocommerce-product-gallery__image img {
	height: min(76vh, 840px) !important;
	width: 100% !important;
	object-fit: contain;
}

.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	background: none;
	padding: 0;
}

/* Без blend: фон фото = фон hero, одно целое */

/* Зума нет вообще */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none !important; }

.woocommerce div.product div.summary {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* Табы и похожие — ниже, на белом, в контейнере */
.woocommerce div.product .woocommerce-tabs { margin-top: 40px; }

.woocommerce div.product .product_title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	line-height: 1.05;
	margin-bottom: 8px;
}

/* Цена почти как заголовок — у TE «349 €» второй строкой того же масштаба */
.woocommerce div.product p.price {
	font-family: var(--font-mono);
	font-size: clamp(24px, 2.6vw, 34px);
	color: var(--ink);
	margin-bottom: 20px;
}

.woocommerce div.product p.price del { color: var(--ink-soft); font-size: 18px; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--accent); }

.woocommerce div.product p.stock {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink);
	text-transform: lowercase;
}

/* Вариации: таблица → простые строки, селекты скрываются JS-плитками */
.woocommerce div.product form.cart table.variations { margin-bottom: 8px; }
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th { padding: 0 0 6px; border: none; }

.woocommerce div.product form.cart table.variations label {
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: lowercase;
	color: var(--ink);
	font-weight: 400;
}

.woocommerce div.product form.cart .variations select.is-pilled { display: none; }

.pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* Свотчи модификаций: те же пилюли, но это ссылки на соседние модификации */
.mod-picker { margin-bottom: 8px; }
.mod-row { display: flex; align-items: center; gap: 14px; }
.mod-row .pill-group { margin-bottom: 10px; }
.mod-label {
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: lowercase;
	color: var(--ink);
	min-width: 52px;
}
a.mod-link { display: inline-flex; align-items: center; justify-content: center; }
a.mod-link.is-active { pointer-events: none; }

.pill {
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	padding: 11px 16px;
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: lowercase;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.pill:hover { border-color: var(--ink); }
.pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Цветовой свотч (референс ob-4-orange): квадрат цвета вместо текста */
.pill-swatch {
	width: 46px;
	height: 46px;
	padding: 0;
	font-size: 0;
	border: 1px solid var(--line);
}

.pill-swatch:hover { border-color: var(--ink); }

.pill-swatch.is-active {
	border-color: var(--ink);
	outline: 2px solid var(--ink);
	outline-offset: 2px;
	background-image: none;
}

.woocommerce div.product .reset_variations {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-soft);
}

/* Цена выбранной вариации */
.woocommerce div.product .woocommerce-variation-price .price { font-size: 22px; }
.woocommerce div.product .woocommerce-variation-availability { margin-bottom: 8px; }

/* Кнопка «в корзину» — широкая, как у TE */
.woocommerce div.product form.cart { display: block; margin-bottom: 24px; }

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

/* Количества в карточке нет (меняется в корзине) — кнопка на всю ширину */
.woocommerce div.product form.cart div.quantity { display: none !important; }
.woocommerce div.product .reset_variations { display: none !important; }

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	flex: 1 1 auto;
	width: 100%;
	padding: 22px 24px;
	font-size: 18px;
	text-align: center;
	background: var(--ink);
	color: #fff;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled { opacity: 0.35; }

/* Короткое описание — под кнопкой, как у TE */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	margin-top: 12px;
}

.woocommerce div.product .woocommerce-product-details__short-description ul { font-size: 16px; }

/* Единственная ссылка под описанием — на отдельную страницу товара */
.product-more-link {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: lowercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 18px; }

.woocommerce div.product .product_meta {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-soft);
	text-transform: lowercase;
}

.woocommerce div.product .product_meta a { color: var(--ink-soft); text-decoration: underline; }

@media (max-width: 900px) {
	.product-hero-in { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 32px; }
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 16px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	border-radius: 0;
	margin: 0 16px 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: lowercase;
	color: var(--ink-soft);
	padding: 8px 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ink);
	border-bottom: 2px solid var(--ink);
}

/* Никаких разделительных полос — у активного таба только своё подчёркивание */
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

/* Заголовок «Описание» внутри панели — дубль таба, прячем */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-of-type { display: none; }

/* Количество */
.woocommerce .quantity .qty {
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 10px;
	font-family: var(--font-mono);
}

/* ---------- Формы (корзина, checkout) ---------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 10px 12px;
	font-family: var(--font-sans);
	font-size: 14px;
	background: var(--bg);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--ink);
}

.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}

.woocommerce table.shop_table th {
	font-family: var(--font-mono);
	font-weight: 400;
	text-transform: lowercase;
	color: var(--ink-soft);
}

/* Уведомления */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 2px solid var(--ink);
	background: var(--bg-soft);
	font-size: 13px;
	border-radius: 0;
}

.woocommerce-message { border-top-color: var(--ink); }
.woocommerce-message::before { color: var(--ink); }
.woocommerce-info { border-top-color: var(--ink-soft); }
.woocommerce-info::before { color: var(--ink-soft); }
.woocommerce-error { border-top-color: var(--accent); }
.woocommerce-error::before { color: var(--accent); }

/* ---------- Стики-корзина (референс TE — квадрат внизу справа) ---------- */

/* Стики-корзина = СТОЙКА ВЫДАЧИ (28 авг): компактная, кладка коробок 3-2-1,
   при переполнении цифра. Цвета фиксированные — читается и на градиенте */
.sticky-cart {
	position: fixed;
	right: 14px;
	/* Приподнят — не сидит на нижней кромке и не наезжает на футер */
	bottom: 48px;
	z-index: 200;
	color: #313131;
	line-height: 0;
	gap: 2px;
}

.sticky-cart:hover { color: #4a4a4a; }

/* На чекауте мы уже «в корзине» — рюкзак-корзина в углу не нужен */
.woocommerce-checkout .sticky-cart { display: none; }

.sticky-cart-count { color: #313131; }
.sticky-cart.is-empty { display: none; }

/* Сцена стойки: компактная — 84px шириной, кладка [3,2,1] = максимум 6 коробок */
.stand-scene {
	position: relative;
	display: block;
	width: 84px;
	height: 66px;
}

.stand-top {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9px;
	height: 4px;
	background: #313131;
}

.stand-leg {
	position: absolute;
	bottom: 0;
	width: 4px;
	height: 9px;
	background: #313131;
}

.stand-leg.l { left: 7px; }
.stand-leg.r { right: 7px; }

.stand-box {
	position: absolute;
	width: 20px;
	height: 13px;
	background: #ffffff;
	border: 2px solid #313131;
	box-sizing: border-box;
}

.stand-box::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 2px;
	height: 2px;
	background: #313131;
}

/* backwards: до первого кадра анимации коробка держит состояние 0%
   (невидима) — без этого она мелькала готовой до старта падения */
.stand-box.drop { animation: kr-box-drop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1) backwards; }
.stand-box.take { animation: kr-box-take 0.35s ease-in forwards; }

@keyframes kr-box-drop {
	0%   { transform: translateY(-40px); opacity: 0; }
	55%  { transform: translateY(2px); opacity: 1; }
	75%  { transform: translateY(-3px); }
	100% { transform: translateY(0); }
}

@keyframes kr-box-take {
	0%   { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(-34px); opacity: 0; }
}

/* Переполнение: цифра над верхней коробкой */
.stand-more {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #313131;
	transform: translate(-50%, -100%);
	white-space: nowrap;
}

/* Число-источник для фрагментов WooCommerce — визуально скрыто */
.sticky-cart .sticky-cart-count {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ---------- Галерея товара: слайдер с точками и стрелками (TE) ---------- */

.woocommerce div.product .woocommerce-product-gallery { position: relative; }

.woocommerce div.product .flex-control-thumbs { display: none; }

.woocommerce div.product .flex-control-nav.flex-control-paging {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-paging li { margin: 0; }

.woocommerce div.product .flex-control-paging li a {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--line);
	font-size: 0;
	text-indent: -9999px;
}

.woocommerce div.product .flex-control-paging li a.flex-active { background: var(--ink); }

.woocommerce div.product .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Стрелки крупные, тонкие, почти впритык к краям экрана (как у TE) */
.woocommerce div.product .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	font-size: 72px;
	font-weight: 100;
	line-height: 1;
	color: var(--ink-soft);
	text-decoration: none;
}

.woocommerce div.product .flex-direction-nav a:hover { color: var(--ink); }
.woocommerce div.product .flex-direction-nav .flex-nav-prev a { left: 18px; }
.woocommerce div.product .flex-direction-nav .flex-nav-next a { right: 18px; }

/* Секции «аксессуары»/«похожие» — как у TE: во всю ширину экрана,
   плитка: название+цена сверху, фото в середине, «в корзину» внизу */
/* Секции плиток — почти в край (20px), как аксессуары у TE */
.woocommerce div.product section.related,
.woocommerce div.product section.up-sells {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 var(--pad-tight);
}

.woocommerce div.product section.related ul.products,
.woocommerce div.product section.up-sells ul.products { gap: 32px var(--tile-gap); }

.woocommerce div.product section.related > h2,
.woocommerce div.product section.up-sells > h2 {
	text-align: center;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	margin: 56px 0 40px;
}

.woocommerce div.product section.related li.product,
.woocommerce div.product section.up-sells li.product {
	background: var(--bg-soft);
	padding: 28px 20px !important;
}

.woocommerce div.product section.related .tile-meta,
.woocommerce div.product section.up-sells .tile-meta { display: contents; }

.woocommerce div.product section.related .tile-info,
.woocommerce div.product section.up-sells .tile-info {
	order: -1;
	text-align: center;
	margin-bottom: 18px;
}

.woocommerce div.product section.related .tile-price,
.woocommerce div.product section.up-sells .tile-price { margin-top: 2px; }

.woocommerce div.product section.related .tile-media,
.woocommerce div.product section.up-sells .tile-media {
	background: none;
	aspect-ratio: auto;
	flex: 1;
	min-height: 330px;
}

/* Товар в карточках секций КРУПНО — как и везде (фидбек 13 авг) */
.woocommerce div.product section.related .tile-media img,
.woocommerce div.product section.up-sells .tile-media img {
	width: 92% !important;
	height: 90% !important;
}

.woocommerce div.product section.related li.product .button,
.woocommerce div.product section.up-sells li.product .button {
	order: 1;
	align-self: center;
	margin-top: 20px;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
}

/* ---------- Корзина и чекаут (референс TE /store/checkout) ---------- */

/* Корзина: товары слева, итог справа */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px 56px;
	align-items: start;
}

.woocommerce-cart .woocommerce-cart-form { margin: 0; }
.woocommerce-cart .cart-collaterals { width: auto; float: none; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }

.woocommerce-cart table.shop_table { border: none; }
.woocommerce-cart table.shop_table th { border: none; }
.woocommerce-cart table.shop_table td { border: none; padding: 14px 8px; vertical-align: middle; }
.woocommerce-cart table.shop_table thead { display: none; }

.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 84px;
	background: var(--bg-soft);
	padding: 8px;
}

.woocommerce-cart table.shop_table td.product-name a { font-size: 15px; }

.woocommerce-cart table.shop_table td.product-remove a {
	font-size: 0;
}

.woocommerce-cart table.shop_table td.product-remove a::after {
	content: 'убрать';
	font-size: 12px;
	font-family: var(--font-mono);
	color: var(--ink-soft);
	text-transform: lowercase;
}

.woocommerce-cart table.shop_table td.product-remove a:hover::after { color: var(--ink); }

.woocommerce-cart .quantity .qty { width: 64px; }

/* Итоговая колонка */
.cart_totals h2 {
	font-size: 15px;
	font-family: var(--font-mono);
	font-weight: 400;
	text-transform: lowercase;
	color: var(--ink-soft);
	margin: 0 0 12px;
}

.cart_totals table.shop_table { border: none; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td { border: none; font-family: var(--font-mono); font-size: 14px; }

.wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	text-align: center;
	padding: 20px 24px;
	font-size: 15px;
}

/* Купон в корзине */
.woocommerce-cart td.actions .coupon .input-text {
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 10px 12px;
	font-family: var(--font-mono);
	font-size: 13px;
	width: 180px;
}

/* Чекаут: форма слева, сводка заказа справа */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px 56px;
	align-items: start;
}

.woocommerce-checkout #customer_details { width: auto; float: none; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; }

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { width: auto; float: none; }

.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	font-size: 15px;
	font-family: var(--font-mono);
	font-weight: 400;
	text-transform: lowercase;
	color: var(--ink-soft);
	margin: 0;
}

.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-size: 15px;
	font-family: var(--font-mono);
	font-weight: 400;
	text-transform: lowercase;
	color: var(--ink-soft);
}

/* Поля как у TE: бокс с плейсхолдером внутри, лейблы скрыты */
.woocommerce-checkout .form-row > label:not(.woocommerce-form__label-for-checkbox) { display: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection {
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 16px 14px;
	font-size: 14px;
	background: var(--bg);
	height: auto;
}

.woocommerce form .form-row input.input-text::placeholder { color: var(--ink-soft); text-transform: lowercase; }

/* Сводка заказа (кастомный шаблон review-order.php, стиль TE) */
.kranky-review { font-size: 14px; }

.review-item {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 16px;
	padding: 14px 0;
	align-items: start;
}

/* Миниатюра — квадратная плитка, товар вписан целиком по центру (27 авг) */
.review-item-thumb {
	width: 96px;
	height: 96px;
	background: var(--bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
}

.review-item-thumb img {
	max-width: 84%;
	max-height: 84%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	display: block;
}

/* Цена справа — одной строкой, без переносов */
.review-item > :last-child,
.review-item-price { white-space: nowrap; }

/* «Очистить корзину» — скромная ссылка под списком товаров */
.review-empty-cart {
	display: inline-block;
	margin: 10px 0 4px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.review-empty-cart:hover { color: var(--ink); }

.review-item-name { display: block; font-size: 15px; margin-bottom: 4px; }

.review-item-info .variation {
	margin: 0 0 4px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-soft);
}
.review-item-info .variation dt,
.review-item-info .variation dd { display: inline; margin: 0; font-weight: 400; }
.review-item-info .variation dd p { display: inline; }

.review-item-stock {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink);
	margin-bottom: 10px;
}

.stock-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink);
	margin-left: 2px;
}

.review-item-actions { display: flex; align-items: center; gap: 18px; }

.review-remove {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-soft);
	text-transform: lowercase;
}
.review-remove:hover { color: var(--ink); }

.review-qty { display: inline-flex; align-items: center; gap: 0; }

.qty-btn {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 15px;
}
.qty-btn:hover { border-color: var(--ink); }

.qty-num {
	display: inline-block;
	min-width: 36px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 13px;
}

.review-item-price {
	text-align: right;
	font-family: var(--font-mono);
	font-size: 15px;
}

.review-item-each {
	display: block;
	font-size: 12px;
	color: var(--ink-soft);
	margin-top: 2px;
}

.review-totals { margin-top: 24px; padding-top: 8px; }

.review-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 7px 0;
	font-family: var(--font-mono);
	font-size: 14px;
}

.review-row-total { font-size: 17px; padding-top: 14px; }

#place_order {
	width: 100%;
	padding: 20px 24px;
	font-size: 15px;
	margin-top: 12px;
}

/* Чекаут: никаких чёрточек, полос и серых боксов WooCommerce */
.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: none;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--bg-soft);
	border-radius: 0;
	font-size: 13px;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Плашка «есть купон?» не нужна — промокод будет в сводке */
.woocommerce-form-coupon-toggle { display: none; }

/* Примечания к заказу — лишний блок */
.woocommerce-additional-fields { display: none; }

/* ---------- Контент-страницы ---------- */

.entry { padding: 40px 0 64px; }

.entry-title {
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	margin: 0 0 20px;
}

.entry-content { color: var(--ink); max-width: 680px; }
.entry-content a { text-decoration: underline; }

.notice-plain {
	padding: 40px 0;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink-soft);
}

/* ---------- Подвал ---------- */

.site-footer {
	margin-top: 64px;
	padding: 40px 0;
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.footer-note {
	margin: 8px 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-soft);
}

/* Угол пуст (маскот стал контекстным) — отступ не нужен */
.footer-nav { display: flex; gap: 16px; text-transform: lowercase; }
.footer-nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: var(--ink-soft); font-size: 13px; }

.footer-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-soft);
}

/* Копирайт не прячется под рюкзаком-корзиной справа */
.footer-copy { margin-right: clamp(84px, 7vw, 112px); }

/* ---------- Мобильная версия ---------- */

@media (max-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1150px) {
	.header-blocks { display: none; }
	.header-inner { padding: 16px 0; align-items: center; }
	.site-logo { font-size: 24px; }
	.mascot-video { height: 56px; aspect-ratio: 270 / 340; }
	.cart-icon { width: 30px; height: 30px; }
	.nav-toggle { display: block; }
}