/* =============================================================================
   Card de producto en las grillas de WooCommerce (.pcard de docs/ux)
   -----------------------------------------------------------------------------
   Aplica a todo Product Collection (tienda, categorías, búsqueda, relacionados,
   secciones del home): cada producto del Product Template (li.wc-block-product)
   es una card con la foto a sangre arriba y el cuerpo con padding.
   El contenido completo de la card es el patrón em-wine-store/product-card:
     imagen · Etiquetas del producto · Línea superior · título · bajada ·
     precio + Precio por botella · Comprar con cantidad.
   Con los bloques por defecto de WooCommerce (imagen, título, precio, botón)
   la card se ve igual, sin las piezas del catálogo.
   Componentes reutilizables (.ws-flag, .ws-wine-chip, .ws-overline,
   .ws-unit-price, .ws-buy, .ws-qty) en theme.css; acá solo su lugar en la card.
   Solo tokens de theme.json.
   ============================================================================= */

/* ---- Grilla ------------------------------------------------------------------
   Desktop: las columnas del bloque. Tablet vertical: 3 como máximo. Mobile: una
   card horizontal por fila (al final de este archivo). */
.wc-block-product-template.wc-block-product-template__responsive {
	gap: var(--wp--preset--spacing--40);
}

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

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

/* ---- Card -------------------------------------------------------------------- */
.wc-block-product-template .wc-block-product {
	--ws-card-padding: var(--wp--preset--spacing--40);
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	padding-block-end: var(--ws-card-padding);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--x-large);
	background: var(--wp--preset--color--surface);
	text-align: start;
	transition: border-color var(--wp--custom--transition--fast);
}

.wc-block-product-template .wc-block-product:hover {
	border-color: var(--wp--preset--color--border-strong);
}

/* Todo lo que no es la foto lleva el padding del cuerpo; el espacio vertical lo da cada pieza. */
.wc-block-product-template .wc-block-product > * {
	margin-block: 0;
	padding-inline: var(--ws-card-padding);
}

/* Foto cuadrada a sangre, sobre fondo oscuro mientras carga. En el editor el bloque
   envuelve la imagen en .wp-block-woocommerce-product-image. */
.wc-block-product-template .wc-block-product > :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image) {
	flex: none;
	margin-block-end: var(--ws-card-padding);
	padding-inline: 0;
	border-radius: 0;
	background: var(--wp--preset--color--inverse);
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}

/* Etiquetas sobre la foto: distinciones arriba, tipos de vino abajo. La capa es del
   alto de la foto (cuadrada) y deja pasar el clic al link de la foto. */
.wc-block-product-template .wc-block-product > .ws-product-badges {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	padding: var(--wp--preset--spacing--20);
	pointer-events: none;
}

.ws-product-badges .ws-flags {
	position: static;
}

.ws-product-badges .ws-wine-chips {
	margin-block-start: auto;
}

/* En el editor la capa se puede seleccionar. */
.editor-styles-wrapper .wc-block-product > .ws-product-badges {
	pointer-events: auto;
}

/* Cuerpo */
.wc-block-product-template .wc-block-product > .ws-overline {
	margin-block-end: var(--wp--preset--spacing--10);
}

.wc-block-product-template .wc-block-product > .wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	text-align: start;
}

.wc-block-product .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wc-block-product .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
}

/* Bajada: tres líneas como máximo, con alto fijo para que las cards de una fila calcen. */
.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-summary {
	display: -webkit-box;
	min-height: calc(3 * var(--wp--custom--line-height--normal) * 1em);
	/* Tope de tres líneas: con varios párrafos el recorte de line-clamp dejaba asomar una cuarta. */
	max-height: calc(3 * var(--wp--custom--line-height--normal) * 1em);
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--normal);
}

.wc-block-product .wp-block-woocommerce-product-summary p {
	display: inline;
	margin: 0;
}

/* Precio (con "Precio por botella" al lado si es un pack). */
.wc-block-product-template .wc-block-product > .ws-product-card__price,
.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-price {
	margin-block: var(--wp--preset--spacing--30);
}

.wc-block-product-template .wc-block-product > .ws-product-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--wp--preset--spacing--30);
}

/* "$ X por botella" siempre bajo el precio: al lado, cambiaba de línea según el largo de las cifras. */
.wc-block-product-template .wc-block-product > .ws-product-card__price > .ws-unit-price {
	flex-basis: 100%;
}

.wc-block-product .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--subtitle);
	font-weight: 700;
	text-align: start;
	white-space: nowrap;
}

.wc-block-product .wc-block-components-product-price del {
	margin-inline-end: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
}

/* Compra al fondo de la card, con el botón a todo el ancho que quede. */
.wc-block-product-template .wc-block-product > :is(.ws-product-buy, .wp-block-woocommerce-product-button) {
	margin-block-start: auto;
}

.ws-product-buy .ws-buy__add,
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link {
	flex: 1;
	width: 100%;
}

.wc-block-product .wp-block-woocommerce-product-button {
	justify-content: stretch;
	text-align: center;
}

/*
 * Desde 700 px, las cards de una fila comparten sus filas (subgrid): la línea, el nombre, la bajada, el precio y la
 * compra quedan a la misma altura en todas, aunque un nombre ocupe más líneas. Bajo 700 px la card es horizontal
 * (abajo) y la compacta no cambia. Ninguna fila puede quedar vacía: una fila vacía suma el espacio entre filas de
 * la grilla. Por eso desde 1024 px, con la capa de etiquetas absoluta sobre la foto, son 6 filas, y entre 700 y
 * 1023, con los tipos de vino en el flujo bajo la foto, 7.
 */
@media (min-width: 700px) {
	.wc-block-product-template .wc-block-product:not(:has(> .ws-product-mini)) {
		--ws-card-row: 0;
		display: grid;
		grid-row: span calc(6 + var(--ws-card-row));
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.wc-block-product-template .wc-block-product > :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image) {
		grid-row: 1;
	}

	.wc-block-product-template .wc-block-product > .ws-overline {
		grid-row: calc(2 + var(--ws-card-row));
	}

	.wc-block-product-template .wc-block-product > .wp-block-post-title {
		grid-row: calc(3 + var(--ws-card-row));
	}

	.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-summary {
		grid-row: calc(4 + var(--ws-card-row));
		align-self: start;
	}

	.wc-block-product-template .wc-block-product > :is(.ws-product-card__price, .wp-block-woocommerce-product-price) {
		grid-row: calc(5 + var(--ws-card-row));
		align-self: start;
	}

	.wc-block-product-template .wc-block-product > :is(.ws-product-buy, .wp-block-woocommerce-product-button) {
		grid-row: calc(6 + var(--ws-card-row));
		align-self: end;
	}
}

/* Desde 1024 la capa de etiquetas no lleva fila: con una, se ubicaría respecto de esa fila y no de la card. */
@media (min-width: 700px) and (max-width: 1023px) {
	.wc-block-product-template .wc-block-product:not(:has(> .ws-product-mini)) {
		--ws-card-row: 1;
	}

	.wc-block-product-template .wc-block-product:not(:has(> .ws-product-mini)) > .ws-product-badges {
		grid-row: 2;
	}
}

/*
 * Card angosta (menos de 270 px: desktop angosto, tablet, mobile): sin selector de cantidad, como en el diseño.
 * El container es la compra y no la card, porque la contención de un container anula el subgrid de la card: 235 px
 * de compra son 270 de card menos su borde y el padding de 16 px a cada lado.
 */
.wc-block-product-template .wc-block-product > .ws-product-buy {
	container: ws-product-buy / inline-size;
}

@container ws-product-buy (max-width: 235px) {
	.ws-product-buy .ws-qty {
		display: none;
	}
}

/* ---- Tablet vertical y mobile: los tipos de vino bajan de la foto ------------- */
@media (max-width: 1023px) {
	.wc-block-product-template .wc-block-product > .ws-product-badges {
		position: static;
		aspect-ratio: auto;
		padding: var(--wp--preset--spacing--20) var(--ws-card-padding) 0;
		pointer-events: auto;
	}

	.ws-product-badges .ws-flags {
		position: absolute;
		top: var(--wp--preset--spacing--20);
		left: var(--wp--preset--spacing--20);
	}

	.ws-product-badges .ws-wine-chip {
		box-shadow: none;
		border: 1px solid var(--wp--preset--color--border);
	}

	/* Las fichas quedan entre la foto y la línea superior. */
	.wc-block-product:has(> .ws-product-badges .ws-wine-chips) > :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image) {
		margin-block-end: 0;
	}

	.wc-block-product > .ws-product-badges:has(.ws-wine-chips) {
		margin-block-end: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 699px) {
	.wc-block-product-template .wc-block-product {
		--ws-card-padding: var(--wp--preset--spacing--30);
	}

	.wc-block-product-template .wc-block-product > .wp-block-post-title {
		font-size: var(--wp--preset--font-size--body);
	}

	.wc-block-product-template .wc-block-product > .ws-overline {
		font-size: var(--wp--preset--font-size--xx-small);
	}

	.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-summary {
		min-height: 0;
		font-size: var(--wp--preset--font-size--x-small);
	}

	.wc-block-product .wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--lead);
	}

	.ws-product-badges .ws-wine-chip {
		font-size: var(--wp--preset--font-size--xx-small);
	}
}

/* ---- Mobile: card horizontal --------------------------------------------------
   Foto cuadrada a la izquierda (completa: la foto lleva información; encima, solo el
   descuento) y los datos a la derecha, centrados a su alto; la compra, a todo el ancho
   abajo. Filas: 1 y 5 reparten el alto que sobre (con el padding de la card como
   mínimo), 2 a 4 son la línea, el nombre y el precio, y 6 es la compra.
   La card compacta (.ws-product-mini) no cambia. */
@media (max-width: 699px) {
	.wc-block-product-template .wc-block-product:not(:has(> .ws-product-mini)) {
		--ws-card-media: clamp(112px, 40%, 160px);
		display: grid;
		grid-template-columns: var(--ws-card-media) minmax(0, 1fr);
		grid-template-rows:
			minmax(var(--ws-card-padding), 1fr)
			auto auto auto
			minmax(var(--ws-card-padding), 1fr)
			auto;
		column-gap: var(--ws-card-padding);
		padding-block-end: 0;
	}

	.wc-block-product-template .wc-block-product:not(:has(> .ws-product-mini)) > * {
		grid-column: 2;
		padding-inline: 0 var(--ws-card-padding);
	}

	/* Foto 1:1 sin recorte, centrada al alto de los datos si estos son más altos. */
	.wc-block-product-template .wc-block-product > :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image) {
		grid-column: 1;
		grid-row: 1 / 6;
		align-self: center;
		margin: 0;
		padding: 0;
	}

	.wc-block-product-template .wc-block-product .wc-block-components-product-image a {
		display: block;
	}

	/* Sobre la foto, solo el descuento, arriba a la izquierda: sin distinciones ni tipos de vino. */
	.wc-block-product-template .wc-block-product > .ws-product-badges {
		display: none;
	}

	.wc-block-product-template .wc-block-product .wc-block-components-product-image .wc-block-components-product-sale-badge.wc-block-components-product-sale-badge--align-right {
		right: auto;
		left: var(--wp--preset--spacing--20);
	}

	.wc-block-product-template .wc-block-product > .ws-overline {
		grid-row: 2;
	}

	/* Nombre: dos líneas como máximo. */
	.wc-block-product-template .wc-block-product > .wp-block-post-title {
		display: -webkit-box;
		grid-row: 3;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	/* WordPress deja el link en inline-block: así el recorte no lo corta. */
	.wc-block-product-template .wc-block-product > .wp-block-post-title a {
		display: inline;
	}

	/* Sin bajada: el nombre y el precio bastan en la card angosta. */
	.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-summary {
		display: none;
	}

	.wc-block-product-template .wc-block-product > :is(.ws-product-card__price, .wp-block-woocommerce-product-price) {
		grid-row: 4;
		margin-block: var(--wp--preset--spacing--20) 0;
	}

	/* Compra: fila propia a todo el ancho, separada por una línea. */
	.wc-block-product-template .wc-block-product > :is(.ws-product-buy, .wp-block-woocommerce-product-button) {
		grid-column: 1 / -1;
		grid-row: 6;
		margin: 0;
		padding: var(--wp--preset--spacing--30) var(--ws-card-padding);
		border-block-start: 1px solid var(--wp--preset--color--border);
	}
}