/**
 * 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 (--wtds-*) 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(--wtds-font-display, "Poppins", -apple-system, sans-serif);
	font-size: var(--wtds-fs-footnote, .8125rem);
	font-weight: var(--wtds-fw-medium);
	color: var(--wtds-ink-2);
	letter-spacing: var(--wtds-ls-tight, -.01em);
	margin-right: .25rem;
	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: .75rem;
	font-weight: 500;
}

/* ─── Badge "📦 mayoreo" sobre la imagen del card ────────────────
   Apila debajo del kit-badge de WapuOS - 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(--wtds-s-2, .5rem);
	left: var(--wtds-s-2, .5rem);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem .625rem;
	background: var(--wtds-surface);
	color: var(--wtds-ink);
	border: 0.5px solid var(--wtds-outline-soft);
	border-radius: var(--wtds-r-pill, 62.4375rem);
	font-family: var(--wtds-font-display, "Poppins", -apple-system, sans-serif);
	font-size: .625rem;
	font-weight: var(--wtds-fw-medium);
	text-transform: lowercase;
	letter-spacing: .02em;
	line-height: 1;
	box-shadow: 0 1px .125rem var(--wtds-shadow-color-faint);
	white-space: nowrap;
}

.wapu-product-card__wholesale-badge-icon {
	font-size: .75rem;
	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(--wtds-s-2, .5rem);
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 37.5rem) {
	.wapu-product-card__wholesale-badge {
		font-size: .5625rem;
		padding: .1875rem .5rem;
	}
	.wapu-product-card__wholesale-badge-icon {
		font-size: .6875rem;
	}
}

/* ─── Mini-cart line — versión compacta ──────────────────────── */
.wapu-mini-cart__wholesale-tag {
	display: inline-flex;
	align-items: center;
	gap: .1875rem;
	margin-top: .125rem;
	padding: .125rem .375rem;
	background: var(--wtds-success-soft);
	color: var(--wtds-success);
	border-radius: var(--wtds-r-pill, 62.4375rem);
	font-size: .5625rem;
	font-weight: var(--wtds-fw-medium);
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}