/**
 * `.wh-recall` — "Open in de bouwer" repeat-order block.
 *
 * Rendered by the plugin's `Customer_Emails::render_buy_again_block()`
 * hook on `woocommerce_view_order` (priority 11). Lives directly under
 * the order details table on the My Account view-order screen.
 *
 * Editorial card pattern: tokens-only, no raw hex / px / rem in values
 * (audit-clean per Vault/01 Brand & Design System/Design Tokens Policy).
 */

.wh-recall {
	margin: var(--s-7, var(--s-6)) 0;
	padding: var(--s-6, var(--s-5));
	border: 1px solid var(--border);
	background: var(--surface);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5, var(--s-20));
}
@media (min-width: 640px) {
	.wh-recall {
		grid-template-columns: 1fr auto;
		align-items: end;
		padding: var(--s-7, var(--s-6));
	}
}

/* ---------- Header ---------- */
.wh-recall__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.wh-recall__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.wh-recall__title {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--ink);
	margin: 0;
}
.wh-recall__copy {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
	max-width: 52ch;
}

/* ---------- Actions ---------- */
.wh-recall__actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
}
.wh-recall__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: var(--accent);
	color: var(--on-ink);
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: var(--s-3) 22px;
	font: 500 14px/1 var(--font-body);
	letter-spacing: 0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s var(--ease), border-color .15s var(--ease);
}
.wh-recall__cta:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
}
.wh-recall__cta:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.wh-recall__cta:disabled {
	opacity: .55;
	cursor: progress;
}
.wh-recall__cta-icon {
	color: currentColor;
	flex-shrink: 0;
}

/* ---------- Status microcopy ---------- */
.wh-recall__status {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-muted);
	min-width: 0;
}
.wh-recall__status--error {
	color: var(--err, var(--accent-ink));
}