/* (sc-7260) Product Checkout block: front-end + shared showcase styling.
 * The form region is server-rendered with the `hidden` attribute and revealed by view.js
 * (adds .is-revealed). Reveal style is keyed off [data-pp-reveal]. */

.pp-product-checkout__showcase {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.pp-product-checkout__image {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.pp-product-checkout__headline {
	margin: 0;
}

.pp-product-checkout__desc {
	margin: 0;
}

.pp-product-checkout__price {
	font-weight: 600;
	font-size: 1.25em;
}

.pp-product-checkout__buy {
	display: inline-block;
	cursor: pointer;
	padding: 12px 28px;
	border: 0;
	border-radius: 6px;
	background: #470fc6;
	color: #fff;
	font-size: 1em;
	line-height: 1.2;
}

.pp-product-checkout__buy:hover {
	filter: brightness( 1.05 );
}

.pp-product-checkout__form[hidden] {
	display: none;
}

.pp-product-checkout.is-revealed .pp-product-checkout__form {
	animation: pp-product-checkout-reveal 0.28s ease;
}

@keyframes pp-product-checkout-reveal {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* morph / replace collapse the showcase once the form is revealed; slide keeps it above. */
.pp-product-checkout[data-pp-reveal="morph"].is-revealed .pp-product-checkout__showcase,
.pp-product-checkout[data-pp-reveal="replace"].is-revealed .pp-product-checkout__showcase {
	display: none;
}

/* replace is the "instant swap" the editor promises: no reveal animation. */
.pp-product-checkout[data-pp-reveal="replace"].is-revealed .pp-product-checkout__form {
	animation: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.pp-product-checkout.is-revealed .pp-product-checkout__form {
		animation: none;
	}
}