/**
 * BildLicht Lampe — Guided editor design system
 *
 * Loaded only with templates/guided-editor.php (summary-mode products).
 * Every rule is scoped to .bildlicht-guided so the classic editor template
 * is unaffected. Loads after editor.css (handle dependency) so overrides
 * win by cascade order, not !important.
 *
 * Steps are switched by the controller (guided-editor.js) via the
 * data-bl-active attribute. Step 2 ("Anordnen") is a single canvas-primary
 * workspace: arrange, reorder, zoom and divider editing are always available.
 * Elements are only shown/hidden, never moved — editor.js / preview.js
 * keep working on the same DOM.
 */

/* === 1. Manrope (self-hosted, GDPR-safe) ================================== */

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/manrope-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/manrope-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/manrope-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* === 2. Scoped tokens ====================================================== */

.bildlicht-guided {
    --bl-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bl-radius-lg: 20px;
    --bl-shadow-card: 0 1px 2px rgba(31, 41, 51, 0.04), 0 10px 36px rgba(31, 41, 51, 0.08);
    --bl-shadow-card-hover: 0 2px 4px rgba(31, 41, 51, 0.05), 0 16px 44px rgba(31, 41, 51, 0.12);
    --bl-accent: var(--bl-primary, #95857d);
    --bl-accent-soft: var(--bl-primary-light, rgba(149, 133, 125, 0.12));
    --bl-success: #2f9e62;
    --bl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* === 3. Shell =============================================================== */

.bildlicht-editor-container.bildlicht-guided {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 1280px;
    margin: 0 auto;
    font-family: var(--bl-font-display);
    color: var(--bl-text, #1f2933);
    position: relative;
}

/* Visually hidden — keeps the #bildlicht-editor anchor target + a11y heading */
.bl-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.bildlicht-guided .bl-wizard-header {
    margin: 0 auto 18px;
}

/* === 4. Stepper ============================================================ */

.bildlicht-guided ol.bl-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.bildlicht-guided .bl-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 1;
    max-width: 170px;
    margin: 0;
    padding: 0 8px;
    background: none;
    cursor: default;
}

/* connector line between circles */
.bildlicht-guided .bl-stepper-item + .bl-stepper-item::before {
    content: "";
    position: absolute;
    top: 16px;
    right: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    background: rgba(31, 41, 51, 0.1);
    border-radius: 1px;
}

.bildlicht-guided .bl-stepper-item.is-done + .bl-stepper-item::before,
.bildlicht-guided .bl-stepper-item.is-done.is-active + .bl-stepper-item::before {
    background: var(--bl-accent);
}

.bildlicht-guided .bl-stepper-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
    color: var(--bl-text-muted, #6b7280);
    border: 2px solid rgba(31, 41, 51, 0.14);
    transition: all 0.3s var(--bl-ease);
    position: relative;
    z-index: 1;
}

.bildlicht-guided .bl-stepper-item.is-active .bl-stepper-dot {
    border-color: var(--bl-accent);
    color: var(--bl-accent);
    box-shadow: 0 0 0 4px var(--bl-accent-soft);
}

.bildlicht-guided .bl-stepper-item.is-done .bl-stepper-dot {
    background: var(--bl-accent);
    border-color: var(--bl-accent);
    color: #fff;
}

/* check mark replaces the number on completed steps */
.bildlicht-guided .bl-stepper-item.is-done .bl-stepper-num {
    display: none;
}

.bildlicht-guided .bl-stepper-check {
    display: none;
    width: 14px;
    height: 14px;
}

.bildlicht-guided .bl-stepper-item.is-done .bl-stepper-check {
    display: block;
}

.bildlicht-guided .bl-stepper-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bl-text-muted, #6b7280);
    text-align: center;
    line-height: 1.3;
    transition: color 0.3s var(--bl-ease);
}

.bildlicht-guided .bl-stepper-item.is-active .bl-stepper-label,
.bildlicht-guided .bl-stepper-item.is-done .bl-stepper-label {
    color: var(--bl-text, #1f2933);
}

/* completed steps navigate back */
.bildlicht-guided .bl-stepper-item.is-done {
    cursor: pointer;
}

.bildlicht-guided .bl-stepper-item.is-done:hover .bl-stepper-dot {
    transform: scale(1.08);
}

@media (max-width: 600px) {
    .bildlicht-guided .bl-stepper-dot {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .bildlicht-guided .bl-stepper-item + .bl-stepper-item::before {
        top: 14px;
    }

    .bildlicht-guided .bl-stepper-label {
        display: none;
    }

    .bildlicht-guided .bl-stepper-item.is-active .bl-stepper-label {
        display: block;
        font-size: 12px;
    }
}

/* === 5. Layout: main + aside =============================================== */

/* The wizard often lives inside a narrow theme/Elementor column, so the
   two-column layout must respond to the wizard's OWN width, not the viewport
   (a viewport media query would force two columns into a ~530px column and
   collapse the preview). Container queries solve this. */
.bildlicht-guided {
    container-type: inline-size;
    container-name: bl-wizard;
}

/* inline-size containment also makes .bildlicht-guided the containing block for
   position:fixed descendants. The mobile 3D preview overlay is fixed and must
   cover the viewport, so drop containment while it is open. */
body.preview-overlay-active .bildlicht-guided {
    container-type: normal;
}

.bildlicht-guided .bl-wizard-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@container bl-wizard (min-width: 880px) {
    .bildlicht-guided .bl-wizard-body {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .bildlicht-guided .bl-wizard-aside {
        position: sticky;
        top: 24px;
    }
}

/* Fallback for browsers without container query support: use the viewport */
@supports not (container-type: inline-size) {
    @media (min-width: 980px) {
        .bildlicht-guided .bl-wizard-body {
            grid-template-columns: minmax(0, 1fr) 300px;
        }

        .bildlicht-guided .bl-wizard-aside {
            position: sticky;
            top: 24px;
        }
    }
}

.bildlicht-guided .bl-wizard-main {
    position: relative; /* anchor for the stashed preview panel */
    min-width: 0;
}

/* === 6. Cards =============================================================== */

.bildlicht-guided .bl-card {
    background: #fff;
    border-radius: var(--bl-radius-lg);
    box-shadow: var(--bl-shadow-card);
    padding: clamp(20px, 4vw, 36px);
}

.bildlicht-guided .bl-panel-head {
    text-align: center;
    margin-bottom: 22px;
}

.bildlicht-guided .bl-panel-head h3 {
    font-family: var(--bl-font-display);
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--bl-text, #1f2933);
    outline: none;
}

.bildlicht-guided .bl-panel-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--bl-text-muted, #6b7280);
    margin: 0;
}

/* === 7. Step visibility matrix ============================================= */

.bildlicht-guided .bl-step-panel {
    display: none;
}

/* fill-mode must NOT be 'both'/'forwards': a retained transform (even the
   identity matrix Chrome keeps after the animation) turns the panel into a
   containing block for position:fixed descendants, which breaks the
   full-screen mobile 3D preview overlay inside this panel. With 'backwards'
   the computed transform returns to 'none' once the animation finishes. */
.bildlicht-guided[data-bl-active="upload"] .bl-step-panel[data-bl-step="upload"],
.bildlicht-guided[data-bl-active="preview"] .bl-step-panel[data-bl-step="preview"],
.bildlicht-guided[data-bl-active="options"] .bl-step-panel[data-bl-step="options"],
.bildlicht-guided[data-bl-active="order"] .bl-step-panel[data-bl-step="order"] {
    display: block;
    animation: bl-step-in 0.45s var(--bl-ease) backwards;
}

/* Belt and braces: while the mobile 3D overlay is open, neutralize any
   in-flight panel animation so the fixed overlay always escapes to the
   viewport. */
body.preview-overlay-active .bildlicht-guided .bl-step-panel {
    animation: none;
    transform: none;
}

/* Stash: in step 1 the preview panel stays in the render tree (invisible,
   zero height) so the canvas measures a real width at editor.js init. */
.bildlicht-guided[data-bl-active="upload"] .bl-step-panel[data-bl-step="preview"] {
    display: block;
    animation: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

@keyframes bl-step-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Aside note groups follow the active step */
.bildlicht-guided .bl-note-group {
    display: none;
}

.bildlicht-guided[data-bl-active="upload"] .bl-note-group[data-bl-step="upload"],
.bildlicht-guided[data-bl-active="preview"] .bl-note-group[data-bl-step="preview"],
.bildlicht-guided[data-bl-active="options"] .bl-note-group[data-bl-step="options"],
.bildlicht-guided[data-bl-active="order"] .bl-note-group[data-bl-step="order"] {
    display: block;
    animation: bl-step-in 0.45s var(--bl-ease) backwards;
}

/* Submit block: one physical element, visually assigned to steps 3 + 4 */
.bildlicht-guided .bildlicht-editor-submit {
    display: none;
}

.bildlicht-guided[data-bl-active="options"] .bildlicht-editor-submit,
.bildlicht-guided[data-bl-active="order"] .bildlicht-editor-submit {
    display: block;
}

.bildlicht-guided[data-bl-active="options"] .bildlicht-editor-submit #bildlicht-form {
    display: none;
}

.bildlicht-guided[data-bl-active="order"] .bildlicht-editor-submit #bildlicht-variation-form-container {
    display: none;
}

/* === 8. Step 1: Dropzone ==================================================== */

.bildlicht-guided .bl-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    border: 2px dashed rgba(149, 133, 125, 0.45);
    border-radius: 16px;
    background: var(--bl-bg-subtle, #f9fafb);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s var(--bl-ease), background 0.25s var(--bl-ease), transform 0.25s var(--bl-ease);
}

.bildlicht-guided .bl-dropzone:hover,
.bildlicht-guided .bl-dropzone.bildlicht-drag-over {
    border-color: var(--bl-accent);
    border-style: solid;
    background: var(--bl-accent-soft);
    transform: scale(1.01);
}

.bildlicht-guided .bl-dropzone-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bl-accent-soft);
    color: var(--bl-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.bildlicht-guided .bl-dropzone-icon svg {
    width: 28px;
    height: 28px;
}

.bildlicht-guided .bl-dropzone-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bl-text, #1f2933);
}

.bildlicht-guided .bl-dropzone-sub {
    font-size: 14px;
    color: var(--bl-text-muted, #6b7280);
}

.bildlicht-guided .bl-upload-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.bildlicht-guided .bl-upload-hint {
    text-align: center;
    font-size: 13px;
    color: var(--bl-text-muted, #6b7280);
    margin: 14px 0 0;
}

/* one-shot attention pulse when "Weiter" is clicked without photos */
.bildlicht-guided .bl-dropzone.bl-pulse {
    animation: bl-dropzone-pulse 0.6s var(--bl-ease) 2;
}

@keyframes bl-dropzone-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(149, 133, 125, 0);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(149, 133, 125, 0.25);
    }
}

/* === 9. Buttons ============================================================= */

.bildlicht-guided .bl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--bl-font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s var(--bl-ease), box-shadow 0.2s var(--bl-ease), background 0.2s var(--bl-ease), opacity 0.2s var(--bl-ease);
    text-decoration: none;
}

.bildlicht-guided .bl-btn-primary {
    background: var(--bl-button-bg, #000);
    border-color: var(--bl-button-border, #000);
    color: var(--bl-button-text, #fff);
}

.bildlicht-guided .bl-btn-primary:hover:not(:disabled) {
    background: var(--bl-button-bg-hover, #222);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.bildlicht-guided .bl-btn-ghost {
    background: transparent;
    border-color: rgba(31, 41, 51, 0.18);
    color: var(--bl-text, #1f2933);
}

.bildlicht-guided .bl-btn-ghost:hover:not(:disabled) {
    border-color: var(--bl-text, #1f2933);
    background: rgba(31, 41, 51, 0.04);
}

.bildlicht-guided .bl-btn-lg {
    font-size: 16px;
    padding: 15px 34px;
}

.bildlicht-guided .bl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Android Chrome paints a translucent blue rectangle over whatever is tapped,
   and it ignores border-radius - so a pill button flashes square corners. The
   buttons answer for themselves instead: they dip a fraction on press, which
   is feedback the blue box was providing by accident. The launcher and the
   sticky bar sit outside .bildlicht-guided, hence the extra selectors. */
.bildlicht-guided .bl-btn,
.bl-launcher .bl-btn,
.bl-sticky-cta .bl-btn,
.bl-overlay-close,
.bildlicht-guided .bl-stepper-item,
.bildlicht-guided .bl-color-card {
    -webkit-tap-highlight-color: transparent;
}

.bildlicht-guided .bl-btn:active:not(:disabled),
.bl-launcher .bl-btn:active,
.bl-sticky-cta .bl-btn:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .bildlicht-guided .bl-btn:active:not(:disabled),
    .bl-launcher .bl-btn:active,
    .bl-sticky-cta .bl-btn:active {
        transform: none;
    }
}

.bildlicht-guided .bl-btn:focus-visible,
.bildlicht-guided .bl-stepper-item.is-done:focus-visible,
.bildlicht-guided .bl-color-card:focus-visible {
    outline: 2px solid var(--bl-accent);
    outline-offset: 2px;
}

/* nudge animation for blocked navigation */
.bildlicht-guided .bl-btn.bl-shake {
    animation: bl-shake 0.4s var(--bl-ease);
}

@keyframes bl-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Upload button in step 1 is editor.js's #bildlicht-upload-button — restyle
   it from the black square chip into the large primary pill */
.bildlicht-guided #bildlicht-upload-button.bl-btn {
    width: auto;
    height: auto;
    background: var(--bl-button-bg, #000);
    border: 1px solid var(--bl-button-border, #000);
    color: var(--bl-button-text, #fff);
    border-radius: 999px;
    padding: 15px 34px;
    font-size: 16px;
    font-weight: 600;
}

.bildlicht-guided #bildlicht-upload-button.bl-btn:hover {
    background: var(--bl-button-bg-hover, #222);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.bildlicht-guided #bildlicht-upload-button .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* === 10. Step 2: preview card, edit toolbar ================================= */

/* guided layout: canvas strip and preview stack vertically */
.bildlicht-guided .bildlicht-editor-main {
    display: block;
}

.bildlicht-guided .bl-preview-card .bl-panel-head {
    position: relative;
}

/* Toolbar buttons restyled as labeled soft chips */
/* Two rows in the markup (the 3D view has its own, so phones can place it on
   its own line); on wider screens they read as a single toolbar. */
.bildlicht-guided .bildlicht-canvas-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-button,
.bildlicht-guided .bl-toolbar-btn {
    width: auto;
    height: auto;
    min-height: 38px;
    background: #fff;
    border: 1px solid rgba(31, 41, 51, 0.14);
    border-radius: 999px;
    color: var(--bl-text, #1f2933);
    font-family: var(--bl-font-display);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s var(--bl-ease), background 0.2s var(--bl-ease);
}

.bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-button:hover,
.bildlicht-guided .bl-toolbar-btn:hover {
    background: var(--bl-bg-subtle, #f9fafb);
    border-color: var(--bl-text, #1f2933);
    color: var(--bl-text, #1f2933);
}

.bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: inherit;
}

/* "3D-Vorschau ansehen" toggle button — the primary pill in the toolbar
   (shown on mobile and, via the desktop block below, on desktop too) */
.bildlicht-guided #bildlicht-open-preview-mobile {
    background: var(--bl-button-bg, #000);
    border-color: var(--bl-button-border, #000);
    color: var(--bl-button-text, #fff);
}

.bildlicht-guided #bildlicht-open-preview-mobile:hover {
    background: var(--bl-button-bg-hover, #222);
    color: var(--bl-button-text, #fff);
}

/* Selected-image controls as labeled chips */
.bildlicht-guided .bildlicht-selected-image-controls-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    min-height: 0;
}

.bildlicht-guided .bildlicht-selected-image-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background: var(--bl-bg-subtle, #f9fafb);
    border-radius: 999px;
    padding: 6px 10px;
}

.bildlicht-guided .bildlicht-selected-image-controls[hidden] {
    display: none;
}

.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button {
    width: auto;
    height: auto;
    min-height: 34px;
    background: #fff;
    border: 1px solid rgba(31, 41, 51, 0.14);
    border-radius: 999px;
    color: var(--bl-text, #1f2933);
    font-family: var(--bl-font-display);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button:hover {
    border-color: var(--bl-text, #1f2933);
    background: #fff;
    color: var(--bl-text, #1f2933);
}

.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: inherit;
}

.bildlicht-guided .bl-control-label {
    display: inline;
}

/* canvas strip – square corners: the strip represents the flat lampshade
   surface, so rounding it would misrepresent the printed area */
.bildlicht-guided .bildlicht-canvas-container {
    border-radius: 0;
    overflow: hidden;
}

/* The editor's own in-canvas coverage warning is replaced by the prominent
   live status line below; keep the element (editor.js still toggles its
   hidden attribute, which the controller observes) but hide it visually. */
.bildlicht-guided #bildlicht-coverage-warning {
    display: none !important;
}

/* Live coverage status — the heart of "Anordnen & füllen" */
.bildlicht-guided .bl-coverage-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    transition: background 0.25s var(--bl-ease), color 0.25s var(--bl-ease);
}

.bildlicht-guided .bl-coverage-status[hidden] {
    display: none;
}

.bildlicht-guided .bl-coverage-status.is-ok {
    background: rgba(47, 158, 98, 0.10);
    color: #1f7a4d;
}

.bildlicht-guided .bl-coverage-status.is-ok .bl-coverage-status-text::before {
    content: "✓ ";
    font-weight: 800;
}

.bildlicht-guided .bl-coverage-status.is-ok .bl-coverage-action {
    display: none;
}

.bildlicht-guided .bl-coverage-status.is-warn {
    background: rgba(231, 111, 81, 0.10);
    color: #b0552f;
}

.bildlicht-guided .bl-coverage-status .bl-coverage-action {
    padding: 7px 16px;
    font-size: 13px;
    flex: 0 0 auto;
    color: var(--bl-text, #1f2933);
}

/* attention pulse when the gate blocks on incomplete coverage */
.bildlicht-guided .bl-coverage-status.bl-pulse {
    animation: bl-dropzone-pulse 0.6s var(--bl-ease) 2;
}

/* The 3D preview is toggled via the "3D-Vorschau ansehen" button into a
   full-screen overlay on BOTH mobile and desktop, so it never clutters the
   canvas workspace. editor.css already implements the overlay for small
   screens; the block below extends the same behaviour to desktop. Scoped to
   .bildlicht-guided so the classic editor (embedded mode) keeps its inline
   desktop preview. */
.bildlicht-guided .bildlicht-editor-preview {
    margin-top: 18px;
}

@media (min-width: 820px) and (hover: hover) and (pointer: fine) {
    /* Show the toggle button on desktop (editor.css hides it here) */
    .bildlicht-guided #bildlicht-open-preview-mobile {
        display: inline-flex;
    }

    /* Hide the inline preview by default; it only renders as an overlay */
    body:not(.preview-overlay-active) .bildlicht-guided .bildlicht-editor-preview {
        display: none;
    }

    body.preview-overlay-active .bildlicht-guided #bildlicht-open-preview-mobile {
        display: none;
    }

    body.preview-overlay-active .bildlicht-guided .bildlicht-editor-preview {
        display: block;
    }

    body.preview-overlay-active .bildlicht-guided .bildlicht-preview-container {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        margin: 0;
        padding: 0;
        /* Matches the 3D scene backdrop so the full-screen preview reads as one
           continuous studio surface instead of a canvas box on a white page. */
        background: linear-gradient(#151210, #0D0C0B);
        z-index: 10000;
        /* Square, like the rule in editor.css: rounded corners on something
           covering the whole screen only show notches of page at the edges. */
        border-radius: 0;
        overflow: hidden;
    }

    body.preview-overlay-active .bildlicht-guided #bildlicht-3d-preview {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    body.preview-overlay-active .bildlicht-guided .bildlicht-close-preview-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: var(--bl-bg, #fff);
        color: var(--bl-text, #1f2933);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        z-index: 10001;
    }

    body.preview-overlay-active {
        overflow: hidden;
    }
}

/* === 11. Step 3: color cards ================================================ */

.bildlicht-guided .bl-color-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
    max-width: 560px;
    margin: 0 auto;
}

.bildlicht-guided .bl-color-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 2px solid rgba(31, 41, 51, 0.1);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s var(--bl-ease), box-shadow 0.2s var(--bl-ease), transform 0.2s var(--bl-ease);
    font-family: var(--bl-font-display);
}

.bildlicht-guided .bl-color-card:hover {
    border-color: rgba(31, 41, 51, 0.3);
    transform: translateY(-2px);
    box-shadow: var(--bl-shadow-card);
}

.bildlicht-guided .bl-color-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.bildlicht-guided .bl-color-card-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--bl-text, #1f2933);
    padding: 10px 8px;
}

.bildlicht-guided .bl-color-card.is-selected {
    border-color: var(--bl-accent);
    box-shadow: var(--bl-shadow-card);
}

.bildlicht-guided .bl-color-card.is-selected::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--bl-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.bildlicht-guided .bl-color-card.is-unavailable {
    opacity: 0.4;
    pointer-events: none;
}

.bildlicht-guided .bl-options-hint {
    text-align: center;
    font-size: 14px;
    color: #c0392b;
    margin-top: 14px;
}

.bildlicht-guided .bl-options-hint[hidden] {
    display: none;
}

/* When color cards are active the native variation form is kept functional
   but visually removed (no display:none on the selects themselves) */
.bildlicht-guided .bildlicht-editor-submit.bl-cards-active #bildlicht-variation-form-container {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Fallback: native selects shown as a card */
.bildlicht-guided[data-bl-active="options"] .bildlicht-editor-submit:not(.bl-cards-active) {
    background: #fff;
    border-radius: var(--bl-radius-lg);
    box-shadow: var(--bl-shadow-card);
    padding: clamp(20px, 4vw, 36px);
    margin-top: 16px;
}

/* === 12. Step 4: order card ================================================= */

.bildlicht-guided[data-bl-active="order"] .bildlicht-editor-submit {
    background: #fff;
    border-radius: var(--bl-radius-lg);
    box-shadow: var(--bl-shadow-card);
    padding: clamp(24px, 4vw, 40px);
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.bildlicht-guided #bildlicht-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.bildlicht-guided #bildlicht-form .bildlicht-btn-primary {
    width: 100%;
    max-width: 420px;
    min-height: 56px;
    font-family: var(--bl-font-display);
    font-size: 17px;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 999px;
    order: 1;
}

.bildlicht-guided #bildlicht-form .bildlicht-btn-primary:disabled,
.bildlicht-guided #bildlicht-form .bildlicht-btn-primary.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bildlicht-guided .bl-reassurance {
    font-size: 13px;
    color: var(--bl-text-muted, #6b7280);
    margin: 0;
    order: 3;
}

.bildlicht-guided .bl-reassurance::before {
    content: "✓ ";
    color: var(--bl-success);
    font-weight: 700;
}

/* === 13. Aside notes ======================================================== */

.bildlicht-guided .bl-note-group {
    background: #fff;
    border-radius: var(--bl-radius-lg);
    box-shadow: var(--bl-shadow-card);
    padding: 24px;
}

.bildlicht-guided .bl-note-title {
    font-family: var(--bl-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bl-text, #1f2933);
    margin: 0 0 14px;
}

.bildlicht-guided ul.bl-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bildlicht-guided .bl-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bl-text-muted, #6b7280);
    margin: 0;
    padding: 0;
    background: none;
}

.bildlicht-guided .bl-note::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--bl-accent-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%2395857d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
}

/* === 14. Wizard navigation ================================================== */

.bildlicht-guided .bl-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.bildlicht-guided .bl-wizard-nav .bl-btn {
    min-width: 130px;
}

@media (max-width: 600px) {
    .bildlicht-guided .bl-wizard-nav {
        position: sticky;
        bottom: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-top: 1px solid rgba(31, 41, 51, 0.08);
        margin: 24px -12px 0;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    .bildlicht-guided .bl-wizard-nav .bl-btn {
        flex: 1;
        min-width: 0;
    }
}

/* === 15. Transition overlay ("Wir bereiten deine Vorschau vor") ============ */

#bl-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
    /* No backdrop-filter: the overlay is now up during the whole photo
       preparation, and iOS Safari re-blurs everything underneath it on every
       frame - including the WebGL preview. A near-opaque background does the
       same job for free. */
    background: rgba(255, 255, 255, 0.97);
    opacity: 1;
    transition: opacity 0.3s ease;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#bl-transition-overlay[hidden] {
    display: none;
}

#bl-transition-overlay.bl-overlay-leaving {
    opacity: 0;
}

#bl-transition-overlay .bl-overlay-lamp {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 16px;
    background: radial-gradient(circle at 50% 40%, #fff7e8 0%, #f5e3c4 55%, #e8d4b0 100%);
}

/* The glow is a separate layer animated on transform/opacity only, so the
   compositor keeps it moving even while JavaScript is busy decoding photos.
   The previous box-shadow animation ran on the main thread and froze exactly
   when the customer needed to see that something was happening. */
#bl-transition-overlay .bl-overlay-lamp::after {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 215, 160, 0.8) 0%, rgba(245, 215, 160, 0) 70%);
    animation: bl-glow 1.6s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes bl-glow {
    from {
        transform: scale(0.82);
        opacity: 0.45;
    }
    to {
        transform: scale(1.16);
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bl-transition-overlay .bl-overlay-lamp::after {
        animation: none;
        opacity: 0.7;
    }
}

/* === 15b. Both ways on, after the design is in the basket ================== */

/* Same full-cover treatment as the transition overlay, and for the same reason
   no backdrop-filter: it sits over the WebGL preview. Unlike that overlay the
   background is opaque - this one stays until the customer decides, and the
   wizard's headings showing through behind the choice made it noisy. */
#bl-added-panel {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #fff;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#bl-added-panel[hidden] {
    display: none;
}

#bl-added-panel .bl-added-card {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

#bl-added-panel .bl-added-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e7f5ec;
    position: relative;
}

/* Drawn rather than typed, so no font has to carry the glyph */
#bl-added-panel .bl-added-mark::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 16px;
    width: 16px;
    height: 28px;
    border: solid #1f8b4c;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}

#bl-added-panel .bl-added-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #1f2933;
}

#bl-added-panel .bl-added-sub {
    margin: 0 0 24px;
    font-size: 16px;
    color: #6b7280;
}

#bl-added-panel .bl-added-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The wizard's button styles are scoped to .bildlicht-guided and this panel is
   a sibling of it - like the transition overlay, so a transform on the wizard
   can never become the containing block for a position:fixed layer. The
   appearance is therefore restated here rather than inherited. Touch targets
   stay at 48px and the labels do not shrink: this is the last decision before
   paying. */
#bl-added-panel .bl-added-actions .bl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#bl-added-panel .bl-added-actions .bl-btn-primary {
    background: var(--bl-button-bg, #000);
    border-color: var(--bl-button-border, #000);
    color: var(--bl-button-text, #fff);
}

#bl-added-panel .bl-added-actions .bl-btn-primary:hover,
#bl-added-panel .bl-added-actions .bl-btn-primary:focus {
    background: var(--bl-button-bg-hover, #222);
    color: var(--bl-button-text, #fff);
}

#bl-added-panel .bl-added-actions .bl-btn-ghost {
    background: transparent;
    border-color: rgba(31, 41, 51, 0.28);
    color: #1f2933;
}

#bl-added-panel .bl-added-actions .bl-btn-ghost:hover,
#bl-added-panel .bl-added-actions .bl-btn-ghost:focus {
    border-color: #1f2933;
    background: rgba(31, 41, 51, 0.04);
}

#bl-added-panel .bl-added-secondary {
    margin: 18px 0 0;
    font-size: 15px;
}

#bl-added-panel .bl-added-secondary a {
    color: #6b7280;
}

#bl-transition-overlay .bl-overlay-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2933;
    margin: 0;
}

#bl-transition-overlay .bl-overlay-sub {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

/* === 16. Messages =========================================================== */

.bildlicht-guided #bildlicht-messages {
    max-width: 560px;
    margin: 0 auto 16px;
}

/* === 16b. P0/P1 refinements ================================================= */

/* Rotate hint is only useful on the canvas workspace (step 2) */
.bildlicht-guided:not([data-bl-active="preview"]) #bildlicht-rotate-hint {
    display: none !important;
}

/* Tool labels must stay visible on small screens (editor.css hides
   .bildlicht-btn-label below 480px; chips have room thanks to wrapping) */
@media (max-width: 480px) {
    .bildlicht-guided .bildlicht-canvas-controls .bildlicht-btn-label {
        display: inline;
    }

    .bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-button {
        padding: 8px 14px;
        gap: 6px;
        min-width: 0;
        width: auto;
    }
}

/* Chip text must never inherit the white button-text color from the
   legacy mobile rules in editor.css */
.bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-button:not(#bildlicht-open-preview-mobile),
.bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-button:not(#bildlicht-open-preview-mobile) .bildlicht-btn-label,
.bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-button:not(#bildlicht-open-preview-mobile) .dashicons,
.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button,
.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button .bl-control-label,
.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button .dashicons {
    color: var(--bl-text, #1f2933) !important;
}

.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button {
    background: #fff !important;
    width: auto !important;
    height: auto !important;
}

/* Caption above the flat canvas strip */
.bildlicht-guided .bl-canvas-caption {
    text-align: center;
    font-size: 13px;
    color: var(--bl-text-muted, #6b7280);
    margin: 0 0 8px;
}

/* Blocked "Weiter" keeps firing clicks so the gate can explain itself */
.bildlicht-guided .bl-btn.is-blocked {
    opacity: 0.4;
    cursor: not-allowed;
}

.bildlicht-guided .bl-btn.is-blocked:hover {
    transform: none;
    box-shadow: none;
    background: var(--bl-button-bg, #000);
}

.bildlicht-guided .bl-nav-hint {
    text-align: center;
    font-size: 13px;
    color: var(--bl-text-muted, #6b7280);
    margin: 0;
}

.bildlicht-guided .bl-nav-hint[hidden] {
    display: none;
}

/* Nav and hint live in the body grid now (mobile: after the aside tips);
   when two columns are active they stay under the main column. Harmless
   in single-column mode, so it can apply unconditionally. */
.bildlicht-guided .bl-wizard-nav,
.bildlicht-guided .bl-nav-hint {
    grid-column: 1;
}

.bildlicht-guided .bl-wizard-nav {
    margin-top: 0;
}

/* Order summary line (photos · frame color · price) */
.bildlicht-guided .bl-order-summary {
    font-size: 15px;
    font-weight: 600;
    color: var(--bl-text, #1f2933);
    margin: 0;
    order: 0;
}

.bildlicht-guided .bl-order-summary[hidden] {
    display: none;
}

/* === 17. Launcher + full-screen overlay ==================================== */

/* Inline launcher card on the product page */
.bl-launcher {
    font-family: var(--bl-font-display, 'Manrope', sans-serif);
    background: #fff;
    border-radius: var(--bl-radius-lg, 20px);
    box-shadow: var(--bl-shadow-card, 0 10px 36px rgba(31, 41, 51, 0.08));
    padding: clamp(24px, 4vw, 40px);
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.bl-launcher .bl-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bl-accent, #95857d);
    margin-bottom: 10px;
}

/* Written as `.bl-launcher .bl-launcher-title` rather than the class alone: the
   title is an <h2>, and a theme kit rule like `.elementor-kit-54 h2` (0,1,1)
   outranks a single class (0,1,0). On bildlicht.shop that made the title
   render at 28px on a phone where this rule asks for 22 - the same override
   family as the button above, just louder instead of smaller. */
.bl-launcher .bl-launcher-title {
    font-family: var(--bl-font-display, 'Manrope', sans-serif);
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--bl-text, #1f2933);
}

.bl-launcher .bl-launcher-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--bl-text-muted, #6b7280);
    margin: 0 0 22px;
}

.bl-launcher .bl-open-editor {
    width: auto;
}

/* The wizard's button styles and its design tokens are both scoped to
   .bildlicht-guided, and this card is a sibling of it: the launcher sits on the
   product page while the wizard lives inside the overlay. So .bl-btn on this
   button matched nothing, the theme's own `button { padding: .5rem 1rem }` won,
   and the primary call to action rendered 38px high - under the 44px this
   audience needs, on the one control the whole page exists for.

   Restated here rather than added to the scoped selectors, because those use
   var(--bl-font-display) and var(--bl-ease) with no fallback and neither token
   reaches this card. Same trap, same remedy as #bl-added-panel above. Measured
   on bildlicht.shop: 38px before, 48px after. */
.bl-launcher .bl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 48px;
    padding: 15px 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.bl-launcher .bl-btn-primary {
    background: var(--bl-button-bg, #000);
    border-color: var(--bl-button-border, #000);
    color: var(--bl-button-text, #fff);
}

.bl-launcher .bl-btn-primary:hover:not(:disabled),
.bl-launcher .bl-btn-primary:focus {
    background: var(--bl-button-bg-hover, #222);
    color: var(--bl-button-text, #fff);
}

.bl-launcher .bl-btn:focus-visible {
    outline: 2px solid var(--bl-primary, #95857d);
    outline-offset: 2px;
}

/* Sticky call to action, phones only.
 *
 * Measured on bildlicht.shop at 375x812: the launcher's button ends at
 * y=839 while a phone with its browser chrome shows about 635. Shrinking the
 * 357px gallery or dropping the reassurance line each buy back too little on
 * their own, so the action stays reachable at the bottom edge instead.
 *
 * It stays put for the whole page rather than fading in and out: on a phone the
 * launcher's button is hidden (see below), so the bar is the only call to
 * action and there is nothing for it to duplicate. A bar that comes and goes
 * also asks the customer to notice it arriving, which is the opposite of what
 * this audience needs.
 *
 * transform + opacity only, so the compositor moves it and it cannot stutter
 * while an upload has the main thread. No blur: iOS Safari repaints it every
 * frame. Below the designer overlay in z-order, and hidden outright while the
 * designer is open. */
.bl-sticky-cta {
    display: none;
}

@media (max-width: 600px) {
    .bl-sticky-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990; /* designer overlay is 9998, its close button 9999 */
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid rgba(31, 41, 51, 0.10);
        box-shadow: 0 -6px 20px rgba(31, 41, 51, 0.10);
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
    }

    body.bl-editor-open .bl-sticky-cta {
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
    }

    /* The bar carries the action on a phone, so the launcher keeps only its
       words. Two buttons saying "Jetzt gestalten" within one screen is the
       duplication the audience notes rule out, and the bar is the one that
       cannot scroll away. */
    .bl-launcher .bl-open-editor {
        display: none;
    }

    /* The bar floats over the page, so the page has to end above it - otherwise
       it covers whatever the last section is. Scoped to the body class that
       marks a summary-mode product page, so no other page pays for it. */
    body.bildlicht-summary-mode {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }

    /* .bl-btn is scoped to .bildlicht-guided and this bar is outside it, so the
       appearance is restated here - the same trap the launcher button and
       #bl-added-panel already paid for. 52px keeps the touch target above the
       48px this audience needs. */
    .bl-sticky-cta .bl-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        min-height: 52px;
        padding: 14px 24px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        background: var(--bl-button-bg, #000);
        border-color: var(--bl-button-border, #000);
        color: var(--bl-button-text, #fff);
    }

    .bl-sticky-cta .bl-btn:focus-visible {
        outline: 2px solid var(--bl-primary, #95857d);
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-sticky-cta {
        transition: none;
    }
}

/* Full-screen overlay shell. Hidden with visibility+opacity (NOT display:none)
   so the wizard stays laid out and the canvas initializes with real
   dimensions; visibility:hidden also removes it from the tab order. No
   transform is used so the inner 3D-preview overlay (position:fixed) still
   resolves against the viewport. */
.bl-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #f6f1ec;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-family: var(--bl-font-display, 'Manrope', sans-serif);
}

body.bl-editor-open .bl-editor-overlay {
    visibility: visible;
    opacity: 1;
}

/* Lock background scroll while the designer is open */
body.bl-editor-open {
    overflow: hidden;
}

/* The shell used to stop at a flat 1200px, which left 880px of a 2000px screen
   unused while the lamp strip - 505.4x150mm, so 3.37:1 - is the one thing that
   benefits most from width. It now grows with the viewport and keeps a ceiling,
   because past roughly 1720px the strip gets taller than the wizard's chrome
   allows and the eye has to travel too far between the photos and the controls.

   This widens the editor canvas, and prepareCanvasForPreview() builds the 3D
   texture at 3x that canvas, so a preview update costs more on a large screen
   than it did. Desktop redraw was measured at 1.0ms (see CLAUDE.md), so there is
   room; phones are untouched by this rule and stay where they were. */
.bl-editor-overlay-inner {
    max-width: min(1720px, 94vw);
    margin: 0 auto;
    padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) 64px;
}

/* Reset the inner wizard container: the overlay provides width + centering */
.bl-editor-overlay .bildlicht-editor-container.bildlicht-guided {
    max-width: none;
    margin: 0;
}

.bl-overlay-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999; /* below the 3D preview overlay (10000) so it is covered while 3D is open */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--bl-text, #1f2933);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s var(--bl-ease, ease), background 0.2s ease;
}

.bl-overlay-close:hover {
    transform: scale(1.06);
    background: var(--bl-bg-subtle, #f9fafb);
}

.bl-overlay-close:focus-visible {
    outline: 2px solid var(--bl-accent, #95857d);
    outline-offset: 2px;
}

/* Visibility helper (used by the nav prev button) — class instead of inline
   visibility so it never overrides the overlay's visibility:hidden state */
.bildlicht-guided .bl-invisible {
    visibility: hidden;
}

/* === 18. Mobile-first slimming (fit the step on one screen, no scrolling) === */

@media (max-width: 819px), (hover: none) and (pointer: coarse) {
    /* Overlay becomes a vertical flex shell: stepper on top, the active step
       fills the middle, the nav stays pinned at the bottom — so a step fits
       the viewport without page scrolling. */
    .bl-editor-overlay-inner {
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        padding: 14px 14px 0;
    }

    .bildlicht-guided {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .bildlicht-guided .bl-wizard-header {
        margin-bottom: 12px;
    }

    .bildlicht-guided .bl-wizard-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Side tips cost too much vertical space on mobile — the per-step
       subline already carries the essential guidance */
    .bildlicht-guided .bl-wizard-aside {
        display: none;
    }

    /* Tighter cards + headings */
    .bildlicht-guided .bl-card {
        padding: 16px 16px;
        border-radius: 16px;
    }

    .bildlicht-guided .bl-panel-head {
        margin-bottom: 12px;
    }

    .bildlicht-guided .bl-panel-head h3 {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .bildlicht-guided .bl-panel-sub {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Slimmer stepper dots */
    .bildlicht-guided .bl-stepper-dot {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .bildlicht-guided .bl-stepper-item + .bl-stepper-item::before {
        top: 13px;
    }

    /* Smaller dropzone so step 1 fits without scrolling */
    .bildlicht-guided .bl-dropzone {
        min-height: 180px;
        padding: 20px 16px;
    }

    .bildlicht-guided .bl-dropzone-icon {
        width: 52px;
        height: 52px;
    }

    /* The canvas caption is redundant on the small screen */
    .bildlicht-guided .bl-canvas-caption {
        display: none;
    }

    /* Nav: solid bar pinned to the bottom of the flex shell */
    .bildlicht-guided .bl-wizard-nav {
        position: static;
        margin: 12px -14px 0;
        background: var(--bl-bg, #fff);
        border-top: 1px solid rgba(31, 41, 51, 0.08);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    }
}

/* === 19. Mobile panel editor (one photo large; magnifier over the canvas) ===
   Activated by guided-editor.js setting data-bl-panel="1" only on mobile.
   The canvas is clip-pathed to the active panel and CSS-transformed to fill
   the frame; JS sets the inline clip-path + transform. */

.bildlicht-guided[data-bl-panel="1"] #bildlicht-canvas-container {
    height: 38vh;
    max-height: 360px;
    min-height: 220px;
    overflow: hidden;
    position: relative;
    background: #1b1815;
    border-radius: 0;
}

/* In panel mode the photo + per-photo controls are the focus — drop the
   secondary chrome so a step still fits one screen (no scrolling). */
.bildlicht-guided[data-bl-panel="1"] #bildlicht-rotate-hint,
.bildlicht-guided[data-bl-panel="1"] .bl-preview-card .bl-panel-sub,
.bildlicht-guided[data-bl-panel="1"] #bl-coverage-status {
    display: none !important;
}

/* Per-photo controls become icon-only in panel mode so the 5 actions fit one
   row, leaving room for the order + width rows within the no-scroll budget. */
.bildlicht-guided[data-bl-panel="1"] .bildlicht-selected-image-controls .bl-control-label {
    display: none;
}

.bildlicht-guided[data-bl-panel="1"] .bildlicht-selected-image-controls .bildlicht-control-button {
    padding: 8px;
    min-width: 40px;
    justify-content: center;
}

.bildlicht-guided[data-bl-panel="1"] #bildlicht-canvas {
    transform-origin: 0 0;
    transition: transform 0.28s var(--bl-ease, ease), clip-path 0.28s var(--bl-ease, ease);
    cursor: grab;
}

/* Hide the flat-strip guidelines while in panel mode */
.bildlicht-guided[data-bl-panel="1"] .bildlicht-guideline {
    display: none !important;
}

/* Prev / next chevrons over the frame edges */
.bildlicht-guided .bl-panel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2933;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.bildlicht-guided .bl-panel-nav[hidden] {
    display: none;
}

.bildlicht-guided .bl-panel-nav .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.bildlicht-guided .bl-panel-prev {
    left: 8px;
}

.bildlicht-guided .bl-panel-next {
    right: 8px;
}

.bildlicht-guided .bl-panel-nav:disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* "Foto 2 / 5" pill */
.bildlicht-guided .bl-panel-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    background: rgba(18, 16, 14, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    pointer-events: none;
}

.bildlicht-guided .bl-panel-indicator[hidden] {
    display: none;
}

/* Reorder row */
.bildlicht-guided .bl-panel-reorder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.bildlicht-guided .bl-panel-reorder[hidden] {
    display: none;
}

.bildlicht-guided .bl-panel-reorder-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bl-text-muted, #6b7280);
}

.bildlicht-guided .bl-panel-move {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid rgba(31, 41, 51, 0.14);
    border-radius: 999px;
    color: var(--bl-text, #1f2933);
    font-family: var(--bl-font-display);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
}

.bildlicht-guided .bl-panel-move:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.bildlicht-guided .bl-panel-move .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

/* In panel mode the per-photo controls (zoom/rotate/delete) are the main
   editing controls — give them room */
.bildlicht-guided[data-bl-panel="1"] .bildlicht-selected-image-controls-wrapper {
    margin-top: 12px;
}

/* The flat-strip caption ("So liegen deine Fotos …") is misleading once a
   single photo is shown large – hide it in panel mode on every device. */
.bildlicht-guided[data-bl-panel="1"] .bl-canvas-caption {
    display: none;
}

/* Desktop panel-mode refinements (Weg A): there is plenty of room, so keep the
   per-photo controls fully labelled and give the single photo a larger stage.
   Clearer for the target audience than the mobile icon-only layout. */
@media (min-width: 820px) {
    .bildlicht-guided[data-bl-panel="1"] #bildlicht-canvas-container {
        height: 46vh;
        max-height: 460px;
    }

    .bildlicht-guided[data-bl-panel="1"] .bildlicht-selected-image-controls .bl-control-label {
        display: inline;
    }

    .bildlicht-guided[data-bl-panel="1"] .bildlicht-selected-image-controls .bildlicht-control-button {
        padding: 8px 14px;
        min-width: 0;
    }

    /* Larger tap/click targets for the order + width rows on desktop */
    .bildlicht-guided[data-bl-panel="1"] .bl-panel-move {
        font-size: 14px;
        padding: 10px 18px;
    }
}

/* === 19b. Selection focus (mobile) ==========================================
   While a photo is selected the global tools step aside, so the screen only
   shows the actions for that one photo instead of stacking both toolbars.
   editor.js sets data-bl-selection="1" on the wizard container; the labelled
   "Fertig" button clears it again. */

@media (max-width: 819px), (hover: none) and (pointer: coarse) {
    /* The design canvas is the anchor: nothing that appears or disappears may
       sit above it, or the canvas moves under the customer's finger. The three
       editing actions are therefore placed above it and stay there in every
       state, while the 3D view - the one control that does come and go - sits
       alone below it. Ordering only; the DOM keeps the order editor.js
       expects. */
    .bildlicht-guided .bildlicht-editor-canvas {
        display: flex;
        flex-direction: column;
    }

    /* The wrapper dissolves so its two rows can be ordered around the canvas
       individually. */
    .bildlicht-guided .bildlicht-canvas-controls {
        display: contents;
    }

    .bildlicht-guided .bildlicht-canvas-controls .bildlicht-control-row {
        order: -1;
        margin: 0 0 10px;
    }

    .bildlicht-guided .bildlicht-canvas-controls .bl-preview-row {
        /* Last: everything else in this column keeps the default order 0 */
        order: 2;
        margin: 14px 0 0;
        justify-content: center;
    }

    /* Only what sits below the canvas may be hidden while a photo is selected.
       The three actions above it stay - hiding them would move the canvas,
       which is the thing this layout exists to prevent. */
    .bildlicht-guided[data-bl-selection="1"] .bildlicht-canvas-controls .bl-preview-row,
    .bildlicht-guided[data-bl-selection="1"] #bl-coverage-status {
        display: none !important;
    }

    /* Comfortable touch targets for the per-photo actions (>= 48px) */
    .bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button {
        min-height: 48px;
        font-size: 14px;
        padding: 10px 16px;
    }

    .bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }
}

/* "Fertig" is the way out of the focused mode – give it primary weight so it
   reads as the obvious next action rather than one more equal option.
   !important matches the pattern above, which exists to beat the legacy
   .bildlicht-control-button rules in editor.css. */
.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button.bl-done-editing {
    background: var(--bl-text, #1f2933) !important;
    border-color: var(--bl-text, #1f2933) !important;
}

.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button.bl-done-editing,
.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button.bl-done-editing .bl-control-label,
.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button.bl-done-editing .dashicons {
    color: #fff !important;
}

.bildlicht-guided .bildlicht-selected-image-controls .bildlicht-control-button.bl-done-editing:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* === 20. Reduced motion ===================================================== */

@media (prefers-reduced-motion: reduce) {
    .bildlicht-guided *,
    .bl-editor-overlay,
    #bl-transition-overlay,
    #bl-transition-overlay * {
        animation: none !important;
        transition: none !important;
    }
}