/* Listings — mobile overrides. MUST load after archive/filters/results; order
   is fixed by the dependency chain in ListingsModule::STYLES. */

/* Below 900px */

@media (max-width: 900px) {
	.mf-archive__bar {
		gap: 10px;
	}

	/* "Snelfilters" caption is desktop-only. */
	.mf-quickfilters__label {
		display: none;
	}

	/* A touch more air between the search row and the pill row. */
	.mf-quickfilters {
		margin-top: 12px;
	}

	.mf-quickfilters__row {
		flex-wrap: nowrap;
		gap: 6px;
	}

	/* Name .mf-chip--quick explicitly: filters.css re-declares its padding later,
	   so the pills would keep the desktop padding. */
	.mf-quickfilters__row .mf-chip,
	.mf-quickfilters__row .mf-chip--quick {
		padding: 8px 12px;
	}

	/* Compact square icon button; the search takes the rest of the row. */
	.mf-archive__filter-trigger {
		padding: 0;
		width: 46px;
		height: 46px;
		justify-content: center;
		border-radius: 14px;
		gap: 0;
	}

	/* Target the label by name — a blanket span rule also swallows the count badge. */
	.mf-archive__filter-trigger-label {
		display: none;
	}

	/* Match the heart to the compact controls so the single row lines up. */
	.mf-archive__bar .mf-fav-open {
		width: 46px;
		height: 46px;
	}

	/* Keep the badge inside the sticky band's 8px top padding. */
	.mf-archive__filter-trigger-count {
		top: -7px;
		right: -7px;
		min-width: 21px;
		height: 21px;
		padding: 0 6px;
		font-size: 0.74rem;
	}

	.mf-archive__search .mf-archive__search-input {
		height: 46px;
		font-size: 0.95rem;
		padding-inline: 48px 16px !important;
	}

	.mf-archive__search-icon {
		left: 18px;
		width: 18px;
		height: 18px;
	}

	.mf-chip {
		padding: 8px 14px;
		font-size: 0.84rem;
		border-radius: 10px;
	}

	/* Pills scale down as one row to fit (archive.js sets --mf-qf-scale). A transform
	   keeps the unscaled height reserved, so JS also sets --mf-qf-shrink as a negative margin. */
	.mf-quickfilters__row {
		transform: scale(var(--mf-qf-scale, 1));
		transform-origin: left center;
		margin-bottom: var(--mf-qf-shrink, 0px);
	}
}