/* CiberModa — Cart drawer */
.cm-hidden { display: none !important; }
.cm-no-scroll { overflow: hidden; }

#cm-cart-drawer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; }
#cm-cart-drawer.cm-open { pointer-events: auto; visibility: visible; }

#cm-cart-overlay {
  position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55);
  opacity: 0; transition: opacity .25s ease;
}
#cm-cart-drawer.cm-open #cm-cart-overlay { opacity: 1; }

#cm-cart-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 100%; max-width: 420px; background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
}
#cm-cart-drawer.cm-open #cm-cart-panel { transform: translateX(0); }

.cm-cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
.cm-cart-header h3 { font-weight: 700; font-size: 1.1rem; }
.cm-cart-header button { font-size: 1.3rem; line-height: 1; padding: .25rem .5rem; }

#cm-cart-lines { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }

.cm-cart-line { display: flex; gap: .9rem; padding: .75rem 0; border-bottom: 1px solid #f1f5f9; }
.cm-line-img { flex: 0 0 72px; }
.cm-line-img img { width: 72px; height: 72px; object-fit: contain; background: #f8fafc; border-radius: .5rem; }
.cm-line-info { flex: 1; min-width: 0; }
.cm-line-title { font-weight: 600; font-size: .9rem; display: block; line-height: 1.25; color: #0f172a; }
.cm-line-variant { color: #64748b; font-size: .78rem; display: block; }
.cm-line-price { font-weight: 700; margin-top: .15rem; }

.cm-line-controls { display: flex; align-items: center; gap: .55rem; margin-top: .4rem; }
.cm-qty-btn {
  width: 26px; height: 26px; border-radius: 9999px; border: 1px solid #cbd5e1;
  font-weight: 700; line-height: 1; color: #334155; background: #fff;
}
.cm-qty-btn:hover { background: #f1f5f9; }
.cm-qty { min-width: 1.4rem; text-align: center; font-weight: 600; font-size: .9rem; }
.cm-line-remove { margin-left: auto; color: #94a3b8; }
.cm-line-remove:hover { color: #ef4444; }

#cm-cart-empty { text-align: center; color: #64748b; padding: 3rem 1.5rem; }
#cm-cart-empty i { font-size: 2.4rem; display: block; margin-bottom: .75rem; color: #cbd5e1; }

#cm-cart-footer { border-top: 1px solid #e2e8f0; padding: 1rem 1.25rem 1.4rem; background: #fff; }
.cm-subtotal-row {
  display: flex; justify-content: space-between; font-weight: 700;
  font-size: 1.05rem; margin-bottom: .75rem;
}
.cm-checkout-btn {
  display: block; width: 100%; text-align: center; padding: .9rem 1rem;
  border-radius: .5rem; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #7c3aed, #db2777);
}
.cm-checkout-btn:hover { filter: brightness(1.08); }
.cm-keep-shopping { display: block; text-align: center; margin-top: .65rem; font-size: .85rem; color: #64748b; text-decoration: underline; }

/* Barra progreso envío gratis */
#cm-fs-wrap { margin-bottom: .85rem; }
#cm-fs-text { font-size: .8rem; color: #334155; margin-bottom: .35rem; display: block; }
.cm-fs-track { height: 8px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
#cm-fs-bar { height: 100%; width: 0; border-radius: 9999px; background: linear-gradient(90deg, #22c55e, #84cc16); transition: width .35s ease; }

/* Botón carrito en nav */
.cm-nav-cart { position: relative; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; cursor: pointer; }
.cm-nav-cart--main { padding: .5rem; border-radius: .5rem; transition: background .15s; }
.cm-nav-cart--main:hover { background: rgba(255,255,255,.12); }
#cm-cart-count,
.cm-cart-badge {
  position: absolute; top: -8px; right: -12px; min-width: 18px; height: 18px;
  border-radius: 9999px; background: #db2777; color: #fff; font-size: .68rem;
  font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Botón agregar al carrito en PDP */
.cm-add-btn {
  display: block; width: 100%; text-align: center; padding: 1rem;
  border: 2px solid #7c3aed; color: #7c3aed; border-radius: .375rem;
  font-weight: 700; margin-top: .6rem; transition: all .15s ease;
}
.cm-add-btn:hover { background: #7c3aed; color: #fff; }

/* Cupones Cyber-Snake en el drawer */
.cm-coupon-form { display: flex; gap: .5rem; margin-bottom: .85rem; }
.cm-coupon-form input {
  flex: 1; padding: .55rem .75rem; font-size: .85rem;
  border: 1px solid #e2e8f0; border-radius: .375rem;
}
.cm-coupon-form button {
  padding: .55rem .9rem; font-size: .8rem; font-weight: 700; color: #7c3aed;
  border: 2px solid #7c3aed; border-radius: .375rem; transition: all .15s ease;
}
.cm-coupon-form button:hover { background: #7c3aed; color: #fff; }
.cm-discount-row {
  color: #16a34a; font-weight: 600;
  background: linear-gradient(90deg, rgba(22,163,74,.08), rgba(22,163,74,.02));
  border-radius: .375rem; padding: .55rem .6rem; margin: 0 -.6rem .75rem;
}
.cm-coupon-remove { color: #94a3b8; font-weight: 700; margin-left: .3rem; }
.cm-coupon-remove:hover { color: #dc2626; }
.cm-total-row {
  font-size: 1.15rem; font-weight: 800;
  border-top: 2px solid #7c3aed; padding-top: .65rem; margin-top: .35rem;
}
/* Subtotal tachado cuando hay cupón (JS le agrega esta clase) */
.cm-subtotal-struck span:last-child { text-decoration: line-through; color: #94a3b8; }

/* ============================================================
   Pulido visual global (nivel Apple/Stripe) — sesión Fable 5
   ============================================================ */

/* Ícono SVG del carrito en nav (reemplaza al kit FA, que fallaba) */
.cm-cart-svg { display: block; width: 24px; height: 24px; }
.cm-nav-cart--main { color: #fff; }
.cm-nav-cart--main:active .cm-cart-svg { transform: scale(.92); }
.cm-cart-svg { transition: transform .15s ease; }

/* Badge del carrito: pop al agregar (cm-cart.js re-dispara la animación) */
@keyframes cm-badge-pop {
  0% { transform: scale(.4); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.cm-cart-badge.cm-pop { animation: cm-badge-pop .3s cubic-bezier(.34, 1.56, .64, 1); }

/* Etiqueta de descuento "% OFF": verde sólido vibrante, contraste AA garantizado */
.cm-off-badge {
  display: inline-block; background: #00a650; color: #fff;
  font-weight: 800; font-size: .72rem; letter-spacing: .04em;
  padding: .18rem .45rem; border-radius: .28rem; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 166, 80, .35);
}

/* Mini resumen de reseñas (estilo Mercado Libre, estrellas azules) */
.cm-mini-summary {
  display: flex; align-items: center; gap: .45rem; margin-top: .5rem;
  cursor: pointer; width: fit-content; border-radius: .375rem;
  padding: .1rem .25rem; margin-left: -.25rem;
  transition: background .15s ease;
}
.cm-mini-summary:hover { background: rgba(52, 131, 250, .08); }
.cm-mini-stars { display: inline-flex; gap: 2px; color: #3483fa; line-height: 1; }
.cm-mini-stars svg { display: block; }
.cm-mini-count { color: #3483fa; }
.cm-mini-summary:hover .cm-mini-count { text-decoration: underline; }

/* Micro-interacciones: botones de compra */
[data-cm-add-to-cart], [data-cm-buy-now], .cm-checkout-btn, .cm-card-add-btn {
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, color .15s ease;
}
[data-cm-buy-now]:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(124, 58, 237, .35); }
[data-cm-buy-now]:active, [data-cm-add-to-cart]:active, .cm-checkout-btn:active { transform: scale(.985); }
[data-cm-buy-now][disabled], [data-cm-add-to-cart][disabled] { opacity: .5; cursor: not-allowed; }

/* Focus rings elegantes y consistentes (accesibilidad teclado) */
.cm-nav-cart:focus-visible,
[data-cm-add-to-cart]:focus-visible,
[data-cm-buy-now]:focus-visible,
.cm-checkout-btn:focus-visible,
.cm-keep-shopping:focus-visible,
.cm-qty-btn:focus-visible,
.cm-coupon-form button:focus-visible,
.cm-mini-summary:focus-visible {
  outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: .375rem;
}
.cm-coupon-form input:focus-visible {
  outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}

/* Tarjetas de producto: lift sutil al hover */
.product_card { transition: transform .2s ease, box-shadow .2s ease; display: block; }
.product_card:hover { transform: translateY(-3px); }
.product_card:hover .pc_image_wrapper { box-shadow: 0 10px 24px rgba(15, 23, 42, .10); }
.pc_image_wrapper { transition: box-shadow .2s ease; border-radius: .5rem; }

/* Líneas del drawer: aparición suave */
@keyframes cm-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.cm-cart-line { animation: cm-line-in .22s ease both; }