.vdp-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 1.25rem; align-items: start; }
.vdp-editor-layout > .vdp-properties { grid-column: 2; grid-row: 1; }
.vdp-editor-layout > .vdp-canvas { grid-column: 1; grid-row: 1; min-width: 0; position: sticky; top: 8rem; }
.vdp-editor-layout:has(> .vdp-suggestions:not([hidden])) > .vdp-canvas { position: static; }
[data-variable-editor], .vdp-editor-layout, .vdp-properties { min-width: 0; }
.vdp-setup-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.vdp-editor-layout > .vdp-suggestions { grid-column: 1 / -1; grid-row: 2; }
.vdp-suggestions { padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.vdp-suggestions h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.vdp-suggestions > p, .vdp-suggestion-row small { color: var(--muted); font-size: .82rem; }
.vdp-suggestion-list { display: grid; }
.vdp-suggestion-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.vdp-suggestion-row > label:first-child { display: flex; align-items: start; gap: .65rem; flex: 1 1 250px; min-width: 0; }
.vdp-suggestion-row input[type="checkbox"], .vdp-suggestion-actions input { width: auto; flex: 0 0 auto; }
.vdp-suggestion-row strong, .vdp-suggestion-row small { display: block; overflow-wrap: anywhere; }
.vdp-suggestion-row > label:not(:first-child) { display: grid; gap: .25rem; font-size: .8rem; }
.vdp-suggestion-row select { max-width: 260px; }
.vdp-suggestion-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.vdp-suggestion-actions .checkbox-label { display: flex; gap: .6rem; }
.vdp-field.vdp-suggestion { border: 2px dashed var(--teal-dark); background: #d7f2fa55; pointer-events: none; }
.vdp-setup-card { display: flex; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.vdp-setup-card > div { flex: 1; min-width: 0; }
.vdp-setup-card strong { display: block; margin-bottom: .25rem; }
.vdp-setup-card p, .vdp-inspector-head p, .vdp-actions p { margin: 0 0 .7rem; color: var(--muted); font-size: .85rem; }
.vdp-setup-card label { display: grid; gap: .3rem; font-size: .82rem; }
.vdp-setup-card input { max-width: 100%; }
.vdp-font-panel { display: grid; gap: 1.25rem; margin: 1.5rem 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.vdp-font-panel h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.vdp-font-panel p { margin: 0; max-width: 65ch; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.vdp-font-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); align-items: end; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.vdp-font-row strong, .vdp-font-row small { display: block; overflow-wrap: anywhere; }
.vdp-font-row small { margin-top: .2rem; color: var(--muted); font-size: .75rem; }
.vdp-font-row small.vdp-font-source { color: var(--teal-dark); font-weight: 700; }
.vdp-font-row small.vdp-font-missing { color: #9b2828; font-weight: 700; }
.vdp-font-row label, .vdp-font-upload label { display: grid; gap: .3rem; font-size: .8rem; }
.vdp-font-row select { width: 100%; }
.vdp-font-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.vdp-font-upload .vdp-font-dropzone { flex: 1 1 100%; display: grid; justify-items: center; gap: .4rem; padding: 1.5rem; border: 1px dashed #8da6a6; border-radius: 10px; background: #f8fbfb; text-align: center; cursor: pointer; }
.vdp-font-dropzone.dragging, .vdp-font-dropzone:focus-within { border-color: var(--teal-dark); background: #e8f7fa; outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.vdp-font-dropzone span, [data-font-selection] { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.vdp-font-dropzone input { max-width: 100%; }
.vdp-cmyk { display: grid; gap: .4rem; }
.vdp-cmyk > span { font-size: .78rem; color: var(--muted); }
.vdp-cmyk .field-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.vdp-cmyk input { min-width: 0; width: 100%; }
.vdp-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.vdp-swatch { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.vdp-swatch::before { content: ""; width: 30px; height: 30px; border: 1px solid #0002; border-radius: 4px; background: var(--swatch-colour); }
.vdp-swatch[aria-pressed="true"] { border-color: var(--teal-dark); box-shadow: 0 0 0 1px var(--teal-dark); }
.vdp-swatch[aria-pressed="true"]::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; color: var(--ink); background: var(--cyan, #00b4dc); font-size: 12px; font-weight: 700; text-align: center; }
.vdp-palette { display: grid; gap: .5rem; }
.vdp-palette .vdp-selected-colour { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.vdp-text-toggle { display: flex; align-items: center; gap: .5rem; }
.vdp-text-toggle input { width: auto; }
.vdp-step-tag { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #edf4f1; color: var(--teal-dark); font-size: .75rem; font-weight: 700; }
.vdp-file-state { display: block; margin-top: .35rem; color: var(--teal-dark); font-size: .8rem; }
.vdp-inspector-head { display: flex; justify-content: space-between; align-items: start; gap: .75rem; }
.vdp-inspector-head h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.vdp-field-picker { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.vdp-create-tools { display: grid; gap: .55rem; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper, #f8f7f4); }
.vdp-create-tools strong { font-size: .85rem; }
.vdp-create-tools p, .vdp-create-tools small { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.vdp-create-tools button { padding: .6rem .4rem; font-size: .8rem; }
.vdp-field-state { margin: 0; padding: .55rem .7rem; background: #fff1db; color: #714b18; border-radius: 6px; font-size: .8rem; }
.vdp-property-group { display: grid; gap: .7rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.vdp-property-group h3 { margin: 0; font-size: .88rem; }
.vdp-property-group p { margin: 0; color: var(--muted); font-size: .78rem; }
.vdp-typography { display: grid; gap: .7rem; }
.vdp-typography[open] { display: grid; }
.vdp-typography summary { cursor: pointer; color: var(--teal-dark); font-size: .82rem; font-weight: 600; }
.vdp-typography > :not(summary) { margin-top: .7rem; }
.vdp-actions { position: sticky; top: .5rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 3px 12px #0001; }
.vdp-actions > div { flex: 1 1 250px; }
.vdp-actions strong { display: block; margin-bottom: .25rem; }
.vdp-actions p { margin: 0; }
.vdp-upload-panel, .vdp-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.vdp-upload-panel label { flex: 1 1 220px; }
.vdp-toolbar label { min-width: 100px; }
.vdp-properties { display: grid; gap: .65rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.vdp-properties .vdp-property-group { gap: .5rem; padding: .65rem 0; }
.vdp-properties fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vdp-properties label { display: grid; gap: .35rem; font-size: .82rem; font-weight: 600; }
.vdp-properties :is(input, select, textarea) { width: 100%; min-width: 0; }
.vdp-properties textarea { min-height: 44px; height: 64px; }
.vdp-properties .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.vdp-properties .vdp-cmyk .field-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.vdp-inspector-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; padding: .25rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper, #f8f7f4); }
.vdp-inspector-tabs button { padding: .7rem .4rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.vdp-inspector-tabs button[aria-selected="true"] { background: var(--pale-cyan, #d7f2fa); border-color: var(--cyan, #00b4dc); color: var(--ink); }
.vdp-inspector-tabs button:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.vdp-inspector-footer { display: flex; justify-content: end; padding-top: .5rem; border-top: 1px solid var(--line); }
.vdp-inspector-footer button { flex-shrink: 0; font-size: .8rem; }
.vdp-inspector-footer .danger { color: #9b2828; }
.vdp-choice-setup, .vdp-choice-card > div { display: grid; gap: .75rem; }
.vdp-choice-card { padding: .7rem; border: 1px solid var(--line); border-radius: 8px; }
.vdp-choice-card + .vdp-choice-card { margin-top: .6rem; }
.vdp-choice-card summary { font-size: .85rem; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.vdp-choice-card[open] summary { margin-bottom: .75rem; }
.vdp-choice-card textarea { height: 90px; }
.vdp-choice-card .danger { justify-self: end; color: #9b2828; }
.vdp-choice-summary { display: block; white-space: pre-line; font-weight: 400; color: var(--muted); }
.vdp-properties .checkbox-label { display: flex; min-height: 44px; align-items: center; gap: .5rem; }
.vdp-properties .checkbox-label input { width: auto; height: auto; min-height: 0; margin: 0; }
.vdp-scroll { overflow: auto; padding: 1.5rem; background: #e9edeb; border-radius: 12px; min-height: 250px; max-height: 75vh; }
.vdp-stage { position: relative; background: white; box-shadow: 0 3px 14px #0002; }
.vdp-stage > img { display: block; width: 100%; height: 100%; }
.vdp-field { position: absolute; display: flex; flex-direction: column; border: 1px dashed #507972; background: #d5eee333; cursor: move; padding: 0; margin: 0; touch-action: none; overflow: visible; box-sizing: border-box; }
.vdp-field.active { outline: 2px solid #237969; background: #d5eee366; }
.vdp-field.sample { background: #ffffffb3; }
.vdp-field.sample.active { background: #ffffffd9; }
.vdp-field-text { display: block; flex: 0 0 auto; overflow: hidden; width: 100%; max-height: 100%; white-space: pre-wrap; pointer-events: none; }
.vdp-handle { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border: 1px solid white; background: #237969; cursor: se-resize; }
.vdp-customer-preview img { display: block; width: 100%; max-width: none; }
.vdp-customer-preview:has(img[hidden]) { display:none; }
.vdp-field-error { color: #9b2828; }
.vdp-customer-field, .vdp-json-setup { display: grid; gap: .6rem; min-width: 0; }
.vdp-customer-field > label { font-weight: 600; }
.vdp-customer-field [data-cascade-parents], .vdp-json-examples[open] { display: grid; gap: .7rem; }
.vdp-customer-field [data-cascade-parents] label, .vdp-search-label { display: grid; gap: .35rem; font-size: .85rem; }
.vdp-json-setup textarea { width: 100%; min-width: 0; height: auto; min-height: 160px; font: .76rem/1.55 ui-monospace, Consolas, monospace; tab-size: 2; resize: vertical; }
.vdp-json-setup textarea[data-json-definition] { min-height: 220px; }
.vdp-json-setup textarea[readonly] { background: var(--paper, #f8f7f4); }
.vdp-json-setup summary { cursor: pointer; font-size: .82rem; color: var(--teal-dark); font-weight: 600; }
.vdp-json-setup details > :not(summary) { margin-top: .7rem; }
.vdp-json-setup .field-row { flex-wrap: wrap; }
.vdp-json-setup .field-row button { min-width: 0; font-size: .78rem; padding: .65rem; }
.vdp-json-errors { margin: 0; padding-left: 1.2rem; color: #9b2828; font-size: .78rem; overflow-wrap: anywhere; }
.vdp-json-preview { padding: .8rem; background: var(--paper, #f8f7f4); border: 1px solid var(--line); border-radius: 8px; max-height: 260px; overflow: auto; }
.vdp-json-preview p { display: grid; gap: .2rem; padding-top: .7rem; }
.vdp-json-preview span { white-space: pre-wrap; }
.vdp-json-setup dl { margin: .7rem 0 0; font-size: .76rem; overflow-wrap: anywhere; }
.vdp-json-setup dd { margin: 0 0 .6rem; font-family: ui-monospace, Consolas, monospace; }
[data-json-status][data-error="true"] { color: #9b2828; }
.vdp-preview-launch { display: grid; gap: .6rem; padding: .8rem; background: var(--paper, #f8f7f4); border: 1px solid var(--line); border-radius: 8px; }
.vdp-final-rules { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.vdp-final-rules summary { cursor: pointer; font-weight: 600; }
.vdp-final-rules > :not(summary) { margin-top: 1rem; }
.vdp-final-rules label { display: grid; gap: .4rem; }
.vdp-final-rules textarea { width: 100%; min-height: 180px; resize: vertical; font: .8rem/1.6 ui-monospace, Consolas, monospace; }
.vdp-final-rules > label textarea { min-height: 230px; }
.vdp-final-rules dl { display: grid; grid-template-columns: minmax(100px, .4fr) minmax(0, 1fr); gap: .35rem 1rem; font-size: .8rem; overflow-wrap: anywhere; }
.vdp-final-rules dd { margin: 0; font-family: ui-monospace, Consolas, monospace; }
.vdp-final-rules p { color: var(--muted); font-size: .85rem; }
[data-rule-status][data-error="true"], [data-customer-preview-status][data-error="true"] { color: #9b2828; }
.vdp-form-test { width: min(1040px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); overflow: auto; }
.vdp-form-test::backdrop { background: #18181577; backdrop-filter: blur(4px); }
.vdp-form-test > header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.vdp-form-test h2 { margin: 0 0 .3rem; font-size: 1.4rem; }
.vdp-form-test h3 { margin: 0 0 1rem; font-size: 1rem; }
.vdp-form-test p { margin: .4rem 0 1rem; font-size: .85rem; color: var(--muted); }
.vdp-form-test-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.vdp-form-test-grid > section { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.vdp-form-test-grid > section:last-child { background: var(--paper, #f8f7f4); }
.vdp-form-test dl { margin: 0; }
.vdp-form-test dt { font-size: .78rem; font-weight: 600; }
.vdp-form-test dd { margin: .25rem 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.vdp-form-test details { border-top: 1px solid var(--line); padding-top: 1rem; }
.vdp-form-test summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.vdp-form-test [data-customer-preview-trace] { padding-top: 1rem; overflow-wrap: anywhere; font-size: .8rem; }
.vdp-form-test > footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .vdp-form-test { padding: 1rem; } .vdp-form-test-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .vdp-form-test > footer button { flex: 1 1 100%; white-space: normal; } }
/* Upload setup: two files and one quiet, visual format check. */
.vdp-setup-panel:has([data-format-panel]:not([hidden])) { grid-template-columns:repeat(2, minmax(0, 1fr)) minmax(230px, .85fr); align-items:stretch; }
.vdp-file-state { display:inline-flex; align-items:center; gap:.4rem; width:fit-content; margin-top:.75rem; padding:.3rem .55rem; border-radius:6px; background:#f0efeb; color:#5d5b53; font-size:.76rem; font-weight:550; }
.vdp-file-state[data-state="complete"] { color:#245842; background:#eaf3ed; }
.vdp-file-state[data-state="complete"]::before { content:"✓"; font-weight:700; }
.vdp-file-state[data-state="warning"] { color:#81501d; background:#fff1db; }
.vdp-format-panel h2 { margin:0 0 .4rem; font-size:1rem; }
.vdp-format-panel [data-product-format] { display:block; margin:0; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.vdp-format-overview { display:flex; align-items:center; gap:1rem; margin:.85rem 0; }
.vdp-format-overview .vdp-trim-preview { flex:0 0 76px; }
.vdp-format-legend { display:grid; gap:.4rem; font-size:.7rem; color:var(--muted); }
.vdp-format-legend > span { display:flex; gap:.35rem; align-items:center; }
.vdp-format-legend > span::before { content:""; width:15px; height:10px; border:2px solid #00778f; flex:0 0 15px; }
.vdp-format-legend .legend-trim::before { border:2px dashed #986224; }
.vdp-format-legend .legend-bleed::before { border:1px dotted #6d746f; }
.vdp-format-panel small { display:block; font-size:.75rem; color:var(--muted); }
.vdp-format-actions { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:.8rem; margin-top:.4rem; }
.vdp-format-actions button, .vdp-format-actions summary { font-size:.75rem; min-height:36px; padding:.4rem 0; cursor:pointer; }
.vdp-format-actions details { font-size:.75rem; color:var(--muted); }
.vdp-format-actions ul { padding-left:1rem; margin:.25rem 0; }
.vdp-format-panel [data-warning="true"] { color:#81501d; }
.vdp-trim-preview { position:relative; width:100%; overflow:hidden; border:1px solid var(--line); background:white; }
.vdp-trim-preview img { display:block; width:100%; }
.vdp-trim-boundary, .vdp-bleed-boundary, .vdp-pdf-trim-boundary { position:absolute; pointer-events:none; box-sizing:border-box; }
.vdp-trim-boundary { border:1px solid #00778f; z-index:2; }
.vdp-pdf-trim-boundary { border:3px dashed #986224; z-index:1; }
.vdp-bleed-boundary { border:1px dotted #6d746f; }
.vdp-format-dialog { width:min(760px, calc(100vw - 2rem)); max-height:90dvh; overflow:auto; padding:1.5rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); }
.vdp-format-dialog::backdrop { background:#18181566; backdrop-filter:blur(5px); }
.vdp-format-dialog > header, .vdp-format-dialog > footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.vdp-format-dialog h2 { margin:0; font-size:1.2rem; }
.vdp-format-dialog p, .vdp-format-dialog small { font-size:.85rem; }
.vdp-format-controls { display:grid; grid-template-columns:minmax(0, 1fr) 180px; gap:1.5rem; align-items:start; }
.vdp-format-controls .field-row { margin:.75rem 0; }
.vdp-format-controls small { display:block; margin-bottom:1rem; }
.vdp-format-controls .checkbox-label { display:flex; align-items:center; gap:.65rem; min-height:44px; }
.vdp-format-controls input[type="checkbox"] { width:1.15rem; height:1.15rem; min-height:1.15rem; margin:0; flex:0 0 1.15rem; }
.vdp-format-dialog > footer { justify-content:flex-end; margin-top:1rem; }
.vdp-format-dialog [data-error="true"] { color:#9b2828; }
.vdp-field-picker h3 { font-size:.85rem; margin:.5rem 0; }
.vdp-field-picker p { margin:.3rem 0 .7rem; font-size:.75rem; color:var(--muted); }
.vdp-field-roster { padding:0; margin:0 0 .6rem; list-style:none; max-height:216px; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.vdp-field-roster:empty { display:none; }
.vdp-field-roster li { display:flex; align-items:stretch; min-height:44px; border-bottom:1px solid var(--line); }
.vdp-field-roster li:last-child { border-bottom:0; }
.vdp-field-roster li[data-selected="true"] { background:#eaf7fa; box-shadow:inset 3px 0 #00778f; }
.vdp-field-roster li[data-dragging="true"] { background:#d7f2fa; }
.vdp-field-roster button { border:0; border-radius:0; background:transparent; color:var(--ink); min-height:44px; padding:.5rem .65rem; box-shadow:none; }
.vdp-field-roster button:focus-visible { outline:2px solid #00778f; outline-offset:-3px; }
.vdp-field-roster button[data-select-field] { display:flex; flex:1; align-items:center; gap:.6rem; justify-content:space-between; text-align:left; min-width:0; font-size:.82rem; }
.vdp-field-roster button span { overflow-wrap:anywhere; }
.vdp-field-roster small { white-space:nowrap; color:var(--muted); font-size:.7rem; font-weight:400; }
.vdp-field-roster .vdp-field-handle { flex:0 0 36px; width:36px; cursor:grab; touch-action:none; color:var(--muted); font-size:1.2rem; padding:.3rem; }
.vdp-print-format { margin:.7rem 0 0; border-top:1px solid var(--line); padding-top:.5rem; }
.vdp-print-format summary { font-size:.85rem; font-weight:600; min-height:36px; cursor:pointer; }
.vdp-print-format input:disabled { opacity:.6; }
.vdp-print-example { padding:.65rem; border-radius:6px; background:var(--paper); }
.vdp-print-example strong, .vdp-print-example output { display:block; }
.vdp-print-example output { white-space:pre-wrap; overflow-wrap:anywhere; padding-top:.25rem; }
[data-proof-state] { color:#81501d; }
[data-proof-state][data-ready="true"] { color:#245842; }
@media (max-width:1100px) {
  .vdp-setup-panel:has([data-format-panel]:not([hidden])) { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vdp-format-panel { grid-column:1 / -1; }
  .vdp-format-panel > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:1.5rem; }
  .vdp-format-panel .vdp-format-overview { grid-column:2; grid-row:1 / span 4; margin:0; }
}
@media (max-width:700px) {
  .vdp-setup-panel:has([data-format-panel]:not([hidden])) { grid-template-columns:minmax(0,1fr); }
  .vdp-format-panel { grid-column:auto; }
  .vdp-format-panel > div { display:block; }
  .vdp-format-controls { grid-template-columns:minmax(0,1fr); }
  .vdp-format-dialog .vdp-trim-preview { width:150px; justify-self:center; }
  .vdp-format-dialog { padding:1rem; }
}
.config-layout:has([data-personalisation]) { grid-template-columns: 1fr; gap: 1.5rem; }
.config-layout:has([data-personalisation]) .config-intro { position: static; }
.vdp-product-form { display:grid; grid-template-columns:minmax(0, 1fr) 260px; grid-template-areas:"intro intro" "workspace order"; align-items:start; gap:1.5rem 2rem; }
.vdp-product-intro { grid-area:intro; min-width:0; }
.vdp-product-intro h1 { margin:.4rem 0 .75rem; font-size:clamp(2rem, 3vw, 3rem); }
.vdp-product-intro .lead { margin:0; max-width:65ch; }
.vdp-order-panel { grid-area:order; position:sticky; top:1.5rem; display:grid; gap:1.1rem; padding:1.25rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); min-width:0; }
.vdp-order-panel h2 { margin:0; font-size:1rem; }
.vdp-order-specs { margin:0; display:grid; gap:.65rem; }
.vdp-order-specs > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem .75rem; font-size:.8rem; }
.vdp-order-specs dt { color:var(--muted); }
.vdp-order-specs dd { margin:0; font-weight:600; }
.vdp-order-panel .price-panel { grid-template-columns:minmax(0, 1fr); }
.vdp-order-panel .price-panel > div { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; padding:.65rem .75rem; }
.vdp-order-panel .price-panel strong { font-size:.9rem; }
.vdp-order-panel #price-preview:empty { display:none; }
.vdp-product-workspace { grid-area:workspace; min-width:0; padding:1.25rem; }
.vdp-personalise-heading { margin:0 0 1.25rem; font-size:1.1rem; }
.vdp-product-purchase { display:flex; justify-content:flex-end; border-top:1px solid var(--line); padding-top:1.25rem; margin-top:1.25rem; }
.vdp-product-form .vdp-personalise-layout { grid-template-columns:minmax(200px, .8fr) minmax(0, 1fr); gap:1.5rem; }
.vdp-product-form .vdp-customer-preview { max-height:65vh; }
.vdp-preview-panel { min-width:0; }
.vdp-customer-toolbar { position:sticky; bottom:1rem; z-index:2; margin:.75rem 0 0; padding:.75rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 3px 12px #0001; }
@media (max-width:760px) { .vdp-customer-toolbar { bottom:calc(66px + .75rem); } }
@media (max-width:1150px) {
  .vdp-product-form { grid-template-columns:minmax(0, 1fr); grid-template-areas:"intro" "order" "workspace"; }
  .vdp-order-panel { position:static; grid-template-columns:minmax(0, 1fr) minmax(150px, .7fr); gap:.75rem 1.5rem; }
  .vdp-order-panel h2 { grid-column:1 / -1; }
  .vdp-order-panel #price-preview { grid-column:1 / -1; }
  .vdp-order-panel .price-panel { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:700px) {
  .vdp-product-form .vdp-personalise-layout { grid-template-columns:minmax(0, 1fr); }
  .vdp-order-panel { grid-template-columns:minmax(0, 1fr); padding:1rem; }
  .vdp-product-workspace { padding:1rem; }
  .vdp-order-panel .price-panel { grid-template-columns:minmax(0, 1fr); }
  .vdp-product-purchase button { width:100%; }
}
.vdp-personalise-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
[data-vdp-status][data-error="true"] { color: #9b2828; }
[data-variable-editor] [hidden], [data-personalisation] [hidden] { display: none !important; }
@media (max-width: 1050px) { .vdp-editor-layout { grid-template-columns: minmax(0, 1fr); } .vdp-editor-layout > .vdp-properties { grid-column: 1; grid-row: 2; } .vdp-editor-layout > .vdp-suggestions { grid-row: 3; } .vdp-editor-layout > .vdp-canvas { grid-column: 1; grid-row: 1; position: static; } [data-inspector-panel] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; } #vdp-input-panel { grid-template-columns: minmax(0, 1fr); } .vdp-scroll { max-height: 50vh; } }
@media (max-width: 900px) { .vdp-personalise-layout, .vdp-setup-panel, .vdp-font-row { grid-template-columns: minmax(0, 1fr); } .vdp-actions { position: static; } }
@media (max-width: 600px) { [data-inspector-panel] { grid-template-columns: minmax(0, 1fr); gap: 0; } .vdp-properties { padding: 1rem; } .vdp-toolbar { gap: .6rem; } .vdp-toolbar label { flex: 1; min-width: 85px; } .vdp-toolbar .vdp-text-toggle { flex-basis: 100%; } .vdp-scroll { padding: .75rem; max-height: 42vh; } }