/*!
 * Plokk robot-mower garage fit checker — scoped styles (.pmf namespace).
 * Everything is namespaced so it cannot leak into Neve/Elementor styles, and
 * every value is a CSS custom property so the accent can be themed per site.
 */
.pmf {
	--pmf-accent: #2f6b3a;
	--pmf-accent-ink: #fff;
	--pmf-ink: #1d2327;
	--pmf-muted: #5c6670;
	--pmf-line: #dfe3e6;
	--pmf-bg: #fff;
	--pmf-soft: #f6f7f8;
	--pmf-ok-bg: #edf7ee;
	--pmf-ok-line: #7cb083;
	--pmf-warn-bg: #fdf6e3;
	--pmf-warn-line: #e0b545;
	--pmf-no-bg: #fdeeee;
	--pmf-no-line: #d98b8b;
	--pmf-radius: 10px;

	box-sizing: border-box;
	margin: 28px 0;
	padding: 20px;
	border: 1px solid var(--pmf-line);
	border-radius: var(--pmf-radius);
	background: var(--pmf-bg);
	color: var(--pmf-ink);
	font-size: 16px;
	line-height: 1.5;
}
.pmf *,
.pmf *::before,
.pmf *::after { box-sizing: border-box; }

.pmf-title {
	margin: 0 0 6px;
	font-size: 1.35em;
	line-height: 1.25;
	font-weight: 700;
	color: var(--pmf-ink);
}
.pmf-intro {
	margin: 0 0 16px;
	color: var(--pmf-muted);
	font-size: .95em;
}

/* ---- controls -------------------------------------------------------- */
.pmf-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
.pmf-field-grow {
	position: relative;
	flex: 1 1 260px;
	min-width: 0;
}
.pmf-brand,
.pmf-search,
.pmf-num {
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--pmf-line);
	border-radius: 8px;
	background: var(--pmf-bg);
	color: var(--pmf-ink);
	font: inherit;
	font-size: .97em;
}
.pmf-brand { flex: 0 1 200px; width: auto; min-width: 150px; }
.pmf-brand:focus,
.pmf-search:focus,
.pmf-num:focus {
	outline: 2px solid var(--pmf-accent);
	outline-offset: 1px;
	border-color: var(--pmf-accent);
}

.pmf-list {
	display: none;
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 300px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--pmf-line);
	border-radius: 8px;
	background: var(--pmf-bg);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.pmf-list.pmf-open { display: block; }
.pmf-opt {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 9px 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--pmf-soft);
}
.pmf-opt:last-child { border-bottom: 0; }
.pmf-opt:hover,
.pmf-opt:focus { background: var(--pmf-soft); }
.pmf-opt-model { font-weight: 600; }
.pmf-opt-brand { color: var(--pmf-muted); font-size: .85em; white-space: nowrap; }
.pmf-empty { padding: 12px; color: var(--pmf-muted); }

/* ---- result card ----------------------------------------------------- */
.pmf-result:empty { display: none; }
.pmf-card {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--pmf-line);
	border-left-width: 5px;
	border-radius: 8px;
	background: var(--pmf-soft);
}
.pmf-card.pmf-ok { background: var(--pmf-ok-bg); border-left-color: var(--pmf-ok-line); }
.pmf-card.pmf-warn { background: var(--pmf-warn-bg); border-left-color: var(--pmf-warn-line); }
.pmf-card.pmf-no { background: var(--pmf-no-bg); border-left-color: var(--pmf-no-line); }

.pmf-card-head { display: flex; gap: 12px; align-items: flex-start; }
.pmf-icon { font-size: 1.6em; line-height: 1.1; }
.pmf-model-name { font-size: .85em; color: var(--pmf-muted); }
.pmf-verdict { margin: 0; font-size: 1.15em; font-weight: 700; line-height: 1.3; }
.pmf-range-name { font-size: .9em; color: var(--pmf-muted); }
.pmf-body { margin: 10px 0 0; font-size: .95em; }

.pmf-reasons { margin: 10px 0 0; padding-left: 20px; font-size: .95em; }
.pmf-reasons li { margin: 4px 0; }
.pmf-hint {
	margin: 10px 0 0;
	font-size: .88em;
	color: var(--pmf-muted);
}

/* ---- dimension table ------------------------------------------------- */
.pmf-dims { margin-top: 12px; font-size: .9em; }
.pmf-dims > summary {
	cursor: pointer;
	color: var(--pmf-muted);
	padding: 4px 0;
}
.pmf-dims-body { padding-top: 6px; }
.pmf-dim-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	justify-content: space-between;
	padding: 5px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.pmf-dim-row:last-child { border-bottom: 0; }
.pmf-dim-k { color: var(--pmf-muted); }
.pmf-dim-v { font-variant-numeric: tabular-nums; }
.pmf-dims-sub {
	margin-top: 10px;
	padding: 6px 0 2px;
	font-weight: 600;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}
/* Mower size shown inline next to the model name — quieter than the name. */
.pmf-model-dims { color: var(--pmf-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- CTAs ------------------------------------------------------------ */
.pmf-actions { margin-top: 14px; }
.pmf-alt-heading { margin: 16px 0 8px; font-weight: 600; font-size: .95em; }
.pmf-alts { display: flex; flex-direction: column; gap: 8px; }

.pmf-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--pmf-line);
	border-radius: 8px;
	background: var(--pmf-bg);
	color: var(--pmf-ink);
	font: inherit;
	font-size: .95em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.pmf-btn:hover,
.pmf-btn:focus-visible {
	border-color: var(--pmf-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	text-decoration: none;
	color: var(--pmf-ink);
}
.pmf-btn-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pmf-btn-thumb { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; border-radius: 5px; background: #fff; }
.pmf-btn-label { display: flex; flex-direction: column; min-width: 0; }
.pmf-btn-name { font-weight: 600; }
.pmf-btn-meta { color: var(--pmf-muted); font-size: .85em; }
.pmf-btn-cta { flex: 0 0 auto; color: var(--pmf-accent); font-weight: 600; white-space: nowrap; }

.pmf-btn-primary,
.pmf-btn-quote {
	justify-content: center;
	background: var(--pmf-accent);
	border-color: var(--pmf-accent);
	color: var(--pmf-accent-ink);
	font-weight: 600;
}
.pmf-btn-primary:hover, .pmf-btn-primary:focus-visible,
.pmf-btn-quote:hover, .pmf-btn-quote:focus-visible {
	color: var(--pmf-accent-ink);
	filter: brightness(1.08);
}
.pmf-btn-primary .pmf-btn-cta,
.pmf-btn-primary .pmf-btn-meta { color: inherit; opacity: .85; }
.pmf-btn-check { width: auto; min-height: 46px; padding: 10px 20px; }

.pmf-quote-line { margin: 12px 0 0; font-size: .9em; color: var(--pmf-muted); }
.pmf-quote-link { color: var(--pmf-accent); font-weight: 600; }

/* ---- compare rows ---------------------------------------------------- */
.pmf-compare { margin-top: 16px; }
.pmf-compare-head {
	margin: 0 0 10px;
	font-size: 1em;
	font-weight: 700;
}
.pmf-compare-model {
	display: block;
	font-weight: 400;
	font-size: .9em;
	color: var(--pmf-muted);
}
.pmf-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	margin-bottom: 8px;
	border: 1px solid var(--pmf-line);
	border-left-width: 5px;
	border-radius: 8px;
	background: var(--pmf-bg);
	color: var(--pmf-ink);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.pmf-row:hover,
.pmf-row:focus-visible {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	text-decoration: none;
	color: var(--pmf-ink);
}
.pmf-row-fit { border-left-color: var(--pmf-ok-line); background: var(--pmf-ok-bg); }
.pmf-row-cond { border-left-color: var(--pmf-warn-line); background: var(--pmf-warn-bg); }
.pmf-row-no { border-left-color: var(--pmf-no-line); background: var(--pmf-no-bg); }
.pmf-row-unknown { border-left-color: var(--pmf-line); }

.pmf-chip {
	flex: 0 0 auto;
	min-width: 82px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	font-size: .8em;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}
.pmf-row-thumb { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; border-radius: 5px; background: #fff; }
.pmf-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pmf-row-name { font-weight: 600; }
.pmf-row-detail { font-size: .85em; color: var(--pmf-muted); }
.pmf-row-go { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pmf-row-count { font-size: .8em; color: var(--pmf-muted); }
.pmf-row-cta { color: var(--pmf-accent); font-weight: 600; font-size: .9em; white-space: nowrap; }

/* ---- footer + manual panel ------------------------------------------- */
.pmf-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: .9em;
}
.pmf-foot-sep { color: var(--pmf-muted); }
.pmf-foot-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pmf-accent);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
/* Hidden until the widget is actually holding a result/model/brand filter. */
.pmf-reset-wrap { display: none; align-items: center; gap: 8px; }
.pmf-reset-wrap.pmf-reset-on { display: inline-flex; }
.pmf-reset { color: var(--pmf-muted); font-weight: 400; }
.pmf-reset:hover, .pmf-reset:focus-visible { color: var(--pmf-ink); }

.pmf-panel { display: none; margin-top: 12px; padding: 14px; border: 1px solid var(--pmf-line); border-radius: 8px; background: var(--pmf-soft); }
.pmf-panel.pmf-panel-open { display: block; }
.pmf-panel-intro { margin: 0 0 10px; font-size: .9em; color: var(--pmf-muted); }
.pmf-manual-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pmf-manual-grid .pmf-num { flex: 1 1 110px; width: auto; }
.pmf-msg { margin: 8px 0 0; font-size: .9em; color: #b3261e; }
.pmf-footnote { margin: 12px 0 0; font-size: .8em; color: var(--pmf-muted); }

/* ---- narrow screens -------------------------------------------------- */
@media (max-width: 600px) {
	.pmf { padding: 16px; margin: 20px 0; }
	.pmf-brand { flex: 1 1 100%; width: 100%; }
	.pmf-field-grow { flex: 1 1 100%; }
	.pmf-row { flex-wrap: wrap; gap: 8px 10px; }
	.pmf-chip { order: 1; }
	.pmf-row-thumb { order: 2; }
	.pmf-row-main { order: 4; flex: 1 1 100%; }
	.pmf-row-go { order: 3; margin-left: auto; }
	.pmf-btn { flex-wrap: wrap; }
	.pmf-btn-cta { margin-left: 50px; }
	.pmf-manual-grid .pmf-num { flex: 1 1 100%; }
	.pmf-btn-check { width: 100%; }
}

/* No prefers-color-scheme block on purpose: plokk.ee (Neve) is a light-only
 * theme, so honouring a visitor's dark OS setting would leave a dark widget
 * marooned in a light page. Recolour via the --pmf-* properties instead. */