/*
 * Búho Lighting theme — direction 2a "Specification board" (design/claude-design-export/site).
 *
 * Mobile first. Breakpoints: 600px, 782px (same as buho-catalogue-filters' drawer), 1024px.
 * Tokens come from theme.json presets (--wp--preset--*) and are re-exposed below under the
 * names the buho-* plugins read (--brand-navy, --font-brand, --color-text …).
 *
 * Colour rule (CLAUDE.md §5.2): amber is never text on a light background, and an amber focus
 * ring on a light background is always paired with a navy ring.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	--brand-navy: var(--wp--preset--color--navy, #093c71);
	--brand-navy-600: var(--wp--preset--color--navy-600, #0b4a8b);
	--brand-navy-700: var(--wp--preset--color--navy-700, #062a50);
	--brand-amber: var(--wp--preset--color--amber, #faa61c);
	--brand-ink: var(--wp--preset--color--ink, #1c1f24);
	--brand-muted: var(--wp--preset--color--muted, #5b6470);
	--brand-line: var(--wp--preset--color--line, #c3c8cf);
	--brand-surface: var(--wp--preset--color--white, #fff);
	--brand-disabled: #767c85;
	--font-brand: var(--wp--preset--font-family--brand, "League Spartan", system-ui, sans-serif);
	--font-code: var(--wp--preset--font-family--code, ui-monospace, Menlo, Consolas, monospace);
	--font-heading-weight: 600;

	/* Names read by buho-accounts / buho-quote-list. */
	--color-text: var(--brand-ink);
	--color-text-muted: var(--wp--preset--color--ink-2, #3a414b);
	--color-text-subtle: var(--brand-muted);
	--color-line: var(--brand-line);
	--color-line-soft: var(--wp--preset--color--line-soft, #edeef0);
	--color-surface: var(--brand-surface);
	--color-warm: var(--wp--preset--color--warm, #f8f3ec);
	--color-warm-line: var(--wp--preset--color--warm-line, #e3dacb);
	--color-field-border: #858c96; /* 3.4:1 on white, ≥ 3:1 on paper and warm (WCAG 1.4.11). */
	--color-error: #b42318;
	--color-accent-700: var(--brand-navy-700);
	--space-4: 1rem;

	/* Theme-only. */
	--buho-paper: var(--wp--preset--color--paper, #f6f6f4);
	--buho-ink-2: var(--color-text-muted);
	--buho-subtle: var(--wp--preset--color--subtle, #6b7380);
	--buho-line-2: var(--wp--preset--color--line-2, #d7dadf);
	--buho-grid-line: #e9e0d2;
	--buho-hatch: repeating-linear-gradient(135deg, #efefec 0 10px, #f6f6f4 10px 20px);
	--buho-gutter: clamp(1.25rem, 3.75vw, 3rem);
	--buho-max: 1184px;
	--buho-focus: 0 0 0 6px var(--brand-amber);
}

/* ------------------------------------------------------------------ base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none; /* League Spartan has no italic: never fake an oblique. */
	text-rendering: optimizeLegibility;
}

em,
i:not(.buho-corner),
cite {
	font-style: normal;
}

strong,
b {
	font-weight: 700;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

code,
kbd,
samp,
.buho-num {
	font-family: var(--font-code);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

code {
	font-size: 0.95em;
}

::selection {
	background: rgba(9, 60, 113, 0.18);
}

input::placeholder,
textarea::placeholder {
	color: var(--buho-subtle);
	opacity: 1;
}

/* Focus: navy ring + amber ring on light backgrounds (§5.2). */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--brand-navy);
	outline-offset: 2px;
	box-shadow: var(--buho-focus);
}

/* On navy, the amber ring is enough; a white inner ring keeps it visible. */
.buho-band--navy :focus-visible,
.buho-site-footer :focus-visible {
	outline-color: #fff;
}

.buho-visually-hidden,
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* WordPress's skip link (added automatically for the <main> landmark). */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100001;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	clip-path: none;
	background: #fff;
	color: var(--brand-navy);
	font-weight: 600;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
	margin: 0;
}

.buho-main {
	display: block;
}

.buho-container {
	width: 100%;
	max-width: calc(var(--buho-max) + 2 * var(--buho-gutter));
	margin-inline: auto;
	padding-inline: var(--buho-gutter);
}

.buho-main.buho-container {
	padding-block: 1.25rem 4rem;
}

@media (min-width: 1024px) {
	.buho-main.buho-container {
		padding-block: 1.5rem 6rem;
	}
}

/* Kicker: the small uppercase label above headings. */
.buho-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-kicker a {
	color: inherit;
}

.buho-lead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--buho-ink-2);
}

.buho-section-title {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.05;
	color: var(--brand-navy);
	text-wrap: balance;
}

.buho-section-title--sm {
	font-size: var(--wp--preset--font-size--xl);
}

/* Placeholders the client still has to supply: readable, visibly marked by their brackets. */
.buho-placeholder-text {
	color: var(--buho-ink-2);
}

/* "Blueprint frame": four registration marks just outside a box. */
.buho-blueprint {
	position: relative;
}

.buho-corner {
	position: absolute;
	width: 11px;
	height: 11px;
	color: rgba(28, 31, 36, 0.55);
	pointer-events: none;
}

.buho-corner::before,
.buho-corner::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.buho-corner::before {
	left: 5px;
	top: 0;
	width: 1px;
	height: 100%;
}

.buho-corner::after {
	top: 5px;
	left: 0;
	width: 100%;
	height: 1px;
}

.buho-corner--tl {
	top: -6px;
	left: -6px;
}

.buho-corner--tr {
	top: -6px;
	right: -6px;
}

.buho-corner--bl {
	bottom: -6px;
	left: -6px;
}

.buho-corner--br {
	bottom: -6px;
	right: -6px;
}

.buho-pictogram {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--brand-navy);
}

/* A picture that does not exist yet: hatched, with the category pictogram. */
.buho-placeholder-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	background: var(--buho-hatch);
	border: 1px solid var(--brand-line);
	color: var(--brand-navy);
}

.buho-placeholder-media__pictogram {
	width: 32%;
	height: auto;
	aspect-ratio: 1 / 1;
	color: var(--brand-navy);
	opacity: 0.85;
}

.buho-placeholder-media--labelled {
	align-items: flex-end;
	justify-content: flex-start;
	padding: 12px 14px;
	font-family: var(--font-code);
	font-size: 0.75rem;
	color: var(--brand-muted);
}

.buho-placeholder-media--wide {
	aspect-ratio: 16 / 9;
}

.buho-placeholder-media--panorama {
	aspect-ratio: 16 / 9;
	margin-block: 2rem;
}

@media (min-width: 782px) {
	.buho-placeholder-media--panorama {
		aspect-ratio: 21 / 9;
	}
}

/* ------------------------------------------------------------------ buttons */

.wp-block-buttons.buho-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}

.wp-block-button .wp-block-button__link,
.buho-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 14px 26px;
	border: 1px solid var(--brand-navy);
	border-radius: 0;
	background: var(--brand-navy);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-button .wp-block-button__link:hover,
.buho-button:hover {
	background: var(--brand-navy-700);
	border-color: var(--brand-navy-700);
	color: #fff;
}

.wp-block-button.buho-button--secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--brand-navy);
	font-weight: 400;
}

.wp-block-button.buho-button--secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--brand-navy-700);
}

.wp-block-button.buho-button--inverse .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--brand-navy);
	outline: 2px solid var(--brand-amber);
	outline-offset: 4px;
}

.wp-block-button.buho-button--inverse .wp-block-button__link:hover {
	background: var(--color-warm);
	color: var(--brand-navy-700);
}

.wp-block-button.buho-button--ghost-inverse .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
	font-weight: 400;
}

.wp-block-button.buho-button--ghost-inverse .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

.buho-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--brand-navy);
	cursor: pointer;
}

.buho-icon-button[hidden] {
	display: none;
}

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

.buho-site-header {
	position: relative;
	z-index: 50;
	background: var(--buho-paper);
	border-bottom: 1px solid var(--buho-line-2);
}

.buho-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	max-width: calc(var(--buho-max) + 2 * var(--buho-gutter));
	margin-inline: auto;
	padding: 8px 6px 8px 16px;
}

.buho-header.buho-header > * {
	margin: 0;
}

.buho-header.buho-header > .buho-logo {
	margin-right: auto;
}

.buho-logo {
	display: inline-flex;
	flex: none;
	margin-right: auto;
	text-decoration: none;
}

/* Minimum width 80 px (brand/README.md). */
.buho-logo__img {
	display: block;
	width: 80px;
	height: auto;
}

.buho-nav,
.buho-site-header .buho-lang {
	display: none;
}

.buho-header__actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

.buho-header__actions.buho-header__actions > * {
	margin: 0;
}

/* The header search: a row under the bar on small screens, opened by the search button. */
.buho-header__search {
	order: 10;
	flex: 1 1 100%;
	padding: 8px 10px 4px 0;
}

.buho-js .buho-header__search:not(.is-open) {
	display: none;
}

/* Quote counter (buho-quote-list) */
.buho-quote-counter {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 44px;
	min-height: 44px;
	color: var(--brand-navy);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.buho-quote-counter:hover {
	color: var(--brand-navy-700);
}

.buho-quote-counter__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.buho-quote-counter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	padding: 3px 5px;
	border: 1px solid var(--brand-navy);
	font-family: var(--font-code);
	font-size: 0.8125rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.buho-quote-counter__dot {
	position: absolute;
	top: 5px;
	right: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand-amber);
}

/* Account link (buho-accounts) */
.buho-site-header .buho-account-link {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	color: var(--brand-navy);
	font-size: 0.9375rem;
}

.buho-site-header .buho-account-link__icon {
	width: 22px;
	height: 22px;
}

/* Language switcher: links from TranslatePress (T-19); spans in the placeholder without it. */
.buho-lang {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
}

.buho-lang abbr {
	text-decoration: none;
}

.buho-lang__item {
	padding-bottom: 1px;
}

.buho-lang__item.is-current {
	color: var(--brand-navy);
	font-weight: 600;
	border-bottom: 1px solid var(--brand-navy);
}

.buho-lang__item.is-unavailable {
	color: var(--brand-muted);
}

/* Links: a target of at least 24 × 24 px (WCAG 2.5.8) around the two letters; the underline
   stays under the letters (text-decoration), not at the edge of the larger box. */
.buho-lang:has(a.buho-lang__item) {
	gap: 4px;
}

a.buho-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0 3px;
	color: var(--brand-muted);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	border-bottom: 0;
}

a.buho-lang__item:hover {
	color: var(--brand-navy);
	text-decoration-color: currentColor;
}

a.buho-lang__item.is-current {
	color: var(--brand-navy);
	text-decoration-color: var(--brand-navy);
	border-bottom: 0;
}

@media (min-width: 1024px) {
	.buho-header {
		flex-wrap: nowrap;
		gap: 28px;
		padding: 12px var(--buho-gutter);
	}

	.buho-header.buho-header > .buho-logo {
		margin-right: 4px;
	}

	.buho-nav {
		display: block;
	}

	.buho-header__search {
		order: 0;
		flex: 0 1 260px;
		margin-left: auto;
		padding: 0;
	}

	.buho-js .buho-header__search:not(.is-open) {
		display: block;
	}

	.buho-site-header .buho-lang {
		display: flex;
	}

	.buho-header__actions {
		gap: 24px;
	}

	.buho-quote-counter__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.buho-quote-counter__count {
		min-width: 28px;
		min-height: 28px;
		padding: 4px 6px;
	}

	.buho-quote-counter__dot {
		top: 4px;
		right: -4px;
	}

	.buho-mobile {
		display: none;
	}
}

/* Main navigation (desktop) */
.buho-nav__list {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--brand-ink);
	font: inherit;
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}

.buho-nav__link:hover {
	color: var(--brand-navy);
}

.buho-nav__link[aria-current],
.buho-nav__toggle[data-current],
.buho-nav__toggle[aria-expanded="true"] {
	color: var(--brand-navy);
	font-weight: 600;
	border-bottom-color: var(--brand-navy);
}

.buho-nav__link[hidden] {
	display: none;
}

.buho-nav__chevron {
	transition: transform 0.15s ease;
}

.buho-nav__toggle[aria-expanded="true"] .buho-nav__chevron {
	transform: rotate(180deg);
}

/* Products mega-panel (design 2b) */
.buho-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--buho-line-2);
	border-bottom: 1px solid var(--brand-line);
	box-shadow: 0 18px 32px rgba(9, 60, 113, 0.08);
}

.buho-mega[hidden] {
	display: none;
}

.buho-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	max-width: calc(var(--buho-max) + 2 * var(--buho-gutter));
	margin-inline: auto;
}

.buho-mega__main {
	padding: 24px 32px 32px var(--buho-gutter);
}

.buho-mega__title {
	margin-bottom: 12px;
}

.buho-mega__categories {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-mega__category {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 12px;
	color: var(--brand-ink);
	font-size: 0.9375rem;
	line-height: 1.25;
	text-decoration: none;
}

.buho-mega__category:hover {
	background: var(--color-warm);
	color: var(--brand-navy);
}

.buho-mega__pictogram {
	flex: none;
	width: 32px;
	height: 32px;
}

.buho-mega__aside {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	background: var(--color-warm);
	border-left: 1px solid var(--color-warm-line);
}

.buho-mega__link {
	font-size: 0.9375rem;
}

/* Mobile menu */
.buho-mobile {
	display: flex;
	align-items: center;
}

.buho-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: var(--buho-paper);
	overflow: hidden;
}

.buho-drawer[hidden] {
	display: none;
}

.buho-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 20px;
	border-bottom: 1px solid var(--brand-line);
	background: #fff;
}

.buho-drawer__title {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--brand-navy);
}

.buho-drawer__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 20px 32px;
}

.buho-drawer__kicker {
	margin-bottom: 8px;
}

.buho-drawer__categories,
.buho-drawer__pages {
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-drawer__categories {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--brand-line);
	border-left: 1px solid var(--brand-line);
}

.buho-drawer__category {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 10px;
	border-right: 1px solid var(--brand-line);
	border-bottom: 1px solid var(--brand-line);
	color: var(--brand-ink);
	font-size: 0.875rem;
	line-height: 1.2;
	text-decoration: none;
}

.buho-drawer__category .buho-pictogram {
	flex: none;
	width: 22px;
	height: 22px;
}

.buho-drawer__pages {
	margin-top: 20px;
	border-top: 1px solid var(--brand-navy);
}

.buho-drawer__pages a {
	display: flex;
	align-items: center;
	min-height: 52px;
	border-bottom: 1px solid var(--buho-line-2);
	color: var(--brand-ink);
	font-size: 1.125rem;
	text-decoration: none;
}

.buho-drawer__pages a[aria-current] {
	color: var(--brand-navy);
	font-weight: 600;
}

.buho-drawer .buho-lang {
	display: flex;
	margin-top: 20px;
	font-size: 0.9375rem;
}

html.buho-lock,
html.buho-lock body {
	overflow: hidden;
}

@media (min-width: 1024px) {
	.buho-header .buho-mobile {
		display: none;
	}
}

/* ------------------------------------------------------------------ search form */

.buho-search {
	position: relative;
	width: 100%;
}

.buho-search__label {
	display: block;
	margin-bottom: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

.buho-search--header .buho-search__label,
.buho-search--jump .buho-search__label,
.buho-search--page .buho-search__label,
.buho-search--notfound .buho-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.buho-search__field {
	display: flex;
	align-items: center;
	min-height: 52px;
	border: 1px solid var(--brand-navy);
	background: #fff;
	color: var(--brand-navy);
}

.buho-search__field:focus-within {
	outline: 2px solid var(--brand-navy);
	outline-offset: 2px;
	box-shadow: var(--buho-focus);
}

.buho-search__icon {
	flex: none;
	width: 48px;
	height: 22px;
	color: var(--brand-navy);
}

.buho-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	min-height: 44px;
	padding: 0 8px 0 0;
	border: 0;
	background: transparent;
	color: var(--brand-ink);
	font: inherit;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.buho-search__input:focus,
.buho-search__input:focus-visible {
	outline: none;
	box-shadow: none;
}

.buho-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.buho-search__clear {
	flex: none;
	width: 48px;
	height: 48px;
	border: 0;
	background: transparent;
	color: var(--brand-muted);
	font-size: 1.375rem;
	cursor: pointer;
}

.buho-search__clear[hidden] {
	display: none;
}

.buho-search__submit {
	flex: none;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 52px;
	padding: 0 18px;
	border: 0;
	background: var(--brand-navy);
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.buho-search__submit:hover {
	background: var(--brand-navy-700);
}

.buho-search--header .buho-search__submit,
.buho-search--jump .buho-search__submit {
	display: none;
}

.buho-search--header .buho-search__field,
.buho-search--jump .buho-search__field {
	min-height: 44px;
	border-color: var(--brand-line);
	color: var(--brand-muted);
}

.buho-search--jump .buho-search__field {
	border-color: var(--brand-navy);
}

.buho-search--header .buho-search__icon,
.buho-search--jump .buho-search__icon {
	width: 40px;
	height: 18px;
	color: var(--brand-muted);
}

.buho-search--header .buho-search__input,
.buho-search--jump .buho-search__input {
	font-size: 0.9375rem;
}

@media (min-width: 1024px) {
	.buho-search--header .buho-search__field {
		min-height: 40px;
	}

	.buho-search--hero .buho-search__field,
	.buho-search--page .buho-search__field {
		min-height: 60px;
	}

	.buho-search--hero .buho-search__input,
	.buho-search--page .buho-search__input {
		font-size: 1.25rem;
	}
}

/* Results list (buho-search: search-as-you-type) */
.buho-search__results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	margin: 0;
	padding: 0;
	border: 1px solid var(--brand-line);
	border-top: 0;
	background: #fff;
	box-shadow: 0 14px 28px rgba(9, 60, 113, 0.1);
	list-style: none;
}

.buho-search__results[hidden] {
	display: none;
}

.buho-search--header .buho-search__results {
	min-width: min(420px, calc(100vw - 2 * var(--buho-gutter)));
	left: auto;
}

.buho-search__summary {
	padding: 10px 16px;
	border-bottom: 1px solid var(--color-line-soft);
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

.buho-search__option {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	align-items: center;
	min-height: 56px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--color-line-soft);
	color: var(--brand-ink);
	text-decoration: none;
}

.buho-search__option:hover,
.buho-search__option.is-active {
	background: var(--color-warm);
}

.buho-search__option-title {
	font-family: var(--font-code);
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: var(--brand-navy);
	overflow-wrap: anywhere;
}

.buho-search__option--family .buho-search__option-title {
	font-family: var(--font-brand);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0;
}

.buho-search__option-kind {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-search__option-sub {
	grid-column: 1 / -1;
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

.buho-search__option--exact .buho-search__option-kind {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	background: var(--brand-navy);
	color: #fff;
}

.buho-search__option--exact .buho-search__option-kind::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-amber);
}

.buho-search__all,
.buho-search__empty {
	display: block;
	padding: 12px 16px;
	font-size: 0.875rem;
}

.buho-search__empty {
	color: var(--buho-ink-2);
}

/* ------------------------------------------------------------------ breadcrumbs */

.buho-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

.buho-breadcrumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--brand-muted);
}

.buho-breadcrumbs a {
	color: var(--brand-muted);
}

.buho-breadcrumbs a:hover {
	color: var(--brand-navy);
}

/* ------------------------------------------------------------------ home */

.buho-hero {
	display: grid;
	gap: 28px;
	padding-block: 36px 40px;
}

.buho-hero__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.buho-hero__title {
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--brand-navy);
	text-wrap: balance;
}

.buho-stats {
	max-width: 30rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--buho-ink-2);
	text-wrap: pretty;
}

.buho-stats--hero {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
}

.buho-stats__more {
	display: none;
}

.buho-stats--line {
	margin-top: 4px;
	font-size: 0.9375rem;
}

.buho-stats--lead {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
}

@media (min-width: 600px) {
	.buho-stats__more {
		display: inline;
	}
}

/* Home hero figures (design 2a, T-46): three boxes on hairlines, label over a mono number. */
.buho-figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 34rem;
	margin: 0;
	border: 1px solid var(--brand-line);
}

.buho-figures__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* A label on two lines (narrow screens) keeps the numbers level. */
	gap: 6px;
	min-width: 0;
	padding: 14px 14px 16px;
}

.buho-figures__item + .buho-figures__item {
	border-left: 1px solid var(--brand-line);
}

.buho-figures__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-figures__value {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	line-height: 1.05;
	color: var(--brand-navy);
}

/* "Browse the catalogue": blueprint marks just outside the button, and an arrow after the label. */
.wp-block-button.buho-button--framed {
	position: relative;
}

.wp-block-button.buho-button--framed::before {
	--buho-mark: rgba(28, 31, 36, 0.55);
	content: "";
	position: absolute;
	inset: -6px;
	pointer-events: none;
	background:
		linear-gradient(var(--buho-mark), var(--buho-mark)) left 5px top 0 / 1px 11px no-repeat,
		linear-gradient(var(--buho-mark), var(--buho-mark)) left 0 top 5px / 11px 1px no-repeat,
		linear-gradient(var(--buho-mark), var(--buho-mark)) right 5px top 0 / 1px 11px no-repeat,
		linear-gradient(var(--buho-mark), var(--buho-mark)) right 0 top 5px / 11px 1px no-repeat,
		linear-gradient(var(--buho-mark), var(--buho-mark)) left 5px bottom 0 / 1px 11px no-repeat,
		linear-gradient(var(--buho-mark), var(--buho-mark)) left 0 bottom 5px / 11px 1px no-repeat,
		linear-gradient(var(--buho-mark), var(--buho-mark)) right 5px bottom 0 / 1px 11px no-repeat,
		linear-gradient(var(--buho-mark), var(--buho-mark)) right 0 bottom 5px / 11px 1px no-repeat;
}

.wp-block-button.buho-button--framed .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 1024px) {
	.buho-hero {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 0 24px;
		padding-block: 80px 96px;
	}

	.buho-hero__text {
		grid-column: 1 / span 6;
		gap: 28px;
		padding-top: 24px;
	}

	.buho-hero .buho-resolver {
		grid-column: 7 / span 6;
		align-self: start;
	}
}

/* Code resolver frame */
.buho-resolver {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--brand-line);
}

.buho-resolver__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--buho-line-2);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-resolver__title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	color: var(--brand-muted);
}

.buho-resolver__link {
	color: var(--brand-navy);
	text-decoration: underline;
	text-decoration-color: var(--brand-line);
}

.buho-resolver__link:hover {
	text-decoration-color: currentColor;
}

.buho-resolver__fallback {
	display: grid;
	grid-template-columns: 1fr;
}

.buho-resolver__media {
	aspect-ratio: 21 / 9;
	border: 0;
	border-bottom: 1px solid var(--buho-line-2);
}

.buho-resolver__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 22px;
	background: var(--color-warm);
}

.buho-resolver__lead {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--brand-ink);
}

.buho-resolver__facts,
.buho-resolver__codes {
	font-size: 0.875rem;
	color: var(--buho-ink-2);
}

.buho-resolver__codes {
	font-family: var(--font-code);
	color: var(--brand-navy);
}

.buho-resolver__actions {
	padding: 18px 22px;
	border-top: 1px solid var(--buho-line-2);
}

.buho-resolver__actions .buho-button {
	width: 100%;
	min-height: 48px;
	font-size: 0.9375rem;
}

@media (min-width: 600px) {
	.buho-resolver__fallback {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.buho-resolver__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 200px;
		border-bottom: 0;
		border-right: 1px solid var(--buho-line-2);
	}

	.buho-resolver__actions .buho-button {
		width: auto;
	}
}

/* Bands (full-width backgrounds) */
.buho-band {
	padding-block: 40px;
}

.buho-band--white {
	background: #fff;
	border-block: 1px solid var(--buho-line-2);
}

.buho-band--warm {
	background: var(--color-warm);
	border-block: 1px solid var(--color-warm-line);
}

.buho-band--navy {
	background: var(--brand-navy);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

@media (min-width: 1024px) {
	.buho-band {
		padding-block: 88px;
	}

	.buho-band--white:first-of-type {
		padding-block: 64px;
	}
}

/* "Know the code? Start there." */
.buho-codesearch {
	display: grid;
	gap: 20px;
}

.buho-codesearch__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--buho-ink-2);
	line-height: 1.6;
}

.buho-codesearch__text .buho-section-title {
	font-size: var(--wp--preset--font-size--xl);
}

.buho-try {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 14px;
	font-size: 0.875rem;
	color: var(--brand-muted);
}

@media (min-width: 1024px) {
	.buho-codesearch {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 24px;
	}

	.buho-codesearch__text {
		grid-column: 1 / span 4;
	}

	.buho-codesearch__text .buho-section-title {
		font-size: 2.5rem;
	}

	.buho-codesearch__form {
		grid-column: 6 / span 7;
	}
}

/* Sections */
.buho-section {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 40px;
}

.buho-section--tight {
	padding-block: 32px 0;
}

.buho-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
}

.buho-section__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.buho-section__link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9375rem;
}

.buho-section__link a::after {
	content: "→";
}

@media (min-width: 1024px) {
	.buho-section {
		gap: 32px;
		padding-block: 88px;
	}

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

	.buho-section--tight {
		padding-block: 48px 0;
	}
}

/* Category tiles */
.buho-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--brand-line);
	border-left: 1px solid var(--brand-line);
}

.buho-tiles__item {
	display: flex;
	border-right: 1px solid var(--brand-line);
	border-bottom: 1px solid var(--brand-line);
}

.buho-tile {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--buho-paper);
	color: var(--brand-ink);
	text-decoration: none;
}

.buho-tile:hover {
	background: #fff;
	color: var(--brand-navy);
}

.buho-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #ededea;
}

.buho-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.buho-tile__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-warm);
	background-image: linear-gradient(var(--buho-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--buho-grid-line) 1px, transparent 1px);
	background-size: 16px 16px;
}

.buho-tile__fallback .buho-pictogram {
	width: 40%;
	height: auto;
}

.buho-tile__number {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 2px 5px;
	background: rgba(246, 246, 244, 0.92);
	font-size: 0.75rem;
	color: var(--brand-muted);
}

.buho-tile__label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 10px;
	border-top: 1px solid var(--buho-line-2);
}

.buho-tile__pictogram {
	flex: none;
	width: 20px;
	height: 20px;
}

.buho-tile__name {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	color: inherit;
}

@media (min-width: 782px) {
	.buho-tiles--home {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.buho-tiles--compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.buho-tiles--home .buho-tile__label {
		gap: 12px;
		min-height: 64px;
		padding: 16px;
	}

	.buho-tiles--home .buho-tile__pictogram {
		width: 28px;
		height: 28px;
	}

	.buho-tiles--home .buho-tile__name {
		font-size: 1.0625rem;
		line-height: 1.25;
	}

	.buho-tiles--home .buho-tile__number {
		top: 12px;
		left: 14px;
	}
}

@media (min-width: 1024px) {
	.buho-tiles--compact {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* Three steps */
.buho-steps {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: buho-step;
	border-top: 1px solid var(--brand-navy);
}

.buho-steps > li {
	position: relative;
	display: block;
	padding: 16px 0 16px 40px;
	border-bottom: 1px solid var(--buho-line-2);
	counter-increment: buho-step;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--buho-ink-2);
}

.buho-steps > li::before {
	content: counter(buho-step, decimal-leading-zero);
	position: absolute;
	top: 19px;
	left: 0;
	font-family: var(--font-code);
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

.buho-steps > li strong {
	display: block;
	margin-bottom: 4px;
	font-size: 1.1875rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--brand-navy);
}

@media (min-width: 782px) {
	.buho-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.buho-steps > li {
		padding: 64px 28px 32px;
		border-bottom: 0;
		border-right: 1px solid var(--buho-line-2);
		font-size: 1rem;
		line-height: 1.6;
	}

	.buho-steps > li:first-child {
		padding-left: 0;
	}

	.buho-steps > li:last-child {
		border-right: 0;
		padding-right: 0;
	}

	.buho-steps > li::before {
		top: 28px;
		left: 28px;
	}

	.buho-steps > li:first-child::before {
		left: 0;
	}

	.buho-steps > li strong {
		margin-bottom: 20px;
		font-size: 1.625rem;
	}
}

/* Quote teaser: text + example schedule */
.buho-split {
	display: grid;
	gap: 24px;
}

.buho-split__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--buho-ink-2);
	line-height: 1.6;
}

.wp-block-table.buho-schedule-example {
	margin: 0;
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--brand-line);
}

.wp-block-table.buho-schedule-example table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.wp-block-table.buho-schedule-example thead {
	border-bottom: 0;
}

.wp-block-table.buho-schedule-example th,
.wp-block-table.buho-schedule-example td {
	border: 0;
}

.wp-block-table.buho-schedule-example th {
	padding: 14px 8px;
	border-bottom: 1px solid var(--brand-line);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.wp-block-table.buho-schedule-example td {
	padding: 14px 8px;
	border-bottom: 1px solid var(--color-line-soft);
	color: var(--buho-ink-2);
	vertical-align: top;
}

.wp-block-table.buho-schedule-example th:first-child,
.wp-block-table.buho-schedule-example td:first-child {
	padding-left: 16px;
}

.wp-block-table.buho-schedule-example td:nth-child(4),
.wp-block-table.buho-schedule-example th:nth-child(4) {
	text-align: right;
	font-family: var(--font-code);
}

.wp-block-table.buho-schedule-example td code {
	font-size: 1rem;
	color: var(--brand-navy);
}

.wp-block-table.buho-schedule-example td:nth-child(2) {
	color: var(--brand-ink);
}

.wp-block-table.buho-schedule-example figcaption {
	margin: 0;
	padding: 10px 16px;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--brand-muted);
}

@media (min-width: 1024px) {
	.buho-split {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.buho-split__text {
		grid-column: 1 / span 4;
	}

	.buho-split .buho-schedule-example {
		grid-column: 6 / span 7;
		align-self: start;
	}
}

/* Family cards (catalogue grid and "Selected families") */
.buho-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	color: var(--brand-ink);
	text-decoration: none;
}

.buho-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--brand-line);
}

.buho-card__media .buho-placeholder-media {
	border: 0;
	height: 100%;
}

.buho-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Datasheet photos (T-51, inc/media.php): whole, centred on the white frame, never larger than
   their own pixels (--buho-photo-w / -h come from the size classes below). */
/* One fixed cell the size of the square frame, so height and max-height resolve against the
   frame, not the photo: a portrait photo is scaled down whole, never cut off. */
.buho-card__media:has(> .buho-photo) {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
}

.buho-card__img.buho-photo {
	max-width: min(100%, var(--buho-photo-w, 100%));
	max-height: min(100%, var(--buho-photo-h, 100%));
	margin: auto;
	object-fit: contain;
}

/* Size classes of datasheet photos: the original width / height floored to 10 px under 300 px,
   else to 50 px (none from 1000 px; inc/media.php). Used by the card above and by buho-product's gallery and hero (product.css). */
.buho-photo--w10 { --buho-photo-w: 10px; }
.buho-photo--w20 { --buho-photo-w: 20px; }
.buho-photo--w30 { --buho-photo-w: 30px; }
.buho-photo--w40 { --buho-photo-w: 40px; }
.buho-photo--w50 { --buho-photo-w: 50px; }
.buho-photo--w60 { --buho-photo-w: 60px; }
.buho-photo--w70 { --buho-photo-w: 70px; }
.buho-photo--w80 { --buho-photo-w: 80px; }
.buho-photo--w90 { --buho-photo-w: 90px; }
.buho-photo--w100 { --buho-photo-w: 100px; }
.buho-photo--w110 { --buho-photo-w: 110px; }
.buho-photo--w120 { --buho-photo-w: 120px; }
.buho-photo--w130 { --buho-photo-w: 130px; }
.buho-photo--w140 { --buho-photo-w: 140px; }
.buho-photo--w150 { --buho-photo-w: 150px; }
.buho-photo--w160 { --buho-photo-w: 160px; }
.buho-photo--w170 { --buho-photo-w: 170px; }
.buho-photo--w180 { --buho-photo-w: 180px; }
.buho-photo--w190 { --buho-photo-w: 190px; }
.buho-photo--w200 { --buho-photo-w: 200px; }
.buho-photo--w210 { --buho-photo-w: 210px; }
.buho-photo--w220 { --buho-photo-w: 220px; }
.buho-photo--w230 { --buho-photo-w: 230px; }
.buho-photo--w240 { --buho-photo-w: 240px; }
.buho-photo--w250 { --buho-photo-w: 250px; }
.buho-photo--w260 { --buho-photo-w: 260px; }
.buho-photo--w270 { --buho-photo-w: 270px; }
.buho-photo--w280 { --buho-photo-w: 280px; }
.buho-photo--w290 { --buho-photo-w: 290px; }
.buho-photo--w300 { --buho-photo-w: 300px; }
.buho-photo--w350 { --buho-photo-w: 350px; }
.buho-photo--w400 { --buho-photo-w: 400px; }
.buho-photo--w450 { --buho-photo-w: 450px; }
.buho-photo--w500 { --buho-photo-w: 500px; }
.buho-photo--w550 { --buho-photo-w: 550px; }
.buho-photo--w600 { --buho-photo-w: 600px; }
.buho-photo--w650 { --buho-photo-w: 650px; }
.buho-photo--w700 { --buho-photo-w: 700px; }
.buho-photo--w750 { --buho-photo-w: 750px; }
.buho-photo--w800 { --buho-photo-w: 800px; }
.buho-photo--w850 { --buho-photo-w: 850px; }
.buho-photo--w900 { --buho-photo-w: 900px; }
.buho-photo--w950 { --buho-photo-w: 950px; }
.buho-photo--h10 { --buho-photo-h: 10px; }
.buho-photo--h20 { --buho-photo-h: 20px; }
.buho-photo--h30 { --buho-photo-h: 30px; }
.buho-photo--h40 { --buho-photo-h: 40px; }
.buho-photo--h50 { --buho-photo-h: 50px; }
.buho-photo--h60 { --buho-photo-h: 60px; }
.buho-photo--h70 { --buho-photo-h: 70px; }
.buho-photo--h80 { --buho-photo-h: 80px; }
.buho-photo--h90 { --buho-photo-h: 90px; }
.buho-photo--h100 { --buho-photo-h: 100px; }
.buho-photo--h110 { --buho-photo-h: 110px; }
.buho-photo--h120 { --buho-photo-h: 120px; }
.buho-photo--h130 { --buho-photo-h: 130px; }
.buho-photo--h140 { --buho-photo-h: 140px; }
.buho-photo--h150 { --buho-photo-h: 150px; }
.buho-photo--h160 { --buho-photo-h: 160px; }
.buho-photo--h170 { --buho-photo-h: 170px; }
.buho-photo--h180 { --buho-photo-h: 180px; }
.buho-photo--h190 { --buho-photo-h: 190px; }
.buho-photo--h200 { --buho-photo-h: 200px; }
.buho-photo--h210 { --buho-photo-h: 210px; }
.buho-photo--h220 { --buho-photo-h: 220px; }
.buho-photo--h230 { --buho-photo-h: 230px; }
.buho-photo--h240 { --buho-photo-h: 240px; }
.buho-photo--h250 { --buho-photo-h: 250px; }
.buho-photo--h260 { --buho-photo-h: 260px; }
.buho-photo--h270 { --buho-photo-h: 270px; }
.buho-photo--h280 { --buho-photo-h: 280px; }
.buho-photo--h290 { --buho-photo-h: 290px; }
.buho-photo--h300 { --buho-photo-h: 300px; }
.buho-photo--h350 { --buho-photo-h: 350px; }
.buho-photo--h400 { --buho-photo-h: 400px; }
.buho-photo--h450 { --buho-photo-h: 450px; }
.buho-photo--h500 { --buho-photo-h: 500px; }
.buho-photo--h550 { --buho-photo-h: 550px; }
.buho-photo--h600 { --buho-photo-h: 600px; }
.buho-photo--h650 { --buho-photo-h: 650px; }
.buho-photo--h700 { --buho-photo-h: 700px; }
.buho-photo--h750 { --buho-photo-h: 750px; }
.buho-photo--h800 { --buho-photo-h: 800px; }
.buho-photo--h850 { --buho-photo-h: 850px; }
.buho-photo--h900 { --buho-photo-h: 900px; }
.buho-photo--h950 { --buho-photo-h: 950px; }

.buho-card__kicker {
	margin-top: 4px;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-card__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--brand-navy);
}

.buho-card:hover .buho-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.buho-card__facts {
	font-size: 0.8125rem;
	color: var(--buho-ink-2);
}

.buho-card__codes {
	font-size: 0.8125rem;
	color: var(--brand-ink);
}

@media (min-width: 782px) {
	.buho-card {
		gap: 10px;
	}

	.buho-card__kicker {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
	}

	.buho-card__title {
		font-size: 1.25rem;
	}

	.buho-card__facts,
	.buho-card__codes {
		font-size: 0.875rem;
	}
}

.buho-family-cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 70%);
	gap: 14px;
	margin: 0 calc(-1 * var(--buho-gutter));
	padding: 0 var(--buho-gutter) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	list-style: none;
}

.buho-family-cards__item {
	scroll-snap-align: start;
}

.buho-family-cards .buho-card__media {
	aspect-ratio: 4 / 5;
}

@media (min-width: 782px) {
	.buho-family-cards {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-columns: auto;
		gap: 28px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

/* Resources trio */
.buho-resources {
	display: grid;
	gap: 0;
}

.buho-resource {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--brand-line);
	background: transparent;
	color: var(--buho-ink-2);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.buho-resource + .buho-resource {
	border-top: 0;
}

.buho-resource__title {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--brand-navy);
}

.buho-resource__title::before {
	content: "";
	width: 28px;
	height: 28px;
	background: var(--brand-navy);
	-webkit-mask: var(--buho-resource-icon) center / contain no-repeat;
	mask: var(--buho-resource-icon) center / contain no-repeat;
}

.buho-resource__title--file {
	--buho-resource-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E");
}

.buho-resource__title--book {
	--buho-resource-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v16H4zM13 4h7v16h-7z'/%3E%3C/svg%3E");
}

.buho-resource__title--badge {
	--buho-resource-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13l-1 8 4-2 4 2-1-8'/%3E%3C/svg%3E");
}

.buho-resource__title a {
	color: inherit;
	text-decoration: none;
}

.buho-resource__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.buho-resource:has(a) {
	position: relative;
}

.buho-resource:has(a):hover {
	background: #fff;
}

@media (min-width: 782px) {
	.buho-resources {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.buho-resource {
		padding: 32px;
	}

	.buho-resource + .buho-resource {
		border-top: 1px solid var(--brand-line);
		border-left: 0;
	}

	.buho-resource__title {
		font-size: 1.5rem;
	}
}

/* About + offices */
.buho-about {
	display: grid;
	gap: 28px;
}

.buho-about__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.buho-about__statement {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
	color: var(--brand-navy);
}

@media (min-width: 1024px) {
	.buho-about {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 24px;
	}

	.buho-about__text {
		grid-column: 1 / span 5;
	}

	.buho-about__statement {
		font-size: 2.5rem;
	}

	.buho-about .buho-offices {
		grid-column: 7 / span 6;
		align-self: start;
	}
}

.buho-offices {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-office {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--brand-line);
	background: #fff;
}

.buho-office__name {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--brand-navy);
}

.buho-office__address,
.buho-office__role {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.buho-office__hours {
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

@media (min-width: 600px) {
	/* One office (T-52) fills the row; a second one from the buho_theme_offices filter sits beside it. */
	.buho-offices--cards {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 24px;
	}

	.buho-office {
		padding: 28px;
	}

	.buho-office__name {
		font-size: 1.875rem;
	}
}

/* Call to action band */
.buho-cta {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.buho-cta__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #d3deea;
	font-size: 1.125rem;
}

.buho-cta__title {
	font-size: clamp(2.125rem, 1.6rem + 2vw, 3.25rem);
	line-height: 1.05;
	color: #fff;
}

@media (min-width: 1024px) {
	.buho-cta {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.buho-cta__text {
		flex: 1;
	}
}

/* ------------------------------------------------------------------ footer */

.buho-site-footer {
	background: var(--brand-navy);
	color: #fff;
}

.buho-footer {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: calc(var(--buho-max) + 2 * var(--buho-gutter));
	margin-inline: auto;
	padding: 32px var(--buho-gutter);
	font-size: 0.875rem;
	line-height: 1.7;
}

.buho-footer a {
	color: #fff;
	text-decoration: none;
}

.buho-footer a:hover {
	text-decoration: underline;
}

.buho-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}

.buho-footer__brand {
	grid-column: 1 / -1;
}

.buho-footer .buho-logo__img {
	width: 96px;
}

.buho-footer__title {
	margin-bottom: 6px;
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #b9c9dd;
}

.buho-footer__col ul,
.buho-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-footer__office {
	grid-column: 1 / -1;
}

.buho-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.8125rem;
	color: #d3deea;
}

.buho-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.buho-footer__legal a {
	color: #d3deea;
}

.buho-footer .buho-lang {
	margin-left: auto;
	color: #d3deea;
}

.buho-footer .buho-lang__item.is-current {
	color: #fff;
	border-bottom-color: var(--brand-amber);
}

.buho-footer .buho-lang__item.is-unavailable,
.buho-footer a.buho-lang__item {
	color: #d3deea;
}

.buho-footer a.buho-lang__item:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

.buho-footer a.buho-lang__item.is-current {
	color: #fff;
	text-decoration-color: var(--brand-amber);
}

@media (min-width: 1024px) {
	.buho-footer {
		gap: 48px;
		padding: 56px var(--buho-gutter) 32px;
	}

	/* Brand, Products, Company, then the office column(s): one office since T-52; any extra one
	   from the buho_theme_offices filter gets its own 1.3fr column. */
	.buho-footer__grid {
		grid-template-columns: 1.2fr 1fr 1fr 1.3fr;
		grid-auto-columns: 1.3fr;
		grid-auto-flow: column;
		gap: 32px;
	}

	.buho-footer__brand,
	.buho-footer__office {
		grid-column: auto;
	}

	.buho-footer__title {
		font-size: 0.75rem;
	}
}

/* ------------------------------------------------------------------ catalogue */

.buho-archive-hero {
	display: grid;
	gap: 20px;
	margin-bottom: 24px;
}

.buho-archive-hero > * {
	min-width: 0;
}

.buho-archive-hero--all {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.buho-archive-hero__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.buho-archive-hero__heading {
	display: flex;
	align-items: center;
	gap: 12px;
}

.buho-archive-hero__pictogram {
	flex: none;
	width: 36px;
	height: 36px;
}

.buho-archive-hero__title {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
	line-height: 1;
	color: var(--brand-navy);
}

.buho-archive-hero--all .buho-archive-hero__title {
	font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
	line-height: 1.05;
}

.buho-archive-hero__intro {
	max-width: 35rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--buho-ink-2);
}

.buho-archive-hero__stats {
	font-size: 0.9375rem;
	color: var(--buho-ink-2);
}

.buho-archive-hero__figure {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid var(--brand-line);
}

.buho-archive-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	border: 0;
}

.buho-archive-hero__figure figcaption {
	padding: 10px 14px;
	border-top: 1px solid var(--brand-line);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--buho-ink-2);
}

.buho-subcategories {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.buho-subcategories__list {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--buho-gutter));
	padding: 0 var(--buho-gutter) 4px;
	overflow-x: auto;
	list-style: none;
}

.buho-chip-link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--color-field-border);
	background: #fff;
	color: var(--brand-ink);
	font-size: 0.875rem;
	white-space: nowrap;
	text-decoration: none;
}

.buho-chip-link:hover {
	border-color: var(--brand-navy);
	color: var(--brand-navy);
}

.buho-chip-link__count {
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

.buho-chip-link.is-current {
	border-color: var(--brand-navy);
	background: var(--brand-navy);
	color: #fff;
}

.buho-chip-link.is-current .buho-chip-link__count {
	color: #fff;
}

@media (min-width: 782px) {
	.buho-archive-hero {
		margin-bottom: 32px;
	}

	.buho-archive-hero--category {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 24px;
		align-items: stretch;
	}

	.buho-archive-hero--category .buho-archive-hero__text {
		grid-column: 1 / span 7;
		gap: 20px;
		padding-block: 16px;
	}

	.buho-archive-hero__figure {
		grid-column: 8 / span 5;
	}

	.buho-archive-hero__img {
		aspect-ratio: 4 / 3;
	}

	.buho-archive-hero__pictogram {
		width: 56px;
		height: 56px;
	}

	.buho-archive-hero__heading {
		gap: 20px;
	}

	.buho-archive-hero__intro {
		font-size: 1.125rem;
	}

	.buho-subcategories__list {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.buho-chip-link {
		padding: 10px 16px;
		font-size: 0.9375rem;
	}
}

/* Layout: filters + results */
.buho-catalogue {
	display: grid;
	gap: 16px;
	border-top: 1px solid var(--brand-navy);
	padding-top: 12px;
}

.buho-catalogue > *,
.buho-catalogue__results > * {
	margin-block: 0;
}

.buho-catalogue__results {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.buho-catalogue__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}

.buho-result-count {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--brand-navy);
}

.buho-catalogue .woocommerce-ordering {
	margin: 0;
}

.buho-catalogue .woocommerce-ordering select,
.buho-quote select,
.buho-quote input[type="text"],
.buho-quote input[type="email"],
.buho-quote input[type="tel"],
.buho-quote input[type="number"],
.buho-quote textarea {
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--color-field-border);
	border-radius: 0;
	background-color: #fff;
	color: var(--brand-ink);
	font: inherit;
	font-size: 0.9375rem;
}

@media (min-width: 782px) {
	.buho-catalogue {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
		padding-top: 24px;
	}

	.buho-result-count {
		font-size: 1.375rem;
	}
}

@media (min-width: 1024px) {
	.buho-catalogue {
		grid-template-columns: 280px minmax(0, 1fr);
	}
}

/* Filters (buho-catalogue-filters, theme partial) */
.buho-filters {
	--buho-f-disabled: #767c85;
	--buho-f-line: var(--buho-line-2);
}

.buho-filters__header {
	padding-bottom: 12px;
	margin-bottom: 0;
	border-bottom: 1px solid var(--brand-line);
}

.buho-filters__title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--brand-navy);
}

.buho-filters__clear-all,
.buho-active-filters__clear,
.buho-filters__clear {
	color: var(--brand-navy);
	font-size: 0.875rem;
	text-decoration: underline;
}

/* At least 24 × 24 px to click or tap (WCAG 2.5.8), without changing the line. */
.buho-filters__clear-all,
.buho-active-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.buho-facet {
	border-top: 0;
	border-bottom: 1px solid var(--buho-line-2);
	padding: 0;
}

.buho-facet__summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 0;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--brand-ink);
}

.buho-facet__summary::-webkit-details-marker {
	display: none;
}

.buho-facet__title {
	flex: 1;
}

.buho-facet__badge {
	font-family: var(--font-code);
	font-size: 0.75rem;
	color: var(--brand-navy);
}

.buho-facet__sign {
	flex: none;
	width: 20px;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--brand-navy);
}

.buho-facet__sign::before {
	content: "+";
}

.buho-facet[open] > .buho-facet__summary .buho-facet__sign::before {
	content: "\2212";
}

.buho-facet__group {
	padding-bottom: 8px;
}

.buho-facet__group-title {
	margin: 8px 0 2px;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: var(--brand-muted);
}

.buho-facet__values {
	margin: 0;
}

.buho-filter-value {
	padding-left: calc(var(--buho-depth, 0) * 28px);
}

.buho-filter-value__link {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	min-height: 36px;
	padding: 6px 0;
	font-size: 0.9375rem;
}

.buho-filter-value__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--buho-subtle);
	border-radius: 0;
	background: #fff;
	color: transparent;
}

.buho-filter-value__box svg {
	display: block;
}

.buho-filter-value.is-selected .buho-filter-value__box {
	border-color: var(--brand-navy);
	background: var(--brand-navy);
	box-shadow: none;
	color: #fff;
}

.buho-filter-value.is-selected .buho-filter-value__link {
	color: var(--brand-navy);
}

.buho-filter-value__count {
	font-family: var(--font-code);
	color: var(--brand-muted);
}

.buho-filter-value.is-selected .buho-filter-value__count {
	color: var(--brand-navy);
}

.buho-filter-value.is-disabled .buho-filter-value__box {
	border-color: var(--brand-line);
	background: #f0f1f2;
}

.buho-facet__more-toggle {
	min-height: 36px;
	padding: 6px 0;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.buho-facet__more-toggle::-webkit-details-marker {
	display: none;
}

/* Range filters (Wattage, Cut-out; buho-catalogue-filters filter-range partial, T-26) */
.buho-range {
	margin: 0;
	padding-bottom: 14px;
}

.buho-range__fields {
	gap: 8px;
}

/* Room for the 6 px focus ring between the label and its box. */
.buho-range__field {
	gap: 8px;
}

.buho-range__label {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-range__control {
	border: 1px solid var(--color-field-border);
	border-radius: 0;
	background: #fff;
}

.buho-range__control:hover {
	border-color: var(--brand-navy);
}

.buho-range__input {
	min-height: 40px;
	padding: 0 8px;
	font-family: var(--font-code);
	font-size: 0.9375rem;
	color: var(--brand-ink);
}

.buho-range__unit {
	padding: 0 8px 0 0;
	font-family: var(--font-code);
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

.buho-range__sep {
	padding-bottom: 10px;
	color: var(--brand-muted);
}

.buho-range__hint,
.buho-range__note {
	margin-top: 8px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--brand-muted);
}

.buho-range__hint-value {
	font-family: var(--font-code);
	color: var(--brand-ink);
}

.buho-range__actions {
	margin-top: 10px;
}

.buho-range__apply {
	min-height: 40px;
	padding: 0 18px;
	border-radius: 0;
	background: var(--brand-navy);
	font-size: 0.875rem;
}

.buho-range__apply:hover {
	background: var(--brand-navy-700);
	border-color: var(--brand-navy-700);
}

.buho-range__clear {
	color: var(--brand-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.buho-facet--range .buho-facet__badge {
	white-space: nowrap;
}

@media (max-width: 781.98px) {
	.buho-filters__toggle {
		width: 100%;
		min-height: 48px;
		justify-content: center;
		border-radius: 0;
		background: var(--brand-navy);
		color: #fff;
		font-weight: 600;
	}

	.buho-filters__toggle-count {
		border-radius: 0;
		background: #fff;
		color: var(--brand-navy);
	}

	.buho-filters.is-open .buho-filters__panel {
		background: var(--buho-paper);
	}

	.buho-filters.is-open .buho-filters__header {
		background: #fff;
		border-bottom-color: var(--brand-line);
	}

	.buho-filters.is-open .buho-filters__footer {
		display: grid;
		grid-template-columns: 1fr 1.6fr;
	}

	.buho-filters__clear {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		border: 1px solid var(--brand-navy);
		text-decoration: none;
	}

	.buho-filters__show {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		border-radius: 0;
	}

	.buho-filter-value__link {
		grid-template-columns: 22px minmax(0, 1fr) auto;
		gap: 12px;
		min-height: 44px;
		font-size: 1rem;
	}

	.buho-filter-value__box {
		width: 22px;
		height: 22px;
	}
}

/* Active filter chips */
.buho-active-filters {
	margin: 0;
}

.buho-chip {
	gap: 10px;
	min-height: 36px;
	padding: 6px 10px 6px 12px;
	border-radius: 0;
	background: #fff;
	font-size: 0.875rem;
}

.buho-chip__remove {
	font-size: 1rem;
}

/* Product collection grid */
.buho-collection .wc-block-product-template,
.buho-collection__grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.buho-collection .wc-block-product-template > li,
.buho-collection .wc-block-product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}

@media (min-width: 1024px) {
	.buho-collection .wc-block-product-template,
	.buho-collection__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 28px 24px !important;
	}
}

/* Pagination */
.buho-pagination,
.buho-collection .wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
	font-size: 0.9375rem;
}

.buho-collection .wp-block-query-pagination a,
.buho-collection .wp-block-query-pagination .page-numbers,
.buho-pagination a,
.buho-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--brand-line);
	background: #fff;
	color: var(--brand-navy);
	text-decoration: none;
}

.buho-collection .wp-block-query-pagination .page-numbers.current,
.buho-pagination .page-numbers.current {
	border-color: var(--brand-navy);
	background: var(--brand-navy);
	color: #fff;
}

.buho-collection .wp-block-query-pagination .page-numbers.dots,
.buho-pagination .page-numbers.dots {
	border: 0;
	background: none;
}

/* No results */
.buho-no-results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--brand-line);
	background: #fff;
}

.buho-no-results__title {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--brand-navy);
}

@media (min-width: 782px) {
	.buho-no-results {
		padding: 40px;
	}

	.buho-no-results__title {
		font-size: 1.75rem;
	}
}

/* ------------------------------------------------------------------ search page */

.buho-search-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.buho-search-head__title {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--brand-muted);
}

.buho-search-results {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.buho-search-results__summary {
	font-size: 0.9375rem;
	color: var(--buho-ink-2);
}

.buho-search-results__exact {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 16px;
	border: 1px solid var(--brand-navy);
	background: #fff;
	color: var(--brand-ink);
	text-decoration: none;
}

.buho-search-results__exact:hover {
	background: var(--color-warm);
}

.buho-search-results__exact-media .buho-placeholder-media,
.buho-search-results__exact-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--buho-line-2);
}

.buho-search-results__exact-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.buho-search-results__badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	background: var(--brand-navy);
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.buho-search-results__badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-amber);
}

.buho-search-results__code {
	font-family: var(--font-code);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	color: var(--brand-navy);
	overflow-wrap: anywhere;
}

.buho-search-results__open {
	font-size: 0.875rem;
	color: var(--brand-navy);
}

.buho-search-results__cols {
	display: grid;
	gap: 32px;
}

.buho-search-results__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.buho-search-results__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 1.375rem;
	color: var(--brand-navy);
}

.buho-search-results__title .buho-num {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--brand-muted);
}

.buho-search-results__families,
.buho-search-results__codes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-search-results__family {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--brand-line);
	background: #fff;
	color: var(--brand-ink);
	text-decoration: none;
}

.buho-search-results__family:hover {
	border-color: var(--brand-navy);
}

.buho-search-results__family .buho-placeholder-media,
.buho-search-results__family img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 0;
}

.buho-search-results__family-name {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--brand-navy);
}

.buho-search-results__meta {
	display: block;
	font-size: 0.8125rem;
	color: var(--buho-ink-2);
}

.buho-search-results__codes {
	gap: 0;
	border-top: 1px solid var(--brand-navy);
}

.buho-search-results__code-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--buho-line-2);
	color: var(--brand-ink);
	text-decoration: none;
}

.buho-search-results__code-link:hover {
	background: #fff;
}

.buho-search-results__code-link .buho-num {
	font-size: 1.0625rem;
	color: var(--brand-navy);
	overflow-wrap: anywhere;
}

.buho-search-results__more {
	font-size: 0.875rem;
	color: var(--buho-ink-2);
}

.buho-search-results__none {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--brand-line);
	background: #fff;
}

.buho-search-results__none-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--brand-navy);
	overflow-wrap: anywhere;
}

.buho-search-results__none ul {
	margin: 0;
	padding-left: 20px;
	color: var(--buho-ink-2);
}

@media (min-width: 1024px) {
	.buho-search-results__exact {
		grid-template-columns: 140px minmax(0, 1fr);
		gap: 24px;
		padding: 20px;
	}

	.buho-search-results__cols {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 48px;
	}

	.buho-search-results__none {
		padding: 32px;
	}
}

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

.buho-page-title,
.buho-page-head__title {
	font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
	line-height: 1.05;
	color: var(--brand-navy);
	text-wrap: balance;
}

.buho-page-title {
	margin-bottom: 24px;
}

.buho-page-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 28px;
}

.buho-page-head--narrow {
	max-width: 47.5rem;
	gap: 14px;
}

.buho-page-head--quote {
	flex-direction: column;
	gap: 16px;
}

/* A signed-in visitor gets the project heading instead (buho-quote-list, T-47). */
.buho-page-head--quote[hidden] {
	display: none;
}

.buho-page-head__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.buho-page-head__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	font-size: 0.9375rem;
	color: var(--buho-ink-2);
}

.buho-page-head__aside[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.buho-page-head--quote {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.buho-page-head__aside {
		max-width: 34rem;
		justify-content: flex-end;
		text-align: right;
	}
}

/* minmax(0, 1fr): a child's intrinsic width (the contact form's phone row) must never widen the
   column past a 375 px screen (found in T-52). */
.buho-two-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

@media (min-width: 1024px) {
	.buho-two-col {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
}

.buho-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.buho-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--brand-line);
	background: #fff;
}

.buho-panel__title {
	font-size: 1.625rem;
	color: var(--brand-navy);
}

@media (min-width: 782px) {
	.buho-panel {
		padding: 28px;
	}
}

.buho-prose {
	max-width: 47.5rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--buho-ink-2);
}

.buho-prose > * + * {
	margin-top: 1em;
}

.buho-prose h2 {
	font-size: 1.75rem;
	color: var(--brand-navy);
}

.buho-prose h3 {
	font-size: 1.375rem;
	color: var(--brand-navy);
}

.buho-prose > h2 + *,
.buho-prose > h3 + * {
	margin-top: 0.5em;
}

/* ------------------------------------------------------------------ quote list (buho-quote-list) */

/* Design: design/claude-design-export/quote-list/ (T-47). Lines + the sticky request form side by
   side from 1200px; one column below. The lines switch between table rows and cards by the width
   of their own column (container query), so they fit next to the form and on phones alike. */

.buho-quote {
	display: grid;
	gap: 28px;
	padding-top: 8px;
}

.buho-quote > * {
	min-width: 0;
	margin: 0;
}

.buho-quote__loading {
	color: var(--brand-muted);
}

.buho-quote h2 {
	font-size: 1.5rem;
	color: var(--brand-navy);
}

.buho-quote__mono {
	font-family: var(--font-code);
	font-variant-numeric: tabular-nums;
}

.buho-quote__kicker {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-quote__status {
	margin: 0;
	font-size: 0.875rem;
	color: var(--buho-ink-2);
}

.buho-quote__status:empty {
	display: none;
}

/* Buttons: hairline, square, navy text (design 2a). */
.buho-quote button {
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--color-field-border);
	border-radius: 0;
	background: transparent;
	color: var(--brand-navy);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
}

.buho-quote button:hover {
	border-color: var(--brand-navy);
	background: #fff;
}

.buho-quote button:disabled {
	border-color: var(--brand-line);
	background: transparent;
	color: var(--brand-disabled);
	cursor: not-allowed;
}

.buho-quote__new {
	border-color: var(--brand-navy) !important;
}

.buho-quote__new:disabled {
	border-color: var(--brand-line) !important;
}

.buho-quote__button,
.buho-quote .buho-quote__project-form button[type="submit"],
.buho-quote .buho-quote__form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid var(--brand-navy);
	background: var(--brand-navy);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.buho-quote__button:hover,
.buho-quote .buho-quote__project-form button[type="submit"]:hover,
.buho-quote .buho-quote__form button[type="submit"]:hover {
	background: var(--brand-navy-700);
	color: #fff;
}

.buho-quote .buho-quote__danger {
	border-color: var(--brand-ink);
	background: var(--brand-ink);
	color: #fff;
}

.buho-quote .buho-quote__danger:hover {
	background: #000;
	color: #fff;
}

/* ---- The project heading (signed in) */

.buho-quote__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.buho-quote__head-main {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.buho-quote__titlebar {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.buho-quote__title {
	margin: 0;
	font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
	line-height: 1.05;
	color: var(--brand-navy);
	overflow-wrap: anywhere;
}

/* The title is the switcher: the name plus a chevron box. */
.buho-quote .buho-quote__switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 8px 14px;
	border: 1px solid var(--brand-navy);
	background: #fff;
	color: var(--brand-navy);
	font: inherit;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: left;
}

.buho-quote__switch-name {
	min-width: 0;
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

.buho-quote__start-link {
	margin: 6px 0 0;
}

.buho-quote__chevron {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
}

.buho-quote__switch[aria-expanded="true"] .buho-quote__chevron svg {
	transform: rotate(180deg);
}

/* Small screens: Rename / Delete as underlined text buttons, "New project" in the menu. */
.buho-quote__project-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
}

.buho-quote .buho-quote__project-actions button {
	padding: 0;
	border: 0;
	background: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.buho-quote__project-actions .buho-quote__new {
	display: none;
}

/* The switcher's list. */
.buho-quote__menu {
	z-index: 5;
	border: 1px solid var(--brand-navy);
	background: #fff;
	box-shadow: 0 12px 32px rgba(9, 60, 113, 0.16);
}

.buho-quote__menu-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-line-soft);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-quote__menu-count {
	font-family: var(--font-code);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.buho-quote__menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-quote .buho-quote__menu-item {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: 8px 16px;
	border: 0;
	border-bottom: 1px solid var(--color-line-soft);
	background: transparent;
	color: var(--brand-ink);
	text-align: left;
}

.buho-quote .buho-quote__menu-item:hover {
	background: var(--color-warm);
}

.buho-quote__menu-check {
	display: flex;
	justify-content: center;
	color: var(--brand-navy);
	visibility: hidden;
}

.buho-quote__menu-item[aria-current="true"] .buho-quote__menu-check {
	visibility: visible;
}

.buho-quote__menu-name {
	font-size: 1rem;
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

/* Names and references put into sentences by the script (fillText) stay isolated. */
.buho-quote__confirm strong,
.buho-quote__next strong {
	unicode-bidi: isolate;
}

.buho-quote__menu-list--sent .buho-quote__menu-name {
	color: var(--buho-ink-2);
}

.buho-quote__menu-meta {
	font-size: 0.8125rem;
	color: var(--brand-muted);
	text-align: right;
}

.buho-quote__menu-list--sent .buho-quote__menu-meta {
	font-family: var(--font-code);
	font-variant-numeric: tabular-nums;
}

.buho-quote__menu-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 16px;
	font-size: 0.875rem;
}

.buho-quote__menu-foot .buho-quote__new {
	align-self: stretch;
	text-align: left;
}

.buho-quote__limit {
	margin: 0;
	line-height: 1.45;
	color: var(--buho-ink-2);
}

/* The project form: rename / new (inline), or the first project (a blueprint panel). */
.buho-quote__editor {
	position: relative;
	display: grid;
	gap: 16px;
}

.buho-quote__editor > .buho-corner {
	display: none;
}

.buho-quote__editor.is-start {
	padding: 24px;
	border: 1px solid var(--brand-line);
	background: #fff;
}

.buho-quote__editor.is-start > .buho-corner {
	display: block;
}

.buho-quote__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--buho-ink-2);
}

.buho-quote__intro p {
	margin: 0;
}

.buho-quote__intro-lead {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--brand-navy);
}

.buho-quote__project-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.buho-quote__project-form .buho-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.buho-quote__project-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.buho-quote .buho-quote__project-row input {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 48px;
	font-size: 1rem;
	font-weight: 400;
}

/* Small screens: the name on its own line, Save and Cancel side by side under it. */
@media (max-width: 781.98px) {
	.buho-quote .buho-quote__editor:not(.is-start) .buho-quote__project-row input {
		flex-basis: 100%;
	}

	.buho-quote .buho-quote__editor:not(.is-start) .buho-quote__project-row button {
		flex: 1 1 0;
	}
}

.buho-quote__intro-link {
	margin: 0;
	font-size: 0.875rem;
}

/* The delete confirmation. */
.buho-quote__confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 14px;
	border: 1px solid var(--brand-navy);
	background: #fff;
}

.buho-quote__confirm p {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.9375rem;
}

.buho-quote__confirm strong {
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* ---- Sent: the banner after sending, the strip on a sent project */

.buho-quote__confirmation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	padding: 18px;
	background: var(--brand-navy);
	color: #d3deea;
}

.buho-quote__confirmation-dot {
	width: 10px;
	height: 10px;
	margin-top: 10px;
	border-radius: 50%;
	background: var(--brand-amber);
}

.buho-quote__confirmation > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.buho-quote .buho-quote__confirmation h2 {
	margin: 0;
	font-size: 1.25rem;
	color: #fff;
}

.buho-quote__confirmation strong {
	font-family: var(--font-code);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.buho-quote__confirmation p {
	margin: 0;
	font-size: 0.9375rem;
}

.buho-quote__confirmation :focus-visible {
	outline-color: #fff;
}

.buho-quote__sent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 28px;
	padding: 12px 14px;
	border: 1px solid var(--brand-line);
	background: #fff;
	font-size: 0.875rem;
}

.buho-quote__sent-tag {
	display: inline-flex;
	padding: 4px 10px;
	border: 1px solid var(--brand-navy);
	color: var(--brand-navy);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.buho-quote__sent strong {
	font-weight: 700;
}

/* ---- Lines */

.buho-quote__schedule {
	display: flex;
	flex-direction: column;
	gap: 12px;
	container-type: inline-size;
}

.buho-quote__schedule > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.buho-quote__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 32px 0;
	border-top: 1px solid var(--brand-navy);
	border-bottom: 1px solid var(--buho-line-2);
}

.buho-quote__empty p {
	margin: 0;
	color: var(--buho-ink-2);
}

.buho-quote .buho-quote__empty-title {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--brand-navy);
}

/* The table keeps its semantics (row headers, labelled controls); every row is a grid. Cards
   (white, framed) by default; table rows from a 600px-wide column. */
.buho-quote__lines,
.buho-quote__lines tbody {
	display: block;
	width: 100%;
	font-size: 0.9375rem;
}

.buho-quote__lines thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.buho-quote__lines tbody {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.buho-quote__line {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 88px 44px;
	grid-template-areas:
		"thumb code code remove"
		"thumb product product remove"
		"thumb specs specs remove"
		"optic optic qty qty"
		"note note note note"
		"datasheet datasheet datasheet datasheet";
	gap: 2px 12px;
	align-items: start;
	padding: 14px;
	border: 1px solid var(--brand-line);
	background: #fff;
}

.buho-quote__line--no-optic {
	grid-template-areas:
		"thumb code code remove"
		"thumb product product remove"
		"thumb specs specs remove"
		"datasheet datasheet qty qty"
		"note note note note";
}

.buho-quote__line > td,
.buho-quote__line > th {
	display: block;
	min-width: 0;
	padding: 0;
	border: 0;
}

/* The product cell is the row header (screen readers name each row by it); it looks like the
   other cells. */
.buho-quote__line > th {
	grid-area: product;
	font-weight: inherit;
	text-align: left;
	background: none;
}

.buho-quote__line > [data-col="code"] {
	grid-area: code;
}

.buho-quote__line > [data-col="specs"] {
	grid-area: specs;
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

.buho-quote__line > [data-col="optic"] {
	grid-area: optic;
	margin-top: 10px;
}

.buho-quote__line > [data-col="qty"] {
	grid-area: qty;
	align-self: end;
	margin-top: 10px;
}

.buho-quote__line > [data-col="note"] {
	grid-area: note;
	margin-top: 10px;
}

.buho-quote__line > [data-col="datasheet"] {
	grid-area: datasheet;
	align-self: center;
	margin-top: 10px;
	font-size: 0.875rem;
}

.buho-quote__line > [data-col="remove"] {
	grid-area: remove;
	justify-self: end;
}

.buho-quote__line > [data-col="thumb"] {
	grid-area: thumb;
	width: 56px;
	height: 56px;
	border: 1px solid var(--buho-line-2);
	background: var(--buho-paper);
}

.buho-quote__line--no-optic > [data-col="optic"],
.buho-quote__line--no-datasheet > [data-col="datasheet"] {
	display: none;
}

.buho-quote__line--no-optic.buho-quote__line--no-datasheet {
	grid-template-areas:
		"thumb code code remove"
		"thumb product product remove"
		"thumb specs specs remove"
		". . qty qty"
		"note note note note";
}

.buho-quote__line [data-f="thumbnail"] {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.buho-quote__line code {
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	color: var(--brand-navy);
	overflow-wrap: anywhere;
	background: none;
	padding: 0;
}

.buho-quote__line--family code {
	font-family: inherit;
	font-size: 0.9375rem;
	letter-spacing: 0;
}

.buho-quote__line [data-f="url"] {
	color: var(--brand-ink);
	text-decoration: none;
}

.buho-quote__line a[data-f="url"]:hover {
	color: var(--brand-navy);
	text-decoration: underline;
}

.buho-quote__unavailable {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-error);
}

.buho-quote__cell-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.8125rem;
	color: var(--buho-ink-2);
}

.buho-quote .buho-quote__line select {
	width: 100%;
}

.buho-quote .buho-quote__line textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px;
	border-color: var(--color-field-border);
	font-size: 0.9375rem;
	line-height: 1.4;
	resize: vertical;
}

.buho-quote [data-f="no-optic"] {
	color: var(--buho-subtle);
}

.buho-quote [data-f="note-text"] {
	color: var(--buho-ink-2);
	font-size: 0.875rem;
}

.buho-quote [data-f="qty-text"] {
	display: block;
	font-size: 1rem;
	text-align: right;
}

.buho-qty {
	display: grid;
	grid-template-columns: 44px minmax(2.5rem, 1fr) 44px;
	width: 100%;
	height: 44px;
	border: 1px solid var(--color-field-border);
	background: #fff;
}

.buho-quote .buho-qty button {
	min-height: 0;
	padding: 0;
	border: 0;
	font-size: 1.25rem;
}

.buho-quote .buho-qty input[type="number"] {
	width: 100%;
	min-height: 0;
	padding: 0 4px;
	border: 0;
	text-align: center;
	font-family: var(--font-code);
	font-size: 1rem;
	-moz-appearance: textfield;
	appearance: textfield;
}

.buho-qty input::-webkit-outer-spin-button,
.buho-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.buho-quote .buho-quote__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-color: transparent;
	color: var(--brand-muted);
}

.buho-quote .buho-quote__remove:hover {
	border-color: transparent;
	background: transparent;
	color: var(--brand-navy);
}

/* Read-only (sent) lines: the values only. */
.buho-quote__line--readonly {
	grid-template-areas:
		"thumb code code qty"
		"thumb product product qty"
		"thumb specs specs qty"
		"optic optic optic optic"
		"note note note note"
		"datasheet datasheet datasheet datasheet";
}

.buho-quote__line--readonly > [data-col="qty"] {
	align-self: start;
	margin-top: 0;
}

.buho-quote__line--readonly > [data-col="optic"],
.buho-quote__line--readonly > [data-col="note"] {
	margin-top: 6px;
	font-size: 0.875rem;
}

.buho-quote__line--readonly > [data-col="remove"] {
	display: none;
}

@container (min-width: 600px) {
	.buho-quote__lines thead {
		position: static;
		display: block;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.buho-quote__lines thead tr {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) 120px 132px 44px;
		gap: 16px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--brand-navy);
	}

	.buho-quote__lines thead th,
	.buho-quote__lines thead td {
		padding: 0;
		border: 0;
		background: none;
		font-size: 0.6875rem;
		font-weight: 400;
		letter-spacing: 0.12em;
		text-align: left;
		text-transform: uppercase;
		color: var(--brand-muted);
	}

	.buho-quote__lines thead [data-col="product"] {
		grid-column: 2;
		grid-row: 1;
	}

	.buho-quote__lines thead [data-col="optic"] {
		grid-column: 3;
		grid-row: 1;
	}

	.buho-quote__lines thead [data-col="qty"] {
		grid-column: 4;
		grid-row: 1;
	}

	.buho-quote__lines thead [data-col="code"],
	.buho-quote__lines thead [data-col="specs"],
	.buho-quote__lines thead [data-col="note"],
	.buho-quote__lines thead [data-col="datasheet"],
	.buho-quote__lines thead [data-col="remove"],
	.buho-quote__lines thead [data-col="thumb"] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.buho-quote__lines tbody {
		gap: 0;
	}

	.buho-quote__line,
	.buho-quote__line--no-optic,
	.buho-quote__line--no-optic.buho-quote__line--no-datasheet,
	.buho-quote__line--readonly {
		grid-template-columns: 72px minmax(0, 1fr) 120px 132px 44px;
		grid-template-rows: auto auto auto auto auto 1fr;
		grid-template-areas:
			"thumb code optic qty remove"
			"thumb product optic qty remove"
			"thumb specs optic qty remove"
			"thumb note optic qty remove"
			"thumb datasheet optic qty remove"
			"thumb . optic qty remove";
		gap: 4px 16px;
		padding: 18px 0;
		border: 0;
		border-bottom: 1px solid var(--buho-line-2);
		background: none;
	}

	.buho-quote__line > [data-col="thumb"] {
		width: 72px;
		height: 72px;
		background: #fff;
	}

	.buho-quote__line code {
		font-size: 1.25rem;
	}

	.buho-quote__line--family code {
		font-size: 1rem;
	}

	.buho-quote__line > th {
		font-size: 1rem;
	}

	.buho-quote__line > [data-col="specs"] {
		font-size: 0.875rem;
	}

	.buho-quote__line > [data-col="optic"],
	.buho-quote__line > [data-col="qty"] {
		align-self: start;
		margin-top: 0;
	}

	.buho-quote__line--no-optic > [data-col="optic"],
	.buho-quote__line--readonly > [data-col="optic"] {
		display: block;
		font-size: 0.9375rem;
	}

	/* The optic column has its own head; the note keeps its label beside the field. */
	.buho-quote__line > [data-col="optic"] .buho-quote__cell-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.buho-quote__line > [data-col="note"] {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 8px;
	}

	.buho-quote__line > [data-col="note"] .buho-quote__cell-label {
		margin: 0;
	}

	.buho-quote .buho-quote__line textarea {
		flex: 1;
		min-height: 38px;
		padding: 8px 10px;
		font-size: 0.875rem;
	}

	.buho-quote__line > [data-col="datasheet"] {
		align-self: start;
		margin-top: 4px;
		font-size: 0.8125rem;
	}

	.buho-quote__line--readonly > [data-col="note"] {
		margin-top: 4px;
	}

	.buho-quote [data-f="qty-text"] {
		text-align: left;
	}
}

/* ---- The request form */

.buho-quote__request {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--brand-line);
	background: #fff;
	container-type: inline-size;
}

.buho-quote__request-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 20px 18px;
	background: var(--brand-navy);
	color: #d3deea;
}

.buho-quote__request-head .buho-quote__kicker {
	color: #b9c9dd;
}

.buho-quote .buho-quote__request-head h2 {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.1;
	color: #fff;
}

.buho-quote__request-head p {
	margin: 0;
	font-size: 0.9375rem;
}

.buho-quote__request > p {
	margin: 0;
	padding: 12px 20px 0;
	font-size: 0.8125rem;
	color: var(--brand-muted);
}

/* T-53: guests can sign in to have the form filled from their account. */
.buho-quote__signin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 16px 20px 0;
	padding: 12px 14px;
	border: 1px solid var(--brand-line);
	background: var(--brand-surface);
}

.buho-quote__signin[hidden] {
	display: none;
}

.buho-quote__signin-text {
	flex: 1 1 14rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--buho-ink-2);
}

.buho-quote .buho-quote__signin-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--brand-navy);
	background: #fff;
	color: var(--brand-navy);
	font-weight: 600;
	text-decoration: none;
}

.buho-quote .buho-quote__signin-button:hover {
	background: var(--brand-navy);
	color: #fff;
}

.buho-quote__form {
	display: flex;
	flex-direction: column;
}

.buho-quote__group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-content: start;
	gap: 14px 12px;
	min-width: 0;
	margin: 0;
	padding: 18px 20px;
	border: 0;
	border-top: 1px solid var(--color-line-soft);
}

.buho-quote__group:first-child {
	border-top: 0;
}

.buho-quote__group > * {
	grid-column: 1 / -1;
	margin: 0;
}

.buho-quote__group--about > [data-field="company"],
.buho-quote__group--about > [data-field="role"] {
	grid-column: auto;
}

.buho-quote__legend {
	display: flex;
	align-items: center;
	gap: 10px;
	float: left;
	width: 100%;
	margin: 0 0 2px;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-quote__legend-no {
	font-family: var(--font-code);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--brand-navy);
}

.buho-quote__form .buho-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.buho-quote__form .buho-field input,
.buho-quote__form .buho-field select,
.buho-quote__form .buho-field textarea {
	width: 100%;
	min-width: 0;
	min-height: 46px;
	font-weight: 400;
}

.buho-quote__form .buho-field textarea {
	padding: 10px 12px;
	resize: vertical;
}

.buho-field__hint {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--brand-muted);
}

.buho-quote__optional {
	font-weight: 400;
	color: var(--brand-muted);
}

/* Phone (T-44): a fieldset with a narrow country code select and the number taking the rest. */
.buho-quote__form .buho-field--phone {
	min-width: 0;
	padding: 0;
	border: 0;
}

.buho-quote__form .buho-field--phone legend {
	padding: 0;
	margin: 0 0 6px;
}

.buho-quote__form .buho-phone {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.buho-quote__form .buho-phone .buho-phone__cc {
	flex: 0 0 auto;
	width: 8.5rem;
	max-width: 45%;
	padding: 0 6px;
	font-family: var(--font-code);
	font-size: 0.875rem;
	text-overflow: ellipsis;
}

.buho-quote__form .buho-phone .buho-phone__number {
	flex: 1 1 auto;
	width: auto;
	font-family: var(--font-code);
}

.buho-field__error {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-error);
}

.buho-quote__form [aria-invalid="true"] {
	border-color: var(--color-error);
}

.buho-quote__send {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 20px;
	border-top: 1px solid var(--brand-navy);
	background: var(--color-warm);
}

.buho-quote .buho-quote__form button[type="submit"] {
	width: 100%;
	min-height: 54px;
	font-size: 1rem;
}

.buho-quote .buho-quote__form button[type="submit"] {
	gap: 0;
}

.buho-quote__form button[type="submit"] svg {
	flex: none;
	margin-left: 10px;
}

.buho-quote__send-count {
	white-space: pre;
}

.buho-quote__fine,
.buho-quote__privacy {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--buho-ink-2);
}

@container (min-width: 720px) {
	.buho-quote__form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.buho-quote__group--reach {
		border-top: 0;
		border-left: 1px solid var(--color-line-soft);
	}

	.buho-quote__group--project,
	.buho-quote__send {
		grid-column: 1 / -1;
	}

	.buho-quote__send {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.buho-quote .buho-quote__form button[type="submit"] {
		width: auto;
		min-width: 18rem;
	}

	.buho-quote__fine {
		flex: 1 1 16rem;
	}
}

/* "What happens next" (after sending, and on a sent project). */
.buho-quote__next {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--color-warm-line);
	background: var(--color-warm);
}

.buho-quote .buho-quote__next h2 {
	margin: 0;
	font-size: 1.625rem;
}

.buho-quote__next ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--buho-ink-2);
}

.buho-quote__next strong {
	white-space: nowrap;
	font-family: var(--font-code);
	font-variant-numeric: tabular-nums;
	color: var(--brand-ink);
}

.buho-quote__next p {
	margin: 0;
}

@media (min-width: 782px) {
	.buho-quote__head-main {
		align-items: flex-start;
	}

	.buho-quote__titlebar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px 24px;
		width: 100%;
	}

	.buho-quote .buho-quote__switch {
		width: auto;
		min-height: 0;
		padding: 0;
		border: 0;
		background: transparent;
		font-size: inherit;
		line-height: inherit;
		gap: 16px;
	}

	.buho-quote .buho-quote__switch:hover {
		background: transparent;
	}

	.buho-quote__chevron {
		width: 40px;
		height: 40px;
		border: 1px solid var(--brand-navy);
	}

	.buho-quote .buho-quote__switch:hover .buho-quote__chevron {
		background: #fff;
	}

	.buho-quote__project-actions {
		gap: 8px;
	}

	.buho-quote .buho-quote__project-actions button {
		padding: 10px 16px;
		border: 1px solid var(--color-field-border);
		text-decoration: none;
	}

	.buho-quote__project-actions .buho-quote__new {
		display: inline-block;
	}

	.buho-quote__project-actions .buho-quote__new[hidden] {
		display: none;
	}

	.buho-quote__menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: min(460px, 100%);
		margin-top: 10px;
	}

	.buho-quote__editor.is-start {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		padding: 40px;
	}

	/* Renaming: the name field takes the title's place, at title-like size. */
	.buho-quote .buho-quote__editor.is-rename .buho-quote__project-row input {
		flex: 0 1 520px;
		min-height: 56px;
		border-color: var(--brand-navy);
		font-size: 1.75rem;
		font-weight: 600;
		color: var(--brand-navy);
	}

	.buho-quote .buho-quote__editor.is-rename .buho-quote__project-row button {
		min-height: 56px;
		padding-inline: 22px;
	}

	.buho-quote__confirm {
		flex-wrap: nowrap;
		gap: 20px;
		padding: 18px 20px;
	}

	.buho-quote__confirm p {
		flex: 1 1 auto;
		font-size: 1rem;
	}

	.buho-quote__confirmation {
		gap: 20px;
		padding: 24px;
	}

	.buho-quote .buho-quote__confirmation h2 {
		font-size: 1.5rem;
	}

	.buho-quote__sent {
		padding: 14px 18px;
		font-size: 0.9375rem;
	}

	.buho-quote__request-head {
		padding: 22px 24px 20px;
	}

	.buho-quote .buho-quote__request-head h2 {
		font-size: 1.875rem;
	}

	.buho-quote__group {
		padding: 20px 24px;
	}

	.buho-quote__send {
		padding: 20px 24px 24px;
	}

	.buho-quote__next {
		padding: 28px;
	}
}

@media (min-width: 1200px) {
	.buho-quote {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 28px 48px;
		align-items: start;
	}

	/* Auto-placed: hidden sections create no empty rows. */
	.buho-quote__loading,
	.buho-quote__head,
	.buho-quote__confirmation,
	.buho-quote__sent {
		grid-column: 1 / -1;
	}

	.buho-quote__schedule {
		grid-column: 1;
	}

	.buho-quote__request,
	.buho-quote__next {
		grid-column: 2;
	}

	.buho-quote__send {
		position: static;
	}
}

/* The form follows the page while the lines scroll, when the window is tall enough to show it whole. */
@media (min-width: 1200px) and (min-height: 980px) {
	.buho-quote__request {
		position: sticky;
		top: 24px;
	}
}

/* ------------------------------------------------------------------ account (buho-accounts) */

.buho-main--account .buho-account {
	margin-top: 8px;
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ appearance (T-55) */

/*
 * Light / Dark / System. The visitor's choice (assets/js/color-scheme.js, inc/color-scheme.php)
 * is data-theme="light" | "dark" on <html>; "System" (the default) leaves the attribute off and
 * follows prefers-color-scheme. Light is the palette above, unchanged.
 *
 * Dark mode is written twice, identically: once under :root[data-theme="dark"] (chosen) and once
 * inside @media (prefers-color-scheme: dark) under :root:not([data-theme="light"]) (System, also
 * without JavaScript). tests/js/color-scheme-css.test.js fails when the two differ.
 *
 * - Tokens: the dark block redefines the theme.json presets and the theme names, so everything
 *   that reads a variable (theme, plugins) follows. --brand-navy turns light (text, links, rules);
 *   navy fills use --buho-navy-surface, which stays navy.
 * - Rules: colours written as literals above (#fff panels, navy fills) are restated for dark with
 *   the same selector inside :where(<root condition>), so they keep their own specificity and win
 *   only by coming last; a more specific state rule (hover, selected) still wins as in light.
 * - Elsewhere (home.css, plugins): put dark values under the same two root conditions, ideally as
 *   variables only.
 */

/* Roles with their light values (the dark blocks below redefine them). */
:root {
	color-scheme: light;
	--buho-navy-ink: #093c71; /* Brand navy that never turns light: text on a white fill. */
	--buho-navy-surface: #093c71; /* Navy fills (buttons, footer, navy band) in dark mode. */
	--buho-navy-surface-hover: #062a50;
	--buho-on-brand: #fff; /* Text on a --brand-navy fill. */
	--buho-surface-muted: #f0f1f2;
	--buho-photo-panel: #fff; /* Behind product photos. */
	--buho-photo-filter: none;
	--buho-shadow: 0 18px 32px rgba(9, 60, 113, 0.08);
}

/* Header wordmark: the white copy is for dark mode only. */
.buho-logo__img--on-dark {
	display: none;
}

/* The switch: three toggle buttons. Hidden until the script runs (it does nothing without it). */
.buho-scheme[hidden] {
	display: none;
}

.buho-scheme__options {
	display: inline-flex;
	border: 1px solid var(--brand-line);
}

.buho-scheme__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--brand-muted);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
}

.buho-scheme__option + .buho-scheme__option {
	border-left: 1px solid var(--brand-line);
}

.buho-scheme__option:hover {
	color: var(--brand-navy);
}

.buho-scheme__option[aria-pressed="true"] {
	background: var(--brand-navy);
	color: var(--buho-on-brand);
}

.buho-scheme__icon {
	flex: none;
}

/* Header: from 1280 px only (below that the header has no room, in Spanish with a classic scrollbar
   it overflowed at 1200 px; the mobile menu carries it under 1024 px and the footer at every width). */
.buho-scheme--header:not([hidden]) {
	display: none;
}

@media (min-width: 1280px) {
	.buho-scheme--header:not([hidden]) {
		display: flex;
	}
}

/* Mobile menu: a titled row with visible labels. */
.buho-drawer .buho-scheme {
	margin-top: 20px;
}

.buho-scheme__title {
	margin-bottom: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.buho-scheme--drawer .buho-scheme__options {
	display: flex;
}

.buho-scheme--drawer .buho-scheme__option {
	flex: 1 1 0;
	gap: 6px;
	min-height: 44px;
	padding: 0 8px;
}

/* Footer, on navy in both modes. */
.buho-scheme--footer .buho-scheme__options,
.buho-scheme--footer .buho-scheme__option + .buho-scheme__option {
	border-color: rgba(255, 255, 255, 0.35);
}

.buho-scheme--footer .buho-scheme__option {
	color: #d3deea;
}

.buho-scheme--footer .buho-scheme__option:hover {
	color: #fff;
}

.buho-scheme--footer .buho-scheme__option[aria-pressed="true"] {
	background: #fff;
	color: var(--buho-navy-ink);
}

/* @buho-dark:explicit:start (theme) — dark chosen in the switch. Keep identical to the system block. */
:root[data-theme="dark"] {
	color-scheme: dark;

	/* theme.json presets (headings, links, body, separators follow them). "white" stays white: it
	   is the text colour on navy (WordPress's button element). */
	--wp--preset--color--navy: #9fc3ec;
	--wp--preset--color--navy-600: #b5d1f1;
	--wp--preset--color--navy-700: #cde0f6;
	--wp--preset--color--paper: #121110;
	--wp--preset--color--warm: #24211d;
	--wp--preset--color--warm-line: #3a352e;
	--wp--preset--color--ink: #ece7df;
	--wp--preset--color--ink-2: #cdc7bd;
	--wp--preset--color--muted: #aaa398;
	--wp--preset--color--subtle: #9d968b;
	--wp--preset--color--line: #4b4740;
	--wp--preset--color--line-2: #35322d;
	--wp--preset--color--line-soft: #292723;

	/* Theme and plugin names that do not come from a preset. */
	--brand-surface: #1b1a17;
	--brand-disabled: #858a91;
	--color-error: #f2907f;
	--buho-grid-line: #26231f;
	--buho-hatch: repeating-linear-gradient(135deg, #1c1a17 0 10px, #161513 10px 20px);

	/* Appearance roles (light values in the :root block above). */
	--buho-navy-surface: #093c71;
	--buho-navy-surface-hover: #0b4a8b;
	--buho-on-brand: #10161f;
	--buho-surface-muted: #2a2723;
	--buho-photo-panel: #f0f0ee;
	--buho-photo-filter: brightness(0.94);
	--buho-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
}

/* The header wordmark: white (with its amber accent) instead of navy. */
:where(:root[data-theme="dark"]) .buho-logo__img--on-light {
	display: none;
}

:where(:root[data-theme="dark"]) .buho-logo__img--on-dark {
	display: block;
}

/* Cards, panels, fields and menus that are white in light mode. */
:where(:root[data-theme="dark"]) .skip-link.screen-reader-text:focus,
:where(:root[data-theme="dark"]) .wp-block-button.buho-button--secondary .wp-block-button__link:hover,
:where(:root[data-theme="dark"]) .wp-block-button.is-style-outline .wp-block-button__link:hover,
:where(:root[data-theme="dark"]) .buho-mega,
:where(:root[data-theme="dark"]) .buho-drawer__head,
:where(:root[data-theme="dark"]) .buho-search__field,
:where(:root[data-theme="dark"]) .buho-search__results,
:where(:root[data-theme="dark"]) .buho-resolver,
:where(:root[data-theme="dark"]) .buho-band--white,
:where(:root[data-theme="dark"]) .buho-tile:hover,
:where(:root[data-theme="dark"]) .wp-block-table.buho-schedule-example,
:where(:root[data-theme="dark"]) .buho-resource:has(a):hover,
:where(:root[data-theme="dark"]) .buho-office,
:where(:root[data-theme="dark"]) .buho-archive-hero__figure,
:where(:root[data-theme="dark"]) .buho-chip-link,
:where(:root[data-theme="dark"]) .buho-catalogue .woocommerce-ordering select,
:where(:root[data-theme="dark"]) .buho-quote select,
:where(:root[data-theme="dark"]) .buho-quote input[type="text"],
:where(:root[data-theme="dark"]) .buho-quote input[type="email"],
:where(:root[data-theme="dark"]) .buho-quote input[type="tel"],
:where(:root[data-theme="dark"]) .buho-quote input[type="number"],
:where(:root[data-theme="dark"]) .buho-quote textarea,
:where(:root[data-theme="dark"]) .buho-filter-value__box,
:where(:root[data-theme="dark"]) .buho-range__control,
:where(:root[data-theme="dark"]) .buho-chip,
:where(:root[data-theme="dark"]) .buho-collection .wp-block-query-pagination a,
:where(:root[data-theme="dark"]) .buho-collection .wp-block-query-pagination .page-numbers,
:where(:root[data-theme="dark"]) .buho-pagination a,
:where(:root[data-theme="dark"]) .buho-pagination .page-numbers,
:where(:root[data-theme="dark"]) .buho-no-results,
:where(:root[data-theme="dark"]) .buho-search-results__exact,
:where(:root[data-theme="dark"]) .buho-search-results__family,
:where(:root[data-theme="dark"]) .buho-search-results__code-link:hover,
:where(:root[data-theme="dark"]) .buho-search-results__none,
:where(:root[data-theme="dark"]) .buho-panel,
:where(:root[data-theme="dark"]) .buho-quote button:hover,
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__switch,
:where(:root[data-theme="dark"]) .buho-quote__menu,
:where(:root[data-theme="dark"]) .buho-quote__editor.is-start,
:where(:root[data-theme="dark"]) .buho-quote__confirm,
:where(:root[data-theme="dark"]) .buho-quote__sent,
:where(:root[data-theme="dark"]) .buho-quote__line,
:where(:root[data-theme="dark"]) .buho-qty,
:where(:root[data-theme="dark"]) .buho-quote__request,
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__signin-button {
	background-color: var(--brand-surface);
}

:where(:root[data-theme="dark"]) .buho-mega,
:where(:root[data-theme="dark"]) .buho-search__results,
:where(:root[data-theme="dark"]) .buho-quote__menu {
	box-shadow: var(--buho-shadow);
}

:where(:root[data-theme="dark"]) .buho-tile__media,
:where(:root[data-theme="dark"]) .buho-filter-value.is-disabled .buho-filter-value__box {
	background-color: var(--buho-surface-muted);
}

:where(:root[data-theme="dark"]) .buho-tile__number {
	background-color: rgba(18, 17, 16, 0.86);
}

/* Selected and current states: the light --brand-navy fill with dark text, so the state stands out
   from the dark page (a navy fill would not reach 3:1 against it). */
:where(:root[data-theme="dark"]) .buho-chip-link.is-current,
:where(:root[data-theme="dark"]) .buho-chip-link.is-current .buho-chip-link__count,
:where(:root[data-theme="dark"]) .buho-filter-value.is-selected .buho-filter-value__box,
:where(:root[data-theme="dark"]) .buho-collection .wp-block-query-pagination .page-numbers.current,
:where(:root[data-theme="dark"]) .buho-pagination .page-numbers.current {
	color: var(--buho-on-brand);
}

/* Navy fills stay navy (white text on them is unchanged); --brand-navy itself turns light. */
:where(:root[data-theme="dark"]) .wp-element-button,
:where(:root[data-theme="dark"]) .wp-block-button .wp-block-button__link,
:where(:root[data-theme="dark"]) .buho-button,
:where(:root[data-theme="dark"]) .buho-search__submit,
:where(:root[data-theme="dark"]) .buho-search__option--exact .buho-search__option-kind,
:where(:root[data-theme="dark"]) .buho-band--navy,
:where(:root[data-theme="dark"]) .buho-site-footer,
:where(:root[data-theme="dark"]) .buho-range__apply,
:where(:root[data-theme="dark"]) .buho-search-results__badge,
:where(:root[data-theme="dark"]) .buho-quote__button,
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__project-form button[type="submit"],
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__form button[type="submit"],
:where(:root[data-theme="dark"]) .buho-quote__confirmation,
:where(:root[data-theme="dark"]) .buho-quote__request-head,
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__signin-button:hover {
	background-color: var(--buho-navy-surface);
}

:where(:root[data-theme="dark"]) .wp-element-button:hover,
:where(:root[data-theme="dark"]) .wp-block-button .wp-block-button__link:hover,
:where(:root[data-theme="dark"]) .buho-button:hover,
:where(:root[data-theme="dark"]) .buho-search__submit:hover,
:where(:root[data-theme="dark"]) .buho-range__apply:hover,
:where(:root[data-theme="dark"]) .buho-quote__button:hover,
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__project-form button[type="submit"]:hover,
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__form button[type="submit"]:hover {
	background-color: var(--buho-navy-surface-hover);
}

/* White button on navy: navy text that never turns light. */
:where(:root[data-theme="dark"]) .wp-block-button.buho-button--inverse .wp-block-button__link {
	background-color: #fff;
	color: var(--buho-navy-ink);
}

:where(:root[data-theme="dark"]) .wp-block-button.buho-button--inverse .wp-block-button__link:hover {
	background-color: var(--color-warm);
	color: var(--brand-navy-700);
}

/* The "delete" button is filled with ink, which turns light. */
:where(:root[data-theme="dark"]) .buho-quote .buho-quote__danger {
	border-color: #b42318;
	background-color: #b42318;
}

:where(:root[data-theme="dark"]) .buho-quote .buho-quote__danger:hover {
	border-color: #000;
	background-color: #000;
}

/* Small details. */
:where(:root[data-theme="dark"]) ::selection {
	background: rgba(159, 195, 236, 0.32);
}

:where(:root[data-theme="dark"]) .buho-corner {
	color: rgba(236, 231, 223, 0.5);
}

:where(:root[data-theme="dark"]) .wp-block-button.buho-button--framed::before {
	--buho-mark: rgba(236, 231, 223, 0.55);
}

/* Product photos (datasheet cut-outs on white, studio shots on warm white) stay on a light panel,
   toned down a little so they do not glare. Category photos are left as they are. */
:where(:root[data-theme="dark"]) .buho-card__media,
:where(:root[data-theme="dark"]) .buho-quote__line > [data-col="thumb"] {
	background-color: var(--buho-photo-panel);
}

:where(:root[data-theme="dark"]) .buho-photo,
:where(:root[data-theme="dark"]) .buho-quote__line [data-f="thumbnail"],
:where(:root[data-theme="dark"]) .buho-search-results__exact-media img,
:where(:root[data-theme="dark"]) .buho-search-results__family img {
	filter: var(--buho-photo-filter);
}

@media (max-width: 781.98px) {
	:where(:root[data-theme="dark"]) .buho-filters__toggle {
		background-color: var(--buho-navy-surface);
	}

	:where(:root[data-theme="dark"]) .buho-filters__toggle-count {
		background-color: #fff;
		color: var(--buho-navy-ink);
	}

	:where(:root[data-theme="dark"]) .buho-filters.is-open .buho-filters__header {
		background-color: var(--brand-surface);
	}
}

@media (min-width: 782px) {
	:where(:root[data-theme="dark"]) .buho-quote .buho-quote__switch:hover .buho-quote__chevron {
		background-color: var(--brand-surface);
	}
}
/* @buho-dark:explicit:end */

/* @buho-dark:system:start (theme) — "System" with a dark system setting (also without JavaScript). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		/* theme.json presets (headings, links, body, separators follow them). "white" stays white: it
		   is the text colour on navy (WordPress's button element). */
		--wp--preset--color--navy: #9fc3ec;
		--wp--preset--color--navy-600: #b5d1f1;
		--wp--preset--color--navy-700: #cde0f6;
		--wp--preset--color--paper: #121110;
		--wp--preset--color--warm: #24211d;
		--wp--preset--color--warm-line: #3a352e;
		--wp--preset--color--ink: #ece7df;
		--wp--preset--color--ink-2: #cdc7bd;
		--wp--preset--color--muted: #aaa398;
		--wp--preset--color--subtle: #9d968b;
		--wp--preset--color--line: #4b4740;
		--wp--preset--color--line-2: #35322d;
		--wp--preset--color--line-soft: #292723;

		/* Theme and plugin names that do not come from a preset. */
		--brand-surface: #1b1a17;
		--brand-disabled: #858a91;
		--color-error: #f2907f;
		--buho-grid-line: #26231f;
		--buho-hatch: repeating-linear-gradient(135deg, #1c1a17 0 10px, #161513 10px 20px);

		/* Appearance roles (light values in the :root block above). */
		--buho-navy-surface: #093c71;
		--buho-navy-surface-hover: #0b4a8b;
		--buho-on-brand: #10161f;
		--buho-surface-muted: #2a2723;
		--buho-photo-panel: #f0f0ee;
		--buho-photo-filter: brightness(0.94);
		--buho-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
	}

	/* The header wordmark: white (with its amber accent) instead of navy. */
	:where(:root:not([data-theme="light"])) .buho-logo__img--on-light {
		display: none;
	}

	:where(:root:not([data-theme="light"])) .buho-logo__img--on-dark {
		display: block;
	}

	/* Cards, panels, fields and menus that are white in light mode. */
	:where(:root:not([data-theme="light"])) .skip-link.screen-reader-text:focus,
	:where(:root:not([data-theme="light"])) .wp-block-button.buho-button--secondary .wp-block-button__link:hover,
	:where(:root:not([data-theme="light"])) .wp-block-button.is-style-outline .wp-block-button__link:hover,
	:where(:root:not([data-theme="light"])) .buho-mega,
	:where(:root:not([data-theme="light"])) .buho-drawer__head,
	:where(:root:not([data-theme="light"])) .buho-search__field,
	:where(:root:not([data-theme="light"])) .buho-search__results,
	:where(:root:not([data-theme="light"])) .buho-resolver,
	:where(:root:not([data-theme="light"])) .buho-band--white,
	:where(:root:not([data-theme="light"])) .buho-tile:hover,
	:where(:root:not([data-theme="light"])) .wp-block-table.buho-schedule-example,
	:where(:root:not([data-theme="light"])) .buho-resource:has(a):hover,
	:where(:root:not([data-theme="light"])) .buho-office,
	:where(:root:not([data-theme="light"])) .buho-archive-hero__figure,
	:where(:root:not([data-theme="light"])) .buho-chip-link,
	:where(:root:not([data-theme="light"])) .buho-catalogue .woocommerce-ordering select,
	:where(:root:not([data-theme="light"])) .buho-quote select,
	:where(:root:not([data-theme="light"])) .buho-quote input[type="text"],
	:where(:root:not([data-theme="light"])) .buho-quote input[type="email"],
	:where(:root:not([data-theme="light"])) .buho-quote input[type="tel"],
	:where(:root:not([data-theme="light"])) .buho-quote input[type="number"],
	:where(:root:not([data-theme="light"])) .buho-quote textarea,
	:where(:root:not([data-theme="light"])) .buho-filter-value__box,
	:where(:root:not([data-theme="light"])) .buho-range__control,
	:where(:root:not([data-theme="light"])) .buho-chip,
	:where(:root:not([data-theme="light"])) .buho-collection .wp-block-query-pagination a,
	:where(:root:not([data-theme="light"])) .buho-collection .wp-block-query-pagination .page-numbers,
	:where(:root:not([data-theme="light"])) .buho-pagination a,
	:where(:root:not([data-theme="light"])) .buho-pagination .page-numbers,
	:where(:root:not([data-theme="light"])) .buho-no-results,
	:where(:root:not([data-theme="light"])) .buho-search-results__exact,
	:where(:root:not([data-theme="light"])) .buho-search-results__family,
	:where(:root:not([data-theme="light"])) .buho-search-results__code-link:hover,
	:where(:root:not([data-theme="light"])) .buho-search-results__none,
	:where(:root:not([data-theme="light"])) .buho-panel,
	:where(:root:not([data-theme="light"])) .buho-quote button:hover,
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__switch,
	:where(:root:not([data-theme="light"])) .buho-quote__menu,
	:where(:root:not([data-theme="light"])) .buho-quote__editor.is-start,
	:where(:root:not([data-theme="light"])) .buho-quote__confirm,
	:where(:root:not([data-theme="light"])) .buho-quote__sent,
	:where(:root:not([data-theme="light"])) .buho-quote__line,
	:where(:root:not([data-theme="light"])) .buho-qty,
	:where(:root:not([data-theme="light"])) .buho-quote__request,
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__signin-button {
		background-color: var(--brand-surface);
	}

	:where(:root:not([data-theme="light"])) .buho-mega,
	:where(:root:not([data-theme="light"])) .buho-search__results,
	:where(:root:not([data-theme="light"])) .buho-quote__menu {
		box-shadow: var(--buho-shadow);
	}

	:where(:root:not([data-theme="light"])) .buho-tile__media,
	:where(:root:not([data-theme="light"])) .buho-filter-value.is-disabled .buho-filter-value__box {
		background-color: var(--buho-surface-muted);
	}

	:where(:root:not([data-theme="light"])) .buho-tile__number {
		background-color: rgba(18, 17, 16, 0.86);
	}

	/* Selected and current states: the light --brand-navy fill with dark text, so the state stands out
	   from the dark page (a navy fill would not reach 3:1 against it). */
	:where(:root:not([data-theme="light"])) .buho-chip-link.is-current,
	:where(:root:not([data-theme="light"])) .buho-chip-link.is-current .buho-chip-link__count,
	:where(:root:not([data-theme="light"])) .buho-filter-value.is-selected .buho-filter-value__box,
	:where(:root:not([data-theme="light"])) .buho-collection .wp-block-query-pagination .page-numbers.current,
	:where(:root:not([data-theme="light"])) .buho-pagination .page-numbers.current {
		color: var(--buho-on-brand);
	}

	/* Navy fills stay navy (white text on them is unchanged); --brand-navy itself turns light. */
	:where(:root:not([data-theme="light"])) .wp-element-button,
	:where(:root:not([data-theme="light"])) .wp-block-button .wp-block-button__link,
	:where(:root:not([data-theme="light"])) .buho-button,
	:where(:root:not([data-theme="light"])) .buho-search__submit,
	:where(:root:not([data-theme="light"])) .buho-search__option--exact .buho-search__option-kind,
	:where(:root:not([data-theme="light"])) .buho-band--navy,
	:where(:root:not([data-theme="light"])) .buho-site-footer,
	:where(:root:not([data-theme="light"])) .buho-range__apply,
	:where(:root:not([data-theme="light"])) .buho-search-results__badge,
	:where(:root:not([data-theme="light"])) .buho-quote__button,
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__project-form button[type="submit"],
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__form button[type="submit"],
	:where(:root:not([data-theme="light"])) .buho-quote__confirmation,
	:where(:root:not([data-theme="light"])) .buho-quote__request-head,
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__signin-button:hover {
		background-color: var(--buho-navy-surface);
	}

	:where(:root:not([data-theme="light"])) .wp-element-button:hover,
	:where(:root:not([data-theme="light"])) .wp-block-button .wp-block-button__link:hover,
	:where(:root:not([data-theme="light"])) .buho-button:hover,
	:where(:root:not([data-theme="light"])) .buho-search__submit:hover,
	:where(:root:not([data-theme="light"])) .buho-range__apply:hover,
	:where(:root:not([data-theme="light"])) .buho-quote__button:hover,
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__project-form button[type="submit"]:hover,
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__form button[type="submit"]:hover {
		background-color: var(--buho-navy-surface-hover);
	}

	/* White button on navy: navy text that never turns light. */
	:where(:root:not([data-theme="light"])) .wp-block-button.buho-button--inverse .wp-block-button__link {
		background-color: #fff;
		color: var(--buho-navy-ink);
	}

	:where(:root:not([data-theme="light"])) .wp-block-button.buho-button--inverse .wp-block-button__link:hover {
		background-color: var(--color-warm);
		color: var(--brand-navy-700);
	}

	/* The "delete" button is filled with ink, which turns light. */
	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__danger {
		border-color: #b42318;
		background-color: #b42318;
	}

	:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__danger:hover {
		border-color: #000;
		background-color: #000;
	}

	/* Small details. */
	:where(:root:not([data-theme="light"])) ::selection {
		background: rgba(159, 195, 236, 0.32);
	}

	:where(:root:not([data-theme="light"])) .buho-corner {
		color: rgba(236, 231, 223, 0.5);
	}

	:where(:root:not([data-theme="light"])) .wp-block-button.buho-button--framed::before {
		--buho-mark: rgba(236, 231, 223, 0.55);
	}

	/* Product photos (datasheet cut-outs on white, studio shots on warm white) stay on a light panel,
	   toned down a little so they do not glare. Category photos are left as they are. */
	:where(:root:not([data-theme="light"])) .buho-card__media,
	:where(:root:not([data-theme="light"])) .buho-quote__line > [data-col="thumb"] {
		background-color: var(--buho-photo-panel);
	}

	:where(:root:not([data-theme="light"])) .buho-photo,
	:where(:root:not([data-theme="light"])) .buho-quote__line [data-f="thumbnail"],
	:where(:root:not([data-theme="light"])) .buho-search-results__exact-media img,
	:where(:root:not([data-theme="light"])) .buho-search-results__family img {
		filter: var(--buho-photo-filter);
	}

	@media (max-width: 781.98px) {
		:where(:root:not([data-theme="light"])) .buho-filters__toggle {
			background-color: var(--buho-navy-surface);
		}

		:where(:root:not([data-theme="light"])) .buho-filters__toggle-count {
			background-color: #fff;
			color: var(--buho-navy-ink);
		}

		:where(:root:not([data-theme="light"])) .buho-filters.is-open .buho-filters__header {
			background-color: var(--brand-surface);
		}
	}

	@media (min-width: 782px) {
		:where(:root:not([data-theme="light"])) .buho-quote .buho-quote__switch:hover .buho-quote__chevron {
			background-color: var(--brand-surface);
		}
	}
}
/* @buho-dark:system:end */