/*
 * Inter er self-hostet via css/fonts.css (enqueued som handlen
 * `stowly-google-fonts` i php/enqueue.php). woff2-filerne ligger i
 * assets/fonts/inter/ og er en variable font, så samme to filer dækker
 * 100–900-vægtene. Der må IKKE genindføres `@import` her — det laver en
 * render-blocking-kæde der forsinker LCP.
 */

/*
 * Farver: primært css/design-tokens.css + samme tokens her (fallback).
 * Ved rebrand: opdater design-tokens.css og stowly_design_tokens() i PHP.
 */
:root {
	/*
	 * 'Inter Fallback' / 'Satoshi Fallback' er metric-justerede faces
	 * (se css/fonts.css) der matcher webfontens bredde/højde nøjagtigt,
	 * så der ikke sker layout shift (CLS) når den rigtige font swapper
	 * ind. De skal stå *lige efter* webfonten og før system-stakken.
	 */
	--stowly-font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/*
	 * Overskrifter, section titles og store displaytekster bruger Satoshi
	 * (self-hostet, se css/fonts.css). Body/UI/knapper/labels bliver på
	 * Inter via --stowly-font. Premium, minimalistisk Scandinavian look à
	 * la Linear / Stripe / Notion / Vercel — Satoshi falder tilbage på
	 * sin metric-fallback, så Inter og system-sans hvis fontfilen ikke
	 * når at loade.
	 */
	--stowly-font-heading: 'Satoshi', 'Satoshi Fallback', 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--stowly-color-primary: #006a69;
	--stowly-color-primary-hover: #00524f;
	--stowly-color-primary-soft: #e6f2f1;
	--stowly-color-primary-strong: #00413f;
	--stowly-color-primary-deep: #00827c;
	--stowly-color-primary-rgb: 0, 106, 105;
	--stowly-color-accent: #006a69;
	--stowly-gradient-primary: linear-gradient(
		135deg,
		var(--stowly-color-primary) 0%,
		var(--stowly-color-primary-hover) 55%,
		var(--stowly-color-primary-deep) 100%
	);
	--stowly-color-ink: #222222;
	--stowly-color-ink-soft: #6a6a6a;
	--stowly-color-ink-muted: #9a9a9a;
	--stowly-color-line: #ebebeb;
	--stowly-color-line-strong: #dddddd;
	--stowly-color-surface: #ffffff;
	--stowly-color-surface-soft: #f7f7f7;
	--stowly-color-surface-muted: #f2f2f2;
	--stowly-color-surface-2: #f6f3ec;
	--stowly-color-bg: #ffffff;
	--stowly-color-page: #f7f4ee;
	--stowly-color-danger: #c13515;
	--stowly-color-danger-soft: #fff5f3;
	--stowly-color-success: #008a05;
	--stowly-color-success-soft: #eef8ef;
	--stowly-color-warning: #8a6200;
	--stowly-color-warning-soft: #fff8e7;
	--stowly-color-info: var(--stowly-color-primary);
	--stowly-color-info-soft: var(--stowly-color-primary-soft);
	--stowly-color-info-strong: var(--stowly-color-primary-hover);
	--stowly-color-map-water: #c8dcf0;
	--stowly-shadow-primary-sm: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.25);
	--stowly-shadow-primary-md: 0 6px 18px rgba(var(--stowly-color-primary-rgb), 0.28);
	--stowly-shadow-primary-lg: 0 10px 24px rgba(var(--stowly-color-primary-rgb), 0.35);
	--stowly-radius-sm: 8px;
	--stowly-radius-md: 12px;
	--stowly-radius-lg: 16px;
	--stowly-radius-xl: 24px;
	--stowly-radius-pill: 999px;
	--stowly-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--stowly-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--stowly-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
	--stowly-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
	--stowly-shadow-xl: 0 18px 40px rgba(0, 0, 0, 0.18);
	--stowly-transition: 180ms cubic-bezier(0.2, 0, 0, 1);
	--stowly-header-height: 76px;
	--stowly-container: 1280px;
	--stowly-container-archive: 1440px;
	/*
	 * Standard breakpoints. CSS variables kan ikke direkte drive
	 * @media-queries (ikke understøttet i browsere endnu), så de her
	 * tokens er primært dokumentation: NYE @media-queries skal hænge
	 * sig på én af de fem kanoniske brydepunkter herunder for at
	 * undgå det miks af 540/640/720/767/768/880/900/960/1200 vi har i
	 * dag. Ren CSS-bruge: clamp(), container queries og fallback i
	 * computed styles. Sass/PostCSS-build vil senere kunne læse dem.
	 *
	 *   --bp-xs  ~480px   small mobile
	 *   --bp-sm  ~640px   large mobile
	 *   --bp-md  ~768px   tablet
	 *   --bp-lg  ~960px   small desktop
	 *   --bp-xl  ~1200px  desktop
	 */
	--bp-xs: 480px;
	--bp-sm: 640px;
	--bp-md: 768px;
	--bp-lg: 960px;
	--bp-xl: 1200px;
	--stowly-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'/%3E%3C/svg%3E");
	--stowly-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 8 6 4 10 8'/%3E%3C/svg%3E");
}

.stowly-front-search__menu:has(.stowly-what-menu),
.stowly-header-search__menu:has(.stowly-what-menu) {
	max-width: min(720px, calc(100vw - 24px));
	max-height: min(560px, calc(100vh - 160px));
	width: max-content;
	padding: 16px;
}

.stowly-what-menu {
	display: grid;
	gap: 14px;
	min-width: min(680px, calc(100vw - 48px));
	padding: 4px;
}

.stowly-what-menu__section {
	display: grid;
	gap: 10px;
}

.stowly-what-menu__title {
	margin: 0;
	padding: 0 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft);
}

.stowly-what-menu__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

/* Header-søgning desktop: 3 kolonner + ingen Anvend (luk med klik udenfor). */
@media (min-width: 769px) {
	.stowly-header-search .stowly-what-menu__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.stowly-header-search .stowly-what-menu {
		min-width: min(540px, calc(100vw - 48px));
	}

	.stowly-header-search .stowly-header-search__menu-footer {
		display: none !important;
	}
}

.stowly-what-menu__preset-groups {
	display: grid;
	gap: 10px;
	max-height: 250px;
	overflow-y: auto;
	padding-right: 4px;
	-webkit-overflow-scrolling: touch;
}

.stowly-what-menu__preset-group {
	display: grid;
	gap: 6px;
}

.stowly-what-menu__section[hidden],
.stowly-what-menu__preset-group[hidden],
[data-stowly-flow-preset-group][hidden] {
	display: none !important;
}

.stowly-what-menu__subtitle {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--stowly-color-ink);
}

.stowly-what-menu__presets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.stowly-what-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid var(--stowly-color-line);
	border-radius: 12px;
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	min-height: 50px;
}

.stowly-what-card input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
	margin: 0;
}

.stowly-what-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--stowly-color-bg, #f5f5f5);
	color: var(--stowly-color-ink);
}

.stowly-what-card__icon svg {
	width: 18px;
	height: 18px;
}

.stowly-what-card__label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

.stowly-what-card:hover,
.stowly-what-card:focus-within {
	border-color: var(--stowly-color-ink);
}

.stowly-what-card.is-selected {
	border-color: var(--stowly-color-primary);
	background: var(--stowly-color-primary-soft);
	color: var(--stowly-color-primary);
	box-shadow: 0 0 0 1px var(--stowly-color-primary) inset;
}

.stowly-what-card.is-selected .stowly-what-card__icon {
	background: rgba(255, 255, 255, 0.7);
	color: var(--stowly-color-primary);
}

/* Startmåned-dropdown — samme kasse-look som opbevaringstype, men smallere
   panel og centreret tekst (kasserne har kun et månedsnavn, ingen ikon). */
.stowly-when-menu {
	min-width: min(440px, calc(100vw - 48px));
	gap: 12px;
}

.stowly-when-card {
	justify-content: center;
	text-align: center;
	min-height: 46px;
	padding: 10px 8px;
}

.stowly-when-card .stowly-what-card__label {
	width: 100%;
	text-align: center;
}

/* Aktiv (valgt) startmåned: behold den markerede baggrund, men hold
   teksten sort i stedet for primærfarven. */
.stowly-when-card.is-selected {
	color: var(--stowly-color-ink);
}

/* Startmåned bruger [data-dropdown-option] — den globale selected-regel
   nedenfor sætter ellers hvid tekst, som ikke passer til lys baggrund. */
[data-dropdown-menu] .stowly-when-card.is-selected,
[data-dropdown-menu] .stowly-when-card[aria-selected="true"],
[data-dropdown-menu] .stowly-when-card.is-selected:hover,
[data-dropdown-menu] .stowly-when-card[aria-selected="true"]:hover,
[data-dropdown-menu] .stowly-when-card.is-selected:focus-visible,
[data-dropdown-menu] .stowly-when-card[aria-selected="true"]:focus-visible {
	color: var(--stowly-color-ink);
}

[data-dropdown-menu] .stowly-when-card.is-selected .stowly-what-card__label,
[data-dropdown-menu] .stowly-when-card[aria-selected="true"] .stowly-what-card__label {
	color: var(--stowly-color-ink);
}

/* "Når som helst" fylder hele rækken som en tydelig standard-mulighed. */
.stowly-when-card--any {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.stowly-when-menu {
		min-width: 0;
	}
}

.stowly-what-preset {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid var(--stowly-color-line);
	border-radius: 999px;
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.stowly-what-preset small {
	color: var(--stowly-color-ink-soft);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.stowly-what-preset:hover,
.stowly-what-preset:focus-visible,
.stowly-what-preset.is-selected {
	border-color: var(--stowly-color-primary);
	background: var(--stowly-color-primary-soft);
	color: var(--stowly-color-primary);
	box-shadow: 0 0 0 1px var(--stowly-color-primary) inset;
}

.stowly-what-preset:hover small,
.stowly-what-preset:focus-visible small,
.stowly-what-preset.is-selected small {
	color: var(--stowly-color-primary);
}

/* Phones / narrow: arkiv-header egen mobil-sheet i archive-listings.css.
   Forsidens «Hvad» styres i front-page.css (samme --stowly-archive-sticky-sheet-top-inset). */
@media (max-width: 768px) {
	.stowly-header-search__menu:has(.stowly-what-menu) {
		width: auto;
		min-width: 0;
		max-width: none;
		left: 0 !important;
		right: 0 !important;
		box-sizing: border-box;
		padding: 10px;
		max-height: min(72vh, 560px);
	}

	.stowly-what-menu {
		min-width: 0 !important;
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
		gap: 12px;
	}

	.stowly-what-menu__preset-groups {
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}

	.stowly-what-card {
		min-height: 52px;
		padding: 12px;
		align-items: center;
	}

	.stowly-what-preset {
		min-height: 44px;
		padding: 10px 14px;
	}
}

@media (max-width: 640px) {
	.stowly-what-menu {
		min-width: 0;
	}

	.stowly-what-menu__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.stowly-what-menu__presets {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (max-width: 380px) {
	.stowly-what-menu__cards {
		grid-template-columns: 1fr;
	}
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scrollbar-gutter: stable;
}

/* Flad side-canvas: én `background`-shorthand med !important så parent-
   tema / customizer ikke kan lægge en linear/radial-gradient på html/body
   (den gamle `background-color` + `background-image` kunne tabe mod senere
   `background: gradient(…)` uden !important).

   Body + Astras wrapper-divs får den cremede `--stowly-color-page`-
   baggrund (#fcfaf6), så hele sitet matcher /udbyder/{slug}. Headeren
   beholder den rene hvide `--stowly-color-bg` for at stå som et
   tydeligt lag over canvas'en. */
html,
body,
#page,
#main,
.site,
#content,
.site-content,
.site-main,
.ast-container,
.ast-container-fluid,
.ast-separate-container,
#content-area,
.content-area,
.ast-article-single,
.ast-article-post {
	background: var(--stowly-color-page) !important;
}

.ast-primary-header-bar {
	background: var(--stowly-color-bg) !important;
}

body {
	font-family: var(--stowly-font);
	color: var(--stowly-color-ink);
	line-height: 1.5;
	font-size: 16px;
	/* Clean, læsbar brødtekst: aktivér kerning + standard-ligaturer. */
	font-feature-settings: 'kern' 1, 'liga' 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-family: var(--stowly-font-heading);
	/* Lidt tighter tracking — moderne, eksklusivt SaaS-look. */
	letter-spacing: -0.02em;
	color: var(--stowly-color-ink);
	line-height: 1.15;
}

body h1 {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0 0 12px;
}

body h2 {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 700;
	margin: 0 0 12px;
}

body h3 {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 8px;
}

body h4,
body h5,
body h6 {
	font-weight: 600;
	letter-spacing: -0.01em;
}

body p {
	margin: 0 0 12px;
}

a {
	color: var(--stowly-color-ink);
	text-decoration: none;
	transition: color var(--stowly-transition);
}

/* Global link-hover: skift til brandets primary-farve i stedet for
   en underline. Farven føles mere nutidig (Airbnb/Booking-stil) og
   holder tekst-rhythmen ubrudt. Den rammer alt hvor mere-specifikke
   regler ikke overtager; overrides nedenfor matcher samme mønster. */
a:hover {
	color: var(--stowly-color-primary);
	text-decoration: none;
}

/* ---------- Custom dropdown primitives ----------
   Every custom dropdown on the site uses the [data-dropdown] pattern:
     [data-dropdown] > [data-dropdown-toggle] + [data-dropdown-menu]
       where [data-dropdown-menu] holds one or more [data-dropdown-option]
       buttons.
   Astra (and a lot of generic WP stylesheets) ships a default
     `button:hover { color: #fff }` rule that bleeds into our dropdowns
     and turns option text invisible on light backgrounds. These rules
     are a site-wide safety net: any dropdown built with the data-attrs
     above automatically keeps dark ink text on hover/focus, regardless
     of per-component CSS. Component-level rules can still override
     background / active state as needed. */
[data-dropdown-menu] [data-dropdown-option],
[data-dropdown-menu] [data-dropdown-option]:hover,
[data-dropdown-menu] [data-dropdown-option]:focus,
[data-dropdown-menu] [data-dropdown-option]:focus-visible,
[data-dropdown-menu] [data-dropdown-option]:active {
	color: var(--stowly-color-ink);
}

/* Selected / current option keeps its inverted (dark bg + white text)
   state — opt-in via .is-selected or [aria-selected="true"]. */
[data-dropdown-menu] [data-dropdown-option].is-selected,
[data-dropdown-menu] [data-dropdown-option][aria-selected="true"],
[data-dropdown-menu] [data-dropdown-option].is-selected:hover,
[data-dropdown-menu] [data-dropdown-option][aria-selected="true"]:hover,
[data-dropdown-menu] [data-dropdown-option].is-selected:focus-visible,
[data-dropdown-menu] [data-dropdown-option][aria-selected="true"]:focus-visible {
	color: #fff;
}

/* Cookie-banner ghost-knapper — Astra's generelle button:hover { color:#fff }
   gør ellers «Kun nødvendige», «Tilpas» og «Afvis valgfrie» usynlige. */
#stowly-cookie-scrim button.stowly-cookie__btn--ghost,
#stowly-cookie-scrim button.stowly-cookie__btn--ghost:hover,
#stowly-cookie-scrim button.stowly-cookie__btn--ghost:focus,
#stowly-cookie-scrim button.stowly-cookie__btn--ghost:focus-visible,
#stowly-cookie-scrim button.stowly-cookie__btn--ghost:active {
	color: var(--stowly-color-ink, #111) !important;
}

hr {
	border: 0;
	height: 1px;
	background: var(--stowly-color-line);
	margin: 24px 0;
}

/* ---------- Layout containers ---------- */

.stowly-archive,
.stowly-single-listing {
	padding: 24px 24px 64px;
}

.stowly-archive__inner,
.stowly-single-listing__inner {
	max-width: var(--stowly-container);
	margin: 0 auto;
}

.stowly-page {
	padding: 40px 24px 64px;
	max-width: var(--stowly-container);
	margin: 0 auto;
}

/* Cross-document View Transitions er slået fra: med forskellig header-DOM
 * (forside vs. /opbevaring/) gav named transitions mærkbart langsommere
 * og mere uforudsigeligt skift end almindelig dokument-load. */

/* ---------- Site header ---------- */

.stowly-skip-link {
	position: fixed;
	left: 14px;
	top: -64px;
	z-index: 12000;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--stowly-color-primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--stowly-shadow-md);
	transition: top 0.2s ease;
}

.stowly-skip-link:focus,
.stowly-skip-link:focus-visible {
	top: 12px;
}

.stowly-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--stowly-color-surface);
	border-bottom: 1px solid var(--stowly-color-line);
	transition: box-shadow var(--stowly-transition);
}

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

/* PC: “floating” bar — ydre bånd er gennemsigtig, selve baren er __inner
   (afrundet + skygge). JS måler stadig hele .stowly-site-header til
   --stowly-header-height. */
@media (min-width: 901px) {
	/* Max-bredde for floating header-pille + forsiden hero-kasse (samme værdi). */
	:root {
		--stowly-floating-ribbon-width: min(
			var(--stowly-container),
			calc(100vw - 32px),
			calc(100vw - 2 * clamp(16px, 3vw, 40px))
		);
	}

	.stowly-site-header {
		height: auto;
		box-sizing: border-box;
		overflow: visible;
		padding: 14px clamp(16px, 3vw, 40px) 16px;
		background: transparent;
		border-bottom: 0;
		box-shadow: none;
	}

	.stowly-site-header.is-scrolled {
		box-shadow: none;
	}

	.stowly-site-header.is-scrolled .stowly-site-header__inner {
		box-shadow: var(--stowly-shadow-md);
		border-color: rgba(0, 0, 0, 0.09);
	}

	.stowly-site-header__inner {
		height: auto;
		box-sizing: border-box;
		max-width: var(--stowly-floating-ribbon-width);
		margin-inline: auto;
		border-radius: var(--stowly-radius-xl);
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: blur(12px) saturate(1.1);
		backdrop-filter: blur(12px) saturate(1.1);
		border: 1px solid var(--stowly-color-line);
		box-shadow: var(--stowly-shadow-xs);
	}
}

.stowly-site-header__inner {
	max-width: var(--stowly-container);
	margin: 0 auto;
	padding: 14px 24px;
	/* Flex row with `nowrap` so the brand, primary nav and right cluster
	   NEVER wrap onto a second line, no matter how wide the viewport gets
	   or how many items the nav contains. Centering trick: only the nav
	   has `margin-inline: auto` so its two auto margins split all spare
	   space evenly on either side of it — brand sits left, right cluster
	   sits right, nav sits perfectly in the middle. Archive pages override
	   this layout with their own grid further down. */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
}

.stowly-site-brand {
	flex: 0 0 auto;
}

.stowly-site-header__inner > .stowly-site-nav {
	margin-left: auto;
	margin-right: auto;
	flex: 0 1 auto;
	min-width: 0;
}

/* Right-side cluster: hamburger (mobile) + notifications + account menu +
   "Bliv udbyder" CTA. Pinned to the right edge — the nav's auto margins
   already push it there, so we don't need `margin-left: auto` here. */
.stowly-site-header__right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	/* Positioneringskontekst for notifikations- og konto-dropdownene, så
	   de flugter med HEADERENS højre kant (enden af headeren) i stedet for
	   den enkelte knaps kant — ellers hænger klokke-panelet skævt til
	   venstre i stedet for at sidde lige under det højre cluster. */
	position: relative;
}

/* Standalone "Bliv udbyder" CTA rendered alongside the account menu when
   the user is logged out. Same pink gradient as the fallback nav CTA. */
.stowly-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: var(--stowly-radius-pill);
	background: var(--stowly-color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--stowly-transition), box-shadow var(--stowly-transition);
}
.stowly-header-cta:link,
.stowly-header-cta:visited {
	color: #fff;
	text-decoration: none;
}
.stowly-header-cta:hover,
.stowly-header-cta:focus-visible {
	color: #fff;
	text-decoration: none;
	background: var(--stowly-color-primary-hover);
}
.stowly-header-cta:focus-visible {
	outline: 2px solid rgba(17, 17, 17, 0.2);
	outline-offset: 2px;
}

/* Desktop: the CTA lives as a standalone header element, so hide any
   duplicate "Bliv udbyder" item that a legacy nav render path might
   still produce (older fallback output, manually configured WP menu
   items that slipped through filters, etc.). */
@media (min-width: 901px) {
	.stowly-site-nav .stowly-menu__cta {
		display: none;
	}

	/* Nav is centred via `margin: 0 auto` on .stowly-site-nav. Dropping the
	   auto-left on __right lets nav's margin-right: auto split spare flex
	   space evenly on both sides of the menu. */
	.stowly-site-header__right {
		margin-left: 0;
	}
}

/* Mobile: the CTA lives inside the hamburger drawer, so hide the inline
   header CTA to avoid duplication and keep the header bar uncluttered. */
@media (max-width: 900px) {
	.stowly-header-cta {
		display: none;
	}
}

/* Drawer-only CTA. Rendered inside `.stowly-site-nav` so it slides in
   with the hamburger drawer on mobile; hidden on desktop where the
   right-hand header cluster carries the canonical CTA. */
.stowly-nav-cta {
	display: none;
}

@media (max-width: 900px) {
	.stowly-nav-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-top: 12px;
		padding: 14px 18px;
		border-radius: var(--stowly-radius-pill, 999px);
		background: var(--stowly-color-primary);
		color: #fff;
		font-weight: 600;
		font-size: 15px;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
		box-shadow: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.25);
		transition: background-color var(--stowly-transition), box-shadow var(--stowly-transition);
	}
	.stowly-nav-cta:link,
	.stowly-nav-cta:visited {
		color: #fff;
		text-decoration: none;
	}
	.stowly-nav-cta:hover,
	.stowly-nav-cta:focus-visible {
		color: #fff;
		text-decoration: none;
		background: var(--stowly-color-primary-hover);
	}
}

/* ---------- Search-variant header (/opbevaring/) ----------
   On the listing archive the header carries a wide search pill, so we
   collapse the primary nav into the hamburger drawer at *all* widths
   (not just mobile) and tighten the container so the bar never spreads
   wider than a typical laptop viewport. */
.stowly-site-header--with-search .stowly-site-header__inner {
	max-width: 1120px;
}

.stowly-site-header--with-search .stowly-nav-toggle {
	display: inline-flex;
	position: relative;
	z-index: 61;
}

/* ---------- Nav dropdown on --with-search (desktop) ----------
 * On archive pages the hamburger opens a clean dropdown anchored to
 * the toggle button — styled to match the account menu and
 * notification panels. The old off-canvas drawer is still used on
 * mobile (see responsive block further down). */

.stowly-nav-dropdown {
	/* `static` (ikke relative): mega-menu-panelet ankres til
	   `.stowly-site-header__right` — samme mønster som notifikationer. */
	position: static;
	display: inline-flex;
	align-items: center;
}

/* ---------- Archive hamburger dropdown (all widths) ----------
 * On archive pages the nav NEVER renders inline or as a mobile
 * drawer — it's always a clean dropdown panel anchored under the
 * hamburger toggle. We `display: none` ANY .stowly-site-nav on
 * archive (catches stale-cache HTML that may echo it in an old
 * position) and let only the one inside `.stowly-nav-dropdown`
 * re-show itself when the hamburger is toggled open.
 *
 * These rules sit OUTSIDE any @media block so they apply at every
 * viewport width — there's no archive context where the nav should
 * render as anything other than a hamburger-driven dropdown. */

/* Catch-all hide: zero visible nav anywhere on archive by default.
 * The archive header uses `.stowly-mega-menu` instead of `.stowly-site-nav`,
 * so ANY stray .stowly-site-nav / Astra fallback primary menu / legacy
 * cached markup that sneaks onto the page gets force-hidden here. */
body.stowly-archive-layout .stowly-site-nav,
body.stowly-archive-layout .main-navigation,
body.stowly-archive-layout #primary-menu,
body.stowly-archive-layout .ast-primary-menu,
body.stowly-archive-layout .ast-mobile-menu-buttons,
body.stowly-archive-layout nav[aria-label*="Primary"],
.stowly-site-header--with-search .stowly-site-nav {
	display: none !important;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav {
	display: none !important;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	bottom: auto;
	z-index: 60;
	flex-direction: column;
	align-items: stretch;
	width: min(280px, calc(100vw - 32px));
	margin: 0;
	padding: 8px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 160ms ease, transform 160ms ease;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav.is-open {
	display: flex !important;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	visibility: visible;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	width: 100%;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu a,
.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown-trigger {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--stowly-color-ink);
	background: transparent;
	transition: background-color 150ms ease, color 150ms ease;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu a:hover,
.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu a:focus-visible,
.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown-trigger:hover,
.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown-trigger:focus-visible {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown {
	width: 100%;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown-trigger {
	justify-content: space-between;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown-panel {
	position: static;
	display: block;
	min-width: 0;
	margin-top: 2px;
	margin-left: 10px;
	padding: 2px 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown-panel[hidden] {
	display: none;
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__dropdown-panel a {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--stowly-color-ink-soft);
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__cta {
	display: block;
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-site-header--with-search .stowly-nav-dropdown .stowly-site-nav .stowly-menu__cta a {
	width: 100%;
	justify-content: center;
	padding: 10px 14px;
	font-size: 14px;
}

/* Backdrop is for the mobile off-canvas drawer only — hide it on the
 * archive-header dropdown variant at all widths. */
.stowly-site-header--with-search .stowly-nav-backdrop {
	display: none !important;
}

/* ---------- Platform mega menu ----------
 * Rich anchored dropdown shown when the user clicks the hamburger on
 * archive pages. Two-column layout on desktop (storage types + about
 * links), collapses to a single column on narrow viewports. Styled
 * intentionally distinct from `.stowly-site-nav` so there's zero
 * chance of the inline-nav or off-canvas styles leaking in. */
.stowly-mega-menu {
	padding: 20px;
	background: var(--stowly-color-surface);
	border-radius: 16px;
}

/* Desktop/tablet: dropdown som notifikationspanelet — ankret til headerens
 * højre kant med samme fade/slide-animation. */
@media (min-width: 769px) {
	.stowly-mega-menu {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		left: auto;
		width: min(560px, calc(100vw - 32px));
		border: 1px solid rgba(17, 17, 17, 0.08);
		box-shadow: 0 24px 48px -20px rgba(17, 17, 17, 0.25), 0 6px 16px -8px rgba(17, 17, 17, 0.15);
		z-index: 1100;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity .15s ease, transform .15s ease;
		pointer-events: none;
	}

	[data-stowly-nav-dropdown][data-stowly-open="1"] .stowly-mega-menu {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.stowly-mega-menu[hidden] {
		display: none !important;
	}
}

.stowly-mega-menu__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.stowly-mega-menu__column {
	min-width: 0;
}

.stowly-mega-menu__heading {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stowly-color-ink-soft);
}

.stowly-mega-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stowly-mega-menu__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--stowly-color-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	transition: background-color var(--stowly-transition), color var(--stowly-transition);
}

.stowly-mega-menu__link:hover,
.stowly-mega-menu__link:focus-visible {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	text-decoration: none;
	outline: none;
}

.stowly-mega-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink-soft);
	transition: background-color var(--stowly-transition), color var(--stowly-transition);
}

.stowly-mega-menu__icon .stowly-icon {
	display: block;
}

.stowly-mega-menu__link:hover .stowly-mega-menu__icon,
.stowly-mega-menu__link:focus-visible .stowly-mega-menu__icon {
	background: rgba(var(--stowly-color-primary-rgb), 0.1);
	color: var(--stowly-color-primary);
}

.stowly-mega-menu__label {
	flex: 1 1 auto;
	min-width: 0;
}

.stowly-mega-menu__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding: 14px 16px;
	background: linear-gradient(135deg, rgba(var(--stowly-color-primary-rgb), 0.06), rgba(var(--stowly-color-primary-rgb), 0.02));
	border: 1px solid rgba(var(--stowly-color-primary-rgb), 0.15);
	border-radius: 12px;
}

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

.stowly-mega-menu__pitch strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--stowly-color-ink);
}

.stowly-mega-menu__pitch span {
	font-size: 12px;
	color: var(--stowly-color-ink-soft);
	line-height: 1.4;
}

.stowly-mega-menu__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--stowly-color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	transition: transform var(--stowly-transition), background-color var(--stowly-transition), box-shadow var(--stowly-transition);
	box-shadow: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.25);
}

.stowly-mega-menu__cta:hover,
.stowly-mega-menu__cta:focus-visible {
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	background: var(--stowly-color-primary-hover);
	box-shadow: 0 6px 16px rgba(var(--stowly-color-primary-rgb), 0.32);
	outline: none;
}

/* ---------- Full-screen mobile drawer head (logo + close) ----------
   Shared by the regular off-canvas nav (`header.php`) and the archive
   mega menu (`/opbevaring/`). Hidden by default — only the responsive
   drawer rules further down reveal it when the menu takes over the full
   screen on phones, so the user can still dismiss the panel even though
   it covers the page header (and the search pill on the archive). */
.stowly-drawer-head {
	display: none;
}
.stowly-drawer-head__brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}
.stowly-drawer-head__brand img {
	height: 34px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	object-position: left center;
}
.stowly-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: 999px;
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--stowly-transition), border-color var(--stowly-transition), transform var(--stowly-transition);
}
.stowly-drawer-close:hover,
.stowly-drawer-close:focus-visible {
	background: var(--stowly-color-surface-soft);
	border-color: var(--stowly-color-ink-soft);
	outline: none;
}
.stowly-drawer-close:active {
	transform: scale(0.94);
}

@media (max-width: 640px) {
	.stowly-mega-menu__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.stowly-mega-menu__footer {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}
	.stowly-mega-menu__cta {
		width: 100%;
	}
}

/* Archive pages on desktop: anchored dropdown keeps scrolling fine and
   shouldn't lock the body. The mobile drawer override below re-enables
   the lock via `.stowly-mega-menu--drawer-open`. */
body.stowly-archive-layout.stowly-nav-open {
	overflow: auto;
}

/* ---------- Mobile: mega menu becomes a full-screen panel ----------
   On phones the platform hamburger opens a full-bleed menu that covers
   the entire viewport — including the search pill in the archive header
   — so navigation feels like a proper app menu rather than a narrow
   panel squeezed under the bell. The internal `.stowly-drawer-head`
   carries the logo + a close button so the panel can be dismissed even
   though it sits on top of the page header. */
@media (max-width: 768px) {
	.stowly-mega-menu[hidden] {
		display: block;
	}

	.stowly-mega-menu {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--stowly-color-surface);
		transform: translateX(100%);
		opacity: 1;
		visibility: visible;
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		z-index: 3000;
	}

	.stowly-mega-menu.is-open {
		transform: translateX(0);
	}

	.stowly-mega-menu .stowly-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 2;
		padding: max(14px, env(safe-area-inset-top)) 16px 14px;
		background: var(--stowly-color-surface);
		border-bottom: 1px solid var(--stowly-color-line);
	}

	.stowly-mega-menu__grid {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 22px 20px 8px;
	}

	.stowly-mega-menu__heading {
		font-size: 12px;
		margin-bottom: 8px;
	}

	.stowly-mega-menu__list {
		gap: 4px;
	}

	.stowly-mega-menu__link {
		padding: 12px;
		font-size: 16px;
		border-radius: 12px;
	}

	.stowly-mega-menu__icon {
		width: 38px;
		height: 38px;
	}

	.stowly-mega-menu__footer {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		margin: 14px 20px calc(20px + env(safe-area-inset-bottom));
	}

	.stowly-mega-menu__cta {
		width: 100%;
		padding: 14px 16px;
		font-size: 15px;
	}

	/* Lock body scroll while the panel is open (archive-specific). */
	body.stowly-archive-layout.stowly-nav-open {
		overflow: hidden;
	}
}

.stowly-site-brand {
	display: inline-flex;
	align-items: center;
	overflow: visible;
	text-decoration: none;
	line-height: 1;
	transition: transform 150ms ease, opacity 150ms ease;
}

.stowly-site-brand:hover {
	text-decoration: none;
	opacity: 0.9;
}

.stowly-site-brand__logo {
	display: block;
	height: 30px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	object-position: left center;
	/* Native teal PNG — no CSS filter (Safari/iOS skews filter chains blue). */
	filter: none;
}

/* Arkiv-header: logo i samme 44px spor som søgepille og ikon-knapper. */
.stowly-site-header--archive .stowly-site-header__inner {
	align-items: center;
}

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

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

@media (min-width: 769px) {
	.stowly-site-header--archive .stowly-site-header__right,
	.stowly-site-header--archive .stowly-archive-header-toolbar {
		min-height: 44px;
	}
}

@media (max-width: 768px) {
	.stowly-site-brand__logo {
		height: 26px;
		max-width: 130px;
	}
}

.stowly-site-nav {
	display: flex;
	align-items: center;
	/* Centres the primary nav between the logo and the right cluster on
	   desktop by soaking up spare flex space equally on both sides.
	   Overridden on mobile where the nav becomes a fixed drawer. */
	margin-left: auto;
	margin-right: auto;
}

.stowly-menu {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

/* ---------- Hamburger trigger (mobile only) + off-canvas backdrop ---------- */
.stowly-nav-toggle {
	display: none;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 1px solid var(--stowly-color-line-strong) !important;
	border-radius: 999px !important;
	background: var(--stowly-color-surface) !important;
	background-image: none !important;
	color: var(--stowly-color-ink) !important;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: box-shadow var(--stowly-transition), background-color var(--stowly-transition), border-color var(--stowly-transition);
	-webkit-appearance: none;
	appearance: none;
}
.stowly-nav-toggle:hover,
.stowly-nav-toggle:focus,
.stowly-nav-toggle:focus-visible,
.stowly-nav-toggle:active,
.stowly-nav-toggle.is-open {
	background: var(--stowly-color-surface) !important;
	background-image: none !important;
	border-color: var(--stowly-color-line-strong) !important;
	color: var(--stowly-color-ink) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	outline: none !important;
}
.stowly-nav-toggle__bars {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 14px;
}
.stowly-nav-toggle__bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 220ms ease, opacity 160ms ease, top 220ms ease;
}
.stowly-nav-toggle__bars span:nth-child(1) { top: 0; }
.stowly-nav-toggle__bars span:nth-child(2) { top: 6px; }
.stowly-nav-toggle__bars span:nth-child(3) { top: 12px; }
.stowly-nav-toggle.is-open .stowly-nav-toggle__bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}
.stowly-nav-toggle.is-open .stowly-nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.stowly-nav-toggle.is-open .stowly-nav-toggle__bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

.stowly-nav-backdrop {
	display: none;
	position: fixed;
	top: var(--stowly-header-height, 72px);
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(17, 17, 17, 0.45);
	z-index: 44;
	opacity: 0;
	transition: opacity 220ms ease;
}
.stowly-nav-backdrop.is-active {
	display: block;
	opacity: 1;
}

@media (max-width: 900px) {
	body.stowly-nav-open {
		overflow: hidden;
	}
}

.stowly-menu a {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	border-radius: var(--stowly-radius-pill);
	background: transparent;
	color: var(--stowly-color-ink);
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--stowly-transition);
}

.stowly-menu a:hover,
.stowly-menu a:focus-visible {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	text-decoration: none;
}

.stowly-menu__cta a {
	background: var(--stowly-color-primary);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--stowly-radius-pill);
	font-weight: 600;
}

.stowly-menu__cta a:link,
.stowly-menu__cta a:visited {
	color: #fff;
	background: var(--stowly-color-primary);
	text-decoration: none;
}

.stowly-menu__cta a:hover,
.stowly-menu__cta a:focus-visible {
	color: #fff;
	background: var(--stowly-color-primary-hover);
	text-decoration: none;
}

/* ---------- Storage landing dropdown (header menu) ---------- */

.stowly-menu__dropdown {
	position: relative;
}

.stowly-menu__dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border: 0 !important;
	border-radius: var(--stowly-radius-pill);
	background: transparent !important;
	background-image: none !important;
	color: var(--stowly-color-ink) !important;
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	outline: none !important;
	box-shadow: none !important;
	filter: none !important;
	transition: background-color var(--stowly-transition);
}

.stowly-menu__dropdown-trigger:hover,
.stowly-menu__dropdown-trigger:focus-visible,
.stowly-menu__dropdown-trigger[aria-expanded="true"] {
	background: var(--stowly-color-surface-soft) !important;
	color: var(--stowly-color-ink) !important;
	text-decoration: none;
}

/* Kill the parent theme's sticky blue :focus / :active highlight that
   lingers after a mouse click until focus moves elsewhere. Keyboard users
   still get the :focus-visible styling defined above. */
.stowly-menu__dropdown-trigger:focus:not(:focus-visible),
.stowly-menu__dropdown-trigger:active {
	background: transparent !important;
	background-image: none !important;
	color: var(--stowly-color-ink) !important;
	box-shadow: none !important;
	outline: none !important;
	border: 0 !important;
	filter: none !important;
}

.stowly-menu__dropdown-trigger[aria-expanded="true"]:focus:not(:focus-visible),
.stowly-menu__dropdown-trigger[aria-expanded="true"]:active {
	background: var(--stowly-color-surface-soft) !important;
	color: var(--stowly-color-ink) !important;
}

.stowly-menu__dropdown-chevron {
	transition: transform var(--stowly-transition);
}

.stowly-menu__dropdown-trigger[aria-expanded="true"] .stowly-menu__dropdown-chevron {
	transform: rotate(180deg);
}

.stowly-menu__dropdown-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 240px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	box-shadow: var(--stowly-shadow-md);
	z-index: 50;
}

@media (min-width: 901px) {
	.stowly-menu__dropdown-panel {
		min-width: 312px;
		padding: 10px 12px;
	}

	/* Bro over luften mellem trigger og panel så hover ikke lukker midt i bevægelsen */
	.stowly-menu__dropdown-panel::before {
		content: '';
		position: absolute;
		bottom: 100%;
		left: 0;
		width: 100%;
		height: 14px;
	}
}

.stowly-menu__dropdown-panel[hidden] {
	display: none;
}

.stowly-menu__dropdown-panel li {
	list-style: none;
}

.stowly-menu__dropdown-panel a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--stowly-radius-sm);
	color: var(--stowly-color-ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--stowly-transition), color var(--stowly-transition);
}

.stowly-menu__dropdown-panel a:hover,
.stowly-menu__dropdown-panel a:focus-visible {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-primary);
	text-decoration: none;
}

/* ---------- Dropdown items with leading icon ----------
 * Variant used when panel items ship a `.stowly-menu__dropdown-icon` span
 * (fx "Om Min Plads" and "Opbevaringstyper"). The icon sits in a soft-tinted
 * circular frame so it reads as a proper menu cue rather than inline text.
 * Works across all three render contexts: centred floating popover (desktop),
 * archive hamburger dropdown (desktop), and mobile off-canvas drawer — the
 * nested-panel overrides elsewhere don't touch the flex row, so alignment
 * stays consistent. */
.stowly-menu__dropdown-panel--icons a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.stowly-menu__dropdown-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink-soft);
	transition: background-color var(--stowly-transition), color var(--stowly-transition);
}

.stowly-menu__dropdown-icon .stowly-icon {
	display: block;
}

.stowly-menu__dropdown-panel--icons a:hover .stowly-menu__dropdown-icon,
.stowly-menu__dropdown-panel--icons a:focus-visible .stowly-menu__dropdown-icon {
	background: rgba(var(--stowly-color-primary-rgb), 0.1);
	color: var(--stowly-color-primary);
}

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

/* ---------- Desktop mega menu ("Opbevaringstyper" + "Om Min Plads") ----------
 * Upgrades both primary-nav dropdowns into a wide, two-pane panel on
 * desktop: a grid of icon cards on the left + a gradient feature card on
 * the right. The panel is centred to the page container (not the trigger)
 * so it sits as a wide band under the floating header — like a classic
 * megamenu. Lives on every page that uses `header.php` (i.e. everything
 * except `/opbevaring/`, which has its own dedicated `.stowly-mega-menu`).
 * On mobile (`<=900px`) the `.stowly-site-nav` drawer rules below flatten
 * this back into a simple icon list and the desktop-only extras (eyebrow,
 * subtitles, feature card) are hidden. */
.stowly-menu__mega-feature-glow {
	display: none;
}

@media (min-width: 901px) {
	/* Drop the trigger's positioning context so the panel anchors to the
	   floating header pill (`.stowly-site-header__inner`, which is a
	   containing block thanks to its backdrop-filter) instead of the
	   off-centre <li>. That lets us centre a wide panel to the container. */
	.stowly-menu__dropdown.stowly-menu__dropdown--mega {
		position: static;
	}

	/* Guarantee the pill is the panel's positioning anchor (it already is a
	   containing block via backdrop-filter, but be explicit). */
	.stowly-site-header__inner {
		position: relative;
	}

	/* Wide, container-centred panel that drops below the floating header. */
	.stowly-menu__dropdown-panel.stowly-menu__mega {
		top: calc(100% + 14px);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(1100px, calc(100vw - 48px));
		min-width: 0;
		max-width: none;
		padding: 18px;
		border-radius: var(--stowly-radius-lg, 20px);
		box-shadow: var(--stowly-shadow-lg, 0 24px 60px rgba(17, 17, 17, 0.16));
	}

	/* Hover bridge: a thin invisible strip in the 14px gap between the
	   header pill and the panel so moving the cursor down doesn't close it.
	   Kept just below the pill (full panel width) so it never overlaps —
	   and blocks hover on — the other nav items inside the pill. */
	.stowly-menu__mega::before {
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 16px;
	}

	.stowly-menu__mega-inner {
		display: grid;
		grid-template-columns: 1.55fr 1fr;
		gap: 14px;
		align-items: stretch;
	}

	.stowly-menu__mega-eyebrow {
		margin: 2px 4px 10px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--stowly-color-ink-soft);
	}

	.stowly-menu__mega-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.stowly-menu__mega-grid > li {
		list-style: none;
	}

	/* Storage-type card: icon bubble + stacked label/subtitle. */
	.stowly-menu__mega .stowly-menu__mega-card {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		border-radius: 12px;
		color: var(--stowly-color-ink);
	}
	.stowly-menu__mega .stowly-menu__mega-card:hover,
	.stowly-menu__mega .stowly-menu__mega-card:focus-visible {
		background: var(--stowly-color-surface-soft);
		color: var(--stowly-color-ink);
	}

	.stowly-menu__mega .stowly-menu__mega-card .stowly-menu__dropdown-icon {
		width: 38px;
		height: 38px;
		border-radius: 11px;
	}

	.stowly-menu__mega-card-text {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	.stowly-menu__mega .stowly-menu__mega-card .stowly-menu__dropdown-label {
		font-size: 14px;
		font-weight: 600;
		line-height: 1.25;
		color: var(--stowly-color-ink);
	}

	.stowly-menu__mega-card-sub {
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3;
		color: var(--stowly-color-ink-soft);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* "Se alle depoter" footer link under the grid. */
	.stowly-menu__mega .stowly-menu__mega-all {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 8px;
		margin-left: 4px;
		padding: 6px 4px;
		font-size: 13px;
		font-weight: 600;
		color: var(--stowly-color-primary);
		background: transparent;
	}
	.stowly-menu__mega .stowly-menu__mega-all:hover,
	.stowly-menu__mega .stowly-menu__mega-all:focus-visible {
		background: transparent;
		color: var(--stowly-color-primary);
		text-decoration: none;
	}
	.stowly-menu__mega-all svg {
		transition: transform var(--stowly-transition);
	}
	.stowly-menu__mega .stowly-menu__mega-all:hover svg,
	.stowly-menu__mega .stowly-menu__mega-all:focus-visible svg {
		transform: translateX(3px);
	}

	/* Feature card — the "lækkert" gradient pane. */
	.stowly-menu__mega-feature {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 20px;
		border-radius: 16px;
		overflow: hidden;
		background: var(--stowly-gradient-primary);
		color: #fff;
		isolation: isolate;
	}
	.stowly-menu__mega-feature-glow {
		display: block;
		position: absolute;
		top: -45%;
		right: -25%;
		width: 220px;
		height: 220px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 70%);
		z-index: -1;
		pointer-events: none;
	}
	.stowly-menu__mega-feature-eyebrow {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.82);
	}
	.stowly-menu__mega-feature-title {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: #fff;
	}
	.stowly-menu__mega-feature-text {
		font-size: 13px;
		font-weight: 500;
		line-height: 1.45;
		color: rgba(255, 255, 255, 0.9);
	}
	.stowly-menu__mega .stowly-menu__mega-feature-cta {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 8px;
		padding: 10px 16px;
		border-radius: var(--stowly-radius-pill, 999px);
		background: #fff;
		color: var(--stowly-color-primary);
		font-size: 14px;
		font-weight: 600;
		box-shadow: 0 6px 16px rgba(17, 17, 17, 0.18);
		transition: transform var(--stowly-transition), box-shadow var(--stowly-transition);
	}
	.stowly-menu__mega .stowly-menu__mega-feature-cta:hover,
	.stowly-menu__mega .stowly-menu__mega-feature-cta:focus-visible {
		background: #fff;
		color: var(--stowly-color-primary);
		transform: translateY(-1px);
		box-shadow: 0 10px 22px rgba(17, 17, 17, 0.24);
		text-decoration: none;
	}
	.stowly-menu__mega-feature-cta svg {
		transition: transform var(--stowly-transition);
	}
	.stowly-menu__mega .stowly-menu__mega-feature-cta:hover svg,
	.stowly-menu__mega .stowly-menu__mega-feature-cta:focus-visible svg {
		transform: translateX(3px);
	}

	.stowly-menu__mega-feature-links {
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: 100%;
		margin: 12px 0 0;
		padding: 12px 0 0;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		list-style: none;
	}
	.stowly-menu__mega-feature-links > li {
		list-style: none;
	}
	.stowly-menu__mega .stowly-menu__mega-feature-links a {
		display: flex;
		align-items: center;
		gap: 9px;
		padding: 7px 8px;
		border-radius: 9px;
		color: rgba(255, 255, 255, 0.92);
		font-size: 13px;
		font-weight: 600;
	}
	.stowly-menu__mega .stowly-menu__mega-feature-links a:hover,
	.stowly-menu__mega .stowly-menu__mega-feature-links a:focus-visible {
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
		text-decoration: none;
	}
	.stowly-menu__mega-feature-link-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}
}

/* On mobile the drawer flattens everything; hide the desktop-only
   decorations so the off-canvas list stays compact and familiar. */
@media (max-width: 900px) {
	.stowly-menu__mega-eyebrow,
	.stowly-menu__mega-card-sub,
	.stowly-menu__mega-feature {
		display: none;
	}
}

/* ---------- Global button focus reset ----------
   After a mouse click, buttons/links retain :focus state until the user
   clicks somewhere else. The parent theme (Astra) and some browser
   defaults render :focus with a strong blue outline/shadow, which makes
   the element look "stuck active" even after the user dismissed the
   thing it controlled (dropdown closed, menu collapsed, etc).

   We strip the sticky focus outline + shadow for non-keyboard focus. The
   :focus-visible state is preserved so keyboard users still get a clear
   focus indicator. Background is NOT reset here because some buttons
   (primary CTAs etc.) intentionally keep their fill across states. */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
input[type="reset"]:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* ---------- Buttons ---------- */

.stowly-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--stowly-radius-sm);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--stowly-transition),
		background-color var(--stowly-transition),
		color var(--stowly-transition),
		border-color var(--stowly-transition),
		box-shadow var(--stowly-transition),
		opacity var(--stowly-transition);
}

.stowly-btn:hover {
	text-decoration: none;
}

/* Safety net: any Min Plads button / link-button with a light background must keep
   its dark ink color on hover, even if the theme (Astra) tries to lighten it.
   Vi låser også baggrunden eksplicit for ghost-varianten på :focus og :active
   — ellers slipper Astra's blå UA-focus-baggrund igennem og blinker knappen
   blå efter et klik (åbnet dialog, fokus sidder fast). */
.stowly-btn--ghost:hover,
.stowly-btn--ghost:focus,
.stowly-btn--ghost:active,
.stowly-filter-tab:hover,
.stowly-filter-tab:focus,
.stowly-filter-tab:active,
.stowly-flow-back:hover,
.stowly-flow-back:focus,
.stowly-reset-link:hover,
.stowly-reset-link:focus,
.stowly-auth-form__back:hover,
.stowly-auth-form__back:focus,
.stowly-toolbar-select-trigger:hover,
.stowly-toolbar-select-trigger:focus {
	color: var(--stowly-color-ink);
}

.stowly-btn--ghost:focus,
.stowly-btn--ghost:active,
.stowly-btn--ghost:focus:hover {
	background: var(--stowly-color-surface-soft);
	border-color: var(--stowly-color-ink);
	color: var(--stowly-color-ink);
	outline: none;
	box-shadow: none;
}

.stowly-btn:active {
	transform: scale(0.98);
}

.stowly-btn:disabled,
.stowly-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.stowly-btn--primary {
	background: var(--stowly-color-primary);
	color: #fff;
	border-color: transparent;
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-btn--primary:hover,
.stowly-btn--primary:focus-visible,
.stowly-btn--primary:link,
.stowly-btn--primary:visited {
	color: #fff;
	background: var(--stowly-color-primary-hover);
	box-shadow: var(--stowly-shadow-sm);
	filter: none;
}

.stowly-btn--ghost {
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	border-color: var(--stowly-color-line-strong);
}

.stowly-btn--ghost:hover,
.stowly-btn--ghost:focus-visible,
.stowly-btn--ghost:link,
.stowly-btn--ghost:visited {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	border-color: var(--stowly-color-ink);
}

.stowly-btn--dark {
	background: var(--stowly-color-ink);
	color: #fff;
	border-color: var(--stowly-color-ink);
}

.stowly-btn--dark:hover,
.stowly-btn--dark:focus-visible,
.stowly-btn--dark:link,
.stowly-btn--dark:visited {
	color: #fff;
	background: #000;
}

/* Sekundær knap = afdæmpet "ghost-lignende" ink-knap. Bruges når vi
   har en primær action i nærheden (fx Bankoplysninger, tax-flow) og
   ikke vil konkurrere visuelt med den. */
.stowly-btn--secondary {
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	border-color: var(--stowly-color-line-strong);
}

.stowly-btn--secondary:hover,
.stowly-btn--secondary:focus-visible,
.stowly-btn--secondary:link,
.stowly-btn--secondary:visited {
	color: var(--stowly-color-ink);
	background: var(--stowly-color-surface-soft, #faf9f6);
	border-color: var(--stowly-color-ink);
}

/* Destruktiv action — annuller booking, slet, irreversible flows. */
.stowly-btn--danger {
	background: #dc2626;
	color: #fff;
	border-color: #dc2626;
}

.stowly-btn--danger:hover,
.stowly-btn--danger:focus-visible,
.stowly-btn--danger:link,
.stowly-btn--danger:visited {
	background: #b91c1c;
	border-color: #b91c1c;
	color: #fff;
}

.stowly-btn--pill {
	border-radius: var(--stowly-radius-pill);
}

.stowly-btn--block {
	width: 100%;
}

/* ---------- Pladsberegner inline CTA-link ---------- */
/* Bruges som "Brug pladsberegneren →"-link i hero-helpers på forside,
 * /opbevaring/ og hvor end vi vil tilbyde estimatoren uden en stor knap.
 * Ligger globalt så base-layout (inline-flex + pil-spacing) virker uden
 * at en sides eget stylesheet skal være indlæst. Kontekst-specifikke
 * farver (fx hvid på mørkt hero) overrides i front-page.css / arkivet. */
.stowly-pladsberegner-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--stowly-color-primary);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: color var(--stowly-transition);
}

.stowly-pladsberegner-cta-link:hover,
.stowly-pladsberegner-cta-link:focus,
.stowly-pladsberegner-cta-link:focus-visible {
	color: var(--stowly-color-primary-hover);
}

/* Pile-SVG må aldrig skrumpe i en flex-row så den forsvinder ud af syne. */
.stowly-pladsberegner-cta-link svg {
	flex-shrink: 0;
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--stowly-color-ink);
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-sm);
	padding: 12px 14px;
	transition: border-color var(--stowly-transition), box-shadow var(--stowly-transition);
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image: var(--stowly-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
}

textarea {
	min-height: 120px;
	line-height: 1.5;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	outline: 0;
	border-color: var(--stowly-color-ink);
	box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.08);
}

input::placeholder,
textarea::placeholder {
	color: var(--stowly-color-ink-muted);
}

label {
	color: var(--stowly-color-ink);
	font-size: 14px;
	font-weight: 500;
}

.stowly-form-field {
	display: grid;
	gap: 6px;
}

.stowly-form-group {
	display: grid;
	gap: 10px;
	padding: 4px 0;
}

.stowly-form-group__title {
	color: var(--stowly-color-ink-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.stowly-form-field > span,
.stowly-provider-signup__form label > span,
.stowly-provider-listing-form label > span {
	color: var(--stowly-color-ink-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 0;
	display: block;
}

/* ---------- Breadcrumbs ---------- */

.stowly-breadcrumbs {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
}

.stowly-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
}

.stowly-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.stowly-breadcrumbs__item a {
	color: var(--stowly-color-ink-soft);
	text-decoration: none;
	transition: color var(--stowly-transition);
}

.stowly-breadcrumbs__item a:hover,
.stowly-breadcrumbs__item a:focus-visible {
	color: var(--stowly-color-primary);
	text-decoration: none;
}

.stowly-breadcrumbs__item.is-current > span {
	color: var(--stowly-color-ink);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: min(420px, 72vw);
}

.stowly-breadcrumbs__sep {
	flex: 0 0 auto;
	opacity: 0.5;
}

/* Telefon: brødkrummen må aldrig bryde til to linjer. Hold hele rækken
   på én linje og ellipsér det sidste (typisk længste) led i stedet for
   at wrappe. */
@media (max-width: 640px) {
	.stowly-breadcrumbs__list {
		flex-wrap: nowrap;
		overflow: hidden;
	}
	.stowly-breadcrumbs__item {
		flex: 0 0 auto;
	}
	.stowly-breadcrumbs__item.is-current {
		flex: 0 1 auto;
		min-width: 0;
	}
	.stowly-breadcrumbs__item.is-current > span {
		max-width: none;
	}
}

/* Optional fuldbredde-brødkrumme uden for hero (sjældent brugt). */
.stowly-main-breadcrumbs {
	max-width: var(--stowly-container);
	margin: 0 auto;
	padding: 20px 24px 0;
	box-sizing: border-box;
	width: 100%;
}

@media (max-width: 720px) {
	.stowly-main-breadcrumbs {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Brødkrumme inde i marketing-hero: samme baggrund som hero, ingen “hvid strimmel”. */
.stowly-hero-breadcrumbs {
	margin: 0 0 18px;
	width: 100%;
	max-width: none;
	padding: 0;
	box-sizing: border-box;
}

.stowly-hero-breadcrumbs .stowly-breadcrumbs {
	margin: 0;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
}

.stowly-hero-breadcrumbs .stowly-breadcrumbs__list {
	justify-content: center;
}

.stowly-hero-breadcrumbs--align-start .stowly-breadcrumbs__list {
	justify-content: flex-start;
}

.stowly-hero-breadcrumbs .stowly-breadcrumbs__item a {
	color: var(--stowly-color-ink-soft);
}

.stowly-hero-breadcrumbs .stowly-breadcrumbs__item a:hover,
.stowly-hero-breadcrumbs .stowly-breadcrumbs__item a:focus-visible {
	color: var(--stowly-color-primary);
}

.stowly-hero-breadcrumbs .stowly-breadcrumbs__item.is-current > span {
	color: var(--stowly-color-ink);
}

.stowly-page__breadcrumbs {
	margin: 0 0 22px;
}

/* ---------- Chips (button-style radio/checkbox groups) ---------- */

.stowly-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.stowly-chips legend {
	width: 100%;
	padding: 0 0 10px;
	color: var(--stowly-color-ink-soft);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.stowly-chips label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	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;
	cursor: pointer;
	transition: border-color var(--stowly-transition),
		background var(--stowly-transition),
		color var(--stowly-transition);
	margin: 0;
}

.stowly-chips label:focus-within {
	border-color: var(--stowly-color-ink);
	box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.08);
}

.stowly-chips label:hover {
	border-color: var(--stowly-color-ink);
}

.stowly-chips label input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.stowly-chips label > span,
.stowly-chips label > input + span {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.stowly-chips label:has(input:checked) {
	border-color: var(--stowly-color-ink);
	background: var(--stowly-color-ink);
	color: #fff;
}

/* ---------- Alerts ---------- */

.stowly-alert {
	padding: 14px 16px;
	border-radius: var(--stowly-radius-md);
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.4;
}

.stowly-alert--success {
	background: var(--stowly-color-success-soft);
	color: var(--stowly-color-success);
}

.stowly-alert--error {
	background: var(--stowly-color-danger-soft);
	color: var(--stowly-color-danger);
}

.stowly-alert--info {
	background: var(--stowly-color-surface-soft, #f4f4f0);
	color: var(--stowly-color-ink);
	border: 1px solid var(--stowly-color-line);
}

/* Legal-consent checkbox used on signup forms. Horizontal layout where
   the checkbox sits to the left of the running-text label so links
   (handelsbetingelser / privatlivspolitik) can wrap naturally. */
.stowly-consent-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	margin: 4px 0 12px;
	color: var(--stowly-color-ink-soft);
}

.stowly-consent-check input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 16px;
	height: 16px;
}

.stowly-consent-check a {
	text-decoration: underline;
}

.stowly-front-search__menu:has(.stowly-location-search),
.stowly-header-search__menu:has(.stowly-location-search) {
	min-width: min(360px, 90vw);
	max-height: min(460px, 80vh);
}

.stowly-location-search {
	display: grid;
	gap: 8px;
	padding: 4px 4px 10px;
}

.stowly-location-search__label {
	display: grid;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--stowly-color-ink);
}

/* "Skriv adresse"-teksten skal matche dropdown-sektionstitlen
   ("Vælg opbevaringstype" → .stowly-what-menu__title). Vi styler kun
   <span> så selve input-feltets tekst ikke påvirkes. */
.stowly-location-search__label > span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft);
}

.stowly-location-search__input {
	width: 100%;
	min-height: 40px;
	padding: 9px 11px;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	font: inherit;
	font-size: 14px;
	box-sizing: border-box;
	overflow: visible;
}

/* iOS Safari zoomer ind på focus hvis font-size < 16px */
@media (max-width: 768px) {
	.stowly-location-search__input {
		font-size: 16px;
	}
}

.stowly-location-search__input:focus {
	border-color: var(--stowly-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--stowly-color-primary-soft);
}

.stowly-location-search__suggestions {
	display: grid;
	gap: 2px;
}

/* "Ingen forslag fundet"/fejl vises inde i panelet (ikke som løs tekst). */
.stowly-location-search__empty {
	margin: 0;
	padding: 12px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--stowly-color-ink-soft);
}

.stowly-location-search__suggestion,
.stowly-location-search__nearby {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 0 !important;
	padding: 10px 12px;
	border: 0 !important;
	border-radius: var(--stowly-radius-md) !important;
	background: transparent !important;
	color: var(--stowly-color-ink) !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.stowly-location-search__suggestion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.stowly-location-search__suggestion-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stowly-location-search__suggestion-hint {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft);
}

.stowly-location-search__suggestion:hover,
.stowly-location-search__suggestion:focus-visible,
.stowly-location-search__nearby:hover,
.stowly-location-search__nearby:focus-visible {
	background: var(--stowly-color-surface-soft) !important;
	outline: none;
}

.stowly-location-search__nearby {
	font-weight: 700;
	color: var(--stowly-color-primary) !important;
}

.stowly-location-search__status {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--stowly-color-ink-soft);
}

/* Skjul "Hvor"/"Opbevaringstype"-labels i søgepillerne for en kompakt
   enkelt-linje-pille. Labels bevares i DOM (sr-only) så skærmlæsere og
   aria-labelledby stadig fungerer. Forside/landing (`--front-hero`) viser
   labels altid — se front-page.css. */
form.stowly-header-search:not(.stowly-header-search--front-hero) .stowly-header-search__label,
.stowly-front-search__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Desktop: Airbnb-lignende expand når et felt åbnes — aktivt segment
   fremhæves, labels vises, dropdown hænger sammen med pillen.
   Alle tre segmenter beholder samme højde/bredde når man skifter felt. */
@media (min-width: 769px) {
	form.stowly-header-search {
		--stowly-header-search-expand-duration: 0.28s;
		--stowly-header-search-expand-ease: cubic-bezier(0.4, 0, 0.2, 1);
		transition:
			max-width var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			min-height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			max-height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			padding var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			border-radius var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			box-shadow var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			background-color var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}

	form.stowly-header-search.is-search-expanded {
		position: relative;
		z-index: 50;
		align-items: center;
		height: 66px;
		min-height: 66px;
		max-height: 66px;
		box-sizing: border-box;
		border-radius: 40px;
		box-shadow:
			0 6px 20px rgba(0, 0, 0, 0.12),
			0 2px 6px rgba(0, 0, 0, 0.06);
		background: var(--stowly-color-surface-soft, #f7f7f7);
	}

	form.stowly-header-search.is-search-expanded:has(
		.stowly-header-search__segment.is-open > .stowly-header-search__menu,
		.stowly-header-search__inline-suggestions:not([hidden])
	) {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__divider {
		opacity: 0;
		transition: opacity var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}

	form.stowly-header-search .stowly-header-search__divider {
		transition: opacity var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}

	/* Glidende aktiv-tab (Airbnb): hvid pille bevæger sig mellem segmenter. */
	form.stowly-header-search.is-search-expanded .stowly-header-search__tab-slider {
		position: absolute;
		top: 50%;
		left: 0;
		width: var(--stowly-header-tab-slider-width, 0);
		height: 56px;
		transform: translate3d(var(--stowly-header-tab-slider-x, 0), -50%, 0);
		border-radius: 32px;
		background: var(--stowly-color-surface);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.06),
			0 4px 12px rgba(0, 0, 0, 0.08);
		z-index: 0;
		pointer-events: none;
		opacity: 0;
		will-change: transform, width;
		transition:
			transform var(--stowly-header-search-expand-duration, 0.28s) var(--stowly-header-search-expand-ease, cubic-bezier(0.4, 0, 0.2, 1)),
			width var(--stowly-header-search-expand-duration, 0.28s) var(--stowly-header-search-expand-ease, cubic-bezier(0.4, 0, 0.2, 1)),
			opacity 0.12s ease;
	}

	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__tab-slider.is-visible {
		opacity: 1;
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__tab-slider.is-instant {
		transition: none;
	}

	form.stowly-header-search .stowly-header-search__segment {
		transition:
			height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			min-height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			max-height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			padding var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			border-radius var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			background-color var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			box-shadow var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__segment {
		flex: 1 1 0;
		max-width: none;
		height: 56px;
		min-height: 56px;
		max-height: 56px;
		padding: 8px 30px 8px 18px;
		background: transparent;
		box-sizing: border-box;
		overflow: visible;
		border-radius: 32px;
		position: relative;
		z-index: 1;
		justify-content: flex-start;
		align-items: stretch;
	}

	/* Ens højde på label-række + værdi-række på tværs af Hvor (input),
	   Opbevaringstype og Startmåned (toggle). Uden dette giver
	   input[type="search"]'s globale line-height/min-height et højere
	   andet række i Hvor, og justify-content:center skubber «Hvor» op. */
	form.stowly-header-search.is-search-expanded .stowly-header-search__where-inline {
		min-height: 0;
		height: auto;
		align-self: stretch;
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__inline-input,
	form.stowly-header-search.is-search-expanded .stowly-header-search__toggle,
	form.stowly-header-search.is-search-expanded .stowly-header-search__value {
		height: auto;
		min-height: 1.5em !important;
		font-size: 14px;
		line-height: 1.25 !important;
		overflow: visible;
	}

	form.stowly-header-search.is-search-expanded input.stowly-header-search__inline-input[type="search"] {
		min-height: 1.5em !important;
		padding: 0 !important;
		line-height: 1.25 !important;
		overflow: visible;
		border-radius: 0 !important;
	}

	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment:not(.is-open):not(:focus-within):not(.is-where-active) {
		opacity: 1;
	}

	/* Inaktive segmenter: diskret grå hover (Airbnb) — kun når slideren er aktiv. */
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment:not(.is-open):not(:focus-within):not(.is-where-active):hover {
		background: rgba(0, 0, 0, 0.04);
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__segment:not(.is-open):not(:focus-within):not(.is-where-active):hover .stowly-header-search__label {
		color: var(--stowly-color-ink);
		font-weight: 600;
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__segment.is-open:hover,
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment--where-inline:focus-within:hover,
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment--where-inline.is-where-active:hover {
		background: transparent !important;
	}

	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment.is-open,
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment--where-inline:focus-within,
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment--where-inline.is-where-active,
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment.is-open:has(> .stowly-header-search__menu),
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment--where-inline:has(> .stowly-header-search__inline-suggestions:not([hidden])) {
		background: transparent !important;
		box-shadow: none !important;
	}

	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:focus-within,
	form.stowly-header-search.is-search-expanded:not(.has-tab-slider) .stowly-header-search__segment--where-inline.is-where-active,
	form.stowly-header-search.is-search-expanded:not(.has-tab-slider) .stowly-header-search__segment.is-open:has(> .stowly-header-search__menu),
	form.stowly-header-search.is-search-expanded:not(.has-tab-slider) .stowly-header-search__segment--where-inline:has(> .stowly-header-search__inline-suggestions:not([hidden])) {
		opacity: 1;
		background: var(--stowly-color-surface) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		z-index: 1;
	}

	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment.is-open,
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment--where-inline:focus-within,
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment--where-inline.is-where-active,
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment.is-open:has(> .stowly-header-search__menu),
	form.stowly-header-search.is-search-expanded.has-tab-slider .stowly-header-search__segment--where-inline:has(> .stowly-header-search__inline-suggestions:not([hidden])) {
		opacity: 1;
		z-index: 1;
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__segment.is-open .stowly-header-search__label,
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment--where-inline:focus-within .stowly-header-search__label,
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment--where-inline.is-where-active .stowly-header-search__label {
		color: var(--stowly-color-ink);
		font-weight: 600;
	}

	/* Alle labels synlige i expand-tilstand — samme to-linje-layout i alle segmenter. */
	form.stowly-header-search.is-search-expanded .stowly-header-search__label {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 0 2px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: auto !important;
		white-space: nowrap !important;
		text-overflow: ellipsis;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.2;
		color: var(--stowly-color-ink);
		flex: 0 0 auto;
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__segment:not(.is-open):not(:focus-within):not(.is-where-active) .stowly-header-search__label {
		color: var(--stowly-color-ink-soft);
	}

	/* Udvidet desktop: Hvor-segmentet er relative så × sidder i tabben (ikke på søgeknappen). */
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment--where-inline {
		position: relative;
		z-index: 1;
	}

	/* Udvidet: ens input-padding i Hvor uanset aktiv/hover/inaktiv (×-plads reserveres). */
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment--where-inline.stowly-search-filled .stowly-header-search__inline-input {
		padding-right: 28px !important;
	}

	/* Inaktiv pille: kompakt søge-ikon uden «Søg»-tekst. */
	form.stowly-header-search .stowly-header-search__submit {
		transition:
			width var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			min-width var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			min-height var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			border-radius var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			padding var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease),
			gap var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}

	/* Inaktiv pille: kompakt søge-ikon uden «Søg»-tekst.
	 * Forside og arkiv-header styles hver for sig via
	 * `--front-hero` / `--archive-header` (se front-page.css + archive-listings.css). */
	form.stowly-header-search:not(.stowly-header-search--front-hero):not(.stowly-header-search--archive-header):not(.is-search-expanded) .stowly-header-search__submit {
		position: relative;
		width: 48px !important;
		min-width: 48px !important;
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 !important;
		margin: 0 4px 0 6px;
		border-radius: 50% !important;
		flex: 0 0 48px;
		gap: 0;
	}

	/* Aktiv pille: «Søg» + ikon glider ud sammen med pillen. */
	form.stowly-header-search.is-search-expanded .stowly-header-search__submit {
		position: relative;
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 48px !important;
		padding: 0 18px !important;
		margin: 0 4px 0 6px;
		border-radius: 999px !important;
		flex: 0 0 auto;
		gap: 6px;
	}

	form.stowly-header-search .stowly-header-search__submit-text {
		transition:
			opacity calc(var(--stowly-header-search-expand-duration) * 0.75) var(--stowly-header-search-expand-ease),
			transform var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}

	form.stowly-header-search:not(.is-search-expanded) .stowly-header-search__submit-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
		opacity: 0;
		transform: scale(0.92);
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__submit-text {
		position: static !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		white-space: nowrap !important;
		border: 0 !important;
		opacity: 1;
		transform: scale(1);
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__inline-suggestions {
		top: 100%;
		margin-top: 0;
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		box-shadow:
			0 16px 32px rgba(0, 0, 0, 0.12),
			0 4px 10px rgba(0, 0, 0, 0.06);
		animation: stowlySearchExpandIn var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}

	form.stowly-header-search.is-search-expanded .stowly-header-search__segment.is-open > .stowly-header-search__menu {
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		box-shadow:
			0 16px 32px rgba(0, 0, 0, 0.12),
			0 4px 10px rgba(0, 0, 0, 0.06);
		animation: stowlySearchExpandIn var(--stowly-header-search-expand-duration) var(--stowly-header-search-expand-ease);
	}
}

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

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
	form.stowly-header-search,
	form.stowly-header-search.is-search-expanded,
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment,
	form.stowly-header-search.is-search-expanded .stowly-header-search__submit,
	form.stowly-header-search.is-search-expanded .stowly-header-search__inline-suggestions,
	form.stowly-header-search.is-search-expanded .stowly-header-search__segment.is-open > .stowly-header-search__menu,
	form.stowly-header-search.is-search-expanded .stowly-header-search__tab-slider,
	body.stowly-archive-layout .stowly-site-header .stowly-header-search,
	body.stowly-archive-layout .stowly-site-header.is-header-search-expanded::after {
		transition: none;
		animation: none;
	}
}

/* ---------- Inline "Hvor"-felt i søgepiller (direkte indtastning) ----------
   Brugeren skriver adressen direkte i søgefeltet — som på opbevarings-
   landingssiderne — i stedet for at åbne en dropdown først. "Tæt på mig" +
   de fire største byer vises som standardvalg når feltet er tomt og
   forsvinder så snart der skrives. */
/* "Hvor"-segmentet er static, så forslagspanelet forankres til hele formen
   (fuld bredde af søgepillen) i stedet for kun segmentet. */
.stowly-header-search,
.stowly-front-search {
	position: relative;
}

.stowly-header-search__segment.stowly-header-search__segment--where-inline,
.stowly-front-search__field.stowly-front-search__field--where-inline {
	position: static;
	cursor: text;
}

.stowly-header-search__where-inline,
.stowly-front-search__where-inline {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
}

.stowly-header-search__inline-input,
.stowly-front-search__inline-input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-width: 0;
	/* Overstyr input[type=search] 48px, men giv plads til caret (0 klippede den). */
	min-height: 1.5em !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 14px;
	line-height: 1.25 !important;
	color: var(--stowly-color-ink);
	caret-color: var(--stowly-color-primary);
	overflow: visible;
}

.stowly-header-search__inline-input:focus,
.stowly-front-search__inline-input:focus {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

.stowly-header-search__inline-input::placeholder,
.stowly-front-search__inline-input::placeholder,
.stowly-location-search__input::placeholder {
	color: var(--stowly-color-ink-soft);
}

/* Placeholder forsvinder ved fokus (browseren viser den ellers stadig tom). */
.stowly-header-search__inline-input:focus::placeholder,
.stowly-front-search__inline-input:focus::placeholder,
.stowly-location-search__input:focus::placeholder {
	opacity: 0;
}

/* Det indbyggede søgefelt-kryds (WebKit) skjules — vi bruger vores eget
   ensartede ×-clear på tværs af alle felter i stedet. */
.stowly-header-search__inline-input::-webkit-search-cancel-button,
.stowly-front-search__inline-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Ryd-knap (×): vises i stedet for chevron når et felt har en værdi, så
   Hvor / Opbevaringstype / Startmåned hurtigt kan nulstilles. Markup er
   [data-stowly-clear] som direkte barn af segmentet (position: relative). */
.stowly-search-clear {
	position: absolute !important;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	display: none !important;
	align-items: center;
	justify-content: center;
	width: 22px !important;
	height: 22px !important;
	min-height: 0 !important;
	max-width: 22px !important;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--stowly-color-bg, #f1f1f1);
	color: var(--stowly-color-ink, #1f1f1f);
	cursor: pointer;
	line-height: 0;
	z-index: 3;
	transition: background 0.15s ease, color 0.15s ease;
	flex: none !important;
}

/* Ikonet skal forblive sort på hover/focus — Astra's globale
   `button:hover { color:#fff }` gør ellers krydset (SVG med currentColor)
   hvidt og dermed usynligt mod den grå hover-baggrund. */
.stowly-search-clear:hover,
.stowly-search-clear:focus,
.stowly-search-clear:focus-visible,
.stowly-search-clear:active {
	background: var(--stowly-color-line-strong, #d9d9d9);
	color: var(--stowly-color-ink, #1f1f1f) !important;
	outline: none;
}

.stowly-front-search__field > .stowly-search-clear {
	right: 10px;
}

.stowly-search-filled > .stowly-search-clear {
	display: inline-flex !important;
}

/* Header-søgning desktop: × kun på det aktive felt (is-open / focus-within). */
@media (min-width: 769px) {
	.stowly-header-search .stowly-search-filled > .stowly-search-clear {
		display: none !important;
	}

	.stowly-header-search .stowly-search-filled.is-open > .stowly-search-clear,
	.stowly-header-search .stowly-header-search__segment--where-inline.stowly-search-filled:focus-within > .stowly-search-clear,
	.stowly-header-search .stowly-header-search__segment--where-inline.stowly-search-filled.is-where-active > .stowly-search-clear {
		display: inline-flex !important;
		right: 12px !important;
		left: auto !important;
	}

	.stowly-header-search .stowly-header-search__segment.is-open .stowly-header-search__inline-input,
	.stowly-header-search .stowly-header-search__segment--where-inline:focus-within .stowly-header-search__inline-input,
	.stowly-header-search .stowly-header-search__segment--where-inline.is-where-active .stowly-header-search__inline-input {
		padding-right: 28px !important;
	}
}

.stowly-search-filled .stowly-front-search__chev {
	display: none;
}

/* Giv plads til × i "Hvor" — undgå dobbelt padding på aktiv header-tab (desktop). */
.stowly-header-search__segment.stowly-search-filled:not(.is-open):not(:focus-within):not(.is-where-active) .stowly-header-search__inline-input,
.stowly-front-search__field.stowly-search-filled .stowly-front-search__inline-input {
	padding-right: 26px !important;
}

/* iOS Safari zoomer ind på focus hvis font-size < 16px */
@media (max-width: 768px) {
	.stowly-header-search__inline-input,
	.stowly-front-search__inline-input {
		font-size: 16px;
	}
}

/* Forslags-/standardvalg-panel ankret lige under det inline felt. */
.stowly-header-search__inline-suggestions,
.stowly-front-search__inline-suggestions {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 60;
	max-height: min(340px, 60vh);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg, 16px);
	box-shadow: var(--stowly-shadow-lg);
	color: var(--stowly-color-ink);
	box-sizing: border-box;
}

.stowly-header-search__inline-suggestions[hidden],
.stowly-front-search__inline-suggestions[hidden] {
	display: none !important;
}

.stowly-header-search__inline-status,
.stowly-front-search__inline-status {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 59;
	margin: 0;
	padding: 4px 6px;
}

.stowly-header-search__inline-status[hidden],
.stowly-front-search__inline-status[hidden] {
	display: none !important;
}

/* Standardvalg (Tæt på mig + byer): markér "Tæt på mig" med brandfarve. */
.stowly-location-search__suggestion--near-me .stowly-location-search__suggestion-text {
	font-weight: 700;
	color: var(--stowly-color-primary);
}

/* ---------- Signup / Login cards ---------- */

.stowly-provider-signup {
	max-width: 920px;
	margin: 0 auto;
	padding: 40px 16px 72px;
}

/* /bliv-udbyder/ + /opret-konto/: samme bredde som brødkrummer/container —
   ikke den smalle 1060px-cap på .stowly-auth-split. */
.stowly-page.stowly-page--auth-wide {
	max-width: none;
	width: 100%;
}

.stowly-page--auth-wide .stowly-archive__inner {
	max-width: var(--stowly-container);
	width: 100%;
}

.stowly-page--auth-wide .stowly-provider-signup,
.stowly-page--auth-wide .stowly-auth-split {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.stowly-provider-signup h1 {
	font-size: clamp(1.75rem, 2.5vw, 2.25rem);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.stowly-provider-signup__lead {
	margin: 0 0 28px;
	max-width: 52rem;
	color: var(--stowly-color-ink-soft);
	font-size: 16px;
	line-height: 1.55;
}

.stowly-provider-signup__intro {
	margin: 0 0 24px;
	color: var(--stowly-color-ink-soft);
	font-size: 15px;
	line-height: 1.5;
}

.stowly-provider-signup__name-labels {
	display: block;
	min-height: 1.35em;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--stowly-color-ink);
}

.stowly-provider-signup__name-labels .stowly-provider-signup__name-text {
	display: inline;
	text-transform: none;
	letter-spacing: 0;
}

/* The JS entity toggle hides the inactive name labels via the `hidden`
   attribute; the `display: inline` rule above otherwise out-specifies
   the UA `[hidden]` rule and leaves all three labels visible at once. */
.stowly-provider-signup__name-labels .stowly-provider-signup__name-text[hidden] {
	display: none;
}

.stowly-provider-signup__form abbr.stowly-required {
	text-decoration: none;
	color: var(--stowly-color-primary);
	font-weight: 700;
	margin-left: 2px;
}

.stowly-provider-signup__microhint {
	margin: -4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--stowly-color-ink-soft);
}

.stowly-provider-signup__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: var(--stowly-shadow-sm);
}

.stowly-provider-signup__econ {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

.stowly-provider-signup__econ--slim {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 28px;
}

.stowly-provider-signup__econ-card {
	padding: 18px 18px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-provider-signup__econ-card--accent {
	background: linear-gradient(135deg, var(--stowly-color-primary-soft), #fff);
	border-color: rgba(var(--stowly-color-primary-rgb), 0.18);
}

.stowly-provider-signup__econ-eyebrow {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft);
}

.stowly-provider-signup__econ-num {
	margin: 0 0 6px;
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--stowly-color-ink);
	line-height: 1.1;
}

.stowly-provider-signup__econ-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--stowly-color-ink-soft);
}

@media (max-width: 900px) {
	.stowly-provider-signup__econ {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stowly-provider-signup__econ--slim {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.stowly-provider-signup__econ {
		grid-template-columns: 1fr;
	}
}

.stowly-provider-signup__section {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 0 0;
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-provider-signup__section:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.stowly-provider-signup__section--entity {
	padding: 18px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md, 14px);
	background: var(--stowly-color-surface-soft, #faf9f6);
}

.stowly-provider-signup__section-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft);
}

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

.stowly-provider-signup__field {
	display: grid;
	gap: 6px;
	margin: 0;
}

.stowly-provider-signup__field--wide {
	grid-column: 1 / -1;
}

.stowly-provider-signup__form textarea {
	min-height: 120px;
	resize: vertical;
}

.stowly-provider-signup__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--stowly-color-line);
}

.stowly-provider-signup__footer .stowly-consent-check {
	flex: 1 1 320px;
	margin: 0;
}

.stowly-provider-signup__footer .stowly-become-provider__meta {
	flex: 1 1 100%;
	margin: 0 0 -4px;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
}

.stowly-provider-signup__submit {
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--stowly-radius-pill, 999px);
	white-space: nowrap;
	flex: 0 0 auto;
}

.stowly-required {
	color: var(--stowly-color-primary);
	margin-left: 4px;
	font-weight: 700;
}

@media (max-width: 640px) {
	.stowly-provider-signup__grid {
		grid-template-columns: 1fr;
	}

	.stowly-provider-signup__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.stowly-provider-signup__submit {
		width: 100%;
	}
}

/* Inline "Bliv udbyder" card rendered on /udbyderprofil/ when a logged-in
   customer doesn't have a provider profile yet. Shares the signup form
   styling above but owns its own wrapper padding so it sits nicely inside
   the page template without the full page-width hero. */
.stowly-become-provider {
	max-width: 780px;
	margin: 0 auto;
	padding: 40px 0 64px;
}

.stowly-become-provider__header {
	text-align: center;
	margin-bottom: 24px;
}

.stowly-become-provider__header h1 {
	font-size: clamp(1.75rem, 2.5vw, 2.25rem);
	margin-bottom: 8px;
}

.stowly-become-provider__header p {
	color: var(--stowly-color-ink-soft);
	margin: 0 auto;
	max-width: 560px;
}

.stowly-become-provider__meta {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 13px;
}

/* Provider profile → list of the provider's own listings below their bio. */
.stowly-provider-listings {
	margin-top: 32px;
}

.stowly-provider-listings__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.stowly-provider-listings__header h2 {
	margin: 0;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}

.stowly-provider-listings__count {
	margin: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
}

.stowly-provider-listings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.stowly-provider-listings__empty {
	padding: 20px;
	background: var(--stowly-color-surface);
	border: 1px dashed var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	color: var(--stowly-color-ink-soft);
	margin: 0;
}

/* ---------- Provider ratings ----------
   Star rating badge shown in the provider hero, the reviews list, and
   the rating form the customer fills in. Kept in global.css so the
   single-provider template doesn't need to pull in the full dashboards
   stylesheet just to display reviews. */

.stowly-provider-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 8px;
	font-size: 14px;
	color: var(--stowly-color-ink);
	font-weight: 600;
}

.stowly-provider-rating-badge--empty {
	color: var(--stowly-color-ink-soft);
	font-weight: 500;
}

.stowly-provider-rating-badge__star {
	color: #e8a12c;
	font-size: 16px;
	line-height: 1;
}

.stowly-provider-rating-badge__avg {
	letter-spacing: 0.01em;
}

.stowly-provider-rating-badge__sep {
	color: var(--stowly-color-ink-soft);
}

.stowly-provider-rating-badge__count {
	color: var(--stowly-color-ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 500;
}

.stowly-provider-rating-badge__count:hover {
	color: var(--stowly-color-ink);
}

.stowly-provider-reviews {
	margin-top: 40px;
}

.stowly-provider-reviews__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.stowly-provider-reviews__header h2 {
	margin: 0;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}

.stowly-provider-reviews__summary {
	margin: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
}

.stowly-provider-reviews__summary strong {
	color: var(--stowly-color-ink);
	font-size: 15px;
}

.stowly-provider-reviews__star {
	color: #e8a12c;
}

.stowly-provider-reviews__empty {
	padding: 20px;
	background: var(--stowly-color-surface);
	border: 1px dashed var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	color: var(--stowly-color-ink-soft);
	margin: 16px 0 0;
}

/* The rendered list + individual review cards (mirrors the dashboard
   review styles so we can show reviews outside the dashboard without
   enqueueing dashboards.css on provider profiles). */
.stowly-provider-reviews .stowly-reviews-list {
	display: grid;
	gap: 16px;
	margin-top: 16px;
}

.stowly-provider-reviews .stowly-review {
	padding: 16px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
}

.stowly-provider-reviews .stowly-review header {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.stowly-provider-reviews .stowly-review__stars {
	color: #e8a12c;
	letter-spacing: 1px;
	font-size: 14px;
}

.stowly-provider-reviews .stowly-review__name {
	font-weight: 600;
	color: var(--stowly-color-ink);
}

.stowly-provider-reviews .stowly-review p {
	margin: 0;
	line-height: 1.5;
	color: var(--stowly-color-ink);
}

.stowly-provider-reviews .stowly-review__title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--stowly-color-ink);
}

.stowly-provider-reviews .stowly-review__listing {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
}

.stowly-provider-reviews .stowly-review__listing a {
	color: var(--stowly-color-primary);
	text-decoration: none;
	font-weight: 600;
}

.stowly-provider-reviews .stowly-review__listing a:hover {
	text-decoration: underline;
}

/* ==============================================================
   Provider response on a listing review
   ============================================================== */
.stowly-review-response {
	margin-top: 12px;
	padding: 12px 14px;
	background: rgba(0, 0, 0, 0.025);
	border-left: 3px solid var(--stowly-color-primary);
	border-radius: 0 var(--stowly-radius-sm, 8px) var(--stowly-radius-sm, 8px) 0;
}

.stowly-review-response__meta {
	margin: 0 0 4px;
	font-size: 13px;
	display: flex;
	gap: 8px;
	align-items: baseline;
}

.stowly-review-response__date {
	color: var(--stowly-color-ink-soft, #717171);
	font-size: 12px;
}

.stowly-review-response__text {
	margin: 0;
	font-size: 14px;
	color: var(--stowly-color-ink);
	line-height: 1.5;
}

.stowly-review-response__toggle {
	margin-top: 10px;
}

.stowly-review-response__toggle summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--stowly-color-primary);
	padding: 4px 0;
}

.stowly-review-response__toggle summary::-webkit-details-marker {
	display: none;
}

.stowly-review-response__form {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.stowly-review-response__form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm, 8px);
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 72px;
}

.stowly-review-response__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.stowly-review-removal {
	margin-top: 10px;
}

.stowly-review-removal summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--stowly-color-ink-soft, #717171);
	padding: 4px 0;
}

.stowly-review-removal summary::-webkit-details-marker {
	display: none;
}

.stowly-review-removal__hint {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--stowly-color-ink-soft, #717171);
	line-height: 1.45;
}

.stowly-review-removal__form {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.stowly-review-removal__pending {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--stowly-color-ink-soft, #717171);
}

/* Rating form inside the reviews section. The layout mirrors the
   dashboards review drawer but lives on the public provider page. */
.stowly-provider-review-drawer {
	background: var(--stowly-color-surface-soft, #f7f7f5);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	padding: 20px;
	margin: 16px 0 24px;
}

.stowly-provider-review-drawer h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.stowly-provider-review-drawer__hint {
	margin: 0 0 12px;
	color: var(--stowly-color-ink-soft);
	font-size: 13px;
}

.stowly-provider-review-form {
	display: grid;
	gap: 12px;
	max-width: 560px;
}

.stowly-provider-review-form .stowly-form-field {
	display: grid;
	gap: 6px;
	font-size: 14px;
	color: var(--stowly-color-ink);
}

.stowly-provider-review-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm, 8px);
	background: var(--stowly-color-surface);
	font: inherit;
	color: var(--stowly-color-ink);
	resize: vertical;
	min-height: 100px;
}

.stowly-provider-review-form textarea:focus {
	outline: none;
	border-color: var(--stowly-color-accent, #111);
}

/* Reverse-order radio star picker — the inputs are visually hidden and
   the labels render as clickable stars that fill yellow when selected
   or hovered (plus everything to their right, hence row-reverse). */
.stowly-provider-review-form .stowly-rating-input {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 2px;
	justify-content: flex-end;
}

.stowly-provider-review-form .stowly-rating-input input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.stowly-provider-review-form .stowly-rating-input label {
	font-size: 32px;
	color: #d5d5d7;
	cursor: pointer;
	line-height: 1;
	transition: color 120ms ease;
	user-select: none;
}

.stowly-provider-review-form .stowly-rating-input input:checked ~ label,
.stowly-provider-review-form .stowly-rating-input label:hover,
.stowly-provider-review-form .stowly-rating-input label:hover ~ label {
	color: #e8a12c;
}

.stowly-provider-review-form .stowly-rating-input input:focus-visible + label {
	outline: 2px solid var(--stowly-color-accent, #111);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Dashboards ---------- */

.stowly-provider-dashboard {
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	padding: 28px;
	box-shadow: var(--stowly-shadow-sm);
}

/* When the dashboard uses the sidebar-tab layout, drop the outer card
   shell so the sidebar and content each get their own card look.
   The min-height anchors the whole dashboard so switching between
   short panels (e.g. "Favoritter" with 0 items) and tall ones (e.g.
   "Bookinger" with many rows) doesn't make the footer bounce up and
   down. 260px of chrome ≈ header + page padding + a slice of footer,
   so the dashboard always fills roughly the visible viewport. */
.stowly-account.stowly-provider-dashboard,
.stowly-account {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	min-height: calc(100vh - 260px);
}

.stowly-provider-dashboard h1 {
	margin-bottom: 4px;
}

.stowly-provider-dashboard > p {
	color: var(--stowly-color-ink-soft);
	margin-bottom: 24px;
}

.stowly-provider-dashboard__grid {
	margin-bottom: 16px;
}

.stowly-dashboard-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--stowly-color-line);
	padding-bottom: 0;
}

.stowly-tab-button {
	padding: 12px 18px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--stowly-color-ink-soft);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: color var(--stowly-transition), border-color var(--stowly-transition);
	margin-bottom: -1px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.stowly-tab-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.stowly-tab-button__icon svg {
	display: block;
}

.stowly-tab-button:hover,
.stowly-tab-button:focus-visible {
	color: var(--stowly-color-ink);
}

.stowly-tab-button.is-active {
	color: var(--stowly-color-ink);
	border-bottom-color: var(--stowly-color-ink);
	background: transparent;
}

.stowly-tab-panel {
	display: none;
}

.stowly-tab-panel.is-active {
	display: block;
}

/* ---------- Sidebar tabs variant (Min konto / Udbyderprofil) ---------- */
.stowly-dashboard-tabs--sidebar {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.stowly-dashboard-tabs--sidebar .stowly-dashboard-tabs__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-bottom: 0;
	margin-bottom: 0;
	padding: 12px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	position: sticky;
	top: 96px;
}

/* Group label inside the sidebar (Drift / Konto). */
.stowly-dashboard-tabs__group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.stowly-dashboard-tabs__group + .stowly-dashboard-tabs__group {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--stowly-color-line);
}
.stowly-dashboard-tabs__group-label {
	display: block;
	padding: 6px 14px 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stowly-color-ink-soft);
}

.stowly-dashboard-tabs--sidebar .stowly-tab-button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--stowly-radius-sm);
	background: transparent;
	color: var(--stowly-color-ink-soft);
	font-weight: 500;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
	margin-bottom: 0;
}

.stowly-dashboard-tabs--sidebar .stowly-tab-button:hover,
.stowly-dashboard-tabs--sidebar .stowly-tab-button:focus-visible {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
}

/* Focus ring is always visible — also on the active (filled) tab so
 * keyboard users keep their place when they arrow through the list.
 */
.stowly-dashboard-tabs--sidebar .stowly-tab-button:focus-visible,
.stowly-dashboard-tabs .stowly-tab-button:focus-visible {
	outline: 2px solid var(--stowly-color-primary);
	outline-offset: 2px;
}

/* Active tab now leans on the brand colour with a soft pink wash and a
 * 3px primary rail on the left edge — a lot warmer than the previous
 * solid-black fill, and it matches the rest of the site's accent. */
.stowly-dashboard-tabs--sidebar .stowly-tab-button.is-active {
	background: var(--stowly-color-primary-soft);
	color: var(--stowly-color-primary);
	border-bottom: 0;
	font-weight: 600;
	padding-left: 17px;
}
.stowly-dashboard-tabs--sidebar .stowly-tab-button.is-active::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: var(--stowly-color-primary);
}

.stowly-dashboard-tabs--sidebar .stowly-tab-button__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	opacity: 0.85;
}
.stowly-dashboard-tabs--sidebar .stowly-tab-button.is-active .stowly-tab-button__icon {
	opacity: 1;
	color: var(--stowly-color-primary);
}

.stowly-dashboard-tabs__content {
	min-width: 0;
}

@media (max-width: 880px) {
	.stowly-dashboard-tabs--sidebar {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.stowly-dashboard-tabs--sidebar .stowly-dashboard-tabs__nav {
		position: sticky;
		top: 64px;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 8px;
		gap: 4px;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		z-index: 5;
	}
	.stowly-dashboard-tabs--sidebar .stowly-tab-button {
		flex: 0 0 auto;
		width: auto;
		padding: 8px 12px;
		white-space: nowrap;
		scroll-snap-align: start;
	}
	.stowly-dashboard-tabs--sidebar .stowly-tab-button.is-active {
		padding-left: 12px;
	}
	.stowly-dashboard-tabs--sidebar .stowly-tab-button.is-active::before {
		display: none;
	}
	/* Mobile flat-list: collapse group separators so all tabs sit in one
	 * horizontal row. The group label is hidden but the visual divider
	 * between Drift/Konto becomes a soft pipe inside the row. */
	.stowly-dashboard-tabs--grouped .stowly-dashboard-tabs__nav {
		display: flex;
	}
	.stowly-dashboard-tabs__group {
		display: contents;
	}
	.stowly-dashboard-tabs__group + .stowly-dashboard-tabs__group {
		margin: 0;
		padding: 0;
		border: 0;
	}
	.stowly-dashboard-tabs__group + .stowly-dashboard-tabs__group::before {
		content: "";
		flex: 0 0 1px;
		align-self: stretch;
		margin: 4px 6px;
		background: var(--stowly-color-line);
		display: block;
	}
	.stowly-dashboard-tabs__group-label {
		display: none;
	}
}

/* Account header (shared by customer + provider dashboards) */
.stowly-account__header {
	margin-bottom: 28px;
}
.stowly-account__header h1 {
	font-size: clamp(28px, 3.2vw, 36px);
	margin: 0 0 6px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.stowly-account__header p {
	margin: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 16px;
}

/* With-avatar variant: round photo + name + at-a-glance stats. Used at
 * the top of the customer dashboard so users land on a personal "Hej
 * Jonathan" rather than a wall of tabs. */
.stowly-account__header--with-avatar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	margin-bottom: 24px;
}
.stowly-account__header-avatar {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #e6f2f1 0%, #cfe7e3 100%);
	color: var(--stowly-color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 24px;
}
.stowly-account__header-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.stowly-account__header-initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.stowly-account__header-body {
	min-width: 0;
}
.stowly-account__header-body h1 {
	font-size: clamp(22px, 2.4vw, 28px);
	margin: 0 0 4px;
}
.stowly-account__header-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
}
.stowly-account__header-stats strong {
	color: var(--stowly-color-ink);
	font-weight: 700;
}
.stowly-account__header-stats-divider {
	opacity: 0.5;
}
@media (max-width: 560px) {
	.stowly-account__header--with-avatar {
		padding: 14px 16px;
		gap: 12px;
	}
	.stowly-account__header-avatar {
		width: 52px;
		height: 52px;
		font-size: 20px;
	}
}

/* Header account menu: user icon trigger + dropdown */
.stowly-account-menu {
	/* `static` (ikke relative): dropdownen ankres til `.stowly-site-header__right`
	   så dens højre kant flugter med enden af headeren. */
	position: static;
	display: inline-flex;
	align-items: center;
}
.stowly-account-menu__trigger {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	background: var(--stowly-color-surface) !important;
	background-image: none !important;
	border: 1px solid var(--stowly-color-line-strong) !important;
	border-radius: 999px !important;
	color: var(--stowly-color-ink) !important;
	cursor: pointer;
	box-shadow: none;
	transition: box-shadow var(--stowly-transition), background-color var(--stowly-transition), border-color var(--stowly-transition);
	-webkit-appearance: none;
	appearance: none;
}
.stowly-account-menu__trigger:hover,
.stowly-account-menu__trigger:focus,
.stowly-account-menu__trigger:focus-visible,
.stowly-account-menu__trigger:active {
	background: var(--stowly-color-surface) !important;
	background-image: none !important;
	border-color: var(--stowly-color-line-strong) !important;
	color: var(--stowly-color-ink) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	outline: none !important;
}
.stowly-account-menu__trigger[aria-expanded="true"] {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}
.stowly-account-menu__trigger .stowly-icon {
	color: currentColor;
	stroke: currentColor;
}
.stowly-account-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.stowly-account-menu__dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 220px;
	padding: 8px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.stowly-account-menu__dropdown[hidden] {
	display: none;
}
.stowly-account-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--stowly-color-ink);
	text-decoration: none;
	line-height: 1.3;
	transition: background-color 150ms ease, color 150ms ease;
}
.stowly-account-menu__item:hover,
.stowly-account-menu__item:focus-visible {
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
	text-decoration: none;
	outline: none;
}
.stowly-account-menu__item--accent {
	font-weight: 600;
}
.stowly-account-menu__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink-soft);
	transition: background-color var(--stowly-transition), color var(--stowly-transition);
}
.stowly-account-menu__item-icon .stowly-icon {
	display: block;
}
.stowly-account-menu__item:hover .stowly-account-menu__item-icon,
.stowly-account-menu__item:focus-visible .stowly-account-menu__item-icon {
	background: rgba(var(--stowly-color-primary-rgb), 0.1);
	color: var(--stowly-color-primary);
}
.stowly-account-menu__item-label {
	flex: 1 1 auto;
	min-width: 0;
}
.stowly-account-menu__divider {
	height: 1px;
	margin: 6px 4px;
	background: var(--stowly-color-line);
}

.stowly-bookings-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
	box-shadow: none;
	border-style: solid !important;
}

.stowly-bookings-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 14px;
	background: transparent;
	box-shadow: none;
	border: 0 !important;
	border-style: solid !important;
}

.stowly-bookings-table tr {
	border: 0 !important;
	background: transparent;
}

.stowly-bookings-table th,
.stowly-bookings-table td {
	border-style: solid !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.stowly-bookings-table th {
	text-align: left;
	padding: 14px 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-soft);
	background: var(--stowly-color-surface-soft);
	border-bottom: 1px solid var(--stowly-color-line) !important;
	white-space: nowrap;
}

.stowly-bookings-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--stowly-color-line) !important;
	vertical-align: top;
	color: var(--stowly-color-ink);
	background: transparent;
}

.stowly-bookings-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.stowly-bookings-table tbody tr:hover td {
	background: var(--stowly-color-surface-soft);
}

.stowly-bookings-table a {
	color: var(--stowly-color-ink);
	font-weight: 600;
	text-decoration: none;
}

.stowly-bookings-table a:hover {
	color: var(--stowly-color-primary);
}

/* ---------- Provider listing create/update form ---------- */

.stowly-provider-listing-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	padding: 24px;
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-provider-listing-form label {
	display: grid;
	gap: 6px;
}

.stowly-provider-listing-form label.is-full,
.stowly-provider-listing-form .stowly-form-group,
.stowly-provider-listing-types,
.stowly-provider-listing-form button {
	grid-column: 1 / -1;
}

.stowly-provider-listing-form textarea {
	min-height: 120px;
}

.stowly-provider-listing-form button {
	justify-self: end;
	padding: 14px 22px;
	border-radius: var(--stowly-radius-sm);
	border: 0;
	background: var(--stowly-color-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--stowly-transition), box-shadow var(--stowly-transition);
}

.stowly-provider-listing-form button:hover {
	background: var(--stowly-color-primary-hover);
	box-shadow: var(--stowly-shadow-sm);
}

/* ---------- Status pills ---------- */

.stowly-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--stowly-radius-pill);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.stowly-status--new {
	background: var(--stowly-color-info-soft);
	color: var(--stowly-color-info-strong);
}

.stowly-status--awaiting_payment {
	background: var(--stowly-color-warning-soft);
	color: var(--stowly-color-warning);
}

.stowly-status--approved {
	background: var(--stowly-color-success-soft);
	color: var(--stowly-color-success);
}

.stowly-status--declined {
	background: var(--stowly-color-danger-soft);
	color: var(--stowly-color-danger);
}

/* ---------- Login choice ---------- */

.stowly-login-choice {
	max-width: 960px;
	margin: 0 auto;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	padding: 36px;
	box-shadow: var(--stowly-shadow-sm);
}

.stowly-login-choice h1 {
	margin-bottom: 6px;
}

.stowly-login-choice > p {
	color: var(--stowly-color-ink-soft);
	margin-bottom: 24px;
}

.stowly-login-choice__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.stowly-login-card {
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	padding: 24px;
	background: var(--stowly-color-surface);
	transition: transform var(--stowly-transition), box-shadow var(--stowly-transition), border-color var(--stowly-transition);
}

.stowly-login-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--stowly-shadow-md);
	border-color: var(--stowly-color-line-strong);
}

.stowly-login-card h2 {
	margin-bottom: 8px;
}

.stowly-login-card p {
	color: var(--stowly-color-ink-soft);
}

.stowly-login-card__footnote {
	margin-top: 14px;
	font-size: 13px;
}

.stowly-login-card__footnote a {
	text-decoration: underline;
	color: var(--stowly-color-ink);
}

.stowly-login-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 12px 20px;
	border-radius: var(--stowly-radius-sm);
	background: var(--stowly-color-ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--stowly-transition);
}

.stowly-login-button:hover,
.stowly-login-button:focus-visible,
.stowly-login-button:link,
.stowly-login-button:visited {
	color: #fff;
	background: #000;
}

.stowly-login-footnote {
	margin-top: 24px;
	color: var(--stowly-color-ink-soft);
	font-size: 14px;
}

@media (max-width: 900px) {
	.stowly-site-header__inner {
		padding: 12px 16px;
	}

	.stowly-archive,
	.stowly-single-listing {
		padding: 16px 16px 48px;
	}

	.stowly-page {
		padding: 24px 16px 48px;
	}

	.stowly-provider-signup__form,
	.stowly-provider-listing-form,
	.stowly-login-choice__grid,
	.stowly-provider-dashboard__grid {
		grid-template-columns: 1fr;
	}

	.stowly-provider-dashboard,
	.stowly-provider-signup__form,
	.stowly-login-choice {
		padding: 20px;
	}

	/* ---------- Mobile nav: hamburger + off-canvas drawer ----------
	   Kicks in at 900px so the header never has to squeeze the primary
	   nav next to the right-hand cluster on narrow laptops/tablets. */
	.stowly-nav-toggle {
		display: inline-flex;
	}

	/* With the primary nav taken out of the header flex flow (it goes
	   `position: fixed` for the drawer below), the brand and the right
	   cluster would otherwise bunch up on the left. Push the cluster —
	   hamburger + account icon — hard against the right edge. */
	.stowly-site-header__inner > .stowly-site-header__right {
		margin-left: auto;
	}

	/* Full-screen panel: covers the whole viewport so the menu feels like
	   a native app sheet. The internal `.stowly-drawer-head` carries the
	   logo + close button (the page hamburger is hidden underneath). */
	.stowly-site-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 3000;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: 0;
		background: var(--stowly-color-surface);
		border: 0;
		box-shadow: none;
		transform: translateX(100%);
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		align-items: stretch;
	}
	.stowly-site-nav.is-open {
		transform: translateX(0);
	}

	.stowly-site-nav .stowly-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 2;
		padding: max(14px, env(safe-area-inset-top)) 16px 14px;
		background: var(--stowly-color-surface);
		border-bottom: 1px solid var(--stowly-color-line);
	}

	/* Vertical stacked menu inside the drawer */
	.stowly-site-nav .stowly-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		width: 100%;
		padding: 18px 16px 8px;
	}
	.stowly-site-nav .stowly-menu > li {
		width: 100%;
	}
	.stowly-site-nav .stowly-menu a {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 12px 0;
		border-radius: 10px;
		font-size: 16px;
		font-weight: 500;
	}

	/* Mobile dropdown: no accordion — the drawer is tall enough to show
	   everything at once, so we flatten the dropdown into a labelled
	   section that mirrors the archive page's mega-menu (heading + list
	   of icon-bubble links). Looks identical to the `/opbevaring/` drawer
	   so users get the same navigation experience across the whole site. */
	.stowly-site-nav .stowly-menu__dropdown {
		width: 100%;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid var(--stowly-color-line);
	}

	/* Trigger becomes a non-interactive section heading: tiny uppercase
	   eyebrow above the list, no chevron, no hover/press states. */
	.stowly-site-nav .stowly-menu__dropdown-trigger {
		width: 100%;
		padding: 6px 0 8px;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0;
		justify-content: flex-start;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--stowly-color-ink-soft) !important;
		pointer-events: none;
		cursor: default;
	}

	.stowly-site-nav .stowly-menu__dropdown-chevron {
		display: none;
	}

	/* Panel is always visible on mobile — override the [hidden] attr
	   that the desktop accordion toggles. */
	.stowly-site-nav .stowly-menu__dropdown-panel,
	.stowly-site-nav .stowly-menu__dropdown-panel[hidden] {
		position: static;
		display: block;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.stowly-site-nav .stowly-menu__mega-grid {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
	}

	.stowly-site-nav .stowly-menu__mega-all {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 4px;
		padding: 10px 0;
		font-size: 14px;
		font-weight: 600;
		color: var(--stowly-color-primary);
	}

	/* Each item matches `.stowly-mega-menu__link` from the archive
	   drawer: compact row, soft rounded hover, 30×30 icon bubble. The
	   icon bubble itself already has the correct styles from
	   `.stowly-menu__dropdown-icon` (see above), so we only need to
	   handle padding/typography + hover tint here. */
	.stowly-site-nav .stowly-menu__dropdown-panel a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 0;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 500;
		color: var(--stowly-color-ink);
	}

	.stowly-site-nav .stowly-menu__dropdown-icon {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.stowly-site-nav .stowly-menu__dropdown-panel a:hover,
	.stowly-site-nav .stowly-menu__dropdown-panel a:focus-visible {
		background: var(--stowly-color-surface-soft);
	}

	.stowly-site-nav .stowly-menu__dropdown-panel a:hover .stowly-menu__dropdown-icon,
	.stowly-site-nav .stowly-menu__dropdown-panel a:focus-visible .stowly-menu__dropdown-icon {
		background: rgba(var(--stowly-color-primary-rgb), 0.1);
		color: var(--stowly-color-primary);
	}

	/* "Bliv udbyder" CTA pinned with comfortable gutters inside the panel. */
	.stowly-site-nav .stowly-nav-cta {
		margin: 18px 16px calc(20px + env(safe-area-inset-bottom));
	}
}

/* ---------- Generic pages (page.php) ----------
   Shared wrapper for Om os, Kontakt, Hjælp, Handelsbetingelser,
   Privatlivspolitik, Cookies, and any other custom page. */
.stowly-page__inner {
	max-width: var(--stowly-container);
	margin: 0 auto;
	padding: 40px 24px 64px;
	box-sizing: border-box;
	width: 100%;
}

.stowly-page__header {
	margin-bottom: 24px;
}

.stowly-page__title {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.2;
}

.stowly-page__content {
	max-width: 760px;
}

.stowly-page__summary {
	max-width: 760px;
	margin: 0 0 32px;
	padding: 22px 24px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	box-shadow: var(--stowly-shadow-sm);
}

.stowly-page__summary h2 {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--stowly-color-ink);
}

.stowly-page__summary p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--stowly-color-ink);
}

.stowly-page__summary ul {
	margin: 0;
	padding-left: 20px;
}

.stowly-page__summary li {
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--stowly-color-ink);
}

.stowly-page__content h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 36px 0 12px;
	letter-spacing: -0.01em;
}

.stowly-page__content h3 {
	font-size: 17px;
	font-weight: 600;
	margin: 24px 0 8px;
}

.stowly-page__content p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--stowly-color-ink);
	margin: 0 0 14px;
}

.stowly-page__content ul,
.stowly-page__content ol {
	padding-left: 20px;
	margin: 0 0 14px;
}

.stowly-page__content li {
	font-size: 15px;
	line-height: 1.65;
	margin-bottom: 6px;
}

.stowly-page__content a {
	color: var(--stowly-color-ink);
	text-decoration: underline;
}

.stowly-provider-archive__intro {
	display: grid;
	gap: 10px;
	max-width: 760px;
	margin-top: 18px;
	color: var(--stowly-color-ink-soft);
}

.stowly-provider-archive__intro p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

.stowly-provider-archive__intro a {
	color: var(--stowly-color-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 720px) {
	.stowly-page__inner {
		padding: 28px 16px 48px;
	}
	.stowly-page__title {
		font-size: 28px;
	}
}

/* ---------- 404 ---------- */
.stowly-404__inner {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.stowly-404 {
	max-width: none;
	min-height: clamp(520px, 72vh, 860px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.stowly-404__header {
	margin-bottom: 28px;
}
.stowly-404__search-row {
	justify-content: center;
}
.stowly-404__popular-list {
	justify-content: center;
}
.stowly-404__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stowly-color-muted, #6a6a6a);
}
.stowly-404__title {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 12px;
}
.stowly-404__lede {
	font-size: 17px;
	line-height: 1.55;
	color: var(--stowly-color-ink-2, #333);
	margin: 0;
}
.stowly-404__search {
	margin: 28px 0 36px;
}
.stowly-404__search-label {
	display: inline-block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 14px;
}
.stowly-404__search-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.stowly-404__search-input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--stowly-radius-lg, 14px);
	background: #fff;
	font-size: 16px;
	font-family: inherit;
}
.stowly-404__search-input:focus {
	outline: 2px solid var(--stowly-color-accent);
	outline-offset: 2px;
}
.stowly-404__search-btn {
	flex: 0 0 auto;
}
.stowly-404__popular {
	margin-top: 24px;
}
.stowly-404__popular-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 12px;
}
.stowly-404__popular-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.stowly-404__popular-item { margin: 0; padding: 0; }
.stowly-404__popular-link {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	background: #fff;
	color: var(--stowly-color-ink, #111);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.stowly-404__popular-link:hover,
.stowly-404__popular-link:focus-visible {
	background: var(--stowly-color-soft, #f6f5f1);
	border-color: rgba(0, 0, 0, 0.2);
}
.stowly-404__back {
	margin-top: 32px;
}
.stowly-404__back-link {
	color: var(--stowly-color-ink, #111);
	text-decoration: underline;
	font-weight: 500;
}
@media (max-width: 540px) {
	.stowly-404 { min-height: auto; }
	.stowly-404__title { font-size: 28px; }
	.stowly-404__search-btn { width: 100%; }
}

/* ---------- Site footer ---------- */
.stowly-site-footer {
	margin-top: 96px;
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	padding: 0 24px 24px;
}

.stowly-site-footer__card {
	max-width: var(--stowly-container);
	margin: 0 auto;
	background: var(--stowly-color-ink);
	border-radius: var(--stowly-radius-xl);
	overflow: hidden;
	box-shadow: var(--stowly-shadow-sm);
}

.stowly-site-footer__inner {
	padding: 64px 56px 48px;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr);
	gap: 64px;
	align-items: start;
}

.stowly-site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.stowly-site-footer__logo {
	display: inline-block !important;
	width: fit-content;
	text-decoration: none;
	line-height: 1;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
}

.stowly-site-footer__logo img {
	display: block !important;
	height: 40px !important;
	width: auto !important;
	max-width: 100%;
	opacity: 1 !important;
	/* Dedikeret lys logo-variant — intet CSS-filter (ville udviske flisen). */
	filter: none;
}

.stowly-site-footer__tagline {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
	max-width: 360px;
	line-height: 1.55;
}

.stowly-site-footer__tagline--small {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
}

.stowly-site-footer__social {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
}

.stowly-site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	transition: background-color var(--stowly-transition), transform var(--stowly-transition);
	text-decoration: none;
}

.stowly-site-footer__social a:hover {
	background: var(--stowly-color-primary);
	color: #ffffff;
	transform: translateY(-1px);
}

.stowly-site-footer__nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.stowly-site-footer__col h4,
.stowly-site-footer__col-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 16px;
	color: #ffffff;
}

.stowly-site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.stowly-site-footer__col a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color var(--stowly-transition);
	line-height: 1.4;
}

.stowly-site-footer__col a:hover,
.stowly-site-footer__col a:focus {
	color: #ffffff;
	text-decoration: none;
}

.stowly-site-footer__newsletter {
	padding: 0 56px 28px;
}

.stowly-site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 56px;
}

@media (max-width: 960px) {
	.stowly-site-footer__newsletter {
		padding: 0 40px 24px;
	}
}

@media (max-width: 720px) {
	.stowly-site-footer__newsletter {
		padding: 0 16px 20px;
	}
}

.stowly-site-footer__copy {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

.stowly-site-footer__impressum {
	margin: 0 0 10px;
	font-style: normal;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
	text-align: center;
}

.stowly-site-footer__impressum strong {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

.stowly-site-footer__impressum a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.stowly-site-footer__impressum a:hover,
.stowly-site-footer__impressum a:focus-visible {
	color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 960px) {
	.stowly-site-footer__inner {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 56px 40px 40px;
	}
	.stowly-site-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
	.stowly-site-footer__bottom {
		padding: 18px 40px;
	}
}

@media (max-width: 720px) {
	.stowly-site-footer {
		margin-top: 64px;
		padding: 0 16px 16px;
	}
	.stowly-site-footer__card {
		border-radius: var(--stowly-radius-lg);
	}
	.stowly-site-footer__inner {
		gap: 40px;
		padding: 40px 24px 28px;
	}
	.stowly-site-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}
	.stowly-site-footer__bottom {
		padding: 16px 24px;
	}
	.stowly-site-footer__tagline {
		max-width: none;
	}
}

/* ==========================================================================
 * Contact page (/kontakt/)
 * --------------------------------------------------------------------------
 * Shortcode `[stowly_contact_form]` rendres via page-kontakt.php uden den
 * smalle .stowly-page__content-indpakning — så sektionen selv styrer sit
 * container-spor (op til ~1320px) og kan være fuld-bleed; side-canvas er fladt.
 *
 * Layout:
 *   mobile  → én kolonne: hero først, dernæst form-card
 *   ≥ 960px → to kolonner: info (1fr) | form-card (vokser op til ~560px)
 *
 * Alt scopes under `.stowly-contact` så der ikke lækker regler ud til
 * support-tab'en i dashboardet (som har sine egne .stowly-support-*
 * styles andet steds).
 * ========================================================================== */

.stowly-contact {
	position: relative;
	isolation: isolate;
	padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 96px);
}

.stowly-contact__bg {
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(320px, 40vh, 520px);
	background: var(--stowly-color-page);
	pointer-events: none;
	z-index: -1;
}

.stowly-contact__wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: min(1320px, 100%);
	margin: 0 auto;
	padding-inline: clamp(20px, 4vw, 48px);
	display: grid;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

@media (min-width: 960px) {
	.stowly-contact__wrap {
		grid-template-columns: minmax(0, 1fr) minmax(400px, 560px);
		gap: clamp(40px, 5vw, 88px);
	}
}

@media (min-width: 1200px) {
	.stowly-contact__wrap {
		grid-template-columns: minmax(0, 1fr) minmax(440px, 600px);
	}
}

/* ---- Hero column (left) ---- */

.stowly-contact__hero {
	min-width: 0;
}

.stowly-contact__hero .stowly-hero-breadcrumbs {
	margin-bottom: 20px;
}

.stowly-contact__eyebrow {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stowly-color-primary);
	background: rgba(var(--stowly-color-primary-rgb), 0.1);
	border-radius: var(--stowly-radius-pill);
}

.stowly-contact__title {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 18px;
	font-family: var(--stowly-font-heading);
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--stowly-color-ink);
	text-wrap: balance;
}

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

.stowly-contact__lede {
	margin: 0;
	max-width: min(58ch, 100%);
	font-size: 17px;
	line-height: 1.6;
	color: var(--stowly-color-ink-soft);
}

@media (min-width: 1100px) {
	.stowly-contact__lede {
		font-size: 18px;
		max-width: 62ch;
	}
}

.stowly-contact__callout {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 24px;
	padding: 16px 18px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-left: 3px solid var(--stowly-color-primary);
	border-radius: var(--stowly-radius-md);
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-contact__callout-icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--stowly-color-primary);
	line-height: 0;
}

.stowly-contact__tip {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--stowly-color-ink-soft);
}

.stowly-contact__tip a {
	color: var(--stowly-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.stowly-contact__tip a:hover {
	color: var(--stowly-color-primary-hover);
	text-decoration: underline;
}

.stowly-contact__bullets {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.stowly-contact__bullets li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--stowly-color-ink-soft);
}

.stowly-contact__bullets li > span:last-child {
	min-width: 0;
	flex: 1 1 auto;
}

.stowly-contact__bullet-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	color: var(--stowly-color-primary);
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-contact__legal {
	margin: 28px 0 0;
	font-size: 12px;
	color: var(--stowly-color-ink-muted);
	line-height: 1.5;
}

/* ---- Form card (right column) ---- */

.stowly-contact__panel {
	min-width: 0;
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-xl, 20px);
	box-shadow:
		var(--stowly-shadow-lg),
		0 1px 0 rgba(255, 255, 255, 0.65) inset;
	overflow: hidden;
}

@media (min-width: 960px) {
	.stowly-contact__panel {
		border-radius: var(--stowly-radius-xl, 24px);
	}
}

.stowly-contact__alert {
	margin: 0;
	padding: 14px 24px;
	border-radius: 0;
	border-bottom: 1px solid var(--stowly-color-line);
}

.stowly-contact .stowly-contact-form {
	display: grid;
	gap: 22px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.stowly-contact .stowly-contact-form__head {
	padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 36px) 0;
}

.stowly-contact .stowly-contact-form__title {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--stowly-color-ink);
}

.stowly-contact .stowly-contact-form__subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--stowly-color-ink-soft);
}

.stowly-contact .stowly-contact-form__section {
	display: grid;
	gap: 16px;
	padding: 0 clamp(24px, 3vw, 36px);
	min-width: 0;
}

.stowly-contact .stowly-contact-form__section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stowly-color-ink-muted);
}

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

@media (min-width: 520px) {
	.stowly-contact .stowly-contact-form__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.stowly-contact .stowly-field {
	display: grid;
	gap: 6px;
	min-width: 0;
	font-size: 14px;
	color: var(--stowly-color-ink);
}

.stowly-contact .stowly-field > span {
	font-size: 13px;
	font-weight: 600;
	color: var(--stowly-color-ink);
}

.stowly-contact .stowly-field em {
	color: var(--stowly-color-primary);
	font-style: normal;
}

.stowly-contact .stowly-contact-form input[type="text"],
.stowly-contact .stowly-contact-form input[type="email"],
.stowly-contact .stowly-contact-form select,
.stowly-contact .stowly-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	font: inherit;
	color: var(--stowly-color-ink);
	background: #fff;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: var(--stowly-radius-sm, 10px);
	transition: border-color var(--stowly-transition), box-shadow var(--stowly-transition);
}

.stowly-contact .stowly-contact-form input:focus,
.stowly-contact .stowly-contact-form select:focus,
.stowly-contact .stowly-contact-form textarea:focus {
	outline: none;
	border-color: var(--stowly-color-primary);
	box-shadow: 0 0 0 3px rgba(var(--stowly-color-primary-rgb), 0.15);
}

.stowly-contact .stowly-contact-form input:disabled {
	background: #f5f5f4;
	color: var(--stowly-color-ink-soft);
}

.stowly-contact .stowly-contact-form textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.5;
}

/*
 * Actions row — bevidst grid i stedet for flex. Med flex + flex-wrap +
 * `flex: 1` på hint'en kunne hint blive mast til én-bogstav-pr.-linje
 * når forældren var smal (og det endte den tidligere med at være, inde
 * i en 760px-wrapper). Grid giver deterministisk opførsel: én kolonne
 * på mobil, auto + 1fr på desktop — og hint fylder altid den resterende
 * bredde i stedet for at shrinke til 0.
 */
.stowly-contact .stowly-contact-form__actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 0 clamp(24px, 3vw, 36px) clamp(24px, 3vw, 32px);
	margin: 0;
}

@media (min-width: 560px) {
	.stowly-contact .stowly-contact-form__actions {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 18px;
	}
}

.stowly-contact .stowly-contact-form__submit {
	justify-self: stretch;
	padding: 13px 22px;
	font-size: 15px;
}

@media (min-width: 560px) {
	.stowly-contact .stowly-contact-form__submit {
		justify-self: start;
		min-width: 180px;
	}
}

.stowly-contact .stowly-contact-form__submit .stowly-icon {
	flex: 0 0 auto;
}

.stowly-contact .stowly-contact-form__hint {
	margin: 0;
	min-width: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--stowly-color-ink-soft);
}

/* Honeypot — visually hidden but still in the DOM so bots find it. */
.stowly-contact .stowly-contact-form__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 560px) {
	.stowly-contact .stowly-contact-form__head,
	.stowly-contact .stowly-contact-form__section {
		padding-inline: 20px;
	}
	.stowly-contact .stowly-contact-form__actions {
		padding: 0 20px 20px;
	}
	.stowly-contact__alert {
		padding: 12px 20px;
	}
}

/* -------------------------------------------------------------------------
 * Delt chat-transcript (Hjælp/support-tråd + Beskeder) — max-højde + scroll
 * ------------------------------------------------------------------------- */

.stowly-chat-scroll {
	--stowly-chat-scroll-max: min(56vh, 28rem);
	box-sizing: border-box;
	max-height: var(--stowly-chat-scroll-max);
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 16px 18px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface-soft, #f7f7f5);
	min-height: 120px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Delt boble-look: beskeder (.stowly-msg__bubble) + support (.stowly-support-message) */
.stowly-msg__bubble,
.stowly-support-message {
	max-width: min(75%, 34rem);
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid var(--stowly-color-line);
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink);
}

.stowly-msg.is-me .stowly-msg__bubble,
.stowly-support-message--user {
	background: var(--stowly-gradient-primary);
	color: #fff;
	border-color: transparent;
}

.stowly-msg.is-me .stowly-msg__time {
	color: rgba(255, 255, 255, 0.85);
}

.stowly-support-message--user .stowly-support-message__meta,
.stowly-support-message--user .stowly-support-message__meta strong {
	color: rgba(255, 255, 255, 0.9);
}

/* Support tab (list + thread view) inside the dashboards. */

.stowly-support-tab {
	display: grid;
	gap: 20px;
}

.stowly-support-subheading {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 8px 0 4px;
	color: var(--stowly-color-ink);
}

.stowly-support-new {
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	padding: clamp(20px, 3vw, 28px);
	box-shadow: var(--stowly-shadow-xs);
}

.stowly-support-new__header {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--stowly-color-line);
}

.stowly-support-new__header h3 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--stowly-color-ink);
}

.stowly-support-new__header p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--stowly-color-ink-soft);
	margin: 0;
}

.stowly-support-new__form {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	margin: 0;
}

.stowly-support-new__meta {
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	margin: 0;
	padding: 10px 14px;
	background: var(--stowly-color-surface-soft);
	border-radius: var(--stowly-radius-sm);
}

.stowly-support-new__meta strong {
	color: var(--stowly-color-ink);
	font-weight: 600;
}

.stowly-support-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.stowly-support-list__item {
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
	background: var(--stowly-color-surface);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.stowly-support-list__item:hover {
	border-color: var(--stowly-color-ink);
	box-shadow: var(--stowly-shadow-sm);
}

.stowly-support-list__item.is-unread {
	background: #fff8e1;
	border-color: #e8c063;
}

.stowly-support-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	color: inherit;
	text-decoration: none;
}

.stowly-support-list__body {
	display: grid;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.stowly-support-list__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.stowly-support-list__title {
	font-size: 15px;
	color: var(--stowly-color-ink);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.stowly-support-list__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	flex-wrap: wrap;
}

.stowly-support-list__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d63638;
}

.stowly-support-list__aside {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* Status pills — shared between list items and thread header. */
.stowly-support-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

.stowly-support-status--open {
	background: #fff3cd;
	color: #8a6000;
}

.stowly-support-status--answered {
	background: #d4edda;
	color: #1e6330;
}

.stowly-support-status--closed {
	background: #e8eaed;
	color: #555;
}

/* Thread (messages + reply form) */

.stowly-support-thread {
	display: grid;
	gap: 18px;
}

.stowly-support-thread__header {
	display: grid;
	gap: 8px;
}

.stowly-support-thread__back {
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	text-decoration: none;
	justify-self: start;
}

.stowly-support-thread__back:hover {
	color: var(--stowly-color-primary);
	text-decoration: none;
}

.stowly-support-thread__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.stowly-support-thread__topic {
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
}

.stowly-support-thread__title {
	margin: 4px 0 0;
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
}

.stowly-chat-scroll .stowly-support-thread__messages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	min-width: 0;
}

.stowly-support-message {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: flex-start;
	width: fit-content;
	max-width: min(75%, 34rem);
}

.stowly-support-message--user {
	align-self: flex-end;
}

.stowly-support-message--admin {
	align-self: flex-start;
}

.stowly-support-message__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 11px;
	line-height: 1.35;
	opacity: 0.85;
	margin: 0;
	color: var(--stowly-color-ink-soft);
}

.stowly-support-message--admin .stowly-support-message__meta strong {
	color: var(--stowly-color-ink);
	font-size: 12px;
	font-weight: 600;
}

.stowly-support-message--user .stowly-support-message__meta strong {
	font-size: 12px;
	font-weight: 600;
}

.stowly-support-message__body p {
	margin: 0 0 6px;
	line-height: 1.5;
	color: var(--stowly-color-ink);
}

.stowly-support-message--user .stowly-support-message__body p {
	color: #fff;
}

.stowly-support-message__body p:last-child {
	margin-bottom: 0;
}

/* Reply form inside the thread view */
.stowly-support-reply-form {
	display: grid;
	gap: 12px;
	padding: 18px;
	background: var(--stowly-color-surface-soft, #f7f7f5);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-md);
}

.stowly-support-reply-form .stowly-field {
	display: grid;
	gap: 6px;
	font-size: 14px;
}

.stowly-support-reply-form .stowly-field > span {
	font-weight: 600;
	font-size: 13px;
}

.stowly-support-reply-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-sm, 10px);
	background: #fff;
	font: inherit;
	color: var(--stowly-color-ink);
	resize: vertical;
	min-height: 100px;
	line-height: 1.5;
}

.stowly-support-reply-form textarea:focus {
	outline: none;
	border-color: var(--stowly-color-accent, #111);
}

.stowly-support-reply-form button {
	justify-self: start;
}

.stowly-support-thread__closed {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	margin-bottom: 6px;
	background: linear-gradient(135deg, #fff6e1 0%, #fde4c4 100%);
	border: 1px solid rgba(194, 119, 15, 0.25);
	border-radius: var(--stowly-radius-md);
	color: #7a4500;
	font-size: 13.5px;
	line-height: 1.5;
}

.stowly-support-thread__closed-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: #c2770f;
	box-shadow: inset 0 0 0 1px rgba(194, 119, 15, 0.18);
}

/* Når formen sidder i "reopen"-tilstand får den ligeså subtile hints
   på knappen, så "Genåbn og send" ikke forveksles med et almindeligt
   svar. */
.stowly-support-reply-form--reopen button {
	box-shadow: 0 6px 14px rgba(var(--stowly-color-primary-rgb), 0.25);
}

/* Tab badge for the "Hjælp" tab (shared style, scoped to sidebar tabs). */
.stowly-tab-button__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #d63638;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	margin-left: auto;
	line-height: 1;
}

@media (max-width: 640px) {
	.stowly-support-message,
	.stowly-msg__bubble {
		max-width: 100%;
	}
}

/* =========================================================================
 * Shared FAQ accordion
 *
 * Site-wide FAQ component, lifted from the /hjaelp/ page. Use this
 * anywhere you need an "ofte stillede spørgsmål" block so all FAQ
 * surfaces look and behave identically (help center, "sådan virker det",
 * city landing pages, etc.). Keep any page-specific FAQ CSS limited to
 * the section wrapper (background, padding, max-width) — do not
 * override the item styling.
 * ========================================================================= */

.stowly-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 820px;
	margin: 0 auto;
}

.stowly-faq-item {
	background: var(--stowly-color-surface);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg);
	box-shadow: var(--stowly-shadow-xs);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	overflow: hidden;
}

.stowly-faq-item[open] {
	border-color: var(--stowly-color-line-strong);
	box-shadow: 0 8px 24px -14px rgba(17, 17, 17, 0.15);
}

.stowly-faq-item[hidden] {
	display: none !important;
}

.stowly-faq-item > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	color: var(--stowly-color-ink);
	line-height: 1.45;
	user-select: none;
}

.stowly-faq-item > summary::-webkit-details-marker {
	display: none;
}

.stowly-faq-item > summary:hover {
	color: var(--stowly-color-primary);
}

.stowly-faq-item > summary:focus-visible {
	outline: 2px solid var(--stowly-color-primary);
	outline-offset: -2px;
	border-radius: var(--stowly-radius-lg);
}

.stowly-faq-item__q {
	flex: 1;
}

/* Chevron bubble — matches the front-page FAQ treatment: soft grey
   circle with a thin chevron that flips 180° and fills pink when the
   accordion opens. Keep the SVG inside the span in markup; we only
   style the wrapper + <svg> here. */
.stowly-faq-item__chev {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--stowly-color-surface-soft);
	color: var(--stowly-color-ink-muted);
	transition: transform var(--stowly-transition, 0.2s ease),
		background var(--stowly-transition, 0.15s ease),
		color var(--stowly-transition, 0.15s ease);
}

.stowly-faq-item__chev svg {
	width: 18px;
	height: 18px;
	display: block;
}

.stowly-faq-item[open] .stowly-faq-item__chev {
	transform: rotate(180deg);
	background: var(--stowly-color-primary);
	color: #fff;
}

.stowly-faq-item__a {
	padding: 0 22px 20px;
}

.stowly-faq-item__a p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--stowly-color-ink-soft);
}

.stowly-faq-item__a p:last-child {
	margin-bottom: 0;
}

@media (max-width: 520px) {
	.stowly-faq-item > summary {
		padding: 16px 18px;
		font-size: 15px;
	}

	.stowly-faq-item__a {
		padding: 0 18px 18px;
	}
}

/* ------------------------------------------------------------------
   Global button/link active-state hardening
   ------------------------------------------------------------------
   On iOS/Android the browser flashes a translucent blue tap
   highlight on every interactive element, which leaks through to
   the button text and makes it look momentarily blue on press.
   Killing `-webkit-tap-highlight-color` on every button-ish element
   removes that flash across the whole site in one place.

   Scoped to actual button elements and our namespaced `.stowly-*`
   button/CTA classes so it doesn't touch intentional inline text
   links inside rich prose. */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"],
a.stowly-btn,
a[class*="stowly-"][class*="__btn"],
a[class*="stowly-"][class*="__cta"],
a[class*="stowly-"][class*="-btn"],
a[class*="stowly-"][class*="-cta"] {
	-webkit-tap-highlight-color: transparent;
}

/* NOTE: We intentionally do NOT ship a blanket `a[...]:visited { color }`
   override here. `currentColor` would inherit from the parent and
   make dark buttons render with dark text on a dark background.
   Per-variant `:visited` rules (e.g. `.stowly-btn--primary:visited`
   stays white, `.stowly-btn--dark:visited` stays white) already
   handle the cases where the UA's visited purple would otherwise
   leak through. Add new button variants with their own explicit
   `:visited` color where needed. */

/* ==========================================================================
   Shared rich listing-card grid (ét visuelt spor)
   --------------------------------------------------------------------------
   Foto øverst, hvid kortflade og mørk tekst — samme look overalt der
   bruges `.stowly-card-grid` eller `.stowly-provider-listings__grid`.
   Markup: `stowly_render_listing_card()` i php/helpers.php.

   `.stowly-card-grid` = tæt 4-kolonne-række (forside, landinger m.fl.).
   `.stowly-provider-listings__grid` = 3 kolonner på udbyderprofil.
   Single listing: `.stowly-single-related .stowly-provider-listings__grid`
   holder 4 kolonner på smalere breakpoint end profilen.
   Arkivets liste (`/opbevaring/`) bruger en separat flad vandret variant
   i archive-listings.css — ikke denne grid.
   ========================================================================== */

/* Kolonne-layout pr. kontekst (kortets *indhold* er fælles ovenfor). */
.stowly-card-grid,
.stowly-single-related .stowly-provider-listings__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.stowly-provider-listings__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.stowly-card-grid .stowly-listing-card,
.stowly-provider-listings__grid .stowly-listing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--stowly-color-surface, #fff);
	border: 1px solid var(--stowly-color-line);
	border-radius: var(--stowly-radius-lg, 16px);
	overflow: hidden;
	transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 220ms ease,
		border-color 220ms ease;
	box-shadow: var(--stowly-shadow-xs, 0 1px 2px rgba(17, 17, 17, 0.04));
	min-width: 0;
	/* Nuke Astra's default article paddings so the card edges hug the
	   image cleanly on the front-page archive layout too. */
	padding: 0 !important;
	margin: 0 !important;
}

.stowly-card-grid .stowly-listing-card:hover,
.stowly-provider-listings__grid .stowly-listing-card:hover {
	transform: translateY(-3px);
	border-color: var(--stowly-color-line);
	box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
}

.stowly-card-grid .stowly-listing-card__link,
.stowly-provider-listings__grid .stowly-listing-card__link {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 220px;
	flex: 0 0 auto;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.stowly-card-grid .stowly-listing-card__image,
.stowly-provider-listings__grid .stowly-listing-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: unset;
	flex: none;
	margin: 0;
	border-radius: 0;
	animation: none;
	overflow: hidden;
	background: #fff;
}

/* Lille top-gradient så chips (introtilbud/afstand) i toppen forbliver
   læsbare over lyse annoncebilleder — resten af feltet er rent hvidt. */
.stowly-card-grid .stowly-listing-card__image::after,
.stowly-provider-listings__grid .stowly-listing-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.05) 0%,
		rgba(0, 0, 0, 0) 20%
	);
}

.stowly-card-grid .stowly-listing-card__image img,
.stowly-provider-listings__grid .stowly-listing-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 280ms ease;
}

/* Når billedet er loadet: statisk hvid baggrund (ingen shimmer). */
.stowly-card-grid .stowly-listing-card__image:has(img[data-loaded="1"]),
.stowly-provider-listings__grid .stowly-listing-card__image:has(img[data-loaded="1"]) {
	background: #fff;
}

.stowly-card-grid .stowly-listing-card__image img:not([data-loaded="1"]),
.stowly-provider-listings__grid .stowly-listing-card__image img:not([data-loaded="1"]) {
	opacity: 0;
}

.stowly-card-grid .stowly-listing-card:hover .stowly-listing-card__image img,
.stowly-provider-listings__grid .stowly-listing-card:hover .stowly-listing-card__image img {
	transform: scale(1.04);
}

.stowly-card-grid .stowly-listing-card__image-placeholder,
.stowly-provider-listings__grid .stowly-listing-card__image-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg,
		var(--stowly-color-primary-soft, #e6f2f1) 0%,
		#f1f0e9 60%,
		#f4eee6 100%);
}

.stowly-card-grid .stowly-listing-card__image-placeholder::after,
.stowly-provider-listings__grid .stowly-listing-card__image-placeholder::after {
	content: "";
	position: absolute;
	inset: 30%;
	border-radius: 14px;
	border: 2px dashed rgba(17, 17, 17, 0.18);
}

/* Image overlay row — holds the verified badge and (when we know the
   listing's distance to the visitor) a distance chip. They live in a
   single flex row in the top-left of the image so the pills always
   line up edge-to-edge, regardless of which combination is present.
   `right: 54px` reserves space for the heart button in the opposite
   corner so a long label ("Verificeret • 0,3 km") can wrap instead of
   sliding under the heart. */
.stowly-card-grid .stowly-listing-card__overlays,
.stowly-provider-listings__grid .stowly-listing-card__overlays,
.stowly-listing-grid .stowly-listing-card__overlays {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 54px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

.stowly-card-grid .stowly-listing-card__overlays > *,
.stowly-provider-listings__grid .stowly-listing-card__overlays > *,
.stowly-listing-grid .stowly-listing-card__overlays > * {
	pointer-events: auto;
}

.stowly-card-grid .stowly-listing-card__overlays .stowly-verified-badge,
.stowly-provider-listings__grid .stowly-listing-card__overlays .stowly-verified-badge,
.stowly-listing-grid .stowly-listing-card__overlays .stowly-verified-badge {
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
}

/* Distance chip — dark glass pill sized to match the compact verified
   badge (same height, same corner radius) so the two sit flush next
   to each other. Using rem-free px + line-height: 1 keeps the height
   pixel-stable across Astra/user font-size overrides. */
.stowly-card-grid .stowly-listing-card__chip--distance,
.stowly-provider-listings__grid .stowly-listing-card__chip--distance,
.stowly-listing-grid .stowly-listing-card__chip--distance {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.82);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.18);
}

.stowly-card-grid .stowly-listing-card__chip--distance svg,
.stowly-provider-listings__grid .stowly-listing-card__chip--distance svg,
.stowly-listing-grid .stowly-listing-card__chip--distance svg {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	opacity: 0.92;
}

/* Udbyder: privat vs virksomhed (tax_entity_type på provider). Lys pill
   så den skiller sig fra den mørke afstands-chip. */
.stowly-card-grid .stowly-listing-card__chip--entity,
.stowly-provider-listings__grid .stowly-listing-card__chip--entity,
.stowly-listing-grid .stowly-listing-card__chip--entity {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #0f172a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
}

.stowly-card-grid .stowly-listing-card__chip--entity-business,
.stowly-provider-listings__grid .stowly-listing-card__chip--entity-business,
.stowly-listing-grid .stowly-listing-card__chip--entity-business {
	color: #0c4a6e;
	background: rgba(224, 242, 254, 0.95);
}

/* Introtilbud-chip — solid brand pill så rabatten skiller sig tydeligt
   ud fra den mørke afstands-chip og den lyse udbyder-chip. */
.stowly-card-grid .stowly-listing-card__chip--intro,
.stowly-provider-listings__grid .stowly-listing-card__chip--intro,
.stowly-listing-grid .stowly-listing-card__chip--intro {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: var(--stowly-color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(var(--stowly-color-primary-rgb), 0.30);
}

.stowly-card-grid .stowly-listing-card__chip--intro svg,
.stowly-provider-listings__grid .stowly-listing-card__chip--intro svg,
.stowly-listing-grid .stowly-listing-card__chip--intro svg {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	opacity: 0.95;
}

/* Favorite heart — top-right overlay on the image. Higher-specificity
   block so Astra + the global button reset from front-page.css can't
   flatten the white pill back to transparent. */
.stowly-card-grid .stowly-listing-card > .stowly-favorite-btn,
.stowly-provider-listings__grid .stowly-listing-card > .stowly-favorite-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 6px rgba(17, 17, 17, 0.10);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--stowly-color-ink);
	-webkit-tap-highlight-color: transparent;
	transition: transform 160ms ease, background 160ms ease,
		color 160ms ease, box-shadow 160ms ease;
}

.stowly-card-grid .stowly-listing-card > .stowly-favorite-btn:hover,
.stowly-card-grid .stowly-listing-card > .stowly-favorite-btn:focus,
.stowly-card-grid .stowly-listing-card > .stowly-favorite-btn:focus-visible,
.stowly-card-grid .stowly-listing-card > .stowly-favorite-btn:active,
.stowly-provider-listings__grid .stowly-listing-card > .stowly-favorite-btn:hover,
.stowly-provider-listings__grid .stowly-listing-card > .stowly-favorite-btn:focus,
.stowly-provider-listings__grid .stowly-listing-card > .stowly-favorite-btn:focus-visible,
.stowly-provider-listings__grid .stowly-listing-card > .stowly-favorite-btn:active {
	background: #fff;
	color: var(--stowly-color-primary);
	transform: scale(1.06);
	outline: none;
	box-shadow: 0 4px 12px rgba(17, 17, 17, 0.15);
}

.stowly-card-grid .stowly-listing-card > .stowly-favorite-btn svg,
.stowly-provider-listings__grid .stowly-listing-card > .stowly-favorite-btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	filter: none;
}

.stowly-card-grid .stowly-listing-card > .stowly-favorite-btn.is-favorited,
.stowly-provider-listings__grid .stowly-listing-card > .stowly-favorite-btn.is-favorited {
	background: #fff;
	color: var(--stowly-color-primary);
}

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

/* Tekst ovenpå foto (under gradient-lagets z-index). */
.stowly-card-grid .stowly-listing-card__body,
.stowly-provider-listings__grid .stowly-listing-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 2.25rem 1rem 1.1rem;
	min-width: 0;
	flex: unset;
	min-height: 0;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.94) 38%,
		#fff 58%
	);
}

.stowly-card-grid .stowly-listing-card__footer,
.stowly-provider-listings__grid .stowly-listing-card__footer {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0;
	min-width: 0;
}

.stowly-card-grid .stowly-listing-card__title,
.stowly-card-grid .stowly-listing-card__body h2,
.stowly-card-grid .stowly-listing-card__body h3,
.stowly-provider-listings__grid .stowly-listing-card__title,
.stowly-provider-listings__grid .stowly-listing-card__body h2,
.stowly-provider-listings__grid .stowly-listing-card__body h3 {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--stowly-color-ink);
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	text-shadow: none;
}

.stowly-card-grid .stowly-listing-card__meta,
.stowly-provider-listings__grid .stowly-listing-card__meta {
	margin: 0;
	font-size: 13px;
	color: var(--stowly-color-ink-soft);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: none;
}

.stowly-card-grid .stowly-listing-card__city,
.stowly-provider-listings__grid .stowly-listing-card__city {
	margin: 0;
	font-size: 14px;
	color: var(--stowly-color-ink-soft);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: none;
}

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

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

.stowly-card-grid .stowly-listing-card__price,
.stowly-provider-listings__grid .stowly-listing-card__price {
	margin: 0 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	flex-shrink: 0;
	color: var(--stowly-color-ink);
	font-size: 15px;
	text-shadow: none;
}

.stowly-card-grid .stowly-listing-card__price strong,
.stowly-provider-listings__grid .stowly-listing-card__price strong {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--stowly-color-ink);
}

.stowly-card-grid .stowly-listing-card__price span,
.stowly-provider-listings__grid .stowly-listing-card__price span {
	font-size: 14px;
	color: var(--stowly-color-ink-soft);
	font-weight: 500;
}

/* Book button — full-width pill at the very bottom of the card. Only
   present when the caller asked for it (show_book_button=true). */
.stowly-card-grid .stowly-listing-card__book,
.stowly-provider-listings__grid .stowly-listing-card__book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 16px 16px;
	padding: 10px 16px;
	background: var(--stowly-color-ink);
	color: #fff;
	border: 1px solid var(--stowly-color-ink);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background 160ms ease, color 160ms ease,
		border-color 160ms ease, transform 160ms ease;
}

.stowly-card-grid .stowly-listing-card__book:hover,
.stowly-card-grid .stowly-listing-card__book:focus-visible,
.stowly-provider-listings__grid .stowly-listing-card__book:hover,
.stowly-provider-listings__grid .stowly-listing-card__book:focus-visible {
	background: #000;
	color: #fff;
	border-color: #000;
	transform: translateY(-1px);
	outline: none;
}

/* Responsive breakpoints — 4-kolonne og 3-kolonne griddene kollapser
   i samme takt men starter én "trappesten" fra hinanden, så den tætte
   4-op bliver til 3-op før de to spor mødes i 2-op. Matcher hvordan
   kategorierne + byerne på forsiden kollapser så alt lander på samme
   breakpoints.

   Bemærk: `.stowly-single-related .stowly-provider-listings__grid`
   (rail'en "Flere depoter fra denne udbyder" nederst på single
   listing-siden) holder 4-op helt ned til 960px i stedet for at
   falde til 3 ved 1200px. På PC-bredder mellem 960–1200px fylder
   de 4 kort containeren pænt i stedet for at efterlade en tom
   højrekolonne. */
@media (max-width: 1200px) {
	.stowly-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.stowly-card-grid,
	.stowly-provider-listings__grid,
	.stowly-single-related .stowly-provider-listings__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.stowly-card-grid,
	.stowly-provider-listings__grid,
	.stowly-single-related .stowly-provider-listings__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ==========================================================================
   MOBILE CAROUSELS (≤640px)
   "Find plads i din by" (forside), "Populære …" (opbevaringstype-landinger)
   og rail'en med anbefalede annoncer på single listing bliver vandret
   slidebare kort-rækker i stedet for at stable lodret. Prev/next-knapperne
   injiceres af js/global.js men skjules på telefon (swipe-only). På desktop
   vises side-pile kun hvor `data-stowly-carousel-side-arrows` er sat.
   Selektoren `.stowly-carousel[data-stowly-carousel]` har specificity (0,2,0)
   så den altid vinder over grid-layoutet fra `.stowly-card-grid` /
   `.stowly-front-cities__list` uanset fil-rækkefølge.
   ========================================================================== */
@media (max-width: 640px) {
	.stowly-carousel[data-stowly-carousel] {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		margin: 0;
		padding: 2px 0 8px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.stowly-carousel[data-stowly-carousel]::-webkit-scrollbar {
		display: none;
	}
	.stowly-carousel[data-stowly-carousel] > * {
		flex: 0 0 80%;
		max-width: 80%;
		min-width: 0;
		scroll-snap-align: start;
		margin: 0 !important;
	}

	/* Telefon: swipe-only — ingen prev/next (gælder byer, landinger m.fl.). */
	.stowly-carousel-controls,
	.stowly-carousel-wrap--side-arrows > .stowly-carousel-btn {
		display: none !important;
	}
}

/* Carousel-knapper (kun desktop/tablet hvor JS viser dem). */
.stowly-carousel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--stowly-color-line-strong);
	border-radius: 999px;
	background: var(--stowly-color-surface);
	color: var(--stowly-color-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--stowly-transition), border-color var(--stowly-transition), opacity var(--stowly-transition), transform var(--stowly-transition);
}
.stowly-carousel-btn:hover,
.stowly-carousel-btn:focus-visible {
	background: var(--stowly-color-surface-soft);
	border-color: var(--stowly-color-ink-soft);
	outline: none;
}
.stowly-carousel-btn:active {
	transform: scale(0.94);
}
.stowly-carousel-btn:disabled,
.stowly-carousel-btn.is-inactive {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* Centreret prev/next under sporet — kun hvis vi senere aktiverer desktop-rail;
   forside/landinger bruger grid på bred skærm, så skjul som standard. */
@media (min-width: 641px) {
	.stowly-carousel-controls {
		display: none;
	}
}