/* ================================================================
   IMPORTACIONES MONJARREZ — sección independiente (productos CJ)
   Todo aquí usa el prefijo "imp-monjarrez-" a propósito, para que
   nada de esto choque con las clases que ya existen en styles.css
   ================================================================ */

.imp-monjarrez-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 16px;
  /* display:none por defecto: el JS la muestra solo si el endpoint
     devuelve al menos un producto. Así, si no hay productos CJ o el
     servlet falla, la sección no deja un espacio vacío ni un título
     "colgando" sin contenido. */
  display: none;
}

.imp-monjarrez-header {
  text-align: center;
  margin-bottom: 18px;
}

.imp-monjarrez-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.imp-monjarrez-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 4px auto 0;
  max-width: 480px;
  line-height: 1.4;
}

.imp-monjarrez-grid {
  /* 🔧 Antes usaba CSS column-count (layout tipo Pinterest hecho por
     el navegador). Ese enfoque tiene un bug conocido: en varios
     navegadores el navegador puede partir una imagen alta justo en el
     borde entre columnas, aunque haya "break-inside: avoid" en la
     tarjeta — es justo lo que se veía como "imagen cortada". Los
     productos nacionales evitan ese bug armando las columnas ellos
     mismos con JavaScript (pintarMosaico) en vez de dejárselo al CSS.
     Ahora las importaciones usan el mismo truco: este contenedor solo
     es un <div style="display:flex"> con las columnas reales
     (.imp-monjarrez-col) ya armadas por JS adentro. */
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.imp-monjarrez-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.imp-monjarrez-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px;
  display: block;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.imp-monjarrez-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.3);
}

.imp-monjarrez-media-wrap {
  position: relative;
}

.imp-monjarrez-card img {
  width: 100%;
  /* Imagen completa, sin recortar: conserva su proporción real (alto
     automático), igual que en los productos nacionales. */
  height: auto;
  display: block;
  border-radius: 8px;
  background: #111;
}

/* 🆕 Franja de urgencia sobre la imagen (misma idea que
   .producto-franja-urgencia en los productos nacionales, con el rojo
   de la marca Monjarrez). Aparece solo en una selección rotativa de
   productos, igual que en el catálogo normal. */
.imp-monjarrez-franja-urgencia {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #b33a3a, #7a1414);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

/* 🆕 "Solo quedan X" / "Casi agotados" / "Último día", debajo del
   nombre — mismo lugar y espíritu que .producto-quedan-badge. */
.imp-monjarrez-quedan-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #f6c445;
  margin: 0 0 4px;
}

.imp-monjarrez-precio-anterior {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: line-through;
  margin-left: 6px;
}

.imp-monjarrez-descuento-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: #b33a3a;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

.imp-monjarrez-contador {
  font-size: 0.7rem;
  color: #f6c445;
  margin: 2px 0 6px;
}
.imp-monjarrez-contador i {
  margin-right: 4px;
}

.imp-monjarrez-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 8px 0 6px;
  line-height: 1.3;
  /* 🔧 Antes el nombre completo se mostraba siempre (con min-height
     reservando espacio para 2 líneas aunque el título fuera corto).
     Ahora se trunca a 2 líneas con "..." — el nombre acompaña, no
     compite con la imagen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imp-monjarrez-envio {
  display: inline-block;
  font-size: 0.66rem;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(63, 174, 130, 0.15);
  color: #3fae82;
  border: 1px solid rgba(63, 174, 130, 0.4);
  margin-bottom: 8px;
  width: fit-content;
}

.imp-monjarrez-precio-crc {
  font-size: 1rem;
  font-weight: 700;
  color: #f6c445;
  margin: 0;
}

.imp-monjarrez-precio-usd {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 8px;
}

.imp-monjarrez-btn {
  margin-top: 8px;
  background: #3fae82;
  color: #0c1211;
  border: none;
  border-radius: 6px;
  padding: 8px 0;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.imp-monjarrez-btn:hover {
  filter: brightness(1.08);
}

.imp-monjarrez-loading {
  /* 🔧 "grid-column: 1/-1" era para el grid viejo; con columnas
     (column-count) el equivalente es column-span para que el mensaje
     cruce todas las columnas en vez de quedar metido en la primera. */
  column-span: all;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  padding: 20px;
}

@media (max-width: 640px) {
  .imp-monjarrez-title { font-size: 1.35rem; }
  .imp-monjarrez-grid { gap: 10px; }
  .imp-monjarrez-col { gap: 10px; }
}