/* ============================================================================
   Duratex — Mejoras de tienda (guardar para después + vista rápida).
   Marca verde Duratex. Se carga solo con WooCommerce activo.
   ==========================================================================*/

:root{
  --dtxs-green:#16a34a; --dtxs-green-dark:#15803d; --dtxs-ink:#0f172a;
  --dtxs-border:#e2e8f0; --dtxs-shadow:0 18px 40px rgba(15,23,42,.16);
}

/* ---- Acciones flotantes sobre la tarjeta de producto -------------------- */
.dtx-card-enh{ position:relative; }
.dtx-card-actions{
  position:absolute; top:12px; right:12px; z-index:6;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease;
}
.dtx-card-enh:hover .dtx-card-actions,
.dtx-card-enh:focus-within .dtx-card-actions{ opacity:1; transform:translateY(0); }
@media (hover:none){ .dtx-card-actions{ opacity:1; transform:none; } } /* táctil: siempre visibles */

.dtx-icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--dtxs-border);
  background:rgba(255,255,255,.96); color:#334155; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(15,23,42,.12); transition:all .18s ease; padding:0;
  -webkit-tap-highlight-color:transparent;
}
.dtx-icon-btn:hover{ transform:translateY(-2px); color:var(--dtxs-green); border-color:#bbf7d0; }
.dtx-icon-btn svg{ fill:currentColor; }
.dtx-heart.is-saved{ color:#ef4444; border-color:#fecaca; background:#fff5f5; }
.dtx-heart.is-saved svg{ fill:#ef4444; }

/* ---- Toast -------------------------------------------------------------- */
.dtx-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  z-index:100002; background:var(--dtxs-ink); color:#fff;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:100px; box-shadow:var(--dtxs-shadow);
  opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none; max-width:90vw;
}
.dtx-toast.is-in{ opacity:1; transform:translate(-50%,0); }
.dtx-toast--error{ background:#b91c1c; }

/* ---- Modal Vista rápida ------------------------------------------------- */
.dtx-qv{ position:fixed; inset:0; z-index:100000; display:none; }
.dtx-qv.is-open{ display:block; }
.dtx-qv__bg{ position:absolute; inset:0; background:rgba(10,18,32,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.dtx-qv__box{
  position:relative; z-index:2; background:#fff; width:min(880px,94vw); max-height:90vh; overflow:auto;
  margin:5vh auto 0; border-radius:22px; box-shadow:var(--dtxs-shadow);
  display:grid; grid-template-columns:1fr; animation:dtxQvIn .25s ease;
}
@keyframes dtxQvIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.dtx-qv__close{
  position:absolute; top:12px; right:12px; z-index:5; width:40px; height:40px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:#0f172a; font-size:24px; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.dtx-qv__body{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.dtx-qv__loading{ padding:60px 24px; text-align:center; color:#64748b; font-family:'DM Sans',sans-serif; grid-column:1/-1; }
.dtx-qv__media{ background:#f8fafc; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dtx-qv__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.dtx-qv__info{ padding:28px 30px; font-family:'DM Sans',sans-serif; }
.dtx-qv__title{ font-family:'Sora',sans-serif; font-size:1.4rem; font-weight:800; color:var(--dtxs-ink); margin:0 0 8px; line-height:1.2; }
.dtx-qv__price{ font-family:'Sora',sans-serif; font-size:1.35rem; font-weight:800; color:var(--dtxs-green-dark); margin:0 0 14px; }
.dtx-qv__price del{ color:#94a3b8; font-weight:600; font-size:1rem; margin-right:8px; }
.dtx-qv__desc{ color:#475569; font-size:.95rem; line-height:1.65; margin:0 0 20px; max-height:180px; overflow:auto; }
.dtx-qv__buy{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dtx-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--dtxs-border); border-radius:100px; overflow:hidden; }
.dtx-qty__btn{ width:40px; height:44px; border:none; background:#f8fafc; color:#0f172a; font-size:18px; cursor:pointer; }
.dtx-qty__btn:hover{ background:#f0fdf4; color:var(--dtxs-green); }
.dtx-qty__in{ width:52px; height:44px; border:none; text-align:center; font-size:15px; font-weight:600; -moz-appearance:textfield; }
.dtx-qty__in::-webkit-inner-spin-button,.dtx-qty__in::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.dtx-qv__add{
  flex:1; min-width:180px; border:none; cursor:pointer; text-align:center; text-decoration:none;
  background:var(--dtxs-green); color:#fff; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px;
  padding:13px 24px; border-radius:100px; box-shadow:0 8px 20px rgba(22,163,74,.28); transition:all .2s ease;
}
.dtx-qv__add:hover{ background:var(--dtxs-green-dark); transform:translateY(-2px); }
.dtx-qv__add[disabled]{ opacity:.7; cursor:default; transform:none; }
.dtx-qv__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid #f1f5f9; }
.dtx-qv__save{ background:none; border:none; color:#334155; font-weight:600; font-size:14px; cursor:pointer; padding:0; }
.dtx-qv__save:hover{ color:#ef4444; }
.dtx-qv__link{ color:var(--dtxs-green-dark); font-weight:700; font-size:14px; text-decoration:none; }
.dtx-qv__link:hover{ text-decoration:underline; }

@media (max-width:680px){
  .dtx-qv__box{ margin-top:0; height:100vh; max-height:100vh; width:100vw; border-radius:0; }
  .dtx-qv__body{ grid-template-columns:1fr; }
  .dtx-qv__media{ aspect-ratio:16/10; }
  .dtx-qv__info{ padding:22px 20px 40px; }
}

/* ---- Botón flotante "Guardados" ---------------------------------------- */
.dtx-saved-fab{
  position:fixed; left:20px; bottom:22px; z-index:60; display:none; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:#ef4444; box-shadow:0 10px 26px rgba(15,23,42,.20);
  transition:transform .2s ease;
}
.dtx-saved-fab:hover{ transform:translateY(-3px); }
.dtx-saved-fab svg{ fill:currentColor; }
.dtx-saved-count{
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px;
  background:var(--dtxs-green); color:#fff; border-radius:100px; font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
.dtx-saved-fab:not(.has-items) .dtx-saved-count{ background:#94a3b8; }

/* ---- Panel/Drawer de guardados ----------------------------------------- */
.dtx-drawer{ position:fixed; inset:0; z-index:100001; display:none; }
.dtx-drawer.is-open{ display:block; }
.dtx-drawer__bg{ position:absolute; inset:0; background:rgba(10,18,32,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.dtx-drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(400px,92vw); background:#fff;
  box-shadow:-20px 0 50px rgba(15,23,42,.20); display:flex; flex-direction:column; animation:dtxDrawIn .25s ease;
}
@keyframes dtxDrawIn{ from{transform:translateX(100%);} to{transform:translateX(0);} }
.dtx-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid #eef2f5; font-family:'Sora',sans-serif; font-size:1.05rem; color:var(--dtxs-ink); }
.dtx-drawer__close{ background:none; border:none; font-size:26px; line-height:1; color:#64748b; cursor:pointer; }
.dtx-drawer__list{ padding:14px 16px; overflow:auto; flex:1; }
.dtx-drawer__empty{ text-align:center; color:#94a3b8; font-family:'DM Sans',sans-serif; font-size:14px; padding:48px 16px; line-height:1.6; }
.dtx-saved-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f1f5f9; }
.dtx-saved-thumb{ flex-shrink:0; width:74px; height:74px; border-radius:12px; overflow:hidden; background:#f8fafc; display:block; }
.dtx-saved-thumb img{ width:100%; height:100%; object-fit:cover; }
.dtx-saved-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; font-family:'DM Sans',sans-serif; }
.dtx-saved-title{ font-weight:700; font-size:14px; color:var(--dtxs-ink); text-decoration:none; line-height:1.3; }
.dtx-saved-title:hover{ color:var(--dtxs-green); }
.dtx-saved-price{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--dtxs-green-dark); }
.dtx-saved-btns{ display:flex; gap:8px; margin-top:4px; }
.dtx-saved-add{ background:var(--dtxs-green); color:#fff; border:none; border-radius:100px; font-weight:700; font-size:12.5px; padding:8px 14px; cursor:pointer; transition:background .2s; }
.dtx-saved-add:hover{ background:var(--dtxs-green-dark); }
.dtx-saved-add[disabled]{ opacity:.7; }
.dtx-saved-remove{ background:#f1f5f9; color:#64748b; border:none; border-radius:100px; font-weight:600; font-size:12.5px; padding:8px 12px; cursor:pointer; }
.dtx-saved-remove:hover{ background:#fee2e2; color:#b91c1c; }