/**
 * Анонс «Наш новый сайт — kassopttorg.ru» вверху каждой страницы (php/header_kassa.html).
 * Закреплён у верха экрана: наверху страницы полный, при прокрутке сворачивается
 * в полосу 64px и разворачивается обратно (класс kotMove_compact ставит скрипт
 * в той же разметке). Место под полный анонс держит .kotMoveSpacer — страница не прыгает.
 * Без JS анонс просто стоит в потоке, не закреплён.
 *
 * Из kassopttorg: #42113D — шапка и подвал; #892F5C — вторая полоса шапки;
 * #ae4178 — кнопка «Наверх»; #f44336 / #d42d20 — кнопки и hover; #FFD700 — жёлтая
 * акционная полоса; кнопка 60px, радиус 4px — как «В корзину»; Roboto — шрифты шаблона;
 * тень окна — как у модалок; диагональ — как в слайдерах главной.
 * Подобраны под анонс: заголовок 40px, колонка скриншота 520px, наклоны 4° и 12°,
 * отступы 48px, свёрнутая полоса 64px (56px на телефоне).
 */
@font-face { font-family: "KotRoboto"; src: url("/fonts/kot/roboto-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "KotRoboto"; src: url("/fonts/kot/roboto-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

html { scroll-padding-top: 64px; } /* якорные ссылки не прячутся под полосой */

a.kotMove,
a.kotMove:visited,
a.kotMove:hover {
	position: relative;
	display: block;
	margin-top: -0.8rem; /* компенсирует margin-top у body в defaultkassa.css */
	overflow: hidden;
	background: #42113D;
	color: #fff;
	text-decoration: none;
	text-align: left;
	font-family: "KotRoboto", Arial, sans-serif;
	font-weight: 400;
}
a.kotMove.kotMove_fixed {
	position: fixed;
	z-index: 2147482500; /* над страницей и кнопкой чата, под баннером cookie */
	top: 0;
	left: 0;
	right: 0;
	margin-top: 0;
	max-height: var(--kot-move-full, 420px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
	transition: max-height .35s ease;
}
a.kotMove.kotMove_fixed.kotMove_compact { max-height: 64px; }
a.kotMove:focus-visible { outline: 4px solid #FFD700; outline-offset: -4px; }
.kotMoveSpacer { display: block; height: 0; }

/* полный вид */
.kotMove .kotMove__full { position: relative; display: block; transition: opacity .25s ease; }
.kotMove.kotMove_compact .kotMove__full { opacity: 0; }

.kotMove .kotMove__art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.kotMove .kotMove__band { position: absolute; top: -10%; bottom: -10%; transform: skewX(-18deg); }
.kotMove .kotMove__band_wide { left: 54%; right: -20%; background: #892F5C; }
.kotMove .kotMove__band_thin { left: calc(54% - 44px); width: 24px; background: #ae4178; }
.kotMove .kotMove__mark {
	position: absolute;
	left: -70px;
	bottom: -120px;
	width: 380px;
	height: 368px;
	background: url("/images/kot/kassopttorg-icon.svg") no-repeat center / contain;
	opacity: .12;
}

.kotMove .kotMove__inner {
	position: relative;
	display: flex;
	gap: 48px;
	max-width: 1448px;
	margin: 0 auto;
	padding: 0 48px;
	box-sizing: border-box;
}
.kotMove .kotMove__copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 0;
}
.kotMove .kotMove__logo { display: block; width: 215px; height: 30px; margin-bottom: 24px; }
.kotMove .kotMove__title { display: block; max-width: 15em; font-size: 40px; line-height: 1.1; font-weight: 700; color: #fff; }
.kotMove .kotMove__text { display: block; max-width: 40em; margin-top: 12px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.kotMove .kotMove__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	margin-top: 24px;
	padding: 0 32px;
	border-radius: 4px;
	background: #f44336;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
	box-sizing: border-box;
	transition: background-color .2s;
}
a.kotMove:hover .kotMove__btn { background: #d42d20; }

/* окно браузера со скриншотом kassopttorg: наклонено и уходит за нижний край */
.kotMove .kotMove__shot { position: relative; flex: 0 0 520px; }
.kotMove .kotMove__browser {
	position: absolute;
	top: 44px;
	left: 0;
	right: 0;
	display: block;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
	background: #fff;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
	transform: perspective(1400px) rotateY(-12deg) rotateX(3deg);
	transform-origin: left center;
}
.kotMove .kotMove__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #ececec; }
.kotMove .kotMove__bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #c4c4c4; }
.kotMove .kotMove__url { flex: 1 1 auto; margin-left: 12px; height: 20px; padding: 0 10px; border-radius: 4px; background: #fff; color: #555; font-size: 12px; line-height: 20px; }
.kotMove .kotMove__img { display: block; width: 100%; height: auto; }
.kotMove .kotMove__sticker {
	position: absolute;
	z-index: 1;
	top: 22px;
	left: -18px;
	padding: 8px 16px;
	border-radius: 4px;
	background: #FFD700;
	color: #000;
	font-size: 17px;
	font-weight: 700;
	transform: rotate(-4deg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

/* свёрнутая полоса */
.kotMove .kotMove__mini {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 64px;
	max-width: 1448px;
	margin: 0 auto;
	padding: 0 48px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}
.kotMove.kotMove_compact .kotMove__mini { opacity: 1; visibility: visible; }
.kotMove .kotMove__mini .kotMove__logo { width: 150px; height: 21px; margin: 0; flex: 0 0 auto; }
.kotMove .kotMove__miniTitle { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kotMove .kotMove__mini .kotMove__btn { height: 40px; margin: 0; padding: 0 20px; font-size: 15px; }

@media (max-width: 1024px) {
	.kotMove .kotMove__inner,
	.kotMove .kotMove__mini { gap: 24px; padding: 0 24px; }
	.kotMove .kotMove__shot { flex-basis: 340px; }
	.kotMove .kotMove__title { font-size: 32px; }
	.kotMove .kotMove__band_wide { left: 50%; }
	.kotMove .kotMove__band_thin { left: calc(50% - 40px); }
}
@media (max-width: 700px) {
	html { scroll-padding-top: 56px; }
	a.kotMove.kotMove_fixed.kotMove_compact { max-height: 56px; }
	.kotMove .kotMove__inner,
	.kotMove .kotMove__mini { padding: 0 16px; }
	.kotMove .kotMove__mini { height: 56px; gap: 12px; }
	.kotMove .kotMove__mini .kotMove__logo { display: none; }
	.kotMove .kotMove__miniTitle { font-size: 15px; }
	.kotMove .kotMove__mini .kotMove__btn { height: 36px; padding: 0 14px; font-size: 14px; }
	.kotMove .kotMove__copy { padding: 24px 0; }
	.kotMove .kotMove__logo { margin-bottom: 16px; }
	.kotMove .kotMove__title { font-size: 26px; }
	.kotMove .kotMove__text { font-size: 15px; }
	.kotMove .kotMove__copy .kotMove__btn { width: 100%; }
	.kotMove .kotMove__shot { display: none; }
	.kotMove .kotMove__band_wide { left: 78%; }
	.kotMove .kotMove__band_thin { left: calc(78% - 36px); width: 16px; }
	.kotMove .kotMove__mark { width: 240px; height: 232px; left: auto; right: -60px; bottom: -70px; }
}
@media (prefers-reduced-motion: reduce) {
	a.kotMove.kotMove_fixed,
	.kotMove .kotMove__full,
	.kotMove .kotMove__mini,
	.kotMove .kotMove__btn { transition: none; }
}