/*
 * Laverno components. The rules behind them are in BRAND.md.
 *
 * The photograph carries the page. Type is light, corners are square, and
 * there is no accent colour: ink on paper, with stone as the one ground.
 * The finishes in the product photos are the only colour on the site.
 *
 *   ink    #1C1D1F: text, buttons, links.
 *   ink-3  #3B3C40: hover under an ink button.
 *   stock  #3E7B5C: the stock dot only, never text.
 *   amber / red   : beperkte voorraad / niet leverbaar. Never decoration.
 */

/* ---------- Shell ---------- */

.t-wrap {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

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

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

/* The terms strip belongs to the opening statement, not to what follows. */
.t-intro + .t-section--tight {
	padding-top: 0;
}

.t-section--platinum {
	background: var(--wp--preset--color--stone);
}

/* Section heading: a catalogue section marker, set against a full-width rule
   so the eye can find where a block starts when scanning quickly. */
.t-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.t-head h2,
.t-head h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.t-head__meta {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums;
}

/* ---------- Opening statement ---------- */

.t-intro h1 {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(1.625rem, 3.2vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.022em;
}

.t-intro__sub {
	margin: 1.25rem 0 0;
	max-width: 62ch;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.t-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
}

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

.t-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95em 2em;
	border-radius: 0;
	border: 1px solid transparent;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.t-btn--go {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.t-btn--go:hover {
	background: var(--wp--preset--color--ink-3);
	color: var(--wp--preset--color--paper);
}

/* The one accent: copper, sampled from the Copper finish. Only on the
   dealer calls to action (header, homepage band) and the checkout order
   button, nowhere else. */
.t-btn--accent {
	background: var(--wp--preset--color--copper);
	color: var(--wp--preset--color--paper);
}

.t-btn--accent:hover {
	background: var(--wp--preset--color--copper-2);
	color: var(--wp--preset--color--paper);
}

.t-btn--outline {
	background: transparent;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.t-btn--outline:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

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

/* ---------- Facts strip ----------
   One bordered strip divided by rules, not a row of cards. A dealer reads it
   as a single set of terms, which is what it is. */

.t-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: var(--wp--preset--color--paper);
	overflow: hidden;
}

.t-fact {
	padding: var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--line);
}

.t-fact:first-child {
	border-left: 0;
}

.t-fact__value {
	display: block;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

.t-fact__label {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-2);
}

@media (max-width: 860px) {
	.t-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.t-fact:nth-child(odd) {
		border-left: 0;
	}

	.t-fact:nth-child(n + 3) {
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

@media (max-width: 460px) {
	.t-facts {
		grid-template-columns: 1fr;
	}

	.t-fact {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.t-fact:first-child {
		border-top: 0;
	}
}

/* ---------- Data rows ----------
   The workhorse. Used for the assortment, downloads and spec lists. */

.t-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.t-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 11rem);
	align-items: center;
	gap: 0.25rem 1.5rem;
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--medium);
}

.t-row > a,
.t-row__name {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-decoration: none;
}

.t-row > a:hover .t-row__name,
.t-row > a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.t-row__note {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--ink-2);
}

.t-row__count {
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-2);
	white-space: nowrap;
}

.t-row a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.t-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.t-row__count {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ---------- Stock signal ----------
   A dot plus a word. The dot alone would put meaning in colour only. */

.t-row .t-stock {
	justify-self: end;
}

.t-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
}

.t-stock::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	flex: none;
	background: currentColor;
}

.t-stock--in::before { background: var(--wp--preset--color--stock); }
.t-stock--low     { color: var(--wp--preset--color--amber); }
.t-stock--out     { color: var(--wp--preset--color--red); }

/* ---------- Downloads ---------- */

/* The whole row is the link, so the target is the full width. */
.t-file {
	display: block;
	padding: 0;
}

.t-file__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 3.25rem 8rem;
	align-items: center;
	justify-items: end;
	gap: 0.25rem 1.5rem;
	padding-block: 0.9rem;
	color: inherit;
	text-decoration: none;
}

.t-file__link > :first-child {
	justify-self: stretch;
}

a.t-file__link:hover .t-row__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a.t-file__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

.t-file--pending .t-file__gate {
	color: var(--wp--preset--color--ink-2);
}

.t-file__type {
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-2);
	white-space: nowrap;
}

.t-file__type {
	padding: 0.15rem 0.4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	letter-spacing: 0.04em;
}

.t-file__gate {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.t-file__link {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.t-file__type {
		display: none;
	}
}

/* ---------- Specification / terms list ---------- */

.t-spec {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
}

.t-spec dt,
.t-spec dd {
	margin: 0;
	padding-block: 0.8rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.t-spec dt {
	color: var(--wp--preset--color--ink-2);
	padding-right: 1.5rem;
}

.t-spec dd {
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.t-spec {
		grid-template-columns: 1fr;
	}

	.t-spec dd {
		border-top: 0;
		padding-top: 0;
	}
}

/* ---------- Closing call to action ---------- */

.t-cta {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	padding: var(--wp--preset--spacing--50);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.t-cta h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.t-cta p {
	margin: 0.6rem 0 0;
	max-width: 58ch;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.t-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}



@media (max-width: 860px) {
	.t-cta {
		grid-template-columns: 1fr;
	}
}

/* The dealer call to action on the homepage is a card within the page width
   on the Gold close-up. The tap fills the left of the frame, so the text
   stands on the right and the dark wash comes from that side only. */
.t-cta-band {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.t-cta-band__photo,
.t-cta-band__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 42%;
}

.t-cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, rgba(18, 18, 19, 0.84) 0%, rgba(18, 18, 19, 0.7) 40%, rgba(18, 18, 19, 0.15) 75%, rgba(18, 18, 19, 0) 100%);
	pointer-events: none;
}

.t-cta-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: clamp(260px, 24vw, 320px);
	padding: var(--wp--preset--spacing--50);
}

.t-cta-band__copy {
	max-width: 26rem;
}

.t-cta-band h2 {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.t-cta-band p {
	margin: 0.6rem 0 var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.t-cta-band .t-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: 3px;
}

/* On a phone the photo shows the tap at the top and the wash comes from
   below, under the text. */
@media (max-width: 720px) {
	.t-cta-band__photo img {
		object-position: 20% 30%;
	}

	.t-cta-band::after {
		background: linear-gradient(to top, rgba(18, 18, 19, 0.88) 0%, rgba(18, 18, 19, 0.7) 50%, rgba(18, 18, 19, 0.1) 85%);
	}

	.t-cta-band__inner {
		align-items: flex-end;
		justify-content: flex-start;
		min-height: 420px;
		padding: var(--wp--preset--spacing--40);
	}
}

/* ---------- Two-column prose, for the factsheet ---------- */

.t-prose {
	max-width: 68ch;
}

.t-prose p {
	margin: 0 0 1.1em;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-2);
}

.t-prose p:last-child {
	margin-bottom: 0;
}

.t-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

@media (max-width: 860px) {
	.t-split {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

/* ---------- Over Laverno: the story, told with photographs ----------
   Text beside a portrait room shot, a row of packshots with a two line
   caption under each (the way Cea does it), and one full bleed band. */

.t-frame {
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
}

.t-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.t-frame--portrait { aspect-ratio: 4 / 5; }
.t-frame--square   { aspect-ratio: 1 / 1; }
.t-frame--wide     { aspect-ratio: 4 / 3; }

.t-story {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.t-story__photo {
	margin: 0;
}

.t-prose .t-story__lead {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.t-section--flush {
	padding-top: 0;
}

.t-rivers,
.t-finishes,
.t-values__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-rivers {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.t-river a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.t-river .t-frame img {
	object-fit: contain;
	transition: transform 0.6s ease;
}

.t-river a:hover .t-frame img {
	transform: scale(1.03);
}

.t-river__name {
	display: block;
	margin-top: 0.9rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

.t-river__note {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-2);
	line-height: 1.5;
}

.t-band {
	margin: 0;
}

.t-band__photo,
.t-band__photo img {
	display: block;
	width: 100%;
}

.t-band__photo img {
	height: clamp(320px, 56vw, 760px);
	object-fit: cover;
	object-position: 50% 60%;
}

.t-values {
	margin-top: var(--wp--preset--spacing--40);
}

.t-values__list li {
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.t-finishes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}

.t-split--ruled {
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 860px) {
	.t-story {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 720px) {
	.t-rivers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.t-finishes {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
 * Shop surfaces: large image tiles and product grids.
 *
 * This is where the site stops being a document and becomes a shop. The rules
 * above still govern data (terms, downloads, specs); these govern browsing.
 * ======================================================================== */

/* ---------- Hero: full width photograph with the statement on it ----------
   Set the way Vola and Dornbracht do it: light white type at the lower left,
   two quiet buttons, nothing else. A dark gradient only under the text keeps
   it readable (white on it is above 7:1) while the tap on the right stays
   untouched. The photo and the copy share one grid cell. */

.t-hero {
	display: grid;
}

.t-hero > * {
	grid-area: 1 / 1;
}

.t-hero__photo {
	display: block;
	position: relative;
	height: clamp(520px, 78vh, 820px);
	background: var(--wp--preset--color--ink);
}

.t-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.t-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(18, 18, 19, 0.66) 0%, rgba(18, 18, 19, 0.5) 32%, rgba(18, 18, 19, 0) 62%),
		linear-gradient(to top, rgba(18, 18, 19, 0.45) 0%, rgba(18, 18, 19, 0) 45%);
	pointer-events: none;
}

.t-hero__wrap {
	position: relative;
	align-self: end;
	padding-bottom: clamp(3rem, 9vh, 6rem);
}

.t-hero__copy {
	max-width: 36rem;
	color: var(--wp--preset--color--paper);
}

.t-hero__copy h1 {
	margin: 0;
	max-width: 13ch;
	color: inherit;
	font-size: clamp(2.5rem, 5.2vw, 4.25rem);
	font-weight: 300;
	line-height: 1.03;
	letter-spacing: -0.025em;
}

.t-hero__sub {
	margin: 1.25rem 0 0;
	max-width: 40ch;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.t-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--50);
}

/* Buttons on a photograph: a white rectangle, and a white hairline. */
.t-btn--light {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.t-btn--light:hover {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--ink);
}

.t-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--wp--preset--color--paper);
}

.t-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
}

.t-hero .t-btn:focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

.t-hero + .t-wrap {
	margin-top: var(--wp--preset--spacing--40);
}

/* On a phone the photo turns portrait and the gradient comes from below,
   since the text runs the full width. */
@media (max-width: 760px) {
	.t-hero__photo {
		height: clamp(520px, 86vh, 680px);
	}

	.t-hero__photo img {
		object-position: 62% 50%;
	}

	.t-hero__photo::after {
		background: linear-gradient(to top, rgba(18, 18, 19, 0.78) 0%, rgba(18, 18, 19, 0.55) 42%, rgba(18, 18, 19, 0) 72%);
	}

	.t-hero__wrap {
		padding-bottom: var(--wp--preset--spacing--50);
	}
}

/* ---------- Category placeholder art ----------
   Used by laverno_category_image() wherever a category has no photo yet. */

/* Placeholder state: drawn product, not a grey void. */
.t-tile__emptylabel {
	display: block;
}

.t-tile__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--ink);
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0 14px,
			transparent 14px 28px
		),
		var(--wp--preset--color--stone);
}

.t-tile__art {
	width: clamp(72px, 24%, 150px);
	height: auto;
	opacity: 0.45;
}

.t-tile__emptylabel {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-2);
}

/* ---------- Terms bar ----------
   Demoted from a panel to a single line: still the first thing a buyer checks,
   but it should not compete with the imagery. */

.t-terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.t-terms__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	color: var(--wp--preset--color--ink-2);
}

.t-terms__value {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

/* ---------- Icons ----------
   Lucide, sized against the text they sit beside rather than in fixed pixels,
   so an icon stays proportionate wherever it is used. */

.t-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.2em;
}

/* ---------- Header actions ---------- */

.t-nav-actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.t-nav-login {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}

.t-nav-login:hover {
	color: var(--wp--preset--color--ink);
}

.t-nav-login:focus-visible,
.t-nav-actions .t-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.t-btn--sm {
	padding: 0.7em 1.4em;
	white-space: nowrap;
}

/* ---------- Icons in context ---------- */

.t-terms__item .t-icon {
	color: var(--wp--preset--color--ink);
	margin-right: 0.1rem;
}

.t-file__gate {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.t-row__name .t-icon {
	color: var(--wp--preset--color--ink);
	margin-right: 0.45rem;
}


/* ===========================================================================
 * Header and footer.
 *
 * Quiet on both ends: a white header with a spaced wordmark, and a stone
 * footer. Nothing dark competes with the photography between them.
 * ======================================================================== */

/* ---------- Utility strip ---------- */

.t-util {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--x-small);
}

.t-util__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.25rem;
}

.t-util__claim {
	margin: 0;
	letter-spacing: 0.01em;
}

.t-util__contact {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.t-util__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
}

.t-util__contact a:hover {
	color: var(--wp--preset--color--ink);
}

.t-util__contact a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* On a phone the claim shortens to the part that sells: delivery in one
   working day. */
.t-util__claim--short {
	display: none;
}

@media (max-width: 720px) {
	.t-util__claim {
		display: none;
	}

	.t-util__claim--short {
		display: block;
	}

	/* With a phone number in the strip there is room for one contact line on
	   a phone: the number, which is the one you tap. Mail is in the footer
	   and on the contact page. */
	.t-util__contact a[href^="mailto:"],
	.t-util__contact .t-util__page {
		display: none;
	}

	.t-util__contact a {
		white-space: nowrap;
	}
}

/* On a tablet the strip keeps to one line: the short claim, no page link. */
@media (max-width: 960px) {
	.t-util__claim {
		display: none;
	}

	.t-util__claim--short {
		display: block;
	}

	.t-util__contact .t-util__page {
		display: none;
	}
}

.t-util__contact a {
	white-space: nowrap;
}

/* ---------- Main bar ---------- */

/* One white band: wordmark, the main navigation, search, then the dealer
   links. Navigation leads with information (assortment, service, downloads,
   the company), the way a manufacturer's trade site does, rather than with a
   row of shop categories. */
.t-bar {
	position: relative;
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.t-bar__inner {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
	min-height: 4.75rem;
}

.t-bar__inner > .t-mark,
.t-bar__inner > .t-search,
.t-bar__inner > .t-bar__actions {
	align-self: center;
}

.t-mark {
	text-decoration: none;
	flex: none;
}

/* The wordmark is Laverno's own logo, traced to SVG, never set in Jost. */
.t-wordmark {
	display: block;
	width: auto;
	height: 1.5rem;
	color: var(--wp--preset--color--ink);
}

.t-mark {
	display: block;
	padding-block: 0.25rem;
}

/* ---------- Main navigation ---------- */

.t-nav {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
}

.t-nav__list {
	display: flex;
	align-items: stretch;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-nav__item {
	position: relative;
	display: flex;
}

.t-nav__item > a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border-bottom: 1px solid transparent;
	margin-bottom: -1px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.t-nav__item > a:hover,
.t-nav__item--menu:hover > a,
.t-nav__item--menu:focus-within > a {
	color: var(--wp--preset--color--ink-2);
}

.t-nav__item > a[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--ink);
}

.t-nav__item > a:focus-visible,
.t-nav__panel a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

.t-nav__caret {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--wp--preset--color--ink-2);
}

/* On a wide screen the categories live in the Assortiment panel; the flat
   category links are for the scrolling row on smaller screens. */
.t-nav__item--cat {
	display: none;
}

/* Panels open on hover and on keyboard focus, no script. The item stretches
   to the full bar height, so the pointer never crosses a gap on its way in. */
.t-nav__panel {
	position: absolute;
	top: 100%;
	left: -1.5rem;
	z-index: 50;
	display: none;
	min-width: 15rem;
	padding: 1.25rem 1.5rem 1.4rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.t-nav__item--menu:hover > .t-nav__panel,
.t-nav__item--menu:focus-within > .t-nav__panel {
	display: block;
}

.t-nav__item--menu:hover > .t-nav__panel--range,
.t-nav__item--menu:focus-within > .t-nav__panel--range {
	display: grid;
}

.t-nav__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-nav__panel li a {
	display: block;
	padding-block: 0.35rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}

.t-nav__panel a:hover {
	color: var(--wp--preset--color--ink-2);
	text-decoration: underline;
}

.t-nav__panel--range {
	grid-template-columns: repeat(3, minmax(10rem, auto));
	gap: 0.5rem 3rem;
	padding-block: 1.5rem;
}

.t-nav__head {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-decoration: none;
}

.t-nav__group li a {
	color: var(--wp--preset--color--ink-2);
}

.t-nav__all {
	grid-column: 1 / -1;
	margin-top: 0.75rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Search ---------- */

/* Search stays in the bar, since a buyer arrives with an article number. It
   is a filled stone field the height of the dealer button, with no black
   button beside it: Enter searches. It takes the room the navigation leaves. */
.t-search {
	position: relative;
	display: flex;
	flex: 1 1 22rem;
	min-width: 14rem;
	max-width: 26rem;
	margin-left: auto;
}

.t-search__icon {
	position: absolute;
	left: 0.95rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--ink-2);
	pointer-events: none;
}

.t-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.75rem;
	padding: 0 1rem 0 2.6rem;
	border: 1px solid transparent;
	border-radius: 0;
	background: color-mix(in srgb, var(--wp--preset--color--stone) 70%, var(--wp--preset--color--paper));
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	appearance: none;
	transition: background-color 0.15s, border-color 0.15s;
}

.t-search input[type="search"]::placeholder {
	color: var(--wp--preset--color--ink-2);
}

.t-search input[type="search"]:hover {
	border-color: var(--wp--preset--color--line);
}

.t-search input[type="search"]:focus {
	outline: none;
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--ink);
}

.t-search input[type="search"]::-webkit-search-cancel-button {
	cursor: pointer;
}

.t-bar__actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex: none;
}

.t-nav-login .t-icon {
	width: 1.05rem;
	height: 1.05rem;
}

.t-bar__actions .t-btn--sm {
	height: 2.75rem;
	padding-block: 0;
}

.t-bar__actions .t-btn .t-icon {
	width: 1.05rem;
	height: 1.05rem;
}

/* ---------- Cart in the header ---------- */

/* An icon with the item count, for a dealer only. The count is an ink
   square, not a coloured badge. */
.t-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.t-cart .t-icon {
	width: 1.35rem;
	height: 1.35rem;
}

.t-cart:hover {
	color: var(--wp--preset--color--ink-2);
}

.t-cart:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

.t-cart__count {
	position: absolute;
	top: 0.2rem;
	right: 0.1rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding-inline: 0.25rem;
	box-sizing: border-box;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.15rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.t-cart__count[hidden] {
	display: none;
}

/* Below a wide desktop the navigation drops to its own row and scrolls
   sideways, with the categories as plain links instead of a panel. */
@media (max-width: 1180px) {
	.t-bar__inner {
		flex-wrap: wrap;
		row-gap: 0;
		min-height: 0;
		padding-top: 1rem;
	}

	/* Wrapping is decided on the flex basis, so the field starts from zero
	   and grows into the room between the wordmark and the actions. */
	.t-search {
		flex-basis: 0;
		max-width: none;
	}

	.t-nav {
		order: 4;
		flex-basis: 100%;
		margin-top: 1rem;
		border-top: 1px solid var(--wp--preset--color--line);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.t-nav::-webkit-scrollbar {
		display: none;
	}

	.t-nav__list {
		gap: var(--wp--preset--spacing--40);
	}

	.t-nav__item > a {
		padding-block: 0.85rem;
	}

	.t-nav__item--cat {
		display: flex;
	}

	.t-nav__item--menu:first-child,
	.t-nav__panel,
	.t-nav__caret {
		display: none !important;
	}
}

@media (max-width: 720px) {
	.t-search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
		margin: 0.85rem 0 0;
	}

	.t-bar__actions {
		margin-left: auto;
	}
}

@media (max-width: 480px) {
	.t-bar__inner {
		column-gap: 1rem;
	}

	.t-wordmark {
		height: 1.1rem;
	}

	/* Inloggen keeps its label on a phone; the pair just sits closer. */
	.t-bar__actions {
		gap: 0.9rem;
	}

	.t-nav-login {
		gap: 0.3rem;
	}

	.t-bar__actions .t-btn--sm {
		height: 2.5rem;
		padding-inline: 0.85em;
	}
}

@media (max-width: 400px) {
	.t-bar__inner {
		column-gap: 0.6rem;
	}

	.t-wordmark {
		height: 0.95rem;
	}

	.t-bar__actions {
		gap: 0.7rem;
	}

	.t-bar__actions .t-btn--sm {
		padding-inline: 0.7em;
		font-size: var(--wp--preset--font-size--x-small);
	}
}

/* ---------- Footer ---------- */

/* Informative rather than promotional: who Laverno is and how to reach it,
   the links a dealer needs, and the trade terms as data. */
.t-foot {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--ink-2);
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}

.t-foot__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.t-foot__mark {
	margin: 0;
}

.t-foot__mark .t-wordmark {
	height: 1.25rem;
}

.t-foot__blurb {
	margin: 0.9rem 0 0;
	max-width: 44ch;
	line-height: 1.65;
}

.t-foot__card {
	display: grid;
	gap: 0.55rem;
	margin: 1.5rem 0 0;
	max-width: 30rem;
}

.t-foot__card > div {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 1rem;
}

.t-foot__card dt {
	color: var(--wp--preset--color--ink-2);
}

.t-foot__card dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	line-height: 1.55;
}

.t-foot__col h2 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.t-foot__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.t-foot__col li {
	padding-block: 0.3rem;
}

.t-foot a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.t-foot a:hover {
	color: var(--wp--preset--color--ink-2);
	text-decoration: underline;
}

.t-foot a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* The trade terms read like the header of an order confirmation: a small
   uppercase label over each value. Uppercase is allowed here because it
   labels data. */
.t-foot__terms {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.25rem var(--wp--preset--spacing--40);
	margin: 0;
	padding-block: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.t-foot__terms dt {
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-2);
}

.t-foot__terms dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.t-foot__legal {
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-2);
}

.t-foot__legal-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.1rem;
}

.t-foot__legal p {
	margin: 0;
}

.t-foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

@media (max-width: 900px) {
	.t-foot__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.t-foot__about {
		grid-column: 1 / -1;
	}

	.t-foot__terms {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.t-foot__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}

	.t-foot__terms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.t-foot__legal-inner {
		justify-content: flex-start;
	}
}

/* ---------- Category pages ---------- */

.t-arch {
	background: var(--wp--preset--color--stone);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.t-arch__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

.t-arch__head h1 {
	margin: 0;
	font-size: clamp(1.5rem, 2.8vw, 1.875rem);
	letter-spacing: -0.022em;
}

.t-arch__lead {
	margin: 0.6rem 0 0;
	max-width: 62ch;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.6;
}

.t-arch__count {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Subcategories are the real content of a category page before products are
   loaded, so they are tiles rather than a list of links. */

.t-subs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 14rem));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

.t-sub {
	display: block;
	text-decoration: none;
}

.t-sub:hover .t-sub__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.t-sub:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.t-sub__frame {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--paper);
	overflow: hidden;
}

.t-sub__frame .t-tile__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.t-sub__frame .t-tile__emptylabel {
	display: none;
}

.t-sub__frame .t-tile__art {
	width: clamp(40px, 34%, 64px);
}

.t-sub__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0 0;
}

.t-sub__name {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	line-height: 1.3;
}

.t-sub__count {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums;
}

/* ---------- Empty state ---------- */

.t-empty {
	background: var(--wp--preset--color--stone);
	padding: var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	max-width: 46rem;
}

.t-empty__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.t-empty__body {
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

.t-empty__actions {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* ---------- Search results ----------
   Same stone band as a category page, without the photo. Sorting is a row of
   text links: the current one carries the underline, like the category row. */

.t-arch--search .t-arch__head {
	align-items: end;
}

.t-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.t-sort__label {
	color: var(--wp--preset--color--ink-2);
}

.t-sort a {
	padding-bottom: 0.2rem;
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.t-sort a:hover {
	color: var(--wp--preset--color--ink);
}

.t-sort a[aria-current] {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ink);
}

/* ---------- Feature: one tap with its specifications around it ----------
   The packshot stands free on the white page, the figures sit either side of
   it in large light type with a hairline reaching towards the tap. */

.t-feature__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.t-feature__col {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-feature__tap,
.t-feature__tap picture,
.t-feature__tap img {
	display: block;
	width: 100%;
	height: auto;
}

/* Inside the product page's constrained group the section already has its
   width, so it drops the wrap's side padding to line up with the related
   products. */
.t-feature--inline > .t-wrap {
	padding-inline: 0;
}

/* On a product page the packshot is the square catalogue shot. A tap is tall
   and narrow, so the frame is portrait and crops the empty sides; a sink or
   accessory is shown whole. Two classes, to outrank .woocommerce img. */
.t-feature__tap img {
	mix-blend-mode: multiply;
}

.t-feature--kraan .t-feature__tap img {
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
}

.t-feature--spoelbak .t-feature__tap img,
.t-feature--accessoire .t-feature__tap img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
}

.t-usp {
	position: relative;
	display: grid;
	gap: 0.3rem;
}

.t-usp__value {
	color: var(--wp--preset--color--ink);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.t-usp__label {
	margin-top: 0.4rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

.t-usp__note {
	max-width: 26ch;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.t-feature__col--left .t-usp {
	text-align: right;
}

.t-feature__col--left .t-usp__note {
	margin-left: auto;
}

@media (max-width: 860px) {
	.t-feature__stage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.t-feature__tap {
		grid-column: 1 / -1;
		grid-row: 1;
		max-width: 26rem;
		margin-inline: auto;
	}

	.t-feature__col--left .t-usp {
		text-align: left;
	}

	.t-feature__col--left .t-usp__note {
		margin-left: 0;
	}
}

/* ---------- Assortment index on the homepage ----------
   One row per category, set like a catalogue index: the name, a line of what
   is in it and its filters on the left; on the right a strip of small
   packshots that shows the spread of models and finishes. Every model, size,
   finish and product links straight to it. */

.t-index__row {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.t-index__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.t-index__name a,
.t-index a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.t-index__name a:hover,
.t-index__all:hover,
.t-index__variants a:hover .t-index__product {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.t-index__note {
	margin: 0.5rem 0 0;
	max-width: 46ch;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.t-index__all {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.t-index__variants {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	align-self: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-index__variants a {
	display: block;
}

.t-index__frame {
	display: block;
	aspect-ratio: 3 / 4;
	background: var(--wp--preset--color--stone);
	overflow: hidden;
}

/* Two classes, to outrank .woocommerce img { height: auto }. */
.t-index .t-index__img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 10% 6%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.5s ease;
}

.t-index__variants a:hover .t-index__img {
	transform: scale(1.05);
}

.t-index__product {
	display: block;
	margin-top: 0.55rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
}

/* Facts in the left column: the numbers behind the two rows on the right. */
.t-index__facts {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	max-width: 34ch;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}
.t-index__facts li {
	display: flex;
	gap: 0.9rem;
	align-items: baseline;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.t-index__facts span {
	flex: none;
	min-width: 2ch;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.t-index__hint {
	margin: 1rem 0 0;
	max-width: 36ch;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
}
.t-index__info .t-index__all { margin-top: 1rem; }

/* The two choices in a category row: models first, finishes under them.
   Both as images with the name beneath, so the structure reads at a glance. */
.t-index__sets {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-self: start;
	min-width: 0;
}
.t-set__label {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-2);
}
.t-set__items {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}
.t-set__items a { display: block; }
.t-set__swatch {
	display: block;
	aspect-ratio: 1;
	background: var(--wp--preset--color--stone);
	overflow: hidden;
}
.t-set__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.t-set__items a:hover .t-set__swatch img { transform: scale(1.05); }
.t-set__items a:hover .t-index__product { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* The filters: a label column and the values beside it. */
.t-range {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem 1rem;
	align-items: baseline;
	margin: var(--wp--preset--spacing--40) 0 0;
}

.t-range dt {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--x-small);
}

.t-range dd {
	margin: 0;
}

.t-range ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-range__chips {
	gap: 0.35rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.t-range__chips a {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.t-range__chips a:hover {
	border-bottom-color: var(--wp--preset--color--ink);
}

.t-range__finishes {
	gap: 0.4rem;
}

/* Swatches only. The finish name is in the link's title, so it shows as a
   tooltip, and stays in the text for screen readers. */
.t-range__finishes a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
}

.t-range__finishes a span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.t-range .t-range__swatch {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: cover;
	background: var(--wp--preset--color--stone);
	outline: 1px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.2s ease;
}

.t-range__finishes a:hover .t-range__swatch,
.t-range__finishes a:focus-visible .t-range__swatch {
	outline-color: var(--wp--preset--color--ink);
}

@media (max-width: 900px) {
	.t-index__row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 560px) {
	.t-set__items {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.t-set__items::-webkit-scrollbar { display: none; }
	.t-set__items li { flex: 0 0 34%; scroll-snap-align: start; }
	.t-set__items--finishes li { flex: 0 0 28%; }
	.t-index__variants {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.t-index__variants li {
		flex: 0 0 38%;
		scroll-snap-align: start;
	}
}

/* ---------- 404 ----------
   Half the screen is a dark detail shot that drifts very slowly closer; the
   other half carries a very large, very light 404, one line of copy, the
   search (a buyer arrives with an article number) and the ways back in. */

.t-404 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: clamp(560px, 82vh, 900px);
}

.t-404__photo {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.t-404__photo img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: t-404-drift 24s ease-in-out infinite alternate;
}

@keyframes t-404-drift {
	from { transform: scale(1); }
	to   { transform: scale(1.07) translate(-1%, 1%); }
}

.t-404__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--60) clamp(1.25rem, 6vw, 6rem);
}

.t-404__code {
	margin: 0;
	color: var(--wp--preset--color--line);
	font-size: clamp(7rem, 17vw, 15rem);
	font-weight: 300;
	line-height: 0.82;
	letter-spacing: -0.06em;
	font-variant-numeric: tabular-nums;
	animation: t-404-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.t-404__title {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 16ch;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.025em;
	animation: t-404-rise 1.1s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.t-404__lead {
	margin: 1.25rem 0 0;
	max-width: 44ch;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.6;
	animation: t-404-rise 1.1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes t-404-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.t-404__search {
	display: flex;
	align-items: center;
	max-width: 32rem;
	margin-top: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.t-404__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.t-404__icon {
	flex: none;
	color: var(--wp--preset--color--ink-2);
}

.t-404__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.9rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.t-404__search input[type="search"]:focus {
	outline: none;
}

.t-404__search:focus-within {
	border-bottom-width: 2px;
	margin-bottom: -1px;
}

.t-404__search button {
	padding: 0.6rem 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
}

.t-404__rivers {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.t-404__rivers p {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
}

.t-404__rivers ul,
.t-404__ways {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-404__rivers ul {
	gap: 0.5rem 1rem;
}

.t-404 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.t-404__rivers a {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.t-404__rivers a:hover {
	border-bottom-color: var(--wp--preset--color--ink);
}

.t-404__ways {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--40);
	max-width: 32rem;
	margin-top: var(--wp--preset--spacing--50);
}

.t-404__ways a {
	display: block;
	padding: 0.7rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	transition: padding 0.3s ease;
}

.t-404__ways a:hover {
	padding-left: 0.5rem;
}

@media (max-width: 860px) {
	.t-404 {
		grid-template-columns: 1fr;
	}

	.t-404__photo {
		height: 42vh;
	}

	.t-404__body {
		padding-block: var(--wp--preset--spacing--50);
	}
}

@media (prefers-reduced-motion: reduce) {
	.t-404__photo img,
	.t-404__code,
	.t-404__title,
	.t-404__lead {
		animation: none;
	}
}

/* ===========================================================================
 * Phone pass.
 *
 * Checked at 320, 375 and 414 px. Three rules run through it: nothing scrolls
 * sideways, every link or button is at least 24 px tall to tap (most are 40),
 * and form fields are 16 px so iOS does not zoom in on focus.
 * ======================================================================== */

h1,
h2,
h3 {
	overflow-wrap: break-word;
}

@media (max-width: 720px) {
	input,
	select,
	textarea,
	.t-search input[type="search"],
	.t-404__search input[type="search"] {
		font-size: 16px !important;
	}

	/* The navigation row scrolls; a fade on the right says there is more. */
	.t-nav {
		-webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
		mask-image: linear-gradient(to right, #000 82%, transparent);
		padding-right: 2rem;
	}

	.t-util__contact a {
		padding-block: 0.55rem;
	}

	/* Footer: whole rows to tap rather than words. */
	.t-foot__col li {
		padding-block: 0;
	}

	.t-foot__col li a {
		display: block;
		padding-block: 0.55rem;
	}

	.t-foot__links a {
		padding-block: 0.45rem;
	}

	.t-range__chips a,
	.t-404__rivers a {
		display: inline-block;
		padding-block: 0.35rem;
	}

	.t-index__all,
	.t-sort a {
		padding-block: 0.5rem;
	}

	.t-head__meta {
		padding-block: 0.25rem;
	}

	/* Subcategory tiles two to a row instead of one narrow tile. */
	.t-subs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}

	/* Page titles: the desktop display size breaks "voorwaarden" at 320. */
	main h1.wp-block-post-title {
		font-size: clamp(2rem, 9vw, 2.75rem);
		line-height: 1.08;
	}
}

/* ---------- Dealer worden ----------
   Set the way De Eekhoorn and other trade brands do it: a title band with
   the way in for existing dealers, the form in sections on the left, and a
   stone column on the right that says what the account gives. The column
   runs the height of the form and its card stays in view while scrolling. */

/* The band sits on a kitchen photo with a dark wash from the left, so the
   white title reads while the sink and tap on the right stay clear. */
.t-dealer-band {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.t-dealer-band__photo,
.t-dealer-band__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 45%;
}

.t-dealer-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(18, 18, 19, 0.82) 0%, rgba(18, 18, 19, 0.62) 38%, rgba(18, 18, 19, 0.12) 72%, rgba(18, 18, 19, 0) 100%);
	pointer-events: none;
}

.t-dealer-band__inner {
	position: relative;
	z-index: 1;
	min-height: clamp(300px, 34vw, 420px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60);
}

.t-dealer-band h1 {
	margin: 0;
	color: inherit;
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.t-dealer-band__inner > div > p {
	margin: 1rem 0 0;
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.86);
	line-height: 1.6;
}

.t-dealer-band__login {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--wp--preset--font-size--small);
}

.t-dealer-band__login .t-btn {
	gap: 0.5rem;
}

/* A block group is border-box; .t-wrap everywhere else is content-box, so
   without this the form sits 24px in from the band above it. The block gap
   margins go too, so the stone column meets the band. */
.t-dealer {
	box-sizing: content-box;
	margin-block: 0 !important;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: stretch;
}

.t-dealer > * {
	margin-block: 0 !important;
}

.t-dealer__form {
	padding-block: var(--wp--preset--spacing--60);
	max-width: 46rem;
}

.t-dealer__aside {
	background: var(--wp--preset--color--stone);
	margin-right: calc(-1 * var(--wp--preset--spacing--40));
}

.t-dealer__card {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.t-dealer__card h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.t-dealer__perks,
.t-dealer__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-dealer__perks li {
	display: grid;
	grid-template-columns: 1.4rem minmax(0, 1fr);
	gap: 0.9rem;
	align-items: start;
	padding-block: 0.8rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.t-dealer__perks .t-icon {
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--ink);
}

.t-dealer__card h3 {
	margin: var(--wp--preset--spacing--50) 0 0.8rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* A real sequence, so it is numbered. */
.t-dealer__steps {
	counter-reset: step;
}

.t-dealer__steps li {
	position: relative;
	padding: 0.35rem 0 0.35rem 2.2rem;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	counter-increment: step;
}

.t-dealer__steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.3rem;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
}

.t-dealer__contact {
	display: grid;
	gap: 0.3rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.t-dealer__contact p {
	margin: 0 0 0.3rem;
	color: var(--wp--preset--color--ink-2);
}

.t-dealer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 32px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.t-dealer__contact a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 960px) {
	.t-dealer {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* On a phone the benefits come first: they are why you fill in the form. */
	.t-dealer__aside {
		order: -1;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
	}

	.t-dealer__card {
		position: static;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.t-dealer__form {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.t-dealer-band__inner {
		padding-block: var(--wp--preset--spacing--50);
	}

	/* The text runs the full width on a phone, so the wash covers it all. */
	.t-dealer-band::after {
		background: linear-gradient(to right, rgba(18, 18, 19, 0.8), rgba(18, 18, 19, 0.55));
	}
}

/* ---------- Contact ----------
   Three ways in, each with its number or address set large enough to read
   across a showroom counter, and the registration details beside them. The
   title band is the one from Dealer worden, on a Laverno kitchen. */

.t-dealer-band--contact .t-dealer-band__photo img {
	object-position: 50% 60%;
}

.t-contact {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.t-contact__ways {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.t-contact__way {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--ink);
}

.t-contact__way .t-icon {
	width: 1.3rem;
	height: 1.3rem;
}

.t-contact__way h2 {
	margin: 0.8rem 0 0.5rem;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.t-contact__big {
	display: inline-block;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.t-contact__big:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.t-contact__way p:not(.t-contact__big) {
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.t-contact__route,
.t-contact__login {
	display: inline-block;
	margin-top: 0.6rem;
	padding-block: 0.4rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.t-contact__aside {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--stone);
}

.t-contact__aside h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
}

@media (min-width: 641px) {
	.t-contact__aside .t-spec {
		grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
	}
}

.t-contact__next {
	display: grid;
	justify-items: start;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--50);
}

.t-contact__next p {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

@media (max-width: 960px) {
	.t-contact {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.t-contact__ways {
		grid-template-columns: 1fr;
	}
}


/* ===========================================================================
 * Dialog after adding to the cart.
 *
 * Square, no shadow, on a dark wash: the product just added, the cart
 * count and subtotal, then Afrekenen or Verder winkelen.
 * ======================================================================== */

.t-added {
	width: min(32rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.t-added::backdrop {
	background: rgba(18, 18, 19, 0.55);
}

.t-added__inner {
	padding: var(--wp--preset--spacing--40);
}

/* Focus lands on the panel when it opens, so no control shows a ring
   before the dealer has done anything. */
.t-added__inner:focus {
	outline: none;
}

.t-added__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.t-added__head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.t-added__close {
	display: inline-flex;
	padding: 0.25rem;
	margin: -0.25rem -0.25rem 0 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.t-added__close .t-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.t-added__close:focus-visible,
.t-added__cart:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

.t-added__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.t-added__items li {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 1rem;
	align-items: center;
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.t-added__items img {
	grid-row: span 2;
	width: 64px;
	height: 64px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.t-added__name {
	align-self: end;
	font-size: var(--wp--preset--font-size--medium);
}

.t-added__meta {
	align-self: start;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.t-added__total {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0;
	padding-block: 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
}

.t-added__sum {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.t-added__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.t-added__actions .t-btn {
	justify-content: center;
	cursor: pointer;
	font-family: inherit;
}

.t-added__cart {
	display: inline-block;
	margin-top: 1rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-underline-offset: 0.2em;
}

@media (max-width: 480px) {
	.t-added__actions {
		grid-template-columns: 1fr;
	}
}