.ostore-landing-site {
	width: 100%;
}

.ostore-landing-main {
	display: block;
	width: 100%;
}

.ostore-landing-page {
	scroll-behavior: smooth;
	width: 100%;
}

.ostore-landing-images {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ostore-landing-image {
	display: block;
	width: 100%;
	height: auto;
}

.ostore-landing-checkout {
	scroll-margin-top: var( --space-fluid-lg, 32px );
	padding: var( --space-fluid-md, 24px ) var( --space-md, 16px );
}

@media (min-width: 768px) {
	.ostore-landing-page {
		max-width: 720px;
		margin: 0 auto;
	}
}

/* Floating CTA button — small, pulsing, hides once the checkout form is on screen */
.ostore-landing-float-btn {
	position: fixed;
	left: 50%;
	bottom: var( --space-sm, 12px );
	transform: translateX(-50%);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	animation: ostore-landing-float-pulse 2s ease-in-out infinite;
}

.ostore-landing-float-btn.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(16px);
}

/* The global `a:hover { color: var(--color-primary) }` in critical-base.css
   outranks the base colour above — a type selector plus a pseudo-class beats a
   single class — so hovering repainted the white label in the brand colour, on
   a brand-coloured background, and the text disappeared. */
.ostore-landing-float-btn:hover,
.ostore-landing-float-btn:focus {
	color: #fff;
}

@keyframes ostore-landing-float-pulse {
	0%, 100% {
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.35);
	}
	50% {
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 6px rgba(255, 255, 255, 0);
	}
}

@media (min-width: 783px) {
	.ostore-landing-float-btn {
		left: auto;
		right: var( --space-md, 16px );
		transform: none;
	}

	.ostore-landing-float-btn.is-hidden {
		transform: translateY(16px);
	}
}