/**
 * Fit Finder — .espt-block-fit-finder
 *
 * Vars set by the spec: --columns --sel-gap --sel-per-view --sel-slide-width
 * --thumb-radius --thumb-bw --thumb-border --thumb-active --lbl-* --head-size
 * --head-color --sub-size --sub-color --hint-* --ok-color --no-color --res-*
 * --rt-size --rm-size --alt-columns --alt-gap --alt-per-view --alt-slide-width
 * --card-* --cardbtn-* --more-bg --arrow-* --fit-img-* --fitbtn-*
 * Mobile-first; nothing overflows a 320px viewport.
 */

.espt-block-fit-finder .espt-ff {
	color: var(--bd-body);
	min-width: 0;
}

.espt-block-fit-finder .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
	padding: 18px;
	text-align: center;
}

/* image shape */
.espt-block-fit-finder { --img-ratio: 1; }
.espt-block-fit-finder.is-img-ratio-land { --img-ratio: 4 / 3; }
.espt-block-fit-finder.is-img-ratio-port { --img-ratio: 3 / 4; }
.espt-block-fit-finder.is-img-ratio-wide { --img-ratio: 16 / 9; }

/* ------------------------------------------------------------- heading */

.espt-block-fit-finder .espt-ff-head {
	margin: 0 0 14px;
	text-align: center;
}

.espt-block-fit-finder.is-text-align-left .espt-ff-head { text-align: left; }
.espt-block-fit-finder.is-text-align-right .espt-ff-head { text-align: right; }

.espt-block-fit-finder .espt-ff-h {
	color: var(--head-color, var(--bd-ink));
	font-size: var(--head-size, 20px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.espt-block-fit-finder .espt-ff-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: var(--sub-size, 15px);
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- hint */

.espt-block-fit-finder .espt-ff-hint {
	display: flex;
	justify-content: center;
	margin: 0 0 14px;
}

.espt-block-fit-finder.is-hint-align-left .espt-ff-hint { justify-content: flex-start; }
.espt-block-fit-finder.is-hint-align-right .espt-ff-hint { justify-content: flex-end; }

.espt-block-fit-finder .espt-ff-hint span {
	background: var(--hint-bg, var(--bd-soft));
	border: 1px dashed var(--hint-border, var(--bd-soft-line));
	border-radius: 999px;
	color: var(--hint-color, var(--bd-primary-dark));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 7px 14px;
}

/* ---------------------------------------------------- thumbnail picker */

.espt-block-fit-finder .espt-ff-grid {
	display: grid;
	gap: var(--sel-gap, 10px);
	grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
	margin: 0 0 16px;
}

.espt-block-fit-finder .espt-ff-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: var(--thumb-bw, 2px) solid var(--thumb-border, var(--bd-line));
	border-radius: var(--thumb-radius, 12px);
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-align: center;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.espt-block-fit-finder .espt-ff-thumb:hover {
	box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.45);
	transform: translateY(-2px);
}

.espt-block-fit-finder .espt-ff-thumb:focus-visible {
	outline: 2px solid var(--thumb-active, var(--bd-primary));
	outline-offset: 2px;
}

.espt-block-fit-finder .espt-ff-thumb.is-active {
	border-color: var(--thumb-active, var(--bd-primary));
	box-shadow: 0 0 0 2px var(--thumb-active, var(--bd-primary));
}

.espt-block-fit-finder .espt-ff-imgwrap {
	aspect-ratio: var(--img-ratio, 1);
	background: var(--bd-soft);
	display: block;
	position: relative;
	width: 100%;
}

.espt-block-fit-finder .espt-ff-imgwrap img,
.espt-block-fit-finder .espt-ff-thumb-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.espt-block-fit-finder .espt-ff-noimg {
	align-items: center;
	color: var(--bd-soft-line);
	display: flex;
	font-size: 34px;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.espt-block-fit-finder .espt-ff-noimg .espt-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-fit-finder .espt-ff-tick {
	background: var(--thumb-active, var(--bd-primary));
	border-radius: 50%;
	height: 22px;
	opacity: 0;
	position: absolute;
	right: 7px;
	top: 7px;
	transform: scale(0.4);
	transition: opacity 0.18s ease, transform 0.18s ease;
	width: 22px;
}

.espt-block-fit-finder .espt-ff-tick::after {
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	content: "";
	height: 10px;
	left: 8px;
	position: absolute;
	top: 4px;
	transform: rotate(45deg);
	width: 6px;
}

.espt-block-fit-finder .espt-ff-thumb.is-active .espt-ff-tick {
	opacity: 1;
	transform: scale(1);
}

.espt-block-fit-finder .espt-ff-lbl {
	background: var(--lbl-bg, transparent);
	color: var(--lbl-color, var(--bd-ink));
	display: block;
	font-size: var(--lbl-size, 13px);
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
	padding: 8px 8px;
	transition: background 0.18s ease, color 0.18s ease;
}

.espt-block-fit-finder .espt-ff-thumb:hover .espt-ff-lbl {
	background: var(--lbl-hover-bg, var(--lbl-bg, transparent));
	color: var(--lbl-hover-color, var(--lbl-color, var(--bd-ink)));
}

.espt-block-fit-finder .espt-ff-thumb.is-active .espt-ff-lbl {
	background: var(--lbl-hover-bg, var(--lbl-bg, transparent));
	color: var(--lbl-hover-color, var(--lbl-color, var(--bd-ink)));
}

/* --------------------------------------------------- selector: slider */

.espt-block-fit-finder .espt-ff-slider {
	position: relative;
}

.espt-block-fit-finder .espt-ff-selslider { margin: 0 0 16px; }

.espt-block-fit-finder.is-sel-layout-slider .espt-ff-selslider .espt-ff-grid {
	-webkit-overflow-scrolling: touch;
	display: flex;
	grid-template-columns: none;
	margin: 0;
	overflow-x: auto;
	padding: 2px 2px 8px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.espt-block-fit-finder.is-sel-layout-slider .espt-ff-thumb {
	scroll-snap-align: start;
}

.espt-block-fit-finder.is-sel-layout-slider.is-sel-size-by-fixed .espt-ff-thumb {
	flex: 0 0 var(--sel-slide-width, 130px);
}

.espt-block-fit-finder.is-sel-layout-slider.is-sel-size-by-perview .espt-ff-thumb {
	flex: 0 0 calc((100% - (var(--sel-per-view, 2) - 1) * var(--sel-gap, 10px)) / var(--sel-per-view, 2));
}

/* -------------------------------------------------------------- arrows */

.espt-block-fit-finder .espt-ff-arw {
	-webkit-appearance: none;
	align-items: center;
	appearance: none;
	background: var(--arrow-bg, var(--bd-box-bg));
	border: 0;
	border-radius: 50%;
	box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.5);
	color: var(--arrow-color, var(--bd-ink));
	cursor: pointer;
	display: flex;
	font-size: var(--arrow-size, 17px);
	height: 2.4em;
	justify-content: center;
	line-height: 1;
	position: absolute;
	top: calc(50% - 1.2em);
	transition: transform 0.15s ease, filter 0.15s ease;
	width: 2.4em;
	z-index: 3;
	-webkit-tap-highlight-color: transparent;
}

.espt-block-fit-finder .espt-ff-arw:hover { filter: brightness(0.96); transform: scale(1.06); }
.espt-block-fit-finder .espt-ff-arw-prev { left: 4px; }
.espt-block-fit-finder .espt-ff-arw-next { right: 4px; }
.espt-block-fit-finder .espt-ff-slider.is-static .espt-ff-arw { display: none; }

/* both tracks reserve 8px at the bottom for the scrollbar — lift the arrows
   by half of it so they stay centred on the cards, not on the wrapper. */
.espt-block-fit-finder .espt-ff-selslider .espt-ff-arw,
.espt-block-fit-finder .espt-ff-altslider .espt-ff-arw {
	top: calc(50% - 1.2em - 4px);
}

/* -------------------------------------------------------- result panel */

.espt-block-fit-finder .espt-ff-res {
	--ff-res: var(--ok-color, var(--bd-primary));
	align-items: flex-start;
	background: var(--res-bg, var(--bd-box-bg));
	border: var(--res-bw, 1px) solid var(--res-bc, var(--bd-line));
	border-left: 5px solid var(--ff-res);
	border-radius: var(--res-radius, 12px);
	display: none;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: var(--res-pad, 14px);
	position: relative;
}

.espt-block-fit-finder .espt-ff-res--no { --ff-res: var(--no-color, var(--bd-danger)); }

.espt-block-fit-finder .espt-ff-res.is-shown {
	animation: espt-ff-in 0.35s ease;
	display: flex;
}

@keyframes espt-ff-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.espt-block-fit-finder .espt-ff-badge {
	align-items: center;
	background: color-mix(in srgb, var(--ff-res) 15%, transparent);
	border-radius: 50%;
	color: var(--ff-res);
	display: flex;
	flex: none;
	font-size: 20px;
	height: 2.2em;
	justify-content: center;
	width: 2.2em;
}

.espt-block-fit-finder .espt-ff-badge .espt-ic svg {
	height: 1.1em;
	stroke-width: 2.6;
	width: 1.1em;
}

.espt-block-fit-finder .espt-ff-res-body {
	flex: 1;
	min-width: 0;
	width: 100%;
}

.espt-block-fit-finder .espt-ff-rt {
	color: var(--ff-res);
	font-size: var(--rt-size, 19px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.espt-block-fit-finder .espt-ff-rm {
	color: var(--bd-body);
	font-size: var(--rm-size, 15px);
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-fit-finder .espt-ff-close {
	-webkit-appearance: none;
	align-items: center;
	appearance: none;
	background: var(--bd-soft);
	border: 0;
	border-radius: 50%;
	color: var(--bd-ink);
	cursor: pointer;
	display: none;
	font-size: 22px;
	height: 36px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 36px;
	z-index: 5;
	-webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------- "fits" extras */

.espt-block-fit-finder .espt-ff-fit { margin-top: 14px; }

.espt-block-fit-finder .espt-ff-gal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fit-gal-gap, 10px);
	margin-bottom: 12px;
}

.espt-block-fit-finder .espt-ff-gal-item {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	cursor: zoom-in;
	line-height: 0;
	max-width: 100%;
	min-width: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

/* with the lightbox off the images are the flex items themselves — they must
   still be allowed to shrink below their set width on a narrow phone. */
.espt-block-fit-finder .espt-ff-gal > .espt-ff-fit-img { min-width: 0; }

.espt-block-fit-finder .espt-ff-fit-img {
	border-radius: var(--fit-img-radius, 12px);
	display: block;
	height: auto;
	max-width: 100%;
	transition: transform 0.2s ease;
	width: var(--fit-img-w, 220px);
}

.espt-block-fit-finder .espt-ff-gal .espt-ff-fit-img { margin-bottom: 0; }
.espt-block-fit-finder .espt-ff-gal-item:hover .espt-ff-fit-img { transform: scale(1.03); }

.espt-block-fit-finder.is-fit-crop .espt-ff-fit-img {
	height: var(--fit-img-h, 200px);
	object-fit: cover;
}

.espt-block-fit-finder .espt-ff-fit-btn {
	background: var(--fitbtn-bg, var(--espt-btn-bg, var(--bd-primary)));
	border-radius: var(--fitbtn-radius, 9px);
	color: var(--fitbtn-color, #fff);
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 12px 26px;
	text-decoration: none;
	transition: filter 0.18s ease, transform 0.18s ease;
}

.espt-block-fit-finder .espt-ff-fit-btn:hover {
	color: var(--fitbtn-color, #fff);
	filter: brightness(1.07);
	transform: translateY(-1px);
}

/* ----------------------------------------------- alternative products */

.espt-block-fit-finder .espt-ff-alts { margin-top: 14px; }

.espt-block-fit-finder .espt-ff-alts-h {
	color: var(--bd-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 9px;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-fit-finder .espt-ff-cards {
	display: grid;
	gap: var(--alt-gap, 8px);
	grid-template-columns: repeat(var(--alt-columns, 2), minmax(0, 1fr));
}

.espt-block-fit-finder .espt-ff-card {
	background: var(--card-bg, var(--bd-box-bg));
	border: 1px solid var(--card-border, var(--bd-line));
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.espt-block-fit-finder .espt-ff-card:hover {
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.5);
	transform: translateY(-2px);
}

.espt-block-fit-finder .espt-ff-card-im { display: block; line-height: 0; }

.espt-block-fit-finder .espt-ff-card-im img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.espt-block-fit-finder .espt-ff-card-tx { display: block; min-width: 0; }

.espt-block-fit-finder .espt-ff-card-nm {
	color: var(--card-name-color, var(--bd-ink));
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
	padding: 8px 9px 2px;
}

.espt-block-fit-finder .espt-ff-card-pr {
	color: var(--card-price-color, var(--bd-primary));
	display: block;
	font-size: 13px;
	font-weight: 800;
	padding: 0 9px 9px;
}

.espt-block-fit-finder .espt-ff-card-pr del { font-weight: 500; margin-right: 0.35em; opacity: 0.5; }
.espt-block-fit-finder .espt-ff-card-pr ins { text-decoration: none; }

.espt-block-fit-finder .espt-ff-card-btn {
	background: var(--cardbtn-bg, var(--espt-btn-bg, var(--bd-primary)));
	border-radius: var(--cardbtn-radius, 7px);
	color: var(--cardbtn-color, #fff);
	display: block;
	font-size: 12px;
	font-weight: 700;
	margin: 2px 9px 9px;
	overflow-wrap: anywhere;
	padding: 7px 6px;
	text-align: center;
	transition: background 0.18s ease, color 0.18s ease;
}

.espt-block-fit-finder .espt-ff-card:hover .espt-ff-card-btn {
	background: var(--cardbtn-bg-hover, var(--cardbtn-bg, var(--bd-primary-dark)));
	color: var(--cardbtn-color-hover, var(--cardbtn-color, #fff));
}

.espt-block-fit-finder .espt-ff-more {
	background: var(--more-bg, var(--bd-deep));
	border-radius: 8px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	margin-top: 12px;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 11px 22px;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.espt-block-fit-finder .espt-ff-more:hover { color: #fff; opacity: 0.88; }

/* card design 02 — horizontal */
.espt-block-fit-finder.is-card-design-horizontal .espt-ff-card { align-items: stretch; flex-direction: row; }
.espt-block-fit-finder.is-card-design-horizontal .espt-ff-card-im { flex: 0 0 42%; min-width: 0; }
.espt-block-fit-finder.is-card-design-horizontal .espt-ff-card-im img { aspect-ratio: auto; height: 100%; }
.espt-block-fit-finder.is-card-design-horizontal .espt-ff-card-tx { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; }
.espt-block-fit-finder.is-card-design-horizontal .espt-ff-card-nm { padding: 6px 8px 2px; }
.espt-block-fit-finder.is-card-design-horizontal .espt-ff-card-pr { padding: 0 8px; }
.espt-block-fit-finder.is-card-design-horizontal .espt-ff-card-btn { align-self: flex-start; margin: 6px 8px 8px; padding: 5px 12px; }

/* card design 03 — image overlay */
.espt-block-fit-finder.is-card-design-overlay .espt-ff-card-im img { aspect-ratio: 1; filter: brightness(0.72); }
.espt-block-fit-finder.is-card-design-overlay .espt-ff-card-tx { background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); bottom: 0; left: 0; padding: 9px; position: absolute; right: 0; }
.espt-block-fit-finder.is-card-design-overlay .espt-ff-card-nm { color: #fff; padding: 0; }
.espt-block-fit-finder.is-card-design-overlay .espt-ff-card-pr { color: #fff; padding: 2px 0 0; }
.espt-block-fit-finder.is-card-design-overlay .espt-ff-card-btn { font-size: 11px; margin: 0; padding: 4px 9px; position: absolute; right: 8px; top: 8px; }

/* card design 04 — minimal */
.espt-block-fit-finder.is-card-design-minimal .espt-ff-card { background: transparent; border: 0; }
.espt-block-fit-finder.is-card-design-minimal .espt-ff-card-im img { border-radius: 10px; }
.espt-block-fit-finder.is-card-design-minimal .espt-ff-card-nm { padding: 6px 2px 0; }
.espt-block-fit-finder.is-card-design-minimal .espt-ff-card-pr { padding: 0 2px; }
.espt-block-fit-finder.is-card-design-minimal .espt-ff-card-btn { background: transparent; border: 1px solid currentColor; color: var(--cardbtn-bg, var(--bd-primary)); margin: 7px 2px 0; }
.espt-block-fit-finder.is-card-design-minimal .espt-ff-card:hover .espt-ff-card-btn { background: var(--cardbtn-bg, var(--espt-btn-bg, var(--bd-primary))); color: var(--cardbtn-color, #fff); }

/* alternatives: slider */
.espt-block-fit-finder.is-alt-layout-slider .espt-ff-cards {
	-webkit-overflow-scrolling: touch;
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	padding: 2px 2px 8px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.espt-block-fit-finder.is-alt-layout-slider .espt-ff-card { scroll-snap-align: start; }
.espt-block-fit-finder.is-alt-layout-slider.is-alt-size-by-fixed .espt-ff-card { flex: 0 0 var(--alt-slide-width, 140px); }
.espt-block-fit-finder.is-alt-layout-slider.is-alt-size-by-perview .espt-ff-card { flex: 0 0 calc((100% - (var(--alt-per-view, 2) - 1) * var(--alt-gap, 8px)) / var(--alt-per-view, 2)); }
.espt-block-fit-finder.is-alt-layout-slider .espt-ff-card-nm { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; }

/* --------------------------------------------------------- popup mode */

.espt-block-fit-finder.is-result-mode-popup .espt-ff-results,
.espt-block-fit-finder.is-result-mode-popupm .espt-ff-results {
	align-items: center;
	background: rgba(15, 23, 42, 0.62);
	display: none;
	inset: 0;
	justify-content: center;
	padding: 14px;
	position: fixed;
	z-index: 99999;
}

.espt-block-fit-finder.is-result-mode-popup.is-ff-open .espt-ff-results,
.espt-block-fit-finder.is-result-mode-popupm.is-ff-open .espt-ff-results {
	display: flex;
}

.espt-block-fit-finder.is-result-mode-popup .espt-ff-res,
.espt-block-fit-finder.is-result-mode-popupm .espt-ff-res {
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
	max-height: 86vh;
	max-width: 520px;
	overflow: auto;
	width: 100%;
}

.espt-block-fit-finder.is-result-mode-popup .espt-ff-close,
.espt-block-fit-finder.is-result-mode-popupm .espt-ff-close {
	display: flex;
}

.espt-block-fit-finder.is-result-mode-popup .espt-ff-rt,
.espt-block-fit-finder.is-result-mode-popupm .espt-ff-rt {
	padding-right: 48px;
}

/* the modal portal mounted on <body> */
.espt-block-fit-finder.espt-ff-portal {
	margin: 0;
	max-width: none;
	width: auto;
}

/* ----------------------------------------------------------- lightbox */

.espt-block-fit-finder .espt-ff-lb {
	align-items: center;
	background: rgba(10, 14, 12, 0.9);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 22px;
	position: fixed;
	z-index: 999999;
}

.espt-block-fit-finder .espt-ff-lb img {
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	max-height: 84vh;
	/* 100% of the padded overlay, never 9x vw — that would spill into the pad. */
	max-width: 100%;
	min-width: 0;
	object-fit: contain;
}

.espt-block-fit-finder .espt-ff-lb-btn {
	-webkit-appearance: none;
	align-items: center;
	appearance: none;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 50%;
	color: #12211c;
	cursor: pointer;
	display: flex;
	font-size: 22px;
	height: 40px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	width: 40px;
	-webkit-tap-highlight-color: transparent;
}

.espt-block-fit-finder .espt-ff-lb-x { right: 14px; top: 14px; }
.espt-block-fit-finder .espt-ff-lb-p { left: 10px; top: 50%; transform: translateY(-50%); }
.espt-block-fit-finder .espt-ff-lb-n { right: 10px; top: 50%; transform: translateY(-50%); }

.espt-block-fit-finder .espt-ff-lb-n2 {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	bottom: 16px;
	color: #fff;
	font-size: 13px;
	left: 50%;
	padding: 5px 12px;
	position: absolute;
	transform: translateX(-50%);
}

/* page scroll-lock while a modal / lightbox is open (the class is set on
   <html> by assets/js/blocks/fit-finder.js; body is locked too because on
   several themes body — not html — is the scrolling element) */
html.espt-ff-locked,
html.espt-ff-locked body { overflow: hidden; }

/* ---------------------------------------------------------- ≥ 768px */

@media (min-width: 768px) {

	.espt-block-fit-finder .espt-ff-head { margin-bottom: 18px; }

	.espt-block-fit-finder .espt-ff-res {
		align-items: flex-start;
		flex-direction: row;
		gap: 14px;
	}

	/* "popup on mobile only" falls back to the inline panel. The :not() keeps
	   a modal that is still mounted in the body portal (a phone rotated to
	   tablet width before the JS closes it) a proper overlay instead of
	   dumping it, un-positioned, at the end of the page. */
	.espt-block-fit-finder.is-result-mode-popupm:not(.espt-ff-portal) .espt-ff-results {
		background: none;
		display: block;
		inset: auto;
		padding: 0;
		position: static;
		z-index: auto;
	}

	.espt-block-fit-finder.is-result-mode-popupm:not(.espt-ff-portal) .espt-ff-res {
		box-shadow: none;
		max-height: none;
		max-width: none;
		overflow: visible;
	}

	.espt-block-fit-finder.is-result-mode-popupm:not(.espt-ff-portal) .espt-ff-close { display: none; }
	.espt-block-fit-finder.is-result-mode-popupm:not(.espt-ff-portal) .espt-ff-rt { padding-right: 0; }

	.espt-block-fit-finder .espt-ff-card-nm,
	.espt-block-fit-finder .espt-ff-card-pr { font-size: 14px; }

	.espt-block-fit-finder .espt-ff-lb { padding: 34px; }
}

/* --------------------------------------------------------- ≥ 1024px */

@media (min-width: 1024px) {

	.espt-block-fit-finder .espt-ff-hint span { font-size: 14px; }
	.espt-block-fit-finder .espt-ff-alts-h { font-size: 13px; }
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {

	.espt-block-fit-finder .espt-ff-thumb,
	.espt-block-fit-finder .espt-ff-tick,
	.espt-block-fit-finder .espt-ff-card,
	.espt-block-fit-finder .espt-ff-lbl,
	.espt-block-fit-finder .espt-ff-fit-img,
	.espt-block-fit-finder .espt-ff-fit-btn,
	.espt-block-fit-finder .espt-ff-arw {
		transition: none;
	}

	.espt-block-fit-finder .espt-ff-res.is-shown { animation: none; }
	.espt-block-fit-finder .espt-ff-thumb:hover,
	.espt-block-fit-finder .espt-ff-card:hover,
	.espt-block-fit-finder .espt-ff-fit-btn:hover,
	.espt-block-fit-finder .espt-ff-arw:hover { transform: none; }
	.espt-block-fit-finder .espt-ff-gal-item:hover .espt-ff-fit-img { transform: none; }
}