/* photo-edit.css — in-context photo edit mode (admin-only). Namespaced ae-pe-*. */
.ae-pe-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 99999;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  color: #FAF8F4; background: #2E3D30; border: none; padding: 13px 18px;
  box-shadow: 0 8px 30px rgba(31,42,32,0.35); transition: opacity .18s;
}
.ae-pe-fab:hover { opacity: .9; }
.ae-pe-fab--on { background: #A0584D; }
.ae-pe-fab svg { width: 15px; height: 15px; }

/* Editable image affordance (only while edit mode is ON) */
.ae-pe-editable { position: relative; cursor: pointer; outline: 2px dashed rgba(46,61,48,.55); outline-offset: -2px; }
/* The overlay sits on top and CAPTURES the click itself (pointer-events:auto),
   so replace works regardless of the page's own card/link structure underneath. */
.ae-pe-hot {
  position: absolute; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  background: rgba(46,61,48,0); transition: background .15s; pointer-events: auto; cursor: pointer;
}
.ae-pe-hot:hover { background: rgba(46,61,48,.45); }
.ae-pe-editable:hover .ae-pe-hot { background: rgba(46,61,48,.45); }
.ae-pe-hot__label {
  opacity: 0; transition: opacity .15s; color: #FAF8F4;
  font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.ae-pe-editable:hover .ae-pe-hot__label,
.ae-pe-hot:hover .ae-pe-hot__label { opacity: 1; }
.ae-pe-hot__label svg { width: 16px; height: 16px; }

/* Preview/confirm modal */
.ae-pe-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.ae-pe-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.ae-pe-modal__panel {
  position: relative; background: #FFFFFF; border: 1px solid #DCDCDA; width: 92%; max-width: 560px;
  max-height: 90vh; overflow: auto; box-shadow: 0 24px 80px rgba(0,0,0,.18);
}
.ae-pe-modal__head { padding: 24px 28px 18px; border-bottom: 1px solid #DCDCDA; background: #FAFAF8; }
.ae-pe-modal__crumb { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.ae-pe-modal__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 400; color: #2E3D30; margin: 0; }
.ae-pe-modal__body { padding: 22px 28px; }
.ae-pe-modal__preview { width: 100%; height: auto; max-height: 46vh; object-fit: contain; background: #F2EFE8; display: block; }
.ae-pe-modal__foot { display: flex; gap: 12px; justify-content: flex-end; padding: 18px 28px 22px; border-top: 1px solid #ECECEA; }
.ae-pe-btn { font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; padding: 12px 22px; border: 1.5px solid #2E3D30; }
.ae-pe-btn--ghost { background: transparent; color: #2E3D30; }
.ae-pe-btn--solid { background: #2E3D30; color: #FAF8F4; }
.ae-pe-btn[disabled] { opacity: .5; cursor: default; }

/* Toast */
.ae-pe-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100001;
  background: #2E3D30; color: #FAF8F4; font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 1px;
  padding: 12px 20px; box-shadow: 0 8px 30px rgba(31,42,32,.35); }
.ae-pe-toast--err { background: #A0584D; }