/*
 * Back-to-top button (WoodMart .scrollToTop): three brand-red chevrons stacked vertically, pointing up.
 * Same chevron shape as the eyebrow chevrons on the content pages (clip-path polygon in
 * server/mu-plugins/senax-pages/common.css), turned upward. Drawn as a CSS mask so the colour
 * can change on hover. Client request 2026-11-07.
 * "body" in the selectors: WoodMart loads its own opt-scrolltotop.css after the child theme, with the same specificity.
 */
body .scrollToTop {
	--sx-top-red: #FF0000;
	width: 44px;
	height: 48px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 0;
}
body .scrollToTop:after {
	content: '';
	display: block;
	width: 30px;
	height: 37px;
	background-color: var(--sx-top-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36.8'%3E%3Cpath d='M0 16 L0 8.8 L15 0 L30 8.8 L30 16 L15 7.2Z M0 26.4 L0 19.2 L15 10.4 L30 19.2 L30 26.4 L15 17.6Z M0 36.8 L0 29.6 L15 20.8 L30 29.6 L30 36.8 L15 28Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36.8'%3E%3Cpath d='M0 16 L0 8.8 L15 0 L30 8.8 L30 16 L15 7.2Z M0 26.4 L0 19.2 L15 10.4 L30 19.2 L30 26.4 L15 17.6Z M0 36.8 L0 29.6 L15 20.8 L30 29.6 L30 36.8 L15 28Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s ease, background-color .25s ease;
}
body .scrollToTop:hover:after,
body .scrollToTop:focus-visible:after {
	transform: translateY(-4px);
	background-color: #D90000;
}
body .scrollToTop:focus-visible {
	outline: 2px solid var(--sx-top-red);
	outline-offset: 2px;
}
@media (max-width: 1024px) {
	body .scrollToTop { width: 36px; height: 40px; }
	body .scrollToTop:after { width: 24px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
	body .scrollToTop:after { transition: none; }
	body .scrollToTop:hover:after, body .scrollToTop:focus-visible:after { transform: none; }
}