/*
 * Lo que la vista previa cambia fuera de las paginas nuevas: el carrito lateral
 * y el checkout. Se carga solo para quien ve la web nueva (body.eph-previa).
 *
 * El checkout toma la cara de /checkout-alt/ con `plantillas/checkout-form.php`;
 * aca se visten las piezas que dibuja WooCommerce adentro. Los campos, el pago y
 * lo que se guarda en el pedido son los de siempre.
 *
 * El carrito lateral usa tokens propios (--pv-*) porque no vive adentro de .epa
 * ni de .eph-home. Los valores son los mismos.
 */
body.eph-previa{
  --pv-fondo:#F8FAFC; --pv-blanco:#FFFFFF; --pv-tinta:#0F172A; --pv-texto:#475569;
  --pv-borde:#E2E8F0; --pv-azul:#0064FF; --pv-azul-osc:#0052D4; --pv-azul-texto:#0052D4;
  --pv-verde-tinta:#05602C; --pv-sombra:0 1px 2px rgba(16,24,40,.05); --pv-radio:16px;
  --pv-verde:#0B7038; --pv-verde-osc:#095C2E;
}
[data-theme="dark"] body.eph-previa{
  --pv-fondo:#0B1222; --pv-blanco:#151D35; --pv-tinta:#E9EEF6; --pv-texto:#A2B0C6;
  --pv-borde:#253149; --pv-azul:#3B82F6; --pv-azul-osc:#2563EB; --pv-azul-texto:#7FB0FF;
  --pv-verde-tinta:#5FD98D; --pv-sombra:0 1px 2px rgba(0,0,0,.3);
  --pv-verde:#15954A; --pv-verde-osc:#0E7A3C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.eph-previa{
    --pv-fondo:#0B1222; --pv-blanco:#151D35; --pv-tinta:#E9EEF6; --pv-texto:#A2B0C6;
    --pv-borde:#253149; --pv-azul:#3B82F6; --pv-azul-osc:#2563EB; --pv-azul-texto:#7FB0FF;
    --pv-verde-tinta:#5FD98D; --pv-sombra:0 1px 2px rgba(0,0,0,.3);
    --pv-verde:#15954A; --pv-verde-osc:#0E7A3C;
  }
}

/* ─────────────────────────── El carrito lateral ─────────────────────────── */

body.eph-previa .header-cart-drawer__panel{background:var(--pv-fondo);color:var(--pv-tinta);
  font-family:'Inter',system-ui,-apple-system,sans-serif}
body.eph-previa .header-cart-drawer__panel .header-cart-drawer__title{color:var(--pv-tinta);font-weight:700}
body.eph-previa .header-cart-drawer__panel .header-cart-drawer__close{color:var(--pv-texto)}
body.eph-previa .header-cart-drawer__panel .header-cart-item{background:var(--pv-blanco);
  border:1px solid var(--pv-borde);border-radius:var(--pv-radio);box-shadow:var(--pv-sombra)}
body.eph-previa .header-cart-drawer__panel .header-cart-item__thumb img{background:#fff;border-radius:12px}
body.eph-previa .header-cart-drawer__panel .header-cart-item__name,
body.eph-previa .header-cart-drawer__panel .header-cart-item__name a{color:var(--pv-tinta);font-weight:600}
body.eph-previa .header-cart-drawer__panel .header-cart-item__qty{color:var(--pv-texto)}
/* − N +: los arma `EPH_Previa::cajon_cantidades()` sobre el "Cant: N" del tema. */
body.eph-previa .header-cart-drawer__panel .eph-cant{display:inline-flex;align-items:center;
  border:1px solid var(--pv-borde);border-radius:12px;overflow:hidden;background:var(--pv-fondo)}
body.eph-previa .header-cart-drawer__panel .eph-cant-btn{width:2rem;height:2rem;display:grid;place-items:center;
  padding:0;border:0;background:transparent;color:var(--pv-tinta);font:inherit;font-size:1.125rem;font-weight:600;
  line-height:1;cursor:pointer;transition:background .15s var(--ep-suave,ease)}
body.eph-previa .header-cart-drawer__panel .eph-cant-btn:hover:not(:disabled){background:var(--pv-borde)}
body.eph-previa .header-cart-drawer__panel .eph-cant-btn:focus-visible{outline:2px solid var(--pv-azul);outline-offset:-2px}
body.eph-previa .header-cart-drawer__panel .eph-cant-btn:disabled{opacity:.35;cursor:default}
body.eph-previa .header-cart-drawer__panel .eph-cant-n{min-width:1.9rem;text-align:center;font-weight:600;
  color:var(--pv-tinta);font-variant-numeric:tabular-nums}
body.eph-previa .header-cart-drawer__panel .header-cart-item.eph-cargando,
body.eph-previa .header-cart-drawer.eph-cargando .header-cart-drawer__content{opacity:.55;pointer-events:none}
body.eph-previa .header-cart-drawer__panel .header-cart-item__price{color:var(--pv-tinta);font-weight:600}
body.eph-previa .header-cart-drawer__panel .header-cart-item__remove{color:var(--pv-texto)}
body.eph-previa .header-cart-drawer__panel .header-cart-drawer__footer{background:var(--pv-fondo);
  border-top:1px solid var(--pv-borde)}
body.eph-previa .header-cart-drawer__panel .header-cart-summary__row{color:var(--pv-texto)}
body.eph-previa .header-cart-drawer__panel .header-cart-summary__row strong{color:var(--pv-tinta)}
body.eph-previa .header-cart-drawer__panel .header-cart-summary__row .is-success{color:var(--pv-verde-tinta)}
body.eph-previa .header-cart-drawer__panel .btn{border-radius:999px;font-weight:600;box-shadow:none}
body.eph-previa .header-cart-drawer__panel .btn--primary{background:var(--pv-azul);color:#fff;border-color:transparent}
body.eph-previa .header-cart-drawer__panel .btn--primary:hover{background:var(--pv-azul-osc)}
body.eph-previa .header-cart-drawer__panel .btn--secondary{background:transparent;color:var(--pv-tinta);
  border:1px solid var(--pv-borde)}
body.eph-previa .header-cart-drawer__panel .header-cart-drawer__empty-btn{color:var(--pv-texto)}

/* ─────────────────────────────── El checkout ─────────────────────────────── */

/* El tema le pone overflow-x:hidden al body, y eso convierte al body en el que
   scrollea: el resumen, que es sticky, dejaba de acompañar al bajar. `clip`
   recorta lo mismo sin ese efecto, y el boton de confirmar queda a la vista. */
body.eph-previa.woocommerce-checkout{overflow-x:clip}
/* El encabezado del tema es fijo y mide 117px con el menu (medido el 22/9); con
   la barra de administracion, 32 mas. El resumen se queda justo debajo. */
@media (min-width:960px){
  body.eph-previa .epa .epa-co-resumen{top:calc(117px + 1rem)}
  body.eph-previa.admin-bar .epa .epa-co-resumen{top:calc(149px + 1rem)}
}

/* El tema centra su envoltorio con left:50% y translate; aca lo centra .epa-wrap.
   Sumarle un margin auto encima fue lo que lo corria a la derecha. */
body.eph-previa .electropc-checkout-shortcode{position:static;left:auto;transform:none;
  width:auto;max-width:none;margin:0;padding:0}

body.eph-previa .electropc-checkout-shortcode .woocommerce-message,
body.eph-previa .electropc-checkout-shortcode .woocommerce-info,
body.eph-previa .electropc-checkout-shortcode .woocommerce-error{width:min(1152px,calc(100% - 32px));margin:1rem auto 0;
  background:var(--pv-blanco);color:var(--pv-tinta);border:1px solid var(--pv-borde);
  border-left:3px solid var(--pv-azul);border-radius:12px;box-shadow:none}
body.eph-previa .electropc-checkout-shortcode .woocommerce-error{border-left-color:#E5484D}
body.eph-previa .electropc-checkout-shortcode .woocommerce-message a,
body.eph-previa .electropc-checkout-shortcode .woocommerce-info a{color:var(--pv-azul-texto);font-weight:600;
  background:none;border:0}

/* ── Los campos ── */
body.eph-previa .epa-co .woocommerce-billing-fields > h3{display:none}
body.eph-previa .epa-co .woocommerce-billing-fields__field-wrapper,
body.eph-previa .epa-co .woocommerce-additional-fields__field-wrapper{margin-top:.9rem;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.8rem}
body.eph-previa .epa-co .form-row{grid-column:1 / -1;float:none;width:auto;margin:0 0 .8rem;padding:0}
body.eph-previa .epa-co .form-row-first{grid-column:1}
body.eph-previa .epa-co .form-row-last{grid-column:2}
@media (max-width:620px){
  body.eph-previa .epa-co .form-row-first,
  body.eph-previa .epa-co .form-row-last{grid-column:1 / -1}
}
body.eph-previa .epa-co .form-row label{display:block;margin:0 0 .3rem;font-size:.875rem;font-weight:600;
  color:var(--epa-texto)}
body.eph-previa .epa-co .form-row .required{color:var(--epa-azul-texto);text-decoration:none}
body.eph-previa .epa-co .form-row .optional{font-weight:400}
body.eph-previa .epa-co .input-text,
body.eph-previa .epa-co select,
body.eph-previa .epa-co textarea,
body.eph-previa .epa-co .select2-container .select2-selection{width:100%;font:inherit;font-size:1rem;
  padding:.7rem .8rem;min-height:2.9rem;border-radius:12px;border:1px solid var(--epa-borde);
  background:var(--epa-blanco);color:var(--epa-tinta);box-shadow:none}
body.eph-previa .epa-co .select2-container .select2-selection__rendered{color:var(--epa-tinta);padding:0;line-height:1.5}
body.eph-previa .epa-co .select2-container .select2-selection__arrow{top:50%;transform:translateY(-50%)}
body.eph-previa .epa-co .input-text:focus,
body.eph-previa .epa-co select:focus,
body.eph-previa .epa-co textarea:focus{outline:2px solid var(--epa-azul);outline-offset:1px;border-color:transparent}
body.eph-previa .epa-co .input-text::placeholder{color:var(--epa-texto);opacity:.6}
body.eph-previa .epa-co .form-row .description{font-size:.75rem;color:var(--epa-texto);margin-top:.3rem}
body.eph-previa .epa-co .woocommerce-account-fields label{display:flex;gap:.5rem;align-items:center}
body.eph-previa .select2-dropdown{background:var(--pv-blanco);color:var(--pv-tinta);border-color:var(--pv-borde)}
body.eph-previa .select2-results__option--highlighted[aria-selected]{background:var(--pv-azul);color:#fff}

/* ── El resumen: productos, envio y total ── */
body.eph-previa .epa-co .shop_table{width:100%;margin:.9rem 0 0;border:0;border-collapse:collapse;
  font-size:.875rem;color:var(--epa-texto)}
body.eph-previa .epa-co .shop_table thead{display:none}
body.eph-previa .epa-co .shop_table th,
body.eph-previa .epa-co .shop_table td{padding:.55rem 0;border:0;border-top:1px solid var(--epa-borde);
  background:none;text-align:left;vertical-align:top}
body.eph-previa .epa-co .shop_table tbody tr:first-child td{border-top:0}
body.eph-previa .epa-co .shop_table td:last-child{text-align:right;white-space:nowrap;padding-left:.8rem}
body.eph-previa .epa-co .shop_table .product-name{color:var(--epa-tinta);font-weight:600;font-size:.875rem;line-height:1.35}
body.eph-previa .epa-co .shop_table .product-name .product-quantity{color:var(--epa-texto);font-weight:600}
body.eph-previa .epa-co .shop_table .product-total{color:var(--epa-tinta);font-weight:600}
body.eph-previa .epa-co .shop_table tfoot th{color:var(--epa-texto);font-weight:400}
body.eph-previa .epa-co .shop_table tfoot td{color:var(--epa-tinta);font-weight:600}
body.eph-previa .epa-co .shop_table .order-total th,
body.eph-previa .epa-co .shop_table .order-total td{font-size:1.125rem;font-weight:700;color:var(--epa-tinta)}

/* El envio en el resumen es una fila mas: lo elegido y su precio. Las opciones
   se tildan a la izquierda, en "Como la recibis". */
body.eph-previa .epa-co .eph-co-envio-fila td .amount{color:var(--epa-tinta)}

/* ── Como la recibis ── */
/* El tema posiciona en absoluto los radios del envio; aca van en su tarjeta. */
body.eph-previa .epa-co .eph-co-envio input{position:static}
body.eph-previa .epa-co .eph-co-envio .epa-co-op-num .amount{color:inherit}
body.eph-previa .epa-co .eph-co-direccion{margin-top:.2rem}
/* Se vende solo en Argentina: el pais va igual en el pedido, sin preguntarlo. */
body.eph-previa .epa-co #billing_country_field{display:none}
/* La direccion se ve solo con envio, y ahi es obligatoria (lo valida
   EPH_Previa::validar_envio): el "(opcional)" de WooCommerce mentiria. */
body.eph-previa .epa-co .eph-co-direccion .optional{display:none}


/* ── La aclaracion del pedido, plegada: casi nadie la usa y alargaba la pantalla ── */
body.eph-previa .epa-co .eph-co-notas{margin-top:1.6rem}
body.eph-previa .epa-co .eph-co-notas summary{cursor:pointer;font-size:.875rem;font-weight:600;color:var(--epa-azul-texto)}
body.eph-previa .epa-co .eph-co-notas textarea{min-height:5rem}

/* ── El pago: cada medio es una tarjeta, igual que en la maqueta ── */
body.eph-previa .epa-co #payment{margin-top:1.1rem;background:none;border:0;border-radius:0}
body.eph-previa .epa-co #payment ul.payment_methods{margin:0;padding:0;border:0;list-style:none;display:grid;gap:.5rem}
body.eph-previa .epa-co #payment .wc_payment_method{margin:0;padding:.75rem .9rem;list-style:none;
  background:var(--epa-blanco);border:1px solid var(--epa-borde);border-radius:var(--epa-radio)}
body.eph-previa .epa-co #payment .wc_payment_method:has(> input:checked){border-color:var(--epa-azul);
  box-shadow:0 0 0 1px var(--epa-azul)}
body.eph-previa .epa-co #payment .wc_payment_method > input{accent-color:var(--epa-azul);margin:0 .5rem 0 0}
body.eph-previa .epa-co #payment .wc_payment_method > label{display:inline;color:var(--epa-tinta);font-weight:600;
  font-size:1rem;cursor:pointer}
body.eph-previa .epa-co #payment .wc_payment_method > label img{max-height:1.4rem;vertical-align:middle;margin-left:.3rem}
body.eph-previa .epa-co #payment .eph-co-pago-nota{display:block;margin:.15rem 0 0 1.55rem;font-size:.875rem;
  font-weight:400;color:var(--epa-texto)}
body.eph-previa .epa-co #payment div.payment_box{margin:.6rem 0 0;padding:.7rem .8rem;background:var(--epa-fondo);
  color:var(--epa-texto);border-radius:12px;font-size:.875rem}
body.eph-previa .epa-co #payment div.payment_box::before{display:none}
body.eph-previa .epa-co #payment .place-order{margin:1rem 0 0;padding:0}
body.eph-previa .epa-co .woocommerce-terms-and-conditions-wrapper,
body.eph-previa .epa-co .woocommerce-privacy-policy-text{font-size:.75rem;color:var(--epa-texto)}
body.eph-previa .epa-co .woocommerce-terms-and-conditions-wrapper a,
body.eph-previa .epa-co .woocommerce-privacy-policy-text a{color:var(--epa-azul-texto)}
body.eph-previa .epa-co #place_order{width:100%;margin-top:.8rem;padding:.95rem 1.2rem;border:0;border-radius:999px;
  background:var(--epa-azul);background-image:none;color:#fff;font:inherit;font-weight:600;font-size:1rem;
  box-shadow:none;cursor:pointer;transition:background .2s var(--epa-ease)}
body.eph-previa .epa-co #place_order:hover{background:var(--epa-azul-osc)}

/* ── Abajo del total: confirmar, y la seña como alternativa ── */
/* La casilla de los terminos y el boton, que el script trae de "Como abonas". */
body.eph-previa .epa-co .eph-co-pagar .place-order{margin:1rem 0 0;padding:0}
/* La seña va con borde y no rellena: es la alternativa, no lo elegido. */
body.eph-previa .eph-co-sena{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--pv-borde)}
body.eph-previa .eph-co-sena p{margin:0 0 .7rem;color:var(--pv-texto);font-size:.875rem;line-height:1.5}
body.eph-previa .eph-co-sena-btn{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.7rem 1rem;border-radius:999px;background:transparent;border:1px solid var(--pv-verde);
  color:var(--pv-verde-tinta);font-weight:600;text-decoration:none;font-size:.875rem;line-height:1.3}
body.eph-previa .eph-co-sena-btn:hover{background:var(--pv-verde);color:#fff}

/* ─────────────────────── Gracias por tu compra ─────────────────────── */
/* Misma grilla que el checkout (.epa-co): a la izquierda lo que sigue, a la
   derecha el pedido. */
body.eph-previa .eph-gr-tilde{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;margin:0 0 .8rem;
  border-radius:50%;background:var(--epa-badge-bg);color:var(--epa-badge-texto)}
body.eph-previa .eph-gr-numero{margin-top:.6rem;font-size:1rem;color:var(--epa-texto)}
body.eph-previa .eph-gr-numero b{color:var(--epa-tinta)}
body.eph-previa .eph-gr-caja{padding:1.1rem 1.2rem;background:var(--epa-blanco);border:1px solid var(--epa-borde);
  border-radius:var(--epa-radio)}
body.eph-previa .eph-gr-caja h2{margin:0 0 .6rem}
body.eph-previa .eph-gr-pago{font-size:1rem;color:var(--epa-texto);line-height:1.6}
body.eph-previa .eph-gr-pago h2,
body.eph-previa .eph-gr-pago h3{font-size:1rem;font-weight:600;color:var(--epa-tinta);margin:.6rem 0 .3rem}
body.eph-previa .eph-gr-pago ul{margin:.3rem 0;padding:0;list-style:none}
body.eph-previa .eph-gr-pago strong{color:var(--epa-tinta)}
body.eph-previa .eph-gr-pago a.button,
body.eph-previa .eph-gr-pago .button{display:inline-flex;margin-top:.6rem;padding:.8rem 1.1rem;border-radius:999px;
  background:var(--epa-azul);background-image:none;color:#fff;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:none}
body.eph-previa .eph-gr-lista{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;color:var(--epa-tinta);font-size:1rem}
body.eph-previa .eph-gr-destino{margin:0;color:var(--epa-tinta);font-size:1rem}
body.eph-previa .eph-gr-nota{margin:.5rem 0 0;font-size:.875rem;color:var(--epa-texto)}
body.eph-previa .eph-gr-acciones{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem}
body.eph-previa .eph-gr-items{margin-top:.9rem;display:grid;gap:.6rem}
body.eph-previa .eph-gr-item{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;color:var(--epa-tinta)}
body.eph-previa .eph-gr-item span{font-weight:600;line-height:1.35}
body.eph-previa .eph-gr-item small{color:var(--epa-texto);font-weight:600}
body.eph-previa .eph-gr-item small.eph-gr-mejora{display:block;font-weight:400}
/* La mejora elegida en el carrito lateral: "Con 32GB RAM · 1TB" */
.header-cart-item__mejora{margin:.1rem 0 .2rem;font-size:.75rem;font-weight:600;line-height:1.35;color:var(--epa-azul-texto,#0052D4)}
body.eph-previa .eph-gr-item b{white-space:nowrap}
body.eph-previa .eph-gr-sub{margin-top:1.3rem}
body.eph-previa .eph-gr-datos{margin:.7rem 0 0;display:grid;gap:.45rem}
body.eph-previa .eph-gr-datos > div{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem}
body.eph-previa .eph-gr-datos dt{color:var(--epa-texto)}
body.eph-previa .eph-gr-datos dd{margin:0;color:var(--epa-tinta);font-weight:600;text-align:right;word-break:break-word}
/* Lo que otros plugins cuelgan de woocommerce_thankyou. Los avisos de venta
   (Facebook, Google) son scripts y corren igual aunque no se vea; lo visible
   era el bloque "Pedido extra" del plugin de campos, que repetia DNI y tipo de
   factura, ya mostrados en "Tus datos". */
body.eph-previa .eph-gr-hooks{display:none}

/* La cuenta para transferir, con botones de copiar. */
body.eph-previa .eph-gr-intro{margin:0 0 .8rem;font-size:1rem;color:var(--epa-texto)}
body.eph-previa .eph-gr-intro b{color:var(--epa-tinta);font-size:1.125rem}
body.eph-previa .eph-gr-cuenta{margin:0;display:grid;border:1px solid var(--epa-borde);border-radius:var(--epa-radio);overflow:hidden}
body.eph-previa .eph-gr-cuenta > div{display:grid;grid-template-columns:5.5rem 1fr;gap:.8rem;align-items:center;
  padding:.65rem .9rem;border-top:1px solid var(--epa-borde);font-size:1rem}
body.eph-previa .eph-gr-cuenta > div:first-child{border-top:0}
body.eph-previa .eph-gr-cuenta dt{color:var(--epa-texto);font-size:.875rem}
body.eph-previa .eph-gr-cuenta dd{margin:0;display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  color:var(--epa-tinta);font-weight:600;min-width:0}
body.eph-previa .eph-gr-cuenta dd span{overflow-wrap:anywhere}
body.eph-previa .eph-copiar{flex:none;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--epa-azul);
  background:transparent;color:var(--epa-azul-texto);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
body.eph-previa .eph-copiar:hover{background:var(--epa-azul);color:#fff}
body.eph-previa .eph-gr-informar{display:flex;width:100%;margin-top:1rem;font-size:1rem;padding:1rem 1.2rem}