.xxl-workspace, .xxl-preview { --xxl-ink:#1c1c1c; --xxl-accent:#625b00; --xxl-line:#deddd4; --xxl-soft:#f7f6ed; color:#1c1c1c; max-width:1600px; margin:0 auto 3rem; font-family:inherit; font-size:14px; line-height:1.55; }
.xxl-workspace * { box-sizing:border-box; }
.xxl-workspace h1,.xxl-workspace h2,.xxl-workspace h3,.xxl-workspace h4 { color:var(--xxl-ink); font-weight:650; letter-spacing:-.025em; line-height:1.25; }
.xxl-workspace h1 { font-size:clamp(1.6rem,2.4vw,2.25rem); margin:.35rem 0 .6rem; }
.xxl-workspace h2 { font-size:1.6rem; margin:.4rem 0 .75rem; }
.xxl-workspace h3 { font-size:1.18rem; margin:.4rem 0 .75rem; }
.xxl-workspace h4 { font-size:1.05rem; margin:0; }
.xxl-workspace p { margin:0 0 1rem; }
.xxl-workspace button,.xxl-workspace input,.xxl-workspace textarea,.xxl-workspace select { font:inherit; }
.xxl-workspace button { cursor:pointer; }
.xxl-workspace button:disabled { opacity:.4; cursor:default; }
.xxl-workspace button:focus-visible,.xxl-workspace a:focus-visible,.xxl-workspace input:focus-visible,.xxl-workspace select:focus-visible,.xxl-workspace textarea:focus-visible,.xxl-workspace summary:focus-visible { outline:3px solid #6cbbb5; outline-offset:3px; }
.xxl-page-header { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.7rem 0 1.3rem; }
.xxl-page-header p { color:#687e7c; margin:0; }
.xxl-kicker { display:block; color:var(--xxl-accent); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; font-weight:750; }
.xxl-back { display:block; color:#657a78; text-decoration:none; font-size:.8rem; margin-bottom:.65rem; }
.xxl-tag { display:inline-flex; align-items:center; background:#e3f1eb; color:#286759; border:1px solid #c7e3d5; border-radius:6px; font-size:.72rem; font-weight:600; padding:.3rem .55rem; white-space:nowrap; }
.xxl-button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid var(--xxl-accent); border-radius:7px; background:var(--xxl-accent); color:white; font-weight:600; text-decoration:none; padding:.65rem 1rem; font-size:.82rem; line-height:1.4; }
.xxl-button:hover { background:#056862; color:white; }
.xxl-button.secondary { background:white; border-color:#c6d6d3; color:#365e59; }
.xxl-button.secondary:hover { background:var(--xxl-soft); }
.xxl-text-button { display:inline-block; padding:.2rem .1rem; color:var(--xxl-accent); font-size:.8rem; background:none; border:0; font-weight:600; }
.xxl-text-button:hover { text-decoration:underline; }
.xxl-text-button.danger { color:#b04c4c; }
.xxl-icon-button { border:1px solid var(--xxl-line); border-radius:5px; background:white; color:#8a5555; padding:.25rem .6rem; }
.xxl-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:1.25rem 0; }
.xxl-notice { border:1px solid #dce9e4; border-left:3px solid #65aaa0; background:#f3f8f5; padding:1rem 1.2rem; border-radius:5px; color:#54706a; margin-bottom:1.25rem; font-size:.84rem; }
.xxl-notice p { margin:.5rem 0 0; }
.xxl-muted { color:#748783; font-size:.84rem; }
.xxl-error { padding:.85rem 1rem; border:1px solid #e5bcbc; border-radius:7px; color:#8a3535; background:#fff2f1; margin-bottom:1rem; }
.xxl-success { padding:1rem; background:#eff8f2; color:#33654c; border-radius:5px; }
.xxl-save-area { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.xxl-save-state { font-size:.75rem; color:#6c807b; }
.xxl-catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:1.5rem; }
.xxl-catalog-card { border:1px solid var(--xxl-line); border-radius:12px; overflow:hidden; background:white; }
.xxl-catalog-art { background:#eef5f1; display:flex; align-items:center; gap:1.5rem; padding:1.5rem 2rem; color:#4b8276; }
.xxl-catalog-art .xxl-illustration { width:110px; height:90px; }
.xxl-catalog-art span { font-size:.75rem; }
.xxl-catalog-body { padding:1.5rem; }
.xxl-catalog-body h2 { font-size:1.4rem; }
.xxl-catalog-body p { color:#748783; }
.xxl-editor-bar { border-top:1px solid var(--xxl-line); border-bottom:1px solid var(--xxl-line); padding:.8rem 0; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between; margin-bottom:1.25rem; }
.xxl-editor-bar>span { color:#82928e; font-size:.75rem; }
.xxl-view-controls { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.75rem 1.5rem; min-width:0; }
.xxl-view-group { display:flex; flex-direction:column; gap:.35rem; min-width:0; max-width:100%; }
.xxl-view-group>span { color:#647d76; font-size:.7rem; font-weight:600; padding-left:4px; }
.xxl-view-tabs { display:inline-flex; background:#ecf2f0; padding:4px; border-radius:8px; gap:3px; }
.xxl-view-tabs button { border:0; color:#647d76; background:none; padding:.5rem .9rem; border-radius:5px; font-size:.8rem; font-weight:600; }
.xxl-view-tabs button.active { color:var(--xxl-accent); background:white; box-shadow:0 1px 4px #193c3417; }
.xxl-builder { display:grid; grid-template-columns:250px minmax(0,1fr); align-items:start; border:1px solid var(--xxl-line); border-radius:10px; background:#f7f9f8; overflow:clip; }
.xxl-hidden { display:none !important; }
.xxl-view-tabs { flex-wrap:wrap; }
.xxl-connections { margin-bottom:1.5rem; }
.xxl-connections h2 { margin:0; font-size:1.2rem; }
.xxl-connections .connections-viewport { max-height:65vh; min-height:340px; }
.xxl-connections .connection-node { height:116px; }
.xxl-connections .connection-node small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.xxl-connections .connection-node .xxl-illustration { width:36px; height:28px; flex:none; }
.xxl-connections .xxl-connection-question { background:#e8f3ee; border-color:#245e4d; }
.xxl-connections .connection-line { stroke:#378760; }
.xxl-connections .connection-line.option { stroke:#a2aba6; }
.xxl-connections .connection-line.price { stroke:#3778b8; stroke-dasharray:6 4; }
.xxl-connections .connection-line.stock { stroke:#8c5aad; stroke-dasharray:6 4; }
.xxl-connections .connection-inspector .xxl-button { margin-top:.6rem; }
.xxl-connection-legend { font-size:.75rem; color:#647d76; }
.xxl-outline { padding:1rem .75rem; position:sticky; top:4.3rem; max-height:calc(100vh - 5rem); overflow-y:auto; }
.xxl-outline>button,.xxl-outline-step>button { width:100%; text-align:left; }
.xxl-outline button { font-size:.78rem; }
.xxl-outline-settings { display:flex; flex-direction:column; gap:.1rem; border:0; background:transparent; border-radius:6px; padding:.75rem; color:#647a74; }
.xxl-outline-settings small { font-size:.68rem; font-weight:400; }
.xxl-outline-settings.active { background:#e0eeea; color:#175d51; }
.xxl-outline-step { margin:1rem 0; }
.xxl-outline-step>button:first-child { border:0; background:transparent; padding:.45rem .5rem; display:flex; align-items:center; gap:.5rem; color:#30574f; border-radius:5px; }
.xxl-outline-step>button:first-child>span { display:inline-grid; place-items:center; border-radius:5px; background:#e1ebe7; width:23px; height:23px; font-size:.7rem; }
.xxl-outline-step>button:first-child strong { flex:1; }
.xxl-outline-step>button:first-child small { color:#93a49d; }
.xxl-outline-step>button.active:first-child { background:#dfeee9; }
.xxl-outline-question { display:flex; align-items:baseline; gap:.5rem; border:0; border-radius:5px; background:transparent; color:#72857d; padding:.5rem .6rem .5rem 1.2rem; font-weight:450; }
.xxl-outline-question>span:nth-child(2) { flex:1; }
.xxl-question-dot { width:5px; height:5px; border-radius:50%; background:#b6c8bf; flex:0 0 5px; }
.xxl-outline-question.active { background:white; color:var(--xxl-accent); box-shadow:0 1px 3px #1a3e3310; }
.xxl-outline-question.active .xxl-question-dot { background:var(--xxl-accent); }
.xxl-outline-question:hover { color:var(--xxl-accent); }
.xxl-outline-add { padding:.4rem .7rem .4rem 1.95rem; border:0; background:transparent; color:#3b8a79; font-size:.72rem !important; }
.xxl-outline-help { border-top:1px solid var(--xxl-line); color:#87968f; font-size:.7rem; margin-top:1.6rem; padding:.9rem .5rem 0; }
.xxl-outline-help p { margin:.5rem 0; }
.xxl-inspector { min-width:0; min-height:650px; padding:2rem; border-left:1px solid var(--xxl-line); background:white; }
.xxl-inspector-anchor { scroll-margin-top:5rem; outline:none; }
.xxl-workspace label { display:block; font-weight:600; font-size:.79rem; color:#4e6b62; margin-bottom:1rem; }
.xxl-workspace label>small { display:block; font-weight:400; color:#87988f; }
.xxl-workspace input:not([type=checkbox]):not([type=file]),.xxl-workspace textarea,.xxl-workspace select { display:block; width:100%; background:white; border:1px solid #cddbd5; border-radius:6px; padding:.6rem .7rem; color:#34554d; margin-top:.35rem; min-width:0; }
.xxl-workspace textarea { resize:vertical; }
.xxl-workspace .xxl-checkbox { display:flex; align-items:center; gap:.6rem; font-weight:400; }
.xxl-workspace input[type=checkbox] { accent-color:var(--xxl-accent); width:16px; height:16px; }
.xxl-fields-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; }
.xxl-rules { background:#f4f7f5; border:1px solid #e2eae5; border-radius:7px; padding:1rem; margin:1rem 0 1.8rem; }
.xxl-rule-heading { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; font-size:.78rem; margin-bottom:.5rem; }
.xxl-rule-heading>span { font-size:.7rem; color:#87998e; }
.xxl-rule-heading>select { width:auto; font-size:.72rem; margin:0; padding:.25rem .4rem; }
.xxl-rule-row { display:flex; gap:.4rem; margin:.5rem 0; align-items:center; }
.xxl-rule-row select { margin:0; flex:1; font-size:.74rem; padding:.4rem; }
.xxl-rule-row select:first-child { flex:1.5; }
.xxl-rules>small { display:block; color:#8c9b93; font-size:.7rem; margin-top:.4rem; }
.xxl-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.5rem 0 .6rem; }
.xxl-section-heading:first-child { margin-top:0; }
.xxl-section-heading h2,.xxl-section-heading h3 { margin:.25rem 0; }
.xxl-section-heading>span { font-size:.75rem; color:#8a9a91; }
.xxl-option-editor { margin:.65rem 0; border:1px solid var(--xxl-line); border-radius:7px; }
.xxl-option-editor summary { padding:.85rem 1rem; display:flex; gap:.7rem; align-items:center; cursor:pointer; color:#46695b; font-weight:600; font-size:.8rem; }
.xxl-option-editor summary:before { content:'›'; font-size:1.1rem; line-height:1; color:#80a190; }
.xxl-option-editor[open] summary:before { transform:rotate(90deg); }
.xxl-option-editor summary>span { flex:1; }
.xxl-option-editor summary>small { color:#80968a; font-weight:400; font-size:.7rem; text-align:right; }
.xxl-option-editor[open] summary { border-bottom:1px solid var(--xxl-line); background:#fafcfb; }
.xxl-option-body { padding:1rem; }
.xxl-option-body .xxl-rules { margin-bottom:.5rem; }
.xxl-question-tools { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--xxl-line); }
.xxl-validation { color:#a35c45; font-size:.8rem; }
.xxl-preview { border:1px solid var(--xxl-line); border-radius:12px; padding:1.8rem; background:white; }
.xxl-preview-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.xxl-steps { display:flex; margin:1.75rem 0 1.5rem; background:#f5f8f6; border:1px solid var(--xxl-line); border-radius:9px; overflow:hidden; position:sticky; top:3.5rem; z-index:2; }
.xxl-step { display:flex; flex:1; gap:.65rem; align-items:center; background:transparent; border:0; padding:1rem; color:#7b9085; font-size:.8rem; }
.xxl-step>span { display:grid; place-items:center; height:27px; width:27px; border-radius:50%; background:#e5eee8; color:#76917f; font-size:.75rem; }
.xxl-step.active { background:#e0f0e8; color:#146453; }
.xxl-step.active>span { background:#167f68; color:white; }
.xxl-preview-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:2rem; align-items:start; }
.xxl-stage-heading { margin-bottom:1.8rem; }
.xxl-stage-heading,.xxl-test-result { scroll-margin-top:5rem; }
.xxl-stage-heading:focus,.xxl-test-result:focus { outline:none; }
.xxl-stage-heading h3 { font-size:1.5rem; margin:.3rem 0; }
.xxl-stage-heading p { font-size:.8rem; color:#89998f; }
.xxl-question { border:0; border-bottom:1px solid #eaf0eb; padding:0 0 1.6rem; margin:0 0 1.6rem; }
.xxl-question-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.55rem; }
.xxl-question-heading>small { color:#92a195; font-size:.65rem; flex-shrink:0; }
.xxl-question>.xxl-muted { margin-bottom:.8rem; font-size:.75rem; }
.xxl-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.xxl-choice { border:1px solid #d6e2da; border-radius:8px; overflow:hidden; background:white; }
.xxl-choice>button { display:flex; align-items:center; gap:.75rem; width:100%; min-height:82px; text-align:left; background:transparent; border:0; color:#35564b; padding:1rem; }
.xxl-choice:hover { border-color:#69a394; }
.xxl-choice.selected { border-color:#187f69; box-shadow:inset 0 0 0 1px #187f69; background:#f0f9f3; }
.xxl-illustration { width:60px; height:48px; flex:0 0 60px; color:#518c79; }
.xxl-choice-copy { flex:1; min-width:0; }
.xxl-choice-copy>strong { display:block; font-size:.81rem; font-weight:650; line-height:1.3; }
.xxl-choice-copy>small { display:block; font-size:.69rem; color:#809489; margin-top:.35rem; line-height:1.5; }
.xxl-choice-end { display:flex; flex-direction:column; align-items:flex-end; gap:.65rem; font-size:.7rem; }
.xxl-check { display:grid; place-items:center; width:18px; height:18px; border:1px solid #bccfc0; border-radius:50%; color:#94ab9a; font-size:.68rem; }
.xxl-choice.selected .xxl-check { color:white; background:#1a8268; border-color:#1a8268; }
.xxl-price { white-space:nowrap; font-weight:550; }
.xxl-unit-price { color:#7c9587; white-space:nowrap; font-size:.61rem; font-weight:400; }
.xxl-workspace .xxl-option-input { font-size:.72rem; padding:0 1rem 1rem; margin:0; }
.xxl-quantity { display:flex; align-items:center; gap:1rem; font-size:.75rem; color:#7a9180; }
.xxl-quantity>input { max-width:120px; }
.xxl-upload { padding:1rem; background:#f5f8f5; border:1px dashed #c1d4c6; border-radius:8px; display:flex; flex-direction:column; gap:.5rem; font-size:.8rem; }
.xxl-stage-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:.25rem; }
.xxl-summary { position:sticky; top:4.5rem; border:1px solid #dce8de; border-radius:10px; padding:1.25rem; background:#f8faf7; }
.xxl-summary-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.xxl-summary-top .xxl-kicker { font-size:.65rem; }
.xxl-summary-top .xxl-text-button { font-size:.65rem; }
.xxl-summary-group { border-bottom:1px solid #e0e9e0; padding-bottom:.7rem; margin-bottom:.8rem; }
.xxl-summary-group>strong { display:block; font-size:.75rem; color:#68846f; margin-bottom:.7rem; }
.xxl-summary-line { width:100%; display:flex; align-items:start; justify-content:space-between; gap:1rem; border:0; padding:.3rem 0; background:transparent; color:#3d5f47; font-size:.72rem; text-align:left; }
.xxl-summary-line>span { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.xxl-summary-line small { display:block; color:#91a391; font-size:.62rem; line-height:1.3; margin-bottom:.15rem; }
.xxl-summary-line b { font-size:.68rem; white-space:nowrap; font-weight:550; }
.xxl-summary-line:hover>span { color:var(--xxl-accent); text-decoration:underline; }
.xxl-total { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.25rem 0 1rem; color:#244d37; }
.xxl-total span { font-size:.85rem; font-weight:600; }
.xxl-total small { display:block; font-weight:400; font-size:.65rem; color:#91a58f; }
.xxl-total strong { font-size:1.5rem; font-weight:700; letter-spacing:-.04em; }
.xxl-summary-note { border-top:1px solid #dce7da; padding-top:.8rem; font-size:.65rem; color:#93a68f; margin:0 !important; }
.xxl-test-result { background:#edf7ef; border:1px solid #c8e1ce; border-radius:9px; padding:1.5rem; margin-bottom:1.5rem; }
.xxl-test-result p { font-size:.8rem; color:#709074; }
.xxl-test-result .xxl-button { margin:0 .3rem .3rem 0; }
.xxl-result-group { margin:1.3rem 0; }
.xxl-result-line { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--xxl-line); font-size:.8rem; }
.xxl-result-line span { white-space:pre-wrap; overflow-wrap:anywhere; }
.xxl-result-line small { display:block; color:#8c9e90; font-size:.7rem; }
.xxl-result-line strong { font-size:.75rem; white-space:nowrap; }
.xxl-editor-layout.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; gap:1rem; }
.split .xxl-builder { grid-template-columns:190px minmax(0,1fr); }
.split .xxl-inspector { padding:1.2rem; }
.split .xxl-preview { padding:1.2rem; }
.split .xxl-preview-grid { grid-template-columns:1fr; }
.split .xxl-summary { position:static; }
.split .xxl-rule-row { flex-wrap:wrap; }
.xxl-connections-split > .xxl-connections { position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto; }
.xxl-connections-split .connections-viewport { min-height:250px; max-height:55vh; }
@media (max-width:1200px) { .xxl-connections-split > .xxl-connections { position:static; max-height:none; } }
@media (min-width:1600px) { .xxl-preview-grid { gap:3rem; } }
@media (max-width:1200px) { .xxl-editor-layout.split { grid-template-columns:1fr; } .split .xxl-builder { grid-template-columns:220px minmax(0,1fr); } .xxl-preview-grid { grid-template-columns:minmax(0,1fr) 245px; gap:1.2rem; } .xxl-preview { padding:1.4rem; } .xxl-choice>button { gap:.5rem; padding:.8rem; } .xxl-choice .xxl-illustration { width:42px; height:40px; flex-basis:42px; } }
@media (max-width:900px) { .xxl-preview-grid { grid-template-columns:1fr; } .xxl-summary { position:static; } .xxl-builder { grid-template-columns:205px minmax(0,1fr); } .xxl-inspector { padding:1.2rem; } .xxl-rule-row { flex-wrap:wrap; } .xxl-rule-row select { flex-basis:35%; } .xxl-page-header { align-items:flex-start; } .xxl-save-area { flex-direction:column-reverse; align-items:flex-end; gap:.5rem; } }
@media (max-width:640px) { .xxl-page-header { flex-direction:column; gap:.7rem; padding-top:1.2rem; } .xxl-save-area { flex-direction:row; align-items:center; } .xxl-save-state { font-size:.65rem; } .xxl-catalog { grid-template-columns:1fr; } .xxl-editor-bar { flex-direction:column; align-items:flex-start; gap:.5rem; } .xxl-builder,.split .xxl-builder { grid-template-columns:1fr; } .xxl-outline { position:static; max-height:260px; border-bottom:1px solid var(--xxl-line); } .xxl-outline-help { display:none; } .xxl-inspector { min-height:0; border-left:0; padding:1rem; } .xxl-preview { padding:1rem; } .xxl-choice-grid { grid-template-columns:1fr; } .xxl-steps { margin:1.2rem 0; } .xxl-step { flex-direction:column; gap:.4rem; padding:.7rem .35rem; font-size:.7rem; } .xxl-fields-two { grid-template-columns:1fr; gap:0; } .xxl-stage-actions { align-items:stretch; } .xxl-stage-actions .xxl-button { font-size:.73rem; padding:.6rem; } .xxl-choice .xxl-illustration { width:55px; flex-basis:55px; } .xxl-catalog-art { padding:1rem; } }

/* Alternative entry view: a single sheet using the same answers and rules. */
.xxl-entry-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:1.25rem 0; }
.xxl-entry-controls button[aria-pressed="true"] { background:#e0f0e8; border-color:var(--xxl-accent); color:#146453; }
.xxl-entry-controls>span { font-size:.78rem; color:#647d76; margin-left:.5rem; }
.xxl-form-view .xxl-steps { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; border:0; background:transparent; }
.xxl-form-jump { display:flex; gap:.5rem; align-items:center; padding:.6rem .85rem; background:#f2f7f5; border:1px solid var(--xxl-line); border-radius:6px; color:var(--xxl-ink); font-size:.78rem; text-decoration:none; }
.xxl-form-jump:hover { background:#e0f0e8; color:var(--xxl-accent); }
.xxl-form-jump>span { color:var(--xxl-accent); }
.xxl-form-view .xxl-entry-section { padding:1.5rem; margin-bottom:1.25rem; border:1px solid var(--xxl-line); border-radius:10px; scroll-margin-top:5rem; background:white; }
.xxl-form-view .xxl-stage-heading { margin-bottom:1.25rem; border-bottom:1px solid var(--xxl-line); padding-bottom:.75rem; }
.xxl-form-view .xxl-stage-heading h3 { font-size:1.25rem; }
.xxl-form-view .xxl-question:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
.xxl-form-options { border:1px solid var(--xxl-line); border-radius:7px; overflow:hidden; }
.xxl-form-option+.xxl-form-option { border-top:1px solid var(--xxl-line); }
.xxl-form-option.selected { background:#edf7f2; }
.xxl-form-option:hover { background:#f2f7f5; }
.xxl-workspace .xxl-form-option-label { display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; margin:0; cursor:pointer; }
.xxl-workspace .xxl-form-option-label>input { width:18px; height:18px; flex:0 0 18px; padding:0; margin:0; accent-color:var(--xxl-accent); }
.xxl-form-option-copy { flex:1; min-width:0; }
.xxl-form-option-copy strong { font-size:.84rem; font-weight:600; }
.xxl-form-option-copy small,.xxl-form-option-price small { display:block; font-size:.72rem; color:#647d76; font-weight:400; margin-top:.2rem; }
.xxl-form-option-price { flex-shrink:0; text-align:right; font-size:.8rem; font-weight:600; }
.xxl-form-view .xxl-summary { max-height:calc(100vh - 6rem); overflow:auto; }
.xxl-form-view .xxl-stage-actions { flex-wrap:wrap; }
@media (max-width:900px) { .xxl-form-view .xxl-summary { max-height:none; } }
@media (max-width:640px) {
    .xxl-form-view .xxl-entry-section { padding:1rem; }
    .xxl-workspace .xxl-form-option-label { flex-wrap:wrap; gap:.5rem; padding:.75rem; }
    .xxl-form-option-price { margin-left:26px; flex-basis:calc(100% - 26px); text-align:left; }
    .xxl-form-option-price:empty { display:none; }
    .xxl-entry-controls>span { flex-basis:100%; margin:.25rem 0 0; }
}

.connections-panel {min-width:0;border:1px solid #ccdcd4;border-radius:10px;background:#fff;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.connections-heading {display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.connections-panel p {margin:0}
.connections-controls {display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.connections-controls label.inline-check {display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;margin:0}
.connections-viewport {overflow:auto;max-height:calc(100vh - 400px);min-height:250px;background:#f5f8f6;border:1px solid #dde7e1;border-radius:7px}
.connections-canvas {position:relative;transform-origin:top left}
.connection-lines {position:absolute;inset:0;pointer-events:none}
.connection-line {fill:none;stroke:#78958a;stroke-width:2}
.connection-line.inactive {stroke:#b2b9b5;stroke-dasharray:5 5}
.connection-line.highlighted {stroke:#378760}
.connection-line.muted {opacity:.12}
.connection-group {position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:13px;line-height:1.3;gap:3px}
.connection-group>span {font-size:11px;color:#64776a}
.connection-group strong {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connection-node {position:absolute;height:106px;border:2px solid #4e9b72;border-radius:8px;background:#fff;color:#233d2d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;text-align:center;line-height:1.2}
.connection-node img {width:38px;height:32px;object-fit:contain}
.connection-node strong {font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.connection-node small {font-size:9px;color:#607869}
.connection-node.inactive {border-color:#a2aba6;border-style:dashed;background:#edf0ee;color:#728077}
.connection-node.selected {outline:3px solid #3c83cc;outline-offset:3px}
.connection-node.muted {opacity:.35}
.connection-info {border-radius:50%;background:#dce9fa;color:#28567c;font-weight:bold;width:25px;height:25px;line-height:25px}
.connection-inspector {padding:.7rem;background:#edf4ff;border-radius:7px;font-size:.85rem;overflow-wrap:anywhere}
.connection-inspector>strong {display:block;margin-bottom:.3rem}

/* Imprenta theme for the migrated editor and customer product steps. */
.xxl-button { background:var(--imprenta-yellow); border-color:var(--imprenta-yellow); color:var(--imprenta-ink); }
.xxl-button:hover { background:#d0c000; color:var(--imprenta-ink); }
.xxl-button.secondary { color:#1c1c1c; border-color:#b9b7a9; }
.xxl-choice.selected, .xxl-form-option.selected { border-color:#958b00; box-shadow:inset 0 0 0 1px #958b00; background:#fffde8; }
.xxl-step.active { background:#fffbd4; color:#1c1c1c; }
.xxl-step.active>span, .xxl-choice.selected .xxl-check { background:#ead801; border-color:#958b00; color:#1c1c1c; }
.xxl-outline-settings.active, .xxl-outline-step>button.active, .xxl-outline-question.active { background:#fffbd4; color:#1c1c1c; }

/* Keep the editor comfortably wide while giving its outline less horizontal space. */
.xxl-configurator-editor { position:relative; left:50%; width:min(1800px, calc(100vw - 40px)); max-width:none; transform:translateX(-50%); }
.xxl-configurator-editor .xxl-builder { grid-template-columns:180px minmax(0,1fr); }
.xxl-configurator-editor .xxl-editor-layout.split { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.xxl-configurator-editor .split .xxl-builder { grid-template-columns:160px minmax(0,1fr); }
@media (max-width:1200px) {
    .xxl-configurator-editor .xxl-editor-layout.split { grid-template-columns:1fr; }
    .xxl-configurator-editor .xxl-builder,.xxl-configurator-editor .split .xxl-builder { grid-template-columns:180px minmax(0,1fr); }
}
@media (max-width:900px) {
    .xxl-configurator-editor .xxl-builder,.xxl-configurator-editor .split .xxl-builder { grid-template-columns:165px minmax(0,1fr); }
}
@media (max-width:640px) {
    .xxl-configurator-editor { width:100vw; }
}
.xxl-summary { background:#faf9f2; border-color:#deddd4; }
.xxl-tag { background:#fffbd4; border-color:#ded68a; color:#4a4500; }
.xxl-notice { border-color:#deddd4; border-left-color:#ead801; background:#faf9f2; color:#4a493e; }
.xxl-builder, .xxl-rules, .xxl-steps, .xxl-upload { background:#f7f6ef; }
.xxl-muted, .xxl-summary-note { color:#66645a; }
.xxl-workspace button:focus-visible, .xxl-preview button:focus-visible, .xxl-preview input:focus-visible, .xxl-workspace input:focus-visible, .xxl-workspace a:focus-visible { outline:3px solid #958b00; outline-offset:3px; }
.xxl-preview .xxl-choice>button { width:100%; }
.order-steps { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; margin:2rem 0; }
.order-step { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem; padding:.8rem .5rem; border:1px solid #d4d3cd; border-radius:6px; background:white; color:#1c1c1c; font-weight:650; font-size:.85rem; }
.order-step>span { width:1.6rem; height:1.6rem; display:inline-grid; place-items:center; border-radius:50%; background:#e9e8e0; }
.order-step.active { border-color:#958b00; background:#fffde8; }
.order-step.active>span { background:#ead801; }
.order-step:disabled { color:#6a695e; }
.order-calendar { max-width:450px; }
.order-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem; }
.order-calendar-grid .btn { padding:.65rem .1rem; font-size:.9rem; }
.order-calendar-grid .order-calendar-day { display:block; width:100%; }
.order-calendar-grid .order-calendar-day>.btn { width:100%; }
.order-calendar-grid .btn:disabled { border-color:transparent; opacity:.3; }
.order-multiline { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:700px) { .order-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } .order-step { flex-direction:column; font-size:.72rem; } }

.xxl-choice-grid { align-items:start; }
.xxl-preview .xxl-option-input { padding:1rem; margin:0; border-top:1px solid #e4dfad; background:rgba(255,255,255,.65); }
.xxl-preview .xxl-option-input-label { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin:0 0 .5rem; color:#36352b; font-size:.8rem; line-height:1.4; }
.xxl-preview .xxl-option-input-label>small { flex-shrink:0; color:#767260; font-size:.68rem; font-weight:400; }
.xxl-preview .xxl-option-input>.form-control { display:block; width:100%; min-width:0; min-height:46px; margin:0; padding:.7rem .85rem; border:1px solid #cbc8b7; border-radius:5px; background:white; color:#1c1c1c; font:inherit; font-size:.9rem; }
.xxl-preview .xxl-option-input>.form-control:focus { border-color:#958b00; outline:none; box-shadow:0 0 0 .2rem rgba(234,216,1,.18); }
.xxl-preview .xxl-form-option-label>input[type=radio], .xxl-preview .xxl-form-option-label>input[type=checkbox] { width:18px; min-height:18px; height:18px; margin:0; padding:0; }
@media(max-width:400px) { .xxl-preview .xxl-option-input-label { flex-direction:column; gap:.15rem; } }