/**
 * Klein Caravans — front-end CSS.
 *
 * Only rules theme.json cannot express belong here. Colours, spacing and
 * typography come from the generated custom properties, never hard-coded
 * values, so retuning the palette stays a theme.json edit.
 *
 * The design language: a white page broken up by full-bleed bands, a condensed
 * grotesque carrying every heading, label and button, one bright blue doing all
 * the accent work, and near-square corners throughout. Cards are drawn with a
 * hairline and a fill rather than a shadow, so they belong to the same flat
 * world as the bands around them.
 */

/* -------------------------------------------------------------------------
 * Reset
 *
 * The theme began as a block theme, where core sets box-sizing per block and
 * no reset was needed. The classic templates hand-write their own markup, so
 * the absence turned into a recurring bug: width:100% plus padding and a
 * border overflows its wrapper. select is the one control browsers already
 * ship as border-box, which is why it was always the field that looked right
 * while its neighbours did not.
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Screen reader text
 * Core only ships this class to block themes, and the skip link in header.php
 * depends on it.
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	margin: 0;
	top: 5px;
	width: auto;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Buttons
 * theme.json styles .wp-element-button — colour, radius, padding and the
 * condensed uppercase type — but a plain anchor still needs to be laid out as
 * a button, and the variants below have nowhere else to live.
 * ---------------------------------------------------------------------- */

a.wp-element-button {
	display: inline-block;
	text-align: center;
}

input.wp-element-button,
button.wp-element-button {
	border: 0;
	cursor: pointer;
}

.wp-element-button {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/*
 * Core's is-style-outline, for the places the markup is no longer a Button
 * block. The extra specificity keeps it ahead of theme.json's generated button
 * rule regardless of stylesheet order.
 *
 * No padding of its own: border-box counts the border inside the box, so the
 * outline variant lines up with the filled one on theme.json's padding alone.
 * Leaving it out also means a change there carries over here.
 */
a.wp-element-button.kc-button--outline,
input.wp-element-button.kc-button--outline,
button.wp-element-button.kc-button--outline {
	background-color: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--primary);
}

a.wp-element-button.kc-button--outline:hover,
input.wp-element-button.kc-button--outline:hover,
button.wp-element-button.kc-button--outline:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/*
 * The same outline, inverted, for the dark bands. currentColor would pick up
 * the band's white text either way, but the hover has to swap to ink rather
 * than white-on-white, which is the whole reason this is a separate variant.
 */
a.wp-element-button.kc-button--light {
	background-color: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--base);
}

a.wp-element-button.kc-button--light:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * Core's own is-style-outline takes its colour from currentColor, so on a dark
 * band it is already white on nothing — right. Its hover is not: theme.json's
 * button rule fills it with the brand blue, which on ink reads as a button that
 * stopped working. Filling with the band's text colour instead is the same
 * inversion the light variant above does.
 */
.kc-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.kc-band .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.kc-section--ink .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * The quiet third option: a text link that still reads as an action. Used
 * wherever a full button would be the third or fourth one in view — a card
 * footer, a band under a heading — and the page needs somewhere for the eye to
 * rest. The chevron is drawn rather than typed so it never lands in a copied
 * selection or a screen reader's output.
 */
.kc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.kc-link-arrow::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: translate 0.18s ease;
}

.kc-link-arrow:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.kc-link-arrow:hover::after {
	translate: 0.25em 0;
}

/* On ink or video the blue competes with the image, so the link borrows the band's text. */
.kc-band .kc-link-arrow,
.kc-hero .kc-link-arrow,
.has-contrast-background-color .kc-link-arrow,
.site-footer .kc-link-arrow {
	color: var(--wp--preset--color--base);
}

.kc-band .kc-link-arrow:hover,
.kc-hero .kc-link-arrow:hover,
.has-contrast-background-color .kc-link-arrow:hover,
.site-footer .kc-link-arrow:hover {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Focus visibility
 * theme.json has no :focus-visible support, and the default UA ring is not
 * reliably visible against the primary colour.
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* The dark surfaces take the lighter accent blue, which holds up on ink and video. */
.site-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.kc-hero :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.kc-band :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

/* -------------------------------------------------------------------------
 * Header
 * White, flat and sticky, with a hairline that only becomes a shadow once the
 * page has moved under it.
 * ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	transition: box-shadow 0.2s ease;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--20);
}

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

.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

/* Groups the menu and the CTAs so the bar keeps a clean two-part split:
   branding left, everything else right. */
.site-header__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--40);
}

.site-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

/* theme.json's full button padding is too tall for a sticky bar. */
.site-header__actions a.wp-element-button {
	padding: 0.6rem 1.15rem;
	white-space: nowrap;
}

.site-branding .custom-logo-link,
.site-branding__link {
	display: flex;
	line-height: 0;
}

/* Sized by height, not width: a logo can be a square badge or a wide
   wordmark, and only height keeps both legible. */
.site-branding .custom-logo,
.site-branding__logo {
	width: auto;
	height: 44px;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Navigation
 * Condensed caps, spaced apart, with the active item marked by a rule under
 * it rather than a colour alone — the blue on white is visible, but a third of
 * the men this site sells to have some form of colour deficiency, and a rule
 * costs nothing.
 * ---------------------------------------------------------------------- */

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-nav__list a {
	position: relative;
	display: block;
	padding-block: 0.35rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	scale: 0 1;
	transform-origin: left;
	transition: scale 0.18s ease;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--wp--preset--color--primary);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > .current-menu-item > a::after,
.site-nav__list > .current-menu-ancestor > a::after {
	scale: 1 1;
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	display: none;
	gap: var(--wp--preset--spacing--10);
	min-width: 13rem;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	list-style: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--md);
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	display: grid;
}

/* The underline belongs to the top level; inside the dropdown it would sit
   across the panel rather than under one word. */
.site-nav__list .sub-menu a::after {
	content: none;
}

.site-nav__toggle {
	display: none;
}

@media (max-width: 781px) {
	.site-header__bar {
		gap: var(--wp--preset--spacing--20);
	}

	/* Keep the burger at the outer edge, past the CTAs. */
	.site-nav {
		order: 2;
	}

	.site-header__actions {
		order: 1;
	}

	.site-nav__toggle {
		display: grid;
		place-items: center;
		position: relative;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		background: none;
		color: var(--wp--preset--color--contrast);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--sm);
		cursor: pointer;
	}

	.site-nav__burger {
		display: block;
		position: relative;
		width: 1.125rem;
		height: 2px;
		background-color: currentColor;
	}

	.site-nav__burger::before,
	.site-nav__burger::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: currentColor;
	}

	.site-nav__burger::before {
		top: -6px;
	}

	.site-nav__burger::after {
		top: 6px;
	}

	/*
	 * The overlay reproduces what the Navigation block's "mobile" overlayMenu
	 * did. Set on ink rather than the page colour: it has to read as a layer
	 * over the site, not as a page that replaced it.
	 */
	.site-nav__list {
		position: fixed;
		inset: 0;
		z-index: 30;
		display: none;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
		overflow-y: auto;
		background-color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--x-large);
		letter-spacing: 0.04em;
	}

	.site-nav__list a {
		color: var(--wp--preset--color--base);
	}

	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current-menu-ancestor > a {
		color: var(--wp--preset--color--accent);
	}

	.site-nav__list > li > a::after {
		background-color: var(--wp--preset--color--accent);
	}

	.site-nav.is-open .site-nav__list {
		display: flex;
	}

	.site-nav.is-open .site-nav__toggle {
		position: fixed;
		top: var(--wp--preset--spacing--20);
		right: var(--wp--preset--spacing--30);
		z-index: 31;
		color: var(--wp--preset--color--base);
		border-color: rgba(255, 255, 255, 0.35);
	}

	.site-nav__list .sub-menu {
		position: static;
		display: grid;
		padding: var(--wp--preset--spacing--20) 0 0 var(--wp--preset--spacing--20);
		background: none;
		border: 0;
		box-shadow: none;
		font-size: var(--wp--preset--font-size--large);
	}
}

/*
 * Phone widths: keep the bar to one row. At 390px the logo, the CTA and the
 * burger together need more than the space available, so the bar wrapped and
 * the header ate roughly 90px of the space above the fold.
 *
 * The logo gives up the width rather than everything else being shrunk to fit
 * it: it is the one element here that degrades gracefully, since a smaller
 * wordmark is still a wordmark while a clipped button is broken.
 */
@media (max-width: 600px) {
	.site-header__bar,
	.site-header__end {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--10);
	}

	/*
	 * min-width:0 is what actually lets a flex item shrink below its content,
	 * and it is needed at every step down to the image: the link is a flex
	 * item too, so leaving it out holds the logo at full width and the bar
	 * overflows the viewport rather than fitting.
	 */
	.site-branding {
		min-width: 0;
		flex: 0 1 auto;
	}

	.site-branding .custom-logo-link,
	.site-branding__link {
		min-width: 0;
	}

	.site-header__end {
		flex: 0 0 auto;
	}

	/* height:auto so the width cap scales it instead of squashing it. */
	.site-branding .custom-logo,
	.site-branding__logo {
		height: auto;
		max-height: 34px;
		max-width: 100%;
	}

	.site-header__actions a.wp-element-button {
		padding: 0.55rem 0.9rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* -------------------------------------------------------------------------
 * Section bands
 *
 * The page is a stack of full-bleed bands rather than one long column, so the
 * vertical rhythm lives on the band and not on the blocks inside it. A band
 * states its own padding and its own background; --soft and --ink are the two
 * it can alternate to when two white sections would otherwise run together.
 * ---------------------------------------------------------------------- */

.kc-section {
	padding-block: var(--wp--preset--spacing--70);
}

.kc-section--tight {
	padding-block: var(--wp--preset--spacing--60);
}

.kc-section--soft {
	background-color: var(--wp--preset--color--surface);
}

.kc-section--ink {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.kc-section--ink :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

/*
 * The block every section opens with: a blue kicker, a display heading under
 * it, and an optional lead.
 *
 * No display of its own. In the patterns this is a Group, and the block
 * editor's flow layout is already spacing its children through blockGap —
 * adding a grid gap on top would space them twice, and every editor tweak to
 * the block spacing would then be off by whatever is written here.
 */
.kc-section__head {
	margin-bottom: var(--wp--preset--spacing--50);
	max-width: 52rem;
}

.kc-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.kc-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* On ink the lighter accent blue is the same idea with more contrast. */
.kc-section--ink .kc-eyebrow,
.kc-band .kc-eyebrow,
.kc-hero .kc-eyebrow,
.site-footer .kc-eyebrow {
	color: var(--wp--preset--color--accent);
}

/* The display treatment, for the headings templates write by hand.
   register_block_style() only prints its CSS when the block itself renders. */
.kc-display {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
}

.kc-lead {
	margin: 0;
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.kc-section--ink .kc-lead,
.kc-band .kc-lead,
.kc-hero .kc-lead {
	color: rgba(255, 255, 255, 0.82);
}

/* -------------------------------------------------------------------------
 * Hero
 *
 * A tall opening band over a looping background video, the ink gradient when
 * there is none. The scrim is drawn here rather than
 * baked into the gradient so both cases carry the same contrast floor — over
 * the gradient it simply deepens it, over a photo it is what makes white type
 * legible at all.
 * ---------------------------------------------------------------------- */

.kc-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(78vh, 42rem);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--base);
	overflow: hidden;
}

.kc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		104deg,
		rgba(18, 18, 18, 0.88) 0%,
		rgba(18, 18, 18, 0.62) 45%,
		rgba(18, 18, 18, 0.28) 100%
	);
}

.kc-hero :where(h1, h2, h3, p) {
	color: var(--wp--preset--color--base);
}

/*
 * The background video. It sits under the scrim (-1) in the hero's isolated
 * stacking context, so the same contrast floor holds over moving footage. The
 * gradient on the group stays as the colour shown before the first frame and
 * whenever the video is missing or switched off.
 */
.kc-hero > .kc-hero__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	pointer-events: none;
}

.kc-hero__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The group's flow layout gives every child after the first a top margin,
   and the video is now the first child. */
.kc-hero > .kc-hero__inner {
	margin-block-start: 0;
}

/* Autoplaying motion is exactly what this setting asks a page not to do. */
@media (prefers-reduced-motion: reduce) {
	.kc-hero > .kc-hero__video {
		display: none;
	}
}

/*
 * What `has-global-padding` plus a constrained layout would have given the
 * band, minus the part that centres its children. The gutter is read from the
 * same root custom property core uses, so a change to theme.json's root
 * padding still moves the hero with the rest of the page.
 */
.kc-hero__inner,
.kc-band__inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Width only: the Group's own blockGap spaces what is inside it. */
.kc-hero__content {
	max-width: 42rem;
}

.kc-hero__title {
	font-size: var(--wp--preset--font-size--display);
}

/*
 * The USP strip under the buttons: a row on a wide screen, wrapping to as
 * many lines as it needs on a narrow one.
 *
 * Each item carries its own tick rather than the row drawing rules between
 * items. A separator belongs to the gap between two things, and CSS has no
 * way to ask whether that gap survived a line break — so a divider drawn with
 * `li + li::before` ends up stranded at the start of the second line, which is
 * exactly what it did here at 1440px.
 */
.kc-hero__usps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.kc-hero__usps li {
	display: flex;
	align-items: baseline;
	gap: 0.7em;
}

.kc-hero__usps li::before {
	content: "";
	flex: none;
	align-self: center;
	width: 0.7em;
	height: 0.4em;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
	translate: 0 -0.1em;
}

/* -------------------------------------------------------------------------
 * Media band
 *
 * The same idea as the hero at half the height, used where a section needs a
 * photograph behind it rather than beside it. The content sits in a column on
 * one side, which is what keeps the subject of the photograph visible on the
 * other.
 * ---------------------------------------------------------------------- */

.kc-band {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(56vh, 32rem);
	padding-block: var(--wp--preset--spacing--60);
	/*
	 * A band is meant to sit under a photograph, and until one is chosen it
	 * falls back to the same ink the hero uses. Directly after the hero that
	 * makes one unbroken black column, so the rule marks where the section
	 * starts. It earns its place with a photo too — a hard brand edge above
	 * the image is the design, not an apology for the fallback.
	 */
	border-top: 3px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--contrast);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--base);
}

.kc-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(18, 18, 18, 0.15) 0%,
		rgba(18, 18, 18, 0.8) 100%
	);
}

.kc-band :where(h1, h2, h3, p) {
	color: var(--wp--preset--color--base);
}

.kc-band__content {
	max-width: 34rem;
}

.kc-band--center .kc-band__content {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Split band
 *
 * Media on one side, the argument on the other. Built on the Columns block
 * rather than a grid of its own: Columns already stacks below 782px and
 * already gives an editor two drop zones, and a grid here would have to fight
 * `body .is-layout-flex` to replace layout the block does correctly.
 *
 * --reverse swaps the two so a page with more than one split band does not
 * read as a template.
 * ---------------------------------------------------------------------- */

@media (min-width: 782px) {
	.kc-split.kc-split--reverse {
		flex-direction: row-reverse;
	}
}

.kc-split__media {
	margin: 0;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

/* The ratio is what gives the slot a shape before an image is chosen, so the
   band does not collapse on a fresh install. */
.kc-split__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Checklist
 * Ported from the core/list "checklist" block style, for the lists templates
 * write by hand — register_block_style() only emits its CSS when the block
 * itself renders.
 * ---------------------------------------------------------------------- */

.kc-checklist {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.kc-checklist li {
	position: relative;
	padding-left: 1.75em;
}

.kc-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.75em;
	height: 0.42em;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* The primary tick is all but invisible on a dark band. */
.kc-section--ink .kc-checklist li::before,
.kc-band .kc-checklist li::before,
.kc-hero .kc-checklist li::before,
.wp-block-cover .wp-block-list.is-style-checklist li::before {
	border-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Tiles
 *
 * The three-up row of shortcuts. Every tile is one link, so the whole surface
 * is the target rather than the few words at the bottom of it.
 * ---------------------------------------------------------------------- */

/*
 * The row itself comes from the Group block's grid layout in the pattern, so
 * nothing is declared for it here — the guard is what keeps a hand-written
 * .kc-tiles working without overriding the block layout when there is one.
 */
.kc-tiles:not([class*="is-layout-"]) {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.kc-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, translate 0.18s ease;
}

/* The whole tile reacts, but only the link inside it is the target: a nested
   anchor around a heading and a paragraph is not a thing the markup can say. */
.kc-tile:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
	translate: 0 -2px;
}

.kc-tile__index {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.kc-tile__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.kc-tile__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/*
 * Pushed to the bottom so every tile's link lines up whatever the copy above
 * it does. Two classes because core sets `body .is-layout-flow > *
 * { margin-block-start: … }`, which a single class cannot outrank.
 */
.kc-tile .kc-tile__cue {
	margin-block-start: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------
 * Quote band
 *
 * One customer, set large, in the heading face. Still a blockquote with a
 * cite — the centred treatment is what changes, not what the markup means,
 * which is why theme.json's left rule is undone here rather than the block
 * being replaced with paragraphs.
 * ---------------------------------------------------------------------- */

.kc-quote {
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}

.wp-block-quote.kc-quote {
	border: 0;
	padding-left: 0;
}

/* Decorative: the blockquote already says this is a quotation, so the mark is
   generated rather than written into the copy. */
.kc-quote::before {
	content: "\201C";
	display: block;
	margin-bottom: 0.08em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 0.7;
	color: var(--wp--preset--color--primary);
}

.kc-section--ink .kc-quote::before {
	color: var(--wp--preset--color--accent);
}

.kc-quote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.15;
	text-wrap: balance;
}

.kc-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.kc-section--ink .kc-quote cite {
	color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------------------
 * Service cards
 * The diensten grid. Built on the registered "card" group style rather than
 * .kc-card, because these are Group blocks an editor can rearrange — the
 * class below only adds what a Group cannot say for itself.
 * ---------------------------------------------------------------------- */

.kc-service {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Three classes to clear the border shorthand the card block style sets; its
   stylesheet and this one can be printed in either order. */
.wp-block-group.is-style-card.kc-service:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
}

.kc-service :where(h3) {
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.kc-service :where(p) {
	color: var(--wp--preset--color--muted);
}

/*
 * Holds every card's link on one line across the row, whatever the paragraph
 * above it does. Two classes because core sets the between-blocks margin at
 * `body .is-layout-flow > *`, which a single class cannot outrank.
 */
.kc-service .kc-service__more {
	margin-block-start: auto;
	padding-top: var(--wp--preset--spacing--30);
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Footer
 * The footer inverts the palette, so the link colours theme.json sets
 * globally have to be overridden here. :not(.wp-element-button) keeps
 * buttons on their own styling.
 * ---------------------------------------------------------------------- */

.site-footer {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.site-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.site-footer a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * The action strip above the footer proper. Its own band rather than a row
 * inside the columns: it is the last thing the page asks for, and burying it
 * among four columns of links is how a call to action stops being one.
 */
.site-footer__cta {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	padding-block: var(--wp--preset--spacing--50);
}

.site-footer__cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.site-footer__cta-text > * {
	margin: 0;
}

.site-footer__cta-title {
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
	line-height: 1;
}

.site-footer__cta-lead {
	margin-top: 0.4em;
	color: rgba(255, 255, 255, 0.72);
}

.site-footer__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.site-footer__body {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.site-footer__content {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/*
 * Two stages, and the track counts are stated rather than auto-fitted: the
 * link column only exists when a menu is assigned to it, so footer.php says
 * how many columns there really are. auto-fit would leave the missing one's
 * share of the width standing open.
 *
 * The intro column carries the logo and a paragraph, so it takes the width a
 * pair of link columns would otherwise split between them.
 */
@media (min-width: 48em) {
	.site-footer__columns--3 {
		grid-template-columns: 1.7fr 1fr 1fr;
	}

	.site-footer__columns--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.site-footer__columns--4 {
		grid-template-columns: 1.9fr 1fr 1fr 1.1fr;
	}
}

.site-footer__column > * {
	margin: 0;
}

.site-footer__column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.site-footer__logo {
	line-height: 0;
}

.site-footer__logo .custom-logo-link {
	display: inline-flex;
}

/* Sized by height, not width: a logo can be a square badge or a wide
   wordmark, and only height keeps both legible. */
.site-footer__logo .custom-logo,
.site-footer__logo-img {
	display: block;
	width: auto;
	height: 36px;
	max-width: 100%;
}

.site-footer__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;
}

.site-footer__links {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__rule {
	border: 0;
	border-top: 1px solid currentColor;
	margin: 0;
	opacity: 0.16;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.66);
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 * Company contact details
 * Company::contact_lines_html() emits the address, phone and email as three
 * groups so they can breathe. The address keeps its lines tight together.
 * ---------------------------------------------------------------------- */

.kc-contact__group {
	display: block;
}

.kc-contact__group + .kc-contact__group {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* -------------------------------------------------------------------------
 * Main and entries
 * The templates hand vertical rhythm to CSS, because the block editor's
 * blockGap only governs blocks inside the_content().
 * ---------------------------------------------------------------------- */

.kc-main {
	margin-block-start: var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--70);
}

.kc-main--flush {
	margin-block: 0;
}

.kc-main__inner > * + *,
.kc-entry > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.kc-entry--flush > * + * {
	margin-block-start: 0;
}

.kc-archive__header > *,
.kc-entry__header > *,
.kc-entry__footer > * {
	margin: 0;
}

.kc-archive__header > * + *,
.kc-entry__header > * + *,
.kc-entry__footer > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* A page title is a display heading: it is the one line on the page that is
   allowed to be the loudest thing on it. */
.kc-entry__title,
.kc-archive__title {
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 0.98;
	text-wrap: balance;
}

.kc-error-404 > * {
	margin: 0;
}

.kc-error-404 > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.kc-error-404__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.kc-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 0;
}

.kc-featured-image {
	margin: 0;
}

.kc-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* Matches the contentSize override the full-width page template used. */
.kc-content--wide.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--wide-size);
}

.kc-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.kc-post-meta__terms a {
	color: inherit;
}

.kc-post-nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.kc-post-nav a {
	text-decoration: none;
}

.kc-post-nav__label {
	display: block;
}

.kc-post-nav a:hover .kc-post-nav__title {
	text-decoration: underline;
}

/* The hero USP list when it is written as a core/list block in a pattern. */
.kc-hero-usps.is-style-checklist {
	display: grid;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin-bottom: 0;
}

@media (min-width: 40em) {
	.kc-hero-usps.is-style-checklist {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
	}
}

.wp-block-list.kc-hero-usps.is-style-checklist li::before {
	border-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Contact Form 7
 * The plugin ships almost no styling. Hung on .kc-form rather than a section
 * class, so the sell-your-car card and the appointment dialog share one set
 * of rules; any other form on the site keeps whatever it already has.
 * ---------------------------------------------------------------------- */

.kc-form .wpcf7-form p {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.kc-form .wpcf7-form p:last-child {
	margin-bottom: 0;
}

.kc-form label {
	display: grid;
	gap: 0.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* A stray <br> inside a label would become an empty grid row. */
.kc-form label br {
	display: none;
}

/*
 * Excluding the types that must not be stretched, rather than listing the ones
 * that should: enumerating them is what left the stock search's type="search"
 * field unstyled while its selects were fine.
 */
.kc-form :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"]), select, textarea) {
	width: 100%;
	padding: 0.65rem 0.8rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	background-color: var(--wp--preset--color--base);
	/* 3:1 boundary, as WCAG 1.4.11 asks for a control that identifies itself. */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 70%, var(--wp--preset--color--base));
	border-radius: var(--wp--custom--radius--sm);
}

.kc-form :where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
}

.kc-form textarea {
	min-height: 7rem;
	resize: vertical;
}

/* Safari gives search inputs a rounded native appearance that overrides the
   border and radius above. Scoped to the input, because select needs to keep
   its own dropdown arrow. */
.kc-form input[type="search"] {
	appearance: none;
}

.kc-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.kc-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * Contact Form 7 renders its submit as a bare <input type="submit"> with only
 * its own wpcf7-* classes — no wp-element-button — so theme.json's button
 * styles never reach it and it would fall back to the browser default. These
 * declarations mirror theme.json's button exactly, so the form's submit and a
 * block button are the same object; keep them in step if that changes.
 */
.kc-form input[type="submit"] {
	width: 100%;
	padding: 0.9rem 1.85rem;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-transform: uppercase;
	cursor: pointer;
}

.kc-form input[type="submit"]:hover,
.kc-form input[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
}

/* CF7 disables the control while the request is in flight. */
.kc-form input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
}

.kc-form .wpcf7-not-valid-tip {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* The "velden met * zijn verplicht" line the appointment form carries. */
.kc-form .subtext {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
 * Contact section
 * template-parts/contact-section.php. A full-width band, so it brings the
 * vertical padding a pattern would have carried in its block attributes. The
 * form sits first in the source because it is what the section is for; the
 * details and map follow it on a narrow screen and move beside it on a wide
 * one.
 * ---------------------------------------------------------------------- */

.kc-contact-section {
	padding-block: var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--surface);
}

/*
 * Held narrower than the global content size on purpose: a form field
 * stretched the full width reads badly, and 64rem keeps the line length sane.
 * Delete these two rules to let the section match the page.
 */
.kc-contact-section__header,
.kc-contact-section__layout {
	max-width: 64rem;
}

.kc-contact-section__header {
	margin-bottom: var(--wp--preset--spacing--50);
}

.kc-contact-section__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.kc-contact-section__lead {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 44rem;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.kc-contact-section__layout {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/* Nothing configured to sit beside the form, so it stops being a two-column
   layout rather than leaving an empty track holding the width open. */
.kc-contact-section__layout--single {
	max-width: 38rem;
}

/* Same breakpoint as the stalling layout, so the two pages fold at one width. */
@media (min-width: 48em) {
	.kc-contact-section__layout {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}

	.kc-contact-section__layout--single {
		grid-template-columns: 1fr;
	}
}

/* Same card treatment as .kc-stalling__contact and the post cards. */
.kc-contact-section__form,
.kc-contact-section__details {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40);
}

.kc-contact-section__details {
	padding: var(--wp--preset--spacing--30);
}

.kc-contact-section__fallback {
	margin: 0;
}

.kc-contact-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
}

.kc-contact-section__aside {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.kc-contact-section__details > * + .kc-eyebrow {
	margin-top: var(--wp--preset--spacing--30);
}

.kc-contact-section__details p {
	margin: 0.35em 0 0;
}

.kc-contact-section__map {
	margin: 0;
}

/*
 * The iframe has no intrinsic size, so the ratio is what gives it one. Stated
 * on the frame rather than the figure, which also holds the caption.
 */
.kc-contact-section__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.kc-contact-section__route {
	margin-top: 0.5em;
	font-size: var(--wp--preset--font-size--small);
}

/* A cross-origin frame cannot be printed usefully and wastes a page. */
@media print {
	.kc-contact-section__map iframe {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Newsletter section
 * template-parts/newsletter-section.php. A white band between the ink of the
 * reviews and the soft band of the contact section, so the three never run
 * together. The pitch and the form stack on a narrow screen and sit side by
 * side on a wide one, with the field and its button on one line.
 * ---------------------------------------------------------------------- */

/* A hairline in the brand colour marks the band, the same device .kc-band
   uses, without a background that would compete with the form. */
.kc-newsletter {
	border-top: 3px solid var(--wp--preset--color--primary);
}

.kc-newsletter__layout {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

@media (min-width: 48em) {
	.kc-newsletter__layout {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

.kc-newsletter__header > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.kc-newsletter__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.kc-newsletter__lead {
	margin-bottom: 0;
	max-width: 36rem;
	color: var(--wp--preset--color--muted);
}

/*
 * The paragraph CF7's autop wraps round the field and the submit. Neither
 * element carries a class of its own that survives an edit to the form, so the
 * row is found by position: the first paragraph after the hidden fieldset.
 */
.kc-newsletter__form .wpcf7-form > p:first-of-type {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.kc-newsletter__form .wpcf7-form > p:first-of-type > .wpcf7-form-control-wrap {
	flex: 1 1 14rem;
}

/* The shared rule stretches the submit to the full width of a stacked form;
   in a row it sizes to its label, and wraps below the field when it must. */
.kc-newsletter__form input[type="submit"] {
	flex: 0 0 auto;
	width: auto;
}

/* Too narrow for the row: the button has wrapped anyway, so it takes the
   full width like every other stacked form on the site. */
@media (max-width: 30em) {
	.kc-newsletter__form input[type="submit"] {
		flex-basis: 100%;
	}

	/* Otherwise the spinner claims a line of its own under the button. */
	.kc-newsletter__form .wpcf7-spinner {
		position: absolute;
	}
}

/* CF7 gives the spinner 24px of margin either side, which in a row is enough
   to push the button onto a line of its own. */
.kc-newsletter__form .wpcf7-spinner {
	align-self: center;
	margin: 0;
}

.kc-newsletter__note {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
 * Appointment dialog
 * SweetAlert2, themed to match the site. Scoped to the theme's own class so
 * an unrelated Swal call is left alone, the same way notices.css scopes its
 * popup. overflow is left to Swal so a long form still scrolls on a short
 * viewport.
 * ---------------------------------------------------------------------- */

.swal2-popup.kc-appointment-popup {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
}

.swal2-popup.kc-appointment-popup .swal2-title {
	padding: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/*
 * Swal centres its content; a form reads left-aligned.
 *
 * It already sets overflow:auto here but never constrains the height, so a
 * tall form grows the popup past the viewport and Swal's container ends up
 * scrolling the whole dialog. Capping this element makes the form itself the
 * scroller, with the title staying put above it. overscroll-behavior stops
 * the scroll chaining to the page once the form hits its end.
 */
.swal2-popup.kc-appointment-popup .swal2-html-container {
	margin: 0;
	max-height: 65vh;
	max-height: 65dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: left;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Contact Form 7 response messages
 *
 * Unscoped on purpose: CF7's stock treatment is a 2px admin-blue box, which
 * looks wrong on every form the site has, not only the one on the front page.
 *
 * CF7 draws the status with `border-color` alone, at the same specificity an
 * obvious override here would have — so instead of escalating selectors, the
 * border is dropped and the frame drawn with box-shadow, which CF7 never
 * touches. Its per-status border-colour then lands on a zero-width border and
 * is simply invisible, no matter which stylesheet a cache plugin emits last.
 *
 * `display` is deliberately left alone so CF7 keeps hiding the box while the
 * form is in its init, resetting and submitting states.
 * ---------------------------------------------------------------------- */

.wpcf7 form.wpcf7-form .wpcf7-response-output {
	--kc-status: var(--wp--preset--color--muted);

	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--20);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	box-shadow:
		inset 3px 0 0 0 var(--kc-status),
		inset 0 0 0 1px color-mix(in srgb, var(--kc-status) 40%, var(--wp--preset--color--base));
	background-color: color-mix(in srgb, var(--kc-status) 7%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
}

/*
 * Success and failure are the only two hues with no theme.json token, and they
 * should not have one — they are not palette choices and have no business in
 * the editor's colour picker. Both are desaturated to sit with the ink and the
 * brand blue rather than shouting like CF7's stock #46b450 / #dc3232. Failure
 * keeps a red of its own: the brand blue would read as information, not error.
 *
 * Colour only reinforces the outcome. CF7 states it in words as well, so
 * nothing here depends on hue alone.
 */
.wpcf7 form.sent .wpcf7-response-output {
	--kc-status: #2f6b4f;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	--kc-status: #a3383d;
}

/* Validation is a warning, not a failure, so it leans amber rather than
   borrowing the red the failure states use. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	--kc-status: #8a6114;
}

/* -------------------------------------------------------------------------
 * Cards
 * The post grid, and the shape every other listing on the site borrows: image
 * on top, a meta strip under it, the body below. Flat, hairlined, and square
 * enough to belong to the bands around it.
 * ---------------------------------------------------------------------- */

.kc-card-grid {
	display: grid;
	/* min() with 100%: the 19rem floor alone overflows a 320px screen. */
	grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.kc-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kc-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
}

.kc-card > * {
	margin: 0;
}

.kc-card__image {
	display: block;
	line-height: 0;
}

.kc-card__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

.kc-card__date {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kc-card__title {
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.kc-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kc-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Keeps the excerpt on the baseline of the tallest card in the row. */
.kc-card__excerpt {
	margin-block-start: auto;
	color: var(--wp--preset--color--muted);
}

/*
 * The spec strip: a row of label-over-value pairs divided by hairlines, the
 * way a spec sheet reads. Shared by every listing that has numbers to show.
 */
.kc-specs {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	border-block: 1px solid var(--wp--preset--color--border);
}

.kc-specs__item {
	flex: 1 1 5rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
}

.kc-specs__item + .kc-specs__item {
	padding-left: var(--wp--preset--spacing--20);
	border-left: 1px solid var(--wp--preset--color--border);
}

.kc-specs__label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.kc-specs__value {
	display: block;
	margin: 0.15em 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.1;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

.kc-pagination {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.kc-pagination .page-numbers {
	text-decoration: none;
}

.kc-pagination .page-numbers.current {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Comments
 * ---------------------------------------------------------------------- */

.kc-comments {
	margin-block-start: var(--wp--preset--spacing--60);
}

.kc-comments > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.kc-comments__title {
	margin: 0;
}

.kc-comments__list,
.kc-comments__list .children {
	list-style: none;
	padding-left: 0;
}

.kc-comments__list .children {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--border);
}

.kc-comments__list > li + li {
	margin-block-start: var(--wp--preset--spacing--40);
}

.kc-comments .comment-meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.kc-comments .avatar {
	border-radius: 50%;
}

.kc-comments .comment-author {
	font-weight: 600;
}

.kc-comments .comment-metadata,
.kc-comments .comment-metadata a {
	color: var(--wp--preset--color--muted);
}

.kc-comments .comment-content {
	font-size: var(--wp--preset--font-size--small);
}

.kc-comments .comment-form {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.kc-comments :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: 0.65rem 0.8rem;
	font: inherit;
	color: inherit;
	background-color: var(--wp--preset--color--base);
	/*
	 * Form controls need a 3:1 boundary under WCAG 1.4.11, which the light
	 * decorative border colour cannot reach against white. Mixing it toward
	 * the grey keeps the hue but earns the contrast.
	 */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 70%, var(--wp--preset--color--base));
	border-radius: var(--wp--custom--radius--sm);
}

/* -------------------------------------------------------------------------
 * Blocks
 * ---------------------------------------------------------------------- */

.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* Cards in a grid should stretch to the row height. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group.is-style-card {
	height: 100%;
}

.wp-block-table :where(td, th) {
	border-color: var(--wp--preset--color--border);
}

/* Core gives Cover an em of padding on every side; inside a band the layout
   container is already doing that job and the em only misaligns it. */
.wp-block-cover.kc-hero,
.wp-block-cover.kc-band {
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Custom post type archives
 * The heading and back link every CPT archive and single share. Named for the
 * job rather than the post type, so a new archive needs no new rules — these
 * began as .kc-stalling-header, which is why Stallingen has none of its own.
 * ---------------------------------------------------------------------- */

.kc-archive-header {
	margin-bottom: var(--wp--preset--spacing--50);
}

.kc-archive-header__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 0.98;
}

.kc-archive-header__lead {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.kc-archive-back {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------
 * Producten
 * The werkplaats listing: a card per product, image above the body. Same
 * tokens as the stalling cards, so the two grids sit at one rhythm.
 * ---------------------------------------------------------------------- */

.kc-product-list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

/*
 * Two per row, stated rather than auto-fitted: the count is the design, and
 * auto-fill would drop to three the moment the block is placed full width.
 * One column below the breakpoint, where two would leave the body unreadable.
 */
@media (min-width: 48em) {
	.kc-product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kc-product {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	/* Lets the image sit flush to the top corners without its own radius. */
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kc-product:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
}

.kc-product__media {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface);
}

.kc-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kc-product__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
}

.kc-product__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* The body already spaces the title from the content, so the editor content
   only has to space itself internally. */
.kc-product__content > :first-child {
	margin-block-start: 0;
}

.kc-product__content > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
 * Stallingen
 * The archive grid and one stalling. Same tokens as the post cards, so the
 * two listings sit at the same rhythm even though the content differs.
 * ---------------------------------------------------------------------- */

.kc-stalling-grid {
	display: grid;
	/* min() with 100%: the 19rem floor alone overflows a 320px screen. */
	grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.kc-stalling-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kc-stalling-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
}

.kc-stalling-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface);
}

.kc-stalling-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kc-stalling-card__noimage {
	display: block;
	width: 100%;
	height: 100%;
}

.kc-stalling-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
}

/* Sized by height, not width: a logo can be a square badge or a wide
   wordmark, and only a fixed height makes both sit on the same line. */
.kc-stalling-card__logo img {
	width: auto;
	height: 2.5rem;
	object-fit: contain;
}

.kc-stalling-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.kc-stalling-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kc-stalling-card__title a:hover,
.kc-stalling-card__title a:focus {
	color: var(--wp--preset--color--primary);
}

.kc-stalling-card__address,
.kc-stalling-card__phone {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.kc-stalling-card__address {
	color: var(--wp--preset--color--muted);
}

/* Pushed to the bottom so every card's button lines up, whatever the address
   length above it. */
.kc-stalling-card__go {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--20);
}

.kc-stalling__header {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--40);
}

.kc-stalling__logo img {
	width: auto;
	height: 4rem;
	object-fit: contain;
}

.kc-stalling__title {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.kc-stalling__layout {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 48em) {
	.kc-stalling__layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.kc-stalling__gallery {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	margin-bottom: var(--wp--preset--spacing--40);
}

.kc-stalling__image {
	margin: 0;
}

.kc-stalling__image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}

.kc-stalling__contact {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30);
}

/* Sticky only where there is room beside the gallery for it to travel. */
@media (min-width: 48em) {
	.kc-stalling__contact {
		position: sticky;
		top: var(--wp--preset--spacing--60);
	}
}

.kc-stalling__details {
	margin: var(--wp--preset--spacing--20) 0 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.kc-stalling__details dt {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.kc-stalling__details dd {
	margin: 0.15em 0 0;
}

.kc-stalling__map {
	display: inline-block;
	margin-top: 0.35em;
	font-size: var(--wp--preset--font-size--small);
}

.kc-empty {
	text-align: center;
	padding-block: var(--wp--preset--spacing--60);
}

.kc-empty__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.kc-empty__text {
	margin: 0 auto;
	max-width: 34rem;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
 * Aanbod
 * The OVIS stock: page-aanbod.php, aanbod-detail.php and the stock-* template
 * parts. The listing is a filter bar over a grid of cards; one vehicle is a
 * gallery and its specifications beside a sticky price column, with the
 * request forms underneath.
 *
 * The status colours are the same desaturated set the form messages use, so
 * "Verkocht" on a card and a failed request read as one family.
 * ---------------------------------------------------------------------- */

.kc-archive-header > .kc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
}

/* The filter bar: as many columns as fit, the keyword box taking two of them
   where there is room. */
.kc-stock-search {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--20);
	align-items: end;
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.kc-stock-search p {
	margin: 0;
}

@media (min-width: 48em) {
	.kc-stock-search__field--keyword {
		grid-column: span 2;
	}
}

.kc-stock-search label {
	font-size: var(--wp--preset--font-size--small);
}

.kc-stock-search__field--check {
	align-self: center;
}

.kc-stock-search__field--check label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.kc-stock-search__submit .wp-element-button {
	width: 100%;
}

.kc-stock-results__count {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

.kc-stock-results__count strong {
	color: var(--wp--preset--color--contrast);
}

.kc-stock-results__reset {
	font-size: var(--wp--preset--font-size--small);
}

.kc-stock-results > .kc-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

.kc-stock-grid {
	display: grid;
	/* min() with 100%: the floor alone overflows a 320px screen. */
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}

/* One link per card, so the whole surface is the target. */
.kc-stock-card {
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kc-stock-card:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
}

.kc-stock-card:hover .kc-link-arrow::after {
	translate: 0.25em 0;
}

.kc-stock-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface);
}

.kc-stock-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sold stays visible as proof of a moving stock, but steps back. */
.kc-stock-card--sold .kc-stock-card__media img {
	filter: grayscale(0.7);
	opacity: 0.75;
}

.kc-stock-card__noimage,
.kc-stock-gallery__empty {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--muted);
}

.kc-stock-card__noimage svg {
	width: 30%;
}

.kc-stock-card__badges {
	position: absolute;
	top: var(--wp--preset--spacing--10);
	left: var(--wp--preset--spacing--10);
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.kc-stock-badge {
	display: inline-block;
	padding: 0.3em 0.6em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--sm);
}

.kc-stock-badge--sold,
.kc-stock-badge--reserved,
.kc-stock-badge--expected,
.kc-stock-badge--offer {
	color: var(--wp--preset--color--base);
}

.kc-stock-badge--sold {
	background-color: #a3383d;
}

.kc-stock-badge--reserved {
	background-color: #8a6114;
}

.kc-stock-badge--expected {
	background-color: var(--wp--preset--color--contrast);
}

/* The darker blue: white on the brand blue itself is only 3:1. */
.kc-stock-badge--offer {
	background-color: var(--wp--preset--color--primary-dark);
}

.kc-stock-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
}

.kc-stock-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.kc-stock-card__subtitle {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.kc-stock-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

/* Pushed to the bottom so every price in a row sits on one line. */
.kc-stock-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}

.kc-stock-card__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.05;
}

.kc-stock-card__price del,
.kc-stock-buy__was {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.kc-stock-card__go {
	font-size: var(--wp--preset--font-size--small);
}

.kc-stock-empty__icon {
	display: inline-block;
	width: 4rem;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

.kc-stock-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
}

/* One vehicle */

.kc-stock-detail__header {
	margin-bottom: var(--wp--preset--spacing--40);
}

.kc-stock-detail__header > .kc-eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
}

.kc-stock-detail__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 0.98;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
}

.kc-stock-detail__subtitle {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.kc-stock-detail__layout {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 60em) {
	.kc-stock-detail__layout {
		grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
		align-items: start;
	}
}

/*
 * The aside is the price and the call to act on it, so on a narrow screen it
 * comes straight after the gallery rather than after every spec. The main
 * column steps out of the box tree so its children and the aside become
 * siblings that order can interleave; the source order, which is what a
 * screen reader follows, stays gallery → text → price.
 */
@media (max-width: 59.99em) {
	.kc-stock-detail__layout {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.kc-stock-detail__main {
		display: contents;
	}

	.kc-stock-detail__main > * {
		order: 3;
	}

	.kc-stock-detail__main > .kc-stock-gallery,
	.kc-stock-detail__main > .kc-stock-gallery__empty,
	.kc-stock-detail__main > .kc-stock-detail__video {
		order: 1;
	}

	.kc-stock-detail__aside {
		order: 2;
		margin-top: var(--wp--preset--spacing--40);
	}
}

.kc-stock-gallery__stage {
	position: relative;
	margin: 0;
}

.kc-stock-gallery__stage img,
.kc-stock-gallery__empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}

.kc-stock-gallery__empty svg {
	width: 25%;
}

.kc-stock-gallery__badge {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
}

.kc-stock-gallery__count {
	position: absolute;
	right: var(--wp--preset--spacing--20);
	bottom: var(--wp--preset--spacing--20);
	padding: 0.25em 0.6em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	background-color: rgba(18, 18, 18, 0.72);
	border-radius: var(--wp--custom--radius--sm);
}

/* A scrolling strip rather than a wrapping grid: 24 thumbnails in a grid push
   the specifications a screen further down. */
.kc-stock-gallery__thumbs {
	display: grid;
	grid-auto-columns: 6.5rem;
	grid-auto-flow: column;
	gap: var(--wp--preset--spacing--10);
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 4px 4px var(--wp--preset--spacing--10);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.kc-stock-gallery__thumbs li {
	scroll-snap-align: start;
}

.kc-stock-gallery__thumbs a {
	display: block;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.kc-stock-gallery__thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	opacity: 0.65;
	transition: opacity 0.18s ease;
}

.kc-stock-gallery__thumbs a:hover img,
.kc-stock-gallery__thumbs a[aria-current="true"] img {
	opacity: 1;
}

.kc-stock-gallery__thumbs a[aria-current="true"] {
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}

.kc-stock-detail__video {
	margin: var(--wp--preset--spacing--20) 0 0;
}

.kc-stock-section {
	margin-top: var(--wp--preset--spacing--50);
}

.kc-stock-section__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.kc-stock-description {
	max-width: 46rem;
}

.kc-stock-description > :first-child {
	margin-top: 0;
}

/* Set by stock.js on a description taller than the fold, with a button to
   open it. The fade says there is more before the button does. */
.kc-stock-description.is-collapsed {
	max-height: 24rem;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

.kc-stock-description__toggle {
	margin-top: var(--wp--preset--spacing--20);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.kc-stock-specs {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 40em) {
	.kc-stock-specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kc-stock-specs__title {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.kc-stock-specs__list {
	margin: 0;
}

.kc-stock-specs__list > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--wp--preset--spacing--20);
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.kc-stock-specs__list dt {
	color: var(--wp--preset--color--muted);
}

.kc-stock-specs__list dd {
	margin: 0;
	font-weight: 500;
}

.kc-stock-accessories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.kc-stock-accessories .kc-checklist {
	font-size: var(--wp--preset--font-size--small);
}

/* The price column. */
.kc-stock-buy {
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--md);
}

@media (min-width: 60em) {
	.kc-stock-buy {
		position: sticky;
		top: var(--wp--preset--spacing--60);
	}
}

.kc-stock-buy__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
}

.kc-stock-buy__note {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.kc-stock-buy__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	margin: var(--wp--preset--spacing--20) 0;
	padding: var(--wp--preset--spacing--20) 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.kc-stock-buy__facts:empty {
	display: none;
}

.kc-stock-buy__actions {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.kc-stock-buy__actions .kc-link-arrow {
	justify-self: start;
	margin-top: var(--wp--preset--spacing--10);
}

.kc-stock-buy__ref {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* The request forms. */
.kc-stock-request {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 3px solid var(--wp--preset--color--primary);
	/* Clear of the sticky header when "Stel een vraag" jumps here. */
	scroll-margin-top: 6rem;
}

.kc-stock-request__form {
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.kc-stock-request__form + .kc-stock-request__form {
	margin-top: var(--wp--preset--spacing--30);
}

.kc-stock-request__title,
.kc-stock-request__summary {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.kc-stock-request__title,
details[open] > .kc-stock-request__summary {
	margin-bottom: var(--wp--preset--spacing--30);
}

.kc-stock-request__summary {
	cursor: pointer;
}

.kc-stock-request__fields {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

@media (min-width: 40em) {
	.kc-stock-request__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kc-stock-request__fields p {
	margin: 0;
}

.kc-stock-request__field--wide {
	grid-column: 1 / -1;
}

.kc-stock-request__optional {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 40em) {
	.kc-stock-request__submit input[type="submit"] {
		width: auto;
	}
}

.kc-stock-request__privacy {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Off-screen rather than display:none, which some bots know to skip. */
.kc-stock-request__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kc-stock-request__notice {
	--kc-status: var(--wp--preset--color--muted);

	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow:
		inset 3px 0 0 0 var(--kc-status),
		inset 0 0 0 1px color-mix(in srgb, var(--kc-status) 40%, var(--wp--preset--color--base));
	background-color: color-mix(in srgb, var(--kc-status) 7%, var(--wp--preset--color--base));
}

.kc-stock-request__notice p {
	margin: 0;
}

.kc-stock-request__notice p + p {
	margin-top: 0.35em;
}

.kc-stock-request__notice--verzonden {
	--kc-status: #2f6b4f;
}

.kc-stock-request__notice--ongeldig {
	--kc-status: #8a6114;
}

.kc-stock-request__notice--mislukt {
	--kc-status: #a3383d;
}

/*
 * The front page teaser: template-parts/stock-section.php. The heading on the
 * left with the "view all" link across from it on a wide screen; on a narrow
 * one that link would sit orphaned under the heading, so a full button below
 * the cards takes its place.
 */
.kc-stock-teaser__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

.kc-stock-teaser__intro {
	max-width: 46rem;
}

.kc-stock-teaser__intro > * {
	margin: 0;
}

.kc-stock-teaser__intro > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.kc-stock-teaser__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.kc-stock-teaser__lead {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.kc-stock-teaser__more {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
}

@media (min-width: 48em) {
	.kc-stock-teaser__more {
		display: none;
	}
}

@media (max-width: 47.99em) {
	.kc-stock-teaser__all {
		display: none;
	}
}

/* One column on a phone: three cards make the point, a fourth is scrolling. */
@media (max-width: 39.99em) {
	.kc-stock-teaser .kc-stock-card:nth-child(n + 4) {
		display: none;
	}
}

@media print {
	.kc-stock-teaser,
	.kc-stock-search,
	.kc-stock-gallery__thumbs,
	.kc-stock-request,
	.kc-stock-buy__actions {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Preferences and print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.site-nav__toggle,
	.kc-comments,
	.kc-pagination,
	.kc-post-nav,
	.wp-block-comments,
	.wp-block-query-pagination,
	.wp-block-post-navigation-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	/* The scrims are drawn as backgrounds, which most browsers drop when
	   printing — leaving white type on white paper. */
	.kc-hero,
	.kc-band {
		min-height: 0;
		background: none;
		color: #000;
	}

	.kc-hero :where(h1, h2, h3, p),
	.kc-band :where(h1, h2, h3, p) {
		color: #000;
	}

	.kc-hero__video {
		display: none;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}