/*
 * checkout.css — Carrito, Checkout y Confirmación · Molykote Theme
 * Portado del diseño en Carrito.html / Envio.html / Pago.html / Confirmacion.html
 */

/* ── Alias de tokens del diseño a tokens Molykote ───────────────────────── */
:root {
  --surface-0:    var(--tm-surface-0);
  --surface-1:    var(--tm-surface-1);
  --surface-2:    #edf0f3;
  --ink-0:        var(--tm-ink-0);
  --ink-2:        var(--tm-ink-2);
  --ink-3:        var(--tm-ink-3);
  --ink-4:        #8a97a4;
  --ink-5:        #b8c2cc;
  --steel-500:    var(--tm-steel-500);
  --steel-600:    var(--tm-steel-600);
  --steel-400:    oklch(52% 0.09 245);
  --steel-200:    oklch(78% 0.05 245);
  --steel-50:     oklch(97% 0.015 245);
  --line:         var(--tm-line);
  --line-strong:  #c0ccd8;
  --signal-ok:    var(--tm-ok);
  --signal-warn:  oklch(65% 0.15 70);
  --signal-danger: oklch(52% 0.18 20);
  --font-sans:    var(--tm-font-sans);
  --font-body:    var(--tm-font-body);
  --font-mono:    var(--tm-font-mono);
}

/* ── Progress bar (compartida) ───────────────────────────────────────────── */
.cart-progress {
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  padding: 0 40px;
}
.cart-progress-inner {
  display: flex;
  align-items: stretch;
  max-width: 900px;
}
.cp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px 16px 0;
  position: relative;
}
.cp-step + .cp-step { padding-left: 28px; }
.cp-step + .cp-step::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 1px;
  background: var(--line-strong);
  transform: translateY(-50%);
}
.cp-step.done + .cp-step::before,
.cp-step.active + .cp-step::before { background: var(--steel-200); }
.cp-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
  border: 1.5px solid var(--line-strong);
  color: var(--ink-4);
}
.cp-step.active .cp-num { background: var(--steel-500); border-color: var(--steel-500); color: white; }
.cp-step.done   .cp-num { background: var(--signal-ok); border-color: var(--signal-ok); color: white; font-size: 11px; }
.cp-label {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-4);
  white-space: nowrap;
}
.cp-step.active .cp-label { color: var(--ink-0); }
.cp-step.done   .cp-label { color: var(--ink-2); }

/* ── Layout 2 columnas (carrito, envío, pago) ────────────────────────────── */
.cart-layout,
.ship-layout,
.pay-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  align-items: start;
  border-bottom: 1px solid var(--line);
  min-height: 60vh;
}

/* ── Columna izquierda ───────────────────────────────────────────────────── */
.cart-items-col,
.ship-main,
.pay-main {
  border-right: 1px solid var(--line);
  min-height: 100%;
}
.ship-main,
.pay-main {
  padding: 32px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Cabecera columna carrito ────────────────────────────────────────────── */
.cart-col-head {
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-col-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-0);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-col-title .count {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  background: var(--steel-50);
  color: var(--steel-600);
  border: 1px solid var(--steel-200);
}
.cart-clear-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.cart-clear-btn:hover { color: var(--signal-danger); }

/* ── Fila de ítem ────────────────────────────────────────────────────────── */
.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-0);
  transition: background .12s;
  position: relative;
}
.cart-item:hover { background: var(--surface-1); }

.ci-thumb {
  width: 100px;
  aspect-ratio: 1;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ci-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.ci-thumb-placeholder {
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(11,21,32,.04) 8px, rgba(11,21,32,.04) 9px);
  display: grid;
  place-items: center;
}
.ci-illus {
  width: 56%; aspect-ratio: .65;
  background: linear-gradient(160deg, #f0f3f7 0%, #d4dce6 100%);
  border-radius: 3px 3px 1px 1px;
  box-shadow: 0 4px 12px rgba(11,21,32,.12), inset 5px 0 12px rgba(255,255,255,.6);
  border: 1px solid rgba(11,21,32,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ci-illus::before { content:""; height:18%; background:linear-gradient(180deg,#e0e7ee,#c8d2dc); border-bottom:1px solid rgba(11,21,32,.07); flex-shrink:0; }
.ci-illus-body { background: var(--steel-500); flex:1; margin:0 5px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px; }
.ci-illus-body .s1 { font-family:var(--font-sans); font-size:6px; letter-spacing:.2em; color:rgba(255,255,255,.6); text-transform:uppercase; }
.ci-illus-body .s2 { font-family:var(--font-sans); font-weight:700; font-size:10px; color:white; }

.ci-meta { display:flex; flex-direction:column; gap:2px; }
.ci-sku  { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-4); }
.ci-name { font-family:var(--font-sans); font-weight:600; font-size:14.5px; color:var(--ink-0); line-height:1.25; margin-top:2px; }
.ci-family { font-family:var(--font-mono); font-size:10px; color:var(--steel-500); letter-spacing:.06em; text-transform:uppercase; margin-top:1px; }
.ci-variant { display:flex; align-items:center; gap:8px; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.ci-tags { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
.ci-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.ci-tag.ok   { color:var(--signal-ok);   border-color:oklch(85% .08 150); background:oklch(96% .04 150); }
.ci-tag.warn { color:var(--signal-warn);  border-color:oklch(82% .12 70);  background:oklch(96% .05 70); }

.ci-actions { display:flex; gap:12px; margin-top:12px; align-items:center; }
.ci-action {
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4);
  background:none; border:none; cursor:pointer; padding:0; letter-spacing:.04em;
  display:flex; align-items:center; gap:4px; text-decoration:none;
}
.ci-action:hover { color:var(--ink-1); }
.ci-action.del:hover { color:var(--signal-danger); }
.ci-action-sep { color:var(--line-strong); font-size:12px; }

.ci-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; min-width:130px; }
.ci-price { font-family:var(--font-mono); font-size:16px; font-weight:500; color:var(--ink-0); }
.ci-price .cur { font-size:10px; color:var(--ink-4); margin-right:2px; }
.ci-unit { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); margin-top:2px; text-align:right; }
.ci-subtotal { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); text-align:right; margin-top:4px; padding-top:8px; border-top:1px dashed var(--line); }
.ci-subtotal .total { font-size:14px; font-weight:500; color:var(--ink-0); }

/* qty stepper */
.ci-qty { display:inline-flex; border:1px solid var(--line); }
.ci-qty button { width:32px; height:32px; border:none; background:none; cursor:pointer; font-size:16px; color:var(--ink-2); display:grid; place-items:center; }
.ci-qty button:hover { background:var(--surface-2); }
.ci-qty input { width:40px; height:32px; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-family:var(--font-mono); font-size:13px; color:var(--ink-0); outline:none; -moz-appearance:textfield; }
.ci-qty input::-webkit-outer-spin-button,
.ci-qty input::-webkit-inner-spin-button { -webkit-appearance:none; }

/* ── Barra promo + OC ────────────────────────────────────────────────────── */
.cart-promo-bar {
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.promo-input-wrap { display:flex; flex:0 1 320px; border:1px solid var(--line); }
.promo-input { flex:1; padding:9px 12px; border:none; font-family:var(--font-mono); font-size:12px; color:var(--ink-1); background:var(--surface-0); outline:none; }
.promo-input::placeholder { color:var(--ink-5); }
.promo-btn { padding:9px 14px; background:var(--surface-0); border:none; border-left:1px solid var(--line); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--steel-600); cursor:pointer; }
.promo-btn:hover { background:var(--steel-50); }
.promo-sep { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-5); }
.oc-input-wrap { display:flex; flex:0 1 260px; border:1px solid var(--line); }
.oc-label { padding:9px 12px; background:var(--surface-2); border-right:1px solid var(--line); font-family:var(--font-mono); font-size:10px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; }
.oc-input { flex:1; padding:9px 12px; border:none; font-family:var(--font-mono); font-size:12px; color:var(--ink-1); background:var(--surface-0); outline:none; }
.oc-input::placeholder { color:var(--ink-5); }
.promo-error { font-family:var(--font-mono); font-size:10.5px; color:var(--signal-danger); }
.promo-ok    { font-family:var(--font-mono); font-size:10.5px; color:var(--signal-ok); }

/* ── Cross-sell ──────────────────────────────────────────────────────────── */
.cart-cross-sell { padding:24px 32px; border-bottom:1px solid var(--line); }
.ccs-head { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.ccs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.ccs-card { background:var(--surface-0); padding:14px; display:flex; gap:12px; align-items:flex-start; cursor:pointer; transition:background .12s; }
.ccs-card:hover { background:var(--steel-50); }
.ccs-thumb { width:48px; height:48px; background:var(--surface-2); display:grid; place-items:center; flex-shrink:0; font-family:var(--font-mono); font-size:8px; color:var(--ink-4); overflow:hidden; }
.ccs-thumb img { width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.ccs-info { flex:1; }
.ccs-sku  { font-family:var(--font-mono); font-size:9.5px; color:var(--ink-4); }
.ccs-name { font-family:var(--font-sans); font-weight:600; font-size:12.5px; color:var(--ink-0); line-height:1.25; margin-top:2px; }
.ccs-price { font-family:var(--font-mono); font-size:12px; color:var(--ink-0); margin-top:4px; }
.ccs-add { width:28px; height:28px; background:var(--steel-500); border:none; color:white; cursor:pointer; display:grid; place-items:center; flex-shrink:0; margin-top:2px; transition:background .1s; }
.ccs-add:hover { background:var(--steel-600); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.cart-empty { padding:80px 40px; text-align:center; border-right:1px solid var(--line); }
.cart-empty-icon { color:var(--ink-5); margin-bottom:20px; }
.cart-empty h3 { font-family:var(--font-sans); font-weight:600; font-size:20px; color:var(--ink-1); margin:0 0 8px; }
.cart-empty p { font-size:13.5px; color:var(--ink-3); line-height:1.6; max-width:320px; margin:0 auto 24px; }

/* ── Panel resumen (derecha) ─────────────────────────────────────────────── */
.cart-summary { position:sticky; top:0; background:var(--surface-0); }
.summary-head { padding:20px 24px; border-bottom:1px solid var(--line); font-family:var(--font-sans); font-weight:600; font-size:15px; color:var(--ink-0); }
.summary-mini-items { padding:16px 24px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--line); }
.mini-item { display:flex; align-items:center; gap:12px; }
.mini-thumb { width:44px; height:44px; background:var(--surface-2); flex-shrink:0; display:grid; place-items:center; font-family:var(--font-mono); font-size:7.5px; color:var(--ink-4); position:relative; overflow:hidden; }
.mini-thumb img { width:100%; height:100%; object-fit:contain; }
.mini-thumb .qty-badge { position:absolute; top:-6px; right:-6px; width:17px; height:17px; border-radius:50%; background:var(--ink-0); color:white; font-size:9px; display:grid; place-items:center; font-family:var(--font-mono); }
.mini-info { flex:1; }
.mini-name  { font-family:var(--font-sans); font-weight:600; font-size:12px; color:var(--ink-0); line-height:1.3; }
.mini-sku   { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); }
.mini-price { font-family:var(--font-mono); font-size:12px; color:var(--ink-0); flex-shrink:0; }
.summary-body { padding:0 24px; }
.summary-row { display:flex; justify-content:space-between; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.summary-row:last-of-type { border-bottom:none; }
.sr-label { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.03em; }
.sr-val   { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-0); text-align:right; }
.sr-val.ok     { color:var(--signal-ok); }
.sr-val.muted  { color:var(--ink-3); }
.summary-total-row { padding:16px 24px; background:var(--ink-0); display:flex; justify-content:space-between; align-items:center; }
.st-label  { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.st-amount { font-family:var(--font-mono); font-size:22px; font-weight:500; color:white; letter-spacing:-.01em; }
.st-cur    { font-size:11px; color:rgba(255,255,255,.45); margin-right:3px; }
.st-iva    { font-family:var(--font-mono); font-size:9.5px; color:rgba(255,255,255,.35); margin-top:3px; }
.summary-cta { padding:16px 24px; display:flex; flex-direction:column; gap:8px; }
.summary-cta-btn { width:100%; padding:13px 16px; font-family:var(--font-sans); font-weight:600; font-size:13.5px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .12s; text-decoration:none; box-sizing:border-box; }
.scb-primary   { background:var(--steel-500); color:white; }
.scb-primary:hover { background:var(--steel-600); }
.scb-primary:disabled { background:var(--ink-5); cursor:not-allowed; }
.scb-secondary { background:var(--surface-0); color:var(--ink-0); border:1.5px solid var(--line-strong); }
.scb-secondary:hover { border-color:var(--ink-2); background:var(--surface-1); }
.scb-ghost { background:transparent; color:var(--ink-3); font-weight:400; font-size:12px; }
.scb-ghost:hover { color:var(--ink-0); }
.summary-trust { padding:16px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.trust-row  { display:flex; align-items:flex-start; gap:10px; }
.trust-icon { width:28px; height:28px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; flex-shrink:0; color:var(--ink-3); }
.trust-text .t1 { font-family:var(--font-sans); font-weight:600; font-size:12.5px; color:var(--ink-0); }
.trust-text .t2 { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); margin-top:1px; }
.summary-b2b { margin:0 24px 16px; padding:14px 16px; background:var(--surface-1); border:1px solid var(--line); border-left:3px solid var(--steel-400); }
.b2b-head { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-500); margin-bottom:6px; }
.b2b-body { font-size:12px; color:var(--ink-2); line-height:1.5; }
.b2b-link { font-family:var(--font-mono); font-size:10.5px; color:var(--steel-500); cursor:pointer; margin-top:6px; display:inline-block; text-decoration:none; }
.b2b-link:hover { color:var(--steel-600); }

/* ── Checkout: secciones ─────────────────────────────────────────────────── */
.ship-section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-0);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ship-section-title .stepdot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--steel-500);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}

/* Checkout form fields */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field.full { grid-column:1/-1; }
.form-field label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 11px 13px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-0);
  outline: none;
  background: var(--surface-0);
  transition: border-color .12s;
  width: 100%;
  box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--steel-400); }
.form-field input::placeholder,
.form-field textarea::placeholder { color:var(--ink-5); }
.form-hint { font-size:11px; color:var(--ink-4); margin-top:2px; }

.mk-checkout-block { display:flex; flex-direction:column; gap:24px; margin-top:16px; }

/* Métodos de entrega */
.delivery-options { display:flex; flex-direction:column; gap:10px; }
.delivery-opt {
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--line); padding:16px 18px;
  cursor:pointer; transition:border-color .12s, background .12s;
}
.delivery-opt:hover { background:var(--surface-1); }
.delivery-opt.selected { border-color:var(--steel-500); background:var(--steel-50); }
.delivery-radio {
  width:17px; height:17px; border-radius:50%;
  border:1.5px solid var(--line-strong); flex-shrink:0; margin-top:2px; position:relative;
}
.delivery-opt.selected .delivery-radio { border-color:var(--steel-500); }
.delivery-opt.selected .delivery-radio::after {
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--steel-500);
}
.delivery-icon { width:36px; height:36px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-3); flex-shrink:0; }
.delivery-opt.selected .delivery-icon { color:var(--steel-500); border-color:var(--steel-200); background:white; }
.delivery-info { flex:1; }
.delivery-name { font-family:var(--font-sans); font-weight:600; font-size:13.5px; color:var(--ink-0); }
.delivery-desc { font-size:12px; color:var(--ink-3); margin-top:2px; }
.delivery-price { font-family:var(--font-mono); font-size:13px; color:var(--ink-0); text-align:right; flex-shrink:0; }
.delivery-price.free { color:var(--signal-ok); }

/* Toggle CFDI */
.cfdi-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); }
.cfdi-toggle-label { font-family:var(--font-sans); font-weight:600; font-size:13.5px; color:var(--ink-0); }
.cfdi-toggle-sub { font-size:12px; color:var(--ink-3); margin-top:2px; }

.mk-switch-wrap { display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; }
.mk-switch-input { position:absolute; opacity:0; width:0; height:0; }
.mk-switch {
  display:inline-block; width:42px; height:24px; background:var(--line-strong);
  border-radius:12px; position:relative; flex-shrink:0;
  transition:background .18s; border:none;
}
.mk-switch::after {
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; background:white; border-radius:50%;
  transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.mk-switch-input:checked + .mk-switch { background:var(--steel-500); }
.mk-switch-input:checked + .mk-switch::after { transform:translateX(18px); }
.mk-switch-input:focus + .mk-switch { outline:2px solid var(--steel-400); outline-offset:2px; }

/* Métodos de pago */
.pm-tabs { display:flex; gap:10px; margin-bottom:20px; }
.pm-tab {
  flex:1; padding:16px 14px; border:1.5px solid var(--line); cursor:pointer;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:border-color .12s, background .12s; background:var(--surface-0);
}
.pm-tab:hover { background:var(--surface-1); }
.pm-tab.selected { border-color:var(--steel-500); background:var(--steel-50); }
.pm-tab-icon { color:var(--ink-3); }
.pm-tab.selected .pm-tab-icon { color:var(--steel-500); }
.pm-tab-label { font-family:var(--font-sans); font-weight:600; font-size:12.5px; color:var(--ink-0); }
.pm-tab-sub { font-family:var(--font-mono); font-size:9.5px; color:var(--ink-4); }

/* Campo número de tarjeta con logos */
.card-number-wrap { position:relative; }
.card-brand-icons { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; gap:5px; }
.card-brand-chip { font-family:var(--font-mono); font-size:8px; padding:2px 5px; border:1px solid var(--line); color:var(--ink-4); background:var(--surface-1); letter-spacing:.02em; }
.save-card-row { display:flex; align-items:center; gap:9px; margin-top:4px; }
.save-card-row input[type=checkbox] { accent-color:var(--steel-500); width:15px; height:15px; }
.save-card-row label { font-size:12.5px; color:var(--ink-2); cursor:pointer; }

/* SPEI/Transfer box */
.transfer-box { border:1px solid var(--line); background:var(--surface-1); padding:20px; }
.transfer-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line); }
.transfer-row:last-child { border-bottom:none; }
.transfer-label { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.transfer-value { font-family:var(--font-mono); font-size:13px; color:var(--ink-0); font-weight:500; display:flex; align-items:center; gap:8px; }
.copy-btn { background:var(--surface-0); border:1px solid var(--line); padding:3px 8px; font-family:var(--font-mono); font-size:9.5px; color:var(--steel-500); cursor:pointer; }
.copy-btn:hover { background:var(--steel-50); }
.transfer-note { font-size:12px; color:var(--ink-3); line-height:1.55; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

/* OXXO box */
.oxxo-box { border:1px solid var(--line); background:var(--surface-1); padding:20px; text-align:center; }
.oxxo-ref { font-family:var(--font-mono); font-size:26px; font-weight:500; color:var(--ink-0); letter-spacing:.06em; margin:10px 0; }
.oxxo-note { font-size:12px; color:var(--ink-3); line-height:1.55; }

/* Nav buttons */
.nav-btns { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.back-link {
  font-family:var(--font-mono); font-size:12px; color:var(--ink-3);
  cursor:pointer; display:flex; align-items:center; gap:6px;
  background:none; border:none; text-decoration:none;
}
.back-link:hover { color:var(--ink-0); }

/* ── Confirmación ────────────────────────────────────────────────────────── */
.conf-hero {
  padding: 56px 40px 44px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 50% 0%, var(--steel-50) 0%, transparent 60%);
}
.conf-icon {
  width:68px; height:68px; border-radius:50%;
  background:oklch(96% .04 150); border:2px solid var(--signal-ok);
  display:grid; place-items:center; margin:0 auto 22px; color:var(--signal-ok);
}
.conf-title { font-family:var(--font-sans); font-weight:700; font-size:30px; letter-spacing:-.02em; color:var(--ink-0); margin:0 0 10px; }
.conf-sub { font-size:14px; color:var(--ink-3); max-width:480px; margin:0 auto 20px; line-height:1.6; }
.conf-order-num {
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px;
  background:var(--surface-0); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:14px; color:var(--ink-0);
}
.conf-order-num .lbl { color:var(--ink-3); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }

.conf-body { display:grid; grid-template-columns:1fr 380px; border-bottom:1px solid var(--line); }
.conf-main { border-right:1px solid var(--line); padding:32px 40px 48px; }

.tracker { display:flex; margin-bottom:40px; }
.tracker-step { flex:1; text-align:center; position:relative; }
.tracker-step::before { content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--line); }
.tracker-step:first-child::before { display:none; }
.tracker-step.done   ::before { background:var(--steel-400); }
.tracker-step.active ::before { background:var(--steel-400); }
.tracker-dot {
  width:30px; height:30px; border-radius:50%;
  background:var(--surface-0); border:2px solid var(--line-strong);
  display:grid; place-items:center; margin:0 auto 8px; position:relative; z-index:1; color:var(--ink-4);
}
.tracker-step.done   .tracker-dot { background:var(--steel-500); border-color:var(--steel-500); color:white; }
.tracker-step.active .tracker-dot { border-color:var(--steel-500); color:var(--steel-500); }
.tracker-label { font-family:var(--font-sans); font-weight:600; font-size:11.5px; color:var(--ink-3); }
.tracker-step.done   .tracker-label,
.tracker-step.active .tracker-label { color:var(--ink-0); }
.tracker-date { font-family:var(--font-mono); font-size:9.5px; color:var(--ink-4); margin-top:2px; }

.conf-section-title { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.conf-section { margin-bottom:32px; }

.conf-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.conf-item:last-child { border-bottom:none; }
.conf-thumb { width:52px; height:52px; background:var(--surface-2); display:grid; place-items:center; flex-shrink:0; overflow:hidden; }
.conf-thumb img { width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.conf-item-info { flex:1; }
.conf-item-name { font-family:var(--font-sans); font-weight:600; font-size:13.5px; color:var(--ink-0); }
.conf-item-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); margin-top:2px; }
.conf-item-price { font-family:var(--font-mono); font-size:13px; color:var(--ink-0); flex-shrink:0; }

.conf-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.conf-info-block .ib-label { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:6px; }
.conf-info-block .ib-value { font-size:13px; color:var(--ink-1); line-height:1.6; }

.conf-actions { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.conf-btn { padding:11px 16px; font-family:var(--font-sans); font-weight:500; font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:background .1s, border-color .1s; text-decoration:none; border:none; }
.cbtn-primary   { background:var(--steel-500); color:white; }
.cbtn-primary:hover { background:var(--steel-600); }
.cbtn-secondary { background:var(--surface-0); color:var(--ink-1); border:1px solid var(--line); }
.cbtn-secondary:hover { background:var(--surface-2); }

.conf-rail { padding:24px; }
.conf-summary-head { font-family:var(--font-sans); font-weight:600; font-size:15px; color:var(--ink-0); margin-bottom:16px; }
.conf-total-box { background:var(--ink-0); padding:18px 20px; margin-bottom:20px; }
.conf-total-box .l { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.conf-total-box .v { font-family:var(--font-mono); font-size:26px; font-weight:500; color:white; margin-top:4px; }
.conf-total-box .v .cur { font-size:12px; color:rgba(255,255,255,.45); margin-right:3px; }
.conf-rail-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
.conf-rail-row:last-child { border-bottom:none; }
.conf-rail-row .l { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.conf-rail-row .v { font-family:var(--font-mono); font-size:12px; color:var(--ink-0); }

.next-steps { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.next-step-card { border:1px solid var(--line); padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
.next-step-icon { width:30px; height:30px; background:var(--steel-50); border:1px solid var(--steel-200); color:var(--steel-500); display:grid; place-items:center; flex-shrink:0; }
.next-step-title { font-family:var(--font-sans); font-weight:600; font-size:12.5px; color:var(--ink-0); }
.next-step-sub { font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.5; }

.conf-continue { padding:48px 40px; text-align:center; }
.conf-continue h3 { font-family:var(--font-sans); font-weight:600; font-size:20px; color:var(--ink-0); margin-bottom:8px; }
.conf-continue p { font-size:13.5px; color:var(--ink-3); margin-bottom:20px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.mk-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink-0); color:white; font-family:var(--font-mono); font-size:12px;
  padding:10px 18px; display:flex; align-items:center; gap:10px; z-index:9999;
  pointer-events:none; letter-spacing:.03em; opacity:0; transition:opacity .2s, transform .2s;
}
.mk-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.mk-toast .t-dot { width:6px; height:6px; border-radius:50%; background:var(--signal-ok); flex-shrink:0; }

/* WooCommerce notices en checkout */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  padding: 12px 16px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  border-left: 3px solid var(--steel-500);
  background: var(--surface-1);
  list-style: none;
}
.woocommerce-error { border-left-color: var(--signal-danger); }
.woocommerce-message { border-left-color: var(--signal-ok); }

/* Ocultar botón native WC "Actualizar carrito" — usamos JS */
[name="update_cart"] { display:none !important; }