.sffi-fixed-image {
	position: fixed;
	left: 50%;
	/* Keep the watermark above page-builder sections so opaque backgrounds cannot crop it. */
	z-index: 99990;
	width: min(var(--sffi-desktop-width, 520px), calc(100vw - 32px));
	max-width: none;
	opacity: var(--sffi-opacity, 0.18);
	pointer-events: none;
	user-select: none;
	will-change: opacity;
	mix-blend-mode: normal;
}

.sffi-fixed-image.sffi-position-top {
	top: 24px;
	transform: translateX(calc(-50% + var(--sffi-offset-x, 0px))) translateY(var(--sffi-offset-y, 0px));
}

.sffi-fixed-image.sffi-position-center {
	top: 50%;
	transform: translateX(calc(-50% + var(--sffi-offset-x, 0px))) translateY(calc(-50% + var(--sffi-offset-y, 0px)));
}

.sffi-fixed-image.sffi-position-bottom {
	bottom: 24px;
	transform: translateX(calc(-50% + var(--sffi-offset-x, 0px))) translateY(var(--sffi-offset-y, 0px));
}

.sffi-fixed-image .sffi-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	border: 0;
	box-shadow: none;
	filter: none;
}

.sffi-fixed-image.sffi-style-white_relief .sffi-image {
	filter:
		brightness(0)
		invert(1)
		drop-shadow(
			var(--sffi-relief-depth-negative, -2px)
			var(--sffi-relief-depth-negative, -2px)
			var(--sffi-relief-light-blur, 2px)
			rgba(255, 255, 255, var(--sffi-highlight-alpha, 0.9))
		)
		drop-shadow(
			var(--sffi-relief-depth, 2px)
			var(--sffi-relief-depth, 2px)
			var(--sffi-relief-dark-blur, 3px)
			rgba(0, 0, 0, var(--sffi-shadow-alpha, 0.7))
		);
}

@media (max-width: 767px) {
	.sffi-fixed-image {
		width: min(var(--sffi-mobile-width, 280px), calc(100vw - 24px));
	}
}

@media print {
	.sffi-fixed-image {
		display: none !important;
	}
}