.ha-customizer,
.ha-customizer *{box-sizing:border-box}

.ha-customizer{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,.86fr);
  gap:24px;
  align-items:stretch;
  width:100%;
  max-width:760px;
  margin:26px 0 30px;
  padding:24px;
  background:linear-gradient(145deg,#fffaf6 0%,#fff 62%);
  border:1px solid #f0dfd1;
  border-radius:30px;
  box-shadow:0 22px 60px rgba(95,62,40,.08);
  clear:both;
}

.ha-preview-card,
.ha-fields-card{
  min-width:0;
  height:100%;
  background:rgba(255,255,255,.98);
  border:1px solid #efd9c9;
  border-radius:26px;
  box-shadow:0 18px 40px rgba(62,38,24,.07);
}

.ha-preview-card{padding:22px;text-align:center}

.ha-preview-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  text-align:left;
}
.ha-preview-header span{font-weight:900;color:#2b2420;font-size:17px}
.ha-preview-header small{color:#8a7a6f;font-size:12px;max-width:120px}

.ha-preview-stage{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto;
  overflow:hidden;
  border-radius:22px;
  background:#fffaf6;
}
.ha-mockup{display:block;width:100%;height:auto;user-select:none;pointer-events:none}

.ha-photo-box{
  position:absolute;
  left:var(--ha-img-left);
  top:var(--ha-img-top);
  width:var(--ha-img-width);
  height:var(--ha-img-height);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px dashed rgba(217,167,127,.92);
  cursor:grab;
  touch-action:none;
  z-index:2;
}
.ha-photo-box.is-dragging{cursor:grabbing}
.ha-photo-box img{
  display:none;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform-origin:center center;
  will-change:transform;
}
.ha-photo-box.has-image img{display:block}
.ha-photo-box.has-image{background:transparent;border-color:rgba(217,167,127,.55)}
.ha-empty-photo{font-size:11px;font-weight:800;color:#b28a70;line-height:1.1;padding:4px}
.ha-photo-box.has-image .ha-empty-photo{display:none}

.ha-name-preview{
  position:absolute;
  left:var(--ha-text-left);
  top:var(--ha-text-top);
  transform:translate(-50%,-50%);
  font-size:clamp(16px, calc(var(--ha-text-size) * 1px), 40px);
  font-weight:900;
  color:#2b2522;
  line-height:1;
  text-align:center;
  text-shadow:0 2px 0 rgba(255,255,255,.92);
  max-width:48%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:inherit;
  z-index:3;
}

.ha-photo-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px auto 0}
.ha-photo-toolbar button{
  appearance:none;
  border:1px solid #efd9c9;
  background:#fff;
  border-radius:14px;
  min-width:42px;
  height:42px;
  padding:0 13px;
  font-size:18px;
  font-weight:900;
  color:#2c2520;
  box-shadow:0 9px 18px rgba(77,48,31,.08);
  cursor:pointer;
  transition:.2s ease;
}
.ha-photo-toolbar button:hover{transform:translateY(-2px);background:#fff4ed;border-color:var(--ha-accent)}
.ha-photo-toolbar button[data-ha-action=reset]{font-size:13px;min-width:82px}
.ha-preview-note{font-size:13px;color:#85766d;margin:14px 0 0;line-height:1.5}

.ha-fields-card{padding:28px}
.ha-fields-card h3{margin:0 0 8px;font-size:clamp(25px,3vw,34px);line-height:1.05;color:#2a2421;letter-spacing:-.03em}
.ha-subtitle{font-size:15px;color:#85766d;margin:0 0 22px;line-height:1.55}
.ha-fields-card label:not(.ha-upload){display:block;margin:18px 0 8px;font-weight:900;color:#2b2b2b;font-size:15px}
.ha-fields-card input[type=text]{width:100%;height:54px;border:1px solid #ead8ca;border-radius:17px;background:#fffaf6;padding:0 17px;font-size:16px;outline:none;box-shadow:none}
.ha-fields-card input[type=text]:focus{border-color:var(--ha-primary);box-shadow:0 0 0 4px rgba(255,112,104,.15)}
.ha-file-input{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.ha-upload{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-height:86px;border:1.8px dashed var(--ha-primary);border-radius:20px;background:linear-gradient(145deg,#fff8f4,#fff);cursor:pointer;text-align:center;transition:.2s ease;padding:16px;margin:8px 0 0!important}
.ha-upload:hover{background:#fff3ee;transform:translateY(-1px)}
.ha-upload strong{font-size:16px;color:#2a2421}
.ha-upload span{font-size:13px;color:#8a7a6f;word-break:break-word;max-width:100%}
.ha-help-box{margin-top:16px;padding:15px 16px;border-radius:18px;background:#fff7f1;color:#7b6d63;font-size:14px;line-height:1.45;border:1px solid #f0dfd1}
.ha-help-box strong{color:#2a2421}

.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button.button{
  border-radius:999px!important;
  min-height:58px!important;
  background:linear-gradient(135deg,var(--ha-primary,#ff7068),#f55f55)!important;
  border:0!important;
  box-shadow:0 16px 34px rgba(245,95,85,.28)!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  color:#fff!important;
  padding-left:30px!important;
  padding-right:30px!important;
  transition:.22s ease!important;
  white-space:normal!important;
  text-transform:none!important;
}
.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button.button:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(245,95,85,.36)!important}
.single_add_to_cart_button.ha-submitting{opacity:.85!important}
.quantity input.qty{border-radius:999px!important;min-height:54px!important;border:1px solid #ead8ca!important;background:#fffaf6!important}

@media(max-width:980px){
  .ha-customizer{grid-template-columns:1fr;max-width:620px;padding:18px;border-radius:24px}
  .ha-preview-card,.ha-fields-card{padding:18px;border-radius:22px}
  .ha-photo-toolbar button{min-width:40px;height:40px}
  .ha-name-preview{font-size:clamp(17px,6vw,28px)}
}

/* V6: capa visual sobre la imagen principal del producto */
.ha-main-live-overlay{
  position:absolute;
  border-radius:12px;
  overflow:visible;
  z-index:8;
  pointer-events:none;
  display:none;
}
.ha-main-live-overlay:before{
  content:"";
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:12px;
  z-index:1;
}
.ha-main-live-photo{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:12px;
  z-index:2;
  display:block!important;
  max-width:none!important;
  max-height:none!important;
  transform-origin:center center;
}
.ha-main-live-name{
  position:absolute;
  transform:translate(-50%,0);
  width:190%;
  text-align:center;
  font-weight:900;
  line-height:1;
  color:#2b2522;
  text-shadow:0 2px 0 rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.85);
  z-index:3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* V7: overlay robusto sobre galería WooCommerce / Divi */
.woocommerce-product-gallery,
.woocommerce-product-gallery__image,
.product .images,
.et_pb_wc_images {
  isolation: isolate;
}
.ha-main-live-overlay{
  position:absolute!important;
  transform:translate(-50%,-50%)!important;
  border-radius:12px!important;
  overflow:visible!important;
  z-index:9999!important;
  pointer-events:none!important;
  display:none;
}
.ha-main-live-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:12px!important;
  z-index:2!important;
  display:block!important;
  max-width:none!important;
  max-height:none!important;
  transform-origin:center center!important;
}
.ha-main-live-name{
  position:absolute!important;
  transform:translate(-50%,0)!important;
  width:220%!important;
  text-align:center!important;
  font-weight:900!important;
  line-height:1!important;
  color:#2b2522!important;
  text-shadow:0 2px 0 rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.85)!important;
  z-index:3!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* V8 Premium: foto ocupa el área punteada y nombre integrado */
.ha-preview-stage{
  box-shadow: inset 0 0 0 1px rgba(240,223,209,.35);
}
.ha-photo-box{
  border-radius:18px!important;
  border:1.5px dashed rgba(169,128,92,.72)!important;
  background:rgba(255,255,255,.58)!important;
  box-shadow:0 10px 24px rgba(63,39,26,.08);
}
.ha-photo-box.has-image{
  border-color:rgba(169,128,92,.28)!important;
  background:transparent!important;
  box-shadow:0 12px 28px rgba(63,39,26,.10);
}
.ha-photo-box.has-image:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:29%;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.95));
  z-index:2;
  pointer-events:none;
}
.ha-photo-box img{
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:18px!important;
  z-index:1;
}
.ha-name-preview{
  background:rgba(255,255,255,.92)!important;
  border-radius:999px!important;
  padding:4px 12px 5px!important;
  min-width:26%!important;
  max-width:42%!important;
  box-shadow:0 5px 12px rgba(80,52,33,.08);
  color:#2b2522!important;
  letter-spacing:-.02em!important;
  text-shadow:none!important;
}
.ha-main-live-overlay{
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:0 10px 26px rgba(63,39,26,.09)!important;
}
.ha-main-live-overlay:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:29%;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.95));
  z-index:2;
  pointer-events:none;
}
.ha-main-live-photo{
  border-radius:18px!important;
  object-fit:cover!important;
}
.ha-main-live-name{
  width:84%!important;
  padding:3px 10px 4px!important;
  background:rgba(255,255,255,.92)!important;
  border-radius:999px!important;
  color:#2b2522!important;
  text-shadow:none!important;
  box-shadow:0 5px 12px rgba(80,52,33,.08)!important;
  z-index:4!important;
}
@media(max-width:600px){
  .ha-name-preview{min-width:34%!important;max-width:58%!important;padding:3px 9px!important}
}

/* V9.2: ventana premium para validar calidad de imagen */
.ha-quality-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:22px;font-family:inherit}
.ha-quality-modal.is-visible{display:flex}
.ha-quality-backdrop{position:absolute;inset:0;background:rgba(34,25,20,.48);backdrop-filter:blur(8px)}
.ha-quality-dialog{position:relative;width:min(94vw,440px);background:linear-gradient(145deg,#fffaf6 0%,#fff 72%);border:1px solid #f0dfd1;border-radius:28px;box-shadow:0 30px 80px rgba(34,25,20,.22);padding:30px 26px 24px;text-align:center;color:#2a2421;animation:haModalIn .22s ease both}
.ha-quality-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:999px;background:#fff;border:1px solid #efd9c9;color:#7b6d63;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 8px 18px rgba(77,48,31,.08)}
.ha-quality-icon{width:58px;height:58px;margin:0 auto 15px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ha-primary,#ff7068),#f55f55);color:#fff;font-size:30px;font-weight:900;box-shadow:0 14px 32px rgba(245,95,85,.28)}
.ha-quality-dialog h3{margin:0 0 10px;font-size:24px;line-height:1.12;letter-spacing:-.03em;font-weight:900;color:#2a2421}
.ha-quality-dialog p{margin:0;color:#6f6259;font-size:15px;line-height:1.55}
.ha-quality-dialog p strong{color:#2a2421;font-weight:900}
.ha-quality-ok{margin-top:22px;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--ha-primary,#ff7068),#f55f55);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 14px 30px rgba(245,95,85,.24)}
@keyframes haModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}


/* V9.3: lógica premium de calidad de imagen */
.ha-quality-status{margin-top:12px;border-radius:18px;padding:12px 14px;border:1px solid #ead8ca;background:#fffaf6;box-shadow:0 10px 24px rgba(68,43,30,.06);font-size:13.5px;line-height:1.35;color:#4b3d35}
.ha-quality-status strong{display:block;font-size:14.5px;font-weight:900;color:#2a2421;margin-bottom:3px}
.ha-quality-status span{display:block;color:#6f6259}
.ha-quality-status.is-success{border-color:#cfe9d8;background:linear-gradient(145deg,#f5fff8,#fff)}
.ha-quality-status.is-warning{border-color:#f0d6a8;background:linear-gradient(145deg,#fff9ec,#fff)}
.ha-quality-status.is-error{border-color:#f4c1bb;background:linear-gradient(145deg,#fff5f3,#fff)}
.ha-quality-modal.is-success .ha-quality-icon{background:linear-gradient(135deg,#39b36b,#78d79b);box-shadow:0 14px 32px rgba(57,179,107,.24)}
.ha-quality-modal.is-success .ha-quality-icon::before{content:'✓'}
.ha-quality-modal.is-success .ha-quality-icon{font-size:0}
.ha-quality-modal.is-success .ha-quality-icon::before{font-size:30px}
.ha-quality-modal.is-warning .ha-quality-icon{background:linear-gradient(135deg,#f5a623,#ffd166);box-shadow:0 14px 32px rgba(245,166,35,.24)}
.ha-quality-modal.is-error .ha-quality-icon{background:linear-gradient(135deg,var(--ha-primary,#ff7068),#f55f55)}

.ha-optional{font-weight:600;opacity:.58;font-size:.88em;}


/* V9.9: capa grande activa sobre la imagen principal del producto. */

/* V9.8: segunda capa flotante integrada dentro del mockup, sin duplicados fuera del producto */
.ha-floating-photo-card{
  position:absolute;
  z-index:4;
  display:none;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(45,30,18,.18);
  padding:3px;
  pointer-events:none;
}
.ha-floating-photo-card.is-visible{display:block}
.ha-floating-photo-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border:1.5px solid rgba(56,98,160,.85);
  border-radius:9px;
  transform-origin:center center;
}


/* V9.9: la foto personalizada se ve EN GRANDE dentro del área del mockup principal */
.ha-main-live-overlay{
  position:absolute!important;
  transform:none!important;
  overflow:hidden!important;
  border-radius:14px!important;
  z-index:99999!important;
  pointer-events:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ha-main-live-overlay:before,
.ha-main-live-overlay:after{display:none!important;content:none!important;}
.ha-main-live-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform-origin:center center!important;
  border-radius:14px!important;
  border:0!important;
  box-shadow:none!important;
}
.ha-main-live-name{
  position:absolute!important;
  transform:translateX(-50%)!important;
  max-width:86%!important;
  width:auto!important;
  padding:4px 12px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  color:#2b2522!important;
  text-shadow:none!important;
  box-shadow:0 5px 12px rgba(80,52,33,.08)!important;
  z-index:3!important;
}


/* V10: miniatura interna corregida para mockups horizontales como tazas.
   El mockup se muestra completo y el área personalizada se calcula sobre la imagen real visible. */
.ha-preview-stage{
  aspect-ratio:1/1!important;
  min-height:150px!important;
  display:block!important;
  background:#fffaf6!important;
}
.ha-preview-stage .ha-mockup{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
.ha-preview-stage .ha-photo-box{
  left:0;
  top:0;
  width:10px;
  height:10px;
}
.ha-preview-stage .ha-floating-photo-card{
  border-radius:14px!important;
}

/* V10.3: vista previa más real para taza.
   La imagen principal se genera por canvas cuando es posible.
   Si el navegador bloquea canvas por CORS, se activa una capa fallback visible sobre la galería. */
.ha-main-live-overlay{
  overflow:hidden!important;
  border-radius:10px!important;
  box-shadow:inset 12px 0 22px rgba(0,0,0,.12), inset -12px 0 22px rgba(0,0,0,.14), inset 0 8px 16px rgba(255,255,255,.16)!important;
}
.ha-preview-stage .ha-photo-box{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.ha-preview-stage .ha-floating-photo-card{
  border-radius:10px!important;
  box-shadow:0 6px 18px rgba(65,42,26,.16)!important;
  overflow:hidden!important;
}
.ha-preview-stage .ha-floating-photo-card img{object-fit:cover!important;}


/* V10.4: mockup grande real en la galería principal.
   Se coloca una imagen compuesta completa encima de la foto principal para evitar que Divi/WooCommerce bloquee cambios de src/srcset. */
.ha-main-composite-overlay{
  position:absolute!important;
  z-index:9999!important;
  pointer-events:none!important;
  overflow:hidden!important;
  border-radius:inherit!important;
  background:#fff!important;
}
.ha-main-composite-overlay .ha-main-composite-img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* V10.6: fallback premium para taza: impresión curvada transparente sobre el mockup grande.
   Evita el efecto de pegatina rectangular cuando Woo/Divi bloquea la recomposición completa por canvas. */
.ha-main-live-overlay.ha-main-live-overlay--mug{
  background:transparent!important;
  overflow:visible!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 5px rgba(28,18,10,.10));
  mix-blend-mode:normal!important;
  isolation:isolate!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug:before,
.ha-main-live-overlay.ha-main-live-overlay--mug:after{
  display:none!important;
  content:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-name{display:none!important;}

/* Mini vista: que la prueba también se acerque al resultado final, sin borde blanco tipo tarjeta. */
.ha-preview-stage .ha-floating-photo-card{
  background:transparent!important;
  padding:0!important;
  border-radius:14px!important;
  box-shadow:inset 10px 0 18px rgba(0,0,0,.10), inset -12px 0 20px rgba(0,0,0,.15), inset 0 8px 18px rgba(255,255,255,.18)!important;
}
.ha-preview-stage .ha-floating-photo-card img{
  border:0!important;
  border-radius:14px!important;
  opacity:.96!important;
}

/* V10.7: integración premium realista para taza.
   La capa transparente ya no se muestra como rectángulo: el PNG renderizado trae máscara curva,
   brillo y sombra. Aquí solo garantizamos que el navegador no le añada bordes ni recortes cuadrados. */
.ha-main-live-overlay.ha-main-live-overlay--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 2px 2px rgba(25,15,8,.08))!important;
  opacity:1!important;
  transform:none!important;
}
.ha-floating-photo-card.ha-floating-photo-card--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
}


/* V10.8: la impresión de taza se comporta como PNG curvo transparente, sin esquinas ni tarjeta visible. */
.ha-main-live-overlay.ha-main-live-overlay--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo{
  object-fit:contain!important;
  border-radius:0!important;
  border:0!important;
  outline:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  opacity:.985!important;
}
.ha-floating-photo-card.ha-floating-photo-card--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}

/* V10.11: integración final taza premium.
   El canvas/PNG de impresión debe comportarse como tinta sobre cerámica,
   sin tarjeta, borde, sombra exterior ni rectángulo visible. */
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug:before,
.ha-main-live-overlay.ha-main-live-overlay--mug:after{
  display:none!important;
  content:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  opacity:1!important;
}


/* V10.13: corrección principal taza.
   El mockup grande ahora usa la misma capa PNG/canvas curvada que la miniatura.
   No aplicar border-radius ni sombra de tarjeta al overlay de taza. */
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  object-fit:contain!important;
  border-radius:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}

/* V10.14: ajuste final de integración visual de taza.
   El render principal se hace por canvas; estas reglas evitan que el fallback
   vuelva a parecer una tarjeta flotante con borde redondeado. */
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug{
  pointer-events:none!important;
  overflow:visible!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}


/* V10.17 FINAL: la tinta de la taza se renderiza en canvas/PNG transparente.
   Estas reglas evitan que Woo/Divi vuelva a mostrar una tarjeta flotante. */
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  pointer-events:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
}


/* V10.18: ajuste fino taza: la capa de tinta usa solo el PNG/canvas transparente; sin esquinas ni borde flotante. */
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug{
  clip-path:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  object-fit:contain!important;
}


/* V10.19: bordes de taza rectos; la integración se hace con brillo/sombra, no con deformación lateral. */
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  transform:none!important;
  border-radius:0!important;
  clip-path:none!important;
  object-fit:contain!important;
}


/* V10.20 FINAL: taza premium con esquinas suaves, sin líneas discontinuas visibles.
   El PNG/canvas ya trae la curva; CSS solo evita filtros o bordes extra. */
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  border-radius:0!important;
  clip-path:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug:before,
.ha-main-live-overlay.ha-main-live-overlay--mug:after{
  display:none!important;
  content:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:none!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:transparent!important;
}
.ha-preview-stage.has-photo .ha-box .ha-placeholder,
.ha-preview-stage.has-photo .ha-placeholder{
  opacity:0!important;
  visibility:hidden!important;
}


/* V10.22: acabado final taza. Las líneas guía del mockup quedan ocultas cuando hay foto,
   y el canvas/PNG de la impresión conserva esquinas de cilindro sin bordes flotantes. */
.ha-preview-stage.has-photo .ha-photo-box,
.ha-preview-stage.has-photo .ha-box{
  border-color:transparent!important;
}
.ha-preview-stage.has-photo .ha-photo-box::before,
.ha-preview-stage.has-photo .ha-photo-box::after,
.ha-preview-stage.has-photo .ha-box::before,
.ha-preview-stage.has-photo .ha-box::after{
  display:none!important;
  content:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  image-rendering:auto!important;
  backface-visibility:hidden!important;
}

/* V10.24 final: efecto taza premium incrustada.
   El PNG generado por canvas trae la máscara, sombras y brillo. Aquí evitamos que CSS externo cree bordes,
   tarjetas, outlines o líneas discontinuas encima del mockup. */
.ha-photo-box.has-image{
  border:0!important;
  outline:0!important;
  background:transparent!important;
}
.ha-photo-box.has-image .ha-empty-photo{display:none!important;}
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  object-fit:contain!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}


/* V10.25 FINAL: bordes laterales integrados en la taza.
   El efecto premium lo genera el canvas PNG transparente; aquí evitamos recortes,
   sombras externas o bordes que hagan parecer la impresión una tarjeta flotante. */
.ha-main-live-overlay.ha-main-live-overlay--mug,
.ha-floating-photo-card.ha-floating-photo-card--mug{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
}
.ha-main-live-overlay.ha-main-live-overlay--mug .ha-main-live-photo,
.ha-floating-photo-card.ha-floating-photo-card--mug img{
  object-fit:contain!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
  image-rendering:auto!important;
}
.ha-photo-box.has-image,
.ha-preview-stage .ha-photo-box.has-image{
  border-color:transparent!important;
  border-style:solid!important;
  box-shadow:none!important;
}
.ha-photo-box.has-image:after,
.ha-main-live-overlay.ha-main-live-overlay--mug:before,
.ha-main-live-overlay.ha-main-live-overlay--mug:after{
  display:none!important;
  content:none!important;
}


/* Huellarte replace final: evita tarjeta blanca cuando se usa mockup limpio. */
.ha-customizer[data-ha-replace-mode="yes"] .ha-photo-box,
.ha-customizer[data-ha-replace-mode="yes"] .ha-floating-photo-card,
.ha-customizer[data-ha-replace-mode="yes"] .ha-floating-photo-card img{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.ha-customizer[data-ha-replace-mode="yes"] .ha-photo-preview,
.ha-customizer[data-ha-replace-mode="yes"] #ha-photo-preview,
.ha-customizer[data-ha-replace-mode="yes"] #ha-floating-photo-preview{
  background:transparent!important;
}
.ha-main-live-overlay{
  background:transparent!important;
}
.ha-main-live-overlay .ha-main-live-photo{
  background:transparent!important;
}

/* Huellarte replace-clean global: cuando un producto tiene MOCKUP_LIMPIO,
   la foto del cliente se imprime como PNG/tinta, no como tarjeta rectangular. */
.ha-customizer[data-ha-replace-mode="yes"] .ha-preview-stage.has-photo .ha-photo-box,
.ha-customizer[data-ha-replace-mode="yes"] .ha-photo-box.has-image,
.ha-customizer[data-ha-replace-mode="yes"] .ha-floating-photo-card{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
}
.ha-customizer[data-ha-replace-mode="yes"] .ha-floating-photo-card img,
.ha-customizer[data-ha-replace-mode="yes"] .ha-photo-box img{
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.ha-customizer[data-ha-replace-mode="yes"] .ha-photo-box.has-image:after,
.ha-customizer[data-ha-replace-mode="yes"] .ha-photo-box.has-image:before{
  display:none!important;
  content:none!important;
}