/* One visual system for every illustrated configurator choice. These final
   rules intentionally supersede the historical family-specific dimensions. */
.commercial-three {
  --choice-card-width:176px;
  --choice-card-height:146px;
  --choice-icon-width:104px;
  --choice-icon-height:88px;
  --choice-icon-line:#806c74;
}
.commercial-three .opening-form-panel .three-icon-choice {
  display:block !important;
  position:relative;
  box-sizing:border-box;
  flex:0 0 var(--choice-card-width) !important;
  width:var(--choice-card-width) !important;
  max-width:100%;
  min-height:var(--choice-card-height) !important;
}
.commercial-three .opening-form-panel .three-icon-choice-content {
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--choice-icon-height) minmax(0,1fr) !important;
  justify-items:center;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  height:var(--choice-card-height) !important;
  min-height:var(--choice-card-height) !important;
  padding:7px 8px !important;
  gap:2px;
  border-radius:8px;
  font-size:14px !important;
  line-height:1.25;
}
.commercial-three .opening-form-panel .three-icon-choice-content > span:last-child {
  white-space:normal !important;
  text-align:center;
  overflow-wrap:normal;
}
.commercial-three .opening-form-panel .three-icon-choice-content > :is(.three-choice-visual,.three-closure-visual,.three-special-visual),
.commercial-three .opening-form-panel .three-icon-choice-content > svg,
.commercial-three .opening-form-panel .three-icon-choice-content > :is(.three-choice-visual,.three-closure-visual,.three-special-visual) > :is(svg,img,.three-field-icon) {
  display:grid;
  place-items:center;
  justify-self:center;
  align-self:center;
  width:var(--choice-icon-width) !important;
  height:var(--choice-icon-height) !important;
  min-width:0;
  max-width:none !important;
  margin:0;
  color:var(--choice-icon-line);
  object-fit:contain;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.commercial-three .opening-form-panel .boolean-selection-group:has(> .three-icon-choice) {
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:10px;
}
.commercial-three .opening-form-panel :is(.three-icon-choices,.three-equipment-choices) {
  gap:10px;
  justify-content:flex-start;
}
/* Other diameter is text-only; colour/material checkboxes remain compact. */
.commercial-three .opening-form-panel [data-field-name="type_de_douilles"] .three-material-check-options {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px 10px;
  width:100%;
}
.commercial-three .opening-form-panel [data-field-name="type_de_douilles"] .three-material-check-options label {
  min-width:0;
  gap:6px;
  font-size:13px;
  line-height:1.3;
}
.commercial-three [data-field-name="type_de_douilles"] .three-material-square { flex:0 0 21px; }
.commercial-three [data-field-name="type_de_douilles"] .three-material-check-options label > span:last-child { white-space:normal; }
.commercial-three .three-bolt-family { width:100%; margin-bottom:10px; }
.commercial-three .opening-form-panel .three-bolt-family[data-bolt-family="targettes"] > .boolean-selection-group,
.commercial-three .opening-form-panel [data-closure-row="serrures"] > .boolean-selection-group {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  max-width:734px;
}
.commercial-three .opening-form-panel .three-bolt-family[data-bolt-family="targettes"] .three-icon-choice,
.commercial-three .opening-form-panel [data-closure-row="serrures"] .three-icon-choice {
  width:100% !important;
  min-width:0;
}
@media (max-width:520px) {
  .commercial-three .opening-form-panel [data-field-name="type_de_douilles"] .three-material-check-options {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .commercial-three .opening-form-panel .three-bolt-family[data-bolt-family="targettes"] > .boolean-selection-group,
  .commercial-three .opening-form-panel [data-closure-row="serrures"] > .boolean-selection-group {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.commercial-three .opening-form-panel .three-diameter-other .three-icon-choice-content {
  grid-template-rows:1fr !important;
}

/* Keep each bolt and its options together without widening the card grid. */
.commercial-three .opening-form-panel [data-closure-row="verrous"] .three-bolt-item .three-icon-choice {
  width:100% !important;
  min-width:0;
  flex-basis:100% !important;
}
.commercial-three .opening-form-panel [data-closure-row="verrous"] .three-bolt-options .three-material-check-options {
  flex-wrap:wrap;
}