/* ============================================================================
   Orilogy back to top - single product pages
   ========================================================================= */

.obtt {
	--obtt-ink: var(--e-global-color-primary, #241f20);
	--obtt-cream: var(--e-global-color-secondary, #f2ebde);

	position: fixed;
	right: 24px;
	/* JS measures the sticky bar and sets --obtt-offset so the button always
	   clears it, including when the bar slides in and out. */
	bottom: var(--obtt-offset, 24px);
	/* The sticky add-to-cart bar (#ostk-bar) is z-index 9999, so anything
	   lower renders behind it and is invisible on product pages. */
	z-index: 10000;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;

	background: var(--obtt-ink);
	color: var(--obtt-cream);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--obtt-ink) 70%, transparent);
	cursor: pointer;

	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .26s ease, transform .26s cubic-bezier(.22, .61, .36, 1), background-color .2s ease;
}

.obtt.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.obtt:hover {
	background: #183b19;
	color: #fff;
}

.obtt:focus-visible {
	outline: 2px solid var(--obtt-ink);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.obtt {
		right: 16px;
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.obtt {
		transition-duration: .01ms;
	}
}