/* =========================================================
   CARRITO DE COMPRAS - NECXUS (V2)
   ========================================================= */

/* Contenedor principal para centrar y dar márgenes */
.nx-cart-page {
  margin: 0 auto;
  padding: 32px 16px;
  font-family: var(--nx-font-base);
  color: var(--nx-text-dark);
  background-color: var(--nx-color-bg-s); /* Fondo gris clarito para resaltar las tarjetas */
}

.nx-cart-title {
  font-size: var(--nx-font-g);
  margin-top: 0;
  margin-bottom: 24px;
  font-weight: bold;
}

.nx-cart-hidden {
  display: none !important;
}

/* ======== LAYOUT (Grilla principal) ======== */
.nx-cart-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .nx-cart-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .nx-cart-items-container {
    flex: 1; /* Ocupa el espacio disponible */
  }
  .nx-cart-summary {
    width: 350px; /* Ancho fijo para el resumen */
    position: sticky;
    top: 80px;
  }
}

/* ======== LISTA DE PRODUCTOS ======== */
.nx-cart-items-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nx-cart-item {
  display: flex;
  flex-direction: column;
  background-color: var(--nx-color-bg-w);
  border: 1px solid var(--nx-border-light);
  border-radius: var(--nx-radius-md);
  padding: 16px;
  gap: 16px;
}

@media (min-width: 768px) {
  .nx-cart-item {
    flex-direction: row;
    align-items: center;
  }
}

.nx-cart-item-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Info del producto (Centro) */
.nx-cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nx-cart-item-name {
  font-size: var(--nx-font-m);
  color: var(--nx-color-text-darks);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;
}

.nx-cart-item-remove {
  background: none;
  border: none;
  color: var(--nx-color-background-r); /* Rojo de tus variables */
  font-size: var(--nx-font-sm);
  cursor: pointer;
  padding: 0;
  text-align: left;
  width: max-content;
}

.nx-cart-item-remove:hover {
  text-decoration: underline;
}

/* Acciones del producto (Derecha: Cantidad y Precio) */
.nx-cart-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media (min-width: 768px) {
  .nx-cart-item-actions {
    width: auto;
    gap: 32px;
  }
}

/* Controles de sumar/restar */
.nx-cart-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--nx-border-light);
  border-radius: var(--nx-radius-sm);
  background-color: var(--nx-color-bg-w);
}

.nx-cart-qty-btn {
  background: var(--nx-input-bg);
  border: none;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  color: var(--nx-text-dark);
}

.nx-cart-qty-input {
  width: 40px;
  height: 32px;
  border: none;
  text-align: center;
  font-size: var(--nx-font-m);

  color: var(--nx-text-dark);
  -moz-appearance: textfield; /* Quita flechitas en Firefox */
}
.nx-cart-qty-input::-webkit-outer-spin-button,
.nx-cart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Quita flechitas en Chrome/Edge */
  margin: 0;
}

.nx-cart-item-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--nx-text-dark);
}

/* ======== RESUMEN DE COMPRA ======== */
.nx-cart-summary {
  background-color: var(--nx-color-bg-w);
  border: 1px solid var(--nx-border-light);
  border-radius: var(--nx-radius-md);
  padding: 24px;
}

.nx-cart-summary-title {
  font-size: var(--nx-font-m);
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--nx-color-text-darks);
}

.nx-cart-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: var(--nx-font-m);
  color: var(--nx-color-text-darks2);
}

.nx-cart-summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--nx-border-light);
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--nx-text-dark);
}

/* Botón propio para no depender de clases externas */
.nx-cart-btn-primary {
  width: 100%;
  background-color: var(--nx-color-button-b);
  color: var(--nx-color-bg-w);
  border: none;
  border-radius: var(--nx-radius-sm);
  padding: 14px;
  font-size: var(--nx-font-m);
  font-weight: bold;
  cursor: pointer;
  margin-top: 24px;
  text-align: center;
}

.nx-cart-btn-primary:hover {
  background-color: var(--nx-color-button-bd);
}

/* ======== ESTADO VACÍO ======== */
.nx-cart-empty {
  background-color: var(--nx-color-bg-w);
  border: 1px solid var(--nx-border-light);
  border-radius: var(--nx-radius-md);
  padding: 60px 20px;
  text-align: center;
}

.nx-cart-empty-title {
  font-size: var(--nx-font-g);
  margin-bottom: 8px;
  color: var(--nx-text-dark);
}

.nx-cart-empty-text {
  font-size: var(--nx-font-m);
  color: var(--nx-color-text-darks2);
  margin-bottom: 24px;
}

.nx-cart-empty .nx-cart-btn-primary {
  display: inline-block;
  width: auto;
  padding: 12px 32px;
  text-decoration: none;
}

.nx-cart-checkout-btn{
  justify-content: center;
}

/* Nuevo contenedor para alinear título y botón a los extremos */
.nx-cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Alinea arriba por si el título tiene dos líneas */
  gap: 12px;
}

.nx-cart-item-name {
  flex: 1; /* Hace que el título ocupe el espacio disponible sin empujar al botón */
  font-size: var(--nx-font-m);
  color: var(--nx-color-text-darks);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;
}

/* Actualización del botón de eliminar */
.nx-cart-item-remove {
  background: none;
  border: none;
  color: #a0a0a0; /* Gris discreto por defecto */
  cursor: pointer;
  padding: 4px; /* Área de clic un poco más grande para mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.nx-cart-item-remove:hover {
  color: var(--nx-color-background-r, #e63946); /* Toma el rojo de tus variables al hacer hover */
  text-decoration: none;
}

.nx-cart-item-remove svg {
  width: 18px; /* Tamaño sutil */
  height: 18px;
}

/* Estilos adicionales para los detalles de precios y descuentos */
    .nx-cart-price-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      line-height: 1.2;
    }
    
    .nx-cart-discount-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      margin-bottom: 2px;
    }
    
    .nx-cart-old-price {
      text-decoration: line-through;
      color: #888;
    }
    
    .nx-cart-badge-discount {
      color: #00a650;
      background-color: #e6f6ec;
      padding: 2px 4px;
      border-radius: 3px;
      font-weight: 700;
    }

    .nx-summary-old-price {
      text-decoration: line-through;
      color: #888;
      font-size: 0.85em;
      margin-right: 4px;
    }

    @media (min-width: 768px) {
  .nx-cart-item-actions {
    width: auto;
    gap: 32px;
  }
}
@media (min-width: 768px) {
  .nx-cart-item-actions {
    /* Le damos un ancho fijo al bloque derecho para que siempre ocupe lo mismo */
    width: 280px; 
    gap: 24px;
    justify-content: flex-end; /* Alineamos todo hacia la derecha */
  }
}

/* Fijamos el tamaño exacto del selector de cantidad */
.nx-cart-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--nx-border-light);
  border-radius: var(--nx-radius-sm);
  background-color: var(--nx-color-bg-w);
  width: 104px; /* 32px (botón) + 40px (input) + 32px (botón) */
  flex-shrink: 0; /* Evita que se achique */
}

/* Le damos un ancho mínimo a la zona del precio para que no empuje al selector */
.nx-cart-price-wrapper {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* En caso de que el precio no esté dentro del wrapper (como el de la PS5 en tu HTML) */
.nx-cart-item > .nx-cart-item-actions > .nx-cart-item-price {
  min-width: 120px;
  text-align: right;
}

.nx-cart-item-name {
  flex: 1;
  font-size: var(--nx-font-m);
  color: var(--nx-color-text-darks);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;
  
  /* --- NUEVAS REGLAS PARA CORTAR EL TÍTULO --- */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Corta el texto a las 2 líneas. Si querés que ocupe una sola línea, cambialo a 1 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word; /* Evita que una palabra muy larga rompa el diseño */
}
.nx-summary-old-price {
  text-decoration: line-through;
  opacity: 0.6;
  margin-right: 6px;
  font-size: 14px;
}

.nx-summary-final-price {
  font-weight: 700;
  font-size: 18px;
}

.nx-cart-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
    box-sizing: border-box; /* 🔥 CLAVE: evita que se desborde */
}