/* ==========================================================================
   wandlogo.com – Designer-Produktseite (Inline-Modus)
   Scope: body.wl-designer-page (gesetzt von includes/product-template.php).
   Stellt das Designer-Modal (assets/designer.css) auf In-Flow-Darstellung um,
   ohne designer.css zu verändern. Lädt NACH designer.css (Enqueue-Dependency).
   ========================================================================== */

/* Overlay + Schließen-Button haben inline keine Funktion */
body.wl-designer-page .dz-overlay{display:none!important}
body.wl-designer-page .dz-modal .quiz-close{display:none}

/* Modal → normaler Block im Seitenfluss. display:block schlägt auch das
   [hidden]-UA-Styling des noch nicht geöffneten Modals → das serverseitig
   gerenderte Markup ist ab dem ersten Paint sichtbar (kein JS-Warten). */
body.wl-designer-page .dz-modal{position:static;inset:auto;z-index:auto;display:block;padding:0}
body.wl-designer-page .dz-modal.open{display:block}

/* Dialog: Breite aus dem Container, Höhe aus dem Inhalt */
body.wl-designer-page .dz-dialog{width:100%;height:auto;min-height:0;overflow:visible;
  border-radius:var(--radius-xl)}

/* Stage braucht inline eine explizite Höhe: der Canvas ist absolut
   positioniert und liefert keine intrinsische Höhe – flex:1 würde bei
   height:auto des Dialogs auf 0 kollabieren. */
body.wl-designer-page .dz-preview{position:relative;border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
body.wl-designer-page .dz-stage{flex:none;height:clamp(400px,55vh,620px)}

/* Panel: nicht intern scrollen – natürliche Höhe im Seitenfluss */
body.wl-designer-page .dz-panel{overflow:visible;min-height:0}
body.wl-designer-page .dz-panel-scroll{flex:none;overflow:visible;padding:26px 26px 10px}

/* Produkttitel im Panel über „Schriftzug gestalten" (Inline-Modus) */
body.wl-designer-page .dz-pagetitle{font-size:clamp(24px,2.6vw,32px);font-weight:900;
  letter-spacing:-.02em;line-height:1.12;margin:0 0 10px}

/* ============ Kopfbereich über dem Designer ============ */
.wl-dzmain{padding:26px 0 40px}
.wl-dzhead{margin-bottom:20px}
.wl-dzkicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border:1px solid rgba(var(--brand-rgb),.35);border-radius:var(--radius-sm);
  background:var(--brand-soft);color:var(--brand-dark);font-size:13px;font-weight:800}
.wl-dzkicker .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);
  animation:dotPulse 2.4s ease-in-out infinite}
.wl-dzhead h1{font-size:clamp(30px,3.6vw,44px);font-weight:900;line-height:1.06;margin:12px 0 0}

/* Trust-Pills unter dem Designer */
.wl-dztrust{margin-top:18px}

/* ============ Responsive ============ */
@media (max-width:820px){
  /* designer.css setzt hier height:min(880px,94vh) erneut → zurück auf auto,
     Preview über Panel gestapelt mit natürlicher Höhe. */
  body.wl-designer-page .dz-dialog{height:auto;grid-template-rows:auto auto}
  body.wl-designer-page .dz-preview{min-height:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  body.wl-designer-page .dz-stage{height:clamp(300px,48vh,460px);min-height:0}
  /* 3D-Viewer: absolut (bottom:109px) würde hier die Hintergrund-Swatches
     überdecken – im Seitenfluss einfach zwischen Stage und Leiste einreihen. */
  body.wl-designer-page .dz-3d-viewer{position:static;width:132px;height:132px;margin:12px 0 0}
}