/* Pay over time at checkout (inc/financing-bnpl.php): the /financing/ section and the store product note.
   Loaded only on /financing/ and /shop/ pages. Uses the theme's tokens from style.css. */

.mmc-bnpl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.mmc-bnpl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.5rem 1.5rem 1.35rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-top: 4px solid var(--red);
	border-radius: var(--radius-lg);
	min-width: 0;
}

.mmc-bnpl-head { margin-bottom: .25rem; }
.mmc-bnpl-head h3 { margin: 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; color: var(--ink); }
.mmc-bnpl-tag { margin: .2rem 0 0; font-family: var(--sans); font-size: var(--t-small); font-weight: 700; color: var(--red); }

.mmc-bnpl-card h4 {
	margin: .9rem 0 .2rem;
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink);
}

/* landing.css reorders the hero on phones (flex order); keep the note with the ship line under Buy now. */
.mmc-pl-text > .mmc-bnpl-line { order: 5; }

.mmc-bnpl-card p,
.mmc-bnpl-card li { font-size: var(--t-small); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.mmc-bnpl-card p { margin: 0; }

.mmc-bnpl-steps,
.mmc-bnpl-features { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

.mmc-bnpl-range {
	margin-top: .9rem !important;
	padding: .65rem .8rem;
	background: var(--tint, #F7EFEE);
	border-radius: var(--radius);
	font-weight: 600;
}

.mmc-bnpl-fine {
	margin-top: .6rem !important;
	font-size: .75rem !important;
	line-height: 1.45 !important;
	color: var(--ink-soft, #5A4F4C) !important;
}

.mmc-bnpl-more { margin-top: auto !important; padding-top: 1rem; }

/* Comparison table. Desktop: a normal table. Phone: each feature becomes a block with a line per provider. */
.mmc-bnpl-compare { margin-top: 2.5rem; }
.mmc-bnpl-compare h3 { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.5rem; text-align: center; color: var(--ink); }

.mmc-bnpl-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	overflow: hidden;
	font-size: var(--t-small);
	table-layout: fixed;
}

.mmc-bnpl-table th,
.mmc-bnpl-table td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); color: var(--ink); overflow-wrap: anywhere; }
.mmc-bnpl-table thead th { background: var(--red); color: var(--paper); font-family: var(--sans); font-weight: 700; }
.mmc-bnpl-table tbody th { width: 22%; font-family: var(--sans); font-weight: 700; background: var(--tint, #F7EFEE); }
.mmc-bnpl-table tbody tr:last-child th,
.mmc-bnpl-table tbody tr:last-child td { border-bottom: 0; }

.mmc-bnpl-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--ink-soft, #5A4F4C); text-align: center; }
.mmc-bnpl-cta { margin-top: 1.5rem; text-align: center; }

@media (max-width: 720px) {
	.mmc-bnpl-table,
	.mmc-bnpl-table tbody,
	.mmc-bnpl-table tr,
	.mmc-bnpl-table th,
	.mmc-bnpl-table td { display: block; width: 100%; }
	.mmc-bnpl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mmc-bnpl-table tbody th { width: 100%; border-bottom: 0; }
	.mmc-bnpl-table td { padding-top: .5rem; padding-bottom: .5rem; }
	.mmc-bnpl-table td::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: var(--red);
	}
	.mmc-bnpl-card { padding: 1.25rem 1.1rem 1.1rem; }
}

/* Store product page: the note under the ship line, beside Buy now. */
.mmc-bnpl-line {
	margin: .4rem 0 0;
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--ink);
}

/* "Ways to pay at checkout": one line under the comparison table. */
.mmc-bnpl-ways {
	max-width: 62ch;
	margin: 1.75rem auto 0;
	padding: .85rem 1rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-size: var(--t-small);
	line-height: 1.55;
	text-align: center;
	color: var(--ink);
	overflow-wrap: anywhere;
}