/* configurator-bkd-new.css – nieuw ontwerp Buitenkeukendeal-configurator.
   Laden NA configurator.css. Alles zit onder .bkc2; huisstijl via data-shop. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@700;800&family=Jost:wght@300;400;500;600&display=swap');

.bkc2 {
	--font: 'Barlow', sans-serif; --hFont: 'Barlow Condensed', sans-serif; --hCase: uppercase; --hSize: 30px; --hWeight: 800;
	--r: 4px; --bg: #f4f3f0; --surface: #fff; --stage: #ecebe7; --ink: #1c1c1c; --muted: #5f5f5f; --line: #e2e0db;
	--accent: #f7931e; --onAccent: #1c1c1c; --accentSoft: #fff3e2; --accentInk: #9a5300; --cta: #1f1f1f; --onCta: #fff; --ok: #d97a0b;
	--top: 0px; /* hoogte van de sitekop erboven, als die blijft staan */
	font-family: var(--font); color: var(--ink); background: var(--bg);
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
	height: 760px;   /* vaste hoogte: in het ingebedde venster groeit 100vh mee met het venster (eindeloze lus) */
	padding: 0 !important; margin: 0;
}
.bkc2[data-shop="varetti"] {
	--font: 'Jost', sans-serif; --hFont: 'Jost', sans-serif; --hCase: none; --hSize: 26px; --hWeight: 400;
	--r: 0px; --bg: #faf8f4; --stage: #efebe3; --ink: #23251f; --muted: #5d6058; --line: #e6e1d8;
	--accent: #3f4739; --onAccent: #fff; --accentSoft: #eef0ea; --accentInk: #3f4739; --cta: #23251f; --onCta: #fff; --ok: #707c69;
}
.bkc2 *, .bkc2 *::before, .bkc2 *::after { box-sizing: border-box; }
.bkc2 button { font-family: inherit; cursor: pointer; }
.bkc2 h2, .bkc2 h3, .bkc2 p { margin: 0; }

/* ---------- stappenbalk ---------- */
.bkc2 .bkc2-steps { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 24px; margin: 0; }
.bkc2 .step-progress-list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.bkc2 .step-progress-list::-webkit-scrollbar { display: none; }
.bkc2 .step-line { display: none !important; }
.bkc2 :is(.step-item, .bkc2-step-item) {
	flex: 1 1 0; min-width: 150px; display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px;
	border-bottom: 3px solid transparent; cursor: pointer; background: none; margin: 0; position: static;
}
.bkc2 :is(.step-item, .bkc2-step-item).active { border-bottom-color: var(--accent); }
.bkc2 .step-circle {
	width: 28px; height: 28px; flex: none; border-radius: 99px; display: flex; align-items: center; justify-content: center;
	background: var(--bg); color: var(--muted); border: 1px solid var(--line); font-size: 13px; font-weight: 700;
}
.bkc2 .step-circle .check-icon { display: none; }
.bkc2 :is(.step-item, .bkc2-step-item).active .step-circle { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }
.bkc2 :is(.step-item, .bkc2-step-item).completed .step-circle, .bkc2 :is(.step-item, .bkc2-step-item).done .step-circle, .bkc2 :is(.step-item, .bkc2-step-item).is-complete .step-circle { background: var(--cta); color: var(--onCta); border-color: var(--cta); }
.bkc2 :is(.step-item, .bkc2-step-item).completed .step-num, .bkc2 :is(.step-item, .bkc2-step-item).done .step-num, .bkc2 :is(.step-item, .bkc2-step-item).is-complete .step-num { display: none; }
.bkc2 :is(.step-item, .bkc2-step-item).completed .check-icon, .bkc2 :is(.step-item, .bkc2-step-item).done .check-icon, .bkc2 :is(.step-item, .bkc2-step-item).is-complete .check-icon { display: block; }
.bkc2 .bkc2-step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bkc2 .step-label { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bkc2 .bkc2-step-value { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* ---------- hoofdvlak ---------- */
.bkc2 .bkc2-main { display: grid; grid-template-columns: minmax(0, 1fr) 460px; min-height: 0; }

.bkc2 .bkc2-stage { position: relative; background: var(--stage); display: flex; flex-direction: column; min-height: 0; }
.bkc2 #viewer {
	flex: 1; min-height: 0; position: relative; width: 100% !important; max-width: none !important; padding: 0 !important;
	background: var(--stage);
}
.bkc2 #viewer canvas { display: block; width: 100% !important; height: 100% !important; }
.bkc2 .bkc2-stage-tools { position: absolute; top: 16px; left: 16px; right: 72px; z-index: 6; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.bkc2 .bkc2-chip {
	pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin: 0;
	background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 99px;
	padding: 8px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.bkc2[data-shop="varetti"] .bkc2-chip { border-radius: 0; }
.bkc2 .bkc2-chip input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.bkc2 .bkc2-ai-open { margin-left: auto; background: var(--cta); color: var(--onCta); border-color: var(--cta); border-radius: var(--r); padding: 10px 16px; font-size: 14px; font-weight: 700; }
.bkc2 .bkc2-ai-short { display: none; }
/* oude opmaak van het ingebedde venster (.bkc / Bootstrap-kolommen) uitschakelen */
.bkc2 #viewer.col-12, .bkc2 #viewer[class*="col-"] { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; }
.bkc2 #viewer { border-radius: 0 !important; height: auto !important; aspect-ratio: auto !important; }

.bkc2 .bkc2-modules { display: flex; gap: 6px; justify-content: center; padding: 12px 24px 16px; flex-wrap: wrap; }
.bkc2 .bkc2-modules:empty { display: none; }
.bkc2 .bkc2-mod {
	display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: 7px 12px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); line-height: 1.15;
}
.bkc2 .bkc2-mod strong { font-size: 14px; }
.bkc2 .bkc2-mod span { font-size: 11px; color: var(--muted); }
.bkc2 .bkc2-mod.active { border: 2px solid var(--accent); background: var(--accentSoft); }

/* configurator.js knoppen in de 3D: oude sfeerknop verbergen (eigen knop hierboven) */
.bkc2 .vr-sf-btn, .bkc2 .vr-pt-btn { display: none !important; }

/* ---------- paneel ---------- */
.bkc2 .bkc2-panel { min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); padding: 0; }
.bkc2 .bkc2-panel-body { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 26px 28px 20px; display: flex; flex-direction: column; gap: 18px; }
.bkc2 .bkc2-panel-head { display: flex; flex-direction: column; gap: 6px; }
.bkc2 .bkc2-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accentInk); }
.bkc2 .bkc2-title { font-family: var(--hFont); text-transform: var(--hCase); font-size: var(--hSize); font-weight: var(--hWeight); line-height: 1; color: var(--ink); }
.bkc2 .bkc2-help { font-size: 14px; line-height: 1.5; color: var(--muted); }

.bkc2 .step-tab-content { display: none; flex-direction: column; gap: 18px; }
.bkc2 .step-tab-content.active { display: flex; }
.bkc2 .custom-floating-field { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; }
.bkc2 .form-label-custom { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; position: static; transform: none; background: none; padding: 0; }

/* keuzeblokken (block-select.js) */
.bkc2 .block-select-group { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bkc2 .block-select-btn {
	position: relative; width: 100% !important; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; text-align: left; color: var(--ink);
	box-shadow: none; transition: border-color .12s, background .12s; min-height: 0; height: auto;
}
.bkc2 .block-select-btn:hover { border-color: var(--muted); }
.bkc2 .block-select-btn.active { border: 2px solid var(--accent); padding: 11px; background: var(--accentSoft); }
.bkc2 .block-select-btn--photo { padding: 8px; }
.bkc2 .block-select-btn--photo.active { padding: 7px; }
.bkc2 .block-select-btn--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg); border-radius: var(--r); height: auto; }
.bkc2 .block-select-btn-label { font-size: 13px; font-weight: 600; line-height: 1.25; }
.bkc2 .block-select-info-icon { position: absolute; top: 6px; right: 6px; color: var(--muted); }

/* stap 1: wat past er in de diepte (bestaande chips uit de database) */
.bkc2 .bkc2-depth-hint { font-size: 13px; line-height: 1.5; color: var(--accentInk); background: var(--accentSoft); border-radius: var(--r); padding: 12px 14px; margin: 4px 0 10px; }
.bkc2 #depth_option_details { margin: 0 !important; }
.bkc2 .depth-accessory-chip-group { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bkc2 .depth-accessory-chip { width: 100% !important; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 10px 8px; }
.bkc2 .depth-accessory-chip-image-placeholder { width: 64px; height: 64px; }
.bkc2 .depth-accessory-chip-label { font-size: 12px; color: var(--ink); }
.bkc2 .depth-accessory-chip--unavailable { background: var(--bg); }

/* stap 3: module-tabs boven de inhoud verbergen – de chips onder de 3D nemen het over */
.bkc2 .module-subtabs-header { display: none !important; }
.bkc2 .module-tab-content { display: none; flex-direction: column; gap: 18px; }
.bkc2 .module-tab-content.active { display: flex; }

/* stap 4: extra's */
.bkc2 #kitchen_options_list { grid-template-columns: 1fr !important; gap: 8px; }
.bkc2 .kitchen-option-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.bkc2 .kitchen-option-card--selected { border: 2px solid var(--accent); background: var(--accentSoft); }

/* schakelaars */
.bkc2 .dimensions-toggle-wrapper { border-top: 1px solid var(--line) !important; padding-top: 14px !important; margin-top: 4px !important; font-size: 14px; }
.bkc2 .switch input:checked + .slider { background-color: var(--accent); }
.bkc2 .cutout-input { border-radius: var(--r) !important; border-color: var(--line) !important; }

.bkc2 .bkc2-panel-nav { display: flex; gap: 10px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surface); margin: 0; }
.bkc2 .btn-step-nav {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r); font-size: 15px; font-weight: 700;
	padding: 13px 18px; width: auto; height: auto; line-height: 1; margin: 0;
}
.bkc2 .btn-prev-step { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.bkc2 .btn-prev-step.disabled { opacity: .4; pointer-events: none; }
.bkc2 .btn-next-step { flex: 1; justify-content: space-between; background: var(--accent); color: var(--onAccent); border: 0; }
.bkc2 .btn-next-step svg { display: none; }

/* ---------- onderbalk ---------- */
.bkc2 .bkc2-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--line); }
.bkc2 .bkc2-usp { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink); }
.bkc2 .bkc2-usp li { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.bkc2 .bkc2-usp li span { color: var(--ok); font-weight: 800; }
.bkc2 .bkc2-buy { display: flex; align-items: center; gap: 18px; }
.bkc2 .bkc2-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.bkc2 .bkc2-delivery { font-size: 12px; color: var(--muted); }
.bkc2 .bkc2-price-row { display: flex; align-items: center; gap: 6px; }
.bkc2 #total_price { font-family: var(--hFont); font-size: 28px; font-weight: var(--hWeight); margin: 0; color: var(--ink); }
.bkc2[data-shop="varetti"] #total_price { font-weight: 400; }
.bkc2 .price-details-span { color: var(--muted); display: inline-flex; cursor: pointer; }
.bkc2 .bkc2-cart, .bkc2 #kitchen-pdf-export-btn:not(.d-none) {
	border: 0; background: var(--cta); color: var(--onCta); border-radius: var(--r); padding: 15px 22px; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.bkc2 #kitchen-pdf-export-btn:not(.d-none) { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.bkc2 .bkc2-cart:disabled { opacity: .6; }

/* ---------- AI-kiesvenster ---------- */
.bkc2-ai { position: fixed; inset: 0; z-index: 10000; background: rgba(20,20,20,.55); display: flex; align-items: center; justify-content: center; padding: 32px; }
.bkc2-ai[hidden] { display: none; }
.bkc2-ai-box { background: var(--bg); width: min(860px, 100%); max-height: 100%; overflow: auto; border-radius: calc(var(--r) * 2); display: flex; flex-direction: column; }
.bkc2-ai-head { display: flex; justify-content: space-between; gap: 16px; padding: 24px 26px 14px; }
.bkc2-ai-head h2 { font-family: var(--hFont); text-transform: var(--hCase); font-size: var(--hSize); font-weight: var(--hWeight); line-height: 1; margin: 0 0 6px; }
.bkc2-ai-head p { font-size: 14px; color: var(--muted); margin: 0; }
.bkc2-ai-x { flex: none; width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); font-size: 18px; color: var(--ink); }
.bkc2-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 26px; }
.bkc2-ai-card { padding: 0; border: 2px solid var(--line); background: var(--surface); border-radius: var(--r); overflow: hidden; text-align: left; display: flex; flex-direction: column; color: var(--ink); }
.bkc2-ai-card.active { border-color: var(--accent); }
.bkc2-ai-img { display: block; aspect-ratio: 3 / 2; background: var(--stage) center / cover no-repeat; }
.bkc2-ai-card strong { padding: 10px 12px 0; font-size: 14px; }
.bkc2-ai-card small { padding: 2px 12px 12px; font-size: 12px; color: var(--muted); }
.bkc2-ai-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 26px 24px; margin-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.bkc2-ai-go { border: 0; background: var(--accent); color: var(--onAccent); padding: 14px 20px; border-radius: var(--r); font-size: 15px; font-weight: 700; white-space: nowrap; }
/* het resultaatvenster van configurator.js in dezelfde stijl */
.bkc2 ~ .vr-sf-modal .vr-sf-box, body .vr-sf-modal .vr-sf-box { font-family: inherit; }

/* losse pagina (niet ingebed): vul het scherm */
.bkc2.bkc2-page { height: 820px; min-height: 0; max-height: none; }   /* géén vh: in een meegroeiende iframe groeit 100vh eindeloos mee */

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
	.bkc2 .bkc2-main { grid-template-columns: minmax(0, 1fr) 400px; }
	.bkc2 .block-select-group, .bkc2 .depth-accessory-chip-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bkc2 .bkc2-usp li:nth-child(n+3) { display: none; }
}

/* ---------- mobiel ---------- */
@media (max-width: 767px) {
	.bkc2, .bkc2.bkc2-page { display: block; height: auto; max-height: none; min-height: 0; padding-bottom: 76px !important; }
	.bkc2 .bkc2-main { display: block; }
	.bkc2 .bkc2-stage { position: sticky; top: 0; z-index: 5; }
	.bkc2 #viewer { height: 270px; flex: none; }
	.bkc2 .bkc2-stage-tools { top: 10px; left: 10px; right: 10px; }
	.bkc2 .bkc2-chip { padding: 6px 10px; font-size: 12px; }
	.bkc2 .bkc2-ai-open { padding: 8px 12px; font-size: 13px; }
	.bkc2 .bkc2-ai-long { display: none; }
	.bkc2 .bkc2-ai-short { display: inline; }
	.bkc2 .bkc2-modules { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
	.bkc2 .bkc2-modules::-webkit-scrollbar { display: none; }
	.bkc2 .bkc2-mod { flex: none; }
	.bkc2 .bkc2-steps { padding: 0 8px; }
	.bkc2 :is(.step-item, .bkc2-step-item) { min-width: 0; flex: 1 1 0; flex-direction: column; gap: 4px; padding: 10px 4px 8px; text-align: center; }
	.bkc2 .bkc2-step-value { display: none; }
	.bkc2 .step-label { font-size: 12px; }
	.bkc2 .bkc2-panel { border-left: 0; }
	.bkc2 .bkc2-panel-body { overflow: visible; padding: 20px 16px; }
	.bkc2 .bkc2-title { font-size: calc(var(--hSize) * .85); }
	.bkc2 .block-select-group, .bkc2 .depth-accessory-chip-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bkc2 .bkc2-panel-nav { padding: 12px 16px 16px; }
	.bkc2 .bkc2-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
	.bkc2 .bkc2-usp, .bkc2 .bkc2-delivery, .bkc2 #kitchen-pdf-export-btn { display: none !important; }
	.bkc2 .bkc2-buy { width: 100%; justify-content: space-between; }
	.bkc2 .bkc2-price { align-items: flex-start; }
	.bkc2 #total_price { font-size: 22px; }
	.bkc2 .bkc2-cart { padding: 13px 16px; font-size: 14px; }
	.bkc2-ai { align-items: flex-end; padding: 0; }
	.bkc2-ai-box { border-radius: 16px 16px 0 0; max-height: 90%; }
	.bkc2-ai-grid { grid-template-columns: 1fr; padding: 0 16px; }
	.bkc2-ai-card { flex-direction: row; align-items: center; }
	.bkc2-ai-img { width: 110px; flex: none; }
	.bkc2-ai-head, .bkc2-ai-foot { padding-left: 16px; padding-right: 16px; }
}

/* ---------- v2: tegen de oude opmaak van het ingebedde venster ---------- */
.bkc2 .bkc2-main { grid-template-columns: minmax(0, 1fr) clamp(340px, 38%, 460px); }
.bkc2 #configurator-right-panel { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
.bkc2 .bkc2-ai-open { margin-left: 0; }
.bkc2 .bkc2-stage-tools { right: 72px; }
.bkc2 .block-select-group { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
.bkc2 .block-select-btn, .bkc2 .block-select-btn:hover, .bkc2 .block-select-btn:focus { background: var(--surface) !important; color: var(--ink) !important; box-shadow: none !important; min-width: 0 !important; }
.bkc2 .block-select-btn.active, .bkc2 .block-select-btn.active:hover { background: var(--accentSoft) !important; color: var(--ink) !important; border: 2px solid var(--accent) !important; }
.bkc2 .block-select-btn-label { color: var(--ink) !important; word-break: normal; overflow-wrap: anywhere; hyphens: none; }
.bkc2 .bkc2-price-tag { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.bkc2 .bkc2-panel-nav .btn-step-nav { border-radius: var(--r) !important; height: auto !important; min-height: 48px; white-space: nowrap; box-shadow: none !important; }
.bkc2 .bkc2-panel-nav .btn-next-step { flex: 1 1 auto !important; width: auto !important; background: var(--accent) !important; color: var(--onAccent) !important; border: 0 !important; }
.bkc2 .bkc2-panel-nav .btn-prev-step { flex: none !important; background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.bkc2 .bkc2-panel-nav .btn-prev-step.disabled { display: none !important; }

/* ---------- v4: één kolom 3D-knoppen rechtsboven: + − reset | centreren downloaden volledig scherm ---------- */
.bkc2 .bkc2-zoom { position: absolute; top: 16px; right: 16px; z-index: 7; display: flex; flex-direction: column; gap: 6px; }
.bkc2 .bkc2-zoom button,
.bkc2 #kitchen-center-btn, .bkc2 #kitchen-export-btn, .bkc2 #kitchen-fullscreen-btn {
	width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important;
	display: flex !important; align-items: center; justify-content: center;
	background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
	border-radius: var(--r) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; transform: none !important;
	left: auto !important; bottom: auto !important; right: 16px !important; cursor: pointer;
}
.bkc2 .bkc2-zoom button { position: static; }
.bkc2 .bkc2-zoom button:hover,
.bkc2 #kitchen-center-btn:hover, .bkc2 #kitchen-export-btn:hover, .bkc2 #kitchen-fullscreen-btn:hover { border-color: var(--ink) !important; }
.bkc2 #kitchen-center-btn, .bkc2 #kitchen-export-btn, .bkc2 #kitchen-fullscreen-btn { position: absolute !important; z-index: 7; }
.bkc2 #kitchen-center-btn { top: 166px !important; }
.bkc2 #kitchen-export-btn { top: 212px !important; }
.bkc2 #kitchen-fullscreen-btn { top: 258px !important; }
.bkc2 .bkc2-zoom::after { content: ''; display: block; height: 1px; margin: 4px 6px 0; background: var(--line); }
.bkc2 #kitchen-center-btn svg, .bkc2 #kitchen-export-btn svg, .bkc2 #kitchen-fullscreen-btn svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
	.bkc2 .bkc2-zoom { top: 52px; right: 10px; gap: 4px; }
	.bkc2 .bkc2-zoom button,
	.bkc2 #kitchen-center-btn, .bkc2 #kitchen-export-btn, .bkc2 #kitchen-fullscreen-btn { width: 34px !important; height: 34px !important; right: 10px !important; }
	.bkc2 .bkc2-zoom button[data-zoom="reset"], .bkc2 .bkc2-zoom::after { display: none; }
	.bkc2 #kitchen-center-btn { top: 52px !important; right: 52px !important; }
	.bkc2 #kitchen-export-btn { top: 52px !important; right: 90px !important; }
	.bkc2 #kitchen-fullscreen-btn { top: 52px !important; right: 128px !important; }
	.bkc2 .bkc2-stage-tools { right: 10px; }
}

.bkc2 .bkc2-mod-add { border-style: dashed; color: var(--ink); }
.bkc2 .bkc2-mod-add strong { font-size: 18px; line-height: 1; }
.bkc2 .bkc2-mod-add:hover:not(:disabled) { border-color: var(--accent); background: var(--accentSoft); }
.bkc2 .bkc2-mod-add:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- v8: keuzes rechts als kaarten (2 kolommen, beeld links, naam + prijs rechts) ---------- */
.bkc2 .bkc2-stage-tools .bkc2-chip, .bkc2 .bkc2-stage-tools button { pointer-events: auto; }
.bkc2 #configurator-right-panel .block-select-group { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.bkc2 #configurator-right-panel .block-select-btn {
	position: relative; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
	gap: 12px; width: auto !important; height: auto !important; min-height: 64px; padding: 10px 28px 10px 10px !important; margin: 0 !important;
	text-align: left !important; border: 2px solid var(--line) !important; border-radius: var(--r) !important; background: var(--surface) !important;
}
.bkc2 #configurator-right-panel .block-select-btn:hover { border-color: var(--ink) !important; }
.bkc2 #configurator-right-panel .block-select-btn.active { border-color: var(--accent) !important; background: var(--accentSoft) !important; }
.bkc2 #configurator-right-panel .block-select-btn img { width: 52px !important; height: 52px !important; max-width: none !important; object-fit: contain; flex: none; margin: 0 !important; border-radius: calc(var(--r) - 1px); background: var(--stage); }
.bkc2 #configurator-right-panel .block-select-btn-label { display: block; font-size: 14px !important; font-weight: 600 !important; line-height: 1.25; text-align: left !important; margin: 0 !important; }
.bkc2 #configurator-right-panel .block-select-btn .bkc2-price-tag { font-size: 13px; font-weight: 500; }
.bkc2 #configurator-right-panel .block-select-btn > :not(img):not(.block-select-btn-label):not(span) { position: absolute !important; top: 6px !important; right: 6px !important; left: auto !important; margin: 0 !important; transform: scale(.85); }
.bkc2 #configurator-right-panel .form-label, .bkc2 #configurator-right-panel .step-section-title, .bkc2 #configurator-right-panel h5, .bkc2 #configurator-right-panel h6 {
	font-family: var(--font) !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; margin: 18px 0 10px !important;
}
@media (max-width: 380px) { .bkc2 #configurator-right-panel .block-select-group { grid-template-columns: 1fr !important; } }

/* maat onder de keuken */
.bkc2 .bkc2-size { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; pointer-events: none;
	background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
	font: 600 13px/1 var(--font); letter-spacing: .01em; box-shadow: 0 2px 8px rgba(0,0,0,.06); white-space: nowrap; }
.bkc2 .bkc2-size:empty { display: none; }
@media (max-width: 767px) { .bkc2 .bkc2-size { bottom: 10px; font-size: 12px; padding: 5px 11px; } }

/* ---------- stap 5: Overzicht ---------- */
.bkc2 .bkc2-step-item { cursor: pointer; }
.bkc2 .bkc2-summary { display: none; flex-direction: column; gap: 16px; }
.bkc2.bkc2-on-summary .bkc2-summary { display: flex; }
.bkc2.bkc2-on-summary #configurator-form, .bkc2.bkc2-on-summary #open_door_units_panel { display: none !important; }
.bkc2 .bkc2-sum-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.bkc2 .bkc2-sum-row { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.bkc2 .bkc2-sum-row:hover .bkc2-sum-e { text-decoration: underline; }
.bkc2 .bkc2-sum-k { font-size: 13px; color: var(--muted); }
.bkc2 .bkc2-sum-v { font-size: 14px; font-weight: 600; }
.bkc2 .bkc2-sum-e { font-size: 13px; font-weight: 600; color: var(--accentInk, var(--accent)); }
.bkc2 .bkc2-sum-mods { list-style: none; margin: 0; padding: 12px 14px; background: var(--stage); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bkc2 .bkc2-sum-mods li { display: flex; justify-content: space-between; }
.bkc2 .bkc2-sum-size, .bkc2 .bkc2-sum-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.bkc2 .bkc2-sum-total { border-top: 2px solid var(--ink); padding-top: 14px; }
.bkc2 .bkc2-sum-total strong { font-family: var(--hFont); font-size: 28px; font-weight: var(--hWeight); }
.bkc2 .bkc2-sum-actions { display: flex; flex-direction: column; gap: 8px; }
.bkc2 .bkc2-sum-actions button { border-radius: var(--r); padding: 14px 16px; font: 600 14px var(--font); cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.bkc2 .bkc2-sum-actions .bkc2-sum-cart { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }
.bkc2 .bkc2-to-summary, .bkc2 .bkc2-back-summary { display: none !important; }
.bkc2[data-step="4"]:not(.bkc2-on-summary) .bkc2-to-summary { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
.bkc2[data-step="4"]:not(.bkc2-on-summary) #nextStepBtn { display: none !important; }
.bkc2.bkc2-on-summary .bkc2-back-summary { display: inline-flex !important; align-items: center; }
.bkc2.bkc2-on-summary #nextStepBtn, .bkc2.bkc2-on-summary #prevStepBtn { display: none !important; }

/* ---------- stap 1 zoals het ontwerp ---------- */
.bkc2 #configurator-right-panel #kitchen_shape_id_blocks { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.bkc2 #configurator-right-panel #kitchen_shape_id_blocks .block-select-btn { flex-direction: column !important; align-items: flex-start !important; padding: 12px !important; }
.bkc2 #configurator-right-panel #kitchen_shape_id_blocks .block-select-btn img { width: 100% !important; height: 54px !important; }
.bkc2 #configurator-right-panel #kitchen_shape_id_blocks .bkc2-price-tag { display: none; }
.bkc2 #configurator-right-panel #cabinet_depth_id_blocks .block-select-btn { padding: 14px 16px !important; }
.bkc2 #configurator-right-panel #cabinet_depth_id_blocks .block-select-btn img { display: none !important; }
.bkc2 #configurator-right-panel #cabinet_depth_id_blocks .block-select-btn-label { font-size: 15px !important; }
.bkc2 #configurator-right-panel #cabinet_depth_id_blocks .bkc2-price-tag { margin-top: 4px; line-height: 1.35; }
.bkc2 .bkc2-fit { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.bkc2 .bkc2-fit-tip { display: flex; gap: 12px; align-items: flex-start; background: var(--accentSoft); border-radius: var(--r); padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--accentInk); }
.bkc2 .bkc2-fit-tip svg { flex: none; margin-top: 2px; }
.bkc2 .bkc2-fit-table { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; font-size: 13px; }
.bkc2 .bkc2-fit-row { display: grid; grid-template-columns: minmax(0,1fr) 64px 64px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.bkc2 .bkc2-fit-row > span:not(:first-child) { justify-self: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.bkc2 .bkc2-fit-row strong { display: block; font-weight: 600; color: var(--ink); }
.bkc2 .bkc2-fit-row small { display: block; font-size: 12px; color: var(--muted); }
.bkc2 .bkc2-fit-head { background: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bkc2 .bkc2-fit-head > span:not(:first-child) { height: auto; font-size: 12px; }
.bkc2 .bkc2-fit[data-on="57"] .bkc2-fit-head [data-d="57"], .bkc2 .bkc2-fit[data-on="77"] .bkc2-fit-head [data-d="77"] { color: var(--ink); }
.bkc2 .bkc2-fit-row [data-v="✓"] { color: var(--ink); }
.bkc2 .bkc2-fit-row [data-v="~"] { color: var(--accentInk); background: var(--accentSoft); }
.bkc2 .bkc2-fit[data-on="57"] [data-d="57"][data-v="✓"], .bkc2 .bkc2-fit[data-on="77"] [data-d="77"][data-v="✓"] { background: var(--accent); color: var(--onAccent); }
.bkc2 .bkc2-fit-legend { padding: 9px 14px; font-size: 11px; color: var(--muted); }

/* ---------- loader i.p.v. voorbeeldfoto ---------- */
.bkc2 #viewer { position: relative; }
.bkc2.bkc2-loading #viewer > img, .bkc2.bkc2-loading #viewer .viewer-placeholder, .bkc2.bkc2-loading #viewer [class*="placeholder"] { visibility: hidden !important; }
.bkc2 .bkc2-loader { position: absolute; inset: 0; z-index: 20; background: var(--stage); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity .4s ease; }
.bkc2 .bkc2-loader.is-done { opacity: 0; pointer-events: none; }
.bkc2 .bkc2-loader-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: bkc2spin .8s linear infinite; }
.bkc2 .bkc2-loader-txt { font: 600 14px var(--font); color: var(--ink); }
.bkc2 .bkc2-loader-bar { width: 180px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bkc2 .bkc2-loader-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
@keyframes bkc2spin { to { transform: rotate(360deg); } }


/* ---------- geen voorbeeldfoto; iconen zoals het ontwerp ---------- */
.bkc2 .cfg-poster { display: none !important; }
.bkc2 .bkc2-hidden { display: none !important; }
.bkc2 #configurator-right-panel .bkc2-card > img { display: none !important; }
.bkc2 #configurator-right-panel .bkc2-card { position: relative; }
.bkc2 #configurator-right-panel .bkc2-card .block-select-info-icon { position: absolute; top: 8px; right: 8px; z-index: 2; }
.bkc2 .bkc2-ico { flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.bkc2 .bkc2-card-shape { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; padding: 14px 10px !important; }
.bkc2 .bkc2-card-shape .block-select-btn-label { align-items: center !important; }
.bkc2 .bkc2-card-swatch { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 10px !important; }
.bkc2 .bkc2-ico-swatch { display: block; width: 44px; height: 44px; border-radius: calc(var(--r) * .6); border: 1px solid rgba(0,0,0,.12); }
.bkc2 .bkc2-card-cab { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; padding: 12px 8px !important; }
.bkc2 .bkc2-ico-cab { width: 40px; height: 48px; border: 2px solid currentColor; border-radius: 3px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px; box-sizing: border-box; }
.bkc2 .bkc2-ico-cab b { display: block; height: 2px; background: currentColor; }
.bkc2 .bkc2-ico-cab i { display: block; flex: 1; border: 1.5px solid currentColor; border-radius: 1px; }
.bkc2 .bkc2-cab-drawers { justify-content: space-evenly; }
.bkc2 .bkc2-cab-shelf2, .bkc2 .bkc2-cab-shelf3 { justify-content: space-evenly; }
.bkc2 .bkc2-card-text { padding: 14px 16px !important; }
.bkc2 [id$="_blocks"]:has(> .bkc2-card-pill) { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.bkc2 .bkc2-card-pill { border-radius: 99px !important; padding: 8px 14px !important; min-height: 0 !important; width: auto !important; flex-direction: row !important; }
.bkc2 .bkc2-card-pill .bkc2-price-tag, .bkc2 .bkc2-card-pill .block-select-info-icon { display: none !important; }

/* ---------- vaste hoogte: voorkomt dat de pagina blijft groeien ---------- */
/* het 3D-canvas telt niet mee voor de hoogte (anders: canvas groeit -> viewer groeit -> canvas groeit ...) */
.bkc2 #viewer { position: relative !important; overflow: hidden !important; }
.bkc2 #viewer > canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
@media (min-width: 768px) {
	.bkc2 .bkc2-stage, .bkc2 #configurator-right-panel { height: 100%; min-height: 0; }
	.bkc2 #viewer { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
}
@media (max-width: 767px) {
	.bkc2 #viewer { height: 270px !important; }
}
/* sfeerbeeld-venster altijd midden in beeld */
body > .bkc2-ai { position: fixed !important; inset: 0 !important; z-index: 10000 !important; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,20,20,.55); }
body > .bkc2-ai[hidden] { display: none !important; }
body > .bkc2-ai .bkc2-ai-box { max-height: 640px; overflow: auto; }

/* sfeerbeeld-venster staat nu direct in <body>: dezelfde opmaak zonder .bkc2-voorvoegsel */
body > .bkc2-ai-open { margin-left: auto; background: var(--cta); color: var(--onCta); border-color: var(--cta); border-radius: var(--r); padding: 10px 16px; font-size: 14px; font-weight: 700; }
body > .bkc2-ai-short { display: none; }
body > .bkc2-ai-open { padding: 8px 12px; font-size: 13px; }
body > .bkc2-ai-long { display: none; }
body > .bkc2-ai-short { display: inline; }
body > .bkc2-ai-open { margin-left: 0; }

/* aantal modules: altijd verborgen, ook vóór het script draait */
.bkc2 #kitchen_layout_id_blocks { display: none !important; }

/* sfeerbeeld-venster: binnen de configurator, bovenaan over het 3D-beeld (werkt ook in een meegroeiende iframe) */
.bkc2 { position: relative; }
.bkc2 > .bkc2-ai, .bkc2 .bkc2-ai { position: absolute !important; inset: 0 !important; z-index: 50 !important; display: flex; align-items: flex-start !important; justify-content: center; padding: 90px 16px 16px !important; background: rgba(20,20,20,.55); }
.bkc2 .bkc2-ai[hidden] { display: none !important; }
.bkc2 .bkc2-ai .bkc2-ai-box { max-height: 640px; overflow: auto; }

/* vangnet: niets in de configurator mag hoger worden dan het vlak zelf */
@media (min-width: 768px) {
	.bkc2 .bkc2-main { min-height: 0 !important; overflow: hidden; }
	.bkc2 .bkc2-stage { overflow: hidden; }
}

/* elk canvas in het 3D-vlak (ook in een tussen-div) telt niet mee voor de hoogte */
.bkc2 #viewer canvas { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
.bkc2 #viewer > div:has(> canvas) { position: absolute !important; inset: 0 !important; }


/* eigen foto (4e kaart) */
.bkc2-ai .bkc2-ai-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 767px) { .bkc2-ai .bkc2-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.bkc2-ai .bkc2-ai-own { cursor: pointer; }
.bkc2-ai .bkc2-ai-upload { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--line); background-color: var(--surface) !important; background-size: cover; background-position: center; color: var(--muted); }
.bkc2-ai .bkc2-ai-upload em { font-style: normal; font-size: 13px; font-weight: 600; }
.bkc2-ai .bkc2-ai-upload.has-photo { border-style: solid; }
.bkc2-ai .bkc2-ai-upload.has-photo svg, .bkc2-ai .bkc2-ai-upload.has-photo em { display: none; }

/* levertijd */
.bkc2 .bkc2-total-raw { display: none !important; }
.bkc2 .bkc2-total { margin: 0; font-family: var(--hFont); font-weight: var(--hWeight); font-size: 28px; line-height: 1; }
.bkc2 .bkc2-deliv { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.bkc2 .bkc2-deliv-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bkc2 .bkc2-deliv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bkc2 .bkc2-deliv-card { border: 2px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 12px; text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: var(--ink); }
.bkc2 .bkc2-deliv-card strong { font-size: 14px; font-weight: 600; line-height: 1.25; }
.bkc2 .bkc2-deliv-card span { font-size: 12px; color: var(--muted); }
.bkc2 .bkc2-deliv-card.active { border-color: var(--accent); background: var(--accentSoft); }
@media (max-width: 767px) { .bkc2 .bkc2-deliv-grid { grid-template-columns: 1fr; } }

/* regel boven de prijs ('Levering binnen 1 week · gratis') weg: levertijd kies je nu in stap 4 */
.bkc2 .bkc2-delivery { display: none !important; }

/* ---------- onderbalk + knoppen netjes ---------- */
.bkc2 .bkc2-buy { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.bkc2 .bkc2-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.bkc2 .bkc2-price-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bkc2 .bkc2-total, .bkc2 #total_price { white-space: nowrap; }
.bkc2 #kitchen-pdf-export-btn:not(.d-none) { display: inline-flex !important; align-items: center; justify-content: center; height: 52px; padding: 0 18px !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; background: var(--surface) !important; color: var(--ink) !important; font: 600 13px var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; box-shadow: none !important; }
.bkc2 #kitchen-pdf-export-btn::after, .bkc2 #kitchen-pdf-export-btn::before { display: none !important; }
@media (max-width: 1199px) { .bkc2 #kitchen-pdf-export-btn { display: none !important; } }

/* stapnavigatie onderin het paneel: Vorige (rand) + Volgende/Naar overzicht (accent), even hoog */
.bkc2 #prevStepBtn:not(.d-none):not([style*="none"]) { display: inline-flex !important; align-items: center; justify-content: center; height: 48px; padding: 0 18px !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; background: var(--surface) !important; color: var(--ink) !important; font: 600 14px var(--font) !important; white-space: nowrap; }
.bkc2 .bkc2-to-summary { flex: 1; height: 48px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--onAccent); font: 600 15px var(--font); padding: 0 20px; display: none; align-items: center; justify-content: space-between !important; cursor: pointer; }

/* extra's in stap 4: alle regels even breed */
.bkc2 #configurator-right-panel label:has(> input[type="checkbox"]):not(.form-switch label):not(.open-door-module-toggle label):not(.open-door-module-toggle), .bkc2 #configurator-right-panel .form-check:not(.form-switch):not(.open-door-module-toggle):has(input[type="checkbox"]) { display: flex !important; align-items: center; gap: 12px; width: 100% !important; box-sizing: border-box; }
.bkc2 #configurator-right-panel label:has(> input[type="checkbox"]):not(.open-door-module-toggle label):not(.open-door-module-toggle) > :last-child { margin-left: auto; white-space: nowrap; }

/* stappenbalk: alle stappen klikbaar */
.bkc2 .step-item, .bkc2 .step-item * { pointer-events: auto !important; }
.bkc2 .step-item { cursor: pointer !important; }
.bkc2 .step-item:not(.active):hover .step-label { color: var(--ink) !important; }

/* ---------- mobiel: niets plakt mee bij scrollen; "Bekijk in jouw omgeving" altijd zichtbaar ---------- */
@media (max-width: 767px) {
	.bkc2 .bkc2-stage, .bkc2 .bkc2-steps, .bkc2 .bkc2-head, .bkc2 header, .bkc2 .step-bar, .bkc2 .steps-wrapper { position: relative !important; top: auto !important; }
	.bkc2 .bkc2-stage-tools { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; pointer-events: auto; right: 10px !important; padding-bottom: 2px; height: auto; max-height: 48px; }
	.bkc2 .bkc2-stage-tools::-webkit-scrollbar { display: none; }
	.bkc2 .bkc2-stage-tools > * { flex: none; }
	.bkc2 .bkc2-ai-open { order: -1; display: inline-flex !important; align-items: center; gap: 6px; }
	.bkc2 .bkc2-ai .bkc2-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.bkc2 .bkc2-ai { padding-top: 16px !important; }
}

/* schakelaar "Weergave met open deur" per module: compact, zoals een gewone schakelaar */
.bkc2 #configurator-right-panel .open-door-module-toggle, .bkc2 #configurator-right-panel .form-switch { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; padding: 12px 0 !important; margin: 0 !important; font-size: 14px; }
.bkc2 #configurator-right-panel .open-door-module-toggle input[type="checkbox"], .bkc2 #configurator-right-panel .form-switch input[type="checkbox"] { flex: none !important; width: 40px !important; height: 22px !important; min-width: 40px; max-width: 40px; margin: 0 !important; order: 2; float: none !important; }
.bkc2 #configurator-right-panel .open-door-module-toggle label, .bkc2 #configurator-right-panel .form-switch label { flex: 1 1 auto; width: auto !important; margin: 0 !important; white-space: normal; }

/* echte schakelaar tekenen (track + knop), los van de oude Bootstrap-opmaak */
.bkc2 #configurator-right-panel .open-door-module-toggle input[type="checkbox"], .bkc2 #configurator-right-panel .form-switch input[type="checkbox"] {
	-webkit-appearance: none !important; appearance: none !important; cursor: pointer;
	border: 0 !important; border-radius: 999px !important; box-shadow: none !important; outline: none;
	background-color: var(--line) !important;
	background-image: radial-gradient(circle at center, #fff 0 8px, transparent 8.5px) !important;
	background-size: 22px 22px !important; background-repeat: no-repeat !important; background-position: left center !important;
	transition: background-position .15s ease, background-color .15s ease;
}
.bkc2 #configurator-right-panel .open-door-module-toggle input[type="checkbox"]:checked, .bkc2 #configurator-right-panel .form-switch input[type="checkbox"]:checked {
	background-color: var(--accent) !important; background-position: right center !important;
}
/* dubbele lijst "Weergave met open deur – Module 1" verbergen: de schakelaar hierboven en de knop in het 3D-beeld doen hetzelfde */
.bkc2 #open_door_units_panel { display: none !important; }

/* pop-up ontwerp hervatten: boven alles */
[data-bkc2-front] { z-index: 2147483000 !important; pointer-events: auto !important; }
[data-bkc2-front] button, [data-bkc2-front] a { pointer-events: auto !important; touch-action: manipulation; }

/* schakelaar via eigen klasse (raakt altijd, ongeacht de opbouw) */
.bkc2 .bkc2-switch-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; width: 100% !important; padding: 12px 0 !important; margin: 0 !important; }
.bkc2 input.bkc2-switch {
	-webkit-appearance: none !important; appearance: none !important; display: inline-block !important; position: relative !important;
	flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; order: 2;
	border: 0 !important; border-radius: 999px !important; box-shadow: none !important; outline: none; cursor: pointer; float: none !important; opacity: 1 !important; visibility: visible !important;
	background-color: #d9d6cf !important;
	background-image: radial-gradient(circle at center, #fff 0 9px, transparent 9.5px) !important;
	background-size: 24px 24px !important; background-repeat: no-repeat !important; background-position: left center !important;
	transition: background-position .15s ease, background-color .15s ease;
}
.bkc2 input.bkc2-switch:checked { background-color: var(--accent) !important; background-position: right center !important; }
.bkc2 input.bkc2-switch::before, .bkc2 input.bkc2-switch::after { display: none !important; content: none !important; }

/* ---------- pop-up "Ontwerp hervatten" (design-autosave.js, #resume-design-modal) ---------- */
#resume-design-modal.resume-design-modal-overlay {
	position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; pointer-events: auto !important;
	display: flex !important; align-items: flex-start !important; justify-content: center !important;
	padding: 72px 16px 16px !important; background: rgba(20,20,20,.55) !important; box-sizing: border-box;
}
#resume-design-modal .resume-design-modal {
	position: relative !important; z-index: 1; width: min(440px, 100%) !important; margin: 0 !important;
	background: #fff !important; border-radius: 8px !important; padding: 22px 20px !important; box-shadow: 0 12px 40px rgba(0,0,0,.25) !important;
	font-family: 'Barlow', sans-serif; color: #1c1c1c; text-align: left;
}
#resume-design-modal h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1.05; margin: 0 0 8px !important; }
#resume-design-modal p { font-size: 14px; line-height: 1.5; color: #5f5f5f; margin: 0 0 18px !important; }
#resume-design-modal .resume-design-modal-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap; }
#resume-design-modal .resume-design-modal-actions button {
	flex: 1 1 160px; min-height: 48px; border-radius: 4px; font: 700 14px 'Barlow', sans-serif; cursor: pointer;
	pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; z-index: 2;
}
#resume-design-modal #resume-design-discard-btn { background: #fff !important; color: #1c1c1c !important; border: 1px solid #e2e0db !important; }
#resume-design-modal #resume-design-confirm-btn { background: #f7931e !important; color: #1c1c1c !important; border: 1px solid #f7931e !important; }

/* ---------- mobiel in de website (iframe): geen vaste lagen ----------
   Op een echte telefoon klopt 'position: fixed' in een meegroeiende iframe niet: de onderbalk wordt
   op de ene plek getekend maar vangt tikken op een andere plek af (over de keuzes heen). */
@media (max-width: 767px) {
	.bkc2.bkc2-embedded { padding-bottom: 0 !important; }
	.bkc2.bkc2-embedded .bkc2-foot { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; box-shadow: none !important; }
	.bkc2.bkc2-embedded .bkc2-stage, .bkc2.bkc2-embedded .bkc2-steps { position: relative !important; }
	.bkc2.bkc2-embedded #configurator-right-panel, .bkc2.bkc2-embedded #configurator-form { position: relative; z-index: 1; }
}

/* mobiel: vaste AI-knop in het 3D-beeld */
.bkc2 .bkc2-ai-mobile { display: none; }
@media (max-width: 767px) {
	.bkc2 .bkc2-stage-tools .bkc2-ai-open { display: none !important; }
	.bkc2 .bkc2-ai-mobile { display: inline-flex !important; position: absolute; left: 10px; bottom: 10px; z-index: 12; align-items: center; gap: 6px;
		background: var(--cta); color: var(--onCta); border: 0; border-radius: var(--r); padding: 10px 14px; font: 700 13px var(--font); box-shadow: 0 2px 8px rgba(0,0,0,.18); touch-action: manipulation; }
	.bkc2 .bkc2-size { left: auto !important; right: 10px; transform: none !important; }
}

/* sfeerbeeld-venster op mobiel: kaarten met foto boven, tekst eronder; knop over de volle breedte */
@media (max-width: 767px) {
	.bkc2-ai .bkc2-ai-box { width: 100% !important; }
	.bkc2-ai .bkc2-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 0 16px !important; }
	.bkc2-ai .bkc2-ai-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; text-align: left !important; padding: 0 !important; overflow: hidden; min-width: 0; }
	.bkc2-ai .bkc2-ai-card .bkc2-ai-img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; flex: none !important; border-radius: 0 !important; }
	.bkc2-ai .bkc2-ai-card strong { display: block; padding: 8px 10px 0; font-size: 13px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
	.bkc2-ai .bkc2-ai-card small { display: block; padding: 2px 10px 10px; font-size: 11px; line-height: 1.3; }
	.bkc2-ai .bkc2-ai-upload { border-width: 1px !important; margin: 0; }
	.bkc2-ai .bkc2-ai-head { padding: 18px 16px 12px !important; }
	.bkc2-ai .bkc2-ai-head h2 { font-size: 24px !important; }
	.bkc2-ai .bkc2-ai-head p { font-size: 13px !important; }
	.bkc2-ai .bkc2-ai-foot { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 14px 16px 16px !important; }
	.bkc2-ai .bkc2-ai-foot span { font-size: 12px; }
	.bkc2-ai .bkc2-ai-go { width: 100% !important; justify-content: space-between; }
}

/* ---------- mobiel: knoppen in het 3D-beeld netjes in één kolom rechts ---------- */
@media (max-width: 767px) {
	.bkc2 #viewer { height: 320px !important; }
	/* schakelaars (maten / deur open / schaduw) linksboven, klein en schuifbaar */
	.bkc2 .bkc2-stage-tools { top: 8px !important; left: 8px !important; right: 52px !important; gap: 6px !important; }
	.bkc2 .bkc2-chip { padding: 5px 9px !important; font-size: 11px !important; gap: 5px !important; }
	.bkc2 .bkc2-chip input { width: 13px !important; height: 13px !important; }
	/* zoom + eigen knoppen (centreren, downloaden, volledig scherm): één kolom rechts */
	.bkc2 .bkc2-zoom { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; display: flex !important; flex-direction: column !important; gap: 4px !important; z-index: 11; }
	.bkc2 .bkc2-zoom button { width: 34px !important; height: 34px !important; }
	.bkc2 #viewer > div:not(.bkc2-zoom):not(.bkc2-loader):not(.bkc2-size):not(.vr-sf):not(.vr-pt-bar):has(> button) {
		position: absolute !important; top: 124px !important; right: 8px !important; left: auto !important; bottom: auto !important;
		display: flex !important; flex-direction: column !important; gap: 4px !important; z-index: 11; transform: none !important;
	}
	.bkc2 #viewer > div:not(.bkc2-zoom):not(.bkc2-loader):not(.bkc2-size):not(.vr-sf):not(.vr-pt-bar):has(> button) > button { width: 34px !important; height: 34px !important; padding: 0 !important; margin: 0 !important; }
	/* onderrand: AI-knop links, maat rechts */
	.bkc2 .bkc2-ai-mobile { left: 8px !important; bottom: 8px !important; padding: 8px 12px !important; font-size: 12px !important; }
	.bkc2 .bkc2-size { right: 8px !important; bottom: 8px !important; font-size: 11px !important; padding: 5px 10px !important; }
}