/**
 * Wapu Ecommerce — wholesale.css (v2.8.5)
 *
 * Estilos del tratamiento visual "mayoreo" en cards, single, cart, mini-cart.
 * Se carga sólo cuando el plugin wapu-mayorista está activo.
 *
 * Las clases son emitidas por:
 *   - wapu_price_html()           → .wapu-price__from--mayorista
 *   - product-card.php            → .wapu-product-card__wholesale-badge
 *
 * Convención: solo Design System tokens (--ds-*) o legacy --wapu-*.
 * No emojis hardcoded en CSS — vienen del HTML.
 */

/* ─── Prefijo "desde" en mayoreo ──────────────────────────────────
   Usa el mismo estilo que productos variables (.wapu-price__from)
   pero con un poquito más de peso para reflejar el "compromiso" del
   precio mayoreo (es real, no aproximado). */
.wapu-price__from--mayorista {
	font-family: var(--ds-font-display, "Poppins", -apple-system, sans-serif);
	font-size: var(--ds-fs-footnote, 13px);
	font-weight: 600;
	color: var(--ds-ink-2, rgba(60, 60, 67, .85));
	letter-spacing: var(--ds-ls-tight, -.01em);
	margin-right: 4px;
	text-transform: none;
	line-height: 1;
}

/* En contexto card: prefijo más pequeño + ligera tracking */
.wapu-price--card .wapu-price__from--mayorista {
	font-size: 12px;
	font-weight: 500;
}

/* ─── Badge "📦 mayoreo" sobre la imagen del card ────────────────
   Apila debajo del kit-badge de Wapu Playground. Posicionado
   absolute en la esquina top-left del .wapu-product-card__media. */
.wapu-product-card__media {
	position: relative;
}

.wapu-product-card__wholesale-badge {
	position: absolute;
	top: var(--ds-s-2, 8px);
	left: var(--ds-s-2, 8px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--ds-surface, #fff);
	color: var(--ds-ink, #0A0F1A);
	border: 0.5px solid rgba(10, 15, 26, .12);
	border-radius: var(--ds-r-pill, 999px);
	font-family: var(--ds-font-display, "Poppins", -apple-system, sans-serif);
	font-size: 10px;
	font-weight: 600;
	text-transform: lowercase;
	letter-spacing: .02em;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(10, 15, 26, .04);
	white-space: nowrap;
}

.wapu-product-card__wholesale-badge-icon {
	font-size: 12px;
	line-height: 1;
}

/* Si hay un kit-badge ya pintado arriba, este se baja para no taparlo.
   Detecta hermano previo .wapu-playground-badge o cualquier .wapu-badge
   genérico que el theme/plugins puedan emitir. */
.wapu-playground-badge ~ .wapu-product-card__wholesale-badge,
.wapu-badge ~ .wapu-product-card__wholesale-badge,
[class*="-kit-badge"] ~ .wapu-product-card__wholesale-badge {
	top: auto;
	bottom: var(--ds-s-2, 8px);
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.wapu-product-card__wholesale-badge {
		font-size: 9px;
		padding: 3px 8px;
	}
	.wapu-product-card__wholesale-badge-icon {
		font-size: 11px;
	}
}

/* ─── Mini-cart line — versión compacta ──────────────────────── */
.wapu-mini-cart__wholesale-tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 2px;
	padding: 2px 6px;
	background: var(--ds-success-soft, rgba(52, 199, 89, .12));
	color: var(--ds-success, #34c759);
	border-radius: var(--ds-r-pill, 999px);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}