/* Fixed 4:3 workplane: the image moves, the output frame stays put. */
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 310px; width: 100%; min-width: 0; color: #17243b; font: inherit; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-width: 0; padding: 28px; background: #f5f7fb; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-stage { position: relative; isolation: isolate; width: 100%; max-width: min(720px, calc((100dvh - 250px) * 4 / 3)); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #eef1f7; box-shadow: 0 0 0 1px #dce3ed; cursor: grab; touch-action: none; user-select: none; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-stage.is-dragging { cursor: grabbing; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-image { position: absolute; display: block; inset: auto; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: fill; pointer-events: none; user-select: none; opacity: 0; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace.is-ready .wpadverts-frame-image { opacity: 1; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-grid { position: absolute; z-index: 1; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 33.333333% 100%, 100% 33.333333%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-badge { position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 4px 9px; border-radius: 7px; background: rgba(23,36,59,.72); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-instruction { max-width: 560px; margin: 0; color: #617087; font-size: 13px; line-height: 1.6; text-align: center; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-controls { min-width: 0; padding: 24px 20px; background: #fff; border-left: 1px solid #e0e6ef; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-controls h3 { margin: 0 0 8px; color: #17243b; font: inherit; font-size: 20px; font-weight: 700; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-controls p { margin: 0 0 24px; color: #617087; font-size: 13px; line-height: 1.6; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-zoom-label, .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-position-label { display: block; margin: 0 0 10px; color: #33445d; font-size: 13px; font-weight: 600; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-zoom-value { float: right; color: #617087; font: inherit; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-zoom-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-zoom { display: block; flex: 1 1 0; min-width: 0; width: 100%; height: 44px; margin: 0; padding: 0; accent-color: var(--adverts-photo-accent, #4267e5); cursor: pointer; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-position-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #dce3ed; border-radius: 9px; background: #fff; color: #33445d; box-shadow: none; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; cursor: pointer; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-zoom-controls button, .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-position-controls button { padding: 0; font-size: 20px; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace button:not(:disabled):is(:hover, :focus-visible, :active) { border-color: var(--adverts-photo-accent, #4267e5); background: #eef2ff; color: #25364f; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-reset { width: 100%; margin-bottom: 24px; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-controls .wpadverts-frame-original-note { margin: 20px 0 16px; padding: 12px; border-radius: 9px; background: #f5f7fb; font-size: 12px; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace .wpadverts-frame-save { border-color: var(--bb-primary-button-border-regular, var(--adverts-photo-accent, #4267e5)); background: var(--bb-primary-button-background-regular, var(--adverts-photo-accent, #4267e5)); color: var(--bb-primary-button-text-regular, #fff); }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace .wpadverts-frame-save:not(:disabled):is(:hover, :focus-visible, :active) { border-color: var(--bb-primary-button-border-hover, var(--adverts-photo-accent, #4267e5)); background: var(--bb-primary-button-background-hover, var(--adverts-photo-accent, #4267e5)); color: var(--bb-primary-button-text-hover, #fff); box-shadow: 0 2px 8px rgba(23,36,59,.14); }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-controls .wpadverts-frame-other { display: block; width: 100%; margin-top: 16px; padding: 6px 0; border: 0; background: transparent; color: #617087; font-size: 12px; font-weight: 400; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-controls .wpadverts-frame-other:not(:disabled):is(:hover, :focus-visible, :active) { background: #eef2ff; color: #25364f; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace button:disabled { border-color: #e0e6ef; background: #f5f7fb; color: #667085; box-shadow: none; opacity: 1; cursor: default; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-status:not(:empty) { margin: 0 0 16px; color: #9c4234; font-size: 13px; line-height: 1.6; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-stage:focus-visible, .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace button:focus-visible, .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-zoom:focus-visible { outline: 3px solid var(--adverts-photo-accent, #4267e5); outline-offset: 3px; }
.wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-error-label[hidden] { display: none; }
@media (max-width: 700px) {
    .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-workspace { grid-template-columns: minmax(0, 1fr); }
    .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-canvas { padding: 14px; gap: 12px; }
    .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-stage { width: 100%; max-width: 480px; }
    .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-controls { padding: 18px 14px; border-left: 0; border-top: 1px solid #e0e6ef; }
    .wpadverts-overlay.adverts-browser-frontend .wpadverts-frame-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}