/*
 * Styled here rather than borrowed from the theme: `button` means something
 * different in every WooCommerce theme and nothing at all in most block themes,
 * so inheriting produced anything from a correct primary button to unstyled blue
 * text. The custom properties are the seam a merchant restyles through.
 */
.bindl-cta-wrap {
	margin: 0 0 1.25em;
}

.bindl-cta {
	--bindl-cta-bg: var(--wp--preset--color--primary, #1f2937);
	--bindl-cta-fg: var(--wp--preset--color--base, #ffffff);
	--bindl-cta-radius: 8px;

	display: inline-block;
	padding: 0.85em 1.6em;
	border: 0;
	border-radius: var(--bindl-cta-radius);
	background: var(--bindl-cta-bg);
	color: var(--bindl-cta-fg);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.12s ease;
}

.bindl-cta:hover,
.bindl-cta:focus {
	color: var(--bindl-cta-fg);
	text-decoration: none;
	opacity: 0.88;
}

.bindl-cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bindl-price-from {
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.75;
}