.editable-image{

    position:relative;

}

.image-editor-overlay{

    position:absolute;

    inset:0;

    display:none;

    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(3px);

    opacity:0;

    transition:.2s ease;

    pointer-events:none;

    z-index:20;

}

body.edit-mode
.editable-image:hover
.image-editor-overlay{

    display:flex;

    opacity:1;

}

.image-editor-btn{

    height:48px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    background:#7c3aed;

    color:#fff;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    pointer-events:auto;

}

body:not(.edit-mode)
.image-editor-overlay{

    display:none !important;

}

/*********************************
HERO IMAGE EDIT BUTTON
*********************************/

.hero-image-edit-btn{

position:absolute;
top:20px;
right:20px;

width:42px;
height:42px;

display:none;

align-items:center;
justify-content:center;

border:none;
border-radius:12px;

background:
rgba(255,255,255,.12);

backdrop-filter:blur(12px);

cursor:pointer;

z-index:1000;

transition:.2s ease;

}

body.edit-mode
.hero-image-edit-btn{

display:flex;

}

.hero-image-edit-btn:hover{

background:
rgba(255,255,255,.2);

}