/* Lenselink Studio (de interieurplanner): de huisstijl van de productie bovenop de stijl van de planner (app.css).
   Hoekig en vlak, navy met oranje voor de ene hoofdactie, het L-blok, een streep
   en de naam van de omgeving. Licht (standaard) of donker, steeds de hele interface. Alleen echte rondjes blijven rond. */

.studio-page {
  --navy: var(--lz-navy); --oranje: var(--lz-oranje); --oranje-2: var(--lz-oranje-2);
  --st-accent: #FF7A33;
}
.studio-page.st-light { --st-accent: var(--lz-oranje-2); --st-bg: var(--lz-vlak-2); --st-stage1: var(--lz-wit); --st-stage2: var(--lz-werkvlak); }

/* hoekig: stijl.css (alle omgevingen); rond is alleen wat zwevend boven het 3D-beeld ligt (verderop, met !important) */
.studio-page .st-quote-in, .studio-page .st-cams, .studio-page .rp-tools, .studio-page .btn, .studio-page .chip-light { box-shadow: none !important; }

/* licht is helemaal licht (kop, zijbalk, panelen en werkvlak), donker helemaal donker. app.css zet op .st-top altijd de
   donkere kleuren; in de lichte weergave krijgt de kop hier de lichte (zelfde als .studio-page.st-light) */
.studio-page.st-light .st-top {
  --st-top: var(--lz-wit); --st-left: var(--lz-wit); --st-card: var(--lz-wit); --st-raise: var(--lz-vlak-2); --st-hover: #FFF6F0; --st-hover2: var(--lz-vlak-2);
  --st-line: var(--lz-lijn); --st-line2: var(--lz-rand); --st-ink: var(--lz-navy); --st-strong: var(--lz-navy); --st-soft: var(--lz-tekst-2); --st-muted: var(--lz-grijs); --st-on: var(--lz-oranje-licht); --st-onb: var(--lz-oranje-rand);
  --st-accent: var(--lz-oranje-2); --st-warn: #8A3A0A; --st-del: var(--lz-rood);
}
.studio-page .st-top { background: var(--st-top); border-bottom: 1px solid var(--st-line); }
.studio-page .st-left { background: var(--st-left); }

/* merk: het oranje vierkant met de L, een streep en "Studio" (zoals "L | Productie") */
.st-merk { display: flex; align-items: center; gap: 16px; text-decoration: none; flex: none; }
.st-merk img { width: auto; height: 23px; display: block; }
/* aan de beheerkant (werkplek) alleen het L-blok, zonder woordmerk */
.st-merk img.st-merk-blok { width: 30px; height: 30px; }
/* het woordmerk in de kleur van de weergave: donker op licht, wit op donker */
.st-merk .st-merk-donker, body.st-light .st-merk .st-merk-licht { display: block; }
.st-merk .st-merk-licht, body.st-light .st-merk .st-merk-donker { display: none; }
.st-merk span { font-weight: 700; font-size: 15px; line-height: 22px; color: var(--st-strong); padding-left: 16px; border-left: 1px solid var(--st-line2); white-space: nowrap; letter-spacing: .01em; }
.st-merk small { font-weight: 500; color: var(--st-muted); margin-left: 8px; font-size: 12px; }

/* stappen: een keten van tabs met een oranje streep onder de huidige stap */
.studio-page .st-stepnav { gap: 0; background: none; border: 0; padding: 0; align-self: stretch; }
.studio-page .st-stepnav button { height: 100%; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--st-soft); font-weight: 600; }
.studio-page .st-stepnav button span { width: 20px; height: 20px; display: inline-grid; place-items: center; margin-right: 8px; background: var(--st-raise); color: var(--st-strong); font-size: 11px; }
.studio-page .st-stepnav button:hover { color: var(--st-strong); background: var(--st-hover2); }
.studio-page .st-stepnav button.is-on { color: var(--st-strong); border-bottom-color: var(--oranje); background: none; }
.studio-page .st-stepnav button.is-on span { color: var(--lz-wit); }
.studio-page .st-stepnav button.is-on span { background: var(--oranje); }

/* één oranje hoofdknop; gewone knoppen met een lijn */
.studio-page .btn-primary { background: var(--oranje); border-color: var(--oranje); color: var(--lz-wit); }
.studio-page .btn-primary:hover { background: var(--oranje-2); border-color: var(--oranje-2); }
.studio-page .st-h > span { background: var(--oranje); color: var(--lz-wit); }

/* ---------------------------------------------------------------- vrije meubels */
.mu-blok { border: 1px solid var(--line-2); margin: 12px 0 0; padding: 12px; min-width: 0; }
.mu-blok legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--st-strong, var(--ink)); }
.mu-sub { border-color: var(--oranje); }
.mu-kop { margin: 14px 0 6px; font-weight: 700; }
.mu-lijst { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.mu-lijst button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit; font-size: 13px; }
.mu-lijst button:hover { border-color: var(--st-accent, var(--oranje)); }
.mu-lijst button.is-on { border-color: var(--oranje); box-shadow: inset 3px 0 0 var(--oranje); }
.mu-lijst small { color: var(--muted); font-size: 11.5px; }
.rp-num-wide { grid-column: 1 / -1; display: block; margin: 0 0 8px; }
.rp-num-wide .rp-in input { width: 100%; text-align: left; }
.mu-blok select { width: 100%; padding: 6px 8px; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); font: inherit; font-size: 13px; }
.mu-voorbeeld { margin: 8px 0; background: var(--lz-wit); border: 1px solid var(--line-2); }
.mu-vorm { display: block; width: 100%; height: auto; cursor: crosshair; }
.mu-vorm .mu-bb { fill: none; stroke: var(--lz-lijn-sterk); stroke-dasharray: 3 3; stroke-width: 1; }
.mu-vorm .mu-pad { fill: #F7D9C6; stroke: var(--oranje); stroke-width: 1.5; }
.mu-vorm .mu-pt { fill: var(--lz-wit); stroke: var(--navy); stroke-width: 1.5; }
.mu-vorm .mu-maat { font: 600 10px Inter, system-ui, sans-serif; fill: var(--lz-navy); text-anchor: middle; }
.mu-vorm text[text-anchor="end"] { text-anchor: end; }
.mu-hoeken { display: grid; gap: 6px; }
.mu-hoek { display: grid; grid-template-columns: 86px 1fr 96px; gap: 6px; align-items: center; font-size: 12.5px; }
.mu-hoek .rp-in input { width: 60px; }
.mu-pts { display: grid; gap: 3px; margin: 6px 0; max-height: 260px; overflow-y: auto; font-size: 12px; }
.mu-pt-kop, .mu-pt-rij { display: grid; grid-template-columns: 22px 1fr 1fr 64px 26px; gap: 4px; align-items: center; }
.mu-pt-kop { color: var(--muted); font-weight: 600; }
.mu-pt-rij input { width: 100%; min-width: 0; padding: 3px 4px; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); font: inherit; }
.mu-file { cursor: pointer; }
.mu-kant .kseg button { min-width: 0; }
.mu-kant-extra { display: flex; gap: 6px; margin-top: 4px; align-items: center; }
.mu-kant-extra select { flex: 1; min-width: 0; padding: 3px 4px; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); font: inherit; }
.mu-kant-extra .rp-in { width: 76px; }
.mu-kant-extra input { width: 100%; min-width: 0; }

/* plattegrond: een vrij meubel van boven */
.rp-mbl { cursor: grab; }
.rp-mbl .rp-mbody { fill: rgba(232, 89, 12, .08); stroke: var(--lz-navy); stroke-width: 6; stroke-dasharray: 30 18; }
.rp-mbl .rp-mdeel { fill: #E9E2DA; stroke: #6C7D86; stroke-width: 3; }
.rp-mbl.is-sel .rp-mbody { stroke: var(--oranje); stroke-width: 12; stroke-dasharray: none; }
.rp-mbl .rp-lab { fill: var(--lz-navy); font-weight: 700; text-anchor: middle; pointer-events: none; }
.cat-sub { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--st-strong, var(--ink)); }
.cat-sub small { font-weight: 500; color: var(--muted); }
.mu-eigen { position: relative; }
.mu-eigen .btn-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; line-height: 1; }
.mu-eigen .cat-tile { width: 100%; }

/* kleur van één kast (eigen kleur naast die van het project) */
.studio-page .kast-kleur { display: grid; gap: 6px; }
.studio-page .kk-rij { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
/* een eigen kleur: "Zoals het project" onder de naam, zodat de naam leesbaar blijft */
.studio-page .kk-rij > button + button { grid-column: 2 / -1; justify-self: start; }
.studio-page .kk-rij .mat-sw { width: 28px; height: 28px; background-size: cover; border: 1px solid var(--st-line2); }
.studio-page .kk-rij strong { display: block; font-size: 13px; }
.studio-page .kk-rij small { display: block; font-size: 11.5px; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-page .st-rijkleur { margin-top: 14px; }
.studio-page .st-rijkleur summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.studio-page .st-rijkleur .kast-kleur { margin: 8px 0 12px; }

/* stap 2: regels per wand of eiland */
.studio-page .st-rijregels { margin-top: 16px; }
.studio-page .st-rijregels summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
/* per wand of eiland: elke regel op een eigen regel met het label ervoor (een tabel met vier kolommen werd te smal) */
.studio-page .st-rrwand { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--st-line); font-size: 12.5px; }
.studio-page .st-rrwand > strong { grid-column: 1 / -1; color: var(--st-strong); font-size: 13px; }
.studio-page .st-rrwand > label { display: contents; }
.studio-page .st-rrwand > label > span { color: var(--st-soft); }
.studio-page .st-rrwand select { width: 100%; min-width: 0; font-size: 12.5px; padding: 5px 6px; }
.studio-page .st-rrwand .rp-in { display: flex; align-items: center; gap: 4px; }
.studio-page .st-rrwand .rp-in input { width: 72px; font-size: 12.5px; padding: 5px 6px; }

/* nieuw project: keuken of kast */
.studio-page .st-nieuwkeus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.studio-page .st-nk { display: grid; gap: 4px; text-align: left; padding: 14px; border: 1px solid var(--st-line2); background: var(--st-card); color: var(--st-ink); cursor: pointer; }
.studio-page .st-nk:hover, .studio-page .st-nk:focus-visible { border-color: var(--st-accent); }
.studio-page .st-nk strong { font-size: 15px; color: var(--st-strong); }
.studio-page .st-nk span { font-size: 12.5px; color: var(--st-muted); }
@media (max-width: 560px) { .studio-page .st-nieuwkeus { grid-template-columns: 1fr; } }

/* ================================================================ werkplek (fase 2): rail links, paneel, beeld, eigenschappen, onderbalk
   Groot scherm: | rail | paneel van de stap | beeld | eigenschappen |, onderin de prijs en de volgende stap.
   Kleiner scherm: alles onder elkaar (beeld, eigenschappen, paneel, onderbalk); de stappen staan dan bovenin. */
.studio-page .st-rail { display: none; }
.studio-page .st-props { background: var(--st-card); padding: 16px; overflow-y: auto; min-height: 0; border-left: 1px solid var(--st-line); scrollbar-color: var(--st-line2) transparent; }
.studio-page .st-props-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 12px; }
.studio-page .st-props-leeg { font-size: 13px; color: var(--st-muted); margin: 0; }
.studio-page .st-sel:not(:empty) + .st-props-leeg { display: none; }
.studio-page .st-foot { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--st-left); border-top: 1px solid var(--st-line); min-width: 0; }
.studio-page .st-foot .st-quote { position: static !important; width: auto !important; max-width: none !important; margin: 0; flex: 1 1 auto; min-width: 0; box-shadow: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.studio-page .st-foot .st-next { display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; border: 0; position: static; background: transparent; flex: none; }
.studio-page .st-catpanel { position: static !important; width: auto !important; max-height: none !important; margin: 0 0 16px; }

@media (min-width: 1181px) {
  .studio-page .st { grid-template-columns: 76px 320px minmax(0, 1fr) 300px; grid-template-rows: 58px minmax(0, 1fr) auto; }
  .studio-page .st-top { grid-column: 1 / -1; grid-row: 1; }
  .studio-page .st-stepnav { display: none; }
  .studio-page .st-rail { grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; background: var(--st-left); border-right: 1px solid var(--st-line); }
  .studio-page .st-rail button { display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border: 0; background: transparent; color: var(--st-muted); font: 600 10.5px/1.2 inherit; cursor: pointer; }
  .studio-page .st-rail button svg { width: 20px; height: 20px; }
  .studio-page .st-rail button:hover { color: var(--st-strong); background: var(--st-hover); }
  .studio-page .st-rail button.is-on { color: var(--st-strong); background: var(--st-raise); box-shadow: inset 3px 0 0 var(--st-accent); }
  .studio-page .st-left { grid-column: 2; grid-row: 2; }
  .studio-page .st-main { grid-column: 3; grid-row: 2; }
  .studio-page .st-props { grid-column: 4; grid-row: 2; }
  .studio-page .st-foot { grid-column: 2 / -1; grid-row: 3; }
  .studio-page .st.is-folded { grid-template-columns: 76px 0 minmax(0, 1fr) 0; }
  .studio-page .st.is-folded .st-props, .studio-page .st.is-folded .st-left { display: none !important; }
}
@media (max-width: 1180px) {
  .studio-page .st { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .studio-page .st-main { order: 1; min-height: 58vh; }
  .studio-page .st-props { order: 2; border-left: 0; border-top: 1px solid var(--st-line); }
  .studio-page .st-left { order: 3; border-right: 0; }
  .studio-page .st-foot { order: 4; position: sticky; bottom: 0; z-index: 10; }
  .studio-page .st-stage { min-height: 58vh; }
}
/* onderbalk: de prijs op één regel; "Wat zit erin?" klapt naar boven open */
.studio-page .st-foot { position: relative; }
.studio-page .st-foot .st-quote-in { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.studio-page .st-foot .st-quote-in > div:first-child { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; }
.studio-page .st-foot .st-quote-in > div:first-child small { white-space: nowrap; color: var(--st-muted); }
.studio-page .st-foot .st-quote-in > div:first-child strong { font-size: 18px; white-space: nowrap; color: var(--st-strong); }
.studio-page .st-foot .st-quote-in > div:first-child > span { font-size: 12px; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.studio-page .st-foot .st-quote-in .btn-lg { height: 36px; padding: 0 16px; font-size: 13.5px; flex: none; }
.studio-page .st-foot .st-qmore { flex: none; }
.studio-page .st-foot .st-qmore > summary { cursor: pointer; font-size: 12.5px; color: var(--st-soft); white-space: nowrap; }
@media (max-width: 760px) { .studio-page .st-foot { flex-wrap: wrap; } .studio-page .st-foot .st-quote-in > div:first-child > span { display: none; } }
.studio-page .st-foot .st-quote-in, .studio-page .st-foot .st-quote-in > div:first-child { flex-direction: row !important; flex-wrap: nowrap; }
.studio-page .st-foot .st-quote-in > * { margin: 0 !important; }
.studio-page .st-foot .st-quote-in .btn { width: auto !important; flex: none !important; }
.studio-page .st-foot .st-quote-in > div:first-child { flex: 1 1 auto !important; }
@media (max-width: 1180px) {
  .studio-page .st-top { flex-wrap: wrap; height: auto; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .studio-page .st-top .st-stepnav { order: 9; flex: 1 1 100%; margin: 0; overflow-x: auto; }
  .studio-page .st-top .st-top-r { flex-wrap: wrap; min-width: 0; }
}

/* werkplek: dezelfde indeling in elke stap (de oude regels voor ".st:not([data-step=inrichten])" wogen zwaarder) */
@media (min-width: 1181px) {
  .studio-page .st[data-step] { grid-template-columns: 76px 320px minmax(0, 1fr) 300px; grid-template-rows: 58px minmax(0, 1fr) auto; }
  .studio-page .st[data-step].is-folded { grid-template-columns: 76px 0 minmax(0, 1fr) 0 !important; } /* app.css zet bij inklappen één kolom met !important */
  .studio-page .st[data-step].is-folded .st-main { grid-column: 3 !important; }
  .studio-page .st[data-step] .st-top { grid-column: 1 / -1; grid-row: 1; }
  .studio-page .st[data-step] .st-rail { grid-column: 1; grid-row: 2 / 4; }
  .studio-page .st[data-step] .st-left { grid-column: 2; grid-row: 2; }
  .studio-page .st[data-step] .st-main { grid-column: 3; grid-row: 2; }
  .studio-page .st[data-step] .st-props { grid-column: 4; grid-row: 2; }
  .studio-page .st[data-step] .st-foot { grid-column: 2 / -1; grid-row: 3; }
}
@media (max-width: 1180px) {
  .studio-page .st[data-step] { display: flex; flex-direction: column; }
}

/* rechtsboven: Render en de hoofdknop; in de prijsbalk onderin alleen de prijs, "Wat zit erin?" en de volgende stap */
.studio-page .st-topacties { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.studio-page .st-topacties .rp-photo-btn, .studio-page .st-delen { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--st-line2); background: transparent; color: var(--st-ink); font: 600 13px/1 inherit; cursor: pointer; }
.studio-page .st-delen:hover, .studio-page .st-topacties .rp-photo-btn:hover { border-color: var(--oranje); }
.studio-page .st-topacties .rp-photo-btn[aria-pressed="true"] { background: var(--oranje); border-color: var(--oranje); color: var(--lz-wit); }
.studio-page .st-topacties .btn { height: 32px; }
.studio-page .st-foot [data-prod], .studio-page .st-foot [data-quote], .studio-page .st-foot [data-order] { display: none !important; }

/* overzicht: onderdelen per materiaal */
.studio-page .st-ond { margin: 14px 0; }
.studio-page .st-ond > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.studio-page .st-ond > summary span { font-weight: 400; color: var(--st-muted); margin-left: 6px; }
.studio-page .st-ondtab { width: 100%; font-size: 12px; margin-bottom: 8px; }
.studio-page .st-ondtab td { padding: 3px 4px; vertical-align: top; }
.studio-page .st-ondtab td:nth-child(2) { width: 100%; }
.studio-page .st-ondtab .mono { white-space: nowrap; }

/* Eigenschappen (300 px breed): badge, naam en sluiten op de eerste regel; Vastzetten eronder, zodat de naam niet in een
   smalle kolom van 4 px valt */
.studio-page .st-props .rp-selhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; align-items: start; }
.studio-page .st-props .rp-selhead > .rp-badge { grid-column: 1; grid-row: 1; }
.studio-page .st-props .rp-selhead > div { grid-column: 2; grid-row: 1; }
.studio-page .st-props .rp-selhead > .btn-x { grid-column: 3; grid-row: 1; margin-left: 0; }
.studio-page .st-props .rp-selhead > .st-lock { grid-column: 2 / 4; grid-row: 2; justify-self: start; margin-left: 0; }

/* catalogus: vijf tabbladen in de smalle kolom, drie per regel (niet afgekapt als "Ond…"). Onderstreept zoals elk tabblad
   (STIJL: de huidige met een oranje streep, Beau 15-10: "de tabbladen moeten duidelijker"); geen oranje blok meer, want
   oranje vlak is voor de ene hoofdactie */
.studio-page .st .cat-tabs { display: grid; grid-template-columns: repeat(3, auto); justify-content: stretch; gap: 0; padding: 0; margin: 0 0 12px; background: none; border: 0; border-bottom: 1px solid var(--st-line2); }
.studio-page .st .cat-tabs button { height: 34px; min-width: 0; padding: 0 6px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--st-soft); font-size: 12.5px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-page .st .cat-tabs button:hover { color: var(--st-strong); background: var(--st-hover2); }
.studio-page .st .cat-tabs button.is-on { background: none; color: var(--st-strong); border-bottom-color: var(--oranje); }

/* menubalk linksboven: Bestand, Bewerken, Beeld en het account (zoals in een programma) */
.studio-page .st-menubar { display: flex; align-items: stretch; align-self: stretch; gap: 0; margin-left: 4px; }
.studio-page .st-mn { position: relative; display: flex; }
.studio-page .st-mn > summary { list-style: none; display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--st-soft); user-select: none; }
.studio-page .st-mn > summary::-webkit-details-marker { display: none; }
.studio-page .st-mn > summary:hover, .studio-page .st-mn[open] > summary { color: var(--st-strong); background: var(--st-hover2); }
.studio-page .st-mn-l { position: absolute; left: 0; top: 100%; z-index: 60; min-width: 230px; padding: 4px 0; background: var(--st-card); border: 1px solid var(--st-line2); box-shadow: 0 10px 28px var(--st-shadow, rgba(13,30,39,.2)); }
.studio-page .st-mn-l > button, .studio-page .st-mn-l > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 8px 14px; border: 0; background: none; color: var(--st-ink); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; }
.studio-page .st-mn-l > button:hover:not(:disabled), .studio-page .st-mn-l > a:hover { background: var(--st-hover2); color: var(--st-strong); }
.studio-page .st-mn-l > button:disabled { opacity: .45; cursor: default; }
.studio-page .st-mn-l kbd { font: 500 11.5px Inter, system-ui, sans-serif; color: var(--st-muted); }
.studio-page .st-mn-l hr { border: 0; border-top: 1px solid var(--st-line); margin: 4px 0; }
.studio-page .st-mn-undo { align-self: center; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; border: 1px solid var(--st-line2); background: none; color: var(--st-soft); cursor: pointer; }
.studio-page .st-mn-undo:hover:not(:disabled) { color: var(--st-strong); background: var(--st-hover2); }
.studio-page .st-mn-undo:disabled { opacity: .4; cursor: default; }

/* rechtsboven in de hoek: Delen (met het projectnummer), Render en Naar productie */
.studio-page .st-top .st-top-r { margin-left: auto; }
.studio-page .st .rp-proj { color: var(--st-strong); border-color: var(--st-line2); }
.studio-page .st .rp-proj-n, .studio-page .st .rp-proj em { color: var(--st-muted); }

/* Regels: de doorsnede met de maten groot rechts in het werkvlak (in de smalle kolom was hij onleesbaar) */
.studio-page .st-schets { display: none; }
.studio-page .st[data-step="ontwerp"] .st-schets { display: flex; position: absolute; z-index: 5; top: 116px; right: 16px; bottom: 16px; width: min(560px, 48%); padding: 16px 18px 12px; background: var(--st-card); border: 1px solid var(--st-line2); box-shadow: 0 10px 28px var(--st-shadow, rgba(13,30,39,.18)); }
.studio-page .st-schets .sk { margin: 0; display: flex; flex-direction: column; width: 100%; min-height: 0; }
.studio-page .st-schets .sk { padding: 0; border: 0; background: none; }
.studio-page .st-schets .sk svg { flex: 1; min-height: 0; width: 100%; height: 100%; max-height: none; }
.studio-page .st-schets .sk figcaption { font-size: 13px; }

/* opbouw (boomstructuur) rechts boven de eigenschappen: kasten, uit te klappen naar hun platen */
.studio-page .st-boom { margin: 0 0 14px; }
.studio-page .st-boom:empty { display: none; }
.studio-page .st-boom .st-props-h small { font-weight: 500; color: var(--st-muted); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.studio-page .st-tree { list-style: none; margin: 0; padding: 0; max-height: 42vh; overflow: auto; border: 1px solid var(--st-line); background: var(--st-card); }
.studio-page .st-tree ul { list-style: none; margin: 0; padding: 0 0 4px 22px; }
/* groepen in de boom: kasten, greeplijsten, beslag, apparatuur, decoratie */
.studio-page .st-tree > .st-tg { border-bottom: 1px solid var(--st-line); }
.studio-page .st-tree > .st-tg:last-child { border-bottom: 0; }
.studio-page .st-tree > .st-tg > ul { padding: 0; border-top: 1px solid var(--st-line); }
.studio-page .st-tg-kop { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; padding: 0 8px 0 6px; border: 0; background: none; color: var(--st-strong); font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; cursor: pointer; }
.studio-page .st-tg-kop:hover:not(:disabled) { background: var(--st-hover2); }
.studio-page .st-tg-kop > span { width: 14px; color: var(--st-muted); font-size: 11px; }
.studio-page .st-tg-kop small { margin-left: auto; color: var(--st-muted); font-weight: 500; letter-spacing: 0; }
.studio-page .st-tg-kop:disabled { cursor: default; color: var(--st-muted); }
.studio-page .st-tk-los .st-tk-naam { padding: 5px 6px 5px 10px; white-space: normal; line-height: 1.3; }
.studio-page .st-tk-los .st-tk-naam b { font-family: inherit; }
.studio-page .st-tk-los .st-tk-naam small { display: block; color: var(--st-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-page .st-tk-los span.st-tk-naam { cursor: default; }
.studio-page .st-tk { border-bottom: 1px solid var(--st-line); }
.studio-page .st-tk:last-child { border-bottom: 0; }
.studio-page .st-tk-rij, .studio-page .st-tp { display: flex; align-items: center; gap: 2px; min-height: 30px; }
.studio-page .st-tk.is-sel > .st-tk-rij { background: var(--st-on); box-shadow: inset 3px 0 0 var(--oranje); }
.studio-page .st-tk-pijl { width: 22px; flex: none; border: 0; background: none; color: var(--st-muted); cursor: pointer; font-size: 12px; }
.studio-page .st-tk-naam { flex: 1; min-width: 0; text-align: left; border: 0; background: none; color: var(--st-ink); font: inherit; font-size: 13px; padding: 4px 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-page .st-tk-naam b { font-family: var(--mono, monospace); margin-right: 4px; }
.studio-page .st-tk-naam em { font-style: normal; font-size: 11.5px; color: var(--oranje); }
.studio-page .st-tp-naam { flex: 1; min-width: 0; font-size: 12.5px; color: var(--st-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 0; }
.studio-page .st-tp-naam small { color: var(--st-muted); font-size: 11px; margin-left: 4px; }
.studio-page .st-tp.is-uit .st-tp-naam { text-decoration: line-through; color: var(--st-muted); }
.studio-page .st-tk.is-weg > .st-tk-rij .st-tk-naam, .studio-page .st-tp.is-weg .st-tp-naam { opacity: .5; }
.studio-page .st-tk-act { display: inline-flex; flex: none; }
.studio-page .st-tk-act button { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; background: none; color: var(--st-muted); cursor: pointer; }
.studio-page .st-tk-act button:hover { color: var(--st-strong); background: var(--st-hover2); }
.studio-page .st-tk-act button.is-on { color: var(--oranje); }

/* smal scherm: de knoppen van het 3D-beeld op één regel; de aanzichten schuiven horizontaal (niet over elkaar heen), Tonen
   blijft rechts staan zodat zijn lijstje eronder kan openklappen (in een schuifbalk zou het worden afgeknipt) */
@media (max-width: 760px) {
  .studio-page .st-cams { overflow: visible !important; flex-wrap: nowrap !important; max-width: calc(100% - 24px); justify-content: flex-start; }
  .studio-page .st-cams .st-cams-knoppen { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .studio-page .st-cams .st-cams-knoppen > button, .studio-page .st-cams .st-wg-tonen > button { flex: none; width: auto; white-space: nowrap; padding: 0 10px; }
  .studio-page .st-cams .st-wg-tonen { flex: none; }
}

/* inklappen heeft alleen zin naast de panelen (breed scherm); op tablet en telefoon staat alles al onder elkaar */
@media (max-width: 1180px) { .studio-page .st-fold { display: none !important; } }

/* uitlijning linksboven (breed scherm, met de stappenbalk van 76 px): het logo midden boven de stappenbalk, de streep precies
   op de rand van de balk, "Studio" op dezelfde lijn als de inhoud van het paneel eronder (18 px binnen de rand) */
@media (min-width: 1181px) {
  .studio-page .st-top { padding-left: 0; }
  .studio-page .st-top .st-merk { gap: 0; }
  .studio-page .st-top .st-merk img { margin: 0 23px; }
  .studio-page .st-top .st-merk span { padding-left: 17px; } /* + 1 px streep = 18 px */
}

/* rechte vormen als basis; de belangrijkste bediening krijgt een eigen vorm. De weergave (3D / Plattegrond / Wanden) is een
   pil met een oranje blokje dat naar de gekozen weergave schuift */
.studio-page .st-views { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 3px; border: 1px solid var(--st-line2); background: var(--st-card); }
.studio-page .st-views, .studio-page .st-views::before, .studio-page .st-views > button { border-radius: 999px !important; }
.studio-page .st-views::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); background: var(--oranje); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .28s cubic-bezier(.3, .7, .2, 1); }
.studio-page .st-views > button { position: relative; z-index: 1; background: none !important; border: 0; padding: 0 16px; color: var(--st-soft); font-weight: 600; transition: color .2s; }
.studio-page .st-views > button.is-on { color: var(--lz-wit); }
.studio-page .st-views > button:not(.is-on):hover { color: var(--st-strong); }
@media (prefers-reduced-motion: reduce) { .studio-page .st-views::before { transition: none; } }

/* prijsopbouw onderin: één paneel boven de knop (rechts uitgelijnd), met de regels, het totaal en de uitleg eronder */
.studio-page .st-foot .st-qmore, .studio-page .st-foot .st-qmore[open] { position: static; max-height: none; overflow: visible; }
.studio-page .st-foot .st-qmore > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--st-line2); font-weight: 600; color: var(--st-ink); }
.studio-page .st-foot .st-qmore > summary::-webkit-details-marker { display: none; }
.studio-page .st-foot .st-qmore > summary::after { content: '▴'; font-size: 10px; color: var(--st-muted); }
.studio-page .st-foot .st-qmore[open] > summary { background: var(--st-hover2); }
.studio-page .st-foot .st-qmore[open] > summary::after { content: '▾'; }
.studio-page .st-foot .st-qmore-in { position: absolute; right: 16px; bottom: calc(100% + 6px); z-index: 30; width: min(460px, calc(100% - 32px)); max-height: 60vh; overflow: auto; padding: 16px 18px; background: var(--st-card); border: 1px solid var(--st-line2); box-shadow: 0 12px 30px var(--st-shadow, rgba(13,30,39,.2)); }
.studio-page .st-foot .st-qmore-in h3 { margin: 0 0 10px; font-size: 14px; color: var(--st-strong); }
.studio-page .st-foot .st-qmore-in h3 small { font-weight: 500; color: var(--st-muted); margin-left: 4px; }
.studio-page .st-foot .st-qmore-in table { width: 100%; border-collapse: collapse; }
.studio-page .st-foot .st-qmore-in td { padding: 5px 0; border-bottom: 1px solid var(--st-line); font-size: 13px; color: var(--st-ink); }
.studio-page .st-foot .st-qmore-in td.num { text-align: right; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.studio-page .st-foot .st-qmore-in tfoot td { font-weight: 700; border-bottom: 0; padding-top: 8px; }
.studio-page .st-foot .st-qmore-in p { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--st-muted); }

/* werkplek (Lenselink zelf): geen uitlegteksten per stap, een statusbalk in plaats van Verder/Vorige */
.studio-page .st.is-werkplek .st-intro { display: none; }
.studio-page .st-status { display: inline-flex; align-items: center; gap: 6px; }
.studio-page .st-status > span, .studio-page .st-status > button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--st-line); background: none; color: var(--st-soft); font: inherit; font-size: 12.5px; white-space: nowrap; }
.studio-page .st-status b { color: var(--st-strong); font-variant-numeric: tabular-nums; }
.studio-page .st-status > button { cursor: pointer; }
.studio-page .st-status > button:hover { background: var(--st-hover2); }
.studio-page .st-status > .is-ok { color: #2E7D32; }
.studio-page .st-status > .is-let b, .studio-page .st-status > .is-let { color: var(--st-accent); }
.studio-page .st-status > .is-fout, .studio-page .st-status > .is-fout b { color: var(--lz-rood); border-color: #E9B4AE; }
.studio-page .st-status > .is-tip, .studio-page .st-status > .is-tip b { color: var(--st-accent); }
/* voorstellen voor het ontwerp (Controle): zoals de andere meldingen in het paneel (vlak met een zachte rand, geen knop met
   een eigen rand erin); u kiest zelf: overnemen, of negeren (een tekstknop) */
.st-ontwerptip { margin-top: 14px; padding: 10px 12px; background: var(--st-on); border: 1px solid var(--st-onb); }
.st-ontwerptip > strong { display: block; color: var(--st-strong); font-size: 13px; }
.st-ontwerptip > small { display: block; color: var(--st-muted); font-size: 12px; margin-top: 2px; }
.st-ontwerptip ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.st-ontwerptip li { display: grid; gap: 3px; }
.st-ontwerptip li > span:first-child { color: var(--st-strong); font-size: 13px; }
.st-ontwerptip li > small { color: var(--st-soft); font-size: 12.5px; }
.st-ontwerptip-knop { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.st-ontwerptip-knop .st-tekstknop { padding: 0; border: 0; background: none; color: var(--st-soft); font: inherit; font-size: 12.5px; cursor: pointer; }
.st-ontwerptip-knop .st-tekstknop:hover { color: var(--st-strong); text-decoration: underline; }
/* Bestand-menu: recente ontwerpen en tekening inlezen */
.studio-page .st-mn-recent { padding: 4px 0; border-bottom: 1px solid var(--st-line); margin-bottom: 4px; }
.studio-page .st-mn-recent > small { display: block; padding: 4px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--st-muted); }
.studio-page .st-mn-recent > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 14px; color: var(--st-ink); text-decoration: none; font-size: 13px; }
.studio-page .st-mn-recent > a:hover { background: var(--st-hover2); }
.studio-page .st-mn-recent > a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-page .st-mn-recent b.mono { font-family: var(--mono, monospace); font-size: 12px; margin-right: 4px; }
.studio-page .st-mn-recent > a kbd { flex: none; white-space: nowrap; }
.studio-page .st-mn-recent .st-nr { margin-left: 4px; }
.studio-page .st-mn-leeg { display: block; padding: 4px 14px 8px; font-size: 12.5px; color: var(--st-muted); }
.studio-page .st-mn-l > label.st-mn-file { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 14px; color: var(--st-ink); font-size: 13.5px; cursor: pointer; }
.studio-page .st-mn-l > label.st-mn-file:hover { background: var(--st-hover2); }
.studio-page .st-mn-l { min-width: 270px; }

/* laadscherm (preloader): bij het openen van de Studio en bij het wisselen van project, tot het project getekend is.
   De draaiende ring draait ook als de pagina nog rekent (alleen transform) */
.st-laden { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--lz-navy); color: #FFFFFF; transition: opacity .3s ease; }
body.st-light .st-laden { background: var(--lz-vlak); color: var(--lz-navy); }
.st-laden.is-weg { opacity: 0; pointer-events: none; }
.st-laden-in { display: grid; justify-items: center; gap: 12px; font: 600 15px Inter, system-ui, sans-serif; text-align: center; }
/* het L-blok uit het logo dat rond draait en dan even stil staat (de animatie van Beau, laden-l.gif): de 46 beelden van de
   draai naast elkaar in één afbeelding (img/laden-l.webp, 164 × 128 per beeld, de zwarte achtergrond doorzichtig gemaakt)
   die met steps() beeld voor beeld opschuift; 1,53 s draaien zoals in de gif, daarna ruim een seconde stil. Alleen een
   transform, zodat hij ook doorloopt als de pagina nog rekent */
.st-blok { width: 82px; height: 64px; margin-bottom: 10px; overflow: hidden; }
.st-blok::before { content: ''; display: block; width: calc(46 * 82px); height: 100%; background: url(/img/laden-l.webp) 0 0 / 100% 100% no-repeat; animation: st-blok 2.6s infinite; will-change: transform; }
@keyframes st-blok { 0% { transform: translateX(0); animation-timing-function: steps(45, end); } 59%, 100% { transform: translateX(calc(-45 * 82px)); } }
@media (prefers-reduced-motion: reduce) { .st-blok::before { animation: none; } }
/* "Studio" zoals linksboven in de Studio */
.st-laden-in strong { font: 700 15px/22px Inter, system-ui, sans-serif; letter-spacing: .01em; }
.st-laden-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-laden-spin { width: 30px; height: 30px; border: 3px solid rgba(143, 162, 173, .25); border-top-color: var(--lz-oranje); border-radius: 50% !important; animation: st-draai .8s linear infinite; }
@keyframes st-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st-laden-spin { animation-duration: 2.4s; } }

/* projecttabbladen in de kop (werkplek): meerdere projecten open, klikken = schakelen, × = sluiten, dubbelklik op het
   huidige = naam wijzigen. Beau (15-10): duidelijker welk project open is en de naam voorop; het projectnummer is intern
   (alleen in de tip, of klein en grijs zolang het project geen naam heeft). Het huidige tabblad: eigen vlak, naam vet,
   oranje streep eronder; de andere rustig, met een lijntje ertussen. Rechts staat Delen als knop zoals Render */
.studio-page .st-tabsbalk { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; }
.studio-page .st-tabsbalk:empty { display: none; }
.studio-page .st-tabs { display: flex; align-items: stretch; gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0 0 0 6px; }
.studio-page .st-tabs::-webkit-scrollbar { display: none; }
/* bij weinig ruimte worden de andere tabbladen smaller (de naam loopt af met …); het huidige houdt zijn breedte */
.studio-page .st-tab { position: relative; display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 96px; max-width: 240px; border-left: 1px solid var(--st-line); }
.studio-page .st-tab:last-of-type { border-right: 1px solid var(--st-line); }
.studio-page .st-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.studio-page .st-tab > a { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; padding: 0 2px 0 14px; height: 100%; min-width: 0; color: var(--st-muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.studio-page .st-tab-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.studio-page .st-tab-naam.is-leeg { font: 500 12px var(--mono, monospace); color: var(--st-muted); }
.studio-page .st-nr { flex: none; font: 500 11px var(--mono, monospace); color: var(--st-muted, var(--lz-grijs)); letter-spacing: 0; }
.studio-page .st-tab > button { flex: none; width: 24px; height: 24px; margin-right: 6px; border: 0; background: none; color: var(--st-muted); cursor: pointer; font-size: 16px; line-height: 1; visibility: hidden; }
.studio-page .st-tab:hover > button, .studio-page .st-tab.is-on > button, .studio-page .st-tab > button:focus-visible { visibility: visible; }
.studio-page .st-tab > button:hover { color: var(--st-strong); background: var(--st-line); }
.studio-page .st-tab:hover { background: var(--st-hover2); }
.studio-page .st-tab:hover > a { color: var(--st-strong); }
.studio-page .st-tab.is-on { flex-shrink: 0; max-width: 320px; background: var(--st-raise); }
.studio-page .st-tab.is-on::after { background: var(--oranje); }
.studio-page .st-tab.is-on > a { color: var(--st-strong); font-weight: 700; cursor: default; }
.studio-page .st-tab-nieuw { flex: none; width: 36px; border: 0; background: none; color: var(--st-soft); font-size: 18px; cursor: pointer; }
.studio-page .st-tab-nieuw:hover { color: var(--st-strong); background: var(--st-hover2); }

/* venster van de werkplek (opslaan als, kasten importeren) */
.st-werkdlg { width: min(560px, calc(100vw - 32px)); }
.st-werkdlg-in { padding: 4px 2px 2px; }
.st-werkdlg-uitleg { margin: 0 0 12px; font-size: 13px; color: var(--st-muted, var(--lz-grijs)); }
.st-werkdlg-veld { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.st-werkdlg-veld input { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--st-line2, var(--lz-rand)); }
.st-werkdlg-lijst { display: grid; gap: 2px; max-height: 50vh; overflow: auto; border: 1px solid var(--st-line, var(--lz-lijn)); }
.st-werkdlg-lijst > button, .st-werkdlg-lijst > label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.st-werkdlg-lijst > button:hover, .st-werkdlg-lijst > label:hover { background: var(--st-hover2, var(--lz-vlak-2)); }
.st-werkdlg-lijst small { margin-left: auto; color: var(--st-muted, var(--lz-grijs)); font-size: 12px; white-space: nowrap; }
.st-werkdlg-lijst b.mono, .st-tab b { font-family: var(--mono, monospace); }
.st-werkdlg-alles { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.st-werkdlg-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ======================================================================= werkplek (Lenselink): indeling zoals Fusion 360
   boven de menubalk en de ribbon met het gereedschap, links de opbouw, midden het beeld, rechts het gereedschap of de
   eigenschappen van wat gekozen is, onder de statusbalk */
.studio-page .st-ribbon { display: none; }
.studio-page .st-boomkol { display: none; }
@media (min-width: 1181px) {
  .studio-page .st.is-werkplek[data-step] { grid-template-columns: 270px minmax(0, 1fr) 340px; grid-template-rows: 58px auto minmax(0, 1fr) auto; }
  .studio-page .st.is-werkplek[data-step] .st-top { grid-column: 1 / -1; grid-row: 1; }
  .studio-page .st.is-werkplek[data-step] .st-ribbon { grid-column: 1 / -1; grid-row: 2; display: flex; }
  .studio-page .st.is-werkplek[data-step] .st-rail { display: none; }
  .studio-page .st.is-werkplek[data-step] .st-boomkol { grid-column: 1; grid-row: 3; display: block; min-height: 0; overflow: auto; padding: 14px 12px; background: var(--st-left); border-right: 1px solid var(--st-line); }
  .studio-page .st.is-werkplek[data-step] .st-main { grid-column: 2; grid-row: 3; }
  .studio-page .st.is-werkplek[data-step] .st-left, .studio-page .st.is-werkplek[data-step] .st-props { grid-column: 3; grid-row: 3; border-left: 1px solid var(--st-line); }
  .studio-page .st.is-werkplek[data-step].sel-open .st-left { display: none; }
  .studio-page .st.is-werkplek[data-step]:not(.sel-open) .st-props { display: none; }
  .studio-page .st.is-werkplek[data-step] .st-foot { grid-column: 1 / -1; grid-row: 4; }
  .studio-page .st.is-werkplek[data-step].is-folded { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
  .studio-page .st.is-werkplek[data-step].is-folded .st-boomkol { display: none; }
  .studio-page .st.is-werkplek[data-step].is-folded .st-main { grid-column: 2 !important; } /* niet kolom 3 (de oude indeling) */
  .studio-page .st.is-werkplek[data-step] .st-boomkol .st-tree { max-height: none; }
  /* plattegrond en aanzichten over het hele beeld: het paneel rechts is hier een eigen kolom, geen laag over het beeld
     (de oude ruimte van 412 px rechts maakte de plattegrond half zo breed en de maten 5 px hoog, nachttest 16-10) */
  .studio-page .st.is-werkplek[data-step] .rp-pane[data-pane="plan"], .studio-page .st.is-werkplek[data-step] .rp-pane[data-pane="wand"] { right: 0; }
  .studio-page .st.is-werkplek[data-step]:not(.is-folded) .rp-toast { left: 50%; }
  .studio-page .st.is-werkplek .st-top .st-merk img { margin: 0 18px; }
  .studio-page .st.is-werkplek .st-top .st-merk span { padding-left: 16px; }
}
/* de ribbon: groepen met grote knoppen (pictogram boven, naam eronder), de groepsnaam onderaan */
.studio-page .st-ribbon { align-items: stretch; gap: 0; padding: 0 8px; background: var(--st-card); border-bottom: 1px solid var(--st-line); overflow-x: auto; scrollbar-width: thin; }
.studio-page .st-rg { display: flex; flex-direction: column; align-items: stretch; padding: 5px 4px 3px; border-right: 1px solid var(--st-line); flex: none; }
.studio-page .st-rg:last-child { border-right: 0; }
.studio-page .st-rg-k { display: flex; gap: 2px; flex: 1; }
.studio-page .st-rg-n { margin-top: 3px; text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); }
.studio-page .st-rb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 50px; padding: 4px 4px; border: 1px solid transparent; background: none; color: var(--st-ink); font: inherit; font-size: 11.5px; line-height: 1.15; cursor: pointer; text-align: center; white-space: nowrap; }
.studio-page .st-rb svg { width: 20px; height: 20px; color: var(--st-soft); }
.studio-page .st-rb:hover { background: var(--st-hover2); }
.studio-page .st-rb:hover svg { color: var(--st-strong); }
.studio-page .st-rb.is-on { background: var(--st-on); border-color: var(--st-onb); }
.studio-page .st-rb.is-on svg { color: var(--oranje); }
@media (max-width: 1180px) {
  .studio-page .st.is-werkplek .st-ribbon { display: flex; order: 0; }
  .studio-page .st.is-werkplek .st-boomkol { display: block; order: 2; padding: 12px 16px; }
}
/* smaller scherm: de ribbon alleen met pictogrammen (de naam staat in de tooltip), zodat alle groepen passen */
@media (max-width: 1649px) {
  .studio-page .st-rb { min-width: 38px; padding: 6px 4px; }
  .studio-page .st-rb > span { display: none; }
  .studio-page .st-rb svg { width: 21px; height: 21px; }
}

/* werkplek: de oude knoppenbalk bovenin het beeld en de uitlegregel weg; daarvoor in de plaats de ViewCube (rechtsboven)
   en de weergavebalk (onderin het midden), zoals in Fusion 360 */
.studio-page .st.is-werkplek .st-cams, .studio-page .st.is-werkplek .kast-hint { display: none !important; }
/* de werkplek heeft geen stappen: ook op een smal scherm geen stappenbalk (Beau, 14-10) */
.studio-page .st.is-werkplek .st-stepnav { display: none !important; }
.studio-page .st.is-werkplek[data-step="ontwerp"] .st-schets { top: 108px; }
/* ViewCube: klein, los van de rand, vastpakken en slepen = draaien, klikken op een vlak = recht van die kant */
.studio-page .st-cube { position: absolute; top: 30px; right: 34px; z-index: 6; width: 58px; height: 58px; perspective: 240px; touch-action: none; }
.studio-page .st-cube-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.studio-page .st-cube-v { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; border: 1px solid var(--st-line2); background: color-mix(in srgb, var(--st-card) 90%, transparent); color: var(--st-ink); font: 600 10px Inter, system-ui, sans-serif; letter-spacing: .02em; cursor: grab; padding: 0; user-select: none; }
.studio-page .st-cube-v:hover { background: var(--st-on); color: var(--oranje); border-color: var(--oranje); }
body.st-cube-sleept, body.st-cube-sleept .st-cube-v { cursor: grabbing !important; }
body.st-cube-sleept .st-cube-v:hover { background: color-mix(in srgb, var(--st-card) 90%, transparent); color: var(--st-ink); border-color: var(--st-line2); }
.studio-page .st-cube-voor { transform: translateZ(29px); }
.studio-page .st-cube-achter { transform: rotateY(180deg) translateZ(29px); }
.studio-page .st-cube-rechts { transform: rotateY(90deg) translateZ(29px); }
.studio-page .st-cube-links { transform: rotateY(-90deg) translateZ(29px); }
.studio-page .st-cube-boven { transform: rotateX(90deg) translateZ(29px); }
.studio-page .st-cube-onder { transform: rotateX(-90deg) translateZ(29px); }
.studio-page .st-cube-thuis { position: absolute; left: -34px; top: -10px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--st-line2); background: var(--st-card); color: var(--st-soft); cursor: pointer; padding: 0; }
.studio-page .st-cube-thuis:hover { color: var(--oranje); border-color: var(--oranje); }
/* weergavebalk: perspectief, stijl (pil) en een lijstje wat je wilt zien */
.studio-page .st-weergave { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 4px; padding: 4px; background: color-mix(in srgb, var(--st-card) 94%, transparent); border: 1px solid var(--st-line2); box-shadow: 0 6px 18px var(--st-shadow, rgba(13,30,39,.14)); white-space: nowrap; }
.studio-page .st-weergave button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; background: none; color: var(--st-soft); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.studio-page .st-weergave button:hover { color: var(--st-strong); background: var(--st-hover2); }
.studio-page .st-wg-b.is-on, .studio-page .st-wg-b[aria-expanded="true"] { color: var(--st-strong); background: var(--st-raise); }
.studio-page .st-wg-seg { display: inline-flex; gap: 0; padding: 2px; border: 1px solid var(--st-line2); }
.studio-page .st-wg-seg > button.is-on { background: var(--oranje); color: var(--lz-wit); }
.studio-page .st-wg-tonen { position: relative; }
.studio-page .st-wg-pop { position: absolute; right: -4px; bottom: calc(100% + 10px); display: grid; min-width: 168px; padding: 6px; background: var(--st-card); border: 1px solid var(--st-line2); box-shadow: 0 10px 28px var(--st-shadow, rgba(13,30,39,.18)); }
.studio-page .st-wg-pop[hidden] { display: none; }
.studio-page .st-wg-pop button { justify-content: flex-start; width: 100%; color: var(--st-ink); }
.studio-page .st-wg-vink { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--st-line2); color: var(--oranje); font-size: 12px; line-height: 1; }
.studio-page .st-wg-pop button[aria-checked="true"] .st-wg-vink { border-color: var(--oranje); }

/* vormregel van de werkplek: wat vast staat (kop, menu, ribbon, tabbladen, panelen, statusbalk) is recht; wat zwevend boven
   het beeld ligt (inklappen, 3D/Plattegrond/Wanden, de balkjes in het beeld, de weergavebalk met zijn lijstje en het huisje
   bij de ViewCube) is rond. Zo staan rond en recht nooit door elkaar in dezelfde balk. */
.studio-page .st-fold, .studio-page .st-stagebar .kseg, .studio-page .st-stagebar .kseg button, .studio-page .st-cams, .studio-page .st-cams > button,
.studio-page .st-cams-knoppen > button, .studio-page .st-cams .st-wg-tonen > button, .studio-page .rp-tools, .studio-page .rp-tools > button, .studio-page .rp-tools .rp-badge, .studio-page .st-weergave, .studio-page .st-weergave button, .studio-page .st-wg-seg,
.studio-page .st-cube-thuis, .studio-page .rl-balk, .studio-page .rl-uit { border-radius: 999px !important; }
.studio-page .st-wg-pop, .studio-page .st[data-step="ontwerp"] .st-schets { border-radius: 14px !important; }
.studio-page .st-wg-pop button { border-radius: 9px !important; }
.studio-page .st-wg-vink { border-radius: 5px !important; }
.studio-page .st-cube-v { border-radius: 6px !important; }

/* knoppenbalk bovenin het 3D-beeld (Studio zonder werkplek, camsHtml in ruimte.js): op één regel en even hoog als Inklappen
   en 3D/Plattegrond/Wanden. Wat u wilt zien (werkblad, beslag, plafond, lampen, röntgen) staat in het lijstje Tonen, net als
   in de weergavebalk van de werkplek; hier klapt het naar beneden open. */
.studio-page .st-cams-knoppen { display: contents; }
@media (min-width: 761px) { .studio-page .st .st-cams .st-cams-knoppen > button, .studio-page .st .st-cams .st-wg-tonen > button { height: 28px; } }
.studio-page .st-cams .st-wg-tonen > button { gap: 5px; }
.studio-page .st-cams .st-wg-pop { top: calc(100% + 8px); bottom: auto; right: -4px; z-index: 8; min-width: 176px; }
.studio-page .st-cams .st-wg-pop button { height: 30px; gap: 8px; padding: 0 10px; font-size: 12.5px; }
.studio-page .st-cams .st-cams-step { position: relative; margin-top: 7px; padding-left: 34px; }
.studio-page .st-cams .st-cams-step::before { content: ''; position: absolute; left: 4px; right: 4px; top: -4px; border-top: 1px solid var(--st-line2); }

/* zwevende balken boven het beeld: compact (knoppen 28 mm hoog) en de balk van de gekozen kast in dezelfde rij als Inklappen
   en 3D/Plattegrond/Wanden, zodat het ook op een smaller werkvlak naast elkaar past; past het niet, dan loopt de rij door op
   een tweede regel. De uitleg "Sleep om te verplaatsen" alleen op een breed scherm. */
.studio-page .st .st-viewbar { right: 140px; } /* niet onder de ViewCube (rechtsboven) */
.studio-page .st .st-fold { height: 36px; padding: 0 12px 0 10px; font-size: 12.5px; }
.studio-page .st .st-views > button { height: 28px; padding: 0 14px; font-size: 12.5px; }
.studio-page .st .st-viewbar .rp-tools { position: static; transform: none; padding: 3px; gap: 2px; }
.studio-page .st .rp-tools > button, .studio-page .st .rp-tools .rp-badge { height: 28px; font-size: 12px; }
.studio-page .st .rp-tools > button { padding: 0 9px; gap: 4px; }
.studio-page .st .rp-tools .rp-badge { min-width: 30px; padding: 0 9px; }
.studio-page .st .rp-tools .rp-tools-tip { font-size: 11.5px; padding: 0 8px 0 2px; }
@media (max-width: 1700px) { .studio-page .st .rp-tools .rp-tools-tip { display: none; } }

/* een keuze direct onder een uitleg: wat lucht ertussen */
.studio-page .st-note + .kf { margin-top: 12px; }

/* ---------------------------------------------------------------- objectvenster (objectvenster.js)
   Een venster boven het 3D-beeld: links de soorten, in het midden de objecten, rechts de object-editor met alle gegevens.
   Hoekig zoals elk venster (Beau 14-10), in de kleuren van de werkplek (licht of donker). Los van het beeld door een
   oranje streep bovenaan, een kopbalk in een eigen tint, een duidelijke rand en een diepe schaduw. */
.st-objwin { position: fixed; z-index: 60; top: 120px; left: 280px; width: min(1060px, calc(100% - 24px)); height: min(600px, calc(100% - 70px)); display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--st-card); color: var(--st-ink); border: 1px solid var(--st-line2); border-top: 3px solid var(--lz-oranje); overflow: hidden;
  box-shadow: 0 0 0 1px var(--st-shadow, rgba(13, 30, 39, .2)), 0 24px 64px var(--st-shadow, rgba(13, 30, 39, .3)), 0 6px 18px var(--st-shadow, rgba(13, 30, 39, .2)); }
.st-objwin[hidden] { display: none; }
.st-objwin .ow-kop { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--st-raise); border-bottom: 1px solid var(--st-line2); cursor: move; user-select: none; }
.st-objwin .ow-kop strong { font: 600 11.5px var(--lz-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--st-strong); }
.st-objwin .ow-zoek { flex: 1; max-width: 360px; height: 32px; padding: 0 12px; font: inherit; font-size: 13px; background: var(--st-card); color: var(--st-ink); border: 1px solid var(--st-line2); cursor: text; }
.st-objwin .ow-dicht { margin-left: auto; width: 32px; height: 32px; border: 0; background: none; color: var(--st-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.st-objwin .ow-dicht:hover { background: var(--st-hover2); color: var(--st-strong); }
.st-objwin .ow-lijf { display: grid; grid-template-columns: 190px minmax(0, 1fr) 330px; min-height: 0; }
.st-objwin .ow-nav { display: grid; align-content: start; gap: 1px; padding: 8px; border-right: 1px solid var(--st-line); overflow: auto; }
.st-objwin .ow-nav button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--st-soft); text-align: left; cursor: pointer; }
.st-objwin .ow-nav button.is-sub { padding-left: 22px; font-weight: 500; }
.st-objwin .ow-nav button small { font-weight: 500; color: var(--st-muted); font-size: 11.5px; }
.st-objwin .ow-nav button:hover { background: var(--st-hover2); color: var(--st-strong); }
.st-objwin .ow-nav button.is-on { background: var(--st-on); color: var(--st-strong); box-shadow: inset 3px 0 0 var(--lz-oranje); }
.st-objwin .ow-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 8px; padding: 10px; overflow: auto; }
.st-objwin .ow-kaart { display: grid; justify-items: start; gap: 4px; padding: 10px; min-height: 132px; border: 1px solid var(--st-line); background: var(--st-raise); font: inherit; color: var(--st-ink); text-align: left; cursor: grab; }
.st-objwin .ow-kaart:hover { border-color: var(--st-line2); background: var(--st-hover2); }
.st-objwin .ow-kaart.is-on { border-color: var(--lz-oranje); box-shadow: inset 0 0 0 1px var(--lz-oranje); }
.st-objwin .ow-kaart > svg, .st-objwin .ow-kaart .ow-ico { width: 54px; height: 54px; color: var(--st-soft); }
.st-objwin .ow-kaart span { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--st-strong); }
.st-objwin .ow-kaart small { font-size: 11.5px; line-height: 1.35; color: var(--st-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-objwin .ow-niets { grid-column: 1 / -1; margin: 12px 4px; font-size: 13px; color: var(--st-muted); }
.st-objwin .ow-editor { border-left: 1px solid var(--st-line); padding: 12px; overflow: auto; display: grid; align-content: start; gap: 10px; }
.st-objwin .ow-leeg { display: grid; gap: 8px; font-size: 13px; color: var(--st-soft); }
.st-objwin .ow-leeg strong { color: var(--st-strong); }
.st-objwin .ow-leeg p { margin: 0; }
.st-objwin .ow-ed-kop { display: flex; gap: 10px; align-items: center; }
.st-objwin .ow-ed-ico svg { width: 56px; height: 56px; color: var(--st-soft); }
.st-objwin .ow-ed-kop strong { display: block; font-size: 15px; color: var(--st-strong); }
.st-objwin .ow-ed-kop small { display: block; font-size: 12px; color: var(--st-muted); }
.st-objwin .ow-uitleg { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--st-soft); }
.st-objwin .ow-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-objwin .ow-velden label { display: grid; gap: 3px; font-size: 11px; font-family: var(--lz-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); }
.st-objwin .ow-velden label:nth-child(-n+2) { grid-column: span 3; }
.st-objwin .ow-velden .is-breed { grid-column: span 3; }
.st-objwin .ow-velden input, .st-objwin .ow-velden select, .st-objwin .ow-velden textarea { width: 100%; padding: 5px 8px; font: 13px var(--lz-font); letter-spacing: 0; text-transform: none; color: var(--st-ink); background: var(--st-raise); border: 1px solid var(--st-line2); }
.st-objwin .ow-ed-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.st-objwin .ow-knop { height: 30px; padding: 0 12px; border: 1px solid var(--st-line2); background: var(--st-raise); color: var(--st-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.st-objwin .ow-knop:hover:not(:disabled) { border-color: var(--st-strong); color: var(--st-strong); }
.st-objwin .ow-knop:disabled { opacity: .45; cursor: default; }
.st-objwin .ow-knop.is-hoofd { background: var(--lz-oranje); border-color: var(--lz-oranje); color: var(--lz-wit); }
.st-objwin .ow-knop.is-hoofd:hover { background: var(--lz-oranje-2); border-color: var(--lz-oranje-2); color: var(--lz-wit); }
.st-objwin .ow-knop.is-weg { color: var(--st-del, var(--lz-rood)); }
.st-objwin .ow-fout { margin: 0; font-size: 12.5px; color: var(--st-del, var(--lz-rood)); }
.st-objwin .ow-specs { margin: 0; display: grid; border-top: 1px solid var(--st-line); }
.st-objwin .ow-specs > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--st-line); font-size: 12.5px; }
.st-objwin .ow-specs dt { font: 500 10.5px/1.9 var(--lz-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--st-muted); }
.st-objwin .ow-specs dd { margin: 0; color: var(--st-ink); }
.st-objwin .ow-specs small { color: var(--st-muted); }
.st-objwin .ow-platen { width: 100%; border-collapse: collapse; font-size: 12px; }
.st-objwin .ow-platen th { text-align: left; font: 500 10.5px var(--lz-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); padding: 4px 4px; border-bottom: 1px solid var(--st-line); }
.st-objwin .ow-platen td { padding: 4px; border-bottom: 1px solid var(--st-line); color: var(--st-ink); }
.st-objwin .ow-platen .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1250px) { .st-objwin .ow-lijf { grid-template-columns: 160px minmax(0, 1fr) 280px; } }

/* object aanpassen (objectBewerken in ruimte.js): de balk bovenin in plaats van de projecttabs */
.studio-page .st-objbalk { display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 14px; border-left: 3px solid var(--lz-oranje); background: var(--st-raise); min-width: 0; }
.studio-page .st-objbalk .lz-label { color: var(--st-muted); white-space: nowrap; }
.studio-page .st-objbalk strong { color: var(--st-strong); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-page .st-objbalk small { color: var(--st-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.studio-page .st-objbalk .btn { flex: none; }
.st-objwin .ow-kaart .ow-foto, .st-objwin .ow-ed-ico .ow-foto { width: 54px; height: 54px; object-fit: cover; display: block; border: 1px solid var(--st-line); }
.st-objwin .ow-inkast { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-objwin .ow-inkast .lz-label { width: 100%; color: var(--st-muted); }
/* werkplek: de volgende stap onder Ruimte en Regels (nachttest 16-10: de volgorde waarin een mens een keuken opzet) */
.st-volgende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--st-line); }
.st-volgende > span { flex: 1 0 100%; font-size: 12px; color: var(--st-muted); }
/* Controle: goed om te weten (geen melding), rustig naast "Let op" */
.notice.st-goed { background: var(--st-raise, var(--lz-vlak)); border-color: var(--st-line, var(--lz-lijn)); color: var(--st-ink, var(--lz-tekst)); }
.notice.st-goed ul { margin: 6px 0 0; padding-left: 18px; }