/* Кнопка «наверх». Макет Claude Design «Кнопка наверх и бургер-меню · 10b» —
   кремовый круг с волосяной золотой обводкой, на ховере заливается фирменным
   зелёным, стрелка становится кремовой.

   Разметку печатает mydecor-child/footer.php, но id и класс scroll-button
   оставлены родительскими: на них завязаны скрипты темы — main.js вешает
   `#to-top.on` при скролле ниже 100px и плавную прокрутку на клик по
   `#to-top .scroll-button`. Своего JS у кнопки поэтому нет.

   Базовый селектор всюду `#to-top.tk-top.scroll-button`, а не просто `#to-top`:
   css/responsive.css темы подключается ПОСЛЕ стилей child-темы, и её правила
   вида `body:not(.ts_desktop) #to-top{bottom:52px}` при равном весе побеждают.
   Двух классов в селекторе хватает, чтобы перевесить их без !important. */

#to-top.tk-top.scroll-button {
	--tk-deep: #1D3A37;
	--tk-accent: #8A6A3B;
	--tk-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: fixed;
	/* right и bottom не задаём: dynamic_style.php темы печатает их инлайном
	   с !important из настроек (20/20 на десктопе, 16/70 на тач-устройствах —
	   там кнопка встаёт над панелью #ts-mobile-button-bottom). Свои значения
	   были бы мёртвым кодом, а отступы владелец меняет в админке. */
	width: 56px;
	height: 56px;
	z-index: 996;
	border-radius: 50%;
	text-align: left;

	/* Появление из макета: кнопка не «вырастает из нуля», как в теме
	   (transform: scale(0,0)), а всплывает снизу и проявляется. */
	opacity: 0;
	transform: translateY(14px) scale(0.94);
	pointer-events: none;
	transition: opacity 320ms ease, transform 420ms var(--tk-ease);
}

#to-top.tk-top.scroll-button.on {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

#to-top.tk-top.scroll-button a.scroll-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #FFFDF9;
	border: 1px solid rgba(138, 106, 59, 0.55);
	color: var(--tk-deep);
	box-shadow: 0 14px 30px -18px rgba(29, 58, 55, 0.55);
	transition: background 260ms ease, border-color 260ms ease, color 260ms ease;
}

/* Глиф themify из style.css темы: разметка теперь своя, стрелка нарисована
   инлайновым SVG, и второй значок поверх неё не нужен. */
#to-top.tk-top.scroll-button a.scroll-button::before { content: none; }

#to-top.tk-top.scroll-button a.scroll-button svg {
	display: block;
	/* stroke наследует color — одной сменой цвета красится и стрелка. */
	stroke: currentColor;
}

#to-top.tk-top.scroll-button a.scroll-button:hover,
#to-top.tk-top.scroll-button a.scroll-button:focus-visible {
	background: var(--tk-deep);
	border-color: var(--tk-deep);
	color: #F7F4EF;
	box-shadow: 0 16px 32px -18px rgba(29, 58, 55, 0.6);
}

#to-top.tk-top.scroll-button a.scroll-button:focus-visible {
	outline: 2px solid var(--tk-accent);
	outline-offset: 3px;
}

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

@media (max-width: 767px) {
	#to-top.tk-top.scroll-button,
	#to-top.tk-top.scroll-button a.scroll-button {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#to-top.tk-top.scroll-button,
	#to-top.tk-top.scroll-button a.scroll-button { transition: none; }
}