/**
 * The product page buy bar.
 *
 * Fixed to the bottom, because that is where a thumb rests on a phone and where
 * the eye returns on a desktop. It carries one action and nothing else: the bar
 * only appears after the customer has scrolled past the image, the title and the
 * price, so repeating them buys nothing.
 *
 * Colour follows the page it belongs to. The product page's own Add to cart is
 * the theme secondary, so this button matches it: the teal primary is reserved
 * for the cart drawer's checkout, which is a different decision.
 */
.pearlory-buybar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	/* No panel behind the button. The bar is the button and nothing else, so the
	   page keeps scrolling visibly underneath it, as it does in the reference. */
	background: transparent;
	border-top: 0;
	pointer-events: none;
	/* clears the home indicator on a modern iPhone */
	padding-bottom: env(safe-area-inset-bottom, 0);
	transform: translateY(100%);
	transition: transform 0.22s ease;
}

.pearlory-buybar.is-visible {
	transform: translateY(0);
}

/* no animation for anyone who has asked the system for less motion */
@media (prefers-reduced-motion: reduce) {
	.pearlory-buybar {
		transition: none;
	}
}

.pearlory-buybar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 10px 16px;
}

/* The button is the only child of the bar, so it takes the whole width rather
   than sitting at one end of it. */
.pearlory-buybar__button {
	/* the bar sets pointer-events: none so the page behind it stays usable
	   either side of the button; the button itself takes them back */
	pointer-events: auto;
	flex: 1 1 auto;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 22px;
	background: var(--fs-color-secondary, #161616);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	text-decoration: none;
}

.pearlory-buybar__button:hover,
.pearlory-buybar__button:focus {
	background: #000;
	color: #fff;
}

/* the spinner belongs on the button, centred, with the label hidden under it */
.pearlory-buybar__button.loading > * {
	visibility: hidden;
}

.pearlory-buybar__button.loading::after {
	top: 50%;
	right: 50%;
	margin: -8px -8px 0 0;
	color: #fff;
}

/* WooCommerce appends a View cart link after a successful add, which would
   stretch the bar. The header cart already reports the change. */
.pearlory-buybar .added_to_cart {
	display: none;
}

@media screen and (max-width: 420px) {
	.pearlory-buybar__inner {
		gap: 10px;
		padding: 8px 12px;
	}

	.pearlory-buybar__button {
		padding: 12px 16px;
	}
}