/**
 * WapuCommerce — List Item Component System
 * ──────────────────────────────────────────────────────────────
 * Patrón "fila densa" para listas dentro de cards: thumb + copy + price/action.
 * Usado en carrito, checkout, mini-cart, pago de acumulados.
 *
 * NO confundir con .wapu-card — los list-items NO tienen fondo ni borde
 * propio. Viven DENTRO de un contenedor (usualmente una .wapu-card).
 *
 * Alcance honesto de la consolidación:
 *   - `display: flex` se unifica en 4 selectores legacy.
 *   - `align-items: center` se unifica en 3 de los 4 (mini-cart preserva su
 *     alineación natural porque su columna __info tiene múltiples líneas
 *     y el thumb top-align queda mejor con el nombre del producto).
 *   - Padding, gap, border y colores se quedan en cada archivo de sección:
 *     los valores (9/10/12/14px) son intencionales del diseño de cada
 *     contexto y forzarlos causaría regresiones visuales.
 *   - Se EXCLUYEN dos variantes "card-like" de la consolidación:
 *       · .wapu-order-confirm-modal__item → tiene bg/border/radius propio,
 *         pertenece conceptualmente al sistema de cards, no a list-items.
 *       · .wapu-account-view-order__item → usa display: grid, estructura
 *         completamente distinta (fila con columnas fijas 64/1fr/auto).
 *
 * Para HTML NUEVO se recomienda usar `.wapu-list-item` directamente con
 * los sub-elementos (`__thumb`, `__copy`, `__name`, `__meta`, `__price`)
 * y el modifier `--compact|--roomy` para densidad.
 *
 * Este archivo carga DESPUÉS de los CSS de sección (cart, checkout, header,
 * account-logged) y ANTES de components-cards.css, para ganar cascade sobre
 * las reglas de sección sin competir con el sistema de cards.
 *
 * @since 3.0.0
 */


/* ═══════════════════════════════════════════════════════════
 *  BASE — estructura flex mínima compartida
 * ═══════════════════════════════════════════════════════════ */

.wapu-list-item,
.wapu-cart-item,
.wapu-checkout__item,
.wapu-mini-cart__item,
.wapu-pay-acumulados__item {
	display: flex;
}

/* align-items: center en todos menos mini-cart (ver nota de cabecera). */
.wapu-list-item,
.wapu-cart-item,
.wapu-checkout__item,
.wapu-pay-acumulados__item {
	align-items: center;
}


/* ═══════════════════════════════════════════════════════════
 *  SUB-ELEMENTOS — para HTML nuevo que use .wapu-list-item
 *  directamente. Los legacy (.wapu-cart-item__img-wrap, etc.)
 *  conservan sus propias clases; no se tocan aquí.
 * ═══════════════════════════════════════════════════════════ */

.wapu-list-item__thumb {
	flex-shrink: 0;
	border-radius: var(--ds-r-sm);
	overflow: hidden;
	background: var(--ds-surface-3);
}

.wapu-list-item__thumb--sm { width: 40px; height: 40px; }
.wapu-list-item__thumb--md { width: 64px; height: 64px; }
.wapu-list-item__thumb--lg { width: 88px; height: 88px; }

.wapu-list-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wapu-list-item__copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wapu-list-item__name {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-13);
	font-weight: 600;
	color: var(--ds-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wapu-list-item__meta {
	font-size: var(--ds-fs-12);
	color: var(--ds-ink-3);
}

.wapu-list-item__price {
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-13);
	font-weight: 600;
	color: var(--ds-ink);
	white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
 *  DENSITY MODIFIERS — solo para HTML nuevo
 *  Los legacy tienen su propio gap/padding específico de contexto
 *  y no los tocamos (ver nota de cabecera).
 * ═══════════════════════════════════════════════════════════ */

.wapu-list-item--compact {
	gap: var(--ds-s-2);
	padding: var(--ds-s-2) 0;
}

.wapu-list-item--roomy {
	gap: var(--ds-s-3);
	padding: var(--ds-s-4) 0;
}