/*
 * Homepage refresh (templates/front-page-refresh.html). Loaded only on pages
 * that use that template (inc/refresh-template.php), and every rule is scoped
 * under .is-refresh, so no other page changes. Colours come only from the
 * refresh-* presets in theme.json (Appearance > Editor > Styles > Colors); there
 * are no hex values here. The header and footer parts are copies of the existing
 * ones, so theme.css's layout rules apply to them as they are; this file only
 * restates their colours (theme.css's are !important hex values), sizes the
 * logo, and adds the sticky and compact-on-scroll behaviour for the new header.
 */

.is-refresh {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);

	/*
	 * Colours: theme.json defines the palette (Cream, Ink, Rust, Brown, ...) and keeps every older
	 * slug as an alias of its new colour (accent = Rust, bg = Cream, surface = Sand light, ...), so
	 * the older sections and the saved page content follow the new palette without a remap here.
	 */

	/* Square corners on every button (the older 4px is gone). */
	--refresh-button-radius: 0;
}

/* The dark band is the refresh header colour, and text on an accent fill is refresh-on-accent. */
.is-refresh .is-style-dark-section {
	background-color: var(--wp--preset--color--ink);
}

.is-refresh .wp-block-button.is-style-primary-button .wp-block-button__link {
	background-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--linen);
}

.is-refresh .wp-block-button.is-style-primary-button .wp-block-button__link:hover,
.is-refresh .wp-block-button.is-style-primary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--deep-rust);
	color: var(--wp--preset--color--linen);
}

.is-refresh .wp-block-button.is-style-secondary-button .wp-block-button__link:hover,
.is-refresh .wp-block-button.is-style-secondary-button .wp-block-button__link:focus-visible,
.is-refresh .is-style-dark-section .wp-block-button.is-style-secondary-button .wp-block-button__link:hover,
.is-refresh .is-style-dark-section .wp-block-button.is-style-secondary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--rust);
	border-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--linen);
}

.is-refresh .is-swipe-row-next:hover,
.is-refresh .is-swipe-row-next:focus-visible {
	color: var(--wp--preset--color--linen);
}

/*
 * Sticky header. theme.css makes the header part sticky when it is the first
 * child of .wp-site-blocks; here it is the first child of the .is-refresh
 * wrapper, so the same rule is repeated for that. Same top and z-index, same
 * admin-bar offset and the same 600px cutoff.
 */
.is-refresh > .wp-block-template-part:first-child {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
}

@media screen and (max-width: 600px) {
	.is-refresh > .wp-block-template-part:first-child {
		top: 0;
	}
}

/*
 * Header colours. The bar is brown with linen text, set on the block itself; the dropdown panels
 * and the phone menu are the same brown. Nav links (16px, weight 500), and the phone number (15px) are linen at 90%;
 * hover is full linen with an underline. The booking button is linen with ink text.
 */
.is-refresh header.wp-block-group {
	--header-link: color-mix(in srgb, var(--wp--preset--color--linen) 90%, transparent);
}

.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item__content.wp-block-navigation-item__content,
.is-refresh header.wp-block-group .header-bar .nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--header-link) !important;
}

/* Nav links and dropdown items: 16px, weight 500 (the phone number and the booking button have their own rules below). */
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item:not(.nav-link-phone, .nav-link-cta) > .wp-block-navigation-item__content {
	font-size: 16px;
	font-weight: 500;
}

.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.is-refresh header.wp-block-group .header-bar .nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--linen) !important;
	text-decoration: underline;
}

/* The phone number: JetBrains Mono, 15px, with its icon (1em) (on phones only the icon shows; theme.css hides the number with font-size 0). */
.is-refresh header.wp-block-group .header-bar .nav-link-phone .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
}

@media (min-width: 600px) {
	.is-refresh header.wp-block-group .header-bar .nav-link-phone .wp-block-navigation-item__content {
		font-size: 15px;
	}
}

/* Dropdown arrows follow the link colour; 8.4px at 13px text, so 10.5px at 16px (desktop bar). */
@media (min-width: 1170px) {
	.is-refresh header .header-pages .wp-block-navigation-submenu__toggle {
		width: 10.5px;
		height: 10.5px;
		margin-left: 4.5px;
	}

	.is-refresh header .header-pages .wp-block-navigation-submenu__toggle svg {
		width: 10.5px;
		height: 10.5px;
	}
}

/* From 1100px to 1199px the nav links are 15px (16px from 1200px), with tighter gaps so the English bar fits on one row; the arrows follow (9.8px). */
@media (min-width: 1100px) and (max-width: 1199.98px) {
	.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item:not(.nav-link-phone, .nav-link-cta) > .wp-block-navigation-item__content {
		font-size: 15px;
	}

	.is-refresh header .header-pages .wp-block-navigation__container {
		column-gap: 6px;
	}
}

@media (min-width: 1170px) and (max-width: 1199.98px) {
	.is-refresh header .header-pages .wp-block-navigation-submenu__toggle {
		width: 9.8px;
		height: 9.8px;
	}

	.is-refresh header .header-pages .wp-block-navigation-submenu__toggle svg {
		width: 9.8px;
		height: 9.8px;
	}
}

.is-refresh header.wp-block-group .header-bar .wp-block-navigation-submenu__toggle {
	color: var(--header-link);
}

.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--linen);
}

.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item__content:focus-visible,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation__responsive-container-open:focus-visible,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation__responsive-container-close:focus-visible,
.is-refresh header.wp-block-group .header-bar .roland-lang-toggle:focus-visible,
.is-refresh header.wp-block-group .header-bar .header-logo a:focus-visible,
.is-refresh header .header-pages .wp-block-navigation-submenu__toggle:focus-visible {
	outline-color: var(--wp--preset--color--linen);
}

/*
 * The last page link ("Om oss") has a dropdown too; it sits near the right edge, so its panel
 * opens to the left from the link's right edge instead of running off the screen.
 */
@media (min-width: 1170px) {
	.is-refresh header .header-pages .wp-block-navigation__container > .wp-block-navigation-submenu:last-child > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}
}

/* Phone icon in the link colour, like the number. */
.is-refresh header .nav-link-phone .wp-block-navigation-item__content::before {
	background-color: var(--header-link);
}

/*
 * "Boka måttagning": linen fill, ink text, 15px weight 600, square corners; wheat on hover, focus and
 * press; never wraps.
 */
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--linen);
	border-color: var(--wp--preset--color--linen);
	font-size: 15px;
	font-weight: 600;
	border-radius: 0;
	white-space: nowrap;
}

.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:hover,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:focus-visible,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:active,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:hover,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:focus-visible,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:active {
	color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--wheat);
	border-color: var(--wp--preset--color--wheat);
	text-decoration: none;
}

/* Burger, its close button and the language switcher. */
.is-refresh header.wp-block-group .header-bar .wp-block-navigation__responsive-container-open,
.is-refresh header.wp-block-group .header-bar .wp-block-navigation__responsive-container-close,
.is-refresh header.wp-block-group .header-bar .header-lang,
.is-refresh header.wp-block-group .header-bar .roland-lang-toggle {
	color: var(--wp--preset--color--linen);
}

/* Dropdown panels (page links, language list) and the phone menu overlay. */
.is-refresh header.wp-block-group .header-bar .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--linen);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--linen) 25%, transparent);
}

.is-refresh header.wp-block-group .header-bar .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--brown) !important;
	color: var(--wp--preset--color--linen) !important;
}

.is-refresh header .header-pages .is-menu-open .wp-block-navigation__submenu-container,
.is-refresh header.wp-block-group .header-bar .header-pages .is-menu-open .wp-block-navigation__submenu-container {
	border-left-color: color-mix(in srgb, var(--wp--preset--color--linen) 35%, transparent);
}

/*
 * Logo: two images in the header, one shown at a time. From 1100px the full logo
 * (garderobia-logo-header-cream.svg) at 280px wide; below 1100px the wordmark
 * (garderobia-wordmark-cream.svg) at 170px wide. The header never scales a logo below 250px: the full
 * logo only ever appears at its fixed 280px, and when the header gets narrower (phones, and the shrunk
 * header on scroll) it switches to the wordmark instead of shrinking. The artwork is trimmed, so the
 * left edge of the image is the content edge.
 */
.is-refresh header .header-logo {
	flex: 0 0 auto;
	min-width: 0;
	max-width: none;
	padding-right: 0;
}

.is-refresh header .header-logo--full {
	display: none;
	width: 280px;
}

.is-refresh header .header-logo--mark {
	display: block;
	width: 170px;
}

@media (min-width: 1100px) {
	.is-refresh header .header-logo--full {
		display: block;
	}

	.is-refresh header .header-logo--mark {
		display: none;
	}
}

/*
 * Item order on desktop, as on the live site: logo, phone, "Boka måttagning",
 * the page links, the language switcher. (theme.css's single-row header puts
 * the page links before the phone and the button, centred; here the logo takes
 * all the free room instead and the rest sits against the right edge.) Below
 * 1170px, and on phones, theme.css's order is already the live one.
 */
@media (min-width: 1170px) {
	.is-refresh header .header-bar .header-actions {
		order: 1;
		margin-left: 0;
	}

	.is-refresh header .header-bar .header-pages {
		order: 2;
		margin-inline: 0;
	}

	.is-refresh header .header-bar .header-lang {
		order: 3;
	}

	/* The logo's ceiling is reached from about 1400px; the spare room goes
	   between it and the phone, not between the other items. */
	.is-refresh header .header-logo {
		margin-right: auto;
	}
}

/*
 * Compact header, at every width. The header is sticky at every width; once the page is scrolled
 * past about 80px (assets/js/refresh-header.js toggles html.rs-header-compact) it gets tighter, and it
 * goes back to the full header at the top.
 *   - 1100px and up: the full logo goes from 280px to 250px (never smaller) and the bar's vertical
 *     padding drops to 12px;
 *   - 600px to 1099px: the wordmark stays 170px wide; the padding drops to 8px;
 *   - below 600px: the padding drops to 4px and the language switcher is hidden; the logo is the
 *     170px wordmark, which is also what the full logo turns into on a narrow header.
 * Shrinking would shorten the sticky wrapper and pull the page up, so the script saves the full
 * height in --header-full-height and the wrapper keeps it; its empty lower part lets taps through.
 */
html.rs-header-compact .is-refresh > .wp-block-template-part:first-child,
html.rs-header-animating .is-refresh > .wp-block-template-part:first-child {
	height: var(--header-full-height);
	pointer-events: none;
}

html.rs-header-compact .is-refresh header,
html.rs-header-animating .is-refresh header {
	pointer-events: auto;
}

html.rs-header-compact .is-refresh header .header-bar {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

@media (min-width: 1100px) {
	html.rs-header-compact .is-refresh header .header-bar {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}

	html.rs-header-compact .is-refresh header .header-logo--full {
		width: 250px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.is-refresh header .header-logo--full {
		transition: width 0.22s ease-out;
	}
}

@media (max-width: 599.98px) {
	html.rs-header-compact .is-refresh header .header-bar {
		padding-top: 0.25rem !important;
		padding-bottom: 0.25rem !important;
	}

	html.rs-header-compact .is-refresh header .header-lang {
		display: none;
	}

	/* The button keeps its arrow in the compact header, a little apart from the label. */
	html.rs-header-compact .is-refresh header .header-bar .nav-link-cta .wp-block-navigation-item__content {
		gap: 0.25em;
	}

	html.rs-header-compact .is-refresh header .header-bar .nav-link-cta .wp-block-navigation-item__content::after {
		display: block;
	}
}

/*
 * Below the desktop breakpoint (1170px, where the page links go into the menu)
 * the button always reads "Boka →" / "Book →", in the normal and the compact
 * header (as the live site does in its compact one), so the logo gets the room.
 * The full label stays in the page, hidden visually, for screen readers, and the
 * short one is generated text marked decorative.
 */
@media (max-width: 1169.98px) {
	.is-refresh header .nav-link-cta .wp-block-navigation-item__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.is-refresh header .nav-link-cta .wp-block-navigation-item__content::before {
		content: "Boka";
		content: "Boka" / "";
	}

	html:lang(en) .is-refresh header .nav-link-cta .wp-block-navigation-item__content::before {
		content: "Book";
		content: "Book" / "";
	}

	.is-refresh header .header-bar .nav-link-cta .wp-block-navigation-item__content {
		gap: 0.25em;
	}

	.is-refresh header .header-bar .nav-link-cta .wp-block-navigation-item__content::after {
		display: block;
	}
}

/*
 * Block hero. Desktop: about 60/40. Left, one photo with a white card on it;
 * right, a wide tile over two tiles. Each tile is a photo with a white label; the
 * label's link is stretched over the whole tile (one link, one tab stop).
 * Phones: photo, then the card content, then the three photo tiles (the wide one on top, the two
 * others side by side), each with its label over the photo as on desktop.
 */
.is-refresh .refresh-hero {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 1rem;
	padding-block: 1rem;
}

.is-refresh .refresh-hero__main {
	position: relative;
	min-height: clamp(26rem, 39vw, 36rem);
	border-radius: 0;
	overflow: hidden;
}

.is-refresh .refresh-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
}

.is-refresh .refresh-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.is-refresh .refresh-hero__card {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	box-sizing: border-box;
	width: min(25rem, calc(100% - 3rem));
	padding: 1.5rem;
	border-radius: 0;
}

.is-refresh .refresh-hero__card > * {
	margin-block: 0;
}

.is-refresh .refresh-hero__logo {
	margin-bottom: 1rem;
}

.is-refresh .refresh-hero__logo img {
	max-width: 100%;
	height: auto;
	display: block;
}

.is-refresh .refresh-hero__title {
	margin-bottom: 0.5rem;
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
	line-height: 1.15;
}

.is-refresh .refresh-hero__line {
	margin-bottom: 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.is-refresh .refresh-hero__card .wp-block-buttons {
	margin-bottom: 0.75rem;
}

.is-refresh .refresh-hero__call {
	font-size: var(--wp--preset--font-size--small);
}

.is-refresh .refresh-hero__logo a {
	display: block;
}

.is-refresh .refresh-hero__news {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.is-refresh .refresh-hero__news a {
	color: var(--wp--preset--color--brown);
	text-decoration: none;
}

.is-refresh .refresh-hero__news a:hover,
.is-refresh .refresh-hero__news a:focus-visible {
	color: var(--wp--preset--color--brown-dark);
}

/*
 * The whole hero block (photo and card) is one link: the news link in the card is stretched over the
 * block with ::after, as the tiles do (one link, one tab stop; the logo keeps its own link to the same
 * page). On desktop the card is a grid item at the block's bottom left instead of absolutely
 * positioned, so the link's overlay is sized by the block and not by the card; it looks the same.
 */
.is-refresh .refresh-hero__news a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.is-refresh .refresh-hero__main:has(.refresh-hero__news a) {
	cursor: pointer;
}

.is-refresh .refresh-hero__main:hover .refresh-hero__news a {
	color: var(--wp--preset--color--brown-dark);
}

.is-refresh .refresh-hero__news a:focus-visible {
	outline: none;
}

.is-refresh .refresh-hero__news a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--rust);
	outline-offset: -3px;
}

@media (min-width: 48rem) {
	.is-refresh .refresh-hero__main {
		display: grid;
		align-items: end;
		justify-items: start;
		box-sizing: border-box;
		padding: 1.5rem;
		isolation: isolate;
	}

	.is-refresh .refresh-hero__photo {
		z-index: -1;
	}

	.is-refresh .refresh-hero__card {
		position: static;
		width: min(25rem, 100%);
	}
}

.is-refresh .refresh-hero__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1.15fr 1fr;
	gap: 1rem;
	min-height: 0;
}

.is-refresh .refresh-tile {
	position: relative;
	display: grid;
	min-height: 0;
	border-radius: 0;
	overflow: hidden;
}

.is-refresh .refresh-hero__tiles > .refresh-tile:first-child {
	grid-column: 1 / -1;
}

.is-refresh .refresh-tile__photo {
	position: relative;
	grid-area: 1 / 1;
	min-height: 0;
	margin: 0;
}

.is-refresh .refresh-tile__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.is-refresh .refresh-tile__label {
	z-index: 1;
	grid-area: 1 / 1;
	align-self: end;
	justify-self: start;
	margin: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}

.is-refresh .refresh-tile__label a {
	color: inherit;
	text-decoration: none;
}

.is-refresh .refresh-tile__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.is-refresh .refresh-tile:hover .refresh-tile__label,
.is-refresh .refresh-tile:focus-within .refresh-tile__label {
	background-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--linen);
}

.is-refresh .refresh-tile__label a:focus-visible {
	outline: none;
}

.is-refresh .refresh-tile__label a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--rust);
	outline-offset: -3px;
	border-radius: 0;
}

@media (max-width: 47.99rem) {
	.is-refresh .refresh-hero {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		padding-block: 0.75rem;
	}

	.is-refresh .refresh-hero__main {
		min-height: 0;
		overflow: visible;
		border-radius: 0;
	}

	.is-refresh .refresh-hero__photo {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 10;
	}

	.is-refresh .refresh-hero__photo img {
		position: absolute;
		inset: 0;
		border-radius: 0;
	}

	.is-refresh .refresh-hero__card {
		position: static;
		width: auto;
		padding: 1rem 0 0;
		border-radius: 0;
	}

	.is-refresh .refresh-hero__logo img {
		max-width: 260px;
	}

	.is-refresh .refresh-hero__card .wp-block-buttons,
	.is-refresh .refresh-hero__card .wp-block-button,
	.is-refresh .refresh-hero__card .wp-block-button__link {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

/* Fact strip: four facts on a full-width refresh-sand band (see the section background system below), two by two on phones. */
.is-refresh .refresh-facts {
	padding-block: 1.5rem;
}

.is-refresh .refresh-facts__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.is-refresh .refresh-fact {
	position: relative;
	text-align: center;
}

/*
 * Separators between the facts: 1px, sand, 60% of the band's height (row plus its 1.5rem padding above and below) and centred.
 * Desktop: a line in the middle of the gap before each fact but the first. Phones (2x2): one
 * vertical line between the columns and one horizontal line between the rows, drawn on the
 * row; none on the outer edges.
 */
.is-refresh .refresh-fact + .refresh-fact::before {
	content: "";
	position: absolute;
	top: 50%;
	height: calc(60% + 1.8rem);
	transform: translateY(-50%);
	left: -0.75rem;
	width: 1px;
	background-color: var(--wp--preset--color--sand);
}

.is-refresh .refresh-fact > * {
	margin-block: 0;
}

.is-refresh .refresh-fact__title {
	font-weight: 700;
}

.is-refresh .refresh-fact__line {
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 47.99rem) {
	.is-refresh .refresh-facts__row {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 1fr;
		gap: 1.25rem 1rem;
		background-image:
			linear-gradient(var(--wp--preset--color--sand), var(--wp--preset--color--sand)),
			linear-gradient(var(--wp--preset--color--sand), var(--wp--preset--color--sand));
		background-repeat: no-repeat;
		background-size: 1px calc(60% + 1.8rem), 100% 1px;
		background-position: 50% 50%, 0 50%;
	}

	.is-refresh .refresh-fact + .refresh-fact::before {
		display: none;
	}
}

/*
 * Customer reviews: white cards on the page's cream. From 1100px four across, from 782px to 1099px two by
 * two, 24px apart, every card in a row as tall as the tallest; below 782px one swipe row (scroll-snap, the
 * next card peeking in) with the shared slider arrow (.is-swipe-row-next, swipe-row.js): forward only, and
 * after the last card it goes back to the first. The section's top padding is dropped: the section above
 * already ends with its own padding, so the space between the two is one section padding, not two.
 */
.is-refresh .refresh-quotes {
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--section);
}

/* The quotes section stays in the page but is not shown until the quotes are real (remove the class refresh-quotes--hidden from the group). */
.is-refresh .refresh-quotes.refresh-quotes--hidden {
	display: none;
}

.is-refresh .refresh-quotes .refresh-quotes__row.is-swipe-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	overflow: visible;
}

.is-refresh .refresh-quotes .refresh-quotes__row.is-swipe-row > .refresh-quote {
	grid-column: auto;
}

@media (min-width: 1100px) {
	.is-refresh .refresh-quotes .refresh-quotes__row.is-swipe-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 781.98px) {
	.is-refresh .refresh-quotes .refresh-quotes__row.is-swipe-row {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.is-refresh .refresh-quotes .refresh-quotes__row.is-swipe-row > .refresh-quote {
		flex: 0 0 82%;
		padding: 24px;
		scroll-snap-align: start;
	}

	.is-refresh .refresh-quotes .is-swipe-row-hint {
		display: flex;
	}
}

/* The arrow box covers the whole row (the cards differ in height), so the arrow is centred on the cards. */
.is-refresh .refresh-quotes .is-swipe-row-hint {
	top: 0;
	bottom: 0;
	width: 100%;
	aspect-ratio: auto;
}

/*
 * The card: white, 32px padding, square, no border or shadow, a flex column. A closing quote mark in
 * Archivo 48px, brown, 8px above the quote (decoration only: generated content with an empty
 * alternative, so screen readers skip it); the quote 17px, 1.55, ink, without quotation marks of its
 * own; the name at the bottom, under a 1px sand hairline with 16px between the line and the name, in
 * the section-label style.
 */
.is-refresh .refresh-quote {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 32px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.is-refresh .refresh-quote::before {
	content: "\201D";
	content: "\201D" / "";
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--brown);
}

.is-refresh .refresh-quote > * {
	margin-block: 0;
}

.is-refresh .refresh-quote > .refresh-quote__text {
	margin-bottom: 24px;
	color: var(--wp--preset--color--ink);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
}

.is-refresh .refresh-quote > .refresh-quote__by {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.is-refresh .refresh-quotes__link {
	margin-top: 1.5rem;
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Every swipe row hides its scrollbar (the project and inspiration rows already do, in theme.css). */
.is-refresh .is-swipe-row {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.is-refresh .is-swipe-row::-webkit-scrollbar {
	display: none;
}

/* Closing booking band. */
.is-refresh .refresh-closing > * {
	margin-block: 0;
}

.is-refresh .refresh-closing__call {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * v2 layout below the hero (page /hem-refresh/).
 *
 * Square corners everywhere in the refresh template: images, tiles, cards, bands,
 * buttons. The round slider arrow buttons (.is-swipe-row-next) and the round
 * scroll-to-top button stay round, as on the live site.
 */
.is-refresh img,
.is-refresh .wp-block-post-content img,
.is-refresh .wp-block-post-content .wp-block-image img,
.is-refresh .wp-block-post-content .wp-block-cover,
.is-refresh .wp-block-post-content .wp-block-media-text__media,
.is-refresh .wp-block-post-content .wp-block-media-text__media img,
.is-refresh .refresh-hero__main,
.is-refresh .refresh-hero__card,
.is-refresh .refresh-tile,
.is-refresh .refresh-tile__label,
.is-refresh .refresh-quote,
.is-refresh .refresh-hero__photo img,
.is-refresh .refresh-tile__photo img,
.is-refresh .wp-block-button:not(.scroll-to-top) .wp-block-button__link,
.is-refresh header .nav-link-cta .wp-block-navigation-item__content,
.is-refresh header .wp-block-navigation__submenu-container,
.is-refresh header.wp-block-group .header-bar .header-pages .wp-block-navigation__submenu-container,
.is-refresh .map-band .cmplz-blocked-content-notice,
.is-refresh .map-band .cmplz-blocked-content-container {
	border-radius: 0;
}

/* The booking form's submit button ("Ring upp mig" / "Call me back") looks like the other booking buttons: refresh-accent fill, white text, 4px radius. */
.is-refresh :is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit {
	background-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--linen);
	border-radius: 0;
	font-weight: 600;
}

.is-refresh :is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit:hover,
.is-refresh :is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit:focus-visible {
	background-color: var(--wp--preset--color--deep-rust);
	color: var(--wp--preset--color--linen);
}

/* Buttons take the cookie banner's radius; images, tiles, cards and bands stay square. */
.is-refresh .wp-block-button.is-style-primary-button .wp-block-button__link,
.is-refresh .wp-block-button.is-style-secondary-button .wp-block-button__link,
.is-refresh header .nav-link-cta .wp-block-navigation-item__content {
	border-radius: 0;
}

/* Copies of a block for one layout only. The project row (Måttanpassat) is one slider of six on every screen: its intro text and its row show on phones too, and the two older three-card phone copies stay hidden. */
@media (max-width: 47.99rem) {
	.is-refresh .refresh-desktop-only {
		display: none;
	}

	.is-refresh .refresh-desktop-only.refresh-intro,
	.is-refresh .refresh-desktop-only.refresh-row {
		display: block;
	}

	.is-refresh .tile-subsection.refresh-mobile-only {
		display: none;
	}
}

@media (min-width: 48rem) {
	.is-refresh .refresh-mobile-only {
		display: none;
	}
}

/* A button restyled as a text link with an arrow ("Så går det till →", "Se alla →"). */
.is-refresh .wp-block-button.is-style-secondary-button.refresh-textlink .wp-block-button__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brown);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.is-refresh .wp-block-button.is-style-secondary-button.refresh-textlink .wp-block-button__link:hover,
.is-refresh .wp-block-button.is-style-secondary-button.refresh-textlink .wp-block-button__link:focus-visible {
	background: none;
	color: var(--wp--preset--color--brown-dark);
	text-decoration: none;
}

/* Heading row: the section heading on the left, the "see all" link on the right. */
.is-refresh .refresh-headrow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-bottom: 1.25rem;
}

.is-refresh .refresh-headrow > h2 {
	margin: 0;
}

.is-refresh .refresh-headrow .wp-block-buttons {
	flex: 0 0 auto;
	margin: 0 0 0.35rem;
}

.is-refresh .refresh-intro {
	margin: 0 0 1.5rem;
}

/*
 * Från skiss till färdig garderob: the sketch photo on the left; on the right
 * the heading, one short paragraph and the text link, centred against the photo.
 * On phones: heading, photo, paragraph, link.
 */
.is-refresh .refresh-process {
	padding-block: var(--wp--preset--spacing--section);
}

.is-refresh .refresh-process__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	grid-template-rows: 1fr auto auto auto auto 1fr;
	grid-template-areas:
		"photo ."
		"photo eyebrow"
		"photo title"
		"photo text"
		"photo link"
		"photo .";
	column-gap: 3rem;
}

.is-refresh .refresh-process__title {
	grid-area: title;
	margin: 0 0 1.25rem;
}

.is-refresh .refresh-process__text {
	grid-area: text;
	max-width: 34rem;
	margin: 0 0 1.25rem;
}

.is-refresh .refresh-process__inner > .wp-block-buttons {
	grid-area: link;
	margin: 0;
}

.is-refresh .refresh-process__photo {
	position: relative;
	grid-area: photo;
	align-self: stretch;
	min-height: 28rem;
	margin: 0;
}

.is-refresh .refresh-process__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 47.99rem) {
	.is-refresh .refresh-process__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"eyebrow"
			"title"
			"photo"
			"text"
			"link";
		row-gap: 1.5rem;
	}

	/* 12px between the label and the title (the grid's 24px row gap, less 12px). */
	.is-refresh .refresh-process__inner > .eyebrow {
		margin-bottom: -12px;
	}

	.is-refresh .refresh-process__title,
	.is-refresh .refresh-process__text {
		margin: 0;
	}

	.is-refresh .refresh-process__photo {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

/*
 * Desktop rows (projects: all six in one row; inspiration: all six images). The
 * same .is-swipe-row markup and the same arrow button (.is-swipe-row-next, handled
 * by swipe-row.js) as the phone sliders; here the row is a flex strip of 25rem
 * cards with the next card peeking, and the arrow is shown (theme.css hides it
 * from 48rem). The scrollbar stays hidden (theme.css).
 */
@media (min-width: 48rem) {
	.is-refresh .refresh-row .is-swipe-row,
	.is-refresh .refresh-inspiration .is-swipe-row {
		display: flex;
		overflow-x: auto;
		gap: 1.5rem;
		scroll-snap-type: x mandatory;
	}

	.is-refresh .refresh-row .is-swipe-row > *,
	.is-refresh .refresh-inspiration .is-swipe-row > * {
		flex: 0 0 25rem;
		grid-column: auto;
		scroll-snap-align: start;
	}

	.is-refresh .refresh-row .is-swipe-row-hint,
	.is-refresh .refresh-inspiration .is-swipe-row-hint {
		display: flex;
		width: 25rem;
		aspect-ratio: 4 / 5;
	}
}

/* Inspiration images: portrait cards, as the project tiles. */
.is-refresh .refresh-inspiration .wp-block-image {
	margin: 0;
}

.is-refresh .refresh-inspiration .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.is-refresh .refresh-inspiration .is-swipe-row-hint {
	aspect-ratio: 4 / 5;
}

/* Closing booking band: sand, centred; the button and the phone link side by side on desktop. */
.is-refresh .refresh-closing__title {
	font-size: 2.75rem;
	line-height: 1.1;
}

.is-refresh .refresh-closing__line {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--body);
}

.is-refresh .refresh-closing__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.75rem;
}

.is-refresh .refresh-closing__actions > * {
	margin: 0;
}

.is-refresh .refresh-closing__actions .wp-block-button__link {
	padding: 1rem 2.5rem;
	font-size: 1.125rem;
}

/* The booking button and the outlined phone button beside it: one row, same height. */
.is-refresh .refresh-closing__actions .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 1rem;
	margin: 0;
}

.is-refresh .wp-block-buttons:has(> .wp-block-button.is-style-primary-button + .wp-block-button.is-style-secondary-button) .wp-block-button.is-style-primary-button .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--rust);
}

.is-refresh .wp-block-buttons:has(> .wp-block-button.is-style-primary-button + .wp-block-button.is-style-secondary-button) .wp-block-button.is-style-primary-button .wp-block-button__link:hover,
.is-refresh .wp-block-buttons:has(> .wp-block-button.is-style-primary-button + .wp-block-button.is-style-secondary-button) .wp-block-button.is-style-primary-button .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--deep-rust);
}

/* Two buttons side by side (booking + phone): 32px apart on desktop, 16px when stacked on phones. */
.is-refresh .wp-block-buttons:has(> .wp-block-button.is-style-primary-button + .wp-block-button.is-style-secondary-button) {
	gap: 2rem;
}

@media (max-width: 47.99rem) {
	.is-refresh .wp-block-buttons:has(> .wp-block-button.is-style-primary-button + .wp-block-button.is-style-secondary-button) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
}

@media (max-width: 47.99rem) {
	.is-refresh .refresh-closing__title {
		font-size: 1.875rem;
	}

	.is-refresh .refresh-closing__actions {
		flex-direction: column;
		gap: 1rem;
	}

	.is-refresh .refresh-closing__actions .wp-block-buttons,
	.is-refresh .refresh-closing__actions .wp-block-button,
	.is-refresh .refresh-closing__actions .wp-block-button__link {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	/* Both buttons full width, stacked, booking first. */
	.is-refresh .refresh-closing__actions .wp-block-buttons {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
}

/*
 * The bottom of the page: showroom, Besök oss and the closing band, each section with
 * the same vertical padding (their backgrounds are in the section background system).
 */
.is-refresh .refresh-bottom__section {
	padding-block: 4.5rem;
}

/*
 * Besök oss: opening hours and contact beside the map. The map is the Map
 * Band's own markup (consent placeholder, "click to use" overlay), so Complianz
 * and map-band.js behave exactly as on every other page.
 */
.is-refresh .refresh-visit__inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 3rem;
}

.is-refresh .refresh-visit__text > * {
	margin-block: 0;
}

.is-refresh .refresh-visit__title {
	margin-bottom: 1.25rem;
}

.is-refresh .refresh-visit__address,
.is-refresh .refresh-visit__hours {
	margin-bottom: 1.25rem;
}

.is-refresh .refresh-visit__phone {
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.is-refresh .refresh-visit__directions {
	font-weight: 600;
}

@media (min-width: 48rem) {
	.is-refresh .refresh-visit__map .map-band-embed,
	.is-refresh .refresh-visit .map-band .cmplz-blocked-content-container {
		height: 21rem;
	}
}

@media (max-width: 47.99rem) {
	.is-refresh .refresh-visit__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
}

/*
 * Footer (parts/footer-refresh.html, footer-refresh-en.html), ink with linen text. One system:
 *  - content text is linen; links are linen at 80% and gain full linen and an underline on hover;
 *  - the column labels (11px JetBrains Mono, uppercase, 0.2em), the contact and social icons and the
 *    bottom bar are linen at 60%;
 *  - every column: label, 16px, then lines of one size, weight and line height
 *    with the same 8px between them.
 * Colour and type are restated here because theme.css uses the old tokens.
 */
.is-refresh .site-footer {
	--footer-muted: color-mix(in srgb, var(--wp--preset--color--linen) 60%, transparent);
	--footer-link: color-mix(in srgb, var(--wp--preset--color--linen) 80%, transparent);
	border-top-color: color-mix(in srgb, var(--wp--preset--color--linen) 15%, transparent);
}

.is-refresh .site-footer a {
	color: var(--footer-link);
}

.is-refresh .site-footer a:hover {
	color: var(--wp--preset--color--linen);
}

.is-refresh .site-footer a:hover,
.is-refresh .site-footer .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.is-refresh .site-footer .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--footer-link) !important;
}

.is-refresh .site-footer .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--linen) !important;
}

.is-refresh .site-footer :focus-visible {
	outline-color: var(--wp--preset--color--linen);
}

/*
 * Layout. The Columns children are, in the page: the wordmark block, the partner block (Lokala
 * partner), Sidor, Kontakt and Öppettider. From 782px they sit in four columns: wordmark block |
 * partner block | Sidor | Kontakt with Öppettider under it (40px between them). Each column is as
 * wide as its widest line, with the space between the columns equal (space-between); when there is
 * not room for that, the columns narrow and their text wraps. All four start at the same top.
 * Below 782px: one column in the order wordmark block, Kontakt, Öppettider, Sidor, partner block,
 * 40px between them.
 */
.is-refresh .site-footer .wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 2.5rem;
	margin: 0;
	padding-bottom: 1.5rem;
}

.is-refresh .site-footer .wp-block-columns > .wp-block-column {
	flex-basis: auto;
	flex-grow: 0;
	min-width: 0;
	margin: 0;
}

@media (max-width: 781.98px) {
	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(1) {
		order: 1;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(4) {
		order: 2;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(5) {
		order: 3;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(3) {
		order: 4;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(2) {
		order: 5;
	}
}

/* The last line of a column ends at its text, so the 40px between blocks is the visible space. */
.is-refresh .site-footer .wp-block-columns > .wp-block-column > :last-child {
	margin-bottom: 0;
}

@media (min-width: 782px) {
	/* Core lets a Column break inside a word; here the columns narrow only down to their longest word. */
	.is-refresh .site-footer .wp-block-columns > .wp-block-column {
		overflow-wrap: normal;
		word-break: normal;
	}

	/* The wordmark is 320px at most, and narrows with its column when the row is tight. */
	.is-refresh .site-footer .wp-block-column .footer-logo--full {
		width: 0;
		min-width: 100%;
		max-width: none;
	}

	.is-refresh .site-footer .wp-block-column .footer-logo--full img {
		width: 100% !important;
		max-width: 320px;
	}

	.is-refresh .site-footer .wp-block-columns {
		grid-template-columns: repeat(4, minmax(min-content, max-content));
		grid-template-rows: auto 1fr;
		justify-content: space-between;
		column-gap: 1.5rem;
		row-gap: 2.5rem;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(1) {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(2) {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(3) {
		grid-column: 3;
		grid-row: 1 / span 2;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(4) {
		grid-column: 4;
		grid-row: 1;
	}

	.is-refresh .site-footer .wp-block-columns > .wp-block-column:nth-child(5) {
		grid-column: 4;
		grid-row: 2;
	}
}

/*
 * The tagline is the one line allowed to wrap (two lines). On wide screens its width is what
 * sets the left block's width, so it is the length of its longer line in each language.
 */
.is-refresh .site-footer .footer-tagline {
	max-width: 299px;
}

.is-refresh .site-footer .footer-tagline:lang(en) {
	max-width: 350px;
}

/*
 * The Garderobia logo: the full logo (garderobia-logo-cream.svg) at 320px wide; the wordmark
 * (garderobia-wordmark-cream.svg) instead when the column is narrower than 320px (a phone narrower
 * than 352px: 320px plus the two 16px gutters). Never wider than its column.
 */
.is-refresh .site-footer .footer-logo--full {
	width: 320px;
}

.is-refresh .site-footer .footer-logo--mark {
	display: none;
	width: 100%;
}

@media (max-width: 351.98px) {
	.is-refresh .site-footer .footer-logo--full {
		display: none;
	}

	.is-refresh .site-footer .footer-logo--mark {
		display: block;
	}
}
.is-refresh .site-footer .footer-logo,
.is-refresh .site-footer .footer-logo img {
	max-width: 100%;
}

/* The wordmark's top edge is the top of the column, level with the labels. */
.is-refresh .site-footer .footer-logo a,
.is-refresh .site-footer .footer-logo img {
	display: block;
}

/* The Roland logo in the partner block is 280px wide (never wider than its column). */
.is-refresh .site-footer .footer-partner-logo,
.is-refresh .site-footer .footer-partner-logo img {
	max-width: 100%;
}

/* The visible space after the caption (text to text) is the same 48px as after the social icons. */
.is-refresh .site-footer .wp-block-column p.footer-partner-prompt.footer-partner-prompt {
	margin-top: 31px;
}

/* The English button never overflows its column. */
.is-refresh .site-footer .footer-partner-button {
	max-width: 100%;
}

/* Labels: 11px JetBrains Mono, uppercase, letter-spacing 0.2em, linen at 60%; 16px below. */
.is-refresh .site-footer .footer-label {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--footer-muted);
}

/* Lines: the same size, weight, line height and gap in every column. */
.is-refresh .site-footer .wp-block-column p:not(.footer-label),
.is-refresh .site-footer .wp-block-column .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.6;
}

.is-refresh .site-footer .wp-block-column p:not(.footer-label) {
	margin-block: 0 0.5rem;
}

.is-refresh .site-footer .wp-block-column .wp-block-navigation-item__content.wp-block-navigation-item__content {
	margin: 0;
}

.is-refresh .site-footer .footer-logo,
.is-refresh .site-footer .footer-partner-logo {
	margin: 0 0 1rem;
}

.is-refresh .site-footer .footer-sidor-nav .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.is-refresh .site-footer .footer-sidor-nav .wp-block-navigation-item {
	margin: 0;
}

.is-refresh .site-footer .footer-social {
	margin-top: 1rem;
}

/* Phone, email and social icons: the muted grey of the labels. */
.is-refresh .site-footer a svg {
	color: var(--footer-muted);
}

/* Lokala partner: the logo, its caption, the question, then the outlined button. */
.is-refresh .footer-partners {
	gap: 1.5rem;
}

.is-refresh .footer-partner-logo img {
	max-width: 100%;
	height: auto;
	display: block;
}

.is-refresh .footer-partner-caption {
	margin-top: 0.5rem;
}

.is-refresh .site-footer .footer-partner-prompt {
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.is-refresh .site-footer .footer-partner-link {
	margin: 0;
}

.is-refresh .site-footer .footer-partner-button .wp-block-button__link,
.is-refresh .site-footer .footer-partner-button .wp-block-button__link:hover {
	border: 1px solid var(--wp--preset--color--linen);
	border-radius: 0;
	text-decoration: none;
}

.is-refresh .site-footer .footer-partner-button .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--linen);
	white-space: nowrap;
}

.is-refresh .site-footer .footer-partner-button .wp-block-button__link:hover,
.is-refresh .site-footer .footer-partner-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--linen);
	color: var(--wp--preset--color--ink);
}

/* Bottom bar: copyright left, legal links right; one size, weight and colour; stacked on phones. */
.is-refresh .site-footer .footer-bottom .footer-legal {
	align-items: baseline;
}

.is-refresh .site-footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.is-refresh .site-footer .footer-bottom p,
.is-refresh .site-footer .footer-bottom .footer-legal .wp-block-navigation-item__content.wp-block-navigation-item__content,
.is-refresh .site-footer .footer-bottom .footer-cookie-settings .wp-block-button__link,
.is-refresh .site-footer .footer-bottom .footer-cookie-settings .wp-block-button__link:hover {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--footer-muted) !important;
}

.is-refresh .site-footer .footer-bottom .footer-legal .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.is-refresh .site-footer .footer-bottom .footer-cookie-settings .wp-block-button__link:hover {
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.is-refresh .site-footer .footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Section background system. Page ground: refresh-cream (the .is-refresh background and the
 * "bg" preset). Bands: refresh-sand (the former grey "surface" bands, the fact strip, the
 * Inspiration band and the shared "Besök oss i Malmö" band). Cards that stand on cream are
 * refresh-sand. One dark block at the end: the closing band, refresh-header, separated from
 * the footer by a 1px line. Hairlines only where two bands of the same colour meet.
 */
.is-refresh .has-refresh-paper-background-color {
	background-color: var(--wp--preset--color--cream) !important;
}

/* The fact strip: a full-width refresh-sand band (it sits in the content width, so the band is painted outwards). */
.is-refresh .refresh-facts {
	background-color: var(--wp--preset--color--sand-light);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--sand-light);
	clip-path: inset(0 -100vmax);
}

/* "Se materialen i Malmö": cream, with a 1px sand hairline on top (the band above is sand-light). */
.is-refresh .refresh-bottom:has(> .refresh-showroom) {
	background-color: var(--wp--preset--color--cream) !important;
	border-top: 1px solid var(--wp--preset--color--sand);
}

/*
 * The closing band: brown (the header colour), linen heading and text, a linen booking button with ink
 * text (wheat on hover) and a linen outlined phone button. It meets the ink footer directly.
 */
.is-refresh .refresh-bottom:has(> .refresh-closing),
.is-refresh .refresh-bottom.refresh-closing-split {
	background-color: var(--wp--preset--color--brown) !important;
	color: var(--wp--preset--color--linen);
}

/* Primary buttons on the band: linen fill, ink text; wheat on hover and focus. */
.is-refresh .refresh-closing .wp-block-button.is-style-primary-button .wp-block-button__link,
.is-refresh .refresh-closing-split__half .wp-block-button.is-style-primary-button .wp-block-button__link {
	background-color: var(--wp--preset--color--linen);
	border-color: var(--wp--preset--color--linen) !important;
	color: var(--wp--preset--color--ink);
}

.is-refresh .refresh-closing .wp-block-button.is-style-primary-button .wp-block-button__link:hover,
.is-refresh .refresh-closing .wp-block-button.is-style-primary-button .wp-block-button__link:focus-visible,
.is-refresh .refresh-closing-split__half .wp-block-button.is-style-primary-button .wp-block-button__link:hover,
.is-refresh .refresh-closing-split__half .wp-block-button.is-style-primary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--wheat);
	border-color: var(--wp--preset--color--wheat) !important;
	color: var(--wp--preset--color--ink);
}

.is-refresh .refresh-closing .refresh-closing__title,
.is-refresh .refresh-closing .refresh-closing__line {
	color: var(--wp--preset--color--linen);
}

/* The phone button: a 1px linen outline, linen text; linen fill and ink text on hover. */
.is-refresh .refresh-closing .wp-block-button.is-style-secondary-button .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--linen);
	color: var(--wp--preset--color--linen);
}

.is-refresh .refresh-closing .wp-block-button.is-style-secondary-button .wp-block-button__link:hover,
.is-refresh .refresh-closing .wp-block-button.is-style-secondary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--linen);
	border-color: var(--wp--preset--color--linen);
	color: var(--wp--preset--color--ink);
}

.is-refresh .refresh-closing .wp-block-button.is-style-primary-button .wp-block-button__link:focus-visible,
.is-refresh .refresh-closing .wp-block-button.is-style-secondary-button .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--linen);
}

/* Hairlines where two bands of the same colour meet: cream after cream on the home page, sand into the sand "Besök oss" band. */
.is-refresh .refresh-process + .wp-block-group {
	border-top: 1px solid var(--wp--preset--color--sand);
}

.is-refresh .wp-block-post-content > .has-surface-background-color:has(+ .refresh-visit-band),
.is-refresh .wp-block-post-content > .refresh-facts:has(+ .refresh-visit-band) {
	border-bottom: 1px solid var(--wp--preset--color--sand);
}

/*
 * Footer partner block: the hairline between the Roland caption and "Driver du ett lokalt
 * garderobsföretag?" (below). Nothing above the block any more: it is its own column.
 */
.is-refresh .site-footer .wp-block-column p.footer-partner-caption {
	margin-bottom: 0;
}

.is-refresh .site-footer .wp-block-column p.footer-partner-prompt.footer-partner-prompt {
	margin-top: 27px;
	padding-top: 28px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--linen) 12%, transparent);
}

/*
 * The language switcher is hidden in the header (desktop, phone bar and scrolled), not removed:
 * the block stays in parts/header-refresh.html and parts/header-refresh-en.html. To switch it
 * back on, delete this rule. The header's flex layout closes up over the hidden block.
 */
.is-refresh header .header-lang {
	display: none !important;
}

/* The "skip to content" link is added by core before the wrapper, outside .is-refresh, so the old accent mapping does not reach it. */
body:has(.is-refresh) .skip-link {
	color: var(--wp--preset--color--brown);
}

/*
 * Design system: type, buttons, corners, spacing. The palette and the base text styles are in
 * theme.json; this is what theme.json cannot say (breakpoints, :hover on variations, exceptions).
 */

/* Section padding: 72px (the spacing token in theme.json), 120px from 900px. */
@media (min-width: 900px) {
	:root:root,
	body:is(body) {
		--wp--preset--spacing--section: 120px;
	}
}

/* Headings: h1 36px / 48px from 768px / 60px from 1100px; h2 30px / 36px from 768px. */
@media (min-width: 768px) {
	.is-refresh h1 {
		font-size: 48px;
	}

	.is-refresh h2 {
		font-size: 36px;
	}
}

@media (min-width: 1100px) {
	.is-refresh h1 {
		font-size: 60px;
	}
}

/* Secondary text (card text, captions, descriptions): 14px, muted, line height 1.6. */
.is-refresh :is(figcaption, .wp-element-caption, .refresh-hero__line),
.is-article .refresh-card__date,
.is-article .refresh-card__line,
.is-article .refresh-card__line > p {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

/*
 * Buttons. Every CTA: rust fill, linen text, 14px, weight 600, 12px 24px, square corners, deep rust
 * on hover (the fill and hover colours come from theme.json and the rules above). The text-link
 * buttons (.refresh-textlink), the round scroll-to-top button, the cookie link and the map's
 * "click to use the map" overlay are not CTAs.
 */
.is-refresh .wp-block-button:not(.scroll-to-top, .refresh-textlink, .footer-cookie-settings, .map-band-activate) .wp-block-button__link,
.is-refresh .frm_button_submit {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	border-radius: 0;
}

@media (min-width: 1170px) {
	.is-refresh header.wp-block-group .header-bar .nav-link-cta .wp-block-navigation-item__content {
		padding: 12px 24px;
	}
}

/*
 * Outline buttons: transparent, 1px ink border, ink text; ink fill and linen text on hover. On the
 * dark footer and the brown closing band ink would vanish, so there they are linen outlines that fill
 * linen with ink text on hover.
 */
.is-refresh {
	--outline-line: var(--wp--preset--color--ink);
	--outline-hover-bg: var(--wp--preset--color--ink);
	--outline-hover-text: var(--wp--preset--color--linen);
}

.is-refresh :is(.site-footer, .refresh-bottom:has(> .refresh-closing), .refresh-closing-split__half, .is-style-dark-section) {
	--outline-line: var(--wp--preset--color--linen);
	--outline-hover-bg: var(--wp--preset--color--linen);
	--outline-hover-text: var(--wp--preset--color--ink);
}

.is-refresh .wp-block-button.is-style-secondary-button:not(.refresh-textlink) .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--outline-line);
	color: var(--outline-line);
}

.is-refresh .wp-block-button.is-style-secondary-button:not(.refresh-textlink) .wp-block-button__link:hover,
.is-refresh .wp-block-button.is-style-secondary-button:not(.refresh-textlink) .wp-block-button__link:focus-visible {
	background-color: var(--outline-hover-bg);
	border-color: var(--outline-hover-bg);
	color: var(--outline-hover-text);
}

/* Links: no underline at rest; hover is brown-dark on light backgrounds and an underline only on dark ones. */
.is-refresh a.is-inline-link:hover {
	text-decoration: none;
}

.is-refresh :is(.is-style-dark-section, .site-footer, .refresh-closing) a:not(.wp-block-button__link):hover {
	text-decoration: underline;
}

/* Corners: square on images, cards, inputs, embeds and buttons. */
.is-refresh :is(input:not([type="radio"], [type="submit"], [type="button"]), textarea, select, iframe, .wp-block-embed, .map-band, .refresh-quote, .refresh-product, .refresh-card, .refresh-card__image img) {
	border-radius: 0;
}

/* Page gutter on phones: the same clamp as everywhere else (the header had its own narrower one). */
@media (max-width: 599.98px) {
	.is-refresh header.wp-block-group.has-global-padding {
		padding-left: var(--wp--preset--spacing--gutter);
		padding-right: var(--wp--preset--spacing--gutter);
	}
}

/* The map's "click to use the map" overlay: a veil of ink (theme.css had the old #111 at 15% and 25%). */
.is-refresh .map-band-activate .wp-block-button__link {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent);
}

.is-refresh .map-band-activate .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent);
}

/* The booking form's submit button: the same 14px as every other button. */
.is-refresh :is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit {
	font-size: 14px;
}

/* "Boka måttagning": square corners at every width and in every state. */
.is-refresh header .nav-link-cta .wp-block-navigation-item__content,
.is-refresh header .nav-link-cta .wp-block-navigation-item__content:hover,
.is-refresh header .nav-link-cta .wp-block-navigation-item__content:focus-visible,
.is-refresh header .nav-link-cta .wp-block-navigation-item__content:active,
.is-refresh header .nav-link-cta.current-menu-item .wp-block-navigation-item__content {
	border-radius: 0 !important;
}

/* The booking form's consent checkbox: the form plugin's own rule rounds it with !important; square like the other inputs. */
.is-refresh input[type="checkbox"],
.is-refresh .with_frm_style .frm_checkbox input[type="checkbox"] {
	border-radius: 0 !important;
}

/*
 * Homepage design system: the trust row, review cards, carousel arrows, card titles. Hairlines are
 * 1px sand and there are no shadows.
 */

/* Trust row: titles 14px weight 700; text 14px ink at 70%. */
.is-refresh .refresh-fact__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.is-refresh .refresh-fact__line {
	font-size: 14px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
}

/* Carousel arrows: 40px square, 1px sand border, cream fill; ink fill and a linen arrow on hover and focus. */
.is-refresh .is-swipe-row-next {
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--sand);
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	box-shadow: none;
}

.is-refresh .is-swipe-row-next:hover,
.is-refresh .is-swipe-row-next:focus-visible {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--linen);
}

/* The scroll-to-top button and the cookie icon share the arrows' look (48px, no shadow). */
.is-refresh .scroll-to-top .wp-block-button__link,
.is-refresh #cmplz-manage-consent .cmplz-manage-consent {
	border: 1px solid var(--wp--preset--color--sand) !important;
	background-color: var(--wp--preset--color--cream) !important;
	box-shadow: none !important;
}

.is-refresh .scroll-to-top .wp-block-button__link:hover,
.is-refresh .scroll-to-top .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--linen);
}

/* Header dropdown panels: no shadow (a sand-hairline edge is enough). */
.is-refresh header.wp-block-group .header-bar .header-pages .wp-block-navigation__submenu-container {
	box-shadow: none !important;
}

/* Card titles under images: 16px weight 600, 16px below the image; hover is brown-dark like other links. */
.is-refresh .tricky-tile__label {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.is-refresh .tricky-tile:hover .tricky-tile__label a,
.is-refresh .tricky-tile:focus-within .tricky-tile__label a {
	color: var(--wp--preset--color--brown-dark);
}

/*
 * Section labels (paragraph with the class "eyebrow", above a section heading): JetBrains Mono 11px,
 * uppercase, letter-spacing 0.2em, muted; linen at 70% on dark backgrounds; 12px above the heading.
 */
.is-refresh .eyebrow {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.is-refresh :is(.is-style-dark-section, .site-footer, .refresh-bottom:has(> .refresh-closing)) .eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--linen) 70%, transparent);
}

/* The heading under a label sits exactly 12px below it (the label's own margin). */
.is-refresh .eyebrow + :is(h1, h2, h3, .refresh-headrow) {
	margin-top: 0;
}

.is-refresh .refresh-process__inner > .eyebrow {
	grid-area: eyebrow;
}

/*
 * Besök oss map: square, a 1px sand border, always grayscale (theme.css only greyed it on devices
 * that can hover, and lifted the grey on hover; both are gone). The border is on the wrapper so it
 * frames the live map and Complianz's consent placeholder alike.
 */
.is-refresh .map-band-wrap {
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 0;
}

.is-refresh .map-band-embed,
.is-refresh .map-band .cmplz-blocked-content-container,
.is-refresh .map-band-wrap:hover .map-band-embed,
.is-refresh .map-band-wrap:focus-within .map-band-embed,
.is-refresh .map-band-wrap:hover .cmplz-blocked-content-container,
.is-refresh .map-band-wrap:focus-within .cmplz-blocked-content-container {
	border-radius: 0;
	filter: grayscale(1) contrast(0.9);
}

/*
 * The English home's "See the materials in Malmö" is the same section as the Swedish "Se materialen i
 * Malmö" but was built as a Dark section: it follows the Swedish one (cream, a 1px sand hairline on
 * top, ink text and the standard outline button). Scoped to a Dark section that holds a media-and-text
 * block, so any other Dark section stays dark.
 */
.is-refresh .is-style-dark-section:has(.wp-block-media-text) {
	--outline-line: var(--wp--preset--color--ink);
	--outline-hover-bg: var(--wp--preset--color--ink);
	--outline-hover-text: var(--wp--preset--color--linen);
	background-color: var(--wp--preset--color--cream);
	border-top: 1px solid var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
}

.is-refresh .is-style-dark-section:has(.wp-block-media-text) :is(h1, h2, h3, p, li, strong, b) {
	color: var(--wp--preset--color--ink);
}

.is-refresh .is-style-dark-section:has(.wp-block-media-text) a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--brown);
}

.is-refresh .is-style-dark-section:has(.wp-block-media-text) a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--brown-dark);
	text-decoration: none;
}

/*
 * Map placeholder, shown until the visitor gives marketing consent (Complianz blocks the Google map
 * until then; nothing in Complianz is changed). Square, sand-light with the wrapper's 1px sand border,
 * the same height as the live map so the page does not jump when it loads. The grey stock picture is
 * gone. Complianz's own button (the one that grants consent) is restyled as an outline button and
 * relabelled "Visa karta" / "Show map" with CSS; its real text stays in the page for screen readers.
 * Under it a line says what happens, and the "Öppna i Google Maps" link (markup in the Besök oss
 * block) opens the map in Google without any consent. Once the map has loaded (.is-map-live) the
 * link is hidden.
 */
.is-refresh .map-band .cmplz-blocked-content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 300px;
	padding: 24px 24px 64px;
	box-sizing: border-box;
	text-align: center;
	background-image: none !important;
	background-color: var(--wp--preset--color--sand-light);
}

@media (min-width: 48rem) {
	.is-refresh .map-band .cmplz-blocked-content-container {
		height: 360px;
	}
}

.is-refresh .map-band .cmplz-blocked-content-container::before {
	content: "Kartan visas när du har godkänt marknadsföringscookies.";
	order: 1;
	max-width: 24em;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

html:lang(en) .is-refresh .map-band .cmplz-blocked-content-container::before {
	content: "The map is shown once you have accepted marketing cookies.";
}

.is-refresh .map-band .cmplz-blocked-content-notice {
	order: 2;
	/* Complianz centres the button with inline top/left/transform; !important puts it in the flow. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: auto;
	max-width: none;
	padding: 12px 24px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background-color: transparent;
	font-size: 0;
	line-height: 1.5;
	cursor: pointer;
}

.is-refresh .map-band .cmplz-blocked-content-notice::before {
	content: "Visa karta";
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

html:lang(en) .is-refresh .map-band .cmplz-blocked-content-notice::before {
	content: "Show map";
}

.is-refresh .map-band .cmplz-blocked-content-notice:hover,
.is-refresh .map-band .cmplz-blocked-content-notice:focus-visible {
	background-color: var(--wp--preset--color--ink);
}

.is-refresh .map-band .cmplz-blocked-content-notice:hover::before,
.is-refresh .map-band .cmplz-blocked-content-notice:focus-visible::before {
	color: var(--wp--preset--color--linen);
}

/* The "Open in Google Maps" link: at the bottom of the placeholder, hidden once the live map shows. */
.is-refresh .map-band-wrap .map-band-fallback {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 2;
	margin: 0;
	text-align: center;
	font-size: 14px;
}

.is-refresh .map-band-wrap.is-map-live .map-band-fallback {
	display: none;
}

/*
 * The empty placeholder keeps its sand-light colour (no grayscale: there is no map in it), and the
 * blocked iframe inside it is taken out of the flow so it takes no room. It must keep a size (not
 * display:none): Complianz only loads an iframe that has one.
 */
.is-refresh .map-band .cmplz-blocked-content-container,
.is-refresh .map-band-wrap:hover .cmplz-blocked-content-container,
.is-refresh .map-band-wrap:focus-within .cmplz-blocked-content-container {
	filter: none;
}

.is-refresh .map-band .cmplz-blocked-content-container > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
}

/*
 * Inner pages and articles: markers are brown, buttons are rust.
 */

/* The open FAQ item's number. */
.is-refresh .faq-item[open] summary::before {
	color: var(--wp--preset--color--brown);
}

/* Project filters (Våra projekt): square buttons with a 1px sand border; the selected one and hover fill ink. */
.is-refresh .project-filters a {
	border-color: var(--wp--preset--color--sand);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
}

.is-refresh .project-filters a:hover,
.is-refresh .project-filters a:focus-visible,
.is-refresh .wp-block-post-content:has(#bedroom:target) .project-filters a[href="#bedroom"],
.is-refresh .wp-block-post-content:has(#sloped-ceiling:target) .project-filters a[href="#sloped-ceiling"],
.is-refresh .wp-block-post-content:has(#under-stairs:target) .project-filters a[href="#under-stairs"],
.is-refresh .wp-block-post-content:has(#stairwell:target) .project-filters a[href="#stairwell"],
.is-refresh .wp-block-post-content:has(#room-divider:target) .project-filters a[href="#room-divider"],
.is-refresh .wp-block-post-content:has(#hall:target) .project-filters a[href="#hall"],
.is-refresh .wp-block-post-content:has(#walk-in:target) .project-filters a[href="#walk-in"],
.is-refresh .wp-block-post-content:has(#showroom:target) .project-filters a[href="#showroom"] {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--linen);
}

/* The scroll-to-top arrow is a marker: brown (linen on ink on hover, set above). */
.is-refresh .scroll-to-top .wp-block-button__link {
	color: var(--wp--preset--color--brown);
}

/*
 * The cookie-settings icon (Complianz's reopen tab, added to the body outside the page wrapper,
 * so it needs its own selectors): the same look as the scroll-to-top button, 48px, no shadow, a
 * 1px sand border, a brown icon, ink with a linen icon on hover. Complianz injects its CSS at
 * runtime, hence !important.
 */
#cmplz-manage-consent .cmplz-manage-consent {
	border: 1px solid var(--wp--preset--color--sand) !important;
	background-color: var(--wp--preset--color--cream) !important;
	box-shadow: none !important;
}

#cmplz-manage-consent .cmplz-manage-consent::before {
	background-color: var(--wp--preset--color--brown);
}

#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	border-color: var(--wp--preset--color--ink) !important;
	background-color: var(--wp--preset--color--ink) !important;
}

#cmplz-manage-consent .cmplz-manage-consent:hover::before,
#cmplz-manage-consent .cmplz-manage-consent:focus::before,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible::before {
	background-color: var(--wp--preset--color--linen);
}

/* The booking page's call button: linen text on rust like every other button (theme.css had pure white). */
.is-refresh .wp-block-button.hero-call-button .wp-block-button__link,
.is-refresh .wp-block-button.hero-call-button .wp-block-button__link:hover,
.is-refresh .wp-block-button.hero-call-button .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--linen);
}

/*
 * Slider arrows (swipe-row.js sets has-overflow on .is-swipe-row-wrap): one arrow, on the right, one card
 * per tap and back to the first card after the last; it is shown wherever the row scrolls and hidden
 * where the whole row fits.
 */
.is-refresh .is-swipe-row-wrap.is-swipe-ready:not(.has-overflow) .is-swipe-row-hint {
	display: none;
}

/*
 * Photo hover: a linked photo scales to 1.04 inside its frame (the frame clips it and keeps its size),
 * 600ms ease-out in, 400ms out; the card title goes brown-dark at the same time. The same on keyboard
 * focus. Only where there is a real hover, and not with reduced motion. Applies to the hero tiles (the
 * label link covers the whole tile), the project tiles (Måttanpassat, Våra projekt) and the article
 * cards (/artiklar/, Läs vidare). Photos that are not links are untouched.
 */
.tricky-tile .wp-block-image,
.refresh-card__image,
.refresh-tile__photo {
	overflow: hidden;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tricky-tile .wp-block-image a img,
	.refresh-card__image a img,
	.refresh-tile__photo img {
		transition: transform 400ms ease-out;
	}

	.tricky-tile__label a,
	.refresh-card__title a {
		transition: color 400ms ease-out;
	}

	.tricky-tile:is(:hover, :has(:focus-visible)) .wp-block-image a img,
	.refresh-card:is(:has(.refresh-card__image a:is(:hover, :focus-visible)), :has(.refresh-card__title a:is(:hover, :focus-visible))) .refresh-card__image img,
	.refresh-tile:is(:hover, :has(:focus-visible)) .refresh-tile__photo img {
		transform: scale(1.04);
		transition-duration: 600ms;
	}

	.tricky-tile:is(:hover, :has(:focus-visible)) .tricky-tile__label a,
	.refresh-card:is(:has(.refresh-card__image a:is(:hover, :focus-visible)), :has(.refresh-card__title a:is(:hover, :focus-visible))) .refresh-card__title a {
		color: var(--wp--preset--color--brown-dark);
		transition-duration: 600ms;
	}
}

/*
 * Hero card logo: the full width of the card's content area, the same as the heading and text below it,
 * height in proportion (the logo is an SVG, so it stays sharp at any width). The Image block sets a fixed
 * width inline, hence !important.
 */
.is-refresh .refresh-hero__logo img {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
}

/*
 * Hero block hover: the whole block (background photo and card) is one link to the article, so hovering
 * or focusing it scales the background photo to 1.04 inside its frame (600ms ease-out in, 400ms out; the
 * frame clips it, the logo does not move) while the card's link goes brown-dark. Hover devices only,
 * not with reduced motion.
 */
.is-refresh .refresh-hero__photo {
	overflow: hidden;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.is-refresh .refresh-hero__photo img {
		transition: transform 400ms ease-out;
	}

	.is-refresh .refresh-hero__news a {
		transition: color 400ms ease-out;
	}

	.is-refresh .refresh-hero__main:is(:hover, :has(:focus-visible)) .refresh-hero__photo img {
		transform: scale(1.04);
		transition-duration: 600ms;
	}

	.is-refresh .refresh-hero__main:is(:hover, :has(:focus-visible)) .refresh-hero__news a {
		transition-duration: 600ms;
	}
}

/*
 * More room on both sides of "Boka måttagning" on the desktop bar: side margins that grow with the
 * width, none at 1200px and 16px each side from 1360px (on top of the 12px gaps), so the English bar
 * still fits on one row and keeps its room next to the logo.
 */
@media (min-width: 1170px) {
	.is-refresh header .header-bar .header-actions .nav-link-cta {
		margin-inline: clamp(0px, calc((100vw - 1200px) * 0.1), 16px);
	}
}

/*
 * Cookie banner (Complianz). It sits outside the page wrapper, so these selectors start at its own
 * container, and Complianz injects its CSS at runtime, hence !important. Only CSS: the Complianz
 * settings are not touched. The banner follows the site: a linen panel with a 1px sand edge, square,
 * no shadow, Archivo; "Acceptera" is the primary button (rust, deep rust on hover); the other buttons
 * are ink outlines that fill with ink on hover; the toggles are brown.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	background-color: var(--wp--preset--color--linen) !important;
	border: 1px solid var(--wp--preset--color--sand) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner :is(.cmplz-title, .cmplz-message, .cmplz-description, .cmplz-category-title, .cmplz-close) {
	color: var(--wp--preset--color--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link {
	color: var(--wp--preset--color--brown) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link:hover {
	color: var(--wp--preset--color--brown-dark) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background-color: var(--wp--preset--color--rust) !important;
	border-color: var(--wp--preset--color--rust) !important;
	color: var(--wp--preset--color--linen) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--deep-rust) !important;
	border-color: var(--wp--preset--color--deep-rust) !important;
	color: var(--wp--preset--color--linen) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:not(.cmplz-accept) {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:not(.cmplz-accept):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--linen) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

#cmplz-cookiebanner-container .cmplz-category-toggle svg {
	fill: var(--wp--preset--color--brown) !important;
}

#cmplz-cookiebanner-container input:checked + .cmplz-slider {
	background-color: var(--wp--preset--color--brown) !important;
}

#cmplz-cookiebanner-container .cmplz-always-active,
#cmplz-cookiebanner-container .cmplz-banner-checkbox .cmplz-always-active {
	color: var(--wp--preset--color--forest) !important;
}

/*
 * Mobile layout (up to 781px, WordPress's own mobile breakpoint; from 782px nothing changes).
 * Trust row: two by two, left-aligned, 24px apart, a sand hairline between the columns and between the two rows.
 * Hero: the Roland card below the photo (white, 20px padding, no border, square), then the three link
 * cards as a list: 1px sand hairlines between the rows, a 72px square thumbnail, the label 16px/600
 * ink and the arrow at the far right; the whole row is the link (as the tiles' labels are stretched).
 * Floating buttons: back-to-top and the cookie settings button, both 44px squares, 12px from the bottom corners.
 */
@media (max-width: 781px) {
	.is-refresh .refresh-facts__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 24px;
		background-image:
			linear-gradient(var(--wp--preset--color--sand), var(--wp--preset--color--sand)),
			linear-gradient(var(--wp--preset--color--sand), var(--wp--preset--color--sand));
		background-repeat: no-repeat;
		background-size: 1px calc(60% + 1.8rem), 100% 1px;
		background-position: 50% 50%, 0 50%;
	}

	.is-refresh .refresh-fact {
		text-align: left;
	}

	.is-refresh .refresh-fact + .refresh-fact::before {
		display: none;
	}

	.is-refresh .refresh-hero {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		padding-block: 0.75rem;
	}

	.is-refresh .refresh-hero__main {
		display: block;
		min-height: 0;
		padding: 0;
		isolation: auto;
		overflow: visible;
	}

	.is-refresh .refresh-hero__photo {
		position: relative;
		inset: auto;
		z-index: auto;
		aspect-ratio: 16 / 10;
	}

	.is-refresh .refresh-hero__photo img {
		position: absolute;
		inset: 0;
	}

	.is-refresh .refresh-hero__card,
	.is-refresh .refresh-hero__card.has-refresh-paper-background-color {
		position: static;
		box-sizing: border-box;
		width: auto;
		padding: 20px;
		border: 0;
		border-radius: 0;
		background-color: var(--wp--preset--color--white) !important;
	}

	.is-refresh .refresh-hero__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 12px;
	}

	.is-refresh .refresh-hero__tiles > .refresh-tile:first-child {
		grid-column: 1 / -1;
		aspect-ratio: 4 / 3;
	}

	.is-refresh .refresh-hero__tiles > .refresh-tile:not(:first-child) {
		aspect-ratio: 4 / 5;
	}

	/* The tiles look as on desktop: the photo fills the tile, the label sits over its bottom left. */
	.is-refresh .refresh-tile__label {
		max-width: calc(100% - 24px);
		margin: 12px;
		font-size: 15px;
		line-height: 1.3;
	}

	/* The two floating buttons are the same size on phones: 44px squares, 12px from the screen edges. */
	#cmplz-manage-consent .cmplz-manage-consent {
		bottom: 12px !important;
		left: 12px !important;
		width: 44px !important;
		height: 44px !important;
	}

	.scroll-to-top {
		right: 12px;
		bottom: 12px;
	}

	.is-refresh .scroll-to-top .wp-block-button__link {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
	}
}

/*
 * Home page image-and-text sections (the showroom, and on the English home also "From sketch to finished
 * wardrobe"; the Swedish "Från skiss till färdig garderob" is its own grid):
 *  - top and bottom padding are the section padding (72px, 120px from 900px); the showroom's 1px hairline
 *    on top counts as part of its top padding;
 *  - two equal columns with a 64px gap: the image starts at the left page gutter, the text column ends at
 *    the right page gutter, its paragraphs at most 60 characters wide;
 *  - the text column is centred against the image;
 *  - below 782px: the image on top, the text below, 16px page gutters on both sides.
 */
body.home .is-refresh .refresh-showroom {
	padding-top: calc(var(--wp--preset--spacing--section) - 1px);
	padding-bottom: var(--wp--preset--spacing--section);
}

body.home .is-refresh .is-style-dark-section:has(.wp-block-media-text) {
	padding-top: calc(var(--wp--preset--spacing--section) - 1px) !important;
}

body.home .is-refresh .wp-block-media-text > .wp-block-media-text__content {
	min-width: 0;
	padding: 0 !important;
}

body.home .is-refresh .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

body.home .is-refresh .wp-block-media-text__content > :last-child {
	margin-bottom: 0;
}

body.home .is-refresh .wp-block-media-text__content > p {
	max-width: 60ch;
}

@media (min-width: 782px) {
	body.home .is-refresh .wp-block-media-text {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		column-gap: 64px;
		align-items: center;
	}

	body.home .is-refresh .wp-block-media-text > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
		align-self: stretch;
	}

	body.home .is-refresh .wp-block-media-text > .wp-block-media-text__content {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	body.home .is-refresh .refresh-process__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 64px;
	}

	body.home .is-refresh .refresh-process__text {
		max-width: 60ch;
	}
}

@media (max-width: 781.98px) {
	body.home .is-refresh .wp-block-media-text {
		display: grid;
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 1.5rem;
	}

	body.home .is-refresh .wp-block-media-text > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	body.home .is-refresh .wp-block-media-text > .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
	}

	body.home .is-refresh .refresh-process__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"eyebrow"
			"title"
			"photo"
			"text"
			"link";
		row-gap: 1.5rem;
	}

	body.home .is-refresh .refresh-process__inner > .eyebrow {
		margin-bottom: -12px;
	}

	body.home .is-refresh .refresh-process__title,
	body.home .is-refresh .refresh-process__text {
		margin: 0;
	}

	body.home .is-refresh .refresh-process__photo {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

/*
 * Mobile header tap targets (the bar with the burger, up to 1169px): the burger, the phone icon and the
 * booking button are each at least 44px high (the burger and the phone icon 44px square), with 8px
 * between them. On phones the wordmark gives way instead: it narrows (170px at most) to leave the
 * room, so the row still fits at 320px.
 */
@media (max-width: 1169.98px) {
	.is-refresh header.wp-block-group .header-bar .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.is-refresh header.wp-block-group .header-bar .nav-link-cta .wp-block-navigation-item__content {
		min-height: 44px;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 599.98px) {
	.is-refresh header.wp-block-group .header-bar {
		column-gap: 8px;
	}

	.is-refresh header.wp-block-group .header-bar .header-actions .wp-block-navigation__container {
		column-gap: 8px;
	}

	.is-refresh header .header-bar .nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content {
		min-width: 44px;
		min-height: 44px;
	}

	.is-refresh header .header-logo {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 170px;
	}

	.is-refresh header .header-logo--mark {
		width: 100%;
	}
}

/*
 * Hero card heading: the longer heading ("Sedan 1987 har vi byggt …") is stepped down so it stays within
 * four lines in the card: 23px from 1100px (it was up to 32px), 22px from 782px to 1099px, where the
 * card sits on a narrower photo. The card is 472px wide from 1100px (it was 400px) and 448px from 782px, so
 * the longest word pair, "måttanpassade skjutdörrsgarderober", fits on one line. On phones the card is full width and the size is
 * unchanged.
 */
@media (min-width: 782px) {
	.is-refresh h1.refresh-hero__title {
		font-size: 22px;
	}

	/* A little wider card, so "måttanpassade skjutdörrsgarderober" stays on one line (the photo behind is unchanged). */
	.is-refresh .refresh-hero__card {
		width: min(28rem, 100%);
	}
}

@media (min-width: 1100px) {
	.is-refresh h1.refresh-hero__title {
		font-size: 23px;
	}

	.is-refresh .refresh-hero__card {
		width: min(29.5rem, 100%);
	}
}

/*
 * Våra projekt (/vara-projekt/ and /en/our-work/): every category has the same photos in the same shape,
 * every photo 3:4, cropped to fill, square. From 782px they sit in a grid (three columns from 900px with a
 * 24px gap, two below that with 12px); on phones each category is a horizontal slider, as on the live
 * site: one card at a time (72% of the width, the next one peeking in), one arrow on the right that goes
 * back to the first card after the last. Captions 14px (13px on phones), muted, 12px (8px) under the
 * photo, two lines at most. Categories are one section padding apart (72px, 120px from 900px) with a
 * 1px sand hairline between them. The photos' own inline sizes are overridden here, so the page content
 * stays as it is.
 */
body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .is-swipe-row > .wp-block-image {
	grid-column: auto !important;
	width: auto !important;
	max-width: none;
	margin: 0;
}

body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 4 !important;
	object-fit: cover !important;
	border-radius: 0;
}

body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .wp-element-caption {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

/* Categories: all spacing is padding, so every gap is the same; a sand hairline sits between two categories. */
body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content > .wp-block-group {
	margin-block: 0;
}

/* The first and last element of a category carry no margin of their own, so the padding is the whole space. */
body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content > .wp-block-group > :first-child {
	margin-top: 0;
}

body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content > .wp-block-group > :last-child {
	margin-bottom: 0;
}

body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content > .wp-block-separator {
	width: 100%;
	max-width: none;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--sand);
	background: none;
	opacity: 1;
}

body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content > .wp-block-separator + .wp-block-group {
	padding-top: var(--wp--preset--spacing--section);
}

/* From 782px: the grid, and no slider arrow. */
@media (min-width: 782px) {
	body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .is-swipe-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		align-items: start;
		overflow: visible;
		scroll-snap-type: none;
	}

	body:is(.page-id-420, .page-id-121) .is-refresh .is-swipe-row-wrap .is-swipe-row-hint {
		display: none;
	}
}

@media (min-width: 900px) {
	body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .is-swipe-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}

/* Phones: a slider per category (the shared slider script and arrow); the arrow sits on the first photo. */
@media (max-width: 781.98px) {
	body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .is-swipe-row {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .is-swipe-row > .wp-block-image {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}

	body:is(.page-id-420, .page-id-121) .is-refresh .wp-block-post-content .is-swipe-row-wrap .wp-element-caption {
		margin-top: 8px;
		font-size: 13px;
	}

	body:is(.page-id-420, .page-id-121) .is-refresh .is-swipe-row-wrap .is-swipe-row-hint {
		display: flex;
		aspect-ratio: 3 / 4;
	}
}

/* The category buttons: 44px high on phones, in rows that wrap. */
@media (max-width: 781.98px) {
	body:is(.page-id-420, .page-id-121) .is-refresh .project-filters a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		box-sizing: border-box;
	}
}

/*
 * Om Garderobia (/om-oss/, page 415). The page content has the same words as before; this is its layout:
 *  - hero: eyebrow, h1 and intro (20px/1.5) on the left, one 4:3 photo on the right from 900px (below the text on phones);
 *  - two image-and-text rows, alternating sides, two equal columns with a 64px gap, text centred against
 *    the photo, 17px/1.6 body text at most 60 characters wide;
 *  - the Roland System card: white, 40px padding, square, one text column wide;
 *  - "Det här får du": the three points in three columns from 782px, numbered 01 to 03 (JetBrains Mono
 *    14px, muted) above the text (17px, weight 600), a sand hairline above the row, no bullets;
 *  - one brown band for the partner message (linen text, linen button with ink text, wheat on hover);
 *  - the space between two sections is one section padding (72px, 120px from 900px), never two.
 */
body.page-id-415 .is-refresh .wp-block-post-content > .om-hero,
body.page-id-415 .is-refresh .wp-block-post-content > .om-section,
body.page-id-415 .is-refresh .wp-block-post-content > .om-band {
	margin-block: 0;
}

body.page-id-415 .is-refresh .wp-block-post-content > * + .om-section,
body.page-id-415 .is-refresh .wp-block-post-content > * + .om-band {
	margin-top: var(--wp--preset--spacing--section);
}

body.page-id-415 .is-refresh :is(.om-hero__text, .om-row__text, .om-card, .om-get, .om-band) > * {
	margin-block: 0;
	margin-left: 0 !important;
	margin-right: auto !important;
}

body.page-id-415 .is-refresh :is(.om-hero__text, .om-row__text, .om-card, .om-get, .om-band) .eyebrow {
	margin-bottom: 12px;
}

body.page-id-415 .is-refresh :is(.om-row__text, .om-card, .om-get, .om-band) h2 {
	margin-bottom: 20px;
}

body.page-id-415 .is-refresh :is(.om-row__text, .om-card, .om-band) p:not(.eyebrow) {
	max-width: 60ch;
	font-size: 17px;
	line-height: 1.6;
}

body.page-id-415 .is-refresh :is(.om-row__text, .om-card, .om-band) p:not(.eyebrow) + p {
	margin-top: 16px;
}

/* Hero */
body.page-id-415 .is-refresh .om-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

body.page-id-415 .is-refresh .om-hero h1 {
	margin-bottom: 24px;
}

body.page-id-415 .is-refresh .om-hero__intro {
	max-width: 60ch;
	font-size: 20px !important;
	line-height: 1.5;
}

/* Photos: 4:3, cropped to fill, square. */
body.page-id-415 .is-refresh .om-hero__photo,
body.page-id-415 .is-refresh .om-row__photo,
body.page-id-415 .is-refresh .om-split__photo {
	margin: 0;
}

body.page-id-415 .is-refresh .om-hero__photo img,
body.page-id-415 .is-refresh .om-row__photo img,
body.page-id-415 .is-refresh .om-split__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

body.page-id-415 .is-refresh .om-hero__photo img {
	object-position: 50% 30%;
}

body.page-id-415 .is-refresh .om-row__photo img.wp-image-386 {
	object-position: 50% 55%;
}

/* Tobbe and Joakim: a portrait photo cropped to 4:3, both faces and the door in frame. */
body.page-id-415 .is-refresh .om-row__photo img.wp-image-957 {
	object-position: 50% 8%;
}

/* Rows */
body.page-id-415 .is-refresh .om-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

/* The Roland System card, with the trucks photo beside it from 900px (below it on phones). */
body.page-id-415 .is-refresh .om-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

body.page-id-415 .is-refresh .om-card {
	box-sizing: border-box;
	padding: 40px;
	border-radius: 0;
	box-shadow: none;
}

/* Det här får du */
body.page-id-415 .is-refresh .om-get__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 32px 0 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--wp--preset--color--sand);
	list-style: none;
	counter-reset: om-point;
}

body.page-id-415 .is-refresh .om-get__list li {
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	counter-increment: om-point;
}

body.page-id-415 .is-refresh .om-get__list li::before {
	content: counter(om-point, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* The partner band */
body.page-id-415 .is-refresh .om-band {
	padding-block: var(--wp--preset--spacing--section);
	color: var(--wp--preset--color--linen);
}

body.page-id-415 .is-refresh .om-band :is(h2, h3, p) {
	color: var(--wp--preset--color--linen);
}

body.page-id-415 .is-refresh .om-band .eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--linen) 70%, transparent);
}

body.page-id-415 .is-refresh .om-band .om-band__sub {
	margin: 40px 0 12px;
	font-size: 22px;
	line-height: 1.3;
}

body.page-id-415 .is-refresh .om-band .wp-block-buttons {
	margin-top: 24px;
}

body.page-id-415 .is-refresh .om-band .wp-block-button .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--linen) !important;
	border-radius: 0 !important;
	background-color: var(--wp--preset--color--linen) !important;
	color: var(--wp--preset--color--ink) !important;
}

body.page-id-415 .is-refresh .om-band .wp-block-button .wp-block-button__link:hover,
body.page-id-415 .is-refresh .om-band .wp-block-button .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--wheat) !important;
	background-color: var(--wp--preset--color--wheat) !important;
	color: var(--wp--preset--color--ink) !important;
}

@media (min-width: 782px) {
	body.page-id-415 .is-refresh .om-get__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px;
	}
}

@media (min-width: 900px) {
	body.page-id-415 .is-refresh .om-hero,
	body.page-id-415 .is-refresh .om-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 64px;
	}

	body.page-id-415 .is-refresh .om-row--flip .om-row__text {
		order: -1;
	}

	body.page-id-415 .is-refresh .om-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 64px;
	}
}

/*
 * A row of two buttons (a primary button and a second button or text link) that sit side by side, vertically
 * centred, 24px apart; when they do not fit in one row the second wraps below the first, 16px under it.
 * Overrides the stacked, full-width phone layout that two buttons otherwise get.
 */
.is-refresh .wp-block-buttons.refresh-button-row:has(> .wp-block-button.is-style-primary-button + .wp-block-button.is-style-secondary-button) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.is-refresh .wp-block-buttons.refresh-button-row:has(> .wp-block-button.is-style-primary-button + .wp-block-button.is-style-secondary-button) > .wp-block-button {
	width: auto;
	margin: 0;
}

/*
 * Om Garderobia, new order: the "Det här får du" row is followed by the showroom block, then the brown
 * partner band. The band has two columns from 900px (64px apart, tops aligned): the partner text, and the
 * Roland System card (linen, ink text, brown link) inside it; on phones the text first, the card below.
 */
body.page-id-415 .is-refresh .wp-block-post-content > .om-get + .refresh-bottom {
	margin-top: var(--wp--preset--spacing--section);
}

body.page-id-415 .is-refresh .wp-block-post-content > .refresh-bottom + .om-band {
	margin-top: 0;
}

body.page-id-415 .is-refresh .om-band__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

body.page-id-415 .is-refresh .om-band__main {
	min-width: 0;
}

body.page-id-415 .is-refresh .om-band .om-card--linen {
	width: auto;
	background-color: var(--wp--preset--color--linen);
	color: var(--wp--preset--color--ink);
}

body.page-id-415 .is-refresh .om-band .om-card--linen :is(h2, p) {
	color: var(--wp--preset--color--ink);
}

body.page-id-415 .is-refresh .om-band .om-card--linen .eyebrow {
	color: var(--wp--preset--color--muted);
}

body.page-id-415 .is-refresh .om-band .om-card--linen a {
	color: var(--wp--preset--color--brown);
}

body.page-id-415 .is-refresh .om-band .om-card--linen a:hover {
	color: var(--wp--preset--color--brown-dark);
}

@media (min-width: 900px) {
	body.page-id-415 .is-refresh .om-band__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 64px;
	}
}

/*
 * Om Garderobia: the partner line sits 24px under the paragraph above it (the h3 is gone); below 900px the
 * text comes before the photo in every image-and-text row (so two photos never sit back to back), and
 * the hero gets the same small top space as the other pages.
 */
body.page-id-415 .is-refresh .om-band__main p:not(.eyebrow) + p:not(.eyebrow) {
	margin-top: 24px;
}

@media (max-width: 899.98px) {
	body.page-id-415 .is-refresh .om-row .om-row__text {
		order: -1;
	}

	body.page-id-415 .is-refresh .om-hero {
		padding-top: 13px;
	}
}

/*
 * Pre-launch fixes.
 *
 * Arrows: Archivo's own font files have no "→", so the browser used a system font for it (different on every
 * device). A small self-hosted file with the arrow glyphs (JetBrains Mono's, weight 500) now fills in for
 * Archivo in the arrow block (U+2190 to U+21FF); the "←", "→" and "↗" glyphs are the only ones in it.
 */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-arrows-500.woff2") format("woff2");
	unicode-range: U+2190-21FF;
}

/* The /en/ hero text is light on a dark photo; it measures above 4.5:1 without a text shadow, so there is none. */
.wp-block-cover :is(h1, p),
.wp-block-cover .has-bg-color,
.wp-site-blocks .home-hero__content :is(h1, p),
.map-band-activate .wp-block-button__link {
	text-shadow: none !important;
}

/* The booking form: no shadows on the checkboxes, and the submit button is the site's rust button. */
.is-refresh :is(#form_bokamttagning, #form_bokamttagning-en) input[type="checkbox"],
.is-refresh :is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit {
	box-shadow: none !important;
}

.is-refresh :is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit {
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/*
 * The video placeholder (Complianz blocks YouTube until marketing consent; its settings are not touched).
 * As the map's: square, sand-light, a 1px sand border, no shadow, Archivo, the same 16:9 size as the live
 * video, and Complianz's own consent button restyled as an outline button labelled "Visa video" /
 * "Show video" (its real text stays in the page for screen readers). Once the video has loaded
 * Complianz drops the placeholder class and the frame is just the video.
 */
.is-refresh .wp-block-embed__wrapper.cmplz-placeholder-1,
.is-refresh .wp-block-embed__wrapper.cmplz-blocked-content-container {
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--wp--preset--font-family--sans);
	overflow: hidden;
}

.is-refresh .wp-block-embed__wrapper.cmplz-blocked-content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	box-sizing: border-box;
	text-align: center;
	background-image: none !important;
	background-color: var(--wp--preset--color--sand-light) !important;
}

.is-refresh .wp-block-embed__wrapper.cmplz-blocked-content-container::before {
	content: "Videon visas när du har godkänt marknadsföringscookies.";
	order: 1;
	max-width: 24em;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

html:lang(en) .is-refresh .wp-block-embed__wrapper.cmplz-blocked-content-container::before {
	content: "The video is shown once you have accepted marketing cookies.";
}

.is-refresh .wp-block-embed__wrapper .cmplz-blocked-content-notice {
	order: 2;
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: auto;
	max-width: none;
	height: auto;
	padding: 12px 24px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0;
	line-height: 1.5;
	cursor: pointer;
}

.is-refresh .wp-block-embed__wrapper .cmplz-blocked-content-notice::before {
	content: "Visa video";
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

html:lang(en) .is-refresh .wp-block-embed__wrapper .cmplz-blocked-content-notice::before {
	content: "Show video";
}

.is-refresh .wp-block-embed__wrapper .cmplz-blocked-content-notice:hover,
.is-refresh .wp-block-embed__wrapper .cmplz-blocked-content-notice:focus-visible {
	background-color: var(--wp--preset--color--ink);
}

.is-refresh .wp-block-embed__wrapper .cmplz-blocked-content-notice:hover::before,
.is-refresh .wp-block-embed__wrapper .cmplz-blocked-content-notice:focus-visible::before {
	color: var(--wp--preset--color--linen);
}

/* The slider arrow's own text is hidden (the arrow is drawn); its font is the site's, not the browser button default. */
.is-refresh .is-swipe-row-next {
	font-family: var(--wp--preset--font-family--sans);
}