.financeworks-monthly {
    display: block;
    margin: .45rem 0;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fw-monthly-text, inherit);
}

.financeworks-button.button {
    margin-top: .45rem;
    margin-bottom: .45rem;
    text-decoration: none;
}

.single-product form.cart .financeworks-button--single,
.single-product form.cart .financeworks-monthly--single {
    margin-left: .65rem;
    vertical-align: middle;
}

.woocommerce ul.products li.product .financeworks-monthly--archive,
.wc-block-grid__product .financeworks-monthly--archive {
    margin-top: .35rem;
    margin-bottom: .5rem;
}

.woocommerce ul.products li.product .financeworks-button--archive,
.wc-block-grid__product .financeworks-button--archive {
    display: inline-block;
}

@media (max-width: 640px) {
    .single-product form.cart .financeworks-button--single,
    .single-product form.cart .financeworks-monthly--single {
        margin-left: 0;
        margin-right: .5rem;
    }
}


/* Theme-compatibility safeguards added in v0.2 */
.financeworks-button.button {
    box-sizing: border-box;
    white-space: nowrap;
}
.single-product form.cart .financeworks-button--single {
    width: auto;
    max-width: max-content;
}


/* v0.3: reliable button presentation across WooCommerce themes */
.financeworks-button.button,
a.financeworks-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: max-content !important;
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	cursor: pointer;
}

/* Fallback presentation if a theme does not style generic WooCommerce .button links. */
.financeworks-button--inherit {
	min-height: 2.6em;
	padding: .65em 1.15em;
	border: 0;
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.2;
}

/* Price-first layout for archive cards when monthly messaging is appended to price HTML. */
.woocommerce ul.products li.product .price .financeworks-monthly--archive,
.wc-block-grid__product .price .financeworks-monthly--archive,
.wc-block-components-product-price .financeworks-monthly--archive {
	display: block !important;
	margin-top: .35rem !important;
	margin-bottom: 0 !important;
}

/* Keep the product form row tidy when Finance Available is beside Add to basket. */
.single-product form.cart .financeworks-button--single {
	align-self: center;
}


/* v0.4: Shop/Category Finance button can sit beside Add to basket */
.financeworks-archive-actions {
	display: flex !important;
	align-items: center !important;
	gap: .65rem !important;
	flex-wrap: wrap !important;
	margin-top: .45rem !important;
	margin-bottom: .45rem !important;
}

.financeworks-archive-actions > .button,
.financeworks-archive-actions > .financeworks-button {
	margin: 0 !important;
	width: auto !important;
	max-width: max-content !important;
	flex: 0 0 auto !important;
}

/* Keep Finance Available looking like a button above/below the cart too */
.financeworks-button--single.financeworks-button-position--above_cart,
.financeworks-button--single.financeworks-button-position--below_cart {
	display: inline-flex !important;
	width: auto !important;
	max-width: max-content !important;
	margin-left: 0 !important;
}

/* Cleaner spacing when the monthly figure sits beside Add to basket */
.single-product form.cart .financeworks-monthly--single {
	margin-left: .75rem !important;
	margin-right: .35rem !important;
	white-space: nowrap;
}


/* v0.5: exact side-by-side alignment and interactive-state mirroring */
.financeworks-archive-actions {
	align-items: center !important;
}

.financeworks-archive-actions > .button,
.financeworks-archive-actions > .financeworks-button {
	align-self: center !important;
	vertical-align: middle !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.financeworks-button--inherit {
	transition: inherit;
}


/* v0.6: exact same-row alignment and native theme hover behaviour */
.financeworks-archive-actions {
	display: flex !important;
	align-items: flex-start !important;
	gap: .65rem !important;
	flex-wrap: wrap !important;
	margin-top: .45rem !important;
	margin-bottom: .45rem !important;
}

.financeworks-archive-actions > .button,
.financeworks-archive-actions > .financeworks-button {
	align-self: flex-start !important;
	vertical-align: top !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.financeworks-button--inherit {
	text-decoration: none !important;
}

/*
 * Do not force a FinanceWorks-specific background/hover colour when the
 * retailer has chosen "Use the store/theme button style". v0.6 gives the
 * Finance Available link the retailer's own visual button classes instead.
 */