/* ── VlagOnline Editor – Wizard stylesheet ──────────────────────────────────── */

/* ── Body scroll lock ───────────────────────────────────────────────────────── */
html.vlo-no-scroll { overflow: hidden; }

/* ── Tooltips ───────────────────────────────────────────────────────────────── */
/* CSS-only i.p.v. het native title-attribuut: dat toont pas na een browser-
   eigen vertraging van ~1s. Deze verschijnt direct bij hover/focus. Standaard
   boven het element; .vlo-tooltip--below voor elementen waar "boven" buiten
   de modal zou vallen (bv. de sluitknop bovenin de header). */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate( -50%, -6px );
    max-width: 220px;
    width: max-content;
    white-space: normal;
    text-align: left;
    background: #1d2327;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 5px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
.vlo-tooltip--below::after {
    bottom: auto;
    top: 100%;
    transform: translate( -50%, 6px );
}

/* ── Productpagina: Ontwerpen-knop ──────────────────────────────────────────── */
.vlo-product-editor-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.vlo-ontwerpen-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #009fe3;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.vlo-ontwerpen-btn:hover { background: #007bb5; }
.vlo-design-status {
    font-size: 0.875rem;
    color: #2d6a4f;
    font-weight: 600;
}

/* ── Overlay ────────────────────────────────────────────────────────────────── */
.vlo-wizard-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.6);
}
.vlo-wizard-overlay.vlo-overlay--visible {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vlo-wizard-inner {
    display: flex;
    flex-direction: column;
    width: 95vw;
    height: 95vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.vlo-wizard-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    height: 60px;
    background: #009fe3;
    color: #fff;
    border-bottom: 2px solid #007bb5;
}
.vlo-wizard-brand {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
}
.vlo-wizard-steps {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
    overflow: hidden;
}
.vlo-step-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    transition: color 0.2s;
}
.vlo-step-indicator.vlo-step--active  { color: #fff; font-weight: 700; }
.vlo-step-indicator.vlo-step--done    { color: rgba(255,255,255,0.85); }
.vlo-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-weight: 700;
    transition: background 0.2s, border-color 0.2s;
}
.vlo-step--active  .vlo-step-num { background: #007bb5; border-color: #007bb5; color: #fff; }
.vlo-step--done    .vlo-step-num { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); }
.vlo-step-connector {
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
    margin: 0 4px;
    transition: background 0.2s;
}
.vlo-step-connector.vlo-connector--done { background: rgba(255,255,255,0.7); }
.vlo-wizard-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    margin: 0 0 0 auto;
}
.vlo-wizard-close:hover { color: #fff; }

/* ── Body (scrollable steps 1/2/4) ──────────────────────────────────────────── */
.vlo-wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}
/* Canvas step: no scroll, flex column */
.vlo-wizard-body--canvas {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.vlo-btn {
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.vlo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vlo-btn--secondary { background: #e8e8e8; color: #333; border: 1px solid #bbb; }
.vlo-btn--secondary:hover:not(:disabled) { background: #d4d4d4; }
.vlo-btn--primary { background: #009fe3; color: #fff; }
.vlo-btn--primary:hover:not(:disabled)   { background: #007bb5; }
.vlo-btn--success { background: #007bb5; color: #fff; }
.vlo-btn--success:hover:not(:disabled)   { background: #007bb5; }

/* ── Shared step content ────────────────────────────────────────────────────── */
.vlo-step-section { margin-bottom: 36px; }
.vlo-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #009fe3;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bb5;
    display: inline-block;
}

/* ── Tiles (step 1) ──────────────────────────────────────────────────────────── */
.vlo-tile-grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 12px;
}
.vlo-tile-grid--small { grid-template-columns: repeat( 5, 1fr ); }
.vlo-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-align: center;
}
.vlo-tile:hover { border-color: #009fe3; background: #f0f4f8; }
.vlo-tile--selected {
    border-color: #007bb5;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(230,57,70,0.15);
}
.vlo-tile-icon  { font-size: 1.6rem; }
.vlo-tile-label { font-size: 0.82rem; font-weight: 600; color: #333; }
.vlo-tile--formaat .vlo-tile-label { font-size: 0.78rem; }

/* ── Material cards (step 2) ────────────────────────────────────────────────── */
.vlo-card-list { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.vlo-material-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 20px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
    width: 100%;
}
.vlo-material-card:hover { border-color: #009fe3; background: #f0f4f8; }
.vlo-material-card.vlo-card--selected {
    border-color: #007bb5;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(230,57,70,0.15);
}
.vlo-card-title { font-size: 1rem; color: #009fe3; }
.vlo-card-desc  { font-size: 0.82rem; color: #666; }
.vlo-option-fixed {
    display: inline-block;
    margin: 0;
    padding: 10px 16px;
    background: #f0f4f8;
    border: 1px solid #d0dce6;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
}

/* ── Richting cards (step 2) ────────────────────────────────────────────────── */
.vlo-richting-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.vlo-richting-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 32px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.vlo-richting-card:hover { border-color: #009fe3; background: #f0f4f8; }
.vlo-richting-card.vlo-card--selected {
    border-color: #007bb5;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(230,57,70,0.15);
}
.vlo-richting-visual {
    display: flex;
    align-items: stretch;
    height: 64px;
    gap: 0;
}
.vlo-richting-pole {
    width: 10px;
    background: #555;
    border-radius: 2px;
}
.vlo-richting-flag {
    width: 52px;
    height: 64px;
    background: #007bb5;
    border-radius: 0 4px 4px 0;
}
.vlo-richting-links .vlo-richting-flag  { border-radius: 4px 0 0 4px; }
.vlo-richting-label { font-size: 0.9rem; font-weight: 600; color: #333; }

/* ── Canvas step ────────────────────────────────────────────────────────────── */
.vlo-canvas-toolbar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    background: #f4f4f4;
    border-bottom: 1px solid #ddd;
    padding: 6px 12px;
    min-height: 42px;
}
/* #vlo-wizard-body heeft overflow:hidden en de toolbar zit daar direct tegen-
   aan de bovenrand (vlak onder de header). Een tooltip die (zoals standaard)
   omhoog opent, wordt daardoor op die rand afgekapt — wat oogt alsof hij
   achter de header verdwijnt. Laat toolbar-tooltips daarom altijd naar
   beneden openen, over het canvas heen, net als .vlo-tooltip--below. */
.vlo-canvas-toolbar [data-tooltip]::after {
    bottom: auto;
    top: 100%;
    transform: translate( -50%, 6px );
}
/* Hint-tekst en transform-tools staan in dezelfde grid-cel gestapeld en worden
   met visibility (i.p.v. display) getoggeld, zodat de celhoogte altijd gelijk
   is aan de hoogste van de twee en de toolbar niet van hoogte verspringt
   zodra een laag wordt (de)selecteerd. */
.vlo-toolbar-toggle {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}
.vlo-toolbar-toggle > * {
    grid-area: 1 / 1;
    align-self: center;
}
.vlo-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.vlo-toolbar-row * {
    margin: unset;
}
/* Undo/redo staan los van de laag-afhankelijke tools (die met visibility
   in/uit geschakeld worden) — altijd zichtbaar, en rechts uitgelijnd in
   dezelfde toolbar-rij i.p.v. erboven. */
.vlo-toolbar-row--history { flex: 0 0 auto; margin-left: auto; }
#vlo-text-tools {
    display: none;
    align-items: center;
    gap: 6px;
}
.vlo-toolbar-hint {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
    padding: 2px 0;
}
/* Zwevend paneel voor de schaduw-instellingen, geopend via het tandwiel naast
   de schaduw-knop. Linksboven over het canvas i.p.v. onder de toolbar: die
   hoek zit het werkbare deel van het canvas vrijwel nooit in de weg, en
   voorkomt dat het paneel over de sidebar-knoppen rechts heen valt. */
.vlo-shadow-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 230px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.18 );
    z-index: 25;
}
.vlo-shadow-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.vlo-shadow-panel-row + .vlo-shadow-panel-row { margin-top: 8px; }
.vlo-shadow-panel .vlo-toolbar-label { gap: 6px; }
.vlo-shadow-panel .vlo-range { width: 76px; }
.vlo-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #ccc;
    margin: 0 2px;
    vertical-align: middle;
}
/* Gedeelde basisstijl voor alle interactieve toolbar-controls (knoppen,
   dropdown, tekstvelden, kleurkiezer): zelfde hoogte, rand en hoekjes, zodat
   de balk niet ongelijk oogt door per element net iets andere afmetingen.
   Gescopet onder #vlo-wizard-overlay (i.p.v. kale .vlo-*-classes): Flatsome's
   thema-CSS heeft o.a. input[type=text],select{width:100%; height:2.507em; ...}
   met dezelfde specificiteit (0,1,0) per selector — bij gelijke specificiteit
   wint de stylesheet die als laatst laadt, en dat bleek soms de thema-CSS te
   zijn. Een ID-prefix maakt onze regels (1,1,0) en laat ze altijd winnen,
   ongeacht de laadvolgorde. */
#vlo-wizard-overlay .vlo-toolbar-btn,
#vlo-wizard-overlay .vlo-select,
#vlo-wizard-overlay .vlo-input,
#vlo-wizard-overlay .vlo-color {
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: #333;
    font-size: 0.82rem;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
#vlo-wizard-overlay .vlo-toolbar-btn:hover:not(:disabled),
#vlo-wizard-overlay .vlo-select:hover,
#vlo-wizard-overlay .vlo-input:hover,
#vlo-wizard-overlay .vlo-color:hover {
    border-color: #009fe3;
}
#vlo-wizard-overlay .vlo-toolbar-btn:focus-visible,
#vlo-wizard-overlay .vlo-select:focus-visible,
#vlo-wizard-overlay .vlo-input:focus-visible {
    outline: none;
    border-color: #009fe3;
    box-shadow: 0 0 0 2px rgba( 0, 159, 227, 0.25 );
}
.vlo-toolbar-btn {
    padding: 0 10px;
    cursor: pointer;
    font-weight: 600;
}
.vlo-toolbar-btn:hover:not(:disabled) { background: #f0f7fc; }
.vlo-toolbar-btn:disabled { opacity: 0.35; cursor: default; }
.vlo-toolbar-btn svg { display: block; vertical-align: middle; }
.vlo-toolbar-btn--active              { background: #009fe3; color: #fff; border-color: #009fe3; }
.vlo-toolbar-btn--active:hover        { background: #007bb5; border-color: #007bb5; }
.vlo-btn-bold        { font-weight: 700; }
.vlo-btn-italic      { font-style: italic; }
.vlo-btn-underline   { text-decoration: underline; }
.vlo-btn-shadow-icon { text-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.6 ); }
.vlo-btn-danger      { border-color: #e6b8b8; color: #c0392b; }
.vlo-btn-danger:hover { background: #fff5f5; border-color: #c0392b; }
.vlo-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #444;
    white-space: nowrap;
}
#vlo-wizard-overlay .vlo-select {
    width: 140px;
    max-width: none;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
#vlo-wizard-overlay .vlo-input {
    padding: 0 8px;
}
#vlo-wizard-overlay .vlo-input--xs { width: 56px; max-width: none; text-align: center; }
/* Invoerveld met vaste eenheid (%, °) zichtbaar ín het veld i.p.v. als losse
   tekst ernaast — scheelt drukte in de toolbar. De rand/hoogte/achtergrond
   die normaal op .vlo-input zit, staat hier op de wrapper; het <input> erin
   is kaal (geen eigen rand/breedte), zodat cijfer en eenheid als losse
   flex-items naast elkaar staan i.p.v. over elkaar heen te vallen. */
.vlo-input-unit {
    display: inline-flex;
    align-items: center;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    padding: 0 8px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.vlo-input-unit:hover { border-color: #009fe3; }
.vlo-input-unit:focus-within {
    border-color: #009fe3;
    box-shadow: 0 0 0 2px rgba( 0, 159, 227, 0.25 );
}
#vlo-wizard-overlay .vlo-input-unit-field {
    width: 28px;
    max-width: none;
    height: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    text-align: right;
    font-size: 0.82rem;
    color: #333;
}
#vlo-wizard-overlay .vlo-input-unit-field:focus {
    outline: none;
    box-shadow: none;
}
/* Breedte/hoogte/dekking staan met max. 2 decimalen (bv. "97,43"), iets breder
   dan een kaal heel getal. */
#vlo-wizard-overlay .vlo-input-unit-field--dec { width: 40px; }
.vlo-input-unit-suffix {
    font-size: 0.78rem;
    color: #777;
    margin-left: 2px;
    pointer-events: none;
}
.vlo-range {
    width: 80px;
    height: 30px;
    accent-color: #009fe3;
    margin: unset;
    cursor: pointer;
}
.vlo-color {
    width: 30px;
    padding: 3px;
    cursor: pointer;
    background: none;
}

/* Canvas body: main area + sidebar */
.vlo-canvas-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.vlo-canvas-area {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #b0b0b0;
}
.vlo-canvas-area .canvas-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.vlo-canvas-area canvas { display: block; }
/* Los HTML-element i.p.v. op het Fabric-canvas getekend, zodat het altijd
   bovenop het selectiekader/de handles ligt (die Fabric op een eigen
   contextTop-canvas boven het hoofd-canvas tekent). */
.vlo-layer-dpi-badge {
    display: none;
    position: absolute;
    z-index: 5;
    transform: translateY(-100%);
    font: bold 11px Arial, sans-serif;
    color: #fff;
    background: rgba(210, 80, 0, 0.90);
    padding: 4px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.vlo-canvas-sidebar {
    flex: 0 0 240px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    background: #fff;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vlo-sidebar-btn {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fafafa;
    color: #333;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    margin: unset;
}
.vlo-sidebar-btn:hover { background: #f0f0f0; }
.vlo-sidebar-hr    { border: none; border-top: 1px solid #eee; margin: 4px 0; }
.vlo-bg-color-row  { width: 100%; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: #333; }
.vlo-sidebar-title { font-size: 0.8rem; font-weight: 700; color: #555; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.vlo-sidebar-submit { align-self: flex-end; }
/* Alleen de eerste van het knoppenpaar (preview) absorbeert de vrije ruimte
   in de flex-kolom, zodat beide knoppen samen onderaan blijven staan. Met
   margin-top:auto op allebei verdeelt flexbox de vrije ruimte over de twee
   auto-marges, waardoor er juist een gat tussen de knoppen ontstaat i.p.v.
   dat ze samen onderaan blijven. */
#vlo-preview-truesize-btn { margin-top: auto; font-size: .8rem; }

/* Layer list */
.vlo-layer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.vlo-layer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background: #fafafa;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.1s;
}
.vlo-layer-item:hover { background: #f0f4f8; }
.vlo-layer--active    { background: #eef2ff; border-color: #009fe3; }
.vlo-layer-handle { color: #aaa; font-size: 0.9rem; flex-shrink: 0; cursor: grab; }
.vlo-layer-handle:active { cursor: grabbing; }
/* .vlo-canvas-sidebar heeft overflow-y:auto, waardoor overflow-x ook impliciet
   niet-'visible' wordt (CSS-spec) en er dus geclipt wordt. De standaard
   gecentreerde tooltip-positie steekt bij dit handvat (helemaal links in de
   sidebar) links uit tot over het canvas en werd daardoor afgekapt. Links
   uitlijnen houdt de tooltip binnen de onafgeknipte breedte van de sidebar. */
.vlo-layer-handle[data-tooltip]::after {
    left: 0;
    transform: translate( 0, -6px );
}
.vlo-layer--dragging   { opacity: 0.4; }
.vlo-layer--drop-above { border-top: 2px solid #009fe3; }
.vlo-layer--drop-below { border-bottom: 2px solid #009fe3; }
.vlo-layer-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.vlo-layer-warn   {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #d25000;
    padding: 0 2px;
}
.vlo-layer-del    {
    flex-shrink: 0;
    padding: 0 5px;
    font-size: 0.9rem;
    border: none;
    background: none;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    margin: unset;
}
.vlo-layer-del:hover { color: #007bb5; }
.vlo-scale-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}
.vlo-scale-down { background: #d4edda; color: #1a6630; }
.vlo-scale-up   { background: #fff3cd; color: #856404; }

/* ── Step 4: Preview ────────────────────────────────────────────────────────── */
.vlo-preview-wrap {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.vlo-preview-meta { flex: 0 0 220px; }
.vlo-meta-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 0.9rem;
    margin: 0;
}
.vlo-meta-list dt { font-weight: 700; color: #555; }
.vlo-meta-list dd { color: #222; margin: 0; }
.vlo-preview-img-wrap { flex: 1; min-width: 200px; }
.vlo-preview-img {
    max-width: 100%;
    max-height: 60vh;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: block;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 700px ) {
    .vlo-wizard-header { gap: 8px; padding: 0 12px; }
    .vlo-step-label    { display: none; }
    .vlo-wizard-body   { padding: 16px; }
    .vlo-tile-grid     { grid-template-columns: repeat( 2, 1fr ); }
    .vlo-tile-grid--small { grid-template-columns: repeat( 3, 1fr ); }
    .vlo-canvas-sidebar { flex: 0 0 160px; padding: 8px; }
    .vlo-toolbar-row   { gap: 4px; }
    .vlo-range         { width: 60px; }
}