/* =========================================================
   CENTRE TUINA ORIENTAL — Modo editor (estilo Canva)
   ========================================================= */

.ed-hidden{ display:none !important; }

/* ---------- Overlay genérico (login / password) ---------- */
.ed-overlay{
  position:fixed; inset:0; z-index:3000;
  background:rgba(24,18,12,.6);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:1.4rem;
  animation:edFade .25s ease;
}
@keyframes edFade{ from{ opacity:0; } to{ opacity:1; } }

.ed-modal{
  width:100%; max-width:380px;
  background:var(--paper,#f6f0e3);
  border-radius:20px;
  padding:2.2rem 2rem;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  font-family:var(--font-body,sans-serif);
  position:relative;
  animation:edPop .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes edPop{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

.ed-modal h3{
  font-family:var(--font-display,serif);
  color:var(--jade-900,#1c140d);
  margin:0 0 .3rem;
  font-size:1.5rem;
}
.ed-modal p.ed-sub{ font-size:.85rem; color:#6b5d4d; margin:0 0 1.4rem; }
.ed-close{
  position:absolute; top:1rem; right:1rem;
  width:30px;height:30px;border-radius:50%;
  border:none; background:rgba(36,28,20,.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; color:#3a2f24;
}
.ed-close:hover{ background:rgba(36,28,20,.16); }
.ed-close svg{ width:15px; height:15px; }

.ed-field{ margin-bottom:1rem; }
.ed-field label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:.4rem; color:var(--jade-900,#1c140d); }
.ed-field input, .ed-field select, .ed-field textarea{
  width:100%; padding:.85em 1em; border-radius:12px;
  border:1px solid rgba(36,28,20,.18); font-size:.92rem;
  background:#fffdf8; font-family:inherit; color:#241c14;
}
.ed-field textarea{ resize:vertical; min-height:5.2em; }
.ed-field input:focus, .ed-field select:focus, .ed-field textarea:focus{ outline:none; border-color:var(--jade-600,#6b4e30); box-shadow:0 0 0 3px rgba(189,93,66,.15); }
.ed-field-file{ font-size:.85rem; }

/* Modal más ancho para formularios con varios campos (p. ej. añadir producto) */
.ed-modal.ed-modal-wide{ max-width:480px; }

/* Botón de eliminar sobre una tarjeta de producto — funciona tanto en las
   añadidas desde el editor como en las que ya venían en el HTML de la
   página (ver ensureProductDeleteButton en js/editor.js). */
.ed-product-del{
  position:absolute; top:.6rem; right:.6rem; z-index:5;
  width:30px; height:30px; border-radius:50%;
  border:none; background:rgba(28,20,13,.68); color:#fffdf8;
  display:none; align-items:center; justify-content:center;
  cursor:pointer;
}
body.ed-active .product-card .ed-product-del{ display:flex; }
.ed-product-del:hover{ background:#b3413a; }
.ed-product-del svg{ width:14px; height:14px; }

/* Botón "Añadir más fotos" — vive dentro del hueco de foto principal de
   CUALQUIER tarjeta de producto (estática o añadida desde el editor). */
.ed-gallery-add{
  position:absolute; bottom:.6rem; right:.6rem; z-index:5;
  width:30px; height:30px; border-radius:50%;
  border:none; background:rgba(28,20,13,.68); color:#fffdf8;
  display:none; align-items:center; justify-content:center;
  cursor:pointer;
}
body.ed-active .product-card .ed-gallery-add{ display:flex; }
.ed-gallery-add:hover{ background:var(--copper,#b96b4a); }
.ed-gallery-add svg{ width:14px; height:14px; }

/* Miniaturas dentro del modal "Fotos adicionales" */
.ed-gallery-thumbs{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-bottom:1rem;
}
.ed-gallery-thumb{
  position:relative;
  width:72px; height:72px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(36,28,20,.14);
}
.ed-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-gallery-thumb-del{
  position:absolute; top:.2rem; right:.2rem;
  width:22px; height:22px; border-radius:50%;
  border:none; background:rgba(28,20,13,.72); color:#fffdf8;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.ed-gallery-thumb-del:hover{ background:#b3413a; }
.ed-gallery-thumb-del svg{ width:11px; height:11px; }
.ed-error{
  font-size:.8rem; color:#b3413a; margin:.3rem 0 0;
  display:none;
}
.ed-error.show{ display:block; }
.ed-msg-ok{
  font-size:.8rem; color:#1f8a53; margin:.3rem 0 0; display:none;
}
.ed-msg-ok.show{ display:block; }

.ed-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1em;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,var(--jade-700,#4a3524),var(--jade-900,#1c140d));
  color:#fffdf8;
  font-weight:600; font-size:.92rem;
  cursor:pointer;
  transition:.3s;
  margin-top:.4rem;
}
.ed-btn:hover{ filter:brightness(1.08); }
.ed-btn svg{ width:16px; height:16px; flex-shrink:0; }
.ed-btn.secondary{
  background:transparent; border:1px solid rgba(36,28,20,.2); color:#57493a;
}
.ed-link-btn{
  background:none; border:none; color:var(--copper,#b96b4a);
  font-size:.8rem; cursor:pointer; padding:0; margin-top:1rem; text-decoration:underline;
}

/* ---------- Barra de estado "modo editor activo" ---------- */
.ed-topbar{
  position:fixed; top:0; left:0; right:0; z-index:2500;
  background:var(--ink,#241c14);
  color:#f6f0e3;
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1.2rem;
  font-family:var(--font-body,sans-serif);
  font-size:.82rem;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.4);
}
.ed-topbar-left{ display:flex; align-items:center; gap:.7rem; }
.ed-dot{ width:8px;height:8px;border-radius:50%; background:#f2c879; box-shadow:0 0 0 4px rgba(242,200,121,.25); }
.ed-topbar-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ed-chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.5em 1em;
  border-radius:999px;
  border:1px solid rgba(246,240,227,.25);
  background:rgba(246,240,227,.06);
  color:#f6f0e3;
  cursor:pointer;
  font-size:.78rem; font-weight:500;
  transition:.25s;
}
.ed-chip:hover{ background:rgba(246,240,227,.16); }
.ed-chip.primary{ background:linear-gradient(135deg,var(--gold,#d4b47a),var(--copper,#b96b4a)); color:#1c1608; border-color:transparent; font-weight:700; }
.ed-chip.danger{ border-color:rgba(230,120,110,.5); color:#f3b3ac; }
.ed-chip svg{ width:14px;height:14px; }

/* cuando el editor está activo, empujamos el contenido para que la barra no lo tape */
body.ed-active{ padding-top:44px; }
body.ed-active .site-header{ top:44px; }
@media(max-width:700px){
  .ed-topbar{ flex-wrap:wrap; gap:.5rem; padding:.6rem .8rem; }
  body.ed-active{ padding-top:78px; }
  body.ed-active .site-header{ top:78px; }
}

/* ---------- Elementos editables ---------- */
body.ed-active [data-editable]{
  outline:1px dashed transparent;
  outline-offset:4px;
  cursor:text;
  border-radius:4px;
  transition:outline-color .2s, background .2s;
}
body.ed-active [data-editable]:hover{ outline-color:rgba(189,93,66,.45); background:rgba(189,93,66,.05); }
body.ed-active [data-editable]:focus{ outline:2px solid var(--copper,#b96b4a); outline-offset:4px; background:rgba(185,107,74,.06); }

body.ed-active .photo-slot{ cursor:pointer; position:relative; }
body.ed-active .photo-slot:hover{ outline:2px dashed var(--copper,#b96b4a); outline-offset:3px; }
body.ed-active .photo-slot:hover::after{
  content:'Clic para subir imagen';
  position:absolute; inset:0;
  background:rgba(28,20,13,.55);
  color:#fff; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
}

/* Canvas libre: click en cualquier zona vacía para añadir bloque */
body.ed-place-mode, body.ed-place-mode *{ cursor:crosshair !important; }

.ed-block{
  position:absolute;
  z-index:900;
  cursor:move;
}
.ed-block[data-locked="1"]{ cursor:default; }
body:not(.ed-active) .ed-block-controls{ display:none !important; }
.ed-block-text{
  min-width:60px; min-height:1.4em;
  padding:.3em .5em;
  outline:1px dashed transparent;
}
body.ed-active .ed-block-text:hover{ outline-color:rgba(185,107,74,.55); }
body.ed-active .ed-block-text:focus{ outline:2px solid var(--copper,#b96b4a); background:rgba(255,255,255,.5); }
.ed-block-img{ display:block; max-width:340px; border-radius:10px; box-shadow:0 14px 34px -16px rgba(0,0,0,.4); }
.ed-block-img img{ width:100%; display:block; border-radius:10px; }

.ed-block-controls{
  position:absolute; top:-38px; left:0;
  display:flex; gap:.3rem;
  background:var(--ink,#241c14);
  padding:.3rem;
  border-radius:10px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.4);
}
.ed-block-controls button{
  width:26px;height:26px; border-radius:6px; border:none;
  background:rgba(246,240,227,.08); color:#f6f0e3;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.ed-block-controls button:hover{ background:rgba(246,240,227,.22); }
.ed-block-controls button.ed-del:hover{ background:#b3413a; }
.ed-block-controls svg{ width:13px;height:13px; }

.ed-resize-handle{
  position:absolute; right:-7px; bottom:-7px;
  width:14px;height:14px;border-radius:50%;
  background:var(--copper,#b96b4a); border:2px solid #fff;
  cursor:nwse-resize;
}

/* ---------- Panel de ayuda flotante en modo "añadir" ---------- */
.ed-hint{
  position:fixed; left:50%; bottom:1.6rem; transform:translateX(-50%);
  z-index:2600;
  background:var(--ink,#241c14); color:#f6f0e3;
  padding:.7rem 1.3rem; border-radius:999px;
  font-size:.8rem; box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:.6rem;
}
.ed-hint button{
  background:rgba(246,240,227,.15); border:none; color:#f6f0e3;
  border-radius:999px; padding:.3em .9em; font-size:.75rem; cursor:pointer;
}

/* ---------- Toast de guardado ---------- */
.ed-toast{
  position:fixed; left:50%; top:calc(var(--ed-topbar-h, 56px) + 10px); transform:translateX(-50%) translateY(-14px);
  background:var(--jade-900,#1c140d); color:#f6f0e3;
  padding:.7rem 1.3rem; border-radius:999px; font-size:.82rem;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
  z-index:3200; opacity:0; pointer-events:none;
  transition:opacity .35s, transform .35s;
  display:flex; align-items:center; gap:.5rem;
}
.ed-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.ed-toast svg{ width:15px; height:15px; flex-shrink:0; }

.ed-file-input{ display:none; }

input[type="file"].ed-file-input{ position:absolute; width:0; height:0; opacity:0; }