/* CODFlow Pro — COD form. Mobile-first; everything scoped under .cf-wrap. */
.cf-wrap {
	--cf-accent: #0f766e;
	--cf-text: #1f2328;
	--cf-muted: #59636e;
	--cf-border: #d0d7de;
	--cf-bg: #ffffff;
	--cf-soft: #f6f8fa;
	--cf-danger: #b42318;
	--cf-radius: 10px;
	--cf-field-h: 48px;
	/* Per-form design tokens (6B); a form's inline style overrides these defaults. */
	--cf-btn-bg: #0f766e;
	--cf-btn-text: #ffffff;
	--cf-btn-radius: 10px;
	--cf-gap: 12px;
	color: var(--cf-text);
	font-size: var(--cf-font-size, 16px);
	line-height: 1.4;
	margin: 16px 0;
	clear: both;
}
.cf-wrap *,
.cf-wrap *::before,
.cf-wrap *::after { box-sizing: border-box; }
/* The hidden attribute must win over component display rules (e.g. .cf-confirm is a grid). */
.cf-wrap [hidden] { display: none !important; }

.cf-form {
	background: var(--cf-bg);
	border: var(--cf-bw, 1px) solid var(--cf-border);
	border-radius: var(--cf-radius);
	padding: var(--cf-pad, 16px);
	display: grid;
	gap: var(--cf-gap);
	max-width: var(--cf-w, 560px);
}
.cf-wrap .cf-title,
.cf-wrap .cf-success-title { font-family: inherit; font-weight: 700; letter-spacing: normal; text-transform: none; }
.cf-title { font-size: 1.125rem; margin: 0; line-height: 1.3; }
.cf-dialog .cf-title { padding-right: 44px; }
.cf-subtitle { margin: -4px 0 0; color: var(--cf-muted); font-size: .9375rem; }

.cf-product { display: flex; gap: 12px; align-items: center; }
.cf-product-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.cf-product-info { display: grid; gap: 2px; min-width: 0; }
.cf-product-name { font-weight: 600; overflow-wrap: anywhere; }
.cf-product-price { color: var(--cf-muted); font-size: .9375rem; }

.cf-field { display: grid; gap: 4px; }
.cf-field label { font-weight: 600; font-size: .9375rem; }
.cf-req { color: var(--cf-danger); }
.cf-opt { color: var(--cf-muted); font-weight: 400; }
.cf-field input:not([type="checkbox"]):not([type="radio"]),
.cf-field select,
.cf-field textarea {
	width: 100%;
	min-height: var(--cf-field-h);
	padding: 10px 12px;
	font-size: 16px; /* Prevents iOS zoom on focus. */
	border: var(--cf-bw, 1px) solid var(--cf-border);
	border-radius: min(var(--cf-radius), 12px);
	background: var(--cf-field-bg, var(--cf-bg));
	color: var(--cf-text);
}
.cf-help { margin: 0; color: var(--cf-muted); font-size: .875rem; }
.cf-choices { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.cf-choices legend { font-weight: 600; font-size: .9375rem; padding: 0; margin-bottom: 4px; }
.cf-choice,
.cf-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; cursor: pointer; }
.cf-choice input,
.cf-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--cf-accent); }
.cf-field .cf-check { font-weight: 400; }
.cf-field textarea { min-height: 72px; resize: vertical; }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus { outline: 2px solid var(--cf-accent); outline-offset: 1px; border-color: var(--cf-accent); }
.cf-field [aria-invalid="true"] { border-color: var(--cf-danger); }
.cf-err { color: var(--cf-danger); font-size: .875rem; margin: 0; min-height: 0; }
.cf-err:empty { display: none; }

.cf-stepper { display: flex; align-items: stretch; max-width: 180px; }
.cf-stepper input { text-align: center; border-radius: 0; -moz-appearance: textfield; }
.cf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cf-step { width: var(--cf-field-h); border: 1px solid var(--cf-border); background: var(--cf-soft); font-size: 1.25rem; cursor: pointer; }
.cf-step:first-child { border-radius: 8px 0 0 8px; }
.cf-step:last-child { border-radius: 0 8px 8px 0; }

.cf-offers { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.cf-offers legend { font-weight: 600; font-size: .9375rem; margin-bottom: 4px; padding: 0; }
.cf-offer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px;
	padding-inline-start: 44px; /* Phase 24: room for the radio button on the start side (left in LTR, right in RTL). */
	border: 2px solid var(--cf-border);
	border-radius: var(--cf-radius);
	cursor: pointer;
	min-height: 56px;
	background: var(--cf-bg);
}
.cf-offer input { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; margin: 0; accent-color: var(--cf-accent); }
.cf-offer.is-selected { border-color: var(--cf-accent); background: color-mix(in srgb, var(--cf-accent) 6%, var(--cf-bg)); }
.cf-offer--disabled { opacity: .5; cursor: not-allowed; }
.cf-offer-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-offer-label { font-weight: 700; }
.cf-badge { background: var(--cf-accent); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.cf-offer--best_value .cf-badge { background: #b54708; }
.cf-offer-price { display: grid; justify-items: end; text-align: end; }
.cf-offer-regular { color: var(--cf-muted); text-decoration: line-through; font-size: .8125rem; }
.cf-offer-total { font-weight: 700; }
.cf-offer-save { color: #067647; font-size: .8125rem; font-weight: 600; }

.cf-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Phase 24: off-screen on the start side; a physical left offset made right-to-left pages scroll 10,000 px sideways. */

.cf-summary { background: var(--cf-soft); border-radius: 8px; padding: 12px; }
.cf-rows { margin: 0; display: grid; gap: 6px; }
.cf-row { display: flex; justify-content: space-between; gap: 12px; }
.cf-row dt,
.cf-row dd { margin: 0; }
.cf-row--discount dd { color: #067647; }
.cf-row--total { border-top: 1px solid var(--cf-border); padding-top: 8px; font-weight: 700; font-size: 1.0625rem; }
.cf-hint { margin: 6px 0 0; color: var(--cf-muted); font-size: .875rem; }

.cf-alert { border-radius: 8px; padding: 10px 12px; background: #fef3f2; color: var(--cf-danger); font-size: .9375rem; }
.cf-alert--info { background: #eff8ff; color: #175cd3; }
.cf-confirm { border: 2px solid #f79009; border-radius: var(--cf-radius); padding: 12px; background: #fffaeb; display: grid; gap: 10px; }
.cf-confirm-text { margin: 0; font-weight: 600; }
.cf-confirm-actions { display: grid; gap: 8px; }

.cf-submit,
.cf-open,
.cf-btn {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: var(--cf-btn-radius);
	background: var(--cf-btn-bg);
	color: var(--cf-btn-text);
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
	padding: 12px 16px;
}
.cf-btn--ghost { background: transparent; color: var(--cf-text); border: 1px solid var(--cf-border); }
.cf-submit:disabled { opacity: .7; cursor: progress; }
.cf-submit:focus-visible,
.cf-open:focus-visible,
.cf-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--cf-accent) 45%, #fff); outline-offset: 2px; }
.cf-trust { margin: 0; text-align: center; color: var(--cf-muted); font-size: .875rem; }

.cf-success { text-align: center; padding: 24px 16px; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); max-width: var(--cf-w, 560px); background: var(--cf-bg); }
.cf-success:focus { outline: none; }
.cf-success-icon { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; background: #dcfae6; color: #067647; font-size: 28px; line-height: 56px; font-weight: 700; }
.cf-success-title { margin: 0 0 8px; font-size: 1.25rem; }
.cf-success p { margin: 4px 0; }
.cf-success-order { font-weight: 700; }
.cf-success-notice { background: #fffaeb; border-radius: 8px; padding: 8px; }

/* Popup and drawer. */
.cf-dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overscroll-behavior: contain; }
.cf-dialog::backdrop { background: rgba(16, 24, 40, .55); }
html.cf-lock { overflow: hidden; }
.cf-dialog .cf-form,
.cf-dialog .cf-success { border: 0; }
.cf-dialog--popup { width: min(var(--cf-w, 560px), calc(100vw - 24px)); border-radius: var(--cf-radius); max-height: calc(100vh - 24px); overflow: auto; }
.cf-dialog--drawer {
	width: 100vw;
	max-height: 92vh;
	margin: auto 0 0;
	border-radius: 16px 16px 0 0;
	overflow: auto;
	padding-bottom: env(safe-area-inset-bottom);
}
.cf-dialog--drawer[open] { animation: cf-up .22s ease-out; }
.cf-dialog--drawer .cf-form { max-width: none; border-radius: 16px 16px 0 0; }
@keyframes cf-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.cf-close { position: sticky; top: 8px; display: block; margin: 8px 8px -48px auto; z-index: 2; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: var(--cf-soft); color: var(--cf-text); font-size: 24px; line-height: 1; cursor: pointer; }

@media (max-width: 767px) {
	.cf-open--sticky {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		width: auto;
		z-index: 9990;
		box-shadow: 0 8px 24px rgba(16, 24, 40, .25);
	}
}
@media (min-width: 768px) {
	.cf-dialog--drawer { width: min(var(--cf-w, 560px), 100vw); margin: auto; border-radius: var(--cf-radius); }
}
@media (prefers-reduced-motion: reduce) {
	.cf-dialog--drawer[open] { animation: none; }
}
.cf-reload { margin-left: 4px; min-height: 36px; padding: 4px 10px; border: 1px solid currentColor; border-radius: 6px; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
/* 6E: abandoned-order reminder opt-in / notice. */
.cf-consent { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; color: var(--cf-muted); font-size: .875rem; line-height: 1.4; }
.cf-consent input { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; }
.cf-consent--notice { display: block; }
/* Phase 13: payment choice (shown only when online payment is offered). */
.cf-payment { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.cf-payment legend { font-weight: 600; font-size: .9375rem; margin-bottom: 4px; padding: 0; }
.cf-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border: 2px solid var(--cf-border); border-radius: var(--cf-radius); background: var(--cf-bg); cursor: pointer; min-height: 48px; }
.cf-pay input { width: 20px; height: 20px; margin: 0; accent-color: var(--cf-accent); }
.cf-pay:has(input:checked) { border-color: var(--cf-accent); }
.cf-pay:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.cf-pay-total { color: var(--cf-muted); }
.cf-pay-saving { color: #067647; }
/* Phase 14: two fields side by side from 480px (phones stay one column), soft shadow. */
@media (min-width: 480px) {
	.cf-wrap .cf-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cf-wrap .cf-form > * { grid-column: 1 / -1; }
	.cf-wrap .cf-form > .cf-w-half { grid-column: auto; }
}
.cf-wrap.cf-shadow .cf-form { box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08); }

/* Phase 17: order bumps, bundles and free gifts (scoped to the form). */
.cf-wrap .cf-addons { border: 0; margin: 12px 0; padding: 0; }
.cf-wrap .cf-addon { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 6px 0; border: 1px dashed var(--cf-accent, #2271b1); border-radius: var(--cf-radius, 8px); cursor: pointer; }
.cf-wrap .cf-addon input { margin-top: 3px; flex: 0 0 auto; }
.cf-wrap .cf-addon-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-wrap .cf-addon-title { font-weight: 600; }
.cf-wrap .cf-addon-price s { opacity: .6; margin-left: 4px; }
.cf-wrap .cf-addon-items { font-size: .9em; color: var(--cf-muted, inherit); overflow-wrap: anywhere; }
.cf-wrap .cf-addon-gift { margin: 6px 0; padding: 8px 12px; border-radius: var(--cf-radius, 8px); background: var(--cf-soft, rgba(0, 0, 0, .04)); }

/* Phase 18: pre-purchase upsell step. */
.cf-wrap .cf-upsell { margin: 12px 0; padding: 14px; border: 2px solid var(--cf-accent); border-radius: 10px; background: var(--cf-bg); }
.cf-wrap .cf-upsell-kicker { margin: 0 0 4px; font-size: 13px; opacity: .8; }
.cf-wrap .cf-upsell-title { margin: 0 0 6px; font-weight: 700; font-size: 17px; }
.cf-wrap .cf-upsell-items { margin: 0 0 8px; }
.cf-wrap .cf-upsell-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cf-wrap .cf-upsell-actions button { flex: 1 1 200px; min-height: 44px; padding: 10px 14px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.cf-wrap .cf-upsell-yes { background: var(--cf-accent); color: #fff; border: 0; }
.cf-wrap .cf-upsell-no { background: transparent; color: inherit; border: 1px solid currentColor; }

/* Phase 20: Partial COD breakdown. */
.cf-wrap .cf-deposit { margin: 10px 0 0; padding: 10px 12px; border: 2px solid var(--cf-accent); border-radius: var(--cf-radius, 8px); background: var(--cf-bg); }
.cf-wrap .cf-deposit-title { margin: 0 0 6px; font-weight: 700; }
.cf-wrap .cf-deposit .cf-row--pay_now dd { font-weight: 700; }

/* Milestone 4: content blocks (heading, text, image) and order-button options. Scoped to the form. */
.cf-wrap .cf-block { margin: 0; min-width: 0; }
.cf-wrap .cf-block-heading { font-family: inherit; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; }
.cf-wrap .cf-block-heading.cf-size-large { font-size: 1.3125rem; }
.cf-wrap .cf-block-heading.cf-size-medium { font-size: 1.125rem; }
.cf-wrap .cf-block-heading.cf-size-small { font-size: .9375rem; }
.cf-wrap .cf-block-text { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.cf-wrap .cf-block-text.cf-size-small { font-size: .875rem; color: var(--cf-muted); }
.cf-wrap .cf-align-start { text-align: start; }
.cf-wrap .cf-align-center { text-align: center; }
.cf-wrap .cf-align-end { text-align: end; }
.cf-wrap .cf-block-image img { display: block; max-width: 100%; height: auto; border-radius: var(--cf-radius); }
.cf-wrap .cf-img-full img { width: 100%; }
.cf-wrap .cf-img-medium { max-width: 60%; }
.cf-wrap .cf-img-small { max-width: 30%; }
.cf-wrap .cf-block-image.cf-align-center { margin-inline: auto; }
.cf-wrap .cf-block-image.cf-align-end { margin-inline-start: auto; }

.cf-wrap .cf-submit { min-height: var(--cf-btn-h, 52px); }
.cf-wrap.cf-btn-auto .cf-submit { width: auto; justify-self: center; padding-inline: 32px; }
.cf-wrap.cf-btn-auto.cf-btn-align-start .cf-submit { justify-self: start; }
.cf-wrap.cf-btn-auto.cf-btn-align-end .cf-submit { justify-self: end; }
.cf-wrap.cf-btn-outline .cf-submit { background: transparent; color: var(--cf-btn-bg); box-shadow: inset 0 0 0 2px var(--cf-btn-bg); }

/* Milestone 5: typography, shadows and extra styling options (all optional; scoped to the form). */
.cf-wrap.cf-font-system { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.cf-wrap.cf-font-humanist { font-family: "Avenir Next", Avenir, "Segoe UI", "Gill Sans", Candara, "Trebuchet MS", sans-serif; }
.cf-wrap.cf-font-serif { font-family: Georgia, "Times New Roman", Times, serif; }
.cf-wrap[class*="cf-font-"] :is(input, select, textarea, button) { font-family: inherit; }
.cf-wrap.cf-h-small .cf-title { font-size: 1rem; }
.cf-wrap.cf-h-large .cf-title { font-size: 1.375rem; }
.cf-wrap.cf-lw-normal :is(.cf-field label, .cf-choices legend, .cf-offers legend) { font-weight: 400; }
.cf-wrap.cf-lw-bold :is(.cf-field label, .cf-choices legend, .cf-offers legend) { font-weight: 700; }
.cf-wrap.cf-shadow.cf-shadow-md .cf-form { box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 14px 32px rgba(16, 24, 40, .14); }
.cf-wrap.cf-shadow.cf-shadow-lg .cf-form { box-shadow: 0 4px 8px rgba(16, 24, 40, .12), 0 24px 48px rgba(16, 24, 40, .22); }
/* Milestone 5: on narrow screens a larger or bolder style must not break prices across lines. */
.cf-wrap .cf-offer-price { flex: none; }
.cf-wrap .cf-offer-total,
.cf-wrap .cf-offer-regular { white-space: nowrap; }
.cf-wrap .cf-offer-main { min-width: 0; }

/* Milestone 6: Offer Designer — card layouts, description and per-offer colour (presentation only). */
.cf-wrap .cf-offer { --cf-o: var(--cf-offer-accent, var(--cf-accent)); }
.cf-wrap .cf-offer--accent.is-selected,
.cf-wrap .cf-offer--accent:has(input:checked) { border-color: var(--cf-o); background: color-mix(in srgb, var(--cf-o) 8%, var(--cf-bg)); }
.cf-wrap .cf-offer--accent input { accent-color: var(--cf-o); }
.cf-wrap .cf-offer--accent .cf-badge { background: var(--cf-o); }
.cf-wrap .cf-offer-desc { flex-basis: 100%; font-size: .8125rem; line-height: 1.35; color: var(--cf-muted); font-weight: 400; }
.cf-wrap .cf-offers--compact { gap: 6px; }
.cf-wrap .cf-offers--compact .cf-offer { min-height: 44px; padding: 8px 12px; padding-inline-start: 40px; }
.cf-wrap .cf-offers--grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cf-wrap .cf-offers--grid legend { grid-column: 1 / -1; }
.cf-wrap .cf-offers--grid .cf-offer { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 40px 12px 12px; padding-inline-start: 12px; }
.cf-wrap .cf-offers--grid .cf-offer input { top: 14px; transform: none; }
.cf-wrap .cf-offers--grid .cf-offer-price { justify-items: start; text-align: start; }
/* The default offer reads as selected even before the script runs (and in the builder's script-free preview). */
.cf-wrap .cf-offer:has(input:checked) { border-color: var(--cf-o); background: color-mix(in srgb, var(--cf-o) 6%, var(--cf-bg)); }
/* A long badge text may wrap on narrow cards without turning into a tall pill. */
.cf-wrap .cf-offers--grid .cf-badge { border-radius: 8px; line-height: 1.25; padding: 2px 8px; }
.cf-wrap .cf-offer-main .cf-badge { max-width: 100%; }

/* Milestone 6 polish: a clearer hierarchy for the product, the offer cards and the order summary.
   Everything keys off the form's own design variables, so every preset and custom style still applies. */
.cf-wrap .cf-product { padding: 12px; background: var(--cf-soft); border-radius: var(--cf-radius); gap: 14px; align-items: center; }
.cf-wrap .cf-product-img { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--cf-border); background: var(--cf-bg); object-fit: cover; }
.cf-wrap .cf-product-name { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.cf-wrap .cf-product-price { font-size: 1rem; font-weight: 600; color: var(--cf-text); }

.cf-wrap .cf-offers { gap: 14px; }
.cf-wrap .cf-offers legend { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.cf-wrap .cf-offer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	min-height: 72px;
	padding: 14px 14px 14px 46px;
	padding-inline-start: 46px;
}
.cf-wrap .cf-offer-main { display: grid; gap: 3px; min-width: 0; justify-items: start; align-content: center; }
.cf-wrap .cf-offer-label { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
/* The badge sits on the card's top edge: it never adds height or crowds the title and price. */
.cf-wrap .cf-offer .cf-badge { position: absolute; top: -11px; inset-inline-end: 12px; font-size: .6875rem; line-height: 1.2; padding: 3px 9px; box-shadow: 0 0 0 2px var(--cf-bg); max-width: calc(100% - 24px); }
.cf-wrap .cf-offer-desc { font-size: .8125rem; line-height: 1.35; }
.cf-wrap .cf-offer-price { display: grid; justify-items: end; text-align: end; gap: 1px; }
.cf-wrap .cf-offer-total { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.cf-wrap .cf-offer:has(input:checked) { box-shadow: 0 2px 10px color-mix(in srgb, var(--cf-o) 20%, transparent); }

.cf-wrap .cf-offers--compact .cf-offer { min-height: 56px; padding-block: 10px; }
.cf-wrap .cf-offers--grid .cf-offer { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 0; padding: 44px 12px 12px; padding-inline-start: 12px; }
.cf-wrap .cf-offers--grid .cf-offer-main { flex: 1 1 auto; align-content: start; }
.cf-wrap .cf-offers--grid .cf-offer-price { justify-items: start; text-align: start; margin-top: 8px; }
.cf-wrap .cf-offers--grid .cf-offer .cf-badge { inset-inline-end: 8px; }

@media (max-width: 400px) {
	.cf-wrap .cf-offer { padding-inline-end: 12px; column-gap: 8px; }
	.cf-wrap .cf-offer-label { font-size: .9375rem; }
	.cf-wrap .cf-offer-total { font-size: 1rem; }
}

.cf-wrap .cf-summary { padding: 14px; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); }
.cf-wrap .cf-rows { gap: 8px; }
.cf-wrap .cf-row dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-wrap .cf-row--total { margin-top: 4px; padding-top: 10px; font-size: 1.125rem; }
.cf-wrap .cf-row--total dd { font-weight: 800; }
/* Equal card heights in the list layout; the compact layout puts the price on one line. */
.cf-wrap .cf-offers:not(.cf-offers--grid):not(.cf-offers--compact) .cf-offer { min-height: 92px; }
.cf-wrap .cf-offers--compact .cf-offer-price { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 8px; }
/* Two grid cards fit side by side on a phone; rows share one height. */
.cf-wrap .cf-offers--grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); align-items: stretch; }
.cf-wrap .cf-offers--grid .cf-offer { min-height: 150px; }
.cf-wrap .cf-offers--grid .cf-offer-label { font-size: .9375rem; }
/* A long badge text is cut with an ellipsis instead of growing into the radio button or the title. */
.cf-wrap .cf-offer .cf-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); }
.cf-wrap .cf-offers--grid .cf-offer .cf-badge { max-width: calc(100% - 52px); }
.cf-wrap .cf-offers--grid .cf-offer .cf-badge { max-width: calc(100% - 16px); }
/* Compact: original and offer price side by side, the saving under them; the title keeps its width. */
.cf-wrap .cf-offers--compact .cf-offer { grid-template-columns: minmax(84px, 1fr) auto; }
.cf-wrap .cf-offers--compact .cf-offer-price { display: grid; grid-template-columns: auto auto; justify-content: end; justify-items: end; align-items: baseline; column-gap: 8px; row-gap: 0; }
.cf-wrap .cf-offers--compact .cf-offer-save { grid-column: 1 / -1; }
.cf-wrap .cf-offers--compact .cf-offer-desc { display: none; }
.cf-wrap .cf-offers--compact .cf-offer { min-height: 66px; }