/* ============================================
   TJL — MINI-CART (Elementor) — CSS DEPURADO
   ============================================ */

/* ——— Tokens ——— */
:root{
  --tjl-condensed: "Special Gothic Condensed One Regular",
                   "Special Gothic Condensed One",
                   "Special Gothic Condensed",
                   Impact, "Arial Narrow", system-ui, sans-serif;
  --tjl-body: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --tjl-ink:   #191919;
  --tjl-muted: #8e9eb3;
  --tjl-accent:#52b4f9;

  /* compat antiguos */
  --tjl-txt: var(--tjl-ink);
  --tjl-azul: var(--tjl-accent);
  --tjl-div: rgba(0,0,0,.08);
}

/* ——— Panel ——— */
.elementor-menu-cart__main{
  width: min(92vw, 460px);
  padding: 1.25rem 1.25rem 96px !important; /* hueco para CTA sticky */
  font-family: var(--tjl-body);
  box-sizing: border-box;
  display:flex; flex-direction:column;
}
/* ocultar container rosa vacío de Elementor */
.elementor-menu-cart__main > .elementor-element[data-element_type="container"]{ display:none !important; }

/* ——— Header ——— */
.elementor-menu-cart__header,
.tjl-mc-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.25rem 0 .75rem;
  border-bottom:1px solid rgba(0,0,0,.06);
  margin:0 0 8px;
}
.elementor-menu-cart__title,
.tjl-mc-title{
  margin:0;
  font-family: var(--tjl-condensed);
  text-transform: uppercase;
  font-size: 2rem;    /* estilo H3 */
  line-height: 1.1;
  letter-spacing:.01em;
  color: var(--tjl-ink);
}

/* botón cerrar */
.elementor-menu-cart__close-button{
  position:absolute !important;
  top:14px; right:14px; width:32px; height:32px;
  display:grid !important; place-items:center;
  border-radius:999px; z-index:9999; pointer-events:auto;
}
.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after{ content:none !important; }
.elementor-menu-cart__close-button i,
.elementor-menu-cart__close-button svg{ width:18px; height:18px; color:#88909a; }
.elementor-menu-cart__close-button:hover i,
.elementor-menu-cart__close-button:hover svg{ color:#5b6470; }

/* ——— Lista (scroll + máscara) ——— */
.widget_shopping_cart_content{ background:transparent !important; padding-top:0 !important; border-top:0 !important; }
.elementor-menu-cart__products{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:18px;
  margin:14px 0; border-top:1px solid rgba(0,0,0,.06);
  overflow:auto; max-height: calc(100vh - 260px);
  /* máscara fade top/bottom */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
/* fallback sin mask */
@supports not (mask-image: linear-gradient(#000,#000)){
  .elementor-menu-cart__products{ position:relative; }
  .elementor-menu-cart__products::before,
  .elementor-menu-cart__products::after{
    content:""; position:sticky; left:0; right:0; height:18px; pointer-events:none; z-index:2; display:block;
  }
  .elementor-menu-cart__products::before{ top:0;    background:linear-gradient(#fff, rgba(255,255,255,0)); }
  .elementor-menu-cart__products::after { bottom:0; background:linear-gradient(rgba(255,255,255,0), #fff); }
}

/* ——— Fila de producto ———
   img | info | (remove arriba / precio+qty abajo)
*/
.elementor-menu-cart__product{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-rows: auto auto;
  column-gap:12px; row-gap:6px;
  align-items:start;
  padding:10px 0; border-bottom:1px solid rgba(0,0,0,.06);
}
.elementor-menu-cart__product-image{ grid-column:1; grid-row:1 / span 2; }
.elementor-menu-cart__product-image img{
  width:64px; height:64px; object-fit:contain; border-radius:6px; background:#fff;
}
.elementor-menu-cart__product-name{ grid-column:2; grid-row:1; }
.elementor-menu-cart__product-name a{
  font-family: var(--tjl-condensed);
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--tjl-ink);
  text-decoration: none;
}
.elementor-menu-cart__product-name a:hover{ opacity:.9; }
.elementor-menu-cart__product-name .availability{ margin:.25rem 0 0; color:#23a55b; font-size:.85rem; }

/* ——— Columna derecha: remove arriba; qty + amount abajo ——— */
.elementor-menu-cart__product-remove{
  grid-column:3; grid-row:1;
  justify-self:end; align-self:start; margin-top:2px; position:relative; z-index:1;
}
/* remove como ENLACE DE TEXTO (no círculo) */
.elementor-menu-cart__product-remove a,
.elementor-menu-cart__product-remove .elementor_remove_from_cart_button,
.elementor-menu-cart__product-remove .remove_from_cart_button{
  display:inline !important;
  width:auto !important; height:auto !important;
  padding:0 .25rem !important; border:0 !important; background:none !important; box-shadow:none !important;
  text-indent:0 !important; overflow:visible !important; border-radius:0 !important;
  font: 400 .95rem/1.2 var(--tjl-body);
  color:#8ea0b3 !important; text-decoration:none; cursor:pointer;
}
.elementor-menu-cart__product-remove a::before,
.elementor-menu-cart__product-remove a::after,
.elementor-menu-cart__product-remove a i,
.elementor-menu-cart__product-remove a svg{ display:none !important; content:none !important; }
.elementor-menu-cart__product-remove a:hover{ color:#5b6470 !important; text-decoration:underline; text-underline-offset:2px; }

/* precio + qty debajo del remove */
.elementor-menu-cart__product-price{
  grid-column:3; grid-row:2;
  display:grid; grid-template-columns:auto auto;
  align-items:center; column-gap:8px; white-space:nowrap;
}
.tjl-mini-qty{
  width:84px; min-width:84px; max-width:84px; height:38px;
  padding:.35rem .4rem; text-align:center; font-size:1rem; line-height:1;
  border-radius:.6rem; border:1px solid rgba(0,0,0,.22);
}
.tjl-mini-qty::-webkit-outer-spin-button,
.tjl-mini-qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.tjl-mini-qty[type=number]{ -moz-appearance:textfield; }
.elementor-menu-cart__product-price .amount bdi{
  font-family: var(--tjl-condensed);
  text-transform: uppercase;
  color: var(--tjl-accent);
  font-size: 1.25rem;
}

/* multiplicador “1 × …” (tu JS lo oculta cuando hay input) */
.elementor-menu-cart__product-price .product-quantity{
  font: 400 .95rem/1 var(--tjl-condensed);
  color: var(--tjl-accent);
  margin-top:6px;
}

/* ——— Subtotal + nota (sticky) ——— */
.elementor-menu-cart__subtotal{
  position: sticky; bottom: 88px;
  background:#fff; border:0 !important; box-shadow:none !important;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.75rem 0 .25rem !important; margin-top:.25rem; border-top:1px solid rgba(0,0,0,.06);
}
.elementor-menu-cart__subtotal strong{
  font-family: var(--tjl-condensed) !important;
  text-transform: uppercase; font-size: 2rem !important; line-height:1.1 !important;
  color: var(--tjl-ink) !important;
}
.elementor-menu-cart__subtotal .amount,
.elementor-menu-cart__subtotal .amount bdi{
  font-family: var(--tjl-condensed) !important;
  font-size: 2rem !important; line-height:1.1 !important;
  color: var(--tjl-accent) !important;
}

/* nota bajo subtotal (inyectada por JS) */
.tjl-mc-note{
  position: sticky; bottom: 56px;
  background:#fff; padding:.25rem 0 .75rem;
  color:#90a4b8; font-size:.86rem; line-height:1.3;
  margin:0 0 1rem; border:0 !important;
}

/* ——— Footer + CTA ——— */
.elementor-menu-cart__footer{ margin-top:.25rem; }
.elementor-menu-cart__footer-buttons{
  position: sticky; bottom: 0;
  background:#fff; padding:.75rem 0 1rem; box-shadow:none !important; display:block;
}
/* Botón CTA inyectado */
.tjl-checkout-btn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important;
  background:#00B7FF !important; color:#fff !important;
  border:0; border-radius:9999px !important;
  text-decoration:none !important;
  font-family: var(--tjl-condensed) !important;
  font-size:1.38rem !important; letter-spacing:.02em !important; text-transform:uppercase !important;
  line-height:1 !important; min-height:51px; padding:1rem 1.25rem !important;
  transition:background .2s ease, transform .05s ease !important;
}
.tjl-checkout-btn:hover{ background:#FF9800 !important; transform:translateY(-1px); }
.tjl-checkout-btn:focus{ box-shadow:0 0 0 3px rgba(255,152,0,.25) !important; outline:0; }

/* Botones que pueda reinyectar Elementor */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart{ display:none !important; }
.elementor-menu-cart__footer-buttons .elementor-button{
  width:100%; background: var(--tjl-accent) !important; border:0; border-radius:9999px; padding:1rem 1.25rem;
}
.elementor-menu-cart__footer-buttons .elementor-button .elementor-button-text{
  opacity:1 !important; font-family: var(--tjl-condensed); text-transform:uppercase;
  font-size:1.38rem; color: var(--tjl-ink) !important;
}

/* ——— Estados de refresco (evita flash “carrito B”) ——— */
.tjl-mc-refreshing .elementor-menu-cart__products{ opacity:.35; pointer-events:none; }

/* ——— Saneamiento general (sin overlays/pseudo basura) ——— */
.elementor-menu-cart__main .blockUI.blockOverlay,
.elementor-menu-cart__container .blockUI.blockOverlay{
  background: transparent !important;
}
.elementor-menu-cart__main .elementor-background-overlay,
.elementor-menu-cart__main .elementor-shape,
.elementor-menu-cart__main .elementor-shape-top,
.elementor-menu-cart__main .elementor-shape-bottom,
.elementor-menu-cart__main .elementor-element[data-element_type="container"],
.elementor-menu-cart__main .elementor-element[data-element_type="container"]::before,
.elementor-menu-cart__main .elementor-element[data-element_type="container"]::after,
.elementor-menu-cart__main .elementor-widget-wrap::before,
.elementor-menu-cart__main .elementor-widget-wrap::after{
  display:none !important; content:none !important; background:none !important; box-shadow:none !important;
}

/* ——— Tipografía por defecto interna ——— */
.elementor-menu-cart__main,
.elementor-menu-cart__main *{ font-family: var(--tjl-body); }

/* reserva hueco para la barra de scroll y evita solapar el borde derecho */
.elementor-menu-cart__products{
  scrollbar-gutter: stable;        /* reserva espacio fijo */
  padding-right: 12px;             /* extra seguridad */
}

/* el botón “Quitar” por encima y separado del borde */
.elementor-menu-cart__product-remove{
  position: relative;
  z-index: 5;
  margin-right: 8px;               /* despega del scroll */
}

/* fuerza H3 en cualquier header del mini-cart */
.tjl-mc-title,
.elementor-menu-cart__title{
  font-family: var(--tjl-condensed) !important;
  text-transform: uppercase !important;
  font-size: 2rem !important;
  line-height: 1.1 !important;
  letter-spacing: .01em !important;
  color: var(--tjl-ink) !important;
}

@media (max-width: 767px){

  /* fila de producto:  imagen | info  (remove/price/qty pasan a fila 2) */
  .elementor-menu-cart__product{
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }

  /* nombre + disponibilidad = columna 2, fila 1 (ancho completo) */
  .elementor-menu-cart__product-name{
    grid-column: 2;
    grid-row: 1;
  }

  /* contenedor “quitar” sube a la fila 2, alineado a la derecha */
  .elementor-menu-cart__product-remove{
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin-top: 0;
  }

  /* precio + qty en la fila 2, a la izquierda, con tres columnas: qty | amount | (espacio) */
  .elementor-menu-cart__product-price{
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    grid-template-columns: auto auto;
    column-gap: 10px;
  }

  /* deja un pequeño gap con el botón quitar */
  .elementor-menu-cart__product-price{ margin-right: 12px; }
}