/* ════════════════════════════════════════════════════════════════════
   CARD DE PRODUCTO — diseño limpio y moderno
   prefix: cp- (card producto)
   ════════════════════════════════════════════════════════════════════ */

   .cp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef0f6;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
  }
  .cp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -8px rgba(46, 35, 103, .18);
    border-color: #d8d5e8;
  }
  .cp-card.cp-agotado { opacity: .72; }
  .cp-card.cp-agotado:hover { transform: none; box-shadow: none; }

/* ── MEDIA (imagen + badges + overlay) ──────────────────────────── */
.cp-media {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(180deg, #fafbff 0%, #f4f5fb 100%);
  overflow: hidden;
}
.cp-media-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.cp-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .5rem;
  transition: transform .4s ease;
  position: relative;
  z-index: 2;
}
.cp-card:hover .cp-img { transform: scale(1.06); }
.cp-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  max-width: 90px;
  opacity: .04;
  pointer-events: none;
  z-index: 1;
}

/* ── BADGES ─────────────────────────────────────────────────────── */
.cp-badges-top {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  z-index: 5;
}
.cp-badges-left {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  z-index: 5;
}
.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.cp-badge-new   { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
.cp-badge-offer { background: linear-gradient(135deg, #fcc118, #f59e0b); color: #fff; }
.cp-badge-out   { background: #dc2626; color: #fff; }
.cp-badge-cart  { background: rgba(22, 163, 74, .95); color: #fff; }
.cp-badge-hot   { background: #fff; color: #b45309; border: 1px solid #fde68a; }

/* ── OVERLAY "Detalles" ─────────────────────────────────────────── */
.cp-overlay-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(46, 35, 103, .94);
  color: #fff;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 4;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.cp-card:hover .cp-overlay-btn {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.cp-overlay-btn:hover { background: #2e2367; color: #fff; }

/* ── OVERLAY agotado ────────────────────────────────────────────── */
.cp-overlay-out {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.cp-overlay-out span {
  background: #dc2626;
  color: #fff;
  padding: .5rem 1.2rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  transform: rotate(-8deg);
  box-shadow: 0 4px 12px rgba(220, 38, 38, .3);
}

/* ── BODY ───────────────────────────────────────────────────────── */
.cp-body {
  padding: .85rem .9rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .55rem;
}

/* Título */
.cp-title {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: #1e1b4b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.28em;
}
.cp-title a {
  color: inherit;
  text-decoration: none;
}
.cp-title a:hover { color: #2e2367; }

/* Meta superior — SKU + tamaño */
.cp-meta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .68rem;
  color: #9ca3af;
  line-height: 1;
}
.cp-sku {
  font-weight: 600;
  color: #6b7280;
  letter-spacing: .3px;
}
.cp-size {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
}
.cp-size i { font-size: .65rem; }

/* Precio */
.cp-price-box {
  background: linear-gradient(180deg, #fffbed 0%, #fff7de 100%);
  border: 1.5px solid #fcc118;
  border-radius: 10px;
  padding: .55rem .7rem;
  position: relative;
}
.cp-price-old {
  font-size: .68rem;
  color: #9ca3af;
  text-decoration: line-through;
  line-height: 1;
  margin-bottom: 2px;
}
.cp-price-main {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2px;
}
.cp-price-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: #2e2367;
  line-height: 1;
  letter-spacing: -.5px;
}
.cp-pill-mayor {
  background: #fcc118;
  color: #2e2367;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1;
}
.cp-price-unit {
  font-size: .68rem;
  color: #8b7830;
  font-weight: 500;
}

/* Meta inferior — IVA + mínimo */
.cp-meta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .65rem;
  font-weight: 600;
  line-height: 1;
  padding: 0 2px;
}
.cp-iva {
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cp-min {
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── ACCIONES (qty + CTA) ───────────────────────────────────────── */
.cp-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: .2rem;
}
.cp-qty {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
}
.cp-qty-btn {
  width: 30px;
  background: #fff;
  border: none;
  color: #2e2367;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
}
.cp-qty-btn:hover:not(:disabled) {
  background: #f3f4f6;
}
.cp-qty-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.cp-qty-input {
  width: 36px;
  border: none;
  border-left: 1.5px solid #e5e7eb;
  border-right: 1.5px solid #e5e7eb;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: #1e1b4b;
  background: #fff;
  outline: none;
  padding: 0 2px;
  min-width: 0;
}
.cp-qty-input:focus {
  background: #fafbff;
}
.cp-qty-input:disabled {
  opacity: .5;
  background: #f9fafb;
}

.cp-add-btn {
  flex: 1 1 auto;
  background: linear-gradient(135deg, #2e2367 0%, #4a387a 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: .5rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .15s, box-shadow .15s, background .2s;
  letter-spacing: .2px;
  min-width: 0;
}
.cp-add-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(46, 35, 103, .4);
}
.cp-add-btn:active:not(:disabled) {
  transform: translateY(0);
}
.cp-add-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
.cp-add-btn--in-cart {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
}
.cp-add-btn--in-cart:hover:not(:disabled) {
  box-shadow: 0 6px 14px -4px rgba(22, 163, 74, .4);
}
.cp-add-btn i { font-size: .72rem; }
.cp-add-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── RESPONSIVE MÓVIL ───────────────────────────────────────────── */
@media (max-width: 576px) {
  .cp-body { padding: .7rem .75rem .85rem; gap: .45rem; }
  .cp-title { font-size: .82rem; min-height: 2.12em; }
  .cp-price-amount { font-size: 1.05rem; }
  .cp-pill-mayor { font-size: .55rem; padding: 2px 6px; }
  .cp-price-unit { font-size: .65rem; }
  .cp-meta-line { font-size: .65rem; }
  .cp-meta-footer { font-size: .6rem; }
  .cp-actions { flex-direction: column; gap: 5px; }
  .cp-qty { width: 100%; justify-content: center; }
  .cp-qty-btn { width: 38px; font-size: .8rem; }
  .cp-qty-input { flex: 1; min-width: 0; }
  .cp-add-btn { width: 100%; padding: .55rem .8rem; }

  /* Mostrar overlay "Detalles" permanentemente en móvil, más discreto */
  .cp-overlay-btn {
    opacity: .92;
    transform: translateX(-50%);
    pointer-events: auto;
    font-size: .66rem;
    padding: .35rem .75rem;
    background: rgba(46, 35, 103, .82);
  }
}

/* Mini-ajustes para cards en 2-columnas en móviles pequeños */
@media (max-width: 380px) {
  .cp-body { padding: .6rem .6rem .7rem; }
  .cp-title { font-size: .78rem; }
  .cp-price-amount { font-size: .98rem; }
  .cp-pill-mayor { display: none; }
  .cp-price-unit { display: none; }
}

/* Pantallas muy pequeñas (≤340px): una sola columna */
@media (max-width: 340px) {
  .cp-actions { flex-direction: row; }
  .cp-qty { width: auto; }
  .cp-add-btn { flex: 1; }
}

/* Estados dinámicos del botón (aplicados por cart.js) */
.cp-add-btn--update {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
}
.cp-add-btn--update:hover:not(:disabled) {
  box-shadow: 0 6px 14px -4px rgba(13, 110, 253, .4);
}
.cp-add-btn--remove {
  background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
}
.cp-add-btn--remove:hover:not(:disabled) {
  box-shadow: 0 6px 14px -4px rgba(220, 53, 69, .4);
}