/* Card de producto de proveedor externo — convive DENTRO de .cl-grid (el
   catálogo real, ver catalog/index.blade.php), a propósito con su propio
   namespace .spcard-* (no reutiliza .pcard-* de partials/product-card):
   este producto no es inventario propio, no debe verse igual a uno real. */
/* OJO: overflow:visible a propósito (igual que .pcard en product-card.css)
   — con hidden, el tooltip de [data-tooltip] quedaba cortado por el borde
   de la card en vez de mostrarse completo por encima. El recorte de las
   esquinas de la imagen ya no depende de esto: .spcard-img-wrap tiene su
   propio border-radius arriba. */
/* min-width:0 a propósito: overflow:visible (necesario para el tooltip de
   [data-tooltip]) hace que esta card NO reciba el min-size automático a 0
   que el grid le da a los ítems con overflow distinto de visible — sin
   min-width:0 acá, un nombre/descripción de proveedor con una palabra larga
   sin espacios (SKU, código de modelo — dato crudo, no curado como el
   propio) empuja la columna del grid más ancha que 1fr y rompe el
   responsive en 2 columnas (mobile). min-width:0 fuerza a que se achique y
   deje el recorte de texto (line-clamp/word-break) hacer su trabajo. */
.spcard{display:flex;flex-direction:column;height:100%;min-width:0;border-radius:var(--radius-xl);overflow:visible;background:var(--bg-secondary);border:1px dashed var(--glass-border)}
.spcard-img-wrap{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-tertiary);border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.spcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.spcard:hover .spcard-img{transform:scale(1.08)}
.spcard-img-placeholder{background:var(--bg-tertiary)}
.spcard-badge{position:absolute;top:.5rem;left:.5rem;z-index:2;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:var(--radius-full);background:#05db4cd9;color:#fff}

.spcard-body{display:flex;flex-direction:column;gap:.3rem;padding:.75rem;flex:1;min-width:0}
/* overflow-wrap:anywhere en nombre/descripción/tag: son texto CRUDO de la
   API del proveedor (no curado como el nombre de un producto propio), así
   que puede traer una palabra larga sin espacios (SKU, código de modelo).
   Sin esto, esa palabra no se corta y empuja el ancho de la card más allá
   de su columna/slot — junto con min-width:0 de arriba, esto es lo que
   evita que la card de proveedor se vea más grande que las demás y rompa
   el grid en pantallas chicas. */
.spcard-name{font-size:.825rem;font-weight:600;color:var(--text-primary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0;text-decoration:none}
/* La descripción del proveedor llega TODA EN MAYÚSCULAS (dato crudo de su
   API) — text-transform:lowercase la hace legible sin tocar el dato real.
   Recortada a 3 líneas para no descuadrar la altura de la card en la
   grilla; el resto queda oculto (line-clamp + overflow:hidden). */
.spcard-desc{font-size:.72rem;line-height:1.5;color:var(--text-muted);text-transform:lowercase;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0}
.spcard-desc::first-letter{text-transform:uppercase}

/* "Ideal para X, Y, Z" del proveedor, ya separado en piezas por
   FabrizioImportacionesAdapter::parseDescription() — se pinta como chips
   de colores (rotan por posición, no por contenido) en vez de una lista
   gris apagada, para que resalten. Misma clase en la card Y en
   supplier-catalog/show.blade.php (detalle) — el color sale gratis ahí también. */
.spcard-tags{display:flex;flex-wrap:wrap;gap:.35rem;min-width:0}
.spcard-tag{max-width:100%;overflow-wrap:anywhere;font-size:.62rem;font-weight:700;padding:.2rem .55rem;border-radius:var(--radius-full);text-transform:lowercase}
.spcard-tag::first-letter{text-transform:uppercase}
.spcard-tag:nth-child(6n+1){background:rgba(5,173,192,.16);color:var(--primary)}
.spcard-tag:nth-child(6n+2){background:rgba(242,19,100,.16);color:var(--secondary)}
.spcard-tag:nth-child(6n+3){background:rgba(245,158,11,.16);color:#b45309}
.spcard-tag:nth-child(6n+4){background:rgba(16,185,129,.16);color:#059669}
.spcard-tag:nth-child(6n+5){background:rgba(139,92,246,.16);color:#7c3aed}
.spcard-tag:nth-child(6n+6){background:rgba(6,182,212,.16);color:#0891b2}
.dark .spcard-tag:nth-child(6n+3){color:#fbbf24}
.dark .spcard-tag:nth-child(6n+5){color:#a78bfa}

.spcard-price-row{margin-top:auto;padding-top:.375rem}
.spcard-price{font-size:1rem;font-weight:800;color:var(--text-primary)}

.spcard-actions{display:flex;align-items:center;gap:.4rem;margin-top:.4rem}

/* Botón principal (ancho, igual que .pcard-add en la card real): "Comprar"
   con el ícono de WhatsApp, porque para estos productos pedir por WhatsApp
   ES la acción de compra — no hay checkout propio. position:relative para
   que el tooltip genérico de [data-tooltip] (ver product-card.css) tenga
   dónde anclarse. */
.spcard-whatsapp{position:relative;display:flex;align-items:center;justify-content:center;gap:.35rem;flex:1;min-width:0;padding:.4rem .6rem!important;border-radius:var(--radius-lg)!important;background:#25d366!important;color:#fff!important;font-weight:700;font-size:.72rem;text-decoration:none;border:none;transition:transform .2s ease,background .2s ease}
.spcard-whatsapp:hover{background:#1fbd5a!important}
.spcard-whatsapp:active{transform:scale(.97)}
/* El PNG trae su color de marca propio — sobre este fondo verde sólido
   quedaba casi invisible (mismo caso que .pd-btn-wa--lg .pd-btn-wa-icon en
   product-detail.css). Se fuerza a blanco puro con el mismo truco. */
.spcard-whatsapp-icon{width:16px;height:16px;object-fit:contain;flex-shrink:0;filter:brightness(0) invert(1)}
.spcard-whatsapp-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Botón secundario (redondo, solo ícono): agregar al carrito propio de
   proveedor (ver supplier-cart.js) — para pedir varios de una sola vez. */
.spcard-add{position:relative;display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;flex-shrink:0;padding:0!important;border-radius:50%!important;border:none;cursor:pointer;background:rgba(5,173,192,.12)!important;color:var(--primary)!important;transition:transform .2s ease,background .2s ease}
.spcard-add:hover{background:rgba(5,173,192,.22)!important;transform:scale(1.08)}
.spcard-add:active{transform:scale(.95)}
.spcard-add .mat-icon{font-size:16px;width:16px;height:16px}
/* El tooltip al hacer hover lo pinta la regla genérica [data-tooltip] de
   product-card.css (se carga siempre junto a este archivo) — así se ve
   igual en todos los botones, de AISSA o de proveedor. */