/*
 * Huntley Ford — incentives browser (2.73.0). Loaded on pages that carry
 * hf/offer-finder or hf/vehicle-offers (inc/offer-browser.php). Every rule is
 * scoped to an .hfp-ofx* class, so the /specials/new/ list keeps its own
 * styles. Prefixed with .hfp to sit above the base `.hfp ul` / `.hfp h2` rules.
 */

/* ------------------------------------------------------------ finder (hero) */

/* 2.73.1: no dropdown — the hero carries the month in four facts, on a
   frosted panel so the band has a body under its heading. */
.hfp .hfp-ofx-finder { max-width: 900px; }
.hfp .hfp-ofx-finder__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 18px 6px;
	list-style: none;
	background: rgb(var(--hf-paper-rgb) / .07);
	border: 1px solid rgb(var(--hf-paper-rgb) / .16);
	border-radius: 14px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.hfp .hfp-ofx-finder__facts li { display: flex; }
.hfp .hfp-ofx-finder__facts li + li { border-left: 1px solid rgb(var(--hf-paper-rgb) / .18); }
.hfp .hfp-ofx-finder__facts a,
.hfp .hfp-ofx-finder__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 4px 18px;
	color: var(--hf-onDark-ink);
	text-decoration: none;
	border-radius: 8px;
}
.hfp .hfp-ofx-finder__facts strong { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--hf-paper); }
.hfp .hfp-ofx-finder__facts span span,
.hfp .hfp-ofx-finder__facts a > span { font-size: 13.5px; line-height: 1.4; color: var(--hf-onDark-muted); }
.hfp .hfp-ofx-nowrap { white-space: nowrap; }
.hfp .hfp-ofx-finder__facts a:hover > span,
.hfp .hfp-ofx-finder__facts a:focus-visible > span { text-decoration: underline; text-underline-offset: 3px; color: var(--hf-paper); }
.hfp .hfp-ofx-finder__facts a:focus-visible { outline: 2px solid var(--hf-focus-ring-dark); outline-offset: 2px; }

@media (max-width: 860px) {
	.hfp .hfp-ofx-finder__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; padding: 16px 4px; }
	.hfp .hfp-ofx-finder__facts li:nth-child(odd) { border-left: 0; }
}
@media (max-width: 600px) {
	.hfp .hfp-ofx-finder__facts a,
	.hfp .hfp-ofx-finder__fact { padding: 2px 14px; }
	.hfp .hfp-ofx-finder__facts strong { font-size: 20px; }
}

/* ------------------------------------------------------------ section */

.hfp .hfp-ofx { margin: 0; scroll-margin-top: 96px; }
.hfp .hfp-ofx > h2 { margin: 0 0 8px; }
.hfp .hfp-ofx .hfp-voffers__source { margin-top: var(--hf-sp-8); }
.hfp .hfp-ofx-none {
	margin: 0 0 var(--hf-sp-8);
	padding: 16px 20px;
	line-height: 1.6;
	color: var(--hf-ink);
	background: var(--hf-warn-bg);
	border-left: 3px solid var(--hf-warn);
	border-radius: var(--hf-radius-md);
}

/* ------------------------------------------------------------ showroom (no model chosen) */

/* 2.73.2: Ford's incentives showroom, made more useful — big pictures three
   across, year range and name under them, then the offer figures that page
   makes you click through for. No box at rest; the picture panel is the card. */
.hfp .hfp-ofx-group + .hfp-ofx-group { margin-top: var(--hf-sp-14); }
.hfp .hfp-ofx-group__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 var(--hf-sp-6);
	padding-bottom: var(--hf-sp-3);
	border-bottom: 1px solid var(--hf-line-soft);
	font-size: 26px;
	line-height: 1.25;
}
.hfp .hfp-ofx-group__count { font-size: 14px; font-weight: 400; color: var(--hf-muted); }

.hfp .hfp-ofx-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hfp .hfp-ofx-tiles > li { display: flex; }
.hfp .hfp-ofx-tile {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--hf-ink);
	text-decoration: none;
	border-radius: 18px;
}
.hfp .hfp-ofx-tile:focus-visible { outline: 2px solid var(--hf-focus-ring); outline-offset: 6px; }
.hfp .hfp-ofx-tile__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: radial-gradient(110% 85% at 50% 100%, #e3e8ef 0%, #f2f4f7 55%, #f9fafb 100%);
	border-radius: 18px;
	transition: background-color var(--hf-dur) var(--hf-ease), box-shadow var(--hf-dur) var(--hf-ease);
}
.hfp .hfp-ofx-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center 72%;
	mix-blend-mode: multiply;
	transform: scale(1.04);
	transition: transform var(--hf-dur-slow) var(--hf-ease);
}
.hfp .hfp-ofx-tile:hover .hfp-ofx-tile__media { box-shadow: inset 0 0 0 1px rgb(var(--hf-interactive-rgb) / .35), var(--hf-shadow-sm); }
.hfp .hfp-ofx-tile:hover .hfp-ofx-tile__media img { transform: scale(1.1); }
.hfp .hfp-ofx-tile__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 18px 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hf-line-soft);
}
.hfp .hfp-ofx-tile__years { font-size: 13.5px; color: var(--hf-muted); }
.hfp .hfp-ofx-tile__name { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--hf-ink); transition: color var(--hf-dur-fast) var(--hf-ease); }
.hfp .hfp-ofx-tile:hover .hfp-ofx-tile__name { color: var(--hf-interactive); }
.hfp .hfp-ofx-tile__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hfp .hfp-ofx-tile__stats .hfp-ofx-stat:only-child { grid-column: 1 / -1; }
.hfp .hfp-ofx-tile__stats .hfp-ofx-stat + .hfp-ofx-stat { padding-left: 14px; border-left: 1px solid var(--hf-line-soft); }
.hfp .hfp-ofx-tile__stats .hfp-ofx-stat__figure { font-size: 26px; }
.hfp .hfp-ofx-tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hf-interactive);
}
.hfp .hfp-ofx-tile:hover .hfp-ofx-tile__cta { text-decoration: underline; text-underline-offset: 3px; }
.hfp .hfp-ofx-tile__arrow {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgb(var(--hf-interactive-rgb) / .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230562d2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center;
	transition: background-color var(--hf-dur) var(--hf-ease), transform var(--hf-dur) var(--hf-ease);
}
.hfp .hfp-ofx-tile:hover .hfp-ofx-tile__arrow { background-color: rgb(var(--hf-interactive-rgb) / .16); transform: translateX(3px); }

/* A label/figure pair: used in the showroom and in the model header. */
.hfp .hfp-ofx-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hfp .hfp-ofx-stat__label { font-size: 12.5px; line-height: 1.35; color: var(--hf-muted); }
.hfp .hfp-ofx-stat__figure { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--hf-ink); }
.hfp .hfp-ofx-stat--cash .hfp-ofx-stat__figure { color: var(--hf-success); }
.hfp .hfp-ofx-stat__note { font-size: 12.5px; line-height: 1.35; color: var(--hf-muted); }

@media (max-width: 980px) {
	.hfp .hfp-ofx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 560px) {
	.hfp .hfp-ofx-group + .hfp-ofx-group { margin-top: var(--hf-sp-10); }
	.hfp .hfp-ofx-group__head { font-size: 22px; margin-bottom: var(--hf-sp-4); }
	.hfp .hfp-ofx-tiles { gap: 24px 14px; }
	.hfp .hfp-ofx-tile__media { border-radius: 12px; }
	.hfp .hfp-ofx-tile__title { margin: 10px 0 8px; padding-bottom: 8px; }
	.hfp .hfp-ofx-tile__years { font-size: 12px; }
	.hfp .hfp-ofx-tile__name { font-size: 17px; }
	.hfp .hfp-ofx-tile__stats { grid-template-columns: 1fr; gap: 6px; }
	.hfp .hfp-ofx-tile__stats .hfp-ofx-stat + .hfp-ofx-stat { padding-left: 0; border-left: 0; }
	.hfp .hfp-ofx-tile__stats .hfp-ofx-stat__figure { font-size: 19px; }
	.hfp .hfp-ofx-stat__label,
	.hfp .hfp-ofx-stat__note { font-size: 12px; }
	.hfp .hfp-ofx-tile__cta { margin-top: 10px; font-size: 14px; gap: 8px; }
	.hfp .hfp-ofx-tile__arrow { width: 24px; height: 24px; }
}

/* ------------------------------------------------------------ showroom (a model chosen) */

/* 2.73.2: the whole lineup, compact and all visible — one row per segment,
   label on the left, pictures across. Replaces 2.73.1's scrolling strip. */
.hfp .hfp-ofx-showroom {
	margin: 0 0 var(--hf-sp-8);
	padding: 18px 24px 8px;
	background: var(--hf-surface-2);
	border: 1px solid var(--hf-line-soft);
	border-radius: 18px;
}
.hfp .hfp-ofx-showroom__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 20px;
	margin: 0 0 6px;
}
.hfp .hfp-ofx-showroom__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--hf-ink); }
.hfp .hfp-ofx-showroom__title span { margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--hf-muted); }
.hfp .hfp-ofx-showroom__all { font-size: 14px; font-weight: 600; color: var(--hf-interactive); text-decoration: none; }
.hfp .hfp-ofx-showroom__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.hfp .hfp-ofx-showroom__all:focus-visible { outline: 2px solid var(--hf-focus-ring); outline-offset: 2px; border-radius: 4px; }
.hfp .hfp-ofx-showroom__row {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 12px 0;
}
.hfp .hfp-ofx-showroom__row + .hfp-ofx-showroom__row { border-top: 1px solid var(--hf-line-soft); }
.hfp .hfp-ofx-showroom__seg { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--hf-ink-graphite); }
.hfp .hfp-ofx-showroom__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hfp .hfp-ofx-showroom__list > li { display: flex; min-width: 0; }
.hfp .hfp-ofx-pick {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 6px 6px 10px;
	color: var(--hf-ink);
	text-align: center;
	text-decoration: none;
	background: var(--hf-paper);
	border: 1px solid var(--hf-line-soft);
	border-radius: 12px;
	transition: border-color var(--hf-dur) var(--hf-ease), box-shadow var(--hf-dur) var(--hf-ease), transform var(--hf-dur) var(--hf-ease);
}
.hfp .hfp-ofx-pick:hover { border-color: rgb(var(--hf-interactive-rgb) / .45); box-shadow: var(--hf-shadow-sm); transform: translateY(-2px); }
.hfp .hfp-ofx-pick:focus-visible { outline: 2px solid var(--hf-focus-ring); outline-offset: 2px; }
.hfp .hfp-ofx-pick__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 6px;
	overflow: hidden;
	background: radial-gradient(120% 90% at 50% 100%, #e9edf3 0%, #f6f7f9 55%, #fbfbfc 100%);
	border-radius: 8px;
}
.hfp .hfp-ofx-pick__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center 72%;
	mix-blend-mode: multiply;
	transform: scale(1.12);
}
.hfp .hfp-ofx-pick__name { font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.hfp .hfp-ofx-pick__n { margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--hf-muted); }
.hfp .hfp-ofx-pick[aria-current="page"] {
	background: rgb(var(--hf-interactive-rgb) / .05);
	border-color: var(--hf-interactive);
	box-shadow: 0 0 0 1px var(--hf-interactive);
}
.hfp .hfp-ofx-pick[aria-current="page"] .hfp-ofx-pick__n { color: var(--hf-interactive-hover); font-weight: 600; }
.hfp .hfp-ofx-pick[aria-current="page"]::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hf-interactive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center;
}

@media (max-width: 1000px) {
	.hfp .hfp-ofx-showroom__row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 760px) {
	.hfp .hfp-ofx-showroom { padding: 14px 14px 4px; border-radius: 14px; }
	.hfp .hfp-ofx-showroom__title span { display: block; margin: 2px 0 0; }
	.hfp .hfp-ofx-showroom__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.hfp .hfp-ofx-pick { padding: 4px 4px 8px; border-radius: 10px; }
	.hfp .hfp-ofx-pick__name { font-size: 12.5px; }
	.hfp .hfp-ofx-pick__n { font-size: 11.5px; }
	.hfp .hfp-ofx-pick[aria-current="page"]::after { top: 4px; right: 4px; width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.hfp .hfp-ofx-tile__media,
	.hfp .hfp-ofx-tile__media img,
	.hfp .hfp-ofx-tile__arrow,
	.hfp .hfp-ofx-pick { transition: none; }
	.hfp .hfp-ofx-tile:hover .hfp-ofx-tile__media img { transform: scale(1.04); }
	.hfp .hfp-ofx-tile:hover .hfp-ofx-tile__arrow,
	.hfp .hfp-ofx-pick:hover { transform: none; }
}

/* ------------------------------------------------------------ model header */

.hfp .hfp-ofx-head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 8px 40px;
	margin: 0 0 var(--hf-sp-8);
	padding: 28px 36px 28px 20px;
	background: radial-gradient(90% 120% at 18% 85%, #e4e9f0 0%, #f3f5f8 45%, #fafbfc 100%);
	border: 1px solid var(--hf-line-soft);
	border-radius: 16px;
}
.hfp .hfp-ofx-head--no-media { grid-template-columns: 1fr; padding-left: 36px; }
.hfp .hfp-ofx-head__media { margin: 0; text-align: center; }
.hfp .hfp-ofx-head__media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.hfp .hfp-ofx-head__media figcaption { margin-top: 4px; font-size: 12px; color: var(--hf-muted); }
.hfp .hfp-ofx-head__kicker { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--hf-interactive); }
.hfp .hfp-ofx-head h2 { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; color: var(--hf-ink); }
.hfp .hfp-ofx-head__lede { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--hf-text); }
.hfp .hfp-ofx-head__stats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 22px 0 0; }
.hfp .hfp-ofx-head__stats .hfp-ofx-stat + .hfp-ofx-stat { padding-left: 28px; border-left: 1px solid var(--hf-line); }
.hfp .hfp-ofx-head__stats .hfp-ofx-stat__figure { font-size: 34px; }
.hfp .hfp-ofx-head__stats .hfp-ofx-stat__label,
.hfp .hfp-ofx-head__stats .hfp-ofx-stat__note { font-size: 13.5px; }
.hfp .hfp-ofx-head__ctas { margin: 24px 0 0; }
.hfp .hfp-ofx-head__ctas .hfp-btn { margin: 0; }

@media (max-width: 900px) {
	.hfp .hfp-ofx-head { grid-template-columns: 1fr; padding: 8px 20px 24px; }
	.hfp .hfp-ofx-head__media { max-width: 340px; margin-inline: auto; }
}
@media (max-width: 760px) {
	/* The lineup above already shows the car; keep the header's copy close. */
	.hfp .hfp-ofx-head__media { max-width: 260px; }
}
@media (max-width: 480px) {
	.hfp .hfp-ofx-head__stats { gap: 12px 18px; }
	.hfp .hfp-ofx-head__stats .hfp-ofx-stat + .hfp-ofx-stat { padding-left: 18px; }
	.hfp .hfp-ofx-head__stats .hfp-ofx-stat__figure { font-size: 28px; }
	.hfp .hfp-ofx-head__ctas .hfp-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ filter tabs */

.hfp .hfp-ofx-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 var(--hf-sp-5);
	padding: 4px;
	background: var(--hf-surface-3);
	border-radius: var(--hf-radius-pill);
}
.hfp .hfp-ofx-tabs[hidden] { display: none; }
.hfp .hfp-ofx-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--hf-ink-graphite);
	background: transparent;
	border: 0;
	border-radius: var(--hf-radius-pill);
	cursor: pointer;
}
.hfp .hfp-ofx-tab:hover { color: var(--hf-ink); }
.hfp .hfp-ofx-tab:focus-visible { outline: 2px solid var(--hf-focus-ring); outline-offset: 2px; }
.hfp .hfp-ofx-tab[aria-pressed="true"] { color: var(--hf-ink); background: var(--hf-paper); box-shadow: 0 1px 3px rgb(var(--hf-black-rgb) / .14); }
.hfp .hfp-ofx-tab__n { font-size: 12px; font-weight: 600; color: var(--hf-muted); }
@media (max-width: 560px) {
	.hfp .hfp-ofx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
	.hfp .hfp-ofx-tab { justify-content: center; gap: 6px; padding: 0 8px; font-size: 13.5px; }
}

/* ------------------------------------------------------------ offer cards */

.hfp .hfp-ofx-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.hfp .hfp-ofx-card {
	scroll-margin-top: 96px;
	overflow: hidden;
	background: var(--hf-paper);
	border: 1px solid var(--hf-line-soft);
	border-radius: 14px;
	box-shadow: var(--hf-shadow-card);
}
.hfp .hfp-ofx-card[hidden] { display: none; }
.hfp .hfp-ofx-card:target { border-color: var(--hf-interactive); box-shadow: 0 0 0 3px rgb(var(--hf-interactive-rgb) / .18); }
.hfp .hfp-ofx-card__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.hfp .hfp-ofx-card__offer { padding: 26px 30px 24px; }
.hfp .hfp-ofx-card__meta {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 26px 26px 24px;
	background: var(--hf-surface-2);
	border-left: 1px solid var(--hf-line-soft);
}

.hfp .hfp-ofx-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.hfp .hfp-ofx-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	border-radius: var(--hf-radius-pill);
}
.hfp .hfp-ofx-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hfp .hfp-ofx-tag--cash { color: #006e00; background: var(--hf-success-bg); }
.hfp .hfp-ofx-tag--apr { color: var(--hf-interactive-hover); background: rgb(var(--hf-interactive-rgb) / .1); }
.hfp .hfp-ofx-card__year { font-size: 13px; color: var(--hf-muted); }
.hfp .hfp-ofx-card__title { margin: 0 0 18px; font-size: 22px; line-height: 1.3; color: var(--hf-ink); }

.hfp .hfp-ofx-routes { display: grid; gap: 16px; }
.hfp .hfp-ofx-routes.is-choice { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); gap: 0; align-items: start; }
.hfp .hfp-ofx-routes__sep { align-self: stretch; width: 1px; margin: 0 28px; background: var(--hf-line-soft); }
.hfp .hfp-ofx-route { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hfp .hfp-ofx-route__figure { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--hf-ink); }
.hfp .hfp-ofx-route--cash .hfp-ofx-route__figure { color: var(--hf-success); }
.hfp .hfp-ofx-route__unit { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.hfp .hfp-ofx-route__kind { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--hf-ink-graphite); }
.hfp .hfp-ofx-route__note { font-size: 13.5px; color: var(--hf-muted); }

.hfp .hfp-ofx-ladder {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.hfp .hfp-ofx-ladder li {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 58px;
	padding: 6px 8px;
	background: var(--hf-surface-2);
	border: 1px solid var(--hf-line-soft);
	border-radius: 8px;
}
.hfp .hfp-ofx-ladder span { font-size: 11.5px; color: var(--hf-muted); }
.hfp .hfp-ofx-ladder strong { font-size: 14px; font-weight: 700; color: var(--hf-ink); }
.hfp .hfp-ofx-ladder li.is-best { background: rgb(var(--hf-interactive-rgb) / .07); border-color: rgb(var(--hf-interactive-rgb) / .45); }

.hfp .hfp-ofx-card__relation {
	margin: 20px 0 0;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--hf-text);
	background: var(--hf-surface-2);
	border-radius: 8px;
}

.hfp .hfp-ofx-facts { display: grid; gap: 14px; margin: 0; }
.hfp .hfp-ofx-facts__row { display: grid; gap: 4px; }
.hfp .hfp-ofx-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hf-muted); }
.hfp .hfp-ofx-facts dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--hf-ink); }
.hfp .hfp-ofx-trims { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.hfp .hfp-ofx-trims li {
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	background: var(--hf-paper);
	border: 1px solid var(--hf-line);
	border-radius: 6px;
}

.hfp .hfp-ofx-card__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: auto; }
.hfp .hfp-ofx-card__ctas .hfp-btn { flex: 1 1 100%; margin: 0; }
.hfp .hfp-ofx-card__print {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 4px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--hf-interactive);
	background: none;
	border: 0;
	cursor: pointer;
}
.hfp .hfp-ofx-card__print[hidden] { display: none; }
.hfp .hfp-ofx-card__print::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hfp .hfp-ofx-card__print:hover { text-decoration: underline; text-underline-offset: 3px; }
.hfp .hfp-ofx-card__print:focus-visible { outline: 2px solid var(--hf-focus-ring); outline-offset: 2px; border-radius: 4px; }

.hfp .hfp-ofx-card__terms { border-top: 1px solid var(--hf-line-soft); }
.hfp .hfp-ofx-card__terms > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hf-interactive);
	list-style: none;
	cursor: pointer;
}
.hfp .hfp-ofx-card__terms > summary::-webkit-details-marker { display: none; }
.hfp .hfp-ofx-card__terms > summary::after {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--hf-dur) var(--hf-ease);
}
.hfp .hfp-ofx-card__terms[open] > summary::after { transform: rotate(180deg); }
.hfp .hfp-ofx-card__terms > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.hfp .hfp-ofx-card__terms > summary:focus-visible { outline: 2px solid var(--hf-focus-ring); outline-offset: -4px; }
.hfp .hfp-ofx-card__terms .hfp-fine { margin: 0; padding: 0 30px 20px; font-size: 13px; line-height: 1.65; color: var(--hf-muted); max-width: 110ch; }
.hfp .hfp-ofx-card__printhead[hidden] { display: none; }

@media (max-width: 980px) {
	.hfp .hfp-ofx-card__body { grid-template-columns: minmax(0, 1fr) 300px; }
	.hfp .hfp-ofx-card__offer { padding: 22px 24px; }
	.hfp .hfp-ofx-routes__sep { margin: 0 20px; }
	.hfp .hfp-ofx-route__figure { font-size: 38px; }
}
@media (max-width: 820px) {
	.hfp .hfp-ofx-card__body { grid-template-columns: 1fr; }
	.hfp .hfp-ofx-card__meta { border-left: 0; border-top: 1px solid var(--hf-line-soft); padding: 20px 24px; }
	.hfp .hfp-ofx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
	.hfp .hfp-ofx-facts__row--trims { grid-column: 1 / -1; }
	.hfp .hfp-ofx-card__terms > summary { padding-inline: 24px; }
	.hfp .hfp-ofx-card__terms .hfp-fine { padding-inline: 24px; }
}
@media (max-width: 560px) {
	.hfp .hfp-ofx-card { border-radius: 12px; }
	.hfp .hfp-ofx-card__offer { padding: 18px 18px 20px; }
	.hfp .hfp-ofx-card__meta { padding: 18px; }
	.hfp .hfp-ofx-card__title { font-size: 19px; margin-bottom: 14px; }
	.hfp .hfp-ofx-routes.is-choice { grid-template-columns: 1fr; gap: 0; }
	.hfp .hfp-ofx-routes__sep { width: auto; height: 1px; margin: 16px 0; }
	.hfp .hfp-ofx-route__figure { font-size: 36px; }
	.hfp .hfp-ofx-facts { grid-template-columns: 1fr; }
	.hfp .hfp-ofx-ladder { flex-wrap: nowrap; gap: 4px; }
	.hfp .hfp-ofx-ladder li { flex: 1 1 0; min-width: 0; padding: 6px 2px; }
	.hfp .hfp-ofx-card__terms > summary { padding-inline: 18px; }
	.hfp .hfp-ofx-card__terms .hfp-fine { padding-inline: 18px; }
}

/* ------------------------------------------------------------ print */

@media print {
	/* The whole page: no controls, every card whole. */
	.hfp .hfp-ofx-showroom,
	.hfp .hfp-ofx-tabs,
	.hfp .hfp-ofx-card__ctas,
	.hfp .hfp-ofx-finder__facts { display: none !important; }
	.hfp .hfp-ofx-card { break-inside: avoid; box-shadow: none; border-color: #999; }
	.hfp .hfp-ofx-card[hidden] { display: block; }
	.hfp .hfp-ofx-tile { box-shadow: none; }

	/* "Print this offer": only the copied card (offer-browser.js). */
	html.hfp-ofx-printing body > :not(.hfp-ofx-printbox) { display: none !important; }
	.hfp-ofx-printbox { display: block; }
	.hfp .hfp-ofx-printbox .hfp-ofx-card { border: 0; border-radius: 0; }
	.hfp .hfp-ofx-printbox .hfp-ofx-card__body { grid-template-columns: minmax(0, 1fr) 250px; }
	.hfp .hfp-ofx-printbox .hfp-ofx-card__meta { border-top: 0; border-left: 1px solid #ccc; padding: 18px; }
	.hfp .hfp-ofx-printbox .hfp-ofx-facts { grid-template-columns: 1fr; }
	.hfp .hfp-ofx-printbox .hfp-ofx-routes.is-choice { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); }
	.hfp .hfp-ofx-printbox .hfp-ofx-routes__sep { width: 1px; height: auto; margin: 0 18px; }
	.hfp .hfp-ofx-printbox .hfp-ofx-card__printhead { display: block; margin: 0 0 12px; padding: 0 0 10px; font-size: 12px; line-height: 1.5; color: #333; border-bottom: 1px solid #999; }
	.hfp .hfp-ofx-printbox .hfp-ofx-card__terms > summary { padding-top: 10px; color: #000; }
	.hfp .hfp-ofx-printbox .hfp-ofx-card__terms > summary::after { display: none; }
	.hfp .hfp-ofx-printbox .hfp-ofx-card__terms .hfp-fine { color: #333; }
	.hfp-ofx-printbox * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media screen {
	.hfp-ofx-printbox { display: none; }
}
