/* ==========================================================================
   B2B Order Configurator
   Visual language taken from the public configurator.bomma.cz: black on white,
   no rounded corners, no shadows, no accent colour. The corporate face is
   BommaOFF / BommaON — until Bomma supplies the .otf files this falls back to
   a neutral grotesque, which is why headings are set light rather than bold.
   ========================================================================== */

:root {
	--cfg-ink: #000;
	--cfg-paper: #fff;
	--cfg-muted: #8a8a8a;
	--cfg-line: #e2e2e2;
	--cfg-visual: #f7f6f4;
	--cfg-panel: 340px;
	--cfg-header: 68px;
	--cfg-nav: 46px;
}

.cfg * { box-sizing: border-box; }

.cfg {
	font-family: "BommaOFF", "BommaON", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--cfg-ink);
	background: var(--cfg-paper);
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

.cfg-header {
	min-height: var(--cfg-header);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 26px;
	border-bottom: 1px solid var(--cfg-line);
}

.cfg-logo {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.02em;
	text-decoration: none;
	color: var(--cfg-ink);
	line-height: 1;
}

.cfg-wordmark {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cfg-muted);
}

.cfg-header-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 4px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cfg-muted);
}

.cfg-header-right a { color: var(--cfg-muted); text-decoration: none; }
.cfg-header-right a:hover { color: var(--cfg-ink); }

/* ---------- step breadcrumb ---------- */

.cfg-steps {
	height: var(--cfg-nav);
	display: flex;
	align-items: stretch;
	gap: 30px;
	padding: 0 26px;
	border-bottom: 1px solid var(--cfg-line);
	overflow-x: auto;
	white-space: nowrap;
}

.cfg-step {
	display: flex;
	align-items: center;
	font-size: 13px;
	text-decoration: none;
	color: var(--cfg-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.cfg-step--done { color: var(--cfg-ink); }

.cfg-step--current {
	color: var(--cfg-ink);
	font-weight: 600;
	border-bottom-color: var(--cfg-ink);
}

.cfg-step--upcoming { pointer-events: none; }

/* ---------- two-pane body ---------- */

.cfg-body {
	display: flex;
	align-items: stretch;
	min-height: calc(100vh - var(--cfg-header) - var(--cfg-nav));
}

.cfg-panel {
	width: var(--cfg-panel);
	flex: 0 0 var(--cfg-panel);
	padding: 34px 26px 26px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--cfg-line);
}

.cfg-title {
	font-size: 26px;
	font-weight: 300;
	margin: 0 0 12px;
	letter-spacing: -.01em;
}

.cfg-lead {
	color: var(--cfg-muted);
	font-size: 13px;
	margin: 0 0 26px;
}

.cfg-controls { flex: 1 1 auto; }

.cfg-actions {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

.cfg-continue {
	display: block;
	width: 100%;
	padding: 15px;
	background: var(--cfg-ink);
	color: var(--cfg-paper);
	border: 1px solid var(--cfg-ink);
	border-radius: 0;
	font: inherit;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.cfg-continue:hover { background: #262626; border-color: #262626; }

.cfg-continue--disabled,
.cfg-continue[disabled] {
	background: #d8d8d8;
	border-color: #d8d8d8;
	color: #fff;
	cursor: not-allowed;
	pointer-events: none;
}

.cfg-back {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--cfg-muted);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.cfg-back:hover { color: var(--cfg-ink); }

/* ---------- option widgets ---------- */

.cfg-group + .cfg-group { margin-top: 26px; }

.cfg-group-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 3px;
}

.cfg-group-hint {
	font-size: 12px;
	color: var(--cfg-muted);
	margin: 0 0 12px;
}

/* list — one option per row, radio on the left */
.cfg-list { border-top: 1px solid var(--cfg-line); }

.cfg-list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 2px;
	border-bottom: 1px solid var(--cfg-line);
	text-decoration: none;
	color: var(--cfg-ink);
	font-size: 14px;
}

.cfg-list-item:hover { background: #fafafa; }

.cfg-radio {
	width: 11px;
	height: 11px;
	border: 1px solid #9a9a9a;
	border-radius: 50%;
	flex: 0 0 11px;
}

.cfg-list-item--on .cfg-radio { background: var(--cfg-ink); border-color: var(--cfg-ink); }
.cfg-list-item--on { font-weight: 600; }

.cfg-list-chevron { margin-left: auto; color: var(--cfg-muted); }

/* pills — short values side by side */
.cfg-pills { display: flex; flex-wrap: wrap; gap: 9px; }

.cfg-pill {
	padding: 9px 17px;
	border: 1px solid var(--cfg-line);
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	color: var(--cfg-ink);
	background: var(--cfg-paper);
}

.cfg-pill:hover { border-color: #b0b0b0; }
.cfg-pill--on { border-color: var(--cfg-ink); font-weight: 600; }
.cfg-pill small { color: var(--cfg-muted); margin-left: 3px; }

/* cards — value plus a line of explanation */
.cfg-cards { display: flex; flex-wrap: wrap; gap: 9px; }

.cfg-card {
	flex: 1 1 120px;
	min-width: 108px;
	padding: 14px 12px;
	border: 1px solid var(--cfg-line);
	text-align: center;
	text-decoration: none;
	color: var(--cfg-ink);
	background: var(--cfg-paper);
}

.cfg-card:hover { border-color: #b0b0b0; }
.cfg-card--on { border-color: var(--cfg-ink); border-width: 2px; padding: 13px 11px; }
.cfg-card-value { font-size: 14px; font-weight: 600; display: block; }
.cfg-card-note { font-size: 11px; color: var(--cfg-muted); display: block; margin-top: 3px; }

/* swatches — glass and fitting colours */
.cfg-swatches { display: flex; flex-wrap: wrap; gap: 14px; }

.cfg-swatch {
	width: 62px;
	text-decoration: none;
	color: var(--cfg-ink);
	text-align: center;
}

.cfg-swatch-dot {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin: 0 auto 5px;
	border: 1px solid rgba(0, 0, 0, .12);
	background: linear-gradient(140deg, #f2f0ec, #cfcac2 62%, #a9a49b);
}

.cfg-swatch--on .cfg-swatch-dot { outline: 1px solid var(--cfg-ink); outline-offset: 3px; }
.cfg-swatch--on .cfg-swatch-label { font-weight: 600; }
.cfg-swatch-label { font-size: 11px; line-height: 1.3; display: block; }

/* ---------- visual pane ---------- */

.cfg-visual {
	flex: 1 1 auto;
	background: var(--cfg-visual);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 40px;
	min-height: 420px;
}

.cfg-visual img {
	max-width: 620px;
	width: 100%;
	max-height: calc(100vh - var(--cfg-header) - var(--cfg-nav) - 80px);
	object-fit: contain;
}

.cfg-visual-placeholder {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 30%, #fbfaf8, #e6e2db 55%, #c8c2b8);
}

/* What has been chosen so far, as a spec sheet: the step bar shows only
   step names. Hairlines and small caps, same as the order-lines table. */
.cfg-recap {
	margin: 4px 0 24px;
	border-top: 1px solid var(--cfg-ink);
	font-size: 12px;
}

.cfg-recap-row {
	display: grid;
	grid-template-columns: 78px 1fr auto;
	align-items: baseline;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cfg-line);
}

.cfg-recap dt {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cfg-muted);
}

.cfg-recap dd {
	margin: 0;
	font-weight: 600;
	min-width: 0;
}

.cfg-recap-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}
.cfg-recap-line + .cfg-recap-line { margin-top: 5px; }
.cfg-recap-name { flex: 1 1 auto; min-width: 0; }
.cfg-recap-qty { font-variant-numeric: tabular-nums; font-weight: 600; }

.cfg-swatch-dot--xs { width: 12px; height: 12px; flex: 0 0 12px; margin: 0; }

.cfg-recap-edit {
	font-size: 11px;
	color: var(--cfg-muted);
	text-decoration: none;
	opacity: 0;
	transition: opacity .15s;
}
.cfg-recap-row:hover .cfg-recap-edit,
.cfg-recap-edit:focus { opacity: 1; }
.cfg-recap-edit:hover { color: var(--cfg-ink); text-decoration: underline; }

@media (hover: none) {
	.cfg-recap-edit { opacity: 1; }
}

/* ---------- collection grid (step 1) ---------- */

.cfg-collections {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 9px;
}

.cfg-collection {
	border: 1px solid var(--cfg-line);
	padding: 9px 5px;
	text-align: center;
	text-decoration: none;
	color: var(--cfg-ink);
	background: var(--cfg-paper);
}

.cfg-collection:hover { border-color: #b0b0b0; }
.cfg-collection--on { border-color: var(--cfg-ink); border-width: 2px; padding: 8px 4px; }

.cfg-collection-dot {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	margin: 0 auto 6px;
	background: radial-gradient(circle at 36% 30%, #fbfaf8, #e6e2db 55%, #c8c2b8);
}

.cfg-collection-name { font-size: 11px; line-height: 1.25; display: block; }
.cfg-collection-count { font-size: 10px; color: var(--cfg-muted); }

/* ---------- summary ---------- */

.cfg-summary { padding: 34px 40px 60px; max-width: 1080px; }
.cfg-summary-title { font-size: 30px; font-weight: 300; margin: 0 0 6px; }
.cfg-summary-lead { color: var(--cfg-muted); margin: 0 0 26px; font-size: 14px; }

.cfg-match {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cfg-line);
}

.cfg-match:first-of-type { border-top: 1px solid var(--cfg-line); }

.cfg-match-thumb {
	width: 66px;
	height: 66px;
	flex: 0 0 66px;
	background: var(--cfg-visual);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cfg-match-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cfg-match-main { flex: 1 1 auto; min-width: 0; }
.cfg-match-name { font-size: 15px; font-weight: 600; margin: 0 0 3px; }
.cfg-match-attrs { font-size: 12px; color: var(--cfg-muted); }

.cfg-match-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: var(--cfg-muted);
	margin-top: 3px;
	word-break: break-all;
}

.cfg-match-price { text-align: right; font-size: 16px; font-weight: 600; white-space: nowrap; }
.cfg-match-price small { display: block; font-size: 11px; font-weight: 400; color: var(--cfg-muted); }

.cfg-match-add {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.cfg-qty {
	width: 54px;
	padding: 8px;
	border: 1px solid var(--cfg-line);
	border-radius: 0;
	font: inherit;
	text-align: center;
}

.cfg-add {
	padding: 10px 16px;
	background: var(--cfg-ink);
	color: var(--cfg-paper);
	border: 1px solid var(--cfg-ink);
	border-radius: 0;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
}

.cfg-add:hover { background: #262626; }

.cfg-summary-actions { display: flex; gap: 12px; margin-top: 28px; }
.cfg-summary-actions .cfg-continue { width: auto; padding: 14px 34px; }

.cfg-secondary {
	display: inline-block;
	padding: 14px 30px;
	border: 1px solid var(--cfg-ink);
	background: var(--cfg-paper);
	color: var(--cfg-ink);
	text-decoration: none;
	font-size: 15px;
}

.cfg-secondary:hover { background: #f5f5f5; }

/* ---------- notes and messages ---------- */

.cfg-note {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px dotted var(--cfg-line);
	font-size: 12px;
	color: var(--cfg-muted);
}

.cfg-flash {
	padding: 11px 26px;
	font-size: 13px;
	border-bottom: 1px solid var(--cfg-line);
}

.cfg-flash--error { background: #fdf2f2; color: #a01b1b; }
.cfg-flash--success { background: #f2f8f3; color: #1d6b2f; }
.cfg-flash--info { background: #f6f6f6; }

.cfg-empty { color: var(--cfg-muted); font-size: 13px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.cfg-body { flex-direction: column; }
	.cfg-panel { width: 100%; flex: 1 1 auto; border-right: 0; border-bottom: 1px solid var(--cfg-line); }
	.cfg-visual { min-height: 300px; }
	.cfg-visual-placeholder { width: 200px; height: 200px; }
	.cfg-summary { padding: 26px 20px 40px; }
	.cfg-match { flex-wrap: wrap; }
}

/* ---------- colour basket: quantity grid ---------- */

.cfg-qty-table { width: 100%; border-collapse: collapse; }

.cfg-qty-table tr { border-bottom: 1px solid var(--cfg-line); }
.cfg-qty-table tr:first-child { border-top: 1px solid var(--cfg-line); }

.cfg-qty-combo { padding: 9px 0; font-size: 13px; }
.cfg-qty-cell { padding: 6px 0; text-align: right; width: 74px; }

.cfg-qty-static { font-size: 13px; color: var(--cfg-muted); }

.cfg-match-note { font-size: 11px; color: var(--cfg-muted); margin-top: 3px; }
.cfg-match-none { color: #a01b1b; }

.cfg-summary-total {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	font-size: 15px;
}

.cfg-summary-total strong { font-size: 21px; font-weight: 600; }

.cfg-addall { margin-top: 14px; }
.cfg-addall .cfg-add { padding: 12px 22px; font-size: 14px; }


/* ---------- working pane: order lines being built ----------
   Replaces the picture on the colour step. The catalogue image is a line
   drawing of the shape — Lens has nine glass colours but only two pictures —
   so repeating it per combination would say nothing, while the lines
   themselves need the room. */

.cfg-work {
	flex: 1 1 auto;
	background: var(--cfg-visual);
	display: flex;
	align-items: stretch;
	min-width: 0;
}

/* Lines on the left of the pane, the product picture as a full third column —
   at 88px tucked above the table it carried nothing. */
.cfg-work-main {
	flex: 1 1 620px;
	min-width: 0;
	padding: 30px 34px;
	display: flex;
	flex-direction: column;
}

.cfg-work-visual {
	flex: 1 1 380px;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

.cfg-work-visual img {
	max-width: 100%;
	/* Catalogue drawings of pendants are tall and narrow, so height is the
	   binding constraint — without a cap they push the page past the fold. */
	max-height: min(68vh, 600px);
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Head, table and footer share one column width so they line up instead of
   the thumbnail drifting to the far edge of a very wide pane. */
.cfg-work-head { margin-bottom: 20px; }

.cfg-work-title { font-size: 21px; font-weight: 300; margin: 0 0 4px; }
.cfg-work-hint { font-size: 12px; color: var(--cfg-muted); margin: 0; }

.cfg-lines {
	width: 100%;
	max-width: 780px;
	border-collapse: collapse;
	background: var(--cfg-paper);
}

.cfg-lines th {
	text-align: left;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cfg-muted);
	font-weight: 400;
	padding: 9px 12px;
	border-bottom: 1px solid var(--cfg-line);
}

.cfg-lines td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--cfg-line);
	font-size: 13px;
	vertical-align: middle;
}

.cfg-lines tr:last-child td { border-bottom: 0; }

.cfg-num { text-align: right; }
.cfg-lines-dot { width: 34px; padding-right: 0; }
.cfg-swatch-dot--sm { width: 22px; height: 22px; }
.cfg-lines-name { min-width: 150px; }

.cfg-lines-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: var(--cfg-muted);
	word-break: break-all;
}

.cfg-lines-price { white-space: nowrap; }

.cfg-lines-note {
	font-size: 11px;
	color: var(--cfg-muted);
	margin-left: 6px;
}

.cfg-work-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	max-width: 780px;
	padding-top: 14px;
}

.cfg-work-total { font-size: 13px; color: var(--cfg-muted); }
.cfg-work-total strong { font-size: 18px; color: var(--cfg-ink); font-weight: 600; }

@media (max-width: 900px) {
	.cfg-work { flex-direction: column; }
	.cfg-work-main { padding: 20px; }
	.cfg-lines-code { display: none; }
	.cfg-work-visual { display: none; }
}

/* Chandelier: the pieces must add up, so the count is stated plainly. */
.cfg-work-count { font-size: 13px; }
.cfg-work-count--ok { color: #1d6b2f; }
.cfg-work-count--off { color: #a01b1b; }

.cfg-match--canopy { background: #fbfaf8; }

/* ---------- website photography ---------- */

.cfg-collection--photo { padding: 0 0 8px; }
.cfg-collection--photo.cfg-collection--on { padding: 0 0 7px; }
.cfg-collection-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin-bottom: 6px;
	background: var(--cfg-visual);
}

.cfg-list-item--photo { padding-top: 6px; padding-bottom: 6px; }
.cfg-list-photo {
	width: 52px;
	height: 52px;
	object-fit: contain;
	background: var(--cfg-visual);
	flex: 0 0 52px;
}

.cfg-lines-photo {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: var(--cfg-visual);
}

/* The photo fills the whole right-hand pane (client, 2026-10-31), which stays
   in view while the panel scrolls. Photographs with their own backdrop are
   cropped to cover it; transparent cut-outs are shown whole at full height
   (the layout script tells them apart). */
.cfg-visual {
	padding: 0;
	overflow: hidden;
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: calc(100vh - var(--cfg-header) - var(--cfg-nav));
}

.cfg-visual img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

.cfg-visual img.cfg-visual--cover { object-fit: cover; object-position: center 65%; }

@media (max-width: 900px) {
	.cfg-visual { position: static; height: 60vh; min-height: 300px; }
}

/* Summary lines carry a real product photo, large enough to recognise. */
.cfg-match-thumb {
	width: 120px;
	height: 150px;
	flex: 0 0 120px;
}

.cfg-match-thumb img { width: 100%; height: 100%; object-fit: cover; }