/*!
 * Getaway — cards.css (handle `stepfox-hb-cards`, dep `stepfox-hb`)
 *
 * The canonical stay card (.sfhb-card + variants: card · row · overlay · mini),
 * its skeleton, every STAY field block (.sfhb-f-stay-*), the hearts / compare
 * toggles, loops, loop pagination and context wrappers. Host + destination +
 * room fields and tiles live in hosts.css (P-LOOPS); the host card, Saved link,
 * saved searches, compare tray and toast live in engage.css (P-ENGAGE).
 *
 * Rules: every colour is a palette preset var (dark mode flips by re-mapping
 * the presets on :root); white is used only for text over photos. Hover
 * effects are gated by (hover:hover); motion is off under reduced motion.
 * Logical properties wherever cheap (RTL). Class selectors only — Stepfox
 * Looks `#block_x` / `:is(#block_x,.block_x)` rules always win over these
 * defaults. Chips, the rating pill, hotel-class stars and the score tile are
 * the shared atoms of hotel-booking.css; this sheet only places them.
 */

/* ======================================================================
 * 0. Tokens (scoped, derived from the 16-slug palette)
 * ==================================================================== */
:root {
	--sfhb-card-bg: var(--wp--preset--color--panel, #fffdf9);
	--sfhb-card-bg-2: var(--wp--preset--color--panel-2, #ece4d6);
	--sfhb-card-page: var(--wp--preset--color--base, #f6f1e9);
	--sfhb-card-ink: var(--wp--preset--color--ink, #0f2a30);
	--sfhb-card-muted: var(--wp--preset--color--muted, #566669);
	--sfhb-card-line: var(--wp--preset--color--line, rgba(15, 42, 48, 0.12));
	--sfhb-card-edge: var(--wp--preset--color--edge, rgba(15, 42, 48, 0.09));
	--sfhb-card-accent: var(--wp--preset--color--accent, #b4492a);
	/* Terracotta that carries text (offer / sold-out labels, links): the accent
	   itself (5.2:1 on the panel in light, 6.9:1 in dark). Defined in hotel-booking.css. */
	--sfhb-card-accent-strong: var(--sfhb-accent-strong, var(--wp--preset--color--accent, #b4492a));
	--sfhb-card-accent-2: var(--wp--preset--color--accent-2, #0b6c7e);
	--sfhb-card-navy: var(--wp--preset--color--violet, #34456b);
	--sfhb-card-gold: var(--sfhb-star, var(--wp--preset--color--gold, #a6760a));
	--sfhb-card-mint: var(--wp--preset--color--turf, #d9ebe8);
	--sfhb-card-sage: var(--wp--preset--color--neon, #2f7d57);
	--sfhb-card-glass: var(--wp--preset--color--glass, rgba(255, 253, 249, 0.88));
	--sfhb-card-on: var(--wp--preset--color--base, #f6f1e9);
	--sfhb-card-radius: 16px;
	--sfhb-card-shadow: var(--wp--preset--shadow--depth-1, 0 1px 2px rgba(15, 42, 48, 0.05), 0 4px 14px rgba(15, 42, 48, 0.05));
	--sfhb-card-shadow-hover: var(--wp--preset--shadow--depth-3, 0 6px 16px rgba(15, 42, 48, 0.08), 0 18px 40px rgba(15, 42, 48, 0.12));
	--sfhb-card-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sfhb-font-ui: var(--wp--preset--font-family--ui, "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--sfhb-font-display: var(--wp--preset--font-family--display, "Fraunces", Georgia, "Times New Roman", serif);
	--sfhb-font-body: var(--wp--preset--font-family--body, "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--sfhb-font-num: var(--wp--preset--font-family--num, var(--wp--preset--font-family--ui, "Figtree", system-ui, sans-serif));
	--sfhb-photo-ink: #fff;
	--sfhb-photo-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(8, 24, 28, 0.74) 100%);
}

/* ======================================================================
 * 1. Atoms
 * ==================================================================== */
.sfhb-ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.sfhb-ico svg {
	display: block;
}

.sfhb-sr,
.sfhb-card .screen-reader-text,
.sfhb-f .screen-reader-text,
.sfhb-lp .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Chips — over photos (.sfhb-card__chips) and as standalone badge fields
 * (.sfhb-chip.sfhb-f). Colours / variants are the shared atom
 * (offer, new, top-rated, vibe, free-cancel, instant, few-left, sold-out…);
 * here only the card-specific fit: truncation and badge-field alignment. */
.sfhb-card__chips > .sfhb-chip,
.sfhb-chip.sfhb-f {
	min-width: 0;
	max-width: 100%;
}
.sfhb-card__chips > .sfhb-chip > .sfhb-chip__t,
.sfhb-chip.sfhb-f > .sfhb-chip__t {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sfhb-chip.sfhb-f {
	width: max-content;
	max-width: 100%;
	box-shadow: none;
	border: 1px solid var(--sfhb-card-line);
}
.sfhb-chip.sfhb-f.sfhb-chip--offer,
.sfhb-chip.sfhb-f.sfhb-chip--new,
.sfhb-chip.sfhb-f.sfhb-chip--top-rated,
.sfhb-chip.sfhb-f.sfhb-chip--editors-pick,
.sfhb-chip.sfhb-f.sfhb-chip--rare-find,
.sfhb-chip.sfhb-f.sfhb-chip--eco,
.sfhb-chip.sfhb-f.sfhb-chip--sold-out {
	border-color: transparent;
}
.sfhb-chip__ico {
	color: currentColor;
}

/* Pills on photos (count / video / tour) — scoped: bare .sfhb-pill is a
 * search-form atom. */
.sfhb-card__pills .sfhb-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 9px;
	border: 0;
	border-radius: 999px;
	font-family: var(--sfhb-font-num);
	font-size: 12px;
	font-weight: 700;
	font-feature-settings: "tnum" 1, "lnum" 1;
	color: var(--sfhb-photo-ink);
	background: rgba(8, 24, 28, 0.58);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.sfhb-card__pills .sfhb-pill--icon {
	width: 26px;
	padding: 0;
	justify-content: center;
}

/* Avatars (card footer / stay-host field) */
:is(.sfhb-card__host, .sfhb-f-stay-host) .sfhb-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sfhb-card-bg-2);
	box-shadow: 0 0 0 2px var(--sfhb-card-bg);
}
:is(.sfhb-card__host, .sfhb-f-stay-host) .sfhb-avatar--initials {
	font-family: var(--sfhb-font-ui);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
}
:is(.sfhb-card__host, .sfhb-f-stay-host) .sfhb-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sfhb-card-on);
	background: var(--sfhb-card-navy);
}

/* Heart toggle */
.sfhb-fav {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--sfhb-card-ink);
	background: none;
	-webkit-tap-highlight-color: transparent;
}
.sfhb-fav--icon,
.sfhb-fav--icon-sm {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sfhb-card-glass);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
	transition: transform 0.2s var(--sfhb-card-ease), background-color 0.2s ease, opacity 0.2s ease;
}
.sfhb-fav--icon-sm {
	width: 32px;
	height: 32px;
}
.sfhb-fav--icon-sm .sfhb-fav__heart {
	width: 16px;
	height: 16px;
}
.sfhb-fav--button {
	height: 40px;
	padding: 0 16px 0 12px;
	border: 1px solid var(--sfhb-card-line);
	border-radius: 12px;
	font-family: var(--sfhb-font-ui);
	font-size: 14px;
	font-weight: 700;
	background: var(--sfhb-card-bg);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sfhb-fav__icon {
	position: relative;
	display: inline-flex;
	line-height: 0;
}
.sfhb-fav__heart {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linejoin: round;
	transition: fill 0.2s ease, stroke 0.2s ease, transform 0.25s var(--sfhb-card-ease);
}
.sfhb-fav__burst {
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--sfhb-card-accent);
	opacity: 0;
	transform: scale(0.4);
	pointer-events: none;
}
.sfhb-fav.is-active .sfhb-fav__heart,
.sfhb-fav[aria-pressed="true"] .sfhb-fav__heart {
	fill: var(--sfhb-card-accent);
	stroke: var(--sfhb-card-accent);
}
.sfhb-fav--button.is-active,
.sfhb-fav--button[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--sfhb-card-accent) 45%, transparent);
	background: color-mix(in srgb, var(--sfhb-card-accent) 8%, var(--sfhb-card-bg));
}
.sfhb-fav.is-popping .sfhb-fav__heart {
	animation: sfhb-heart-pop 0.55s var(--sfhb-card-ease);
}
.sfhb-fav.is-popping .sfhb-fav__burst {
	animation: sfhb-heart-burst 0.6s ease-out;
}
.sfhb-fav:focus-visible,
.sfhb-cmp:focus-visible {
	outline: 2px solid var(--sfhb-card-accent);
	outline-offset: 2px;
}
@keyframes sfhb-heart-pop {
	0% { transform: scale(1); }
	30% { transform: scale(0.78); }
	60% { transform: scale(1.28); }
	100% { transform: scale(1); }
}
@keyframes sfhb-heart-burst {
	0% { opacity: 0.9; transform: scale(0.4); }
	100% { opacity: 0; transform: scale(1.3); }
}

/* Compare toggle */
.sfhb-cmp {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--sfhb-card-ink);
	background: none;
}
.sfhb-cmp--icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sfhb-card-glass);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
	transition: transform 0.2s var(--sfhb-card-ease), opacity 0.2s ease, background-color 0.2s ease;
}
.sfhb-cmp--button {
	height: 40px;
	padding: 0 16px 0 12px;
	border: 1px solid var(--sfhb-card-line);
	border-radius: 12px;
	font-family: var(--sfhb-font-ui);
	font-size: 14px;
	font-weight: 700;
	background: var(--sfhb-card-bg);
}
.sfhb-cmp__icon {
	display: inline-flex;
	line-height: 0;
}
.sfhb-cmp__tick {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.sfhb-cmp.is-active,
.sfhb-cmp[aria-pressed="true"] {
	color: var(--sfhb-card-on);
	background: var(--sfhb-card-accent-2);
	border-color: var(--sfhb-card-accent-2);
}
.sfhb-cmp.is-active .sfhb-cmp__tick,
.sfhb-cmp[aria-pressed="true"] .sfhb-cmp__tick {
	opacity: 1;
}

/* Shared small atoms of the stay card: rating pill placement, class stars,
 * partial-fill rating stars, amenity icons. */
.sfhb-rating-pill {
	flex: none;
}
.sfhb-rstars {
	position: relative;
	display: inline-block;
	flex: none;
	line-height: 0;
	color: var(--sfhb-card-line);
}
.sfhb-rstars__bg,
.sfhb-rstars__fg {
	display: inline-flex;
	gap: 1px;
}
.sfhb-rstars__fg {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--sfhb-rate, 0%);
	overflow: hidden;
	color: var(--sfhb-card-gold);
}
.sfhb-rstars .sfhb-icon {
	flex: none;
	fill: currentColor;
	stroke: none;
}
.sfhb-card__amen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}
.sfhb-card__amen .sfhb-amen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	color: var(--sfhb-card-ink);
	background: var(--sfhb-card-bg-2);
}
.sfhb-card__amen:not(.has-labels) .sfhb-amen {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}
.sfhb-card__amen.has-labels .sfhb-amen {
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
}
.sfhb-card__amen .sfhb-amen .sfhb-icon {
	color: var(--sfhb-card-accent-2);
}

/* ======================================================================
 * 2. The stay card
 * ==================================================================== */
.sfhb-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--sfhb-card-edge);
	border-radius: var(--sfhb-card-radius);
	background: var(--sfhb-card-bg);
	box-shadow: var(--sfhb-card-shadow);
	color: var(--sfhb-card-ink);
	font-family: var(--sfhb-font-ui);
	text-align: start;
	transition: transform 0.35s var(--sfhb-card-ease), box-shadow 0.35s var(--sfhb-card-ease), border-color 0.35s ease;
}
.sfhb-card__media {
	position: relative;
	flex: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sfhb-card-bg-2);
}
.sfhb-card__img,
.sfhb-card__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 60%;
	transition: transform 0.7s var(--sfhb-card-ease), filter 0.4s ease;
}
.sfhb-card__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: color-mix(in srgb, var(--sfhb-card-muted) 55%, transparent);
	background:
		radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--sfhb-card-accent-2) 12%, transparent), transparent 60%),
		var(--sfhb-card-bg-2);
}
.sfhb-card__chips {
	position: absolute;
	inset-block-start: 12px;
	inset-inline: 12px var(--sfhb-actions-w, 104px);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 62px;
	overflow: hidden;
	pointer-events: none;
}
.sfhb-card:has(.sfhb-card__actions > :only-child) {
	--sfhb-actions-w: 58px;
}
.sfhb-card__actions {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 3;
	display: flex;
	gap: 8px;
}
.sfhb-card__pills {
	position: absolute;
	inset-inline-end: 12px;
	inset-block-end: 12px;
	z-index: 2;
	display: flex;
	gap: 6px;
	pointer-events: none;
}

/* Swipeable photo strip — CSS scroll-snap, no JS. Above the stretched link
 * (z-index 2 > 1) so a swipe scrolls it; a tap on a slide opens the stay. */
.sfhb-card__strip {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sfhb-card__strip::-webkit-scrollbar {
	display: none;
}
.sfhb-card__strip:focus-visible {
	outline: 3px solid var(--sfhb-card-accent);
	outline-offset: -3px;
}
.sfhb-card__slide {
	display: block;
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.sfhb-card__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sfhb-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 16px 18px 18px;
}
/* Eyebrow: stay type + hotel-class stars */
.sfhb-card__kind {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 16px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sfhb-card-accent-2);
}
.sfhb-card__type {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sfhb-card__kind .sfhb-stars {
	flex: none;
	gap: 1px;
	color: var(--sfhb-card-gold);
}
.sfhb-card__kind .sfhb-stars .sfhb-icon {
	width: 11px;
	height: 11px;
}
.sfhb-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	margin-top: 1px;
}
.sfhb-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}
.sfhb-card__meta .sfhb-card__loc {
	flex: 1 1 auto;
	min-width: 0;
}
.sfhb-card__meta .sfhb-rating {
	margin-inline-start: auto;
}
.sfhb-card--mini .sfhb-card__head .sfhb-rating {
	align-self: flex-start;
}
.sfhb-card__title {
	/* Two lines, clamped; min-height keeps a row of cards aligned. */
	display: -webkit-box;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.44em;
	margin: 0;
	overflow: hidden;
	font-family: var(--sfhb-font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.012em;
	white-space: normal;
	overflow-wrap: anywhere;
	text-wrap: balance;
	color: var(--sfhb-card-ink);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Single-column result lists (map search, phones) don't need the reserved line. */
:where(.sfhb-msr__list, .sfhb-card--row) .sfhb-card__title {
	min-height: 0;
}
@media (max-width: 600px) {
	.sfhb-card__title {
		min-height: 0;
	}
}
/* (0,1,1)+ so a theme's post-content link colour/underline
 * (:root :where(.wp-block-post-content a) = 0,1,0, printed later) never wins. */
a.sfhb-card__link,
a.sfhb-card__link:hover,
a.sfhb-card__link:focus,
a.sfhb-card__link:visited {
	color: inherit;
	text-decoration: none;
	outline: none;
}
.sfhb-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.sfhb-card__link:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--sfhb-card-accent);
	border-radius: var(--sfhb-card-radius);
}
.sfhb-card__loc {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--sfhb-card-muted);
}
.sfhb-card__loc span:last-child {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sfhb-card__loc .sfhb-ico {
	color: var(--sfhb-card-accent);
}

/* Facts row (card + .sfhb-facts field) */
.sfhb-card__facts,
.sfhb-facts {
	/* Separators live in the column gap (::before at -gap/2) and the list
	   clips its start edge, so when "2 bedrooms" wraps to a second line its
	   separator is cut away instead of starting the line as an orphan. */
	--sfhb-fact-gap: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px var(--sfhb-fact-gap);
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--sfhb-font-num);
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-size: 13.5px;
	-webkit-clip-path: inset(-8px -8px -8px 0);
	clip-path: inset(-8px -8px -8px 0);
}
:where([dir="rtl"]) :is(.sfhb-card__facts, .sfhb-facts) {
	-webkit-clip-path: inset(-8px 0 -8px -8px);
	clip-path: inset(-8px 0 -8px -8px);
}
.sfhb-fact {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	color: var(--sfhb-card-ink);
}
.sfhb-card__facts .sfhb-fact + .sfhb-fact::before,
.sfhb-facts--line .sfhb-fact + .sfhb-fact::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	inset-inline-start: calc(var(--sfhb-fact-gap) / -2);
	width: 1px;
	background: var(--sfhb-card-line);
}
.sfhb-facts--dot {
	--sfhb-fact-gap: 17px;
}
.sfhb-facts--dot .sfhb-fact + .sfhb-fact::before {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: calc(var(--sfhb-fact-gap) / -2 - 1.5px);
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: var(--sfhb-card-muted);
	opacity: 0.6;
}
.sfhb-fact .sfhb-ico {
	color: var(--sfhb-card-muted);
}
.sfhb-fact__v {
	font-weight: 700;
}
.sfhb-fact__l {
	margin-inline-start: -2px;
	font-weight: 500;
	color: var(--sfhb-card-muted);
}
.sfhb-fact__l--short {
	display: none;
}

.sfhb-card__excerpt {
	display: -webkit-box;
	margin: 4px 0 0;
	overflow: hidden;
	font-family: var(--sfhb-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--sfhb-card-muted);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Best-match room for the chosen dates */
.sfhb-card__room {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	margin: 2px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-card__room span:last-child {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sfhb-card__room .sfhb-ico {
	color: var(--sfhb-card-accent-2);
}

/* Footer: price + availability (+ host) */
.sfhb-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--sfhb-card-line);
}
.sfhb-card__body > .sfhb-card__facts,
.sfhb-card__body > .sfhb-card__amen,
.sfhb-card__body > .sfhb-card__room {
	margin-bottom: 8px;
}
.sfhb-card__buy {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.sfhb-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	margin: 0;
	font-family: var(--sfhb-font-num);
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1.15;
}
.sfhb-card__from {
	font-size: 13px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-card__amount {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sfhb-card-ink);
}
.sfhb-card__amount--request {
	font-size: 16px;
	letter-spacing: 0;
}
.sfhb-card__period {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-card__prev {
	font-size: 13px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	text-decoration-color: color-mix(in srgb, var(--sfhb-card-accent) 70%, transparent);
}
.sfhb-card__sub {
	flex: 1 0 100%;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-card.has-offer:not(.sfhb-card--overlay) .sfhb-card__price.is-total .sfhb-card__amount,
.sfhb-card.has-offer:not(.sfhb-card--overlay) .sfhb-card__price.is-night .sfhb-card__amount {
	color: var(--sfhb-card-accent-strong);
}
/* Availability line (needs dates): never colour alone — icon + words */
.sfhb-card__avail {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
}
.sfhb-card__avail--low {
	color: var(--sfhb-card-accent-strong);
}
.sfhb-card__avail--soldout {
	color: var(--sfhb-card-muted);
}
.sfhb-card__avail--open {
	color: color-mix(in srgb, var(--sfhb-card-sage) 72%, var(--sfhb-card-ink));
}
.sfhb-card__host {
	position: relative;
	z-index: 2;
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	font-size: 13px;
	font-weight: 600;
	color: var(--sfhb-card-ink);
}
.sfhb-card__host-name {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* States */
.sfhb-card.is-soldout .sfhb-card__img,
.sfhb-card.is-soldout .sfhb-card__slide img,
.sfhb-f-stay-image.is-soldout img {
	filter: grayscale(0.85) brightness(0.92);
}
.sfhb-card.is-soldout .sfhb-card__title,
.sfhb-card.is-soldout .sfhb-card__amount,
.sfhb-card.is-soldout .sfhb-fact__v,
.sfhb-card.is-soldout .sfhb-card__kind {
	color: var(--sfhb-card-muted);
}
.sfhb-card.is-soldout .sfhb-card__chips .sfhb-chip--offer,
.sfhb-card.is-soldout .sfhb-card__chips .sfhb-chip--instant {
	display: none;
}
.sfhb-card.is-soldout {
	box-shadow: none;
	background: color-mix(in srgb, var(--sfhb-card-bg-2) 38%, var(--sfhb-card-bg));
}

/* Hover (pointer devices only — no sticky hover after a tap) */
@media (hover: hover) {
	.sfhb-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--sfhb-card-shadow-hover);
		border-color: var(--sfhb-card-line);
	}
	.sfhb-card.is-soldout:hover {
		transform: translateY(-2px);
	}
	.sfhb-card:hover .sfhb-card__img,
	.sfhb-card:hover .sfhb-card__media > img,
	.sfhb-card:hover .sfhb-card__slide img,
	.sfhb-f-stay-image:hover img {
		transform: scale(1.04);
	}
	.sfhb-card:hover .sfhb-card__title {
		color: var(--sfhb-card-accent-strong);
	}
	.sfhb-card--composed:hover {
		transform: translateY(-4px);
		box-shadow: var(--sfhb-card-shadow-hover);
	}
	.sfhb-fav--icon:hover,
	.sfhb-fav--icon-sm:hover,
	.sfhb-cmp--icon:hover {
		transform: scale(1.08);
	}
	.sfhb-fav--button:hover,
	.sfhb-cmp--button:hover {
		border-color: var(--sfhb-card-ink);
	}
	/* The compare toggle stays out of the way until the card is hovered / focused (always visible on touch). */
	:is(.sfhb-card, .sfhb-f-stay-image) .sfhb-cmp--icon:not([aria-pressed="true"], .is-active) {
		opacity: 0;
		transform: scale(0.88);
	}
	:is(.sfhb-card, .sfhb-f-stay-image):is(:hover, :focus-within) .sfhb-cmp--icon,
	:is(.sfhb-card, .sfhb-f-stay-image) .sfhb-cmp--icon:focus-visible {
		opacity: 1;
		transform: none;
	}
}
.sfhb-card.is-active,
.sfhb-card.is-hovered {
	border-color: var(--sfhb-card-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--sfhb-card-accent) 28%, transparent), var(--sfhb-card-shadow-hover);
}

/* ---- Row variant (list views, map results) ----
 * Wraps to a stacked card by itself when the CARD (not the viewport) is
 * narrower than 560px — e.g. inside the 440px map results panel. */
.sfhb-card--row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}
.sfhb-card--row > .sfhb-card__media {
	flex-grow: 2;
	flex-shrink: 1;
	min-width: 0;
	flex-basis: calc((560px - 100%) * 999);
	aspect-ratio: auto;
	min-height: 230px;
}
.sfhb-card--row > .sfhb-card__body {
	flex-grow: 3;
	flex-shrink: 1;
	min-width: 0;
	flex-basis: calc((560px - 100%) * 999);
	padding: 18px 22px 20px;
}
.sfhb-card--row .sfhb-card__title {
	font-size: 21px;
}

/* Compact cards (narrow grid cells, carousels on phones) */
.sfhb-card--card,
.sfhb-card--row,
.sfhb-card--overlay,
.sfhb-card--composed {
	/* Composed (field-block) cards join the container so their facts get the
	   same compact spacing as the canonical card in 4-up grids. */
	container: sfhb-card / inline-size;
}
@container sfhb-card (max-width: 320px) {
	.sfhb-card__body {
		padding: 14px 14px 16px;
	}
	.sfhb-card__title {
		font-size: 18px;
	}
	.sfhb-card__amount {
		font-size: 20px;
	}
	.sfhb-card__facts,
	.sfhb-card--composed .sfhb-facts {
		--sfhb-fact-gap: 15px;
		font-size: 13px;
	}
	.sfhb-card__facts .sfhb-fact__l--long {
		display: none;
	}
	.sfhb-card__facts .sfhb-fact__l--short {
		display: inline;
	}
	.sfhb-card__chips > :nth-child(n + 3) {
		display: none;
	}
	.sfhb-card__foot {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* ---- Overlay variant (photo-led showcase) ---- */
.sfhb-card--overlay {
	height: auto;
	min-height: 460px;
	border: 0;
	color: var(--sfhb-photo-ink);
	background: var(--sfhb-card-navy);
}
.sfhb-card--overlay .sfhb-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}
.sfhb-card__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--sfhb-photo-scrim);
	pointer-events: none;
}
.sfhb-card--overlay .sfhb-card__scrim {
	background: linear-gradient(180deg, rgba(6, 20, 24, 0.06) 0%, rgba(6, 20, 24, 0.2) 26%, rgba(6, 20, 24, 0.68) 52%, rgba(6, 20, 24, 0.92) 100%);
}
.sfhb-card--overlay :is(.sfhb-card__kind, .sfhb-card__title, .sfhb-card__loc, .sfhb-card__facts, .sfhb-card__price, .sfhb-card__sub, .sfhb-card__avail) {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.35);
}
.sfhb-card--overlay .sfhb-card__body {
	position: relative;
	z-index: 2;
	justify-content: flex-end;
	gap: 6px;
	padding: 92px 22px 22px;
	pointer-events: none;
}
.sfhb-card--overlay .sfhb-card__body a {
	pointer-events: auto;
}
.sfhb-card--overlay .sfhb-card__kind {
	color: rgba(255, 255, 255, 0.88);
}
.sfhb-card--overlay .sfhb-card__kind .sfhb-stars {
	color: #f4c95d;
}
.sfhb-card--overlay .sfhb-card__amount,
.sfhb-card--overlay .sfhb-card__title,
.sfhb-card--overlay .sfhb-fact,
.sfhb-card--overlay .sfhb-fact__v {
	color: var(--sfhb-photo-ink);
}
.sfhb-card--overlay .sfhb-card__amount {
	font-size: 26px;
}
.sfhb-card--overlay .sfhb-card__period,
.sfhb-card--overlay .sfhb-card__from,
.sfhb-card--overlay .sfhb-card__sub,
.sfhb-card--overlay .sfhb-card__prev,
.sfhb-card--overlay .sfhb-card__loc,
.sfhb-card--overlay .sfhb-fact__l,
.sfhb-card--overlay .sfhb-fact .sfhb-ico,
.sfhb-card--overlay .sfhb-card__loc .sfhb-ico {
	color: rgba(255, 255, 255, 0.86);
}
.sfhb-card--overlay .sfhb-card__meta {
	flex: none;
}
.sfhb-card--overlay .sfhb-card__title {
	min-height: 0;
	font-size: 24px;
	font-weight: 500;
	white-space: normal;
	-webkit-line-clamp: 3;
}
.sfhb-card--overlay .sfhb-card__room,
.sfhb-card--overlay .sfhb-card__amen,
.sfhb-card--overlay .sfhb-card__pills,
.sfhb-card--overlay .sfhb-card__excerpt {
	display: none;
}
.sfhb-card--overlay .sfhb-card__facts .sfhb-fact + .sfhb-fact::before {
	background: rgba(255, 255, 255, 0.3);
}
.sfhb-card--overlay .sfhb-card__foot {
	margin-top: 8px;
	border-top-color: rgba(255, 255, 255, 0.28);
}
.sfhb-card--overlay .sfhb-rating {
	color: var(--sfhb-card-ink);
	background: var(--sfhb-card-glass);
	-webkit-backdrop-filter: blur(10px) saturate(1.5);
	backdrop-filter: blur(10px) saturate(1.5);
}
.sfhb-card--overlay .sfhb-card__avail--low {
	color: #ffd3c2;
}
.sfhb-card--overlay .sfhb-card__avail--soldout {
	color: rgba(255, 255, 255, 0.72);
}
@media (hover: hover) {
	.sfhb-card--overlay:hover .sfhb-card__title {
		color: var(--sfhb-photo-ink);
	}
}

/* ---- Mini variant (map popup, recently viewed, compact lists) ---- */
.sfhb-card--mini {
	flex-direction: row;
	align-items: stretch;
	height: auto;
	border-radius: 14px;
}
.sfhb-card--mini .sfhb-card__media {
	flex: 0 0 104px;
	aspect-ratio: auto;
	min-height: 96px;
}
.sfhb-card--mini .sfhb-card__actions {
	inset-block-start: 6px;
	inset-inline-end: 6px;
}
.sfhb-card--mini .sfhb-card__body {
	gap: 3px;
	padding: 10px 12px;
	justify-content: center;
}
.sfhb-card--mini .sfhb-card__head {
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
.sfhb-card--mini .sfhb-card__title {
	display: block;
	min-height: 0;
	font-size: 15.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
}
.sfhb-card--mini .sfhb-card__loc {
	font-size: 12px;
}
.sfhb-card--mini .sfhb-card__facts {
	--sfhb-fact-gap: 14px;
	margin: 2px 0 0;
	font-size: 12.5px;
}
.sfhb-card--mini .sfhb-card__foot {
	margin-top: 2px;
	padding-top: 0;
	border-top: 0;
}
.sfhb-card--mini .sfhb-card__amount {
	font-size: 17px;
}
@media (hover: hover) {
	.sfhb-card--mini:hover {
		transform: none;
	}
}

/* ---- Skeleton ---- */
.sfhb-card.is-skeleton {
	pointer-events: none;
	box-shadow: none;
}
.sfhb-card.is-skeleton .sfhb-skel {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--sfhb-card-bg-2) 25%, color-mix(in srgb, var(--sfhb-card-bg-2) 40%, var(--sfhb-card-bg)) 37%, var(--sfhb-card-bg-2) 63%);
	background-size: 400% 100%;
	animation: sfhb-card-shimmer 1.4s ease-in-out infinite;
}
.sfhb-card.is-skeleton .sfhb-skel--media {
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.sfhb-card.is-skeleton .sfhb-skel--kind { width: 32%; height: 11px; }
.sfhb-card.is-skeleton .sfhb-skel--title { width: 84%; height: 20px; margin-top: 4px; }
.sfhb-card.is-skeleton .sfhb-skel--line { width: 52%; height: 12px; }
.sfhb-card.is-skeleton .sfhb-skel--facts { width: 70%; height: 14px; margin-top: 6px; }
.sfhb-card.is-skeleton .sfhb-skel--price { width: 44%; height: 24px; margin-top: 12px; }
@keyframes sfhb-card-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* ======================================================================
 * 5. Field blocks (.sfhb-f-*) — defaults the block theme refines via Looks
 * ==================================================================== */
.sfhb-f {
	box-sizing: border-box;
	min-width: 0;
	font-family: var(--sfhb-font-ui);
}
.sfhb-f.is-empty {
	display: none !important;
}

/* Cards built from fields: the card is the positioning box of the stretched link */
:where(.sfhb-loop) > *,
:where(.wp-block-post-template) > li,
:where(.wp-block-group):has(> .sfhb-f-stay-link, > .sfhb-f-destination-link) {
	position: relative;
}
:where(.sfhb-loop) > :where(.wp-block-group) {
	transition: transform 0.35s var(--sfhb-card-ease), box-shadow 0.35s var(--sfhb-card-ease);
}
.sfhb-f-stay-favorite,
.sfhb-f-stay-compare,
.sfhb-f-stay-host {
	position: relative;
	z-index: 2;
}
/* The heart / compare toggle / chips / count over a field-composed photo keep
 * the canonical placement (absolute, from the .sfhb-card__* classes) and sit
 * above the stretched .sfhb-f-stay-link (z-index 1). Never `position: relative`
 * here: the figure clips with overflow:hidden, so an in-flow actions bar
 * drops under the 4:3 photo and disappears. */
.sfhb-f-stay-image > .sfhb-card__actions {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	inset-block-end: auto;
	inset-inline-start: auto;
	z-index: 3;
}
.sfhb-f-stay-image > .sfhb-card__chips {
	--sfhb-actions-w: 58px;
}
.sfhb-f-stay-image:has(> .sfhb-card__actions > .sfhb-cmp) > .sfhb-card__chips {
	--sfhb-actions-w: 104px;
}

.sfhb-f-stay-title {
	margin: 0;
	font-family: var(--sfhb-font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.012em;
	text-wrap: balance;
	color: var(--sfhb-card-ink);
}
.sfhb-f-stay-title a,
.sfhb-f-stay-image a.sfhb-f-stay-image__link {
	color: inherit;
	text-decoration: none;
}
.sfhb-f-stay-title a:hover {
	color: var(--sfhb-card-accent-strong);
}

/* stay-price / stay-price-total (same type as the card's price block) */
.sfhb-f-stay-price,
.sfhb-f-stay-price-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	font-family: var(--sfhb-font-num);
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1.15;
	color: var(--sfhb-card-ink);
}
.sfhb-f-stay-price .sfhb-price__from,
.sfhb-f-stay-price-total .sfhb-price__from {
	font-size: 13px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-price .sfhb-price__amount,
.sfhb-f-stay-price-total .sfhb-price__amount {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sfhb-card-ink);
}
.sfhb-f-stay-price .sfhb-price__amount--request {
	font-size: 16px;
	letter-spacing: 0;
}
.sfhb-f-stay-price .sfhb-price__amount--sold {
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-price .sfhb-price__period,
.sfhb-f-stay-price-total .sfhb-price__period {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-price .sfhb-price__prev,
.sfhb-f-stay-price-total .sfhb-price__prev {
	font-size: 13px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	text-decoration-color: color-mix(in srgb, var(--sfhb-card-accent) 70%, transparent);
}
.sfhb-f-stay-price .sfhb-price__sub,
.sfhb-f-stay-price-total .sfhb-price__sub {
	flex: 1 0 100%;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-price.is-reduced .sfhb-price__amount,
.sfhb-f-stay-price-total.is-reduced .sfhb-price__amount {
	color: var(--sfhb-card-accent-strong);
}
.sfhb-f-stay-code,
.sfhb-f-stay-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sfhb-font-num);
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-code .sfhb-f__l {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 11px;
}

/* stay-image */
.sfhb-f-stay-image {
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: var(--sfhb-aspect, 4 / 3);
	overflow: hidden;
	border-radius: var(--sfhb-card-radius);
	background: var(--sfhb-card-bg-2);
}
.sfhb-f-stay-image.is-natural {
	aspect-ratio: auto;
}
.sfhb-f-stay-image__link {
	display: block;
	width: 100%;
	height: 100%;
}
.sfhb-f-stay-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--sfhb-card-ease), filter 0.4s ease;
}

/* stretched link */
.sfhb-f-stay-link {
	position: static;
	display: block;
	width: 0;
	height: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
	outline: none;
}
.sfhb-f-stay-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.sfhb-f-stay-link:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--sfhb-card-accent);
	border-radius: var(--sfhb-card-radius);
}

.sfhb-f-stay-type {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sfhb-card-accent-2);
}
.sfhb-f-stay-location,
.sfhb-f-stay-address {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-location .sfhb-ico,
.sfhb-f-stay-address .sfhb-ico {
	color: var(--sfhb-card-accent);
}
.sfhb-f-stay-stars {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sfhb-f-stay-stars .sfhb-stars {
	color: var(--sfhb-card-gold);
}
.sfhb-f-stay-stars .sfhb-f__l {
	font-size: 13px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
/* stay-rating */
.sfhb-f-stay-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sfhb-font-num);
	font-variant-numeric: tabular-nums;
	color: var(--sfhb-card-ink);
}
.sfhb-f-stay-rating .sfhb-rate__band {
	font-family: var(--sfhb-font-ui);
	font-size: 15px;
	font-weight: 700;
}
.sfhb-f-stay-rating .sfhb-rate__count {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-rating .sfhb-rate__score {
	font-size: 15px;
	font-weight: 800;
}
.sfhb-f-stay-guests,
.sfhb-f-stay-bedrooms,
.sfhb-f-stay-beds,
.sfhb-f-stay-bathrooms,
.sfhb-f-stay-size {
	padding: 0;
	font-family: var(--sfhb-font-num);
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-size: 14px;
}
.sfhb-f-stay-facts {
	margin: 0;
}
.sfhb-f-stay-excerpt {
	margin: 0;
	font-family: var(--sfhb-font-body);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-host,
a.sfhb-f-stay-host,
a.sfhb-f-stay-host:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sfhb-card-ink);
	text-decoration: none;
}
.sfhb-f-stay-host.is-logo .sfhb-avatar.sfhb-avatar {
	width: 48px;
	height: 48px;
}
.sfhb-f-stay-host:hover .sfhb-f-stay-host__name {
	color: var(--sfhb-card-accent-strong);
}
.sfhb-f-stay-host__name {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sfhb-f-stay-offer {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sfhb-card-accent-strong);
	background: color-mix(in srgb, var(--sfhb-card-accent) 11%, var(--sfhb-card-bg));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfhb-card-accent) 28%, transparent);
}
.sfhb-f-stay-offer__ends {
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-offer__ends::before {
	content: "·";
	margin-inline-end: 7px;
}
.sfhb-f-stay-cancellation {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-cancellation.is-free {
	color: color-mix(in srgb, var(--sfhb-card-sage) 74%, var(--sfhb-card-ink));
}
.sfhb-f-stay-cancellation .sfhb-ico {
	color: var(--sfhb-card-sage);
}
.sfhb-f-stay-cancellation__t {
	font-weight: 700;
}
.sfhb-f-stay-cancellation__d {
	font-weight: 500;
	color: var(--sfhb-card-muted);
}
.sfhb-f-stay-checkin-times {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	font-size: 14px;
	color: var(--sfhb-card-ink);
}
.sfhb-f-stay-checkin-times.is-stacked {
	flex-direction: column;
	gap: 8px;
}
/* Scoped to the check-in field: .sfhb-ct is also the compare-table root (engage.css). */
.sfhb-f-stay-checkin-times .sfhb-ct {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sfhb-font-num);
	font-feature-settings: "tnum" 1, "lnum" 1;
}
.sfhb-f-stay-checkin-times .sfhb-ct .sfhb-ico {
	color: var(--sfhb-card-accent-2);
}
.sfhb-f-stay-checkin-times .sfhb-ct .sfhb-f__l {
	color: var(--sfhb-card-muted);
	font-family: var(--sfhb-font-ui);
}
.sfhb-f-stay-checkin-times .sfhb-ct .sfhb-f__v {
	font-weight: 700;
}
.sfhb-f-stay-favorite,
.sfhb-f-stay-compare {
	display: inline-flex;
}
.sfhb-f-stay-vibe-badge,
.sfhb-f-stay-availability-badge,
.sfhb-f-stay-label-badge {
	width: max-content;
}

/* Field-composed cards — the editor's default loop templates use these
 * classes (core/group .sfhb-card.sfhb-card--composed > stay-image +
 * group.sfhb-card__body; group.sfhb-host-tile; group.sfhb-destination-tile),
 * so a freshly inserted loop already matches the canonical card. */
.sfhb-card > .sfhb-f-stay-image,
.sfhb-card > .wp-block-hotel-booking-stay-image {
	flex: none;
	border-radius: 0;
}
.sfhb-card--composed {
	transition: transform 0.35s var(--sfhb-card-ease), box-shadow 0.35s var(--sfhb-card-ease);
}
.sfhb-card--composed > .sfhb-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sfhb-card--composed .sfhb-f-stay-title {
	/* Same 2-line clamp as the canonical .sfhb-card__title. */
	display: -webkit-box;
	min-height: 2.44em;
	min-height: 2lh;
	overflow: hidden;
	white-space: normal;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.sfhb-card--composed .sfhb-f-stay-facts {
	margin-top: 4px;
}
.sfhb-card--composed > .sfhb-card__body > .sfhb-f-stay-price {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--sfhb-card-line);
}
.sfhb-card--composed .sfhb-f-stay-date,
.sfhb-card--composed .sfhb-f-stay-offer {
	/* !important: themes pin this meta with flex-shrink:0 (by #id); with
	   nowrap + ellipsis here it can give way, so the host name never cuts. */
	flex-shrink: 1000 !important;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@media (hover: hover) {
	.sfhb-card:hover .sfhb-f-stay-image img,
	.sfhb-card--composed:hover .sfhb-f-stay-image img {
		transform: scale(1.04);
	}
	/* On the link itself: Looks colours the h3 by #id, which an inherited
	   colour can't beat — the <a> rule applies directly. */
	.sfhb-card--composed:hover .sfhb-f-stay-title,
	.sfhb-card--composed:hover .sfhb-f-stay-title a {
		color: var(--sfhb-card-accent-strong);
	}
}

/* ======================================================================
 * 6. Loops, empty state, pagination, context wrappers
 * ==================================================================== */
.sfhb-loop {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sfhb-loop-min, 300px)), 1fr));
	gap: var(--sfhb-loop-gap, 24px);
	min-width: 0;
}
.sfhb-loop > style {
	display: none;
}
/* Phone layout "Swipe rail" (mobileLayout=rail on stay / host /
 * destination loops): one row that scrolls sideways with snap points, the next
 * item peeking in, instead of a 6-card stack. !important beats the Looks
 * #block_x grid columns of the loop root. */
@media (max-width: 599px) {
	.sfhb-loop.is-mobile-rail {
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: min(82%, 320px);
		gap: 14px !important;
		margin-top: -6px;
		padding: 6px 0 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.sfhb-loop.is-mobile-rail::-webkit-scrollbar {
		display: none;
	}
	.sfhb-loop.is-mobile-rail > * {
		scroll-snap-align: start;
	}
	.sfhb-loop--hosts.is-mobile-rail,
	.sfhb-loop--destinations.is-mobile-rail {
		grid-auto-columns: min(72%, 280px);
	}
}
.sfhb-loop__empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 48px 24px;
	border: 1px dashed var(--sfhb-card-line);
	border-radius: var(--sfhb-card-radius);
	text-align: center;
	font-family: var(--sfhb-font-ui);
	color: var(--sfhb-card-muted);
	background: color-mix(in srgb, var(--sfhb-card-bg) 60%, transparent);
}
.sfhb-loop__empty .sfhb-ico {
	display: inline-flex;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: var(--sfhb-card-accent-2);
	background: var(--sfhb-card-mint);
}
.sfhb-loop__empty p {
	max-width: 48ch;
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--sfhb-card-ink);
}
a.sfhb-loop__reset {
	display: inline-block;
	margin-left: 6px;
	color: var(--sfhb-card-accent-strong);
	font-weight: 700;
}

.sfhb-lp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	font-family: var(--sfhb-font-ui);
}
.sfhb-lp.is-empty {
	display: none;
}
.sfhb-lp__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sfhb-lp .sfhb-lp__num,
.sfhb-lp .sfhb-lp__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--sfhb-card-line);
	border-radius: 12px;
	font-family: var(--sfhb-font-num);
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sfhb-card-ink);
	background: var(--sfhb-card-bg);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.sfhb-lp .sfhb-lp__link {
	padding: 0 16px;
	font-family: var(--sfhb-font-ui);
}
.sfhb-lp a.sfhb-lp__num:hover,
.sfhb-lp a.sfhb-lp__link:hover {
	border-color: var(--sfhb-card-ink);
	color: var(--sfhb-card-ink);
	text-decoration: none;
}
a.sfhb-lp__num:focus-visible,
a.sfhb-lp__link:focus-visible {
	outline: 2px solid var(--sfhb-card-accent);
	outline-offset: 2px;
}
.sfhb-lp .sfhb-lp__num.is-current {
	border-color: var(--sfhb-card-ink);
	color: var(--sfhb-card-on);
	background: var(--sfhb-card-ink);
}
.sfhb-lp__link.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}
.sfhb-lp__gap {
	min-width: 20px;
	text-align: center;
	color: var(--sfhb-card-muted);
}
.sfhb-lp__status {
	flex-basis: 100%;
	margin: 4px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--sfhb-card-muted);
}
@media (max-width: 600px) {
	.sfhb-lp__link span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
	.sfhb-lp .sfhb-lp__link {
		padding: 0;
		min-width: 44px;
	}
	.sfhb-lp .sfhb-lp__num {
		min-width: 40px;
		height: 40px;
	}
}

.sfhb-ctx {
	min-width: 0;
}
.sfhb-ctx.is-empty {
	display: none;
}
.sfhb-ctx__hint {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--sfhb-card-line);
	border-radius: 12px;
	font-family: var(--sfhb-font-ui);
	font-size: 13.5px;
	color: var(--sfhb-card-muted);
}

/* ======================================================================
 * 9. Motion safety + print
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sfhb-card,
	.sfhb-card__img,
	.sfhb-card__media > img,
	.sfhb-card__slide img,
	.sfhb-f-stay-image img,
	.sfhb-fav,
	.sfhb-fav__heart,
	.sfhb-cmp--icon {
		transition: none !important;
	}
	.sfhb-card__strip {
		scroll-behavior: auto;
	}
	.sfhb-card:hover,
	.sfhb-card--composed:hover {
		transform: none !important;
	}
	.sfhb-card:hover .sfhb-card__img,
	.sfhb-card:hover .sfhb-card__slide img,
	.sfhb-card--composed:hover .sfhb-f-stay-image img,
	.sfhb-f-stay-image:hover img {
		transform: none !important;
	}
	:is(.sfhb-card, .sfhb-f-stay-image) .sfhb-cmp--icon:not([aria-pressed="true"], .is-active) {
		transform: none !important;
	}
	.sfhb-fav.is-popping .sfhb-fav__heart,
	.sfhb-fav.is-popping .sfhb-fav__burst,
	.sfhb-card.is-skeleton .sfhb-skel {
		animation: none !important;
	}
}

/* Print: cards as plain blocks */
@media print {
	.sfhb-card {
		box-shadow: none;
		break-inside: avoid;
	}
	.sfhb-card__actions {
		display: none !important;
	}
	.sfhb-card__strip {
		overflow: hidden;
	}
	.sfhb-card__slide:not(:first-child) {
		display: none;
	}
}