/* =============================================================================
   Card compacta de producto (.mini de docs/ux) y su grilla
   -----------------------------------------------------------------------------
   .ws-mini sale de inc/product-mini.php y la usan el Catálogo de vinos y el
   bloque Card compacta (patrón "Grilla compacta", un Product Collection).
   .ws-mini-grid es su grilla: 6 por fila en desktop, 5 en desktop angosto,
   4 en tablet vertical y 2 en mobile. Solo tokens de theme.json.
   ============================================================================= */

.ws-mini-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ws-mini {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--surface);
	text-align: start;
	transition: border-color var(--wp--custom--transition--fast);
}

.ws-mini:hover {
	border-color: var(--wp--preset--color--border-strong);
}

/* Foto cuadrada sobre fondo oscuro mientras carga, con las distinciones encima. */
.ws-mini__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--inverse);
}

.ws-mini__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ws-mini__media .ws-flags {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 2;
}

.ws-mini__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
}

.ws-mini .ws-overline {
	margin-block-end: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--xx-small);
}

.ws-mini__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

.ws-mini__title a {
	color: inherit;
	text-decoration: none;
}

.ws-mini__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
}

.ws-mini__meta {
	display: flex;
	align-items: center;
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.ws-mini__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

.ws-mini__price {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	white-space: nowrap;
}

.ws-mini__price del {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

.ws-mini__price ins {
	text-decoration: none;
}

/* Botón "+": cuadrado, con el degradado de los botones (styles.elements.button). */
.ws-mini .ws-mini__add {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	padding: 0;
	border-radius: var(--wp--preset--border-radius--small);
}

.ws-mini__add:disabled {
	cursor: progress;
}

.ws-mini__icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

.ws-mini .ws-unavailable {
	font-size: var(--wp--preset--font-size--x-small);
}

.ws-mini .ws-buy-status {
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---- Grilla compacta en un Product Collection (bloque Card compacta) --------
   El li del Product Template deja de ser la card grande (product-card.css):
   la card es .ws-mini. */
.wc-block-product-template .wc-block-product:has(> .ws-product-mini) {
	display: block;
	overflow: visible;
	padding: 0;
	border: 0;
	background: none;
}

.wc-block-product-template .wc-block-product > .ws-product-mini {
	height: 100%;
	padding-inline: 0;
}

.wc-block-product-template.wc-block-product-template__responsive:has(.ws-product-mini) {
	gap: var(--wp--preset--spacing--30);
}

/* ---- Desktop angosto, tablet vertical y mobile ----------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
	.ws-mini-grid,
	.wc-block-product-template__responsive.columns-6:has(.ws-product-mini) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 700px) and (max-width: 1023px) {
	.ws-mini-grid,
	.wc-block-product-template__responsive:is(.columns-5, .columns-6):has(.ws-product-mini) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 699px) {
	.ws-mini-grid,
	.wc-block-product-template.wc-block-product-template__responsive:has(.ws-product-mini) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}

	.ws-mini__media .ws-flags {
		top: var(--wp--preset--spacing--10);
		left: var(--wp--preset--spacing--10);
	}
}