/**
 * SwiftFind — Componente: tarjeta de producto + grid + placeholder + badges.
 * Todos los datos visibles proceden del producto entregado por el REST.
 * Equivalencias 1:1 con legacy .p-card / .grid / .ph / .pill (sin cambios visuales).
 */

@layer wvn-components {

	/* Grid de resultados */
	.wvn-grid {
		display: grid;
		grid-template-columns: repeat(var(--wvn-cols, 4), 1fr);
		gap: var(--wvn-grid-gap-y, var(--wvn-space-7)) var(--wvn-grid-gap-x, var(--wvn-space-6));
	}

	/* Aviso "Mostrando resultados para ..." (correccion de erratas) */
	.wvn-corrected {
		margin: 0 0 var(--wvn-space-5);
		font-size: 13.5px;
		color: var(--wvn-color-muted);
	}
	.wvn-corrected strong {
		color: var(--wvn-color-accent);
		font-weight: 600;
	}
	.wvn-corrected__orig {
		opacity: 0.7;
		font-size: 12px;
	}

	/* Banner promocional inyectado ENTRE resultados (ancho completo).
	   Clase .wvn-promo (NO .wvn-banner, que es el banner demo VOLT). */
	.wvn-promo {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wvn-space-5);
		flex-wrap: wrap;
		padding: var(--wvn-space-6) var(--wvn-space-7);
		border-radius: var(--wvn-radius-lg, 16px);
		/* Un peldaño de elevación por encima de las tarjetas + borde sutil,
		   para que el banner se separe del fondo sin depender del color exacto. */
		background: var(--wvn-color-surface-2);
		border: 1px solid var(--wvn-color-line);
		border-left: 4px solid var(--wvn-promo-accent, var(--wvn-color-accent));
	}
	.wvn-promo__title {
		margin: 0;
		font-size: 16px;
		font-weight: 700;
		color: var(--wvn-color-ink);
	}
	.wvn-promo__text {
		margin: 2px 0 0;
		font-size: 13.5px;
		color: var(--wvn-color-muted);
	}
	.wvn-promo__cta {
		flex: none;
		display: inline-block;
		padding: 10px 18px;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
		color: var(--wvn-color-bg);
		background: var(--wvn-promo-accent, var(--wvn-color-accent));
	}

	/* Resaltado de coincidencias en titulo/excerpt */
	.wvn-mark {
		background: color-mix(in srgb, var(--wvn-color-accent) 22%, transparent);
		color: inherit;
		border-radius: 3px;
		padding: 0 1px;
		font-weight: 600;
	}

	/* Tarjeta */
	.wvn-product-card {
		background: transparent;
		cursor: pointer;
		display: flex;
		flex-direction: column;
	}
	.wvn-product-card__media {
		aspect-ratio: 3 / 4;
		background: var(--wvn-color-surface);
		border-radius: var(--wvn-radius-card);
		position: relative;
		overflow: hidden;
		transition: transform .25s ease;
	}
	.wvn-product-card:hover .wvn-product-card__media { transform: translateY(-2px); }

	/* Placeholder de imagen (cuando no hay foto) */
	.wvn-placeholder {
		position: absolute;
		inset: 0;
		background:
			repeating-linear-gradient(45deg, rgba(0, 0, 0, .025) 0 12px, transparent 12px 24px),
			linear-gradient(160deg, var(--wvn-ph-a, #e8e7e2) 0%, var(--wvn-ph-b, #d8d6cf) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wvn-product-card__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.wvn-placeholder__label {
		font-family: var(--wvn-font-mono);
		font-size: 10px;
		color: rgba(0, 0, 0, .4);
		background: rgba(255, 255, 255, .7);
		padding: 3px 8px;
		border-radius: 4px;
	}

	/* Valoración del catálogo (se oculta cuando el REST no la entrega). */
	.wvn-product-card__rating {
		position: absolute;
		top: 10px;
		left: 10px;
		background: var(--wvn-color-surface);
		color: var(--wvn-color-ink);
		padding: 4px 8px;
		border-radius: var(--wvn-radius-pill);
		font-size: 11px;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		box-shadow: var(--wvn-shadow-card);
	}
	.wvn-product-card__star { color: var(--wvn-color-ink); }

	/* Badge derivado exclusivamente de on_sale real. */
	.wvn-product-card__badges {
		position: absolute;
		top: 10px;
		right: 10px;
		display: flex;
		gap: 4px;
		flex-direction: column;
		align-items: flex-end;
	}
	.wvn-badge {
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: var(--wvn-tracking-caps);
		padding: 3px 7px;
		border-radius: 4px;
		background: var(--wvn-color-surface);
		color: var(--wvn-color-ink);
	}
	.wvn-badge--new { background: var(--wvn-color-accent); color: var(--wvn-color-ink); }
	.wvn-badge--sale { background: var(--wvn-color-hot); color: var(--wvn-color-on-ink); }
	.wvn-badge--eco { background: var(--wvn-color-ink); color: var(--wvn-color-accent); }

	/* Botón de deseos */
	.wvn-product-card__wish {
		position: absolute;
		bottom: 10px;
		right: 10px;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: var(--wvn-color-surface);
		border: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--wvn-color-ink);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
		opacity: 0;
		transform: translateY(4px);
		transition: opacity .2s, transform .2s, color .2s;
	}
	.wvn-product-card:hover .wvn-product-card__wish { opacity: 1; transform: translateY(0); }
	.wvn-product-card__wish.wvn-is-active { color: var(--wvn-color-hot); opacity: 1; }

	/* Variantes de color reales del mapa de atributos del producto. */
	.wvn-product-card__variants {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		margin: 10px 0 var(--wvn-space-1);
	}
	.wvn-product-card__variant {
		display: inline-flex;
		align-items: center;
		min-height: 22px;
		padding: 2px 8px;
		border: 1px solid var(--wvn-color-line-2);
		border-radius: var(--wvn-radius-pill);
		color: var(--wvn-color-ink-2);
		font-size: 11px;
		line-height: 1.2;
	}
	.wvn-product-card__swatch {
		width: 13px;
		height: 13px;
		border-radius: 50%;
		border: 1.5px solid var(--wvn-color-surface);
		box-shadow: 0 0 0 1px var(--wvn-color-line-2);
		cursor: pointer;
	}
	.wvn-product-card__swatch.wvn-is-active { box-shadow: 0 0 0 1.5px var(--wvn-color-ink); }

	/* Texto de la tarjeta */
	.wvn-product-card__name {
		margin: 2px 0;
		font-size: 13.5px;
		font-weight: 600;
		color: var(--wvn-color-ink);
	}
	.wvn-product-card__meta {
		font-size: 12px;
		color: var(--wvn-color-muted);
		margin-bottom: var(--wvn-space-1);
	}
	.wvn-product-card__price {
		font-size: 13px;
		font-weight: 600;
	}
	.wvn-product-card__price--sale { color: var(--wvn-color-hot); }
	.wvn-product-card__price-old {
		color: var(--wvn-color-muted);
		text-decoration: line-through;
		font-weight: 400;
		font-size: 12px;
		margin-left: 6px;
	}

	/* Estado vacío */
	.wvn-empty {
		text-align: center;
		padding: 60px 20px;
		border: 1px dashed var(--wvn-color-line-2);
		border-radius: var(--wvn-radius-lg);
	}
	.wvn-empty__title {
		font-family: var(--wvn-font-display);
		font-size: 20px;
		margin: 10px 0 4px;
	}
	.wvn-empty__text { color: var(--wvn-color-muted); margin: 0 0 var(--wvn-space-5); }
}

/* Actions are siblings of the product link, never nested interactive elements. */
@layer wvn-components {
 .wvn-product-card > .wvn-product-card__cart { display: block; text-align: center; text-decoration: none; margin-top: auto; }
 .wvn-product-card__price del { opacity: .65; margin-right: .4em; }
 .wvn-product-card__price ins { text-decoration: none; }
 .wvn-product-card :focus-visible { outline: 2px solid var(--wvn-color-ink); outline-offset: 3px; }
}

/* Tarjeta configurable (Studio → Tarjeta): proporción, estructura, zonas y
   elementos libres con estilo en allowlist. Todo bajo .wvn-product-card. */
@layer wvn-components {
 .wvn-product-card__media { aspect-ratio: var(--wvn-card-ratio, 3 / 4); }
 .wvn-product-card__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
 .wvn-product-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 8px; }
 .wvn-product-card__overlay { position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; z-index: 1; }
 .wvn-product-card__overlay--static { position: static; inset: auto; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
 .wvn-product-card__overlay .wvn-product-card__badges,
 .wvn-product-card__overlay .wvn-product-card__rating { position: static; }
 .wvn-product-card__overlay .wvn-el:not(.wvn-el--badge) { background: var(--wvn-color-surface); color: var(--wvn-color-ink); padding: 3px 7px; border-radius: 4px; font-size: 11px; box-shadow: var(--wvn-shadow-card); }
 .wvn-product-card__body .wvn-product-card__rating { position: static; background: none; box-shadow: none; padding: 0; font-weight: 500; }
 .wvn-product-card__reviews { color: var(--wvn-color-muted); font-weight: 400; }
 .wvn-product-card__excerpt { font-size: 12px; line-height: 1.4; color: var(--wvn-color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .wvn-product-card__stock { font-size: 12px; color: var(--wvn-color-muted); }
 .wvn-product-card__stock--outofstock { color: var(--wvn-color-hot); }

 /* Estructura */
 .wvn-product-card[data-wvn-layout="horizontal"] .wvn-product-card__link { display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); gap: 12px; align-items: start; }
 .wvn-product-card[data-wvn-layout="horizontal"] .wvn-product-card__body { padding-top: 0; }
 .wvn-product-card[data-wvn-layout="compact"] .wvn-product-card__link { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
 .wvn-product-card[data-wvn-layout="compact"] .wvn-product-card__body { padding-top: 0; }
 .wvn-product-card[data-wvn-layout="compact"] .wvn-product-card__media { border-radius: var(--wvn-radius-sm, 8px); }
 .wvn-product-card[data-wvn-layout="compact"] .wvn-product-card__overlay,
 .wvn-product-card[data-wvn-layout="compact"] .wvn-product-card__excerpt,
 .wvn-product-card[data-wvn-layout="compact"] .wvn-product-card__variants { display: none; }

 /* Elementos libres */
 .wvn-el__affix { color: var(--wvn-color-muted); }
 .wvn-el__chip { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; margin: 0 4px 4px 0; border: 1px solid var(--wvn-color-line-2); border-radius: var(--wvn-radius-pill); font-size: 11px; line-height: 1.2; }
 .wvn-el--display-pill .wvn-el__chip { border-color: transparent; background: var(--wvn-color-surface-2); }
 .wvn-el__badge { display: inline-block; padding: 3px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: var(--wvn-tracking-caps); text-transform: uppercase; background: var(--wvn-color-ink); color: var(--wvn-color-surface); }
 .wvn-el--tone-accent .wvn-el__badge, .wvn-el--display-pill.wvn-el--tone-accent .wvn-el__chip { background: var(--wvn-color-accent); color: var(--wvn-color-ink); }
 .wvn-el--tone-hot .wvn-el__badge, .wvn-el--display-pill.wvn-el--tone-hot .wvn-el__chip { background: var(--wvn-color-hot); color: var(--wvn-color-on-ink, #fff); }
 .wvn-el--tone-surface .wvn-el__badge, .wvn-el--display-pill.wvn-el--tone-surface .wvn-el__chip { background: var(--wvn-color-surface); color: var(--wvn-color-ink); box-shadow: inset 0 0 0 1px var(--wvn-color-line-2); }
 .wvn-el--size-xs { font-size: 11px; } .wvn-el--size-sm { font-size: 12px; } .wvn-el--size-md { font-size: 13.5px; } .wvn-el--size-lg { font-size: 16px; } .wvn-el--size-xl { font-size: 19px; }
 .wvn-el--size-xs > *, .wvn-el--size-sm > *, .wvn-el--size-md > *, .wvn-el--size-lg > *, .wvn-el--size-xl > * { font-size: inherit; }
 .wvn-el--weight-400, .wvn-el--weight-400 > * { font-weight: 400; } .wvn-el--weight-500, .wvn-el--weight-500 > * { font-weight: 500; }
 .wvn-el--weight-600, .wvn-el--weight-600 > * { font-weight: 600; } .wvn-el--weight-700, .wvn-el--weight-700 > * { font-weight: 700; }
 .wvn-el--color-ink, .wvn-el--color-ink > * { color: var(--wvn-color-ink); } .wvn-el--color-muted, .wvn-el--color-muted > * { color: var(--wvn-color-muted); }
 .wvn-el--color-accent, .wvn-el--color-accent > * { color: var(--wvn-color-accent); } .wvn-el--color-hot, .wvn-el--color-hot > * { color: var(--wvn-color-hot); }
 .wvn-el--case-upper { text-transform: uppercase; letter-spacing: .03em; } .wvn-el--case-lower { text-transform: lowercase; }
 .wvn-el--align-left { text-align: left; } .wvn-el--align-center { text-align: center; } .wvn-el--align-right { text-align: right; }
 .wvn-el--lines-1, .wvn-el--lines-2, .wvn-el--lines-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
 .wvn-el--lines-1 { -webkit-line-clamp: 1; } .wvn-el--lines-2 { -webkit-line-clamp: 2; } .wvn-el--lines-3 { -webkit-line-clamp: 3; }
 .wvn-el--empty { min-height: 1.2em; }
 .wvn-product-card > .wvn-el { margin-top: 6px; }
 @media (max-width: 600px) { .wvn-el--no-mobile { display: none !important; } }
 @media (min-width: 601px) { .wvn-el--no-desktop { display: none !important; } }
}