/**
 * Floating shop link (FAB).
 */

.sk-shop-fab {
	--sk-shop-fab-size: 3.75rem;
	--sk-shop-icon-dark: var(--wp--preset--color--sk-dark, #1a1410);
	--sk-shop-icon-light: var(--wp--preset--color--sk-white, #fafaf7);
	--sk-back-to-top-offset: 30px;
	--sk-back-to-top-size: 46px;
	--sk-floating-gap: 0.75rem;
	--sk-viber-fab-offset-right: 4.25rem;
	position: fixed;
	bottom: 1.25rem;
	z-index: 9989;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sk-shop-fab-size);
	height: var(--sk-shop-fab-size);
	border: 1px solid rgba(26, 20, 16, 0.12);
	border-radius: 50%;
	background: var(--wp--preset--color--sk-cream, #f5ede0);
	color: var(--wp--preset--color--sk-dark, #1a1410);
	box-shadow: 0 0.35rem 1.25rem rgba(26, 20, 16, 0.18);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.sk-shop-fab:hover,
.sk-shop-fab:focus-visible {
	background: var(--wp--preset--color--sk-white, #fafaf7);
	border-color: rgba(26, 20, 16, 0.2);
	color: var(--wp--preset--color--sk-dark, #1a1410);
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1.5rem rgba(26, 20, 16, 0.24);
}

.sk-shop-fab:focus-visible {
	outline: 2px solid var(--wp--preset--color--sk-gold, #c4943e);
	outline-offset: 3px;
}

.sk-shop-fab--left {
	left: 1.25rem;
	right: auto;
}

.sk-shop-fab--right {
	right: 1.25rem;
	left: auto;
}

/* Desktop / tablet: clear back-to-top; shift further left when Viber is also on the right. */
@media (min-width: 481px) {
	body:has(.footer-go-to-top) .sk-shop-fab--right {
		right: calc(
			var(--sk-back-to-top-offset) + var(--sk-back-to-top-size) + var(--sk-floating-gap) +
			var(--sk-shop-fab-size) + var(--sk-floating-gap)
		);
	}

	body:has(.sk-viber-widget--right) .sk-shop-fab--right {
		right: calc(var(--sk-viber-fab-offset-right) + var(--sk-shop-fab-size) + var(--sk-floating-gap));
	}
}

.sk-shop-fab__icon {
	display: block;
	width: 1.625rem;
	height: 1.625rem;
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.sk-shop-fab {
		--sk-shop-fab-size: 3.35rem;
		--sk-viber-fab-size-mobile: 3.35rem;
		bottom: 1rem;
	}

	.sk-shop-fab--left {
		left: 1rem;
	}

	.sk-shop-fab--right {
		right: 1rem;
	}

	/* Viber on the left: clear only the back-to-top stack on the right. */
	body:has(.sk-viber-widget--left) .sk-shop-fab--right {
		bottom: calc(var(--sk-back-to-top-offset) + var(--sk-back-to-top-size) + var(--sk-floating-gap));
	}

	/* Viber on the right: stack above the Viber FAB (which already clears back-to-top). */
	body:has(.sk-viber-widget--right) .sk-shop-fab--right {
		bottom: calc(
			var(--sk-back-to-top-offset) + var(--sk-back-to-top-size) + var(--sk-floating-gap) +
			var(--sk-viber-fab-size-mobile) + var(--sk-floating-gap)
		);
	}
}