.detail-variant-builder{margin:0 17px 18px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft);overflow:hidden}
.detail-builder-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:17px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.detail-builder-head span{display:block;color:var(--green);font-size:10px;font-weight:800;letter-spacing:.08em}.detail-builder-head h3{margin:4px 0 3px;font-size:17px}.detail-builder-head p,.detail-options-head p,.detail-combinations-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.detail-builder-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line)}.detail-builder-toolbar strong,.detail-builder-toolbar span{display:block}.detail-builder-toolbar strong{font-size:13px}.detail-builder-toolbar span{margin-top:2px;color:var(--muted);font-size:11px}
.detail-options-head,.detail-combinations-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:17px 18px 10px}.detail-options-head h4,.detail-combinations-head h4{margin:0 0 3px;font-size:14px}
.detail-option-presets{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}.detail-option-presets button{border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--green);padding:7px 10px;font-size:11px;font-weight:700;cursor:pointer}.detail-option-presets button:hover{border-color:var(--green);background:var(--green-soft)}.detail-option-presets button:disabled{opacity:.45;cursor:default}
.detail-option-groups{display:grid;gap:10px;padding:0 18px}.detail-option-group{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}.detail-option-group header{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--line);background:var(--control-bg)}.detail-option-group header small{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em}.detail-option-name{width:min(260px,60vw);margin-top:2px;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ink);font:800 13px/1.4 Manrope,sans-serif;outline:0}.detail-option-name:focus{border-color:var(--green)}.detail-option-group header>button{border:0;background:transparent;color:var(--red);font-size:11px;font-weight:700;cursor:pointer}.detail-option-group header>.detail-drag-handle{color:var(--muted);font-size:15px;cursor:grab;padding:4px}.detail-option-group.dragging{opacity:.45}
.detail-option-values{display:flex;flex-wrap:wrap;gap:7px;padding:11px}.detail-option-values>span{display:inline-flex;align-items:center;gap:6px;min-height:34px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--ink);padding:0 9px;font-size:12px}.detail-option-values>span[draggable="true"]{cursor:grab}.detail-option-values>span.dragging{opacity:.45}.detail-option-values>span>button{border:0;background:transparent;color:var(--muted);cursor:pointer}.detail-option-values .detail-value-entry{padding:0;overflow:hidden;border-style:dashed}.detail-value-entry input{width:145px;height:32px;border:0;background:transparent;color:var(--ink);padding:0 9px;outline:0;font-size:12px}.detail-value-entry button{align-self:stretch!important;border-left:1px solid var(--line)!important;color:var(--green)!important;padding:0 10px!important;font-weight:700}
.detail-add-option{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:8px;padding:10px 18px 18px}.detail-add-option .text-input{max-width:420px}.detail-builder-empty{display:grid;gap:3px;padding:18px;border:1px dashed var(--line);border-radius:10px;background:var(--panel);text-align:center}.detail-builder-empty strong{font-size:13px}.detail-builder-empty span{color:var(--muted);font-size:12px}.detail-builder-empty.combinations{margin:0 18px 17px}
.detail-combinations-head{border-top:1px solid var(--line);padding-top:16px}.detail-combination-table{margin:0 18px 17px;border:1px solid var(--line);border-radius:10px;overflow-x:auto;background:var(--panel)}.detail-combination-head,.detail-combination-row{display:grid;grid-template-columns:26px minmax(170px,1.25fr) minmax(145px,1fr) 105px 105px 85px;align-items:center;gap:8px;min-width:760px;padding:9px 10px}.detail-combination-head{border-bottom:1px solid var(--line);background:var(--control-bg);color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.detail-combination-row{border-bottom:1px solid var(--line);opacity:.55}.detail-combination-row:last-child{border-bottom:0}.detail-combination-row.selected,.detail-combination-row.exists{opacity:1}.detail-combination-row.exists{background:var(--surface-soft)}.detail-combination-row>input[type="checkbox"]{width:16px;height:16px;accent-color:var(--green)}.detail-combination-row>input:not([type="checkbox"]){width:100%;height:34px;border:1px solid var(--line);border-radius:7px;background:var(--input-bg);color:var(--ink);padding:0 8px;font-size:12px;outline:0}.detail-combination-row>input:focus{border-color:var(--green);box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 15%,transparent)}.detail-combination-row>input:disabled{opacity:.55}.detail-combination-name strong,.detail-combination-name small{display:block}.detail-combination-name strong{font-size:12px}.detail-combination-name small{margin-top:2px;color:var(--muted);font-size:10px}.detail-combination-table.quote-only .detail-combination-head span:nth-child(4),.detail-combination-table.quote-only .detail-combination-head span:nth-child(5){color:var(--green)}
.detail-variant-builder>footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid var(--line);background:var(--panel)}.detail-variant-builder>footer strong,.detail-variant-builder>footer span{display:block}.detail-variant-builder>footer strong{font-size:13px}.detail-variant-builder>footer span{margin-top:2px;color:var(--muted);font-size:11px}.detail-builder-actions{display:flex;gap:8px}.detail-variant-builder .component-error{margin:0 18px 17px}
@media(max-width:720px){.detail-builder-head,.detail-builder-toolbar,.detail-combinations-head,.detail-variant-builder>footer{align-items:stretch;flex-direction:column}.detail-add-option{grid-template-columns:1fr}.detail-add-option .text-input{max-width:none}.detail-option-name{width:65vw}.detail-variant-builder{margin-inline:10px}.detail-combination-table{margin-inline:10px}.detail-builder-empty.combinations{margin-inline:10px}}