/* Editor header only; retain --toolbar-h used by the canvas shell. */

.topbar.editor-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 0 26px!important;
    gap: 24px;
    border-bottom: 1px solid #e1e8f6;
    background: linear-gradient(110deg, #f8fbff, #fff 32%, #fff 70%, #f4f8ff);
    box-shadow: 0 5px 22px #0051bb09;
}

.editor-header::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #90afe6 50%, transparent);
    pointer-events: none;
}

.editor-header .topbar-left {
    min-width: 0;
    gap: 16px;
    justify-self: start;
}

.editor-header .editor-brand-lockup {
    flex: 0 0 auto;
    min-width: 0;
}

.editor-header .editor-brand-lockup .brand-lockup__mark {
    width: 112px;
    height: 42px;
    flex: 0 0 112px;
    max-width: none;
    border-radius: 0;
    object-fit: contain;
}


/* Editing history stays beside the brand instead of floating over the artwork. */

.editor-header .editor-history-toolbar {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    width: max-content;
    min-height: 42px;
    margin: 0;
    padding: 3px;
    gap: 2px;
    border: 1px solid #e1e7ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    transform: none;
}

.editor-header .editor-history-toolbar>.editor-history-btn {
    width: 36px;
    min-width: 36px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 36px;
    border-radius: 8px;
}

.editor-header .editor-history-toolbar .quick-toolbar-divider {
    height: 22px;
    margin: 0 5px;
}

.editor-workspace-context {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 170px;
}

.editor-context-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dce8fd;
    border-radius: 12px;
    background: linear-gradient(145deg, #f5f9ff, #e6efff);
    color: #355bc5;
    font-size: 19px;
    box-shadow: inset 0 1px 0 #fff;
}

.editor-context-copy {
    display: grid;
    gap: 4px;
}

.editor-context-copy small {
    color: #8293b0;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.2;
}

.editor-context-copy strong {
    color: #253656;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.editor-header .topbar-right {
    justify-self: end;
    flex: 0 0 auto;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.editor-header .topbar-account-actions,
.editor-header .topbar-design-actions {
    padding: 0;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.editor-header .topbar-design-actions {
    padding-left: 14px;
    border-left: 1px solid #dce5f5;
    gap: 10px;
}

.editor-header :is(.back-btn, .nav-icon-btn, .btn-save, .btn-preview) {
    min-height: 42px;
    height: 42px;
    border-radius: 12px;
    font-family: inherit;
    transition: background .18s, border-color .18s, box-shadow .18s;
}

.editor-header .back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex: 0 0 42px;
    padding: 0;
    border: 1px solid #e0e8f5;
    background: #ffffffd9;
    color: #526b91;
    box-shadow: 0 3px 10px #0051bb05;
}

.editor-header .back-btn svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 2;
}

.editor-header .topbar-right .nav-icon-btn {
    width: 42px;
    min-width: 42px;
    border: 1px solid transparent;
    background: transparent;
    color: #637898!important;
    box-shadow: none;
}

.editor-header .topbar-right :is(.btn-save, .btn-preview) {
    min-height: 44px;
    height: 44px;
    padding: 0 18px;
    gap: 8px;
    font-size: 12px!important;
    font-weight: 600;
    line-height: 1;
}

.editor-header .topbar-right .btn-save {
    border: 1px solid #cedcf8;
    border-radius: 14px;
}

.editor-header .topbar-right .btn-preview {
    border: 1px solid #3158c7;
    border-radius: 13px;
    background: linear-gradient(135deg, #4268dd, #254fbd)!important;
    color: #fff!important;
    box-shadow: 0 5px 14px #2854be25, inset 0 1px 0 #ffffff26;
}

.editor-header .topbar-right .btn-preview:hover {
    border-color: #2149aa;
    background: linear-gradient(135deg, #3b61d3, #2146aa)!important;
    box-shadow: 0 7px 18px #2854be35;
    transform: none;
}

.editor-header :is(.back-btn, .nav-icon-btn, .btn-save):hover {
    border-color: #abc3ee;
    background: #edf4ff;
    transform: none;
    box-shadow: none;
}

.editor-header .topbar-right :is(.nav-icon-btn, .btn-save, .btn-preview) i {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    color: inherit;
}

.editor-header :is(a, button):focus-visible {
    outline: 3px solid #a8c4f5;
    outline-offset: 3px;
}

.editor-header :is(button:disabled, .is-loading) {
    transform: none;
    opacity: .65;
}

@media(max-width:1200px) {
    .topbar.editor-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .editor-workspace-context {
        display: none;
    }
}

@media(max-width:768px) {
    .topbar.editor-header {
        padding: 0 12px!important;
        gap: 8px;
    }
    .editor-header .topbar-left {
        gap: 7px;
    }
    .editor-header .editor-brand-lockup .brand-lockup__mark {
        width: 80px;
        height: 34px;
        flex-basis: 80px;
    }
    .editor-header .topbar-right {
        gap: 8px!important;
    }
    .editor-header .topbar-account-actions,
    .editor-header .topbar-design-actions {
        gap: 5px!important;
    }
    .editor-header .back-btn,
    .editor-header .topbar-right :is(.nav-icon-btn, .btn-save, .btn-preview, .btn-confirm-order) {
        width: 40px!important;
        min-width: 40px!important;
        max-width: 40px!important;
        height: 40px!important;
        min-height: 40px!important;
        max-height: 40px!important;
        flex: 0 0 40px;
        padding: 0!important;
        border-radius: 12px!important;
        border-color: #dce6f7!important;
        box-shadow: none!important;
    }
    .editor-header .topbar-right .nav-icon-btn {
        background: #f7faff!important;
    }
    .editor-header .topbar-right .btn-save {
        color: #254f9e!important;
        background: #fff!important;
    }
    .editor-header .topbar-right .btn-preview {
        color: #fff!important;
        background: #2854be!important;
        border-color: #2854be!important;
    }
    .editor-header .back-btn {
        background: #f8fbff!important;
    }
}

@media(max-width:390px) {
    .topbar.editor-header {
        padding: 0 8px!important;
        gap: 6px;
    }
    .editor-header .topbar-left {
        gap: 6px;
    }
    .editor-header .editor-brand-lockup .brand-lockup__mark {
        width: 68px;
        height: 30px;
        flex-basis: 68px;
    }
    .editor-header .back-btn,
    .editor-header .topbar-right :is(.nav-icon-btn, .btn-save, .btn-preview, .btn-confirm-order) {
        width: 36px!important;
        min-width: 36px!important;
        max-width: 36px!important;
        height: 38px!important;
        min-height: 38px!important;
        max-height: 38px!important;
        flex-basis: 36px;
        border-radius: 11px!important;
    }
}

.editor-page .editor-header #editorPreviewButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 156px !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 20px !important;
    border: 1px solid #30394d !important;
    border-radius: 12px !important;
    background: #192134 !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 #ffffff24, 0 4px 10px #17203312 !important;
    transform: none !important;
}

.editor-page .editor-header #editorPreviewButton>span {
    display: block !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: center;
}

.editor-page .editor-header #editorPreviewButton:hover {
    background: #263149 !important;
}

.editor-page .editor-header #editorPreviewButton:active {
    background: #111827 !important;
    box-shadow: none !important;
}

.editor-page .editor-header #editorPreviewButton:focus-visible {
    outline: 3px solid #a6baf1;
    outline-offset: 2px;
}

@media(max-width:768px) {
    .editor-page .editor-header #editorPreviewButton {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
        flex: 0 0 84px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 6px !important;
    }
    .editor-page .editor-header #editorPreviewButton>span {
        font-size: 10px !important;
    }
}


/* Leave room for history beside the logo on compact desktop headers. */

@media (min-width: 769px) and (max-width: 1100px) {
    .editor-page .topbar.editor-header {
        padding: 0 16px !important;
        gap: 12px !important;
    }
    .editor-header .topbar-left {
        gap: 10px;
    }
    .editor-header .editor-brand-lockup .brand-lockup__mark {
        width: 92px;
        flex-basis: 92px;
    }
    .editor-page .editor-header .topbar-right :is(.btn-save, .btn-confirm-order) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    .editor-page .editor-header #btnSaveLabel,
    .editor-page .editor-header .btn-confirm-order>span {
        display: none !important;
    }
    .editor-page .editor-header #editorPreviewButton {
        min-width: 124px !important;
        padding: 0 12px !important;
    }
}


/* Account actions use matching vector strokes, independent of icon-font sizing. */

.editor-page .editor-header .topbar-account-actions>.nav-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid #e2e8f2 !important;
    border-radius: 12px !important;
    background: #f8faff !important;
    color: #222 !important;
    box-shadow: none !important;
}

.editor-page .editor-header .topbar-account-actions>.nav-icon-btn:hover {
    border-color: #bfd0f2 !important;
    background: #eef3ff !important;
    color: #2852bf !important;
}

.editor-page .editor-header .topbar-account-actions>.editor-wishlist-link:hover {
    border-color: #f4c4d1 !important;
    background: #fff2f5 !important;
    color: #dc476e !important;
}

.editor-page .editor-header .topbar-account-actions>.nav-icon-btn:focus-visible {
    outline: 2px solid #3158cd !important;
    outline-offset: 3px;
}

.editor-page .editor-header .topbar-account-actions .editor-account-icon {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

@media(prefers-reduced-motion:reduce) {
    .editor-header :is(a, button) {
        transition: none!important;
    }
}