/**
 * Búho product page and code picker (design: design/claude-design-export/site, screens 4h–4o;
 * home hero 2a). Colours come from the theme's tokens (--brand-navy, --brand-amber,
 * --font-brand, --font-code) with the brand values as fallbacks. Amber is never text on a
 * light background; focus rings pair navy with amber (CLAUDE.md §5.2).
 */

.buho-product,
.buho-product-picker {
	--bp-navy: var(--brand-navy, #093c71);
	--bp-amber: var(--brand-amber, #faa61c);
	--bp-ink: var(--wp--preset--color--ink, #1c1f24);
	--bp-text: #3a414b;
	--bp-muted: #5b6470;
	--bp-faint: #8a919b;
	--bp-line: #c3c8cf;
	--bp-line-strong: var(--color-field-border, #858c96); /* Swatch, segment and field borders: 3.4:1 on white, 3.07:1 on paper (WCAG 1.4.11). */
	--bp-line-soft: #e1e3e6;
	--bp-paper: #f8f3ec;
	--bp-paper-line: #e3dacb;
	--bp-white: #fff; /* Text on navy fills; never changes. */
	/* Dark mode (T-55) redefines the following at the end of the file; in light they are these values. */
	--bp-fill: var(--bp-navy); /* Filled buttons (white text on them). */
	--bp-on-selected: var(--bp-white); /* Text on a selected segment or chip (--bp-navy fill, light in dark mode). */
	--bp-fill-hover: var(--brand-navy-700, #062a50);
	--bp-surface: #fff; /* Panels, fields, chips. */
	--bp-photo: #fff; /* Behind product photos. */
	--bp-hairline: #d7dadf;
	--bp-row-line: #edeef0;
	--bp-grid: #eef0f2;
	--bp-hatch-line: #e9e0d2;
	--bp-shadow: rgba(9, 60, 113, 0.08);
	--bp-code: var(--font-code, ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace);
	--bp-brand: var(--font-brand, "League Spartan", system-ui, sans-serif);
	color: var(--bp-ink);
	font-family: var(--bp-brand);
	line-height: 1.5;
}

/* The roots, everything inside them and their pseudo-elements: no reliance on a theme's
   global box-sizing rule. */
.buho-product,
.buho-product-picker,
.buho-picker,
.buho-product *,
.buho-product-picker *,
.buho-picker *,
.buho-product *::before,
.buho-product *::after,
.buho-product-picker *::before,
.buho-product-picker *::after,
.buho-picker *::before,
.buho-picker *::after {
	box-sizing: border-box;
}

.buho-product [hidden],
.buho-product-picker [hidden] {
	display: none !important;
}

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

.buho-product a,
.buho-product-picker a {
	color: var(--bp-navy);
}

/* Focus: 2 px navy + 2 px amber on light backgrounds. */
.buho-product a:focus-visible,
.buho-product button:focus-visible,
.buho-product input:focus-visible,
.buho-product select:focus-visible,
.buho-product textarea:focus-visible,
.buho-product summary:focus-visible,
.buho-product-picker a:focus-visible,
.buho-product-picker button:focus-visible,
.buho-picker__option:has(.buho-picker__input:focus-visible) {
	outline: 2px solid var(--bp-navy);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--bp-amber);
}

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

.buho-button,
.buho-product .buho-add-to-quote__button {
	min-height: 52px;
	padding: 14px 20px;
	border: 1px solid var(--bp-navy);
	background: var(--bp-fill);
	color: var(--bp-white);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.buho-button--quiet,
.buho-button--outline {
	background: transparent;
	color: var(--bp-navy);
}

.buho-button--quiet {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 15px;
}

/* ------------------------------------------------------------ page layout */

/* The page block brings its own container (the theme's single-product template has none),
   on the theme's measures when they exist. */
.buho-product {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	max-width: calc(var(--buho-max, 1184px) + 2 * var(--buho-gutter, 16px));
	margin-inline: auto;
	padding: 20px var(--buho-gutter, 16px) 24px;
}

.buho-product__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--bp-muted);
}

.buho-product__crumbs li + li::before {
	content: "/";
	margin-right: 8px;
}

.buho-product__crumbs a {
	color: var(--bp-muted);
}

.buho-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

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

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

.buho-product__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-muted);
}

.buho-product__eyebrow a {
	color: var(--bp-muted);
	text-decoration: none;
}

.buho-product__title {
	margin: 0;
	font-weight: 600;
	font-size: clamp(36px, 5vw, 52px);
	line-height: 1.04;
	color: var(--bp-navy);
}

.buho-product__collection {
	margin: 0;
	font-size: 15px;
}

.buho-product__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-product__chips li {
	padding: 6px 12px;
	border: 1px solid var(--bp-line-strong);
	background: var(--bp-surface);
	font-size: 14px;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.buho-product__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
		gap: 48px;
	}
}

/* Narrow screens: name and facts first, then the images, then the picker (design 4h mobile). */
@media (max-width: 1023px) {
	.buho-product__top {
		gap: 16px;
	}

	.buho-product__summary {
		display: contents;
	}

	.buho-product__media {
		order: 3;
	}

	.buho-product__summary > * {
		order: 4;
	}

	.buho-product__summary > .buho-product__head {
		order: 1;
	}

	.buho-product__summary > .buho-product__chips {
		order: 2;
	}
}

/* ------------------------------------------------------------ gallery */

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

.buho-gallery__strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.buho-gallery__figure {
	flex: 0 0 100%;
	margin: 0;
	border: 1px solid var(--bp-line);
	background: var(--bp-photo);
	scroll-snap-align: center;
}

.buho-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Datasheet photos (T-51; class and size caps from the theme's inc/media.php and theme.css):
   shown whole, centred on the white square, never larger than their own pixels. */
.buho-gallery__figure:has(> .buho-photo) {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* one cell the size of the square: a portrait photo never stretches it */
	place-items: center;
	aspect-ratio: 1 / 1;
}

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

.buho-gallery__placeholder {
	aspect-ratio: 1 / 1;
	background-color: var(--bp-surface);
	background-image: linear-gradient(var(--bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
	background-size: 24px 24px;
}

.buho-gallery__caption {
	padding: 10px 14px;
	border-top: 1px solid var(--bp-line);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-text);
}

.buho-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buho-gallery__thumb {
	display: block;
	width: 96px;
	height: 96px;
	border: 1px solid var(--bp-line);
	background: var(--bp-photo);
}

.buho-gallery__thumb[aria-current="true"] {
	border: 2px solid var(--bp-navy);
}

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

/* ------------------------------------------------------------ picker */

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

.buho-picker__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 22px;
	background: var(--bp-paper);
	border: 1px solid var(--bp-paper-line);
}

.buho-picker__axis {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.buho-picker__legend {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-bottom: 8px;
	padding: 0;
}

.buho-picker__label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}

.buho-picker__current {
	font-size: 14px;
	color: var(--bp-text);
	text-align: right;
}

.buho-picker__current.is-empty {
	color: var(--bp-muted);
}

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

.buho-picker__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 9px 11px;
	border: 1px solid var(--bp-line-strong);
	background: transparent;
	font-size: 14px;
	line-height: 1.25;
	color: var(--bp-ink);
	cursor: pointer;
}

/* The native radio stays in place (keyboard and screen readers), invisible, over the label. */
.buho-picker__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.buho-picker__option:has(.buho-picker__input:checked) {
	padding: 8px 10px;
	border: 2px solid var(--bp-navy);
	background: var(--bp-surface);
	color: var(--bp-navy);
	font-weight: 600;
}

.buho-picker__option.is-unavailable {
	border-style: dashed;
	border-color: var(--bp-line);
	color: var(--bp-faint);
	text-decoration: line-through;
	cursor: not-allowed;
}

.buho-picker__option.is-unavailable .buho-swatch {
	opacity: 0.45;
}

/* Segmented buttons: CCT, beam, model. */
.buho-picker__axis--segment .buho-picker__options,
.buho-picker__axis--model .buho-picker__options {
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 1px;
	padding: 1px;
}

.buho-picker__axis--model .buho-picker__options {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.buho-picker__axis--segment .buho-picker__option,
.buho-picker__axis--model .buho-picker__option {
	justify-content: center;
	min-height: 44px;
	padding: 11px 10px;
	border: 0;
	outline: 1px solid var(--bp-line-strong);
	background: var(--bp-paper);
	font-size: 15px;
	text-align: center;
	white-space: nowrap;
}

.buho-picker__axis--model .buho-picker__option {
	font-family: var(--bp-code);
	font-size: 14px;
	white-space: normal;
	word-break: break-word;
}

.buho-picker__axis--segment .buho-picker__option:has(.buho-picker__input:checked),
.buho-picker__axis--model .buho-picker__option:has(.buho-picker__input:checked) {
	padding: 11px 10px;
	border: 0;
	background: var(--bp-navy);
	color: var(--bp-on-selected);
}

.buho-picker__axis--segment .buho-picker__option.is-unavailable,
.buho-picker__axis--model .buho-picker__option.is-unavailable {
	background: repeating-linear-gradient(135deg, var(--bp-paper) 0 6px, var(--bp-hatch-line) 6px 7px);
}

.buho-picker__note,
.buho-picker__facts {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--bp-text);
}

.buho-picker__facts {
	margin: 0;
}

.buho-picker__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.buho-picker__clear {
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--bp-navy);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

/* Swatches: a colour hint; the finish name is always written next to it. */
.buho-swatch {
	display: inline-flex;
	flex: none;
	width: 22px;
	height: 22px;
	overflow: hidden;
	border: 1px solid var(--bp-line-strong);
}

.buho-swatch__tone {
	flex: 1 1 0;
}

.buho-swatch--white { background: #f4f4f2; }
.buho-swatch--black { background: #26282b; }
.buho-swatch--grey { background: #6e7379; }
.buho-swatch--dark { background: #3b3e43; }
.buho-swatch--gun { background: #3b3e43; }
.buho-swatch--bronze { background: #8c6a43; }
.buho-swatch--neutral { background: #c9ccd1; }
.buho-swatch--silver { background: linear-gradient(135deg, #e6e8eb 30%, #a9aeb5 52%, #e6e8eb 70%); }
.buho-swatch--gold { background: linear-gradient(135deg, #d9be86 30%, #9c7b3f 52%, #d9be86 70%); }
.buho-swatch--polish-black { background: linear-gradient(135deg, #0d0e10 40%, #4a4e55 52%, #0d0e10 64%); }
.buho-swatch--polish-white { background: linear-gradient(135deg, #fff 40%, #dadde1 52%, #fff 64%); }
.buho-swatch--clear { background: repeating-linear-gradient(45deg, #fff 0 4px, #e3e8ed 4px 8px); }

/* Resolved code. */
.buho-picker__result {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--bp-line);
	background: var(--bp-surface);
}

.buho-picker__code-box {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.buho-picker__code-label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-muted);
}

.buho-picker__code {
	font-family: var(--bp-code);
	font-size: clamp(24px, 4vw, 34px);
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	color: var(--bp-navy);
	word-break: break-all;
}

.buho-picker__need {
	font-size: 16px;
	line-height: 1.35;
	color: var(--bp-text);
}

.buho-picker__assigned {
	font-size: 18px;
	line-height: 1.35;
	color: var(--bp-navy);
}

.buho-picker__copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid var(--bp-line-strong);
	background: transparent;
	color: var(--bp-navy);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.buho-picker__versions {
	font-size: 14px;
	color: var(--bp-text);
}

.buho-picker__versions p {
	margin: 0 0 4px;
}

.buho-picker__versions ul {
	margin: 0;
	padding-left: 20px;
}

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

.buho-product .buho-add-to-quote {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.buho-product .buho-add-to-quote__hint {
	/* The picker already says what is missing; kept for the button's aria-describedby. */
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.buho-product .buho-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.buho-product .buho-field select,
.buho-product .buho-field textarea,
.buho-product .buho-field input {
	min-height: 46px;
	padding: 0 10px;
	border: 1px solid var(--bp-line-strong);
	background: var(--bp-surface);
	font: inherit;
	font-weight: 400;
	font-size: 15px;
}

.buho-product .buho-field textarea {
	padding: 10px;
}

.buho-qty {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	max-width: 160px;
	height: 52px;
	border: 1px solid var(--bp-line-strong);
	background: var(--bp-surface);
}

.buho-product .buho-qty input {
	min-height: 0;
	border: 0;
	text-align: center;
	font-family: var(--bp-code);
	appearance: textfield;
}

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

.buho-qty__btn {
	border: 0;
	background: transparent;
	color: var(--bp-navy);
	font-size: 20px;
	cursor: pointer;
}

.buho-product__optic-note {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--bp-muted);
}

.buho-product__noscript {
	font-size: 14px;
	color: var(--bp-text);
}

.buho-product .buho-add-to-quote__status:empty {
	display: none;
}

.buho-product .buho-add-to-quote__status {
	margin: 0;
	font-size: 15px;
}

.buho-product .buho-add-to-quote__status::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--bp-amber);
	vertical-align: middle;
}

/* Datasheet. */
.buho-product__datasheet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px;
	border: 1px solid var(--bp-navy);
	color: var(--bp-navy);
	text-decoration: none;
	font-size: 15px;
	text-align: center;
}

.buho-product__no-datasheet {
	margin: 0;
	font-size: 14px;
	color: var(--bp-muted);
}

/* ------------------------------------------------------------ sticky bar */

.buho-product__sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px 20px;
	padding: 10px 20px;
	border-top: 1px solid var(--bp-line);
	background: var(--bp-surface);
	box-shadow: 0 -6px 18px var(--bp-shadow);
}

.buho-product__sticky-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	color: var(--bp-navy);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.buho-product__sticky-code {
	font-family: var(--bp-code);
	font-size: 15px;
	color: var(--bp-text);
}

.buho-product__sticky .buho-button {
	min-height: 44px;
	padding: 10px 18px;
	font-size: 15px;
}

@media (min-width: 1024px) {
	.buho-product__sticky {
		top: var(--buho-sticky-top, 0);
		bottom: auto;
		padding: 12px 48px;
		border-top: 0;
		border-bottom: 1px solid var(--bp-line);
		box-shadow: 0 6px 18px var(--bp-shadow);
	}

	.buho-product__sticky-name {
		flex: 0 1 auto;
		font-size: 18px;
	}

	.buho-product__sticky-code {
		flex: 1;
		font-size: 16px;
	}
}

@media (max-width: 1023px) {
	.buho-product__sticky-code {
		display: none;
	}
}

/* ------------------------------------------------------------ description and specs */

.buho-product__details {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	padding-top: 24px;
}

.buho-product__details h2,
.buho-codes h2 {
	margin: 0 0 12px;
	font-size: clamp(24px, 3vw, 28px);
	font-weight: 600;
	color: var(--bp-navy);
}

.buho-product__text {
	font-size: 16px;
	line-height: 1.65;
	color: var(--bp-text);
}

.buho-product__text p {
	margin: 0 0 12px;
}

.buho-product__text ul {
	margin: 0;
	padding-left: 20px;
}

.buho-specs__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.buho-specs__scope {
	margin: 0;
	font-size: 13px;
	color: var(--bp-muted);
}

.buho-specs__group {
	border-top: 1px solid var(--bp-line);
}

.buho-specs__summary {
	display: flex;
	justify-content: space-between;
	min-height: 48px;
	padding: 12px 0;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.buho-specs__summary::after {
	content: "+";
	color: var(--bp-navy);
}

.buho-specs__group[open] .buho-specs__summary::after {
	content: "−";
}

.buho-specs__table {
	width: 100%;
	margin-bottom: 12px;
	border-collapse: collapse;
	font-size: 15px;
}

.buho-specs__table th {
	width: 45%;
	padding: 9px 12px 9px 0;
	border-bottom: 1px solid var(--bp-line-soft);
	font-weight: 400;
	text-align: left;
	color: var(--bp-text);
}

.buho-specs__table td {
	padding: 9px 0;
	border-bottom: 1px solid var(--bp-line-soft);
	font-family: var(--bp-code);
	font-size: 14px;
	word-break: break-word;
}

.buho-specs__varying {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--bp-text);
}

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

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

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

	.buho-specs__summary {
		min-height: 0;
		padding: 14px 0 6px;
		border-bottom: 1px solid var(--bp-navy);
		font-size: 12px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--bp-muted);
	}

	.buho-specs__group {
		border-top: 0;
	}
}

/* ------------------------------------------------------------ all codes */

.buho-codes {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 0 48px;
}

.buho-codes__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
}

.buho-codes__count {
	margin-left: 6px;
	font-family: var(--bp-code);
	font-size: 16px;
	font-weight: 400;
	color: var(--bp-muted);
}

.buho-codes__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.buho-codes__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.buho-codes__chip {
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid var(--bp-line-strong);
	background: var(--bp-surface);
	color: var(--bp-ink);
	font: inherit;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}

.buho-codes__chip[aria-pressed="true"] {
	border-color: var(--bp-navy);
	background: var(--bp-navy);
	color: var(--bp-on-selected);
}

.buho-codes__search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--bp-line-strong);
	background: var(--bp-surface);
	font-size: 13px;
	color: var(--bp-muted);
}

.buho-codes__search input {
	width: 140px;
	border: 0;
	background: transparent;
	font-family: var(--bp-code);
	font-size: 14px;
}

.buho-codes__table {
	width: 100%;
	border: 1px solid var(--bp-line);
	border-collapse: collapse;
	background: var(--bp-surface);
	font-size: 15px;
}

.buho-codes__table thead th {
	padding: 12px 8px;
	border-bottom: 1px solid var(--bp-line);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
	color: var(--bp-muted);
}

.buho-codes__table thead th:first-child {
	padding-left: 16px;
}

.buho-codes__row {
	cursor: pointer;
}

.buho-codes__row > * {
	padding: 10px 8px;
	border-bottom: 1px solid var(--bp-row-line);
	font-weight: 400;
	text-align: left;
}

.buho-codes__row > .buho-codes__code {
	padding-left: 16px;
}

.buho-codes__code a {
	font-family: var(--bp-code);
	color: var(--bp-navy);
	text-decoration: none;
}

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

.buho-codes__cell--cct,
.buho-codes__cell--beam,
.buho-codes__cell--model {
	font-family: var(--bp-code);
	font-size: 14px;
}

.buho-codes__row.is-selected {
	background: var(--bp-paper);
	box-shadow: inset 3px 0 0 var(--bp-navy);
}

.buho-codes__actions {
	text-align: right;
}

.buho-codes__copy {
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--bp-line);
	background: transparent;
	color: var(--bp-navy);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.buho-codes__accessories th[scope="rowgroup"] {
	padding: 16px 16px 8px;
	border-bottom: 1px solid var(--bp-navy);
	background: var(--bp-paper);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
	color: var(--bp-muted);
}

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

.buho-codes [data-buho-codes-more] {
	align-self: flex-start;
	min-height: 44px;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 400;
}

.buho-codes__hint {
	margin: 0;
	font-size: 13px;
	color: var(--bp-muted);
}

/* Narrow screens: each code is a card. */
@media (max-width: 781px) {
	.buho-codes__table,
	.buho-codes__table tbody {
		display: block;
		border: 0;
		background: transparent;
	}

	.buho-codes__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.buho-codes__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2px 10px;
		margin-bottom: 8px;
		padding: 10px 12px;
		border: 1px solid var(--bp-line);
		background: var(--bp-surface);
	}

	.buho-codes__row.is-selected {
		border: 2px solid var(--bp-navy);
		box-shadow: none;
	}

	.buho-codes__row > * {
		display: block;
		padding: 0;
		border: 0;
	}

	.buho-codes__row > .buho-codes__code {
		padding: 0;
		font-size: 16px;
	}

	.buho-codes__cell {
		grid-column: 1;
		font-size: 13px;
		color: var(--bp-text);
	}

	.buho-codes__cell::before {
		content: attr(data-label) " · ";
		color: var(--bp-muted);
	}

	.buho-codes__actions {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: center;
	}

	.buho-codes__copy {
		min-height: 44px;
	}

	.buho-codes__accessories tr:first-child {
		display: block;
	}

	.buho-codes__accessories th[scope="rowgroup"] {
		display: block;
		padding: 12px 0 4px;
		border: 0;
		background: transparent;
	}
}

/* ------------------------------------------------------------ home hero (buho/product-picker) */

.buho-product-picker {
	border: 1px solid var(--bp-line);
	background: var(--bp-surface);
}

/* Inside a frame that already draws the border and heading (theme buho-theme/resolver). */
.buho-product-picker--bare {
	border: 0;
	background: transparent;
}

.buho-product-picker__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--bp-hairline);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-muted);
}

.buho-product-picker__title {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: inherit;
}

.buho-product-picker__title a {
	color: var(--bp-muted);
}

/*
 * Layout (design 2a, T-46): one grid on the body. The wrappers in between (main column, picker,
 * quote slot and form) are display: contents, so their parts sit on this grid while the markup,
 * and with it every script contract (data-buho-picker, data-buho-variation-source, the quote
 * form), stays as it is.
 *
 *   from 782 px:  | photo | options: finish, colour temperature, facts |
 *                 | product code · Copy               | Add to quote   |
 *                 | "Added …" status, full width                       |
 *
 * The photo sits beside the options only and fills that band (object-fit: cover): the band is
 * as tall as the options, so nothing is left blank. Below 782 px there is no photo (design 2a
 * mobile): options, then code and Copy, then Add to quote across the width.
 */
.buho-product-picker__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.buho-product-picker__main,
.buho-product-picker .buho-picker,
.buho-product-picker__quote,
.buho-product-picker .buho-add-to-quote {
	display: contents;
}

.buho-product-picker__media {
	display: none;
}

/* Options band: the warm panel. "Clear selection" (after a choice) and the no-JS "Show code"
   sit at the end of the facts line, so the band does not grow when they appear. */
.buho-product-picker .buho-picker__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px 12px;
	align-items: center;
	grid-row: 1;
	grid-column: 1 / -1;
	padding: 18px 14px 8px;
	border: 0;
}

.buho-product-picker__extra {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 18px;
	grid-row: 2;
	grid-column: 1 / -1;
	padding: 0 14px 16px;
	background: var(--bp-paper);
	font-size: 13px;
	color: var(--bp-text);
}

.buho-product-picker__chips,
.buho-product-picker__more {
	margin: 0;
}

.buho-product-picker .buho-picker__facts {
	font-size: 13px;
	line-height: 24px; /* As tall as "Clear selection", so the band keeps its height when it appears. */
}

.buho-product-picker .buho-picker__form > * {
	grid-column: 1 / -1;
}

.buho-product-picker .buho-picker__form > .buho-picker__facts {
	grid-column: 1;
}

.buho-product-picker .buho-picker__form > .buho-picker__actions {
	grid-column: 2;
	justify-self: end;
}

/* With nothing to show, no empty row. */
.buho-product-picker .buho-picker__actions:not(:has(> :not([hidden]))) {
	display: none;
}

.buho-product-picker .buho-picker__clear {
	min-height: 24px;
	padding: 0;
	font-size: 13px;
}

.buho-product-picker .buho-picker__axis--segment .buho-picker__options {
	grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}

/* Code row. */
.buho-product-picker .buho-picker__result {
	grid-row: 3;
	grid-column: 1 / -1;
	gap: 10px;
	padding: 14px 14px 12px;
	border: 0;
	border-top: 1px solid var(--bp-hairline);
}

/* Room for the label and a resolved code from the start: no jump when the code replaces the
   "Select …" sentence (label 18 px + 2 px gap + the code's line). */
.buho-product-picker .buho-picker__code-box {
	--buho-hero-code-size: clamp(28px, 2.2vw + 12px, 40px);
	justify-content: center;
	min-height: calc(20px + 1.15 * var(--buho-hero-code-size));
}

.buho-product-picker .buho-picker__code {
	font-size: var(--buho-hero-code-size);
}

.buho-product-picker .buho-picker__copy {
	flex: none;
}

.buho-product-picker .buho-picker__versions {
	grid-row: 4;
	grid-column: 1 / -1;
	padding: 0 14px 12px;
}

/* The hero adds one unit: no quantity, no note (the product page has both). */
.buho-product-picker .buho-add-to-quote .buho-field,
.buho-product-picker .buho-add-to-quote__hint {
	display: none;
}

.buho-product-picker .buho-add-to-quote__button {
	grid-row: 5;
	grid-column: 1 / -1;
	min-height: 48px;
	margin: 0 14px 14px;
	padding: 12px 22px;
	border: 1px solid var(--bp-navy);
	background: var(--bp-fill);
	color: var(--bp-white);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.buho-product-picker .buho-add-to-quote__button:hover {
	border-color: var(--brand-navy-700, #062a50);
	background: var(--bp-fill-hover);
}

.buho-product-picker .buho-add-to-quote__status {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 14px;
}

.buho-product-picker .buho-add-to-quote__status:not(:empty) {
	padding: 10px 14px;
	border-top: 1px solid var(--bp-hairline);
}

@media (min-width: 782px) {
	.buho-product-picker__body {
		grid-template-columns: clamp(200px, 40%, 280px) minmax(0, 1fr) auto;
	}

	/* The photo spans the options band (rows 1-2) and fills it. Absolutely placed, so it never
	   sets the band's height; cover crops what does not fit instead of leaving blank bands. */
	.buho-product-picker__media {
		position: relative;
		display: block;
		grid-row: 1 / span 2;
		grid-column: 1;
		min-height: 200px;
		overflow: hidden;
		border-right: 1px solid var(--bp-hairline);
		background: var(--bp-photo);
	}

	.buho-product-picker__media .buho-gallery,
	.buho-product-picker__media .buho-gallery__strip,
	.buho-product-picker__media .buho-gallery__figure {
		display: block;
		overflow: visible;
		margin: 0;
		border: 0;
	}

	/* One photo only (the first); the thumbnails and the category caption stay off. */
	.buho-product-picker__media .buho-gallery__figure + .buho-gallery__figure,
	.buho-product-picker__media .buho-gallery__thumbs,
	.buho-product-picker__media .buho-gallery__caption {
		display: none;
	}

	.buho-product-picker__media .buho-gallery__img,
	.buho-product-picker__media .buho-gallery__placeholder {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 50% 50%;
	}

	/* A datasheet photo (T-51) is not cropped: whole, centred in the column on white, never
	   larger than its own pixels. The figure must not take the gallery's square size here, or
	   it would set the band's height. */
	.buho-product-picker__media .buho-gallery__figure:has(> .buho-photo) {
		aspect-ratio: auto;
	}

	.buho-product-picker__media .buho-gallery__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;
	}

	.buho-product-picker .buho-picker__form {
		grid-column: 2 / -1;
		padding: 20px 22px 8px;
	}

	.buho-product-picker__extra {
		grid-column: 2 / -1;
		padding: 0 22px 20px;
	}

	.buho-product-picker .buho-picker__result {
		grid-column: 1 / 3;
		gap: 16px;
		padding: 18px 16px 18px 22px;
	}

	/* Add to quote closes the code row on the right; the row's top rule runs under it too. */
	.buho-product-picker .buho-add-to-quote__button {
		grid-row: 3;
		grid-column: 3;
		align-self: center;
		margin: 0 22px 0 0;
	}

	.buho-product-picker__body::after {
		content: "";
		grid-row: 3;
		grid-column: 3;
		border-top: 1px solid var(--bp-hairline);
		pointer-events: none;
	}

	.buho-product-picker .buho-picker__versions,
	.buho-product-picker .buho-add-to-quote__status:not(:empty) {
		padding-inline: 22px;
	}
}

/* ---------------------------------------------------------------- dark mode (T-55) */

/*
 * The theme sets data-theme="dark" on <html> (Dark chosen) or leaves it off (System, following
 * prefers-color-scheme). Most colours follow the theme tokens by themselves; these are the ones
 * that must not turn light with --brand-navy (fills under white text) or were literals. Written
 * twice, identically (the theme's tests/js/color-scheme-css.test.js compares the two blocks).
 */

/* @buho-dark:explicit:start (buho-product) — dark chosen in the switch. Keep identical to the system block. */
:where(:root[data-theme="dark"]) .buho-product,
:where(:root[data-theme="dark"]) .buho-product-picker {
	--bp-text: #cdc7bd;
	--bp-muted: #aaa398;
	--bp-faint: #8f897f;
	--bp-line: #4b4740;
	--bp-line-soft: #2e2b27;
	--bp-paper: #24211d;
	--bp-paper-line: #3a352e;
	--bp-fill: var(--buho-navy-surface, #093c71);
	--bp-on-selected: var(--buho-on-brand, #10161f);
	--bp-fill-hover: var(--buho-navy-surface-hover, #0b4a8b);
	--bp-surface: var(--brand-surface, #1b1a17);
	--bp-photo: var(--buho-photo-panel, #f0f0ee);
	--bp-hairline: #35322d;
	--bp-row-line: #2e2b27;
	--bp-grid: #2a2723;
	--bp-hatch-line: #3a352e;
	--bp-shadow: rgba(0, 0, 0, 0.45);
}
/* @buho-dark:explicit:end */

/* @buho-dark:system:start (buho-product) — "System" with a dark system setting (also without JavaScript). */
@media (prefers-color-scheme: dark) {
	:where(:root:not([data-theme="light"])) .buho-product,
	:where(:root:not([data-theme="light"])) .buho-product-picker {
		--bp-text: #cdc7bd;
		--bp-muted: #aaa398;
		--bp-faint: #8f897f;
		--bp-line: #4b4740;
		--bp-line-soft: #2e2b27;
		--bp-paper: #24211d;
		--bp-paper-line: #3a352e;
		--bp-fill: var(--buho-navy-surface, #093c71);
		--bp-on-selected: var(--buho-on-brand, #10161f);
		--bp-fill-hover: var(--buho-navy-surface-hover, #0b4a8b);
		--bp-surface: var(--brand-surface, #1b1a17);
		--bp-photo: var(--buho-photo-panel, #f0f0ee);
		--bp-hairline: #35322d;
		--bp-row-line: #2e2b27;
		--bp-grid: #2a2723;
		--bp-hatch-line: #3a352e;
		--bp-shadow: rgba(0, 0, 0, 0.45);
	}
}
/* @buho-dark:system:end */