.ob-config{scroll-margin-top:70px}.ob-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:30px;align-items:start}.ob-form fieldset{border:0;border-bottom:1px solid var(--line);padding:0 0 25px;margin:0 0 25px}.ob-form legend{font-size:19px;font-weight:650;margin-bottom:18px}.ob-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ob-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.5}.ob-form input,.ob-form select{box-sizing:border-box;width:100%;min-height:46px;border:1px solid #b9c6cf;border-radius:7px;background:#fff;padding:11px;color:var(--ink);font:inherit}.ob-form [aria-invalid=true]{border-color:#a33c2b}.ob-field-error{color:#a33c2b;font-size:12px}.ob-note{font-size:12px;color:var(--muted);line-height:1.7}.ob-summary{position:static;background:white;border:1px solid var(--line);border-radius:14px;padding:25px}.ob-summary h3{margin:0 0 12px;font-size:21px}.ob-total{font-size:35px;font-weight:650;letter-spacing:-1px;margin:12px 0 5px}.ob-summary dl{margin:0}.ob-summary dl>div{display:grid;grid-template-columns:1fr auto;gap:15px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5}.ob-summary dd{margin:0;white-space:nowrap}.ob-summary details{margin:20px 0;font-size:13px}.ob-summary summary{cursor:pointer;font-weight:600}.ob-summary .primary{width:100%;box-sizing:border-box;min-height:48px}.ob-alert{padding:14px;background:#fff3dc;color:#775022;border-radius:7px;font-size:13px;line-height:1.6}.ob-scene-wrap{background:#f1f3ef;border-radius:14px;overflow:hidden;position:relative;margin:0 0 22px}.ob-scene{width:100%;height:360px;display:block;touch-action:pan-y}.ob-scene-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px}.ob-scene-actions button{padding:10px;border:1px solid #bdc7c8;border-radius:6px;background:#fff;font:inherit;font-size:12px;color:var(--ink);cursor:pointer}.ob-scene-fallback{width:100%;height:300px;object-fit:contain;background:white}.ob-schematic-note{font-size:11px;line-height:1.6;color:var(--muted);margin:0;padding:0 14px 14px}.ob-setup{display:grid;grid-template-columns:1fr 1fr;gap:25px}.ob-setup img{max-width:100%;max-height:300px;object-fit:contain}.ob-form button:focus-visible,.ob-scene-actions button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.ob-contact a{overflow-wrap:anywhere}
@media(max-width:800px){.ob-layout,.ob-setup{grid-template-columns:1fr}.ob-summary{position:static}.ob-scene{height:300px}.ob-fields{gap:13px}.ob-total{font-size:32px}}
@media(max-width:420px){.ob-fields{grid-template-columns:1fr}.ob-summary{padding:20px}.ob-scene{height:260px}}
[hidden]{display:none!important}

.ob-lamella-preview{display:flex;align-items:center;gap:16px;margin:16px 0;padding:14px;background:#f4f6f3;border-radius:10px}.ob-lamella-preview img{width:125px;height:80px;object-fit:contain;flex-shrink:0}.ob-lamella-preview figcaption{font-size:12px;line-height:1.6}@media(max-width:450px){.ob-lamella-preview{flex-direction:column;align-items:flex-start}}

/* Keep the model beside desktop controls; mobile preview stays in the document flow. */
.ob-preview{position:sticky;top:20px;align-self:start;min-width:0}
.ob-options{min-width:0}
.ob-preview .ob-scene-wrap{margin-bottom:0;border:1px solid var(--line);box-shadow:0 8px 25px #193d360d}
.ob-preview :is(.ob-scene,.ob-scene-fallback){display:block;height:clamp(230px,calc(100svh - 220px),560px)}
@media(max-width:800px){
 .ob-layout{display:block}
 .ob-preview{position:static;background:var(--paper);padding:6px 0 10px}
 .ob-options{margin-top:20px}
 .ob-preview :is(.ob-scene,.ob-scene-fallback){height:clamp(150px,26svh,240px)}
 .ob-scene-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:8px}
 .ob-scene-actions button{min-height:44px;padding:6px 4px;font-size:10px;line-height:1.35}
 .ob-schematic-note{font-size:10px;line-height:1.4;padding:0 10px 10px}
 .ob-options :is(input,select,button,summary){scroll-margin-top:20px;scroll-margin-bottom:30px}
}
/* As in the pool configurator, leave room for inputs on very short screens. */
@media(max-height:500px){
 .ob-preview{position:relative;top:0}
 .ob-options :is(input,select,button,summary){scroll-margin-top:12px}
}
@media print{.ob-layout{display:block}.ob-preview{position:static}.ob-preview .ob-scene-actions{display:none}}