@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap');
/* 3D editor presentation. The form still owns the original commercial
   validation, metadata, contextual help and read-only behaviour. */
.commercial-three .opening-modal-card { width:min(1500px,98vw); max-width:98vw; }
.commercial-three .opening-form { padding:0; }
.commercial-three .opening-form-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:0; background:#e9ece3; }
.commercial-three .opening-visual-panel { min-width:0; padding:0; }
.commercial-three .opening-visual-header { display:none; }
.commercial-three #opening-visual-canvas { position:relative; }
.commercial-three .three-opening-title { position:absolute; top:16px; left:16px; z-index:2; max-width:calc(100% - 32px); padding:8px 14px; border-radius:6px; background:rgba(65,65,65,.65); color:#fff; font:600 15px/1.4 'DM Sans',sans-serif; text-align:left; overflow-wrap:anywhere; pointer-events:none; }
.commercial-three .three-invalid-dimensions iframe { visibility:hidden; pointer-events:none; }
.commercial-three .three-dimension-warning { position:absolute; inset:35% 8% auto; padding:20px; border:1px solid #b73949; border-radius:8px; background:#fff5f5; color:#8b1929; text-align:center; font-size:14px; }
.commercial-three .modal-actions button:disabled { opacity:.45; cursor:not-allowed; }
.commercial-three .opening-visual-card { height:100%; gap:0; }
.commercial-three #opening-visual-canvas { aspect-ratio:auto; min-height:650px; }
.commercial-three .commercial-three-frame { height: min(76vh,850px); min-height:650px; border-radius:0; }
.commercial-three .opening-form-panel { max-height:min(76vh,850px); overflow-y:auto; padding:24px 26px; background:#fffaf7; border-left:1px solid #dfd3d5; font-family:'DM Sans',sans-serif; color:#2c2c2c; }
.commercial-three .three-sidebar-intro h2 { font:500 25px/1.2 Manrope,sans-serif; letter-spacing:-1px; margin:0 0 13px; }
.commercial-three .three-sidebar-intro p { font-size:12px; line-height:1.6; color:#776a70; margin:0 0 24px; }
.commercial-three .three-section { border-top:1px solid #dfd3d5; padding:12px 0; }
.commercial-three .three-section summary { display:flex; align-items:center; gap:10px; min-height:48px; list-style:none; font-size:12px; font-weight:600; cursor:pointer; color:#51474b; padding:4px 0; border-radius:8px; }
.commercial-three .three-section summary::-webkit-details-marker { display:none; }
.commercial-three .three-section summary:focus-visible { outline:2px solid #830a2c; outline-offset:4px; }
.commercial-three .three-section-label { display:grid; gap:3px; min-width:0; flex:1; }
.commercial-three .three-section-title { font-size:12px; line-height:1.4; }
.commercial-three .three-section-hint { font-size:10px; line-height:1.4; font-weight:400; color:#776a70; }
.commercial-three .three-section-chevron { width:7px; height:7px; flex:0 0 7px; margin:0 5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
.commercial-three .three-section[open] > summary .three-section-chevron { transform:rotate(45deg); }
.commercial-three .three-section[open] > summary .three-section-title { color:#830a2c; }
.commercial-three .three-section summary:hover { background:#f7efec; }
.commercial-three .three-section .opening-grid { margin-top:13px; }
.commercial-three .three-hinge-count { font-size:11px; padding:10px; border-radius:7px; background:#f5e9ed; color:#51474b; line-height:1.5; margin:12px 0 10px; }
.commercial-three .opening-form-sections { display:grid; gap:0; }
.commercial-three .opening-group,
.commercial-three .opening-group.is-open { border:0; border-bottom:1px solid #d5deca; border-radius:0; background:transparent; box-shadow:none; }
.commercial-three .opening-group-toggle,
.commercial-three .opening-group.is-open .opening-group-toggle { padding:14px 0; min-height:0; background:transparent; }
.commercial-three .opening-group-main h4 { font-size:13px; color:#31463c; }
.commercial-three .opening-group-main p { display:none; }
.commercial-three .opening-group-status { font-size:10px; padding:3px 5px; }
.commercial-three .opening-group-body { padding:0 0 14px; border:0; }
.commercial-three .opening-form-panel .opening-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
.commercial-three .opening-form-panel .field:not(.checkbox-field) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:10px; font-size:11px; margin:0; }
.commercial-three .opening-form-panel .field > span,
.commercial-three .opening-form-panel .field > label { font-size:11px; font-weight:400; color:#2c2c2c; }
.commercial-three .opening-form-panel .field input,
.commercial-three .opening-form-panel .field select { min-width:0; width:100%; height:30px; min-height:30px; border:1px solid #dfd3d5; border-radius:6px; padding:6px 8px; background:#fff; font:400 11px 'DM Sans',sans-serif; color:#51474b; box-shadow:none; }
.commercial-three .opening-form-panel .field input[readonly] { background:#f5e9ed; }
.commercial-three .opening-form-panel .field select { appearance:auto; }
.commercial-three .opening-form-panel .field .field-label-content > span { font-size:11px; font-weight:400; }
.commercial-three .opening-form-panel .field[data-field-name=largeur],
.commercial-three .opening-form-panel .field[data-field-name=hauteur] { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 20px; }
.commercial-three .opening-form-panel .field[data-field-name=largeur]::after,
.commercial-three .opening-form-panel .field[data-field-name=hauteur]::after { content:'mm'; font-size:11px; color:#776a70; grid-column:3; grid-row:1; }
.commercial-three .opening-form-panel .field input[type=checkbox] { width:18px; height:18px; min-height:18px; }
.commercial-three .opening-form-panel .field.checkbox-field { display:flex; flex-direction:row-reverse; justify-content:space-between; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; min-height:24px; }
.commercial-three .opening-form-panel .field.checkbox-field input { appearance:auto; display:block; position:static; opacity:1; accent-color:#830a2c; pointer-events:auto; min-width:18px; max-width:18px; padding:0; margin:0; cursor:pointer; }
.commercial-three .opening-form-panel .field.checkbox-field > span { font:400 11px 'DM Sans',sans-serif; }
.commercial-three .opening-form-panel .field.checkbox-field::after,
.commercial-three .opening-form-panel .field.checkbox-field > span::before,
.commercial-three .opening-form-panel .field.checkbox-field input::after { content:none; }
.commercial-three .opening-form-panel .boolean-selection-group { grid-template-columns:1fr; }
/* Particularités: native square controls, not the legacy pill buttons. */
.commercial-three .opening-form-panel :is([data-three-section=particularites],[data-three-section="4"]) .boolean-selection-group { display:grid; width:100%; gap:14px; }
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field,
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field:hover,
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field:has(input:checked),
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field,
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field:hover,
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field:has(input:checked) { width:100%; min-width:0; justify-self:stretch; min-height:24px; margin:0; border:0; padding:0; background:transparent; box-shadow:none; transform:none; color:#2c2c2c; }
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field { display:grid; grid-template-columns:1fr 19px; gap:8px; }
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field > span { grid-column:1; grid-row:1; justify-content:flex-start; font:400 11px 'DM Sans',sans-serif; color:#2c2c2c; }
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field > input { grid-column:2; grid-row:1; appearance:auto; width:19px; min-width:19px; max-width:19px; height:19px; min-height:19px; margin:0; padding:0; pointer-events:auto; opacity:1; position:static; cursor:pointer; }
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field:has(input:checked) > span::before { content:none; }
.accessory-image-host { clear:both; min-height:240px; display:grid; place-items:center; background:#f7f4f2; border-radius:8px; }
.accessory-image-host img { display:block; max-width:100%; width:auto; max-height:65vh; object-fit:contain; }
.accessory-image-pair { clear:both; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.accessory-image-pair figure { margin:0; min-width:0; }
.accessory-image-pair figcaption { font-weight:600; margin:0 0 8px; text-align:center; }
.accessory-image-pair .accessory-image-host img { width:100%; }
@media(max-width:640px) { .accessory-image-pair { grid-template-columns:1fr; } }
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field input { appearance:auto; width:19px; min-width:19px; max-width:19px; height:19px; min-height:19px; flex:0 0 19px; margin:0; padding:0; opacity:1; position:static; pointer-events:auto; border-radius:2px; cursor:pointer; }
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field > span { font:400 11px 'DM Sans',sans-serif; justify-content:flex-start; color:#2c2c2c; }
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field:has(input:checked) > span::before { content:none; }
.commercial-three .three-option-detail { grid-column:1/-1; justify-self:end; border:1px solid #dfd3d5; border-radius:5px; background:#f5e9ed; color:#51474b; padding:5px 10px; font-size:11px; cursor:pointer; }
.commercial-three .opening-required-message,
.commercial-three .ral-color-name { grid-column:1/-1; }
.commercial-three .opening-quantity-card { display:grid; grid-template-columns:1fr 120px; position:relative; gap:10px; padding:14px; margin:0 0 39px; border:1px solid #dfd3d5; border-radius:10px; background:#f5e9ed; }
.commercial-three .opening-quantity-card.hidden { display:none; }
.commercial-three .opening-quantity-copy label { font:500 11px 'DM Sans',sans-serif; }
.commercial-three .opening-quantity-copy p { position:absolute; top:100%; left:0; font-size:11px; font-weight:400; color:#776a70; margin:11px 0 0; }
.commercial-three #opening-quantity { width:100%; height:30px; min-height:30px; border:1px solid #dfd3d5; border-radius:6px; font:400 11px 'DM Sans',sans-serif; text-align:left; padding:6px 8px; background:#fff; }
.commercial-three .opening-form > .modal-actions { padding:14px 22px; margin:0; background:#fff; justify-content:flex-end; }
@media(max-width:800px) {
  .commercial-three .opening-form-layout { grid-template-columns:1fr; }
  .commercial-three .commercial-three-frame { height:430px; min-height:430px; }
  .commercial-three #opening-visual-canvas { min-height:430px; }
  .commercial-three .opening-form-panel { max-height:none; border-left:0; }
}
/* Fit the editor to its host iframe, including the header and action footer.
   Never force a 650px viewer into a shorter, clipped grid track. */
.commercial-three .opening-modal-card {
  height:calc(100dvh - 48px); max-height:calc(100dvh - 48px); min-height:0;
  display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden;
}
.commercial-three .opening-form { min-height:0; overflow:hidden; gap:0; }
.commercial-three .opening-form-layout { min-height:0; overflow:hidden; }
.commercial-three .opening-visual-panel { position:relative; top:auto; min-height:0; overflow:hidden; }
.commercial-three .opening-visual-card { display:block; height:100%; min-height:0; padding:0; }
.commercial-three .opening-visual-stage,
.commercial-three .opening-visual-frame,
.commercial-three #opening-visual-canvas { height:100%; min-height:0; padding:0; aspect-ratio:auto; }
.commercial-three .commercial-three-frame { display:block; width:100%; height:100%; min-height:0; border:0; }
.commercial-three .opening-form-panel { min-height:0; max-height:none; overflow-y:auto; }
@media(max-width:800px) {
  .commercial-three .opening-form-layout { grid-template-rows:minmax(0,3fr) minmax(0,2fr); }
  .commercial-three .opening-form-panel { border-top:1px solid #dfd3d5; }
  .commercial-three .opening-modal-card > .modal-header { padding:8px 16px; }
  .commercial-three .opening-form > .modal-actions { padding:8px 16px; }
}

/* Readable, roomier configuration panel. Keep the 3D scene beside it on desktop. */
.commercial-three .opening-form-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.commercial-three .opening-form-panel { padding:28px 32px; }
.commercial-three .three-sidebar-intro h2 { font-size:28px; }
.commercial-three .three-sidebar-intro p { font-size:14px; margin-bottom:26px; }
.commercial-three .three-section { padding:14px 0; }
.commercial-three .three-section summary { gap:12px; min-height:56px; font-size:15px; }
.commercial-three .three-section-title { font-size:15px; }
.commercial-three .three-section-hint { font-size:12px; }
.commercial-three .three-step-number { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:50%; background:#f0e3e7; color:#830a2c; font:700 20px/1 'DM Sans',sans-serif; }
.commercial-three .three-section[open] > summary .three-step-number { color:white; background:#830a2c; box-shadow:0 3px 9px #830a2c20; }
.commercial-three .three-section summary { padding:10px 0; }
.commercial-three .three-section .three-section-title { font-size:16px; font-weight:600; }
.commercial-three .three-field-label { display:inline-flex; align-items:center; gap:10px; min-width:0; text-align:left; }
.commercial-three .three-field-icon-slot { display:flex; align-items:center; justify-content:center; width:72px; min-width:72px; flex:0 0 72px; }
.commercial-three .three-field-label-text { min-width:0; }
.commercial-three .field-label-content > span:first-child { display:flex; align-items:center; min-width:0; }
.commercial-three .three-field-icon { display:block; width:24px; height:24px; min-width:24px; color:#242124; }
.commercial-three .three-field-icon--espagnolette { width:46px; height:46px; min-width:46px; object-fit:contain; filter:brightness(0); }
.commercial-three .three-field-icon--cremaillere { width:72px; height:38px; min-width:72px; background:url('../../assets/icons/crochet-cremaillere.png') center / 92px 92px no-repeat; filter:brightness(0); }
.commercial-three .opening-form-panel .field.three-icon-picker { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; min-width:0; padding:0; border:0; margin:0; }
.commercial-three .three-icon-picker-legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.commercial-three .three-icon-picker-heading { flex:0 0 auto; min-width:0; width:100%; color:#2c2c2c; font:600 14px 'DM Sans',sans-serif; }
.commercial-three .three-pushing-note { display:block; margin-top:5px; color:#776971; font-size:12px; font-weight:400; line-height:1.4; }
.commercial-three .three-icon-choices { display:flex; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-start; min-width:0; max-width:100%; gap:8px; }
.commercial-three .opening-form-panel .field.three-rebate-sides { display:block; width:100%; border:0; margin:0; padding:8px 0 12px; min-width:0; }
.commercial-three .three-rebate-sides legend { font-size:13px; font-weight:600; padding:0; margin-bottom:8px; }
.commercial-three .three-rebate-sides-options { display:flex; flex-wrap:wrap; gap:12px 24px; }
.commercial-three .three-rebate-sides-options label { position:relative; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.commercial-three .opening-form-panel .three-rebate-sides-options input[type="radio"] { position:absolute; opacity:0; width:1px; min-width:1px; height:1px; min-height:1px; padding:0; margin:0; }
.commercial-three .three-rebate-check { display:grid; place-items:center; box-sizing:border-box; width:18px; height:18px; border:1px solid #b8a9ad; border-radius:3px; background:white; }
.commercial-three .three-rebate-sides-options input:checked + .three-rebate-check { background:#830a2c; border-color:#830a2c; color:white; }
.commercial-three .three-rebate-sides-options input:checked + .three-rebate-check::after { content:'✓'; font-size:13px; line-height:1; }
.commercial-three .three-rebate-sides-options input:focus-visible + .three-rebate-check { outline:2px solid #830a2c; outline-offset:3px; }
.commercial-three .three-icon-choice { position:relative; display:block; min-width:0; cursor:pointer; }
.commercial-three .opening-form-panel .field.three-icon-picker .three-icon-choice input[type="radio"] { position:absolute; width:1px; min-width:1px; height:1px; min-height:1px; padding:0; margin:0; opacity:0; }
.commercial-three .three-icon-choice-content { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:74px; padding:9px 5px; border:1px solid #dfd3d5; border-radius:9px; background:#fff; color:#343034; font:500 12px/1.2 'DM Sans',sans-serif; text-align:center; transition:border-color .15s,background-color .15s,box-shadow .15s; }
.commercial-three .three-icon-choice-svg { width:56px; height:38px; max-width:100%; }
.commercial-three .three-icon-choice:hover .three-icon-choice-content { border-color:#b59aa3; background:#fff; }
.commercial-three .three-icon-choice:has(input:checked) .three-icon-choice-content { border-color:#830a2c; background:#fcf0f4; color:#650823; box-shadow:inset 0 0 0 1.5px #830a2c,0 4px 10px rgba(131,10,44,.18); transform:translateY(-2px); font-weight:600; }
.commercial-three .three-icon-choice:has(input:focus-visible) .three-icon-choice-content { outline:2px dashed #830a2c; outline-offset:4px; }
.commercial-three .three-icon-choice:has(input:disabled) { cursor:default; opacity:.55; }
.commercial-three [data-three-quantity-slot] .opening-quantity-card { margin:14px 0 32px; padding:14px; }
.commercial-three .three-hinge-count { font-size:13px; padding:12px; }
.commercial-three .opening-group-toggle,
.commercial-three .opening-group.is-open .opening-group-toggle { padding:17px 0; }
.commercial-three .opening-group-main h4 { font-size:16px; }
.commercial-three .opening-group-status { font-size:12px; padding:5px 8px; }
.commercial-three .opening-form-panel .opening-grid { gap:16px; }
.commercial-three .opening-form-panel .field:not(.checkbox-field) { gap:14px; font-size:14px; }
.commercial-three .opening-form-panel .field > span,
.commercial-three .opening-form-panel .field > label,
.commercial-three .opening-form-panel .field .field-label-content > span { font-size:14px; }
.commercial-three .opening-form-panel .field input:not([type=checkbox]),
.commercial-three .opening-form-panel .field select { height:42px; min-height:42px; padding:9px 12px; font-size:14px; border-radius:7px; }
.commercial-three .opening-form-panel .field[data-field-name=largeur],
.commercial-three .opening-form-panel .field[data-field-name=hauteur] { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 26px; }
.commercial-three .opening-form-panel .field[data-field-name=largeur]::after,
.commercial-three .opening-form-panel .field[data-field-name=hauteur]::after { font-size:13px; }
.commercial-three .opening-form-panel .field.checkbox-field { min-height:32px; }
.commercial-three .opening-form-panel .field.checkbox-field > span,
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field > span,
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field > span { font-size:14px; }
.commercial-three .opening-form-panel .field.checkbox-field input,
.commercial-three .opening-form-panel [data-three-section=particularites] .field.checkbox-field input,
.commercial-three .opening-form-panel [data-three-section="4"] .field.checkbox-field > input { width:21px; min-width:21px; max-width:21px; height:21px; min-height:21px; flex-basis:21px; }
.commercial-three .three-option-detail { font-size:13px; padding:7px 12px; }
.commercial-three .opening-quantity-card { grid-template-columns:1fr 145px; gap:14px; padding:18px; margin-bottom:44px; }
.commercial-three .opening-quantity-copy label { font-size:14px; }
.commercial-three .opening-quantity-copy p { font-size:13px; }
.commercial-three #opening-quantity { height:42px; min-height:42px; padding:9px 12px; font-size:14px; }
@media (max-width:900px) {
  .commercial-three .opening-form-layout { grid-template-columns:1fr; grid-template-rows:minmax(0,3fr) minmax(0,2fr); }
  .commercial-three .opening-form-panel { border-left:0; border-top:1px solid #dfd3d5; }
}
@media (max-width:520px) {
  .commercial-three .opening-form-panel { padding:20px; }
  .commercial-three .opening-quantity-card { grid-template-columns:1fr 110px; padding:14px; }
}

/* The opening editor is a full-screen workspace, not a floating dialog. */
.configurator-embed #opening-modal { padding:0; place-items:stretch; background:#fffaf7; }
.configurator-embed #opening-modal > .modal-backdrop { display:none; }
.configurator-embed #opening-modal > .opening-modal-card { width:100%; max-width:none; height:100dvh; max-height:100dvh; min-height:100dvh; border:0; border-radius:0; box-shadow:none; }
.configurator-embed #configuration-exit-modal { z-index:100; }
.configurator-embed .configuration-exit-feedback { margin:12px 0 0; color:#a32626; font-size:14px; }
.commercial-three .opening-card--incomplete { border-left-color:#b56c18; background:#fffaf3; }
.commercial-three .opening-card-incomplete { display:inline-flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin:5px 0 1px; padding:5px 9px; border-radius:999px; background:#fff0d9; color:#8a4b00; font:700 12px/1.2 'DM Sans',sans-serif; }
.commercial-three .opening-card-incomplete > span { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#a65c08; color:#fff; font-size:11px; }

.commercial-three .three-icon-choice { flex:0 0 128px; width:128px; max-width:100%; }
.commercial-three .three-icon-choice-content { box-sizing:border-box; display:grid; grid-template-rows:44px minmax(0,1fr); justify-items:center; align-items:center; width:100%; min-width:0; max-width:100%; height:110px; min-height:110px; padding:7px 8px; gap:2px; font-size:12px; line-height:1.2; }
.commercial-three .three-icon-choice-content > span:last-child { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:0; max-width:100%; text-align:center; white-space:normal; word-break:normal; overflow-wrap:normal; hyphens:none; }
.commercial-three .three-icon-choice-svg { width:46px; height:32px; }
.commercial-three .three-choice-visual:has(.three-cinematic-supplied) { width:44px; height:44px; }
.commercial-three .three-choice-visual > .three-cinematic-supplied,
.commercial-three .three-cinematic-supplied { width:44px; height:44px; }
.commercial-three .three-choice-visual:has(.three-gamme-supplied) { width:44px; height:44px; }
.commercial-three .three-choice-visual > .three-gamme-supplied { width:44px; height:44px; }
.commercial-three .three-choice-visual:has(.three-esthetique-supplied) { width:44px; height:44px; }
.commercial-three .three-choice-visual > .three-esthetique-supplied { width:44px; height:44px; max-width:none; }
.commercial-three .three-choice-visual { position:relative; display:grid; place-items:center; width:36px; height:34px; flex:0 0 34px; }
.commercial-three .three-choice-visual:has(.three-motion-supplied) { width:56px; height:44px; }
.commercial-three .three-choice-visual > .three-motion-supplied { width:56px; height:44px; max-width:none; }
.commercial-three .three-choice-visual:has(.three-butee-supplied) { width:100px; height:44px; }
.commercial-three .three-choice-visual > .three-butee-supplied { width:100px; height:44px; max-width:none; }
.commercial-three .three-choice-visual:has(.three-dardenne-screw-icon) { width:44px; height:44px; }
.commercial-three .three-choice-visual > .three-dardenne-screw-icon { width:44px; height:44px; max-width:none; }
.commercial-three .three-choice-visual:has(.three-gonds-supplied) { width:72px; height:44px; }
.commercial-three .three-choice-visual > .three-gonds-supplied { width:72px; height:44px; max-width:none; }
.commercial-three .three-icon-picker[data-field-name="type_gonds"] .three-icon-choice-content { grid-template-rows:64px minmax(0,1fr); }
.commercial-three .three-icon-picker[data-field-name="type_gonds"] .three-choice-visual { width:108px; height:64px; }
.commercial-three .three-icon-picker[data-field-name="type_gonds"] .three-choice-visual > .three-gonds-supplied { width:108px; height:64px; max-width:none; }
.commercial-three .three-choice-visual:has(.three-diameter-supplied) { width:44px; height:44px; }
.commercial-three .three-choice-visual > .three-diameter-supplied { width:44px; height:44px; max-width:none; }
.commercial-three .three-choice-visual > svg,
.commercial-three .three-choice-visual > .three-field-icon { width:34px; height:34px; min-width:0; max-width:36px; margin:0; color:inherit; }
.commercial-three .three-icon-picker[data-field-name="type_espagnolette"] .three-icon-choice-content { grid-template-rows:52px minmax(0,1fr); }
.commercial-three .three-icon-picker[data-field-name="type_espagnolette"] .three-choice-visual { width:108px; height:52px; }
.commercial-three .three-icon-picker[data-field-name="type_espagnolette"] .three-choice-visual > .three-handle-supplied { display:block; width:108px; height:52px; max-width:none; }
.commercial-three .three-icon-picker[data-field-name="pentures"] .three-choice-visual { width:108px; height:44px; }
.commercial-three .three-icon-picker[data-field-name="pentures"] .three-choice-visual > .three-esthetique-supplied { width:108px; height:44px; max-width:none; }
.commercial-three .three-icon-picker[data-field-name="arrets_muraux"] .three-icon-choice-content { grid-template-rows:52px minmax(0,1fr); }
.commercial-three .three-icon-picker[data-field-name="arrets_muraux"] .three-choice-visual { width:100px; height:52px; }
.commercial-three .three-icon-picker[data-field-name="arrets_muraux"] .three-choice-visual > .three-wall-stop-supplied { width:100px; height:52px; max-width:none; }
.commercial-three .three-icon-picker[data-field-name="arrets_sur_panneau"] .three-icon-choice-content { grid-template-rows:52px minmax(0,1fr); }
.commercial-three .three-icon-picker[data-field-name="arrets_sur_panneau"] .three-choice-visual { width:108px; height:52px; }
.commercial-three .three-icon-picker[data-field-name="arrets_sur_panneau"] .three-choice-visual > .three-panel-stop-supplied { width:108px; height:52px; max-width:none; }
.commercial-three .three-choice-visual .three-field-icon--cremaillere { background-size:46px 46px; }
.commercial-three .three-choice-tag { position:absolute; bottom:0; right:-6px; font-size:10px; font-weight:700; padding:1px 3px; background:#fff; color:#830a2c; border-radius:3px; }
.commercial-three .three-icon-choice:has(input:checked) .three-icon-choice-content::after { content:none; }
.commercial-three .three-icon-choice:has(input:checked) .three-choice-visual img,
.commercial-three .three-icon-choice:has(input:checked) .three-choice-visual .three-field-icon--cremaillere { filter:none; }
.commercial-three .three-icon-picker > .three-option-detail { margin-top:8px; }

/* Particularités: native independent checkboxes presented as equal icon cards. */
.commercial-three .opening-form-panel [data-three-section="particularites"] .boolean-selection-group { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; width:100%; grid-column:1 / -1; }
.commercial-three .opening-form-panel .field.three-special-choice { display:block; position:relative; flex:0 0 128px; width:128px; max-width:100%; min-height:110px; margin:0; padding:0; }
.commercial-three .opening-form-panel .field.three-special-choice input[type="checkbox"] { position:absolute; opacity:0; width:1px; min-width:1px; max-width:1px; height:1px; min-height:1px; margin:0; padding:0; }
.commercial-three .three-special-visual { display:grid; place-items:center; width:100%; height:44px; }
.commercial-three .three-special-visual svg { display:block; width:44px; height:44px; }
.commercial-three .three-special-visual svg[data-special-icon="porte_de_garage"] { width:100px; max-width:100%; height:44px; }
.commercial-three .three-special-visual .special-accent { stroke:#830a2c; }
.commercial-three .three-special-choice:has(input:focus-visible) .three-icon-choice-content { outline:2px solid #830a2c; outline-offset:3px; }

/* Closure choices keep their independent checkboxes and catalogue-detail actions. */
.commercial-three .three-closure-intro { grid-column:1/-1; margin:0 0 2px; color:#776971; font-size:12px; line-height:1.5; }
.commercial-three .three-equipment-choices { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; grid-column:1/-1; }
.commercial-three .three-equipment-choice input { position:absolute; opacity:0; width:1px; height:1px; min-width:1px; padding:0; margin:0; }
.commercial-three .opening-form-panel .boolean-selection-group:has(.three-gond-accessory-choice) { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; grid-column:1/-1; }
.commercial-three .opening-form-panel .field.three-gond-accessory-choice { display:block; position:relative; flex:0 0 128px; width:128px; margin:0; padding:0; cursor:pointer; }
.commercial-three .three-gond-accessory-choice .three-icon-choice-content { grid-template-rows:60px minmax(0,1fr); }
.commercial-three .three-gond-accessory-choice .three-choice-visual,
.commercial-three .three-gond-accessory-choice .three-choice-visual > .three-gond-accessory-supplied { width:90px; height:60px; max-width:none; }
.commercial-three .three-gond-accessory-choice:has(input:focus-visible) .three-icon-choice-content { outline:2px solid #830a2c; outline-offset:3px; }
.commercial-three .three-dardenne-options { grid-column:1/-1; min-width:0; padding:14px 0 0; margin:0; border:0; border-top:1px solid #eadfe2; }
.commercial-three .three-dardenne-options legend { padding:0; margin-bottom:10px; font-size:14px; font-weight:600; }
.commercial-three .three-closure-row { grid-column:1/-1; width:100%; min-width:0; padding:16px 0; border-top:1px solid #eadfe2; }
.commercial-three .three-closure-heading { margin:0 0 12px; color:#51434a; font:600 13px/1.4 'DM Sans',sans-serif; }
.commercial-three .opening-form-panel [data-three-section="4"] .three-closure-row .boolean-selection-group { display:grid; grid-template-columns:repeat(auto-fill,128px); justify-content:start; gap:10px; width:100%; }
.commercial-three .three-closure-row > .three-icon-picker { margin-top:14px; }
.commercial-three .opening-form-panel .three-closure-row .field.three-icon-picker[data-field-name="type_espagnolette"] { margin-top:20px; gap:12px; }
.commercial-three .opening-form-panel .three-closure-row [data-field-name="type_espagnolette"] .three-icon-picker-heading,
.commercial-three .opening-form-panel .three-closure-row [data-field-name="type_espagnolette"] .three-icon-picker-heading span { color:#51434a; font:600 13px/1.4 'DM Sans',sans-serif; }
.commercial-three .three-closure-row .three-icon-choices { justify-content:flex-start; }
.commercial-three .three-closure-types { display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 40px; margin-top:20px; width:100%; }
.commercial-three .three-closure-type-family { min-width:0; }
.commercial-three .three-espagnolette-types { flex:1 1 404px; }
.commercial-three .three-hook-types { flex:1 1 266px; }
.commercial-three .opening-form-panel .three-hook-types .field.three-material-checks { margin-top:16px; }
.commercial-three .opening-form-panel .three-closure-row .three-closure-types .field.three-icon-picker[data-field-name="type_espagnolette"] { margin-top:0; gap:12px; }
.commercial-three .opening-form-panel [data-three-section="4"] .field.three-closure-choice { position:relative; display:block; flex:0 0 128px; width:128px; max-width:100%; min-height:110px; margin:0; padding:0; cursor:pointer; }
.commercial-three .opening-form-panel [data-three-section="4"] .three-closure-choice input[type="checkbox"] { position:absolute; width:1px; min-width:1px; height:1px; min-height:1px; margin:0; padding:0; opacity:0; }
.commercial-three .opening-form-panel [data-three-section="4"] .three-closure-choice .three-icon-choice-content { grid-template-rows:52px minmax(0,1fr); width:100%; height:110px; min-height:110px; padding:7px 5px; }
.commercial-three .three-closure-visual { display:grid; place-items:center; width:100px; height:52px; }
.commercial-three .three-closure-visual > .three-closure-supplied { display:block; width:100px; height:52px; max-width:none; }
.commercial-three .three-closure-visual > .three-field-icon { width:40px; height:40px; min-width:0; }

/* Give tall lock mechanisms room without changing other accessory cards. */
.commercial-three .opening-form-panel [data-three-section="4"] [data-closure-row="serrures"] .boolean-selection-group { grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),176px)); }
.commercial-three .opening-form-panel [data-three-section="4"] [data-closure-row="serrures"] .field.three-closure-choice { width:176px; min-height:146px; }
.commercial-three .opening-form-panel [data-three-section="4"] [data-closure-row="serrures"] .three-closure-choice .three-icon-choice-content { height:146px; min-height:146px; grid-template-rows:88px minmax(0,1fr); padding:7px 8px; }
.commercial-three [data-closure-row="serrures"] .three-closure-visual { width:104px; height:88px; }
.commercial-three [data-closure-row="serrures"] :is([data-field-name="serrure_3_points"],[data-field-name="cremone_sx"],[data-field-name="cremone_pompier"]) .three-closure-supplied { width:104px; height:88px; }
.commercial-three [data-closure-row="serrures"] .three-icon-choice-content > span:last-child { white-space:nowrap; }

/* Match the lock cards for upper/lower bolts, including optional SDO bolts. */
.commercial-three [data-closure-row="verrous"] .three-bolt-family { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),176px)); gap:12px; align-items:start; }
.commercial-three [data-closure-row="verrous"] .three-bolt-item { min-width:0; }
.commercial-three [data-closure-row="verrous"] .three-bolt-options { display:grid; gap:20px; margin-top:16px; }
.commercial-three [data-closure-row="verrous"] .three-bolt-options .three-material-check-options { display:flex; flex-wrap:nowrap; gap:10px 12px; }
.commercial-three [data-closure-row="verrous"] .three-bolt-options .three-material-checks legend { margin-bottom:10px; padding:0; font:500 12px/1.5 'DM Sans',sans-serif; color:#51434a; }
.commercial-three [data-closure-row="verrous"] .three-bolt-options .three-material-check-options label { font:500 13px/1.4 'DM Sans',sans-serif; white-space:nowrap; gap:7px; }
.commercial-three [data-closure-row="verrous"] .three-bolt-family + .three-bolt-family { margin-top:24px; }
.commercial-three .opening-form-panel [data-three-section="4"] [data-closure-row="verrous"] .boolean-selection-group { grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),176px)); }
.commercial-three .opening-form-panel [data-three-section="4"] [data-closure-row="verrous"] .field.three-closure-choice { width:176px; min-height:146px; }
.commercial-three .opening-form-panel [data-three-section="4"] [data-closure-row="verrous"] .three-closure-choice .three-icon-choice-content { height:146px; min-height:146px; grid-template-rows:88px minmax(0,1fr); padding:7px 8px; }
.commercial-three [data-closure-row="verrous"] .three-closure-visual,
.commercial-three [data-closure-row="verrous"] .three-closure-visual > .three-closure-supplied { width:104px; height:88px; }
.commercial-three [data-closure-row="verrous"] .three-icon-choice-content > span:last-child { white-space:nowrap; }

/* Override generic field-label flex alignment on icon cards. */
.commercial-three .opening-form-panel .field .three-icon-choice-content,
.commercial-three .opening-form-panel .three-icon-choice-content {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-content:stretch;
  justify-items:center;
  align-items:center;
}
.commercial-three .three-icon-choice-content > :is(.three-choice-visual,.three-closure-visual,.three-special-visual) {
  justify-self:center;
  align-self:center;
  margin-inline:auto;
}

.commercial-three .three-product-note { display:block; margin-top:3px; font-size:11px; line-height:1.2; font-weight:400; color:#806c74; }
.commercial-three .three-ral-accessory-note { font-size:11px; font-weight:400; color:#806c74; }
.commercial-three .opening-form-panel [data-field-name="couleurs_accessoires"] > legend { padding:0; font:600 14px/1.4 'DM Sans',sans-serif; color:#2c2c2c; }
.commercial-three .opening-form-panel .field.three-material-checks { display:block; border:0; padding:0; margin:0; }
.commercial-three .three-material-checks legend { margin-bottom:12px; font-weight:500; }
.commercial-three .three-material-check-options { display:flex; flex-wrap:wrap; gap:24px; }
.commercial-three [data-field-name="couleurs_accessoires"] .three-material-check-options { align-items:center; gap:12px 24px; }
.commercial-three .opening-form-panel .three-material-check-options > .field[data-field-name="ral_accessoires"] { display:flex; align-items:center; gap:8px; width:auto; margin:0; min-width:0; flex:0 0 auto; }
.commercial-three .opening-form-panel .three-material-check-options [data-field-name="ral_accessoires"] .ral-input-shell { width:128px; flex:0 0 128px; }
.commercial-three .opening-form-panel .three-material-check-options [name="ral_accessoires"] { width:100%; height:34px; min-height:34px; padding:6px 36px 6px 10px; }
.commercial-three .three-material-check-options label { position:relative; display:flex; align-items:center; gap:8px; cursor:pointer; }
.commercial-three .opening-form-panel .three-material-check-options input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; min-height:0; padding:0; margin:0; }
.commercial-three .three-material-square { display:grid; place-items:center; width:21px; height:21px; box-sizing:border-box; border:1px solid #a9959c; border-radius:3px; background:transparent; color:#830a2c; }
.commercial-three .three-material-check-options input:checked + .three-material-square { border-color:#830a2c; }
.commercial-three .three-material-check-options input:checked + .three-material-square::after { content:'✓'; font:700 17px/1 sans-serif; }
.commercial-three .three-material-check-options input:focus-visible + .three-material-square { outline:2px solid #830a2c; outline-offset:3px; }

/* Plain checkboxes: only the square changes, never the text or its background. */
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field,
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field:hover,
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field:has(input:checked),
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field:has(input:checked):hover,
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field:focus-within {
  background:transparent; color:#2c2c2c; border:0; box-shadow:none;
  transform:none; outline:none; padding:0;
}
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field > span {
  background:transparent; color:inherit; font-weight:400;
}
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field:has(input:checked) > span::before {
  content:none;
}
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field input[type=checkbox] {
  appearance:none; position:relative; display:inline-grid; place-content:center;
  width:21px; min-width:21px; max-width:21px; height:21px; min-height:21px;
  opacity:1; pointer-events:auto; border:1px solid #a9959c; border-radius:3px;
  background:transparent; box-shadow:none; margin:0; padding:0; cursor:pointer;
}
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field input[type=checkbox]:checked {
  background:transparent; border-color:#830a2c;
}
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field input[type=checkbox]::after {
  content:none;
}
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field input[type=checkbox]:checked::after {
  content:'✓'; display:block; position:static; width:auto; height:auto;
  background:transparent; border:0; transform:none; color:#830a2c;
  font:700 17px/1 sans-serif;
}
.commercial-three.configurator-embed .opening-form-panel .field.checkbox-field input[type=checkbox]:focus-visible {
  outline:2px solid #830a2c; outline-offset:3px;
}

.commercial-three .three-choice-visual:has(.three-bushing-icon) { width:44px; height:44px; }
.commercial-three .three-choice-visual > .three-bushing-icon { width:44px; height:44px; max-width:44px; }

/* Keep the custom diameter directly below its own choice card. */
.commercial-three .opening-form-panel .three-diameter-other .three-icon-choice-content { grid-template-rows:1fr; }
.commercial-three .three-diameter-other-pair { display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:0; max-width:100%; }
.commercial-three .three-diameter-custom { display:flex; flex-direction:column; gap:8px; width:100%; min-width:0; }
.commercial-three .three-diameter-custom > span { font-size:13px; }
.commercial-three .opening-form-panel .three-diameter-custom input { width:100%; min-width:0; box-sizing:border-box; }
.commercial-three .three-diameter-other-pair > .three-icon-choice { flex-shrink:0; }

/* Keep the stacked mobile editor inside the full-screen workspace. */
/* Cards follow the available panel width, including browser/OS scaling. */
.commercial-three .opening-form-panel { container-type:inline-size; --choice-columns:2; }
.commercial-three .opening-form-panel .opening-grid :is(.three-icon-choices,.three-equipment-choices,.boolean-selection-group:has(> .three-icon-choice)) {
  display:grid; grid-template-columns:repeat(var(--choice-columns),minmax(0,1fr)); gap:10px; width:100%; min-width:0;
}
.commercial-three .opening-form-panel .opening-grid :is(.three-icon-choice,.field.three-icon-choice) {
  width:100%; min-width:0; max-width:100%; flex-basis:auto; min-height:126px;
}
.commercial-three .opening-form-panel .opening-grid :is(.three-icon-choice,.field.three-icon-choice) .three-icon-choice-content {
  height:126px; min-height:126px; grid-template-rows:72px minmax(0,1fr); padding:7px 5px; font-size:12px;
}
.commercial-three .opening-form-panel .opening-grid .three-icon-choice .three-icon-choice-content > span:last-child { white-space:normal; overflow-wrap:break-word; }
.commercial-three .opening-form-panel .opening-grid .three-icon-choice .three-closure-visual,
.commercial-three .opening-form-panel .opening-grid .three-icon-choice .three-closure-supplied { width:100%; max-width:104px; height:72px; }
.commercial-three .opening-form-panel .opening-grid .three-icon-choice .three-choice-visual { max-width:100%; }
.commercial-three .opening-form-panel .opening-grid [data-field-name="diametre_gonds"] > .three-icon-choices { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
.commercial-three .opening-form-panel .opening-grid .three-diameter-other-pair { grid-column:span 1; }
.commercial-three .opening-form-panel .opening-grid .three-diameter-other-pair > .three-icon-choice { width:100% !important; }
.commercial-three .opening-form-panel .opening-grid .three-diameter-other .three-icon-choice-content > span { font-size:24px; font-weight:700; color:#830a2c; }
@container (min-width:480px) {
  .commercial-three .opening-grid { --choice-columns:4; }
}
/* These two nested families share a row; keep their own natural item counts. */
.commercial-three .opening-form-panel .opening-grid [data-closure-row="verrous"] .three-bolt-family { grid-template-columns:repeat(var(--choice-columns),minmax(0,1fr)); gap:24px 10px; }
.commercial-three .opening-form-panel .opening-grid .three-bolt-item > .boolean-selection-group { grid-template-columns:minmax(0,1fr); }
.commercial-three .opening-form-panel .three-espagnolette-types { --choice-columns:3; }
.commercial-three .opening-form-panel .three-hook-types { --choice-columns:2; }
@media (max-width:900px) {
  .commercial-three .opening-form { display:grid; grid-template-rows:minmax(0,1fr) auto; }
  .commercial-three .opening-form-layout { height:100%; }
}