/* =====================================================================
   Archive listings - full redesign
   - Full-bleed layout (Neighbor-style)
   - Search integrated into site header
   - Sticky filter bar + sticky map
   - Mobile: map hidden behind "Vis kort" toggle
===================================================================== */

.stowly-archive {
	background: var(--stowly-color-page);
	min-height: calc(100vh - var(--stowly-header-height));
}

.stowly-archive__inner {
	max-width: var(--stowly-container);
	margin: 0 auto;
	padding: 24px 24px 80px;
	box-sizing: border-box;
	width: 100%;
}

/* Cap the archive content to a laptop-screen width so the page never
   stretches wider than ~1440px on large monitors — the site header
   wrapper and the filter strip (both nested inside / inheriting from
   this inner) follow the same cap, while their visual backgrounds
   (set on outer wrappers) still span the full viewport.
   The 24px horizontal padding is intentionally the same as the site
   header's padding so every child element (filter strip underline,
   listings column, map aside) aligns with the header content above. */
body.stowly-archive-layout .stowly-archive__inner {
	max-width: var(--stowly-container-archive);
	margin: 0 auto;
	padding: 0 24px;
}

body.stowly-archive-layout .stowly-archive {
	padding-bottom: 0;
}

/* Strip ALL top spacing from Astra wrappers so the sticky filter bar
   can sit directly under the site header (flush, no gap). */
body.stowly-archive-layout #page,
body.stowly-archive-layout #content,
body.stowly-archive-layout #primary,
body.stowly-archive-layout .site-content,
body.stowly-archive-layout .site-main,
body.stowly-archive-layout .ast-container,
body.stowly-archive-layout .ast-container-fluid,
body.stowly-archive-layout .entry-content,
body.stowly-archive-layout .ast-page-header-section,
body.stowly-archive-layout .ast-archive-description,
body.stowly-archive-layout main.site-main,
body.stowly-archive-layout main.stowly-archive,
body.stowly-archive-layout .stowly-archive,
body.stowly-archive-layout .stowly-archive__inner {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Also hide Astra's default page/archive title header if present. */
body.stowly-archive-layout .ast-archive-title,
body.stowly-archive-layout .ast-page-header-section,
body.stowly-archive-layout .ast-archive-description {
	display: none !important;
}

/* Arkiv: klassisk fuldbred header (ingen floating-pille fra global.css). */
body.stowly-archive-layout .stowly-site-header__inner {
	max-width: var(--stowly-container-archive);
	margin: 0 auto;
	padding: 10px 24px;
	gap: 16px;
}

@media (min-width: 901px) {
	body.stowly-archive-layout .stowly-site-header__inner {
		padding: 10px 24px;
	}

	body.stowly-archive-layout .stowly-site-header {
		height: auto;
		min-height: 0;
		padding: 0;
		background: var(--stowly-color-surface);
		border-bottom: 1px solid var(--stowly-color-line);
		box-shadow: none;
		overflow: visible;
	}

	body.stowly-archive-layout .stowly-site-header.is-scrolled {
		box-shadow: var(--stowly-shadow-sm);
	}

	body.stowly-archive-layout .stowly-site-header.is-scrolled .stowly-site-header__inner {
		box-shadow: none;
		border-color: transparent;
	}

	body.stowly-archive-layout .stowly-site-header__inner {
		height: auto;
		min-height: 0;
		overflow: visible;
		border-radius: 0;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		box-shadow: none;
	}
}

/* Arkiv-header søgepille (desktop): samme visuelle højde som 44px ikon-knapper. */
@media (min-width: 769px) {
	body.stowly-archive-layout .stowly-site-header {
		overflow: visible;
	}

	/* Udvidet søgning: layout-højde låst — ekstra højde vises via ::after (skubber ikke body). */
	body.stowly-archive-layout .stowly-site-header.is-header-search-expanded {
		height: var(--stowly-header-collapsed-height, var(--stowly-header-height, 76px));
		min-height: 0;
		overflow: visible;
		margin-bottom: 0;
		border-bottom-color: transparent;
	}

	body.stowly-archive-layout .stowly-site-header.is-header-search-expanded::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: var(--stowly-header-expanded-extra, 0px);
		background: var(--stowly-color-surface);
		border-bottom: 1px solid var(--stowly-color-line);
		pointer-events: none;
		transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}

	body.stowly-archive-layout .stowly-site-header.is-header-search-expanded .stowly-site-header__inner {
		height: auto;
		overflow: visible;
	}

	body.stowly-archive-layout .stowly-archive-header-toolbar {
		overflow: visible;
		position: relative;
		z-index: 2;
	}

	/* Lås header-grid-rækken til søgepillens højde (44px). Logo, pill og
	   højre-knapper deles samme min-height + align-items: center. */
	body.stowly-archive-layout .stowly-site-header__inner {
		grid-template-rows: 44px;
		overflow: visible;
	}

	body.stowly-archive-layout .stowly-site-header__right {
		min-height: 44px;
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header {
		justify-self: center;
		width: 100%;
		max-width: min(520px, 100%);
		padding: 3px;
		min-height: 44px;
		align-items: center;
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header.is-search-expanded {
		max-width: min(780px, 100%);
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header .stowly-header-search__segment {
		min-height: 36px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	/* Arkiv-header: 34×34 ikon-knap når pillen er lukket (kompakt i header-baren).
	 * Skilt fra forsidens 48×48 via `stowly-header-search--archive-header`. */
	.stowly-site-header--archive form.stowly-header-search--archive-header:not(.is-search-expanded) .stowly-header-search__submit {
		width: 34px !important;
		min-width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		padding: 0 !important;
		margin: 0 3px 0 4px;
		border-radius: 50% !important;
		flex: 0 0 34px;
		gap: 0;
	}

	.stowly-site-header--archive form.stowly-header-search--archive-header.is-search-expanded .stowly-header-search__submit {
		min-height: 48px !important;
		padding: 0 18px !important;
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header.is-search-expanded .stowly-header-search__segment {
		height: 56px;
		min-height: 56px;
		max-height: 56px;
		padding: 8px 30px 8px 18px;
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search--archive-header.is-search-expanded {
		height: 66px;
		min-height: 66px;
		max-height: 66px;
		padding: 3px;
	}
}

/* "Hvor"-input'et arver ellers en fast søgefelt-højde (~40px) og gør
   "Hvor"-segmentet højere end "Vælg type"/"Startmåned". height:auto lader
   det falde til tekstens linjehøjde, så alle tre segmenter — og dermed den
   grå hover-/aktiv-flade — bliver lige høje. */
body.stowly-archive-layout .stowly-site-header .stowly-header-search__inline-input {
	height: auto;
	min-height: 1.5em !important;
	overflow: visible;
}

/* Ens skriftstørrelse + linjehøjde på "Hvor" (input) og "Opbevaringstype"
   (toggle), så både teksten og den grå hover-/aktiv-flade bliver identiske
   på de to felter. */
body.stowly-archive-layout .stowly-site-header .stowly-header-search__inline-input,
body.stowly-archive-layout .stowly-site-header .stowly-header-search__toggle,
body.stowly-archive-layout .stowly-site-header .stowly-header-search__value {
	font-size: 14px;
	line-height: 1.25;
}

@media (max-width: 768px) {
	body.stowly-archive-layout .stowly-site-header .stowly-header-search__inline-input,
	body.stowly-archive-layout .stowly-site-header .stowly-header-search__toggle,
	body.stowly-archive-layout .stowly-site-header .stowly-header-search__value {
		font-size: 16px;
	}
}

/* ---------- Filters form wrapper ---------- */

.stowly-filters {
	display: grid;
	gap: 14px;
	margin: 20px 0 28px;
}

/* On the archive, the filters strip becomes sticky directly under the
   site header. The whole form is stickied so the tabs + their panels
   always travel together as the user scrolls. */
body.stowly-archive-layout .stowly-filters {
	position: sticky;
	top: var(--stowly-header-height);
	z-index: 30;
	margin: 0 !important;
	gap: 0;
	background: var(--stowly-color-page);
	border-top: 0;
	border-bottom: 1px solid var(--stowly-color-line);
}

body.stowly-archive-layout .stowly-filters-header-row {
	padding: 8px 0;
	margin: 0;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
	gap: 12px;
}

body.stowly-archive-layout .stowly-filter-panels {
	position: relative;
	height: 0;
}

body.stowly-archive-layout .stowly-filter-panel {
	top: 6px;
	left: 0;
}

/* Footer-knappen er kun til mobil-sheet — desktop-flyout lukker ved
   klik udenfor, så Anvend ville bare være støj. Mobile @media-blokken
   nedenfor (max-width: 768px) tænder displayet igen. */
.stowly-filter-panel__footer {
	display: none;
}

/* Desktop/tablet: fanepaneler skal ligge over body-overlay (z:25), ellers fanger overlay alle klik.
   (Inde i main er z:30 på .stowly-filters underordnet overlay-lag — se stacking contexts.) */
@media (min-width: 769px) {
	body.stowly-archive-layout.stowly-filter-open .stowly-filters {
		z-index: 40 !important;
	}
	body.stowly-archive-layout.stowly-filter-open .stowly-filter-overlay.is-active {
		z-index: 24 !important;
		background: transparent !important;
	}
}

/* ---------- Search toolbar (pill with labels) ---------- */

.stowly-search-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: stretch;
	position: relative;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-pill);
	padding: 6px;
	box-shadow: var(--stowly-shadow-sm);
	margin: 26px 0 0;
}

.stowly-toolbar-address,
.stowly-toolbar-what {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 20px;
	min-width: 0;
	margin: 0;
	min-height: 52px;
	border: 0;
	background: transparent;
	box-shadow: none;
	filter: none;
	border-radius: var(--stowly-radius-pill);
	transition: background var(--stowly-transition);
}

.stowly-toolbar-address + .stowly-toolbar-what::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 55%;
	background: var(--stowly-color-line);
	transition: opacity var(--stowly-transition);
}

.stowly-toolbar-address:hover,
.stowly-toolbar-what:hover,
.stowly-toolbar-address:focus-within,
.stowly-toolbar-what:focus-within {
	background: var(--stowly-color-surface-soft);
}

.stowly-toolbar-address:hover + .stowly-toolbar-what::before,
.stowly-toolbar-what:hover::before,
.stowly-toolbar-address:focus-within + .stowly-toolbar-what::before,
.stowly-toolbar-what:focus-within::before {
	opacity: 0;
}

.stowly-toolbar-address select,
.stowly-toolbar-select-trigger {
	box-shadow: none !important;
	filter: none;
}

.stowly-toolbar-address select:hover,
.stowly-toolbar-address select:focus,
.stowly-toolbar-select-trigger:hover,
.stowly-toolbar-select-trigger:focus {
	background: transparent;
	box-shadow: none;
}

.stowly-toolbar-label {
	position: absolute;
	top: -22px;
	left: 20px;
	font-size: 11px;
	font-weight: 700;
	color: var(--stowly-color-ink-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

.stowly-toolbar-address select,
.stowly-toolbar-select-trigger {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--stowly-color-ink);
	cursor: pointer;
	width: 100%;
	min-width: 0;
	min-height: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.stowly-toolbar-address select:focus,
.stowly-toolbar-select-trigger:focus {
	outline: 0;
	box-shadow: none;
}

.stowly-toolbar-submit {
	align-self: stretch;
	justify-self: end;
	padding: 0 22px;
	border: 0;
	border-radius: var(--stowly-radius-pill);
	background: var(--stowly-color-primary);
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color var(--stowly-transition), box-shadow var(--stowly-transition);
}

.stowly-toolbar-submit:hover {
	background: var(--stowly-color-primary-hover);
	box-shadow: var(--stowly-shadow-sm);
	color: #fff;
}

.stowly-toolbar-submit::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
}

/* ---------- Quick toggles (inline with filter tabs) ---------------
 * On/off toggles live on the same row as the dropdown filter tabs but
 * signal their binary nature with a switch glyph and a tiny divider
 * separating them from the panel-opening tabs. */

.stowly-filter-toggle {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 10px;
	white-space: nowrap;
	border: 1px solid var(--stowly-color-line-strong, #d8d5d2);
	border-radius: var(--stowly-radius-pill, 999px);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink, #1b1b1f);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: border-color var(--stowly-transition), background var(--stowly-transition), color var(--stowly-transition), box-shadow var(--stowly-transition);
}

.stowly-filter-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.stowly-filter-toggle__switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--stowly-color-ink-soft, #8a8780);
	transition: color var(--stowly-transition), transform var(--stowly-transition);
}

.stowly-filter-toggle__switch svg {
	display: block;
}

.stowly-filter-toggle__switch svg rect {
	transition: fill var(--stowly-transition);
}

.stowly-filter-toggle__switch svg circle {
	transition: transform var(--stowly-transition), fill var(--stowly-transition);
	transform-origin: center;
	transform-box: fill-box;
}

.stowly-filter-toggle:hover {
	border-color: var(--stowly-color-ink, #1b1b1f);
	background: var(--stowly-color-surface-soft, #faf8f5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* When active we keep the pill looking the same as other filter pills
   with an active filter applied (single ink border, no fill). The only
   visual change is the toggle thumb sliding + the track filling in —
   the switch itself communicates the state, not the whole button.
   State is driven by the checkbox only — not a server-rendered `.is-on`
   class, which would stick after "Ledig nu" (default ON) is toggled off. */
.stowly-filter-toggle:has(input[type="checkbox"]:checked) {
	border-color: var(--stowly-color-ink, #1b1b1f);
}

.stowly-filter-toggle:has(input[type="checkbox"]:checked) .stowly-filter-toggle__switch {
	color: var(--stowly-color-ink, #1b1b1f);
}

/* Slide the thumb to the right + fill the track when active */
.stowly-filter-toggle:has(input[type="checkbox"]:checked) .stowly-filter-toggle__switch svg rect {
	fill: var(--stowly-color-ink, #1b1b1f);
}

.stowly-filter-toggle:has(input[type="checkbox"]:checked) .stowly-filter-toggle__switch svg circle {
	fill: #fff;
	transform: translateX(8px);
}

/* Use `:focus-visible` so the ring only appears for keyboard users and
   doesn't stick around as a second border after a mouse click. */
.stowly-filter-toggle:focus-within:has(input:focus-visible) {
	outline: 2px solid var(--stowly-color-ink, #1b1b1f);
	outline-offset: 2px;
}

/* Slim vertical divider between toggle group and dropdown filter tabs */
.stowly-filter-divider {
	flex: 0 0 auto;
	display: inline-block;
	width: 1px;
	height: 22px;
	margin: 0 4px;
	background: var(--stowly-color-line, #e9e6e4);
	align-self: center;
}

/* ---------- Filter pill tabs with hover + badge ---------- */

.stowly-filters-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
	margin-top: 8px;
	min-width: 0;
}

.stowly-filter-tabs {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--stowly-color-line-strong) transparent;
}

.stowly-filter-tabs::-webkit-scrollbar {
	height: 4px;
}

.stowly-filter-tabs::-webkit-scrollbar-thumb {
	background: var(--stowly-color-line-strong);
	border-radius: 999px;
}

.stowly-filter-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-pill);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color var(--stowly-transition),
		background var(--stowly-transition),
		color var(--stowly-transition),
		box-shadow var(--stowly-transition);
}

.stowly-filter-tab:hover,
.stowly-filter-tab:focus {
	border-color: var(--stowly-color-ink);
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stowly-filter-tab:focus-visible {
	outline: 2px solid var(--stowly-color-ink);
	outline-offset: 2px;
}

.stowly-filter-tab.is-active {
	border-color: var(--stowly-color-ink);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	box-shadow: inset 0 0 0 1px var(--stowly-color-ink);
	transform: none;
}

.stowly-filter-tab.is-has-active {
	border-color: var(--stowly-color-ink);
	padding-right: 10px;
}

.stowly-filter-tab__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.stowly-filter-actions {
	display: flex;
	flex: 0 0 auto;
	min-width: 0;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
}

.stowly-reset-link {
	color: var(--stowly-color-ink);
	text-decoration: underline;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

.stowly-reset-link:hover {
	color: var(--stowly-color-ink);
	opacity: 0.75;
}

/* ---------- Popovers (flyouts + filter panels) ---------- */

.stowly-filter-panels {
	position: relative;
	min-height: 0;
}

.stowly-flyout-panel,
.stowly-filter-panel {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 40;
	width: min(560px, 92vw);
	padding: 20px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	background: var(--stowly-color-surface);
	box-shadow: var(--stowly-shadow-lg);
	overscroll-behavior: contain;
}

.stowly-flyout-panel.is-open,
.stowly-filter-panel.is-active {
	display: block;
	animation: stowlyFlyoutFade 160ms ease-out;
}

@keyframes stowlyFlyoutFade {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Desktop: pæn flyout-luk (listings-filters.js + Min PladsRunMobileArchiveSheetExit) ---------- */
@media (min-width: 769px) {
	body.stowly-archive-layout .stowly-filter-panel.is-active.stowly-filter-flyout-exit {
		animation: none !important;
		opacity: 0;
		transform: translateY(-10px) scale(0.97);
		box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
		transition:
			opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
			box-shadow 0.26s ease;
		pointer-events: none;
	}
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
	body.stowly-archive-layout .stowly-filter-panel.is-active.stowly-filter-flyout-exit {
		transition-duration: 0.05s;
		transform: none;
	}
}

@media (min-width: 769px) {
	/* Mobil flex/scroll-split for filter-sheet — ignorér på flyout-panelet */
	body.stowly-archive-layout .stowly-filter-panel__scroll {
		flex: none;
		min-height: 0;
		overflow-x: visible;
		overflow-y: visible;
		-webkit-overflow-scrolling: auto;
		scroll-padding: unset;
		padding: 0;
	}
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-price"] .stowly-filter-panel__scroll,
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
		padding: 6px 2px 12px;
	}
	.stowly-header-search__menu-scroll {
		flex: none;
		min-height: 0;
		overflow: visible;
		overflow-y: visible;
		-webkit-overflow-scrolling: auto;
		padding-bottom: 0;
		scroll-padding-bottom: unset;
	}
}

.stowly-type-selector-panel {
	left: auto;
	right: 0;
}

/* ---------- Custom filter select (Sortering) ---------- */
.stowly-filter-panel .stowly-form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stowly-filter-panel .stowly-form-field__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stowly-color-muted);
}

.stowly-filter-select {
	position: relative;
	width: 100%;
}

.stowly-filter-select__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--stowly-transition), box-shadow var(--stowly-transition), background var(--stowly-transition);
}

.stowly-filter-select__toggle:hover {
	border-color: var(--stowly-color-ink);
}

.stowly-filter-select__toggle:focus-visible {
	outline: none;
	border-color: var(--stowly-color-ink);
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.stowly-filter-select.is-open .stowly-filter-select__toggle {
	border-color: var(--stowly-color-ink);
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.stowly-filter-select__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stowly-filter-select__chev {
	flex: 0 0 auto;
	color: var(--stowly-color-muted);
	transition: transform var(--stowly-transition), color var(--stowly-transition);
}

.stowly-filter-select.is-open .stowly-filter-select__chev {
	transform: rotate(180deg);
	color: var(--stowly-color-ink);
}

.stowly-filter-select__menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	padding: 6px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
	box-shadow: var(--stowly-shadow-lg);
	max-height: 280px;
	overflow-y: auto;
}

.stowly-filter-select.is-open .stowly-filter-select__menu {
	display: block;
	animation: stowlyFlyoutFade 140ms ease-out;
}

.stowly-filter-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--stowly-radius-sm, 8px);
	background: transparent;
	color: var(--stowly-color-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background var(--stowly-transition), color var(--stowly-transition);
}

.stowly-filter-select__option:hover,
.stowly-filter-select__option:focus-visible {
	background: var(--stowly-color-surface-muted, rgba(15, 23, 42, 0.05));
	color: var(--stowly-color-ink);
	outline: none;
}

.stowly-filter-select__option.is-selected {
	background: var(--stowly-color-ink);
	color: #fff;
}

.stowly-filter-select__option.is-selected:hover,
.stowly-filter-select__option.is-selected:focus-visible {
	background: var(--stowly-color-ink);
	color: #fff;
}

.stowly-filter-select__option-label {
	flex: 1 1 auto;
	min-width: 0;
}

.stowly-filter-select__option-check {
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity var(--stowly-transition);
}

.stowly-filter-select__option.is-selected .stowly-filter-select__option-check {
	opacity: 1;
}

/* Inline variant lives in the filters header row next to the reset link.
   Visually mirrors .stowly-filter-tab (same border, radius, weight, hover)
   so the sort control reads as "one of the filters" instead of a separate
   system. The only functional delta is the chevron + prefix label. */
.stowly-filter-select--inline {
	width: auto;
	min-width: 0;
}

.stowly-filter-select--inline .stowly-filter-select__toggle {
	width: auto;
	padding: 9px 16px;
	gap: 6px;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-pill);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: none;
	transition: border-color var(--stowly-transition),
		background var(--stowly-transition),
		color var(--stowly-transition),
		box-shadow var(--stowly-transition),
		transform var(--stowly-transition);
}

.stowly-filter-select--inline .stowly-filter-select__toggle:hover,
.stowly-filter-select--inline .stowly-filter-select__toggle:focus {
	border-color: var(--stowly-color-ink);
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

.stowly-filter-select--inline .stowly-filter-select__toggle:focus-visible {
	outline: 2px solid var(--stowly-color-ink);
	outline-offset: 2px;
	box-shadow: none;
}

.stowly-filter-select--inline.is-open .stowly-filter-select__toggle {
	border-color: var(--stowly-color-ink);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	box-shadow: inset 0 0 0 1px var(--stowly-color-ink);
	transform: none;
}

.stowly-filter-select--inline .stowly-filter-select__prefix {
	color: var(--stowly-color-muted);
	font-weight: 500;
	flex: 0 0 auto;
	white-space: nowrap;
}

.stowly-filter-select--inline .stowly-filter-select__value {
	flex: 0 1 auto;
	color: var(--stowly-color-ink);
	font-weight: 600;
	white-space: nowrap;
}

.stowly-filter-select--inline .stowly-filter-select__chev {
	color: var(--stowly-color-ink);
}

/* Compact sort icon — hidden on desktop, only used as the sole affordance on
   small viewports where the prefix + value + chevron combo is too wide to sit
   comfortably next to the filter chips. */
.stowly-filter-select--inline .stowly-filter-select__icon {
	display: none;
	flex: 0 0 auto;
	color: var(--stowly-color-ink);
}

.stowly-filter-select--inline .stowly-filter-select__menu {
	left: auto;
	right: 0;
	min-width: 240px;
}

@media (max-width: 800px) {
	.stowly-filter-select--inline .stowly-filter-select__menu {
		left: 0;
		right: auto;
	}
}

/* Mobile: collapse the sort dropdown into a circular icon-only button. The
   selected value is still communicated by the checkmark inside the menu, and
   the aria-label on the toggle keeps it announced to screen readers. */
@media (max-width: 640px) {
	.stowly-filter-select--inline .stowly-filter-select__toggle {
		width: 40px;
		height: 40px;
		padding: 0;
		gap: 0;
		border-radius: 50%;
		justify-content: center;
	}

	.stowly-filter-select--inline .stowly-filter-select__prefix,
	.stowly-filter-select--inline .stowly-filter-select__value,
	.stowly-filter-select--inline .stowly-filter-select__chev {
		display: none;
	}

	.stowly-filter-select--inline .stowly-filter-select__icon {
		display: block;
	}

	.stowly-filter-select--inline .stowly-filter-select__menu {
		right: 0;
		left: auto;
		min-width: 220px;
	}
}

.stowly-flyout-panel h4 {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--stowly-color-ink);
}

.stowly-filter-dropdown {
	grid-column: 1 / -1;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
}

.stowly-filter-dropdown > summary {
	cursor: pointer;
	padding: 12px 40px 12px 14px;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--stowly-color-ink);
	list-style: none;
	display: block;
	background-image: var(--stowly-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
	transition: transform var(--stowly-transition);
}

.stowly-filter-dropdown > summary::-webkit-details-marker,
.stowly-filter-dropdown > summary::marker {
	display: none;
	content: "";
}

.stowly-filter-dropdown[open] > summary {
	border-bottom: 1px solid var(--stowly-color-line);
	background-image: var(--stowly-chevron-up);
}

.stowly-filter-dropdown > .stowly-chips,
.stowly-filter-dropdown > .stowly-filters__features,
.stowly-filter-dropdown > .stowly-provider-listing-types,
.stowly-filter-dropdown > .stowly-filter-grid {
	padding: 14px;
}

.stowly-filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

/* ---------- Filter-paneler: ens overskrift → indhold-afstand ---------- */

/*
 * Fælles gruppe-label (chip-paneler). Undgår fieldset/legend-quirks og
 * giver samme 8px luft til chips/slider/talfelt i alle flyouts.
 */
.stowly-filter-panel .stowly-filter-chip-group__label {
	margin: 0 0 8px;
	padding: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.stowly-filter-panel .stowly-filter-chip-group--separated {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--stowly-color-line);
}

/* ---------- Størrelse (L/B/H): roligere mini-kort + slider ---------- */

.stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-grid {
	gap: 14px;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 12px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface-soft);
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] > span {
	margin: 0;
	padding: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input[type="number"] {
	width: 100%;
	margin: 0;
	padding: 7px 12px;
	min-height: 0;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	transition: border-color var(--stowly-transition), box-shadow var(--stowly-transition);
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input[type="number"]:hover {
	border-color: var(--stowly-color-line-strong);
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input[type="number"]:focus {
	outline: none;
	border-color: var(--stowly-color-ink);
	box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.08);
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range {
	gap: 0;
	padding: 4px 0 0;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__slider {
	margin: 0 10px;
	height: 40px;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__track,
.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__fill {
	height: 6px;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__track {
	left: -8px;
	right: -8px;
	background: var(--stowly-color-line);
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] .stowly-range__fill {
	background: var(--stowly-color-primary);
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"] {
	accent-color: var(--stowly-color-primary);
	height: 40px !important;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-webkit-slider-runnable-track {
	height: 6px !important;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-moz-range-track {
	height: 6px !important;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-webkit-slider-thumb {
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid #fff !important;
	box-shadow:
		0 0 0 1px var(--stowly-color-line-strong),
		0 2px 8px rgba(0, 0, 0, 0.12) !important;
	margin-top: -8px !important;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-moz-range-thumb {
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid #fff !important;
	box-shadow:
		0 0 0 1px var(--stowly-color-line-strong),
		0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.08);
	box-shadow:
		0 0 0 1px var(--stowly-color-ink-soft),
		0 3px 12px rgba(0, 0, 0, 0.14) !important;
}

.stowly-filter-panel .stowly-form-field[data-stowly-dimension-filter] input.stowly-range__input[type="range"]::-moz-range-thumb:hover {
	transform: scale(1.08);
	box-shadow:
		0 0 0 1px var(--stowly-color-ink-soft),
		0 3px 12px rgba(0, 0, 0, 0.14) !important;
}

/* ---------- Dual-handle range slider (shared by price + size filters) ---------- */

.stowly-range {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 10px 4px 12px;
}

.stowly-range__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.stowly-range__label {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
	color: var(--stowly-color-ink);
	font-variant-numeric: tabular-nums;
}

.stowly-range__label-key {
	color: var(--stowly-color-ink-soft);
	font-weight: 500;
}

.stowly-range__label-value {
	font-weight: 700;
	color: var(--stowly-color-ink);
}

.stowly-range__slider {
	position: relative;
	height: 44px;
	margin: 0 16px;
}

.stowly-range__track,
.stowly-range__fill {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	border-radius: 999px;
	pointer-events: none;
}

.stowly-range__track {
	left: -10px;
	right: -10px;
	background: var(--stowly-color-line);
}

.stowly-range__fill {
	left: 0;
	right: 0;
	background: #111;
}

/* The two overlapping native range inputs.
   The track is transparent so users only see our custom track.
   Pointer events are disabled on the input, and re-enabled on the thumb
   so both handles stay draggable even when they overlap. */
input.stowly-range__input[type="range"] {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	pointer-events: none !important;
	outline: none !important;
	accent-color: #111;
	touch-action: none;
}

input.stowly-range__input[type="range"]::-webkit-slider-runnable-track {
	height: 4px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

input.stowly-range__input[type="range"]::-moz-range-track {
	height: 4px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

input.stowly-range__input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid #111 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
	cursor: grab;
	pointer-events: auto !important;
	/* Centrer 28px-thumb på 4px track (WebKit) */
	margin-top: -12px !important;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

input.stowly-range__input[type="range"]::-moz-range-thumb {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid #111 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
	cursor: grab;
	pointer-events: auto !important;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

input.stowly-range__input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important;
}

input.stowly-range__input[type="range"]::-moz-range-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22) !important;
}

input.stowly-range__input[type="range"]::-webkit-slider-thumb:active {
	cursor: grabbing;
	transform: scale(1.05);
}

input.stowly-range__input[type="range"]::-moz-range-thumb:active {
	cursor: grabbing;
	transform: scale(1.05);
}

/* Heatmap-slider (pris + m²) — søjlerne ER sporet (Airbnb-stil). */
.stowly-filter-panel[data-panel-id="panel-price"] .stowly-range--heatmap,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap {
	padding: 0;
	gap: 18px;
}

.stowly-filter-panel[data-panel-id="panel-price"] .stowly-filter-panel__scroll,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
	padding: 6px 2px 12px;
}

.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap {
	grid-column: 1 / -1;
}

.stowly-filter-panel[data-panel-id="panel-price"] .stowly-range--heatmap .stowly-range__label-key,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap .stowly-range__label-key {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft);
	line-height: 1.2;
}

.stowly-filter-panel[data-panel-id="panel-price"] .stowly-range--heatmap .stowly-range__header,
.stowly-filter-panel[data-panel-id="panel-size"] .stowly-range--heatmap .stowly-range__header {
	padding: 0 4px;
}

.stowly-range--heatmap .stowly-range__slider--heatmap {
	--stowly-heatmap-thumb-inset: 12px;
	--stowly-heatmap-thumb-size: 24px;
	--stowly-heatmap-baseline-pct: calc(100% - (var(--stowly-heatmap-thumb-size) / 2));
	margin: 0 2px;
	height: 76px;
}

.stowly-range--heatmap .stowly-range__track {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: var(--stowly-heatmap-baseline-pct);
	transform: translateY(-50%);
	height: 2px;
	border-radius: 999px;
	background: var(--stowly-color-line);
	pointer-events: none;
	z-index: 0;
}

.stowly-range--heatmap .stowly-range__fill {
	display: block;
	position: absolute;
	top: var(--stowly-heatmap-baseline-pct);
	transform: translateY(-50%);
	height: 2px;
	border-radius: 999px;
	background: var(--stowly-color-primary);
	pointer-events: none;
	z-index: 1;
	left: 0;
	right: 0;
}

.stowly-range--heatmap .stowly-range__histogram {
	position: absolute;
	left: var(--stowly-heatmap-thumb-inset);
	right: var(--stowly-heatmap-thumb-inset);
	top: 0;
	height: var(--stowly-heatmap-baseline-pct);
	display: flex;
	align-items: flex-end;
	gap: 2px;
	pointer-events: none;
	z-index: 2;
}

.stowly-range--heatmap .stowly-range__histogram-bar {
	flex: 1 1 0;
	min-width: 0;
	border-radius: 2px 2px 0 0;
	background: var(--stowly-color-primary);
	height: 0;
	transition: background 0.12s ease;
}

.stowly-range--heatmap .stowly-range__histogram-bar.is-out-range {
	background: var(--stowly-color-line);
}

.stowly-range--heatmap input.stowly-range__input[type="range"] {
	accent-color: var(--stowly-color-primary);
	inset: auto 0 auto 0 !important;
	top: calc(100% - var(--stowly-heatmap-thumb-size)) !important;
	height: var(--stowly-heatmap-thumb-size) !important;
	z-index: 3;
}

.stowly-range--heatmap input.stowly-range__input[type="range"]::-webkit-slider-runnable-track {
	height: 4px !important;
	background: transparent !important;
}

.stowly-range--heatmap input.stowly-range__input[type="range"]::-moz-range-track {
	height: 4px !important;
	background: transparent !important;
}

.stowly-range--heatmap input.stowly-range__input[type="range"]::-webkit-slider-thumb {
	width: 24px !important;
	height: 24px !important;
	border: 2px solid #fff !important;
	background: #fff !important;
	box-shadow:
		0 0 0 1px var(--stowly-color-line-strong),
		0 2px 8px rgba(0, 0, 0, 0.14) !important;
	margin-top: -10px !important;
}

.stowly-range--heatmap input.stowly-range__input[type="range"]::-moz-range-thumb {
	width: 24px !important;
	height: 24px !important;
	border: 2px solid #fff !important;
	background: #fff !important;
	box-shadow:
		0 0 0 1px var(--stowly-color-line-strong),
		0 2px 8px rgba(0, 0, 0, 0.14) !important;
}

.stowly-range--heatmap input.stowly-range__input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.08);
	box-shadow:
		0 0 0 1px var(--stowly-color-ink-soft),
		0 3px 12px rgba(0, 0, 0, 0.16) !important;
}

.stowly-range--heatmap input.stowly-range__input[type="range"]::-moz-range-thumb:hover {
	transform: scale(1.08);
	box-shadow:
		0 0 0 1px var(--stowly-color-ink-soft),
		0 3px 12px rgba(0, 0, 0, 0.16) !important;
}

.stowly-range--heatmap input.stowly-range__input[data-range="max"] {
	z-index: 4;
}

/* Max handle sits above min handle so it stays draggable at the edges. */
input.stowly-range__input[data-range="max"] {
	z-index: 2;
}

input.stowly-range__input[data-range="min"] {
	z-index: 1;
}

/* ---------- Archive intake hero (mirrors front-page hero search) ---------- */

.stowly-archive-hero {
	position: relative;
	padding: 56px 0 24px;
	margin-bottom: 24px;
}

.stowly-archive-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.stowly-archive-hero__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stowly-color-primary);
}

.stowly-archive-hero__title {
	position: relative;
	margin: 0;
	padding-bottom: 18px;
	font-family: var(--stowly-font-heading);
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: var(--stowly-color-ink);
	text-wrap: balance;
}

.stowly-archive-hero__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 4px;
	border-radius: 999px;
	background: var(--stowly-color-primary);
}

.stowly-archive-hero__lede {
	margin: 4px 0 8px;
	color: var(--stowly-color-ink-soft);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.6;
	max-width: 60ch;
}

.stowly-archive-hero__helper {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--stowly-color-ink-soft);
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	justify-content: center;
}

.stowly-archive-hero .stowly-front-search {
	width: 100%;
	max-width: 880px;
}

/* Base styles for `.stowly-pladsberegner-cta-link` ligger nu i css/global.css
 * så pilen + layout virker både på arkiv, forside og evt. nye CTA-steder
 * uden at kræve at archive-stylesheet'et er loaded. */

@media (max-width: 768px) {
	.stowly-archive-hero {
		padding: 32px 0 16px;
	}
}

/* ---------- Archive header ---------- */

.stowly-archive-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin: 28px 0 18px;
}

.stowly-archive-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	flex-wrap: wrap;
}

.stowly-archive-header__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 520px;
	min-width: 0;
}

.stowly-archive-header__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--stowly-color-ink);
}

.stowly-archive-header__count {
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.stowly-archive-header__description {
	display: grid;
	gap: 8px;
	max-width: 760px;
	margin-top: 8px;
	color: var(--stowly-color-ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

.stowly-archive-header__description p {
	margin: 0;
}

.stowly-archive-results-intro {
	margin: 6px 0 0;
}

.stowly-archive-results-intro .stowly-archive-header,
body.stowly-archive-layout .stowly-archive-results-intro .stowly-archive-header {
	margin-top: 0;
	margin-bottom: 18px;
}

.stowly-archive-results-intro .stowly-breadcrumbs {
	margin-bottom: 0;
}

.stowly-archive-results-intro .stowly-archive-results-intro__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ---------- Results layout (listings + sticky map) ---------- */

.stowly-results-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* Full-bleed split on the archive — listings column handles its own
   internal padding, with a small gap between cards and the map so the
   card edges aren't flush against the map canvas. */
/* PC (side-om-side over 1100px): liste 40 %, kort 60 % — samlet indholdsbrede uændret. */
body.stowly-archive-layout .stowly-results-layout {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 20px;
}

/* "Skjul liste": kortet fylder fuld bredde (Airbnb-stil). Kun PC — på mobil
   er kortet allerede en overlay og toggle-knappen er skjult. */
@media (min-width: 1101px) {
	.stowly-results-layout.is-map-expanded,
	body.stowly-archive-layout .stowly-results-layout.is-map-expanded {
		grid-template-columns: minmax(0, 1fr);
	}

	.stowly-results-layout.is-map-expanded .stowly-results-main {
		display: none;
	}
}

body.stowly-archive-layout .stowly-results-main {
	padding: 4px 0 64px;
}

body.stowly-archive-layout .stowly-archive-header {
	margin: 0 0 14px;
}

.stowly-results-main {
	min-width: 0;
}

/* AJAX filter refresh: dim results while fetching (header + filter bar stay put). */
.stowly-archive-results-swap.is-stowly-fetching {
	pointer-events: none;
}

.stowly-archive-results-swap.is-stowly-fetching .stowly-archive-results-intro,
.stowly-archive-results-swap.is-stowly-fetching .stowly-load-more,
.stowly-archive-results-swap.is-stowly-fetching .stowly-recently-viewed {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

/* Skeleton-card til arkiv-grid: vises mens filterresultater eller load-more
   er på vej, så brugeren ser strukturen i stedet for en blank/dimmet flade. */
@keyframes stowly-skeleton-shimmer {
	0% { background-position: -200px 0; }
	100% { background-position: 200px 0; }
}

/* Når listen "flasher" skeleton (kortet bevæges og den synlige liste ændrer
   indhold/rækkefølge) skjules de rigtige kort, så kun skeletons ses indtil de
   opdaterede kort afsløres samlet. */
.stowly-listing-grid.is-stowly-list-skeleton > article.stowly-listing-card:not(.stowly-listing-card--skeleton),
.stowly-listing-grid.is-stowly-list-skeleton > [data-stowly-empty-bounds] {
	display: none !important;
}

/* Mens flash'en kører byttes hver skeleton ud med sit rigtige kort ÉT ad gangen:
   js fjerner en skeleton og afslører samtidig det tilsvarende kort her (fader
   ind på dens plads). Skal stå EFTER skjul-reglen ovenfor for at vinde (samme
   specificitet, !important → kilde-rækkefølge afgør). */
.stowly-listing-grid.is-stowly-list-skeleton > article.stowly-listing-card.is-stowly-card-swapin {
	display: flex !important;
	animation: stowly-card-swapin 260ms ease both;
}

@keyframes stowly-card-swapin {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.stowly-listing-grid.is-stowly-list-skeleton > article.stowly-listing-card.is-stowly-card-swapin {
		animation: none;
	}
}

/* Skeleton-kort spejler det rigtige vandrette kort (billede til venstre i fuld
   højde, krop til højre) og bruger SAMME faste højde, så der ikke sker et hop
   når rigtige kort erstatter skeletons. */
.stowly-listing-card--skeleton,
article.stowly-listing-card--skeleton,
.stowly-listing-grid > article.stowly-listing-card.stowly-listing-card--skeleton {
	display: flex !important;
	align-items: stretch;
	gap: 0;
	height: var(--stowly-archive-card-h, 150px);
	padding: 0 !important;
	background: var(--stowly-color-surface) !important;
	border: 1px solid var(--stowly-color-line) !important;
	border-radius: var(--stowly-radius-lg);
	overflow: hidden;
	pointer-events: none;
}

.stowly-listing-card--skeleton .stowly-skeleton-img,
.stowly-listing-card--skeleton .stowly-skeleton-line {
	background: linear-gradient(
		90deg,
		var(--stowly-color-surface-muted) 0%,
		var(--stowly-color-surface-soft) 50%,
		var(--stowly-color-surface-muted) 100%
	);
	background-size: 400px 100%;
	animation: stowly-skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--stowly-radius-sm);
}

.stowly-listing-card--skeleton .stowly-skeleton-img {
	flex: 0 0 225px;
	width: 225px;
	height: auto;
	align-self: stretch;
	border-radius: 0;
}

.stowly-listing-card--skeleton .stowly-skeleton-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 18px;
}

.stowly-listing-card--skeleton .stowly-skeleton-line {
	height: 12px;
	border-radius: 6px;
}

.stowly-listing-card--skeleton .stowly-skeleton-line--title { width: 70%; height: 16px; }
.stowly-listing-card--skeleton .stowly-skeleton-line--meta  { width: 45%; }
.stowly-listing-card--skeleton .stowly-skeleton-line--text  { width: 90%; }
/* Pris-linjen skubbes til bunden ligesom det rigtige korts footer. */
.stowly-listing-card--skeleton .stowly-skeleton-line--price { width: 35%; height: 14px; margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
	.stowly-listing-card--skeleton .stowly-skeleton-img,
	.stowly-listing-card--skeleton .stowly-skeleton-line {
		animation: none;
	}
}

@keyframes stowly-archive-card-enter {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.stowly-archive-results-swap.is-stowly-results-reveal
	.stowly-listing-grid
	> article.stowly-listing-card.is-stowly-card-entering {
	animation: stowly-archive-card-enter 0.4s cubic-bezier(0.2, 0.9, 0.2, 1) both;
	animation-delay: var(--stowly-enter-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.stowly-archive-results-swap.is-stowly-results-reveal
		.stowly-listing-grid
		> article.stowly-listing-card.is-stowly-card-entering {
		animation: none;
	}
}

.stowly-listing-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

/* Fælles fast korthøjde for arkivlistens vandrette kort — så alle kort (og
   deres skeletons) er nøjagtig lige høje uanset om titlen er 1 eller 2 linjer
   og om der er meta-tekst. Sættes til auto i den stablede mobil-visning. */
body.stowly-archive-layout {
	--stowly-archive-card-h: 150px;
}

/* ---------- Listing card (flat, horizontal) — kun arkivets liste;
   `.stowly-card-grid` m.fl. bruger ét foto-kort fra global.css. ---------- */

.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card,
.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-article-post,
.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-grid-common-col,
.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-full-width {
	position: relative;
	display: flex !important;
	align-items: stretch;
	gap: 0;
	height: var(--stowly-archive-card-h, 150px);
	background: var(--stowly-color-surface) !important;
	border: 1px solid var(--stowly-color-line) !important;
	border-radius: var(--stowly-radius-lg);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03) !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	transition:
		border-color var(--stowly-transition),
		box-shadow var(--stowly-transition),
		transform var(--stowly-transition);
}

/* Card is outside the current map viewport — hidden from the list but
   preserved in the DOM so it reappears instantly when we pan back.
   Must win over Astra's `article.stowly-listing-card.ast-article-post
   { display: flex !important }` above (specificity 0,2,1), hence the
   multi-class matching below. */
.stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.is-hidden,
.stowly-listing-grid article.stowly-listing-card.is-hidden,
article.stowly-listing-card.is-hidden,
article.stowly-listing-card.ast-article-post.is-hidden,
article.stowly-listing-card.ast-grid-common-col.is-hidden,
article.stowly-listing-card.ast-full-width.is-hidden {
	display: none !important;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card:hover {
	border-color: var(--stowly-color-line-strong) !important;
	background: var(--stowly-color-surface) !important;
	box-shadow: 0 14px 32px -16px rgba(17, 17, 17, 0.18), 0 2px 6px rgba(17, 17, 17, 0.04) !important;
	transform: translateY(-1px);
}

/* Empty-state card used inside the listing grid when filters return zero
   matches. Matches the regular card's footprint so the grid layout stays
   consistent, but is non-interactive and centred. */
.stowly-listing-card.stowly-listing-card--empty,
article.stowly-listing-card.stowly-listing-card--empty {
	cursor: default;
	/* Tom-tilstand har en centreret besked og skal bare være så høj som
	   indholdet kræver — ikke den faste korthøjde. !important fordi grid-
	   reglen (...:not(.stowly-card-grid) article.stowly-listing-card) ellers
	   vinder på specificitet. */
	height: auto !important;
	background: var(--stowly-color-surface) !important;
	border-style: dashed !important;
	grid-column: 1 / -1;
	/* Kun ét barn (__body); undgå ræk-layout + asymmetrisk padding fra almindelige kort */
	flex-direction: column;
	align-items: stretch;
	padding: 8px !important;
}

.stowly-listing-card.stowly-listing-card--empty:hover,
article.stowly-listing-card.stowly-listing-card--empty:hover {
	border-color: var(--stowly-color-line) !important;
	background: var(--stowly-color-surface) !important;
	transform: none !important;
}

.stowly-listing-card__body--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}

.stowly-listing-card__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--stowly-color-surface-soft, #f4f4f0);
	color: var(--stowly-color-ink-soft);
	margin-bottom: 4px;
}

.stowly-listing-card__body--empty .stowly-listing-card__title {
	margin: 0;
	font-size: 1.1rem;
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
	-webkit-box-orient: unset;
}

.stowly-listing-card__body--empty .stowly-listing-card__meta {
	margin: 0;
	color: var(--stowly-color-ink-soft);
	max-width: 380px;
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
	-webkit-box-orient: unset;
}

.stowly-listing-card__body--empty .stowly-btn {
	margin-top: 6px;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	padding: 0;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link:hover {
	text-decoration: none;
	color: inherit;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image {
	position: relative;
	flex: 0 0 auto;
	align-self: stretch;
	width: 225px;
	aspect-ratio: 3 / 2;
	border-radius: 0;
	overflow: hidden;
	background: #fff;
	margin: 0;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f7f7f7 0%, #eee 100%);
}

/* Smalt fotoudsnit i arkivlisten — lidt tættere overlay end kort-grid. */
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__overlays {
	top: 8px;
	left: 8px;
	right: 8px;
	gap: 4px;
}

.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--entity,
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--intro,
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--distance {
	font-size: 10px;
	padding: 3px 8px 3px 7px;
}

.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--intro svg,
.stowly-listing-grid:not(.stowly-card-grid):not(.stowly-provider-listings__grid) .stowly-listing-card__chip--distance svg {
	width: 11px;
	height: 11px;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 150ms ease, background 150ms ease;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn:hover {
	transform: scale(1.1);
	background: var(--stowly-color-surface-soft);
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #222;
	stroke-width: 2;
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn.is-favorited svg {
	fill: var(--stowly-color-primary);
	stroke: var(--stowly-color-primary);
}

.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
	min-height: 0;
	padding: 14px 16px 16px;
}

/* Tom liste / kort-udsnit: samme __body-klasse som almindelige kort, men ingen
   "Book nu"-kolonne — 130px højre-padding fra desktop-reglen ville ellers
   skubbe det centrerede indhold mod venstre. */
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body.stowly-listing-card__body--empty {
	padding: 48px 24px !important;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Meta + pris holdes nederst (samme vandrette bånd som "Book nu"). */
.stowly-listing-card__footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
	min-width: 0;
}

.stowly-listing-card__top {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.stowly-listing-card__title,
.stowly-listing-card__body h2,
.stowly-listing-card__body h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	color: var(--stowly-color-ink);
	line-height: 1.3;
	letter-spacing: -0.005em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.stowly-listing-card__meta,
.stowly-listing-card__city {
	margin: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.stowly-listing-card__features {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.stowly-listing-card__features li {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--stowly-color-ink-soft);
	background: var(--stowly-color-surface-soft);
	border: 1px solid var(--stowly-color-line);
	padding: 3px 9px;
	border-radius: 999px;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.stowly-listing-card__bottom {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.stowly-listing-card__size {
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* Hold titlen fri af favorit-hjertet i øverste højre hjørne. */
.stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__title {
	padding-right: 26px;
}

.stowly-listing-card__price {
	margin: 0;
	font-size: 15px;
	color: var(--stowly-color-ink);
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.stowly-listing-card__price strong {
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.01em;
}

.stowly-listing-card__price span {
	font-weight: 500;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
}

.stowly-listing-card__book {
	position: absolute;
	bottom: 16px;
	right: 16px;
	padding: 9px 18px !important;
	min-height: 0 !important;
	font-size: 13.5px;
	width: auto;
	margin: 0;
	z-index: 2;
	box-shadow: 0 6px 16px -6px rgba(var(--stowly-color-primary-rgb), 0.45) !important;
}

/* ---------- Map aside (sticky, full-height beside listings) ---------- */

.stowly-map-aside {
	position: sticky;
	top: calc(var(--stowly-header-height) + 56px);
	height: calc(100vh - var(--stowly-header-height) - 56px);
	min-height: 520px;
}

/* Desktop: lidt luft top/bund så kortet “flyver”; ≤1100px = fuld skærm uden det. */
@media (min-width: 1101px) {
	body.stowly-archive-layout .stowly-map-aside {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

.stowly-map {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	border-radius: var(--stowly-radius-lg);
	/* Lys blåhav — matcher voyager-water når tiles loader.
	   Eneste sted i temaet hvor blå er OK (kort-konvention). */
	background-color: var(--stowly-color-map-water, #c8dcf0);
	background-image:
		radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 55%);
}

/* Shimmer på kortet kun mens archive henter nye resultater (AJAX), ikke
   under basemap-tiles. Styres via klassen `stowly-map--loading` fra
   listings-filters.js. */
.stowly-map::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 400;
	background: linear-gradient(
		110deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.35) 45%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.35) 55%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 220% 100%;
	background-position: 200% 0;
	opacity: 0;
	transition: opacity 260ms ease;
}

.stowly-map.stowly-map--loading::after {
	opacity: 1;
	animation: stowlyMapShimmer 1.6s ease-in-out infinite;
}

@keyframes stowlyMapShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.stowly-map.stowly-map--loading::after {
		animation: none;
	}
}

body.stowly-archive-layout .stowly-map {
	border: 1px solid var(--stowly-color-line);
}

.stowly-map-aside__close {
	display: none;
}

/* Pris-markør: Google Advanced Markers forankrer content-elementets
   nederste midte til koordinaten. translateY(50%) skubber pillen ned, så
   dens midte ligger præcis på geokoden (samme look som den gamle Leaflet-
   divIcon med centreret anchor). __inner bærer den synlige pille. */
.stowly-map-marker {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	overflow: visible;
	transform: translateY(50%);
}

.stowly-map-marker__inner--same-site {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 2px 10px 3px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.stowly-map-marker__same-site-plus {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--stowly-color-primary);
}

.stowly-map-marker__same-site-from {
	display: block;
	margin: 0;
	padding-top: 1px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--stowly-color-ink-soft, #555);
}

.stowly-map-marker__inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	background: #fff;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	color: #111;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transition:
		background-color 120ms ease,
		color 120ms ease,
		border-color 120ms ease,
		box-shadow 120ms ease;
}

.stowly-map-marker:hover .stowly-map-marker__inner,
.stowly-map-marker.is-card-hover .stowly-map-marker__inner {
	background: #111;
	color: #fff;
	border-color: #111;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* `is-card-hover` triggeres fra listing-cards i js/map.js — løft pillen
   en anelse så den "hopper frem" når brugeren peger på et kort i listen. */
.stowly-map-marker.is-card-hover {
	z-index: 1000 !important;
}

/* Eksplicit hvid tekst på alle indre noder (tema/dashboards kan sætte span-farve). */
.stowly-map-marker:hover .stowly-map-marker__inner span,
.stowly-map-marker.is-card-hover .stowly-map-marker__inner span {
	color: #fff !important;
}

.stowly-map-marker:hover .stowly-map-marker__same-site-from,
.stowly-map-marker.is-card-hover .stowly-map-marker__same-site-from {
	color: rgba(255, 255, 255, 0.92) !important;
}

.stowly-map-marker:hover .stowly-map-marker__same-site-plus,
.stowly-map-marker.is-card-hover .stowly-map-marker__same-site-plus {
	color: rgba(255, 255, 255, 0.95) !important;
}

.stowly-map-marker:hover .stowly-map-marker__inner .stowly-map-marker__empty,
.stowly-map-marker.is-card-hover .stowly-map-marker__inner .stowly-map-marker__empty {
	color: rgba(255, 255, 255, 0.5) !important;
}

.stowly-map-marker__empty {
	display: inline-block;
	min-width: 1.25em;
	text-align: center;
	color: var(--stowly-color-ink-muted);
	font-weight: 700;
}

/* Cluster-cirkel (count) — content-element fra markerclusterer-rendereren.
   translateY(50%) centrerer den på koordinaten ligesom pris-pillerne. */
.stowly-map-cluster {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible;
	transform: translateY(50%);
}

.stowly-map-cluster__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--stowly-gradient-primary);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	border: 3px solid #fff;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
	box-sizing: border-box;
}

.stowly-map-cluster .stowly-map-cluster__n {
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* Card-hover ↔ cluster: når man hover et listing-card, og dets marker er
   gemt bag et cluster, så toggler js/map.js `.is-card-hover` på selve
   clusterets DOM-element. Vi spejler hover-stylingen fra de almindelige
   pille-markører — sort baggrund + hvid tekst. */
.stowly-map-cluster:hover .stowly-map-cluster__inner,
.stowly-map-cluster.is-card-hover .stowly-map-cluster__inner {
	background: #111;
	color: #fff;
	border-color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.stowly-map-cluster.is-card-hover {
	z-index: 1000 !important;
}

/* Google Maps InfoWindow — neutralisér Googles chrome (hvid boks, padding,
   luk-kryds), så vores eget kort-popup (.stowly-gmap-popup) fylder hele
   boblen ligesom de gamle Leaflet-popups gjorde. */
.gm-style .gm-style-iw.gm-style-iw-c {
	padding: 0 !important;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--stowly-color-line, #e8e4e0);
	box-shadow:
		0 16px 48px rgba(17, 17, 17, 0.12),
		0 4px 14px rgba(17, 17, 17, 0.06);
	background: var(--stowly-color-surface);
	max-width: min(440px, calc(100vw - 20px)) !important;
}

.gm-style .gm-style-iw-d {
	overflow: hidden !important;
	padding: 0 !important;
	max-height: none !important;
}

/* Googles nyere InfoWindow indsætter en header-stribe (.gm-style-iw-ch) der
   reserverer plads til luk-krydset — den giver et grimt tomt felt øverst i
   vores kort-popups. Vi har vores eget layout, så fjern den helt. */
.gm-style .gm-style-iw-ch {
	display: none !important;
	padding: 0 !important;
	height: 0 !important;
}

/* Fjern Googles pil/tip under boblen helt — kort-cardet skal bare være en
   firkant der ligger over markøren (uden hale). */
.gm-style .gm-style-iw-tc,
.gm-style .gm-style-iw-tc::after {
	display: none !important;
}

/* Skjul Googles default luk-kryds — popup'en lukkes ved klik andetsteds
   eller på en anden markør (samme adfærd som de gamle hover-popups). */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Egne kort-kontroller: afrundet +/- (top-højre) + skjul-liste-toggle
 * ------------------------------------------------------------- */

.stowly-map-zoom {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 44px;
	margin: 14px 14px 0 0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--stowly-color-line, #e8e4e0);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.stowly-map-zoom__btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	padding: 0;
	border: 0;
	background: #fff;
	color: #111;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

.stowly-map-zoom__btn svg {
	width: 18px;
	height: 18px;
}

.stowly-map-zoom__btn--in {
	border-bottom: 1px solid var(--stowly-color-line, #e8e4e0);
	border-radius: 12px 12px 0 0;
}

.stowly-map-zoom__btn--out {
	border-radius: 0 0 12px 12px;
}

/* color pinnes også på hover/focus — Astra's globale `button:hover { color:#fff }`
   ville ellers gøre +/- ikonet hvidt (currentColor). */
.stowly-map-zoom__btn:hover,
.stowly-map-zoom__btn:focus,
.stowly-map-zoom__btn:focus-visible {
	background: var(--stowly-color-surface-soft, #f5f3f0);
	color: #111;
}

.stowly-map-zoom__btn:active {
	background: #ececec;
	color: #111;
}

.stowly-map-zoom__btn:focus-visible {
	outline: 2px solid var(--stowly-color-primary, #006a69);
	outline-offset: -2px;
}

/* "Skjul liste"-knap (Airbnb-stil) — kun ikon, ligger øverst i top-højre
   over +/-. Kun PC; skjules på mobil hvor kortet allerede er fuldskærm. */
.stowly-map-expand-toggle {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 14px 14px 0 0;
	padding: 0;
	border: 1px solid var(--stowly-color-line, #e8e4e0);
	border-radius: 12px;
	background: #fff;
	color: #111;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	transition: background 120ms ease, box-shadow 120ms ease;
}

.stowly-map-expand-toggle svg {
	width: 18px;
	height: 18px;
}

/* Kun :hover (og :focus-visible for tastatur) ændrer baggrunden — IKKE :focus.
   Ellers beholder knappen den grå "aktiv" baggrund efter et museklik (fordi
   fokus bliver siddende), så den får en anden farve end +/- knapperne. */
.stowly-map-expand-toggle:hover,
.stowly-map-expand-toggle:focus-visible {
	background: var(--stowly-color-surface-soft, #f5f3f0);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	color: #111;
}

.stowly-map-expand-toggle:focus-visible {
	outline: 2px solid var(--stowly-color-primary, #006a69);
	outline-offset: 2px;
}

/* Aktiv tilstand (listen skjult → aria-pressed="true") samt museklik/fokus må
   ikke gøre ikonet hvidt — Astras globale button-styles sætter ellers hvid
   tekst/stroke. Hold ikonet sort så det altid er synligt. */
.stowly-map-expand-toggle[aria-pressed="true"],
.stowly-map-expand-toggle:active,
.stowly-map-expand-toggle:focus {
	color: #111;
}

.stowly-map-expand-toggle[aria-pressed="true"] svg,
.stowly-map-expand-toggle:active svg,
.stowly-map-expand-toggle:focus svg {
	stroke: #111;
}

@media (max-width: 1100px) {
	.stowly-map-expand-toggle {
		display: none !important;
	}
}

/* Egen kort-popup (OverlayView). Wrap'en placeres med absolut left/top af
   js/map.js, så cardet altid lander inden for kortets synlige område. */
.stowly-gmap-popup-wrap {
	position: absolute;
	z-index: 5;
	/* Google Maps sætter sin egen font (Roboto) på overlay-elementer, så
	   popup'en arvede ikke temaets skrift. Tving samme font som de
	   normale kort, så tekststørrelse/-bredde matcher præcist. */
	font-family: var(--stowly-font);
}

/* Enkelt listing-card: blokér side-pan; stak-listen får pan-y nedenunder. */
.stowly-gmap-popup-wrap:not(.stowly-gmap-popup-wrap--stack) {
	touch-action: none;
}

.stowly-gmap-popup-inner {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: var(--stowly-color-surface, #fff);
	border: 1px solid var(--stowly-color-line, #e8e4e0);
	box-shadow:
		0 16px 48px rgba(17, 17, 17, 0.12),
		0 4px 14px rgba(17, 17, 17, 0.06);
}

/* Luk-knap øverst til højre. Ikonet skal være SORT — også på hover/focus.
   Astra's globale `button:hover { color:#fff }` ville ellers gøre krydset
   usynligt på hvid baggrund. */
.stowly-gmap-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	cursor: pointer;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
	transition: background 120ms ease;
}

.stowly-gmap-popup__close svg {
	width: 16px;
	height: 16px;
}

.stowly-gmap-popup__close:hover,
.stowly-gmap-popup__close:focus,
.stowly-gmap-popup__close:focus-visible {
	background: #fff;
	color: #111;
}

.stowly-gmap-popup__close:focus-visible {
	outline: 2px solid var(--stowly-color-primary, #006a69);
	outline-offset: 2px;
}

.stowly-gmap-popup {
	line-height: 1.35;
}

.stowly-gmap-popup--stack {
	min-width: min(390px, calc(100vw - 28px));
}

.stowly-map-popup-stack {
	margin: 0;
	padding: 0;
	color: var(--stowly-color-ink, #111);
}

.stowly-map-popup-stack__intro {
	margin: 0;
	box-sizing: border-box;
	min-height: var(--stowly-stack-popup-head, 57px);
	height: var(--stowly-stack-popup-head, 57px);
	display: flex;
	align-items: center;
	padding: 0 calc(var(--stowly-stack-popup-close, 30px) + 16px) 0 14px;
	font-family: var(--stowly-font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: var(--stowly-color-ink);
	border-bottom: 1px solid var(--stowly-color-line, #e8e4e0);
}

.stowly-map-popup-stack__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: min(32vh, 260px);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* Scroll i listen må ikke kæde videre til siden ved kanterne. */
	overscroll-behavior: contain;
	touch-action: pan-y;
}

.stowly-map-popup-stack__scroll-hint {
	display: none;
	margin: 0;
}

.stowly-map-popup-stack__li {
	margin: 0;
	border-bottom: 1px solid var(--stowly-color-line, #e8e4e0);
}

.stowly-map-popup-stack__li:last-child {
	border-bottom: 0;
}

.stowly-map-popup-stack__item,
.stowly-map-popup-stack__item:visited {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 13px;
	padding: 13px 16px;
	text-decoration: none !important;
	color: var(--stowly-color-ink);
	transition: background-color 0.12s ease;
}

.stowly-map-popup-stack__item:hover,
.stowly-map-popup-stack__item:focus-visible {
	background: var(--stowly-color-surface-soft, #faf7f4);
	outline: none;
}

.stowly-map-popup-stack__thumb {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--stowly-color-surface-soft, #faf7f4);
	border: 1px solid var(--stowly-color-line, #e8e4e0);
}

.stowly-map-popup-stack__thumb--empty {
	background-image: linear-gradient(
		145deg,
		var(--stowly-color-primary-soft, #e6f2f1) 0%,
		var(--stowly-color-surface-soft, #faf7f4) 100%
	);
}

.stowly-map-popup-stack__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stowly-map-popup-stack__item-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stowly-map-popup-stack__title {
	font-family: var(--stowly-font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--stowly-color-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.stowly-map-popup-stack__meta {
	font-size: 13.5px;
	color: var(--stowly-color-ink-soft, #555);
}

.stowly-map-popup-stack__price {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--stowly-color-ink);
}

.stowly-map-popup-stack__price-suffix {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--stowly-color-ink-soft, #555);
}

/* ---------- Map popup card (Airbnb-style vertical pill) ---------- */

.stowly-map-popup,
a.stowly-map-popup {
	display: block;
	width: min(280px, calc(100vw - 40px));
	overflow: hidden;
	border-radius: 14px;
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink, #111);
	text-decoration: none !important;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
	will-change: transform;
}

a.stowly-map-popup:hover,
a.stowly-map-popup:focus-visible {
	transform: translateY(-1px);
	outline: none;
	text-decoration: none !important;
	color: var(--stowly-color-ink, #111);
}

.stowly-map-popup--no-image {
	width: min(260px, calc(100vw - 40px));
}

.stowly-map-popup__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--stowly-color-surface-soft, #faf7f4);
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.stowly-map-popup__media--placeholder {
	background-image: linear-gradient(
		155deg,
		var(--stowly-color-primary-soft, #e6f2f1) 0%,
		var(--stowly-color-surface-soft, #faf7f4) 55%,
		#f2ebe4 100%
	);
	position: relative;
}

.stowly-map-popup__media--placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 40px;
	height: 40px;
	opacity: 0.35;
	background: no-repeat center / contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

.stowly-map-popup__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

a.stowly-map-popup:hover .stowly-map-popup__img,
a.stowly-map-popup:focus-visible .stowly-map-popup__img {
	transform: scale(1.04);
}

.stowly-map-popup__chip {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow:
		0 1px 2px rgba(17, 17, 17, 0.1),
		0 4px 10px rgba(17, 17, 17, 0.08);
}

.stowly-map-popup__chip svg {
	width: 16px;
	height: 16px;
	fill: var(--stowly-color-primary);
}

.stowly-map-popup__body {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Leaflet's default stylesheet pakker alle <p> i popupper ind med
   `margin: 18px 0`, hvilket giver en kæmpe luft mellem titel, meta og
   CTA i vores kort-popup. Vi nulstiller den for alt under popup-kortet. */
.stowly-map-popup p,
.stowly-gmap-popup .stowly-map-popup p {
	margin: 0;
}

.stowly-map-popup__title {
	margin: 0;
	font-family: var(--stowly-font-heading);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--stowly-color-ink, #111);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.stowly-map-popup__meta {
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--stowly-color-ink-soft, #555);
}

.stowly-map-popup__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.stowly-map-popup__size {
	font-size: 14px;
	font-weight: 600;
	color: var(--stowly-color-ink-soft, #555);
	white-space: nowrap;
}

.stowly-map-popup__price-row {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 4px;
	margin-left: auto;
}

.stowly-map-popup__price {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--stowly-color-ink, #111);
	font-variant-numeric: tabular-nums;
}

.stowly-map-popup__suffix {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--stowly-color-ink-soft, #555);
}

.stowly-map-popup__cta {
	display: none;
	margin-top: 6px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	align-self: flex-start;
	padding: 6px 11px 6px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none !important;
	color: #fff !important;
	background: var(--stowly-gradient-primary);
	box-shadow: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.24);
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}

.stowly-map-popup__cta svg {
	width: 12px;
	height: 12px;
	transition: transform 0.15s ease;
}

a.stowly-map-popup:hover .stowly-map-popup__cta,
a.stowly-map-popup:focus-visible .stowly-map-popup__cta {
	box-shadow: 0 6px 16px rgba(var(--stowly-color-primary-rgb), 0.32);
}

a.stowly-map-popup:hover .stowly-map-popup__cta svg,
a.stowly-map-popup:focus-visible .stowly-map-popup__cta svg {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.stowly-map-popup,
	a.stowly-map-popup,
	.stowly-map-popup__img,
	.stowly-map-popup__cta,
	.stowly-map-popup__cta svg {
		transition: none !important;
		transform: none !important;
	}
}

@media (max-width: 380px) {
	.stowly-map-popup,
	a.stowly-map-popup {
		width: min(312px, calc(100vw - 32px));
	}
}

/* Google Maps renders inside .gm-style — keep our typography. */
.stowly-map .gm-style {
	font-family: inherit;
}

/* ---------- Invisible overlay (click-shield when a panel is open) ----------
   Sits above regular content but BELOW the sticky site header (z:50),
   filter bar (z:30) and open panels (z:40) — so the surrounding UI
   stays visible and interactive, but clicks on the map / listings /
   footer / anywhere else just close the panel rather than triggering
   those elements. */
.stowly-filter-overlay {
	position: fixed;
	inset: 0;
	z-index: 25;
	background: transparent;
	cursor: default;
	display: none;
}

.stowly-filter-overlay.is-active {
	display: block;
}

/* Mørkt overlay når søgepillen er aktiv (desktop + mobil bottom-sheet). */
.stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
	background: rgba(0, 0, 0, 0.45) !important;
	transition: background 0.35s ease;
}

@media (min-width: 769px) {
	.stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
		z-index: 40 !important;
	}
}

@media (max-width: 768px) {
	body.stowly-search-overlay-active .stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
		z-index: 2100 !important;
	}
}

/* ---------- Header search pill (only on archive) ---------- */

.stowly-header-search {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 3px;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: 999px;
	background: var(--stowly-color-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow var(--stowly-transition);
	width: 100%;
	max-width: 780px;
	min-width: 0;
	flex: 1 1 auto;
	justify-content: stretch;
	margin: 0 auto;
	box-sizing: border-box;
	overscroll-behavior: contain;
}

.stowly-header-search:hover,
.stowly-header-search:focus-within {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stowly-header-search__chev {
	display: none !important;
}

.stowly-header-search__segment {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 8px 18px 8px 18px;
	min-width: 0;
	min-height: 40px;
	flex: 1 1 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--stowly-transition);
}

.stowly-header-search__segment:hover:not(.is-open):not(.is-where-active),
.stowly-header-search:not(.is-search-expanded) .stowly-header-search__segment.is-open {
	background: var(--stowly-color-surface-soft);
}

form.stowly-header-search.is-search-expanded:not(.has-tab-slider) .stowly-header-search__segment.is-open,
form.stowly-header-search.is-search-expanded:not(.has-tab-slider) .stowly-header-search__segment--where-inline.is-where-active {
	background: var(--stowly-color-surface) !important;
}

.stowly-header-search__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--stowly-color-ink);
	line-height: 1.1;
	letter-spacing: 0;
	pointer-events: none;
}

/* Dropdown toggle button — flex row with the value on the left and the
   chevron on the right. Resets button styles so it blends into the pill. */
.stowly-header-search__toggle {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-width: 0;
	min-height: 0 !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--stowly-color-ink);
	cursor: pointer;
	text-align: left;
	outline: none !important;
	filter: none !important;
}

.stowly-header-search__toggle:hover,
.stowly-header-search__toggle:focus,
.stowly-header-search__toggle:focus-visible,
.stowly-header-search__toggle:active {
	background: transparent !important;
	color: var(--stowly-color-ink) !important;
	box-shadow: none !important;
	outline: none !important;
	border: 0 !important;
	filter: none !important;
}

.stowly-header-search__value {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--stowly-color-ink);
}

.stowly-header-search__value.is-placeholder {
	color: var(--stowly-color-ink-soft);
}

.stowly-header-search__segment.is-open,
.stowly-header-search__segment--where-inline:focus-within,
.stowly-header-search__segment--where-inline.is-where-active {
	padding-right: 30px;
}

.stowly-header-search__divider {
	width: 1px;
	height: 22px;
	background: var(--stowly-color-line);
	flex: 0 0 1px;
	align-self: center;
}

/* Dropdown menu — floating listbox anchored below the segment. */
.stowly-header-search__menu {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 50;
	min-width: 100%;
	width: max-content;
	max-width: min(360px, 90vw);
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	box-shadow: var(--stowly-shadow-lg);
}

.stowly-header-search__menu--right {
	left: auto;
	right: 0;
}

.stowly-header-search__segment.is-open .stowly-header-search__menu {
	display: block;
	animation: stowlyFlyoutFade 160ms ease-out;
}

/* Desktop arkiv-/platform-header (≥769px): Hvor/Hvad-panel = fuld bredde af søgepillen —
   position sat via front-page-search.js (--stowly-header-dropdown-*). */
@media (min-width: 769px) {
	body.stowly-archive-layout .stowly-site-header .stowly-header-search .stowly-header-search__segment.is-open > .stowly-header-search__menu {
		position: fixed !important;
		left: var(--stowly-header-dropdown-left, auto) !important;
		right: auto !important;
		top: var(--stowly-header-dropdown-top, auto) !important;
		width: var(--stowly-header-dropdown-width, auto) !important;
		min-width: 0 !important;
		max-width: none !important;
		box-sizing: border-box;
		z-index: 60;
		max-height: min(560px, calc(100vh - 120px));
		animation: none !important;
		transform: none !important;
		padding-top: 4px;
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search .stowly-header-search__segment.is-open > .stowly-header-search__menu.stowly-header-search__menu--right {
		left: var(--stowly-header-dropdown-left, auto) !important;
		right: auto !important;
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded .stowly-header-search__inline-suggestions:not([hidden]) {
		position: fixed !important;
		left: var(--stowly-header-dropdown-left, auto) !important;
		right: auto !important;
		top: var(--stowly-header-dropdown-top, auto) !important;
		width: var(--stowly-header-dropdown-width, auto) !important;
		min-width: 0 !important;
		max-width: none !important;
		box-sizing: border-box;
		z-index: 60;
		animation: none !important;
		transform: none !important;
	}
}

/* Floatende dropdowns på /opbevaring/-headeren: dropdownen er fuld pille-
   bredde og ligger med luft under pillen, så både pillen og dropdownen skal
   være afrundede hele vejen rundt (global.css skærer ellers pillens bund- og
   dropdownens tophjørner af for at "klistre" dem sammen). */
@media (min-width: 769px) {
	body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded {
		border-radius: 999px !important;
	}

	body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded .stowly-header-search__inline-suggestions:not([hidden]),
	body.stowly-archive-layout .stowly-site-header .stowly-header-search.is-search-expanded .stowly-header-search__segment.is-open > .stowly-header-search__menu {
		border-top: 1px solid var(--stowly-color-line) !important;
		border-radius: var(--stowly-radius-lg) !important;
	}
}

.stowly-header-search__menu-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 8px;
	padding-top: 12px;
	box-sizing: border-box;
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-header-search__option {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block;
	width: 100%;
	padding: 10px 12px;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--stowly-radius-md) !important;
	box-shadow: none !important;
	text-align: left;
	font-size: 14px;
	line-height: 1.3;
	color: var(--stowly-color-ink);
	cursor: pointer;
	transition: background-color 120ms ease;
	min-height: 0 !important;
	outline: none !important;
	filter: none !important;
}

.stowly-header-search__option + .stowly-header-search__option {
	margin-top: 2px;
}

.stowly-header-search__option:hover,
.stowly-header-search__option:focus-visible {
	background: var(--stowly-color-surface-soft) !important;
	color: var(--stowly-color-ink) !important;
}

.stowly-header-search__option.is-selected {
	background: var(--stowly-color-primary-soft) !important;
	color: var(--stowly-color-primary) !important;
	font-weight: 600;
}

.stowly-header-search__option.is-selected:hover,
.stowly-header-search__option.is-selected:focus-visible {
	background: var(--stowly-color-primary-soft) !important;
	color: var(--stowly-color-primary) !important;
}

label.stowly-header-search__option {
	display: flex;
	align-items: center;
	gap: 10px;
}

label.stowly-header-search__option input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 16px;
	accent-color: var(--stowly-color-primary);
}

label.stowly-header-search__option span {
	line-height: 1.3;
}

/* Fælles udseende. Størrelse styres af kontekst-klasser:
   `--archive-header` (34×34 lukket) og `--front-hero` (48×48 lukket) — se ovenfor + front-page.css. */
.stowly-header-search__submit {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 2px 0 4px;
	border: 0;
	border-radius: 999px !important;
	aspect-ratio: auto;
	background: var(--stowly-color-primary);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	line-height: 1;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background-color var(--stowly-transition), box-shadow var(--stowly-transition), transform var(--stowly-transition);
	box-shadow: 0 2px 8px rgba(var(--stowly-color-primary-rgb), 0.28);
}

.stowly-header-search__submit:hover,
.stowly-header-search__submit:focus {
	background: var(--stowly-color-primary-hover);
	color: #fff;
	box-shadow: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.35);
}

.stowly-header-search__submit:focus-visible {
	outline: 2px solid var(--stowly-color-primary);
	outline-offset: 2px;
}

.stowly-header-search__submit-icon {
	display: block;
	flex-shrink: 0;
}

.stowly-header-search__submit svg {
	stroke: currentColor;
}

.stowly-header-search__submit-text {
	white-space: nowrap;
}

/* Three fixed slots on desktop: brand (left), search pill (flex centre),
   right cluster (hamburger + bell + account + CTA). Using named areas
   means any stray 4th child (e.g. a nav that got echoed outside the
   cluster due to a stale cache) simply has no area and collapses —
   nothing ever wraps to a second row. */
body.stowly-archive-layout .stowly-site-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "brand search right";
	align-items: center;
}

body.stowly-archive-layout .stowly-site-brand {
	grid-area: brand;
	align-self: center;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

body.stowly-archive-layout .stowly-site-brand__logo {
	height: 34px;
	max-width: 170px;
}

body.stowly-archive-layout .stowly-archive-header-toolbar {
	grid-area: search;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 100%;
}

body.stowly-archive-layout .stowly-header-search {
	grid-area: unset;
	width: 100%;
}

body.stowly-archive-layout .stowly-site-header__right {
	grid-area: right;
	justify-self: end;
	align-self: center;
}

/* Safety net: on archive, the ONLY legal place for the primary nav is
   inside the hamburger dropdown. If a stale HTML cache still echoes it
   in the old centred position, hide it — the hamburger is the source
   of truth. */
body.stowly-archive-layout .stowly-site-header__inner > .stowly-site-nav {
	display: none !important;
}

/* ---------- Mobile map toggle (floating pill) ---------- */

.stowly-map-toggle {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 45;
	padding: 12px 22px;
	gap: 8px;
	align-items: center;
	border: 0;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: transform var(--stowly-transition), box-shadow var(--stowly-transition);
}

.stowly-map-toggle:hover,
.stowly-map-toggle:focus {
	background: #111;
	color: #fff;
	transform: translateX(-50%) translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.stowly-map-toggle svg {
	stroke: currentColor;
}

/* Icon swap: show the map-icon when closed, the X-icon when open. */
.stowly-map-toggle .stowly-map-toggle__icon--close {
	display: none;
}
.stowly-map-toggle.is-open .stowly-map-toggle__icon--map {
	display: none;
}
.stowly-map-toggle.is-open .stowly-map-toggle__icon--close {
	display: inline-block;
}

.stowly-map-toggle.is-hidden {
	display: none !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.stowly-results-layout,
	body.stowly-archive-layout .stowly-results-layout {
		grid-template-columns: 1fr;
	}
	.stowly-map-aside {
		position: fixed;
		inset: var(--stowly-header-height) 0 0 0;
		top: var(--stowly-header-height);
		height: calc(100vh - var(--stowly-header-height));
		min-height: 0;
		z-index: 90;
		background: var(--stowly-color-surface);
		transform: translateY(100%);
		transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
		pointer-events: none;
	}
	.stowly-map-aside.is-open {
		transform: translateY(0);
		pointer-events: auto;
	}
	body.stowly-archive-layout .stowly-map {
		border: 0;
		border-radius: 0;
	}
	/* The legacy top-right X button is replaced by the toggle pill, which
	   stays visible while the map is open and switches to "Skjul kort". */
	.stowly-map-aside__close {
		display: none !important;
	}
	body.stowly-archive-layout .stowly-map-toggle {
		display: inline-flex;
		z-index: 1001;
	}
}

@media (max-width: 980px) {
	.stowly-search-toolbar {
		grid-template-columns: 1fr;
		border-radius: var(--stowly-radius-lg);
		padding: 12px;
		gap: 10px;
		margin-top: 8px;
	}

	.stowly-toolbar-address,
	.stowly-toolbar-what {
		padding: 10px 14px;
		background: var(--stowly-color-surface-soft);
	}

	.stowly-toolbar-address,
	.stowly-toolbar-what {
		flex-wrap: wrap;
	}

	.stowly-toolbar-label {
		position: static;
		display: block;
		width: 100%;
		margin-bottom: 2px;
	}

	.stowly-toolbar-address + .stowly-toolbar-what::before {
		display: none;
	}

	.stowly-toolbar-submit {
		justify-self: stretch;
		width: 100%;
		min-height: 48px;
		border-radius: var(--stowly-radius-sm);
		justify-content: center;
	}

	.stowly-type-selector-panel {
		left: 0;
		right: 0;
		width: 100%;
	}

	.stowly-filter-panel {
		position: static;
		width: 100%;
		box-shadow: none;
		margin-top: 8px;
	}

	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image {
		width: 195px;
		aspect-ratio: 3 / 2;
	}

	body.stowly-archive-layout .stowly-listing-card--skeleton .stowly-skeleton-img {
		flex: 0 0 195px;
		width: 195px;
	}
}

@media (max-width: 640px) {
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card,
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link {
		flex-wrap: wrap;
	}
}

@media (max-width: 640px) {
	.stowly-archive__inner {
		padding: 16px 16px 48px;
	}

	.stowly-archive-header__title {
		font-size: 20px;
	}

	.stowly-filter-tabs {
		gap: 6px;
	}

	.stowly-filter-tab {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* ==========================================================================
   MOBILE (≤768px) — header wraps, cards full width, filters off-canvas
   ========================================================================== */

@media (max-width: 768px) {
	/* ---------- Header: brand (left) + right-cluster (hamburger + account), search pill row 2 ---------- */
	body.stowly-archive-layout .stowly-site-header__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"brand . right"
			"search search search";
		gap: 10px 8px;
		padding: 12px 16px;
		align-items: center;
	}

	body.stowly-archive-layout .stowly-site-brand,
	body.stowly-archive-layout .stowly-site-header__right,
	body.stowly-archive-layout .stowly-archive-header-toolbar {
		margin-top: 0;
	}

	/* Only the search-pill row should stay stuck to the top of the
	   viewport. Shifting the header up by (top-row-height - gap) leaves
	   a small breathing room above the pinned pill — it sits `gap` px
	   below the viewport top instead of flush against it.
	   The JS in listings-filters.js keeps --stowly-header-top-height in
	   sync with the real measurement. */
	body.stowly-archive-layout .stowly-site-header {
		top: calc(8px - var(--stowly-header-top-height, 56px));
	}
	body.stowly-archive-layout .stowly-site-brand {
		grid-area: brand;
		justify-self: start;
	}
	body.stowly-archive-layout .stowly-site-header__right {
		grid-area: right;
		justify-self: end;
	}
	body.stowly-archive-layout .stowly-header-search {
		grid-area: search;
		width: 100%;
		max-width: none;
		margin: 0;
	}
	/* Make the whole pill slightly more compact on mobile */
	body.stowly-archive-layout .stowly-header-search__segment {
		padding: 4px 30px 4px 14px;
		min-height: 44px;
	}
	body.stowly-archive-layout .stowly-header-search__submit {
		flex: 0 0 auto;
	}

	/* ---------- Archive inner: let the grid stretch edge-to-edge ---------- */
	body.stowly-archive-layout .stowly-archive__inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Astra lægger 16px vandret padding på <main>. Nulstil den så filter-
	   båndet kan blive fuld skærmbredde, og flyt gutteren til
	   results-layout så breadcrumbs/kort beholder deres indrykning. */
	body.stowly-archive-layout main.stowly-archive {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.stowly-archive-layout .stowly-results-layout {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* Filter bar keeps a little padding because tabs shouldn't hug the edge */
	body.stowly-archive-layout .stowly-filters-header-row {
		padding: 8px 16px;
	}
	/* Count lives inside results-main; keep its side padding aligned
	   with the tighter 8px gutter used by the cards/filter card. */
	body.stowly-archive-layout .stowly-archive-header {
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
		padding: 4px 8px 6px;
		margin-bottom: 8px;
	}

	body.stowly-archive-layout .stowly-archive-results-intro {
		margin: 0;
	}

	body.stowly-archive-layout .stowly-archive-results-intro__main {
		gap: 0;
	}

	/* Brødkrumme er redundant på mobil (logo + søge-wizard giver kontekst). */
	body.stowly-archive-layout .stowly-archive-results-intro .stowly-breadcrumbs {
		display: none;
	}

	body.stowly-archive-layout .stowly-archive-results-intro .stowly-archive-header {
		margin-bottom: 8px;
	}

	body.stowly-archive-layout .stowly-archive-header__text {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.stowly-archive-layout .stowly-archive-header__count {
		font-size: 13px;
		line-height: 1.25;
	}

	body.stowly-archive-layout .stowly-archive-header__actions {
		flex: 0 0 auto;
		gap: 6px;
		flex-wrap: nowrap;
	}

	body.stowly-archive-layout .stowly-reset-link {
		font-size: 12px;
		font-weight: 500;
		white-space: nowrap;
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;
	}

	body.stowly-archive-layout .stowly-save-search[data-stowly-save-search] {
		padding: 5px 9px;
		min-height: 30px;
		font-size: 12px;
		font-weight: 500;
		gap: 4px;
		box-shadow: none;
	}

	body.stowly-archive-layout .stowly-save-search[data-stowly-save-search] svg {
		width: 13px;
		height: 13px;
	}

	body.stowly-archive-layout .stowly-save-search [data-stowly-save-search-label] {
		display: none;
	}

	body.stowly-archive-layout .stowly-save-search .stowly-save-search__label-short {
		display: inline;
	}

	/* ---------- Listing cards: stacked on phone (archive only) ----------
	   Image on top (full-width, 16:10 aspect), body below. This
	   prevents the awkward mixed layout we used to get when a long
	   title wrapped under a small square thumbnail, and it matches
	   the card style shown on the single-listing "Andre annoncer fra
	   udbyderen" rail. Favorite heart floats over the image itself,
	   "Book nu" sits inline below the price.
	   Scopet til `body.stowly-archive-layout` så forsiden / landing
	   med `.stowly-card-grid` ikke får 10px card-padding på mobil. */
	/* Stablet mobil-visning: ingen fast korthøjde (billede + krop står over
	   hinanden, så højden varierer naturligt med indholdet). */
	body.stowly-archive-layout {
		--stowly-archive-card-h: auto;
	}
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		padding: 0 8px;
	}
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card,
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-article-post,
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-grid-common-col,
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) article.stowly-listing-card.ast-full-width {
		flex-direction: column !important;
		align-items: stretch !important;
		border-radius: var(--stowly-radius-lg) !important;
		width: 100%;
		max-width: none;
		padding: 10px !important;
		padding-right: 10px !important;
		gap: 10px !important;
	}

	/* Skeleton matcher den stablede visning: billede øverst (16:10), krop under. */
	body.stowly-archive-layout .stowly-listing-card--skeleton {
		flex-direction: column !important;
		padding: 10px !important;
		gap: 10px !important;
	}
	body.stowly-archive-layout .stowly-listing-card--skeleton .stowly-skeleton-img {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 10;
		height: auto;
		border-radius: var(--stowly-radius-md);
	}
	body.stowly-archive-layout .stowly-listing-card--skeleton .stowly-skeleton-body {
		padding: 0;
	}
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__link {
		width: 100%;
		gap: 10px;
		padding: 0;
		flex-direction: column;
		align-items: stretch;
	}
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__image {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 10;
		border-radius: var(--stowly-radius-md);
	}
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__title,
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body h2,
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body h3 {
		font-size: 15px;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__meta {
		font-size: 12.5px;
	}
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__body {
		/* Reset the desktop right-padding that used to reserve space
		   for the absolutely-positioned book button — it now sits
		   inline below the price, so the body can use the full width. */
		padding-right: 0;
		gap: 4px;
	}
	/* Book button moves out of the absolute corner and into the card
	   flow, pinned to the right edge below the price. */
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card__book {
		position: static !important;
		align-self: flex-end;
		padding: 8px 16px;
		font-size: 13px;
		margin-top: 4px;
	}
	/* Favorite heart sits on the image itself for a cleaner look when
	   the thumbnail takes the full card width. */
	body.stowly-archive-layout .stowly-listing-grid:not(.stowly-card-grid) .stowly-listing-card > .stowly-favorite-btn {
		top: 18px;
		right: 18px;
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
	}

	/* ---------- Map aside: full-screen take-over ---------- */
	.stowly-map-aside {
		inset: 0 !important;
		top: 0 !important;
		height: 100vh !important;
		height: 100dvh !important;
		z-index: 1000 !important;
	}
	/* Ingen +/- zoom-knapper på telefon — brugeren zoomer med pinch.
	   (På fuldskærms-kortet lå +-knappen alligevel bag den sticky header.) */
	.stowly-map-zoom {
		display: none !important;
	}
	/* Hide the legacy top-right X close button — we reuse the toggle pill. */
	.stowly-map-aside__close {
		display: none !important;
	}
	/* When map is open we hide body overflow via JS (see listings-filters.js) */
	body.stowly-map-open {
		overflow: hidden;
	}
	/* Floating toggle pill stays visible both when the map is hidden AND
	   when it is open — the label swaps between "Vis kort" / "Skjul kort".
	   Sits on top of the open map so users can dismiss it from the same
	   spot where they opened it. */
	body.stowly-archive-layout .stowly-map-toggle {
		display: inline-flex !important;
		bottom: max(20px, env(safe-area-inset-bottom));
		z-index: 1001;
	}
	body.stowly-archive-layout .stowly-map-toggle.is-hidden {
		display: none !important;
	}

	/* ---------- Mobil kort-popup: fast bund-dock over "Skjul kort" ---------- */
	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock {
		z-index: 1010 !important;
		pointer-events: auto;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-gmap-popup-inner {
		border-radius: 12px;
		box-shadow: 0 4px 20px rgb(17 17 17 / 14%);
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-gmap-popup__close {
		top: 6px;
		right: 6px;
		width: 32px;
		height: 32px;
		background: rgb(255 255 255 / 96%);
		box-shadow: 0 1px 6px rgb(17 17 17 / 16%);
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-gmap-popup__close svg {
		width: 18px;
		height: 18px;
	}

	/* Enkelt listing: fladt horisontalt kort */
	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup,
	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) a.stowly-map-popup {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		width: 100%;
		max-width: none;
		min-height: 5.85rem;
		border-radius: 12px;
		transform: none !important;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__media {
		flex: 0 0 5.85rem;
		width: 5.85rem;
		aspect-ratio: 1;
		border-bottom: 0;
		border-right: 1px solid var(--stowly-color-line, #e8e4e0);
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__body {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		padding: 0.8125rem 2.75rem 0.8125rem 0.975rem;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__title {
		font-size: 15px;
		line-height: 1.3;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__meta {
		font-size: 12.5px;
		margin: 0;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__footer {
		margin: 0;
		padding: 0;
		border: 0;
		gap: 0.65rem;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__price {
		font-size: 18px;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__suffix {
		font-size: 13px;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock:not(.stowly-gmap-popup-wrap--stack) .stowly-map-popup__chip {
		top: 5px;
		right: 5px;
		width: 1.75rem;
		height: 1.75rem;
	}

	/* Stak (flere depoter samme sted) */
	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock.stowly-gmap-popup-wrap--stack .stowly-gmap-popup--stack {
		min-width: 0;
		width: 100%;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__intro {
		min-height: 3.25rem;
		height: auto;
		padding: 0.8125rem 3rem 0.5rem 0.975rem;
		font-size: 15px;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__scroll-hint {
		display: block;
		margin: 0;
		padding: 0 0.975rem 0.5rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--stowly-color-ink-soft, #64748b);
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__list {
		max-height: min(36vh, 286px);
		position: relative;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		overscroll-behavior: contain;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__list.is-scrollable {
		padding-bottom: 0.25rem;
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.25rem), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.25rem), transparent 100%);
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__list.is-scrollable::after {
		content: "";
		position: sticky;
		bottom: 0;
		display: block;
		height: 1.25rem;
		margin-top: -1.25rem;
		pointer-events: none;
		background: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(255 255 255 / 92%));
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__item {
		padding: 0.8125rem 0.975rem;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__thumb {
		width: 3.575rem;
		height: 3.575rem;
		flex: 0 0 3.575rem;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__title {
		font-size: 15px;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__meta {
		font-size: 12.5px;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__price {
		font-size: 18px;
	}

	body.stowly-archive-layout .stowly-gmap-popup-wrap--mobile-dock .stowly-map-popup-stack__price-suffix {
		font-size: 13px;
	}

	/* ---------- Cards: full-bleed 100% width, no side padding ---------- */
	body.stowly-archive-layout .stowly-results-main {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ---------- Filter panels: off-canvas bottom-sheet ----------
	   The .stowly-filters parent has position:sticky + z-index:30 which
	   creates a stacking context — any z-index we put on the panel below
	   is capped to that context's level. To float the sheet ABOVE the
	   dimmed overlay AND the floating "Vis kort" pill (z:1001), we bump
	   the whole .stowly-filters context to z:2000 while a panel is open. */
	body.stowly-filter-open {
		overflow: hidden;
	}

	/* Lås synsfelt-baggrundsscroll når arkivfiltre/header-search paneler eller
	   type-flyout er åben (synk med listings-filters.js `syncArchiveScrollLock`). */
	html:has(body.stowly-archive-scroll-lock),
	html.stowly-archive-scroll-lock,
	body.stowly-archive-scroll-lock {
		overflow: hidden !important;
		overscroll-behavior: none;
	}

	html.stowly-archive-scroll-lock {
		padding-inline-end: var(--stowly-scrollbar-gap, 0);
		box-sizing: border-box;
	}

	body.stowly-archive-layout form.stowly-filters {
		overscroll-behavior: contain;
	}
	body.stowly-filter-open.stowly-archive-layout .stowly-filters {
		/*
		 * Sticky arkiv-header (.stowly-site-header) sits at z:2300; the
		 * filter stack must eclipse it while a panel is open — otherwise long
		 * bottom-sheets tuck visually *under* the header.
		 */
		z-index: 2600 !important;
	}
	/* Fanepaneler: overlay gennemsigtig (ingen grå tone), men z-index så lag
	   stadig under .stowly-filters. Header-dropdowns uden stowly-filter-open:
	   transparent overlay (se nedenfor). */
	body.stowly-archive-layout:not(.stowly-filter-open) .stowly-filter-overlay.is-active {
		z-index: 24 !important;
		background: transparent !important;
	}

	body.stowly-archive-layout:not(.stowly-filter-open) .stowly-filter-overlay.is-active.stowly-filter-overlay--dimmed {
		background: rgba(0, 0, 0, 0.45) !important;
	}

	body.stowly-archive-layout.stowly-filter-open .stowly-filter-overlay.is-active {
		background: transparent !important;
		z-index: 1500 !important;
	}
	/* Skjul kort-pillen mens filter-sheet er åbent (overlay er gennemsigtig). */
	body.stowly-filter-open.stowly-archive-layout .stowly-map-toggle {
		display: none !important;
	}

	/* Container just exists for stacking — children break out with fixed. */
	body.stowly-archive-layout .stowly-filter-panels {
		position: static;
	}

	/* Filter-sheet: bottom-sheet — max height clears sticky header+taps så lange panels
	   ikke falder bag under headeren; --stowly-archive-sticky-sheet-top-inset sættes via JS.
	   Fallback ~148px ved manglende JS-måling. */
	body.stowly-archive-layout .stowly-filter-panel {
		position: fixed !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
		max-height: min(
			96dvh,
			calc(
				100dvh - var(--stowly-archive-sticky-sheet-top-inset, 148px) - env(safe-area-inset-bottom, 0px) - 8px
			)
		) !important;
		/* Ikke fit-content (kollapser __scroll ved flex-basis 0); min-højde kun på tunge paneler nedenunder */
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		overflow: hidden;
		overflow-x: hidden;
		overscroll-behavior: contain;
		margin: 0 !important;
		padding-top: max(42px, calc(env(safe-area-inset-top, 0px) + 28px));
		padding-right: 0;
		padding-left: 0;
		padding-bottom: 0;
		border: 0 !important;
		border-radius: var(--stowly-radius-lg) var(--stowly-radius-lg) 0 0 !important;
		box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, 0.18) !important;
		background: var(--stowly-color-surface);
		z-index: 10;
		transform: translateY(100%);
		transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
		visibility: hidden;
		animation: none !important;
	}
	body.stowly-archive-layout .stowly-filter-panel__scroll {
		flex: 1 1 0%;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		scroll-padding-top: 10px;
		scroll-padding-bottom: 24px;
		padding: 10px 16px 28px;
	}
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-price"] .stowly-filter-panel__scroll,
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
		padding: 8px 12px 24px;
	}
	/* Størrelse: flere sliders — brug reel min-højde så ikke knap overlapper/indhold krymper */
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-size"] .stowly-filter-panel__scroll {
		min-height: clamp(260px, 54dvh, 520px);
	}
	/* Chip-paneler: skal kunne scroll’es ud uden mast, men ikke lave tom luft som på ét prisfelt */
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-location-type"] .stowly-filter-panel__scroll,
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-security"] .stowly-filter-panel__scroll,
	body.stowly-archive-layout .stowly-filter-panel[data-panel-id="panel-provider"] .stowly-filter-panel__scroll {
		min-height: clamp(180px, 38dvh, 480px);
	}
	/* Drag-handle pill at the top of the sheet. */
	body.stowly-archive-layout .stowly-filter-panel::before {
		content: "";
		position: absolute;
		top: 14px;
		left: 50%;
		width: 40px;
		height: 4px;
		border-radius: 999px;
		background: #d9d9d9;
		transform: translateX(-50%);
		pointer-events: none;
	}
	body.stowly-archive-layout .stowly-filter-panel.is-active {
		transform: translateY(0);
		visibility: visible;
	}
	body.stowly-archive-layout .stowly-filter-panel.is-active.stowly-sheet-exit {
		transform: translateY(100%);
		visibility: visible;
		transition: transform 0.32s cubic-bezier(0.36, 0, 0.2, 1);
	}

	/* Footer uden for scroll; kun __scroll scroller (undgå footer ovenpå sliders). */
	body.stowly-archive-layout .stowly-filter-panel__footer {
		display: flex;
		justify-content: stretch;
		gap: 12px;
		position: relative;
		flex: 0 0 auto;
		flex-shrink: 0;
		margin: 0;
		padding: 20px 16px calc(26px + max(env(safe-area-inset-bottom), 14px));
		background: var(--stowly-color-surface);
		border-top: 1px solid var(--stowly-color-line);
		box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.18);
		z-index: 1;
	}
	body.stowly-archive-layout .stowly-filter-panel__apply {
		flex: 1 1 auto;
		min-height: 48px;
	}

	/* ---------- Header search dropdowns on mobile ----------
	   The dropdown menu anchors under its segment; on a narrow viewport
	   we let it span the full width of the pill so options stay readable.
	   Submit button and pill keep working as usual — no overlay needed
	   since the dropdown is a normal click-to-close menu. */
	.stowly-header-search__menu {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
	}

	/* «Hvor» + «Hvad» på mobil: bottom-sheet — flex + kun .menu-scroll scroller.
	   Inkl. body-portal (Hvor/Hvad flyttes til <body> på forsiden mobil). */
	body.stowly-archive-layout .stowly-header-search__segment > .stowly-header-search__menu,
	.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment > .stowly-header-search__menu,
	body > .stowly-header-search__menu[data-stowly-front-what-portal] {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		position: fixed !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
		max-height: min(
			96dvh,
			calc(
				100dvh - var(--stowly-archive-sticky-sheet-top-inset, 148px) - env(safe-area-inset-bottom, 0px) - 8px
			)
		) !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding:
			max(38px, calc(env(safe-area-inset-top, 0px) + 24px))
			16px
			0
			16px;
		border: 0 !important;
		border-radius: var(--stowly-radius-lg) var(--stowly-radius-lg) 0 0 !important;
		box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, 0.18) !important;
		background: var(--stowly-color-surface);
		z-index: 2200 !important;
		visibility: hidden;
		transform: translateY(100%);
		transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 260ms;
		animation: none !important;
		overflow-x: hidden;
		overflow-y: hidden;
		overscroll-behavior: contain;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}
	body.stowly-archive-layout .stowly-header-search__segment > .stowly-header-search__menu > .stowly-header-search__menu-scroll,
	.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment > .stowly-header-search__menu > .stowly-header-search__menu-scroll,
	body > .stowly-header-search__menu[data-stowly-front-what-portal] > .stowly-header-search__menu-scroll {
		flex: 0 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 12px;
		scroll-padding-bottom: 20px;
	}

	/* Mobil arkiv-header: forslag under inline «Hvor» skal sidde ved feltet. */
	body.stowly-archive-layout .stowly-header-search__segment--where-inline {
		position: relative;
	}

	/* Touch-venlige adresseforslag i sticky header-søgning. */
	body.stowly-archive-layout .stowly-header-search .stowly-location-search__suggestion {
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	body.stowly-archive-layout .stowly-header-search__segment.is-open > .stowly-header-search__menu,
	.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment.is-open > .stowly-header-search__menu,
	body > .stowly-header-search__menu[data-stowly-front-what-sheet-open] {
		visibility: visible;
		transform: translateY(0);
		transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
	}

	body.stowly-archive-layout .stowly-header-search__segment.is-open > .stowly-header-search__menu.stowly-sheet-exit,
	.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment.is-open > .stowly-header-search__menu.stowly-sheet-exit,
	body > .stowly-header-search__menu[data-stowly-front-what-sheet-open].stowly-sheet-exit {
		transform: translateY(100%);
	}

	/* Drag-handle pill i toppen — visuel markør for bottom-sheet. */
	body.stowly-archive-layout .stowly-header-search__segment > .stowly-header-search__menu::before,
	.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__segment > .stowly-header-search__menu::before,
	body > .stowly-header-search__menu[data-stowly-front-what-portal]::before {
		content: "";
		position: absolute;
		top: 14px;
		left: 50%;
		width: 40px;
		height: 4px;
		border-radius: 999px;
		background: #d9d9d9;
		transform: translateX(-50%);
		pointer-events: none;
		z-index: 1;
	}

	body.stowly-archive-layout .stowly-header-search__menu-footer,
	.stowly-front-hero .stowly-header-search--front-hero .stowly-header-search__menu-footer,
	body > .stowly-header-search__menu[data-stowly-front-what-portal] .stowly-header-search__menu-footer {
		display: flex;
		justify-content: center;
		position: relative;
		flex-shrink: 0;
		margin: 0 !important;
		margin-top: 8px;
		padding: 20px 0 calc(22px + max(env(safe-area-inset-bottom), 14px)) !important;
		border-top: 1px solid var(--stowly-color-line);
		background: var(--stowly-color-surface);
		z-index: 2;
	}

	body.stowly-archive-layout .stowly-site-header {
		position: sticky;
		z-index: 2300 !important;
		box-shadow: 0 1px 0 var(--stowly-color-line);
	}

	/* ---------- Filter tabs: one-line horizontal scroll ----------
	   Lock overflow so tabs scroll inside the row without widening the page. */
	body.stowly-archive-layout .stowly-filters,
	body.stowly-archive-layout .stowly-listing-filters {
		max-width: 100%;
		overflow-x: clip;
	}

	/* Full-bleed filter strip på telefon — parent har allerede padding:0,
	   så undgå 100vw-breakout (skubber baren til højre på iOS). */
	body.stowly-archive-layout .stowly-filters {
		border-bottom: 0 !important;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0 0 12px !important;
		background: var(--stowly-color-surface);
		/* On mobile the filter bar sticks directly under the search-pill
		   row. The `8px` matches the breathing room above the search pill
		   (see .stowly-site-header top above) so the whole sticky stack
		   stays visually anchored together. */
		top: calc(8px + var(--stowly-header-search-height, var(--stowly-header-height))) !important;
		box-sizing: border-box;
	}
	body.stowly-filter-open.stowly-archive-layout .stowly-filters {
		background: transparent !important;
	}
	body.stowly-archive-layout .stowly-filters-header-row {
		flex-wrap: nowrap !important;
		min-width: 0;
		max-width: none;
		width: 100%;
		padding: 8px 16px !important;
		margin: 0 !important;
		background: var(--stowly-color-surface);
		border: 0;
		border-bottom: 1px solid var(--stowly-color-line);
		border-radius: 0;
		box-shadow: none;
	}
	body.stowly-archive-layout .stowly-filter-actions {
		flex: 0 0 auto;
		padding-left: 8px;
	}

	/* Scrollable tabs with a fade-out on the right edge so users can see
	   there's more content just out of view. Uses CSS mask for a soft
	   gradient — modern browsers (Safari 15+, Chrome 120+, FF 120+)
	   support unprefixed, with -webkit- as fallback. */
	body.stowly-archive-layout .stowly-filter-tabs {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: 100%;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
		-webkit-mask-image: linear-gradient(
			to right,
			#000 0,
			#000 calc(100% - 28px),
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			#000 0,
			#000 calc(100% - 28px),
			transparent 100%
		);
	}
	body.stowly-archive-layout .stowly-filter-tabs::-webkit-scrollbar {
		display: none;
	}
	.stowly-filter-tab,
	.stowly-filter-toggle,
	.stowly-filter-divider {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* ============================================================
   "Gem denne søgning" button — i .stowly-archive-header__actions
   ============================================================ */
.stowly-save-search[data-stowly-save-search] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.stowly-save-search__label-short {
	display: none;
}

/* Toast notifications (shared with saved searches flow) */
.stowly-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(20px);
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--stowly-color-ink, #1b1b1b);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	opacity: 0;
	animation: stowlyToastIn 200ms ease-out forwards;
	z-index: 10000;
}

.stowly-toast--success { background: #1f8a70; }
.stowly-toast--error { background: #dc2626; }

.stowly-toast.is-leaving {
	animation: stowlyToastOut 380ms ease-in forwards;
}

@keyframes stowlyToastIn {
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes stowlyToastOut {
	to { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

/* ---------- "Indlæs flere"-blok under grid'et ---------- */

.stowly-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 28px auto 8px;
	padding: 8px 0 0;
}

.stowly-load-more[hidden] {
	display: none;
}

.stowly-load-more__status {
	margin: 0;
	font-size: 13px;
	color: var(--stowly-color-ink-soft, #555);
	text-align: center;
}

.stowly-load-more__btn {
	min-width: 220px;
	background-color: var(--stowly-color-surface);
	background-image: none;
	border-width: 1.5px;
	border-style: solid;
	border-color: var(--stowly-color-line-strong, #cfd4dc);
	box-shadow: none;
}

.stowly-load-more__btn:hover,
.stowly-load-more__btn:focus-visible {
	background-color: var(--stowly-color-surface-soft, #f4f1ed);
	background-image: none;
	border-color: var(--stowly-color-ink-muted, #6b7280);
}

.stowly-load-more__btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

@media (min-width: 901px) {
	.stowly-load-more {
		width: 100%;
		max-width: var(--stowly-floating-ribbon-width);
		gap: 14px;
		margin-top: 36px;
		margin-bottom: 12px;
	}

	.stowly-load-more__status {
		font-size: 15px;
	}

	.stowly-load-more__btn {
		width: 100%;
		min-width: 0;
		padding-top: 14px;
		padding-bottom: 14px;
		font-size: 16px;
	}
}

@media (min-width: 1600px) {
	.stowly-load-more {
		max-width: min(1760px, calc(100vw - 48px));
	}
}