/* ============================================================================
   TIENDA — Mis Amigos Los Animalitos
   La tarjeta de producto, la rejilla, la superficie de la tienda, las insignias
   y los estados de carga.

   Se encola sólo en las superficies de la tienda (ver inc/assets.php:
   `ma_is_store()`) y en la portada, que también usa la rejilla de productos.

   DE DÓNDE SALE
   -------------
   La dirección visual está aprobada en propuesta/direccion-visual.html, la
   rejilla y la tarjeta en propuesta/home-tienda.html y el tratamiento de los
   botones en propuesta/variantes-compra.html, variante
   "I · Invertida tonal" —que es la que eligió el cliente—.
   El contrato de clases está documentado, literal, en el docblock de
   inc/woocommerce.php. Si un nombre cambia aquí, cambia allí también.

   DE QUÉ DEPENDE
   --------------
   · base.css ... tokens `--ma-*`, botones `.ma-boton` y sus variantes.
   · layout.css . contenedores, secciones, `.ma-vacio`, `.ma-paginacion`.
   Aquí NO se redefine ni un token ni un botón: se usan.

   LO QUE ESTE ARCHIVO NO HACE
   ---------------------------
   · NO usa `!important` ni estilos en línea.
   · NO escribe colores a mano: todo sale de tokens `--ma-*`.
   · NO usa `linear` ni `ease-in-out`: la curva es `var(--ma-ease)`.
   · NO usa emojis como iconos. Los iconos son SVG en línea (inc/icons.php).
   · NO pone fondo ni borde de color detrás de las fotos: las imágenes del
     catálogo ya vienen sobre blanco y cualquier tinte detrás se ve sucio.
   · NO usa `data-ma-revelar` en nada crítico: si el JS no llega, la rejilla y
     la tarjeta se ven igual.

   ESPECIFICIDAD FRENTE A WOOCOMMERCE (la trampa que ya nos mordió)
   ---------------------------------------------------------------
   En las superficies de la tienda WooCommerce encola sus tres hojas y
   `woocommerce-layout.css` trae `.woocommerce img, .woocommerce-page img {
   height: auto; max-width: 100% }`, que es (0,1,1): gana a cualquier regla del
   tema de una sola clase (0,1,0). Por eso, TODA regla de este archivo que fije
   el tamaño de una imagen dentro de una superficie de WooCommerce va con al
   menos (0,2,0), y las de la tarjeta se anclan a `.ma-tienda` o a
   `ul.products` a propósito. Si algún día se "simplifica" un selector de
   imagen quitándole el ancla, la cabecera y la rejilla se vuelven a romper.
   ========================================================================== */

/* ============================================================================
   1. LA SUPERFICIE DE LA TIENDA
   El envoltorio que imprime inc/woocommerce.php:
     .ma-tienda > .ma-contenedor > main#contenido.ma-tienda__principal
   ========================================================================== */
.ma-tienda {
	padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(2.5rem, 5vw, 4rem);
}

/*
 * WooCommerce pone `.woocommerce-page` y `.woocommerce` en el <body> de sus
 * superficies. Esta regla cubre el caso general: una imagen suelta dentro de
 * la tienda que no sea la de la tarjeta.
 *
 * OJO, AQUÍ YA NOS MORDIÓ UNA VEZ: el logotipo de la cabecera es un <img>
 * dentro de `.woocommerce-page`, así que TAMBIÉN le afecta esta regla.
 * `header.css` ya trae `.ma-marca__logo, .woocommerce .ma-marca__logo,
 * .woocommerce-page .ma-marca__logo { width: auto; height: 2.6rem; … }`, que es
 * (0,2,0) y está pensada exactamente para esto. Por eso aquí NO se repite ni se
 * anula: al añadir una regla propia con la misma especificidad, tienda.css se
 * encola más tarde y le ganaba la cascada, el logotipo se estiraba a 534×568 px
 * y la cabecera pasaba de 124 px a 645 px. No hace falta nada para arreglarlo:
 * sólo no pisarlo.
 */
.woocommerce-page img,
.woocommerce img {
	height: auto;
	max-width: 100%;
}

/*
 * Y el tamaño de la imagen de la tarjeta. Ancla `.woocommerce-page` (una clase)
 * + `ul.products` (otra) + `li.product` (otra) + el elemento `img`: (0,3,1)
 * frente al (0,1,1) de WooCommerce. Aquí sobran clases a propósito.
 */
.woocommerce-page ul.products li.product img,
.woocommerce ul.products li.product img,
.ma-tienda ul.products li.product img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
}

/* ============================================================================
   2. LA REJILLA
   Muchos productos cuanto antes. En el móvil más pequeño ya se ven DOS
   columnas, que es la mitad del problema que planteó el cliente ("solo se ven
   4 productos en el home"): con dos columnas, en la primera pantalla entran
   cuatro tarjetas sin tocar el scroll.
   ========================================================================== */
ul.products.ma-rejilla-productos,
.ma-tienda ul.products,
.ma-rejilla-productos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.6rem, 1.6vw, 1.15rem);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

/*
 * LOS PSEUDO-ELEMENTOS DE WOOCOMMERCE SON HIJOS DE REJILLA.
 *
 * Este es el fallo más escurridizo del archivo, y no se ve leyendo el CSS:
 * hay que medir para encontrarlo.
 *
 * `woocommerce-layout.css` trae el clearfix clásico de WooCommerce:
 *
 *   .woocommerce ul.products::before,
 *   .woocommerce ul.products::after { content: " "; display: table }
 *
 * Eso nació para limpiar flotantes. Pero en cuanto el contenedor pasa a
 * `display: grid`, un `::before` con `content` deja de ser una caja anónima y
 * se convierte en UN HIJO DE REJILLA MÁS. Consecuencia medida en la tienda,
 * con 5 pistas de 234,875 px:
 *
 *   - la primera fila coloca 4 productos en las columnas 2–5 y deja la
 *     columna 1 VACÍA, porque el `::before` se quedó con la celda 1
 *   - el `::after` añade una sexta fila fantasma de 0 px al final
 *
 * Encajaba con todos los síntomas que se habían medido (4 + 5 + 5 + 5 + 5 = 24
 * productos, y una fila de más de altura cero). Cuadrar el número fue lo que
 * delató la causa.
 *
 * `content: none` es lo que de verdad lo neutraliza: con solo `display: none`
 * el pseudo-elemento sigue existiendo en el árbol. Se ponen los dos.
 */
.ma-tienda ul.products::before,
.ma-tienda ul.products::after,
ul.products.ma-rejilla-productos::before,
ul.products.ma-rejilla-productos::after,
.ma-rejilla-productos::before,
.ma-rejilla-productos::after {
	content: none;
	display: none;
}

/*
 * El <li> de WooCommerce deja de ser una caja flotante.
 *
 * AQUÍ ESTÁ LA TRAMPA DE ESPECIFICIDAD MÁS CARA DE ESTE ARCHIVO.
 * `woocommerce-layout.css` y `woocommerce-smallscreen.css` traen, por columnas:
 *
 *   .woocommerce-page ul.products li.product                    { width: 22.05% }  (0,2,2)
 *   .woocommerce-page ul.products.columns-5 li.product          { width: 16.95% }  (0,3,2)
 *   .woocommerce-page ul.products[class*="columns-"] li.product { width: 48% }      (0,3,2)
 *
 * La primera versión de esta regla era `ul.products.ma-rejilla-productos >
 * li.product`, que es (0,2,3). Y (0,3,2) GANA a (0,2,3): en el tercer número se
 * comparan clases contra elementos, y una clase siempre pesa más que un
 * elemento. Medido: las celdas salían a 39,8 px —exactamente el 16,95 % de una
 * columna de 234,875 px— dentro de columnas de 234 px, y la rejilla parecía
 * rota. No era el grid: era el ancho heredado del tema clásico.
 *
 * Medido también que `woocommerce-smallscreen.css` se sirve SIN condición de
 * medios en este sitio, así que su `width: 48%` está activo en escritorio. No
 * tiene `!important`, y da igual: la regla de aquí abajo lo gana.
 *
 * La solución NO es un `!important` (prohibido en este archivo), ni confiar en
 * `justify-self: stretch` (comprobado: sigue devolviendo 40 px, porque el
 * `width` explícito de WooCommerce le gana al estirado implícito). Es subir la
 * especificidad con una clase MÁS que las suyas y ganar por orden de carga,
 * porque tienda.css va después de las hojas de WooCommerce:
 *
 *   .ma-tienda ul.products[class*="columns-"] li.product   → (0,3,3)  gana
 *   .ma-tienda ul.products.ma-rejilla-productos li.product → (0,3,3)  gana
 *   .ma-rejilla-productos__item                            → (0,1,0)  por si
 *                                                                    falta el ul
 *
 * `width: 100%` es lo correcto en rejilla: un elemento de rejilla resuelve su
 * porcentaje contra su área de rejilla, así que el 100 % es la columna exacta.
 * Verificado midiendo: con la regla vieja la celda medía 40 px; con esta, 235 px.
 */
.ma-tienda ul.products[class*="columns-"] li.product,
.ma-tienda ul.products.ma-rejilla-productos li.product,
ul.products.ma-rejilla-productos > li.product,
.ma-rejilla-productos__item {
	float: none;
	width: 100%;
	clear: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-self: stretch;
	min-width: 0;
	max-width: none;
}

/* Y el contenedor estira sus celdas. */
ul.products.ma-rejilla-productos,
.ma-rejilla-productos {
	justify-items: stretch;
	align-items: stretch;
}

/* La tarjeta ocupa toda la celda: así todas las filas miden igual. */
.ma-rejilla-productos__item > .ma-tarjeta-producto,
.ma-tarjeta-producto-celda > .ma-tarjeta-producto {
	width: 100%;
}

@media (min-width: 40rem) {
	ul.products.ma-rejilla-productos,
	.ma-tienda ul.products,
	.ma-rejilla-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 56rem) {
	ul.products.ma-rejilla-productos,
	.ma-tienda ul.products,
	.ma-rejilla-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 75rem) {
	ul.products.ma-rejilla-productos,
	.ma-tienda ul.products,
	.ma-rejilla-productos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Variante de portada: una columna menos, porque compite con otras secciones. */
.ma-rejilla-productos--portada { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 48rem) {
	.ma-rejilla-productos--portada { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 75rem) {
	.ma-rejilla-productos--portada { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La rejilla sin productos no debe dejar un hueco: el estado vacío ya avisa. */
ul.products:empty { display: none; }

/* ============================================================================
   3. LA TARJETA DE PRODUCTO
   Orden visual, de arriba abajo:
     foto (con insignias arriba a la izquierda y el corazón arriba a la derecha)
     categoría · título · precio · entrega · los dos botones
   ========================================================================== */
.ma-tarjeta-producto {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--ma-paper);
	border: var(--ma-line-soft);
	border-radius: var(--ma-r-sm);
	/*
	 * AQUÍ NO VA `overflow: hidden`, y es importante.
	 *
	 * Estaba puesto para que la foto no se saliera de las esquinas redondeadas.
	 * Pero el botón "Comprar ahora" lleva una sombra de 0 12px 26px -14px, que
	 * se extiende unos 24 px por debajo del botón, y la tarjeta sólo le dejaba
	 * 1 px de margen: la sombra se cortaba en seco contra el borde inferior y el
	 * botón parecía tener un borde sucio. Medido: card.bottom - botón.bottom = 1 px.
	 *
	 * El recorte se mueve a `__media`, que es el único hijo que llega al borde.
	 * Así la foto sigue respetando las esquinas y la sombra se ve entera.
	 */
	transition:
		transform var(--ma-t-base) var(--ma-ease),
		box-shadow var(--ma-t-base) var(--ma-ease),
		border-color var(--ma-t-base) var(--ma-ease);
}

.ma-tarjeta-producto:hover {
	transform: translateY(-3px);
	border-color: rgba(6, 34, 46, .12);
	box-shadow: var(--ma-sh-lift);
}

.ma-tarjeta-producto:focus-within {
	border-color: var(--ma-teal-300);
}

/* --- 3.1 La foto ---------------------------------------------------------
   FONDO BLANCO Y NADA MÁS. Las fotos del catálogo ya vienen recortadas sobre
   blanco: ponerles un fondo gris, un borde de color o un degradado detrás las
   ensucia y hace que la rejilla parezca un mosaico. El único adorno es el
   lavado turquesa al pasar el ratón, que es color de marca y aparece después,
   cuando ya se está mirando el producto.
   ------------------------------------------------------------------------ */
.ma-tarjeta-producto__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--ma-paper);
	/*
	 * Aquí sí va el recorte: es el único hijo a sangre de la tarjeta, así que
	 * es quien tiene que respetar las esquinas redondeadas de arriba. El
	 * redondeo de abajo no hace falta porque debajo ya va el cuerpo de texto.
	 */
	border-radius: var(--ma-r-sm) var(--ma-r-sm) 0 0;
	/*
	 * La línea de separación entre la foto y el texto viene del diseño
	 * aprobado (`.pcard .shot{border-bottom:1px solid rgba(6,34,46,.06)}`).
	 * Es muy tenue a propósito: marca dónde acaba la imagen sin dibujar un
	 * marco, que es lo que ensuciaría la rejilla.
	 */
	border-bottom: 1px solid rgba(6, 34, 46, 0.06);
	overflow: hidden;
}

.ma-tarjeta-producto__enlace {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/*
 * La imagen va al 78 % de la superficie, centrada y contenida (nunca
 * recortada): el producto se ve entero y queda aire alrededor.
 *
 * El 78 % NO es un número al azar: es el que usa la tarjeta del diseño
 * aprobado (`.pcard .shot img{width:78%;height:78%}`). Estuvo en 90 % durante un
 * tiempo, buscando quitar un hueco que en realidad venía de otra parte, y eso
 * dejaba la foto demasiado pegada a los bordes comparada con el preview.
 *
 * `mix-blend-mode: multiply` también viene del aprobado: funde el blanco de la
 * foto con el blanco de la tarjeta, de modo que las fotos del catálogo —que ya
 * vienen sobre blanco— no muestran su recuadro.
 *
 * ESPECIFICIDAD: `.ma-tienda` + `.ma-tarjeta-producto` + `__media` + `img` es
 * (0,3,1), por encima del (0,1,1) de `woocommerce-layout.css`.
 */
/*
 * LA IMAGEN SE MUESTRA AL 100 %. EL AIRE YA VIENE DENTRO DEL ARCHIVO.
 *
 * Antes esto estaba al 78 %, porque las fotos tenían proporciones distintas y
 * había que reducirlas para que la rejilla pareciera uniforme. Pero eso era un
 * parche por CSS sobre un problema de las imágenes.
 *
 * Ahora las 729 imágenes del catálogo están ENCUADRADAS de verdad (ver
 * `local/import/encuadrar_catalogo.php`): cada archivo es un cuadrado con el
 * producto centrado y un margen del 12 % sobre fondo blanco. El producto ocupa
 * el 80,6 % del lienzo, que es lo que pide el diseño aprobado.
 *
 * Si además se aplicara el 78 % de antes, el producto acabaría al 63 %: dos
 * reducciones encima de la misma foto. Mostrándolas al 100 %, el margen que se
 * ve es exactamente el que se horneó en la imagen, igual en las 729.
 *
 * ESPECIFICIDAD: hace falta (0,3,3) para ganar.
 */
.ma-tienda ul.products li.product .ma-tarjeta-producto__media img,
.ma-tienda .ma-tarjeta-producto .ma-tarjeta-producto__media img,
.ma-tienda .ma-tarjeta-producto__media img,
.ma-tienda .ma-tarjeta-producto__imagen,
.ma-tarjeta-producto__media .ma-tarjeta-producto__imagen {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
	transition: transform var(--ma-t-slow) var(--ma-ease);
}

.ma-tarjeta-producto:hover .ma-tarjeta-producto__media img,
.ma-tarjeta-producto:hover .ma-tarjeta-producto__imagen {
	transform: scale(1.04);
}

/* WooCommerce mete un <a> envolviendo la foto; aquí ya hay un envoltorio. */
.ma-tarjeta-producto__media a {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- 3.2 Insignias: arriba a la izquierda --------------------------------- */
.ma-tarjeta-producto__insignias {
	position: absolute;
	top: clamp(0.45rem, 1vw, 0.7rem);
	left: clamp(0.45rem, 1vw, 0.7rem);
	z-index: var(--ma-z-base);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	pointer-events: none;
}

.ma-insignia {
	display: inline-flex;
	align-items: center;
	padding: 0.22rem 0.55rem;
	border-radius: var(--ma-pill);
	font-family: var(--ma-font-ui);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.3;
	white-space: nowrap;
	background: var(--ma-ink-900);
	color: var(--ma-paper);
}

/* Oferta: el naranja cálido de la marca. Es la única insignia que "grita". */
.ma-insignia--oferta {
	background: var(--ma-warm-500);
	color: var(--ma-ink-900);
}

/* Agotado: tinta, sin color. No se anuncia una oferta de lo que no hay. */
.ma-insignia--agotado {
	background: var(--ma-ink-900);
	color: var(--ma-paper);
}

/* Nuevo: turquesa oscuro, informativo y sin competir con la oferta. */
.ma-insignia--nuevo {
	background: var(--ma-teal-700);
	color: var(--ma-paper);
}

/* Pocas unidades: aviso, no alarma. */
.ma-insignia--pocas {
	background: var(--ma-warm-50);
	color: var(--ma-ink-900);
	box-shadow: inset 0 0 0 1px var(--ma-warm-500);
}

/* Envío: informativo. No se usa hoy (el envío gratis depende del total del
   carrito), pero la clase existe para cuando el negocio lo decida. */
.ma-insignia--envio {
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
}

/* --- 3.3 El corazón de favoritos: arriba a la derecha ---------------------
   Es un botón con estado (`aria-pressed`), no un icono decorativo. 2,5rem de
   lado: por debajo de eso no se acierta con el pulgar.
   ------------------------------------------------------------------------ */
.ma-tarjeta-producto__favorito {
	position: absolute;
	top: clamp(0.4rem, 1vw, 0.6rem);
	right: clamp(0.4rem, 1vw, 0.6rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: var(--ma-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition:
		transform var(--ma-t-base) var(--ma-ease),
		background-color var(--ma-t-base) var(--ma-ease),
		border-color var(--ma-t-base) var(--ma-ease);
}

.ma-tarjeta-producto__favorito:hover {
	transform: scale(1.08);
	background: var(--ma-paper);
}

.ma-tarjeta-producto__favorito .ma-icon {
	fill: none;
	stroke: var(--ma-ink-500);
	transition:
		fill var(--ma-t-base) var(--ma-ease),
		stroke var(--ma-t-base) var(--ma-ease);
}

.ma-tarjeta-producto__favorito[aria-pressed="true"] {
	background: var(--ma-teal-50);
	border-color: var(--ma-teal-200);
}

.ma-tarjeta-producto__favorito[aria-pressed="true"] .ma-icon {
	fill: var(--ma-teal-600);
	stroke: var(--ma-teal-600);
}

/* --- 3.4 El cuerpo de texto ---------------------------------------------- */
.ma-tarjeta-producto__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: clamp(0.6rem, 1.4vw, 0.85rem) clamp(0.6rem, 1.4vw, 0.95rem) clamp(0.7rem, 1.6vw, 1rem);
}

/*
 * LA CATEGORÍA DICE ALGO. Es la línea que responde "¿qué es esto?" antes de
 * leer el título: en un catálogo de 780 productos eso ayuda al usuario, y es
 * exactamente lo contrario de esos iconos que no significan nada.
 */
/*
 * La categoría va en minúscula natural, NO en mayúsculas.
 *
 * Estaba en mayúsculas con `letter-spacing: 0.1em` y peso 700. Eso es el tic
 * más reconocible de las plantillas baratas: mayúsculas espaciadas encima de
 * cada título. El diseño aprobado la pone en caja normal, más pequeña y más
 * ligera, de modo que el ojo va al producto y no a la etiqueta.
 *
 * Valores tomados de `.pcard .pcat` del preview: .68rem, peso 600,
 * letter-spacing .01em, line-height 1.25.
 */
.ma-tarjeta-producto__categoria {
	display: block;
	font-family: var(--ma-font-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-transform: none;
	color: var(--ma-teal-600);
	text-decoration: none;
	margin-bottom: 0.2rem;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.ma-tarjeta-producto__categoria:hover {
	color: var(--ma-teal-800);
	text-decoration: underline;
}

/* El título: máximo dos líneas. Es lo que impide que una tarjeta con un
   nombre larguísimo ("Alimento húmedo Hill's lata i/d Kitten 156 g") estire
   la fila entera y descoloque la rejilla. */
/*
 * El título reserva SIEMPRE dos líneas de alto.
 *
 * `min-height: 2.27rem` viene del diseño aprobado (`.pcard h4`) y no es un
 * capricho: sin esa reserva, un título de una línea deja la tarjeta más corta
 * que la de al lado, y como los precios y los botones van debajo, cada tarjeta
 * de la fila los tiene a una altura distinta. Eso es lo que hace que una
 * rejilla parezca descuidada aunque cada tarjeta esté bien.
 *
 * El clamp a dos líneas ya estaba; lo que faltaba era la altura mínima.
 */
.ma-tarjeta-producto__titulo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-family: var(--ma-font-ui);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: 0;
	margin: 0.3rem 0 0.4rem;
	min-height: 2.27rem;
}

.ma-tarjeta-producto__titulo a {
	color: var(--ma-ink-900);
	text-decoration: none;
	transition: color var(--ma-t-fast) var(--ma-ease);
}

.ma-tarjeta-producto__titulo a:hover {
	color: var(--ma-teal-700);
}

/* --- 3.5 El precio -------------------------------------------------------
   El precio va en el verde de precio del proyecto, en la tipografía de
   titulares y con cifras tabulares: así todos los precios de la rejilla
   alinean sus dígitos y se pueden comparar de un vistazo.
   ------------------------------------------------------------------------ */
.ma-tarjeta-producto__precio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
}

.ma-tarjeta-producto__precio-actual {
	font-family: var(--ma-font-display);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ma-price);
	font-variant-numeric: tabular-nums;
}

/* El precio anterior, tachado y discreto: sirve de contexto, no de reclamo. */
.ma-tarjeta-producto__precio-antes {
	font-family: var(--ma-font-ui);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--ma-ink-400);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

/*
 * El "-20 %" en línea. Por defecto NO se muestra: el descuento ya va en la
 * insignia sobre la foto y repetirlo dos veces en la misma tarjeta es ruido.
 * La clase existe para quien necesite el dato junto al precio (una ficha, un
 * carril de ofertas) y ahí basta con `display: inline`.
 */
.ma-tarjeta-producto__descuento {
	display: none;
	font-size: var(--ma-fs-xs);
	font-weight: 800;
	color: var(--ma-warm-500);
	font-variant-numeric: tabular-nums;
}

/* WooCommerce imprime <del> e <ins> dentro del precio de oferta. */
.ma-tarjeta-producto__precio del {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--ma-ink-400);
	text-decoration: line-through;
}

.ma-tarjeta-producto__precio ins {
	text-decoration: none;
}

/* --- 3.6 La línea de entrega --------------------------------------------
   "Disponible · llega mañana" o "Últimas 3 unidades". Es información de
   compra, no adorno: por eso es texto y no un icono.
   ------------------------------------------------------------------------ */
.ma-tarjeta-producto__entrega {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.45rem;
	font-family: var(--ma-font-ui);
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--ma-ink-500);
}

.ma-tarjeta-producto__entrega::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ma-price);
}

.ma-tarjeta-producto__entrega.is-ultimas::before { background: var(--ma-warm-500); }
/*
 * CONTRASTE: "Sin existencias" mide 11,52 px y en `--ma-ink-400` daba 3,12:1.
 * El mínimo para texto normal es 4,5:1. Pasa a `--ma-ink-500` (5,71:1).
 *
 * Aviso que además importa: este texto le dice a alguien que NO puede comprar.
 * Es justo el mensaje que no puede quedar ilegible.
 */
.ma-tarjeta-producto__entrega.is-agotado { color: var(--ma-ink-500); }
.ma-tarjeta-producto__entrega.is-agotado::before { background: var(--ma-ink-500); }

/* ============================================================================
   4. LOS DOS BOTONES — variante "I · Invertida tonal"
   Copiada literal de propuesta/variantes-compra.html (bloque
   `[data-v="tonal"]`), que es la que eligió el cliente:

     secundario  → fondo --teal-50, texto --teal-700, sin sombra
                   y la pastilla del icono en --teal-100
     dominante   → fondo --teal-600, texto blanco

   Traducido a los tokens del tema:
     --teal-50 → --ma-teal-50   ·  --teal-100 → --ma-teal-100
     --teal-600 → --ma-teal-600 ·  --teal-700 → --ma-teal-700

   Traducido a las clases del tema:
     .btn .btn--add      → .ma-boton .ma-boton--tonal .ma-tarjeta-producto__anadir
     .btn .btn--buy      → .ma-boton .ma-boton--primario .ma-tarjeta-producto__comprar
     .btn .ico           → .ma-boton__ico

   LA JERARQUÍA ES EL PUNTO: "Comprar ahora" es la acción dominante (turquesa
   sólido con su sombra) y "Añadir al carrito" la secundaria (relleno suave
   turquesa, sin borde y sin sombra). Una sola acción dominante por tarjeta:
   dos botones con el mismo peso obligan a decidir, y decidir cuesta ventas.
   ========================================================================== */
/*
 * Los botones van FUERA de `__cuerpo` en el marcado, y eso los dejaba sin
 * relleno: tocaban los tres bordes de la tarjeta mientras el texto sí tenía
 * márgenes. Medido: card.bottom - botón.bottom = 1 px, y los botones más
 * anchos que el bloque de texto. Ese desajuste es lo que se veía como una
 * margen rara.
 *
 * Se les da el MISMO relleno lateral e inferior que a `__cuerpo`, y se quita
 * el `margin-top`, porque el relleno inferior del cuerpo ya separa el texto de
 * los botones. Antes se sumaban los dos (16 + 14 = 30 px de aire).
 *
 * Se arregla aquí y no moviendo el bloque dentro de `__cuerpo` para no
 * reindentar 40 líneas de PHP por un resultado idéntico.
 */
.ma-tarjeta-producto__acciones {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-top: 0;
	padding: 0 clamp(0.6rem, 1.4vw, 0.95rem) clamp(0.7rem, 1.6vw, 1rem);
}

.ma-tarjeta-producto__acciones .ma-boton {
	width: 100%;
	white-space: nowrap;
}

/* --- 4.1 El secundario: "Añadir al carrito" ------------------------------ */
.ma-tienda .ma-tarjeta-producto__anadir,
.ma-tarjeta-producto__anadir.ma-boton--tonal {
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
	box-shadow: none;
}

.ma-tienda .ma-tarjeta-producto__anadir:hover,
.ma-tarjeta-producto__anadir.ma-boton--tonal:hover {
	background: var(--ma-teal-100);
	color: var(--ma-teal-800);
}

.ma-tienda .ma-tarjeta-producto__anadir .ma-boton__ico,
.ma-tarjeta-producto__anadir .ma-boton__ico {
	background: var(--ma-teal-100);
}

/* --- 4.2 El dominante: "Comprar ahora" ----------------------------------- */
.ma-tienda .ma-tarjeta-producto__comprar,
.ma-tarjeta-producto__comprar.ma-boton--primario {
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	box-shadow: 0 12px 26px -14px rgba(0, 122, 153, .8);
}

.ma-tienda .ma-tarjeta-producto__comprar:hover,
.ma-tarjeta-producto__comprar.ma-boton--primario:hover {
	background: var(--ma-teal-700);
	color: var(--ma-paper);
}

/* --- 4.3 El icono viaja en la pastilla, a la derecha del texto ----------- */
.ma-tarjeta-producto__anadir .ma-boton__ico,
.ma-tarjeta-producto__comprar .ma-boton__ico {
	order: 2;
}

.ma-tarjeta-producto__anadir .ma-icon,
.ma-tarjeta-producto__comprar .ma-icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

/* --- 4.4 Los botones que imprime WooCommerce -----------------------------
   `woocommerce_template_loop_add_to_cart()` saca un <a> con las clases
   `button product_type_simple add_to_cart_button ajax_add_to_cart`. Se le
   dan los colores del secundario para que, si la plantilla de la tarjeta usa
   la función de WooCommerce en vez de escribir su propio botón, el resultado
   sea el mismo. (0,2,0): gana a `.woocommerce a.button` (0,1,1).
   ------------------------------------------------------------------------ */
.ma-tienda ul.products li.product a.button,
.ma-tienda .ma-tarjeta-producto__acciones a.button,
.ma-tienda .ma-tarjeta-producto__acciones .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--ma-pill);
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
	font-family: var(--ma-font-ui);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition:
		transform var(--ma-t-base) var(--ma-ease),
		background-color var(--ma-t-base) var(--ma-ease);
}

.ma-tienda ul.products li.product a.button:hover,
.ma-tienda .ma-tarjeta-producto__acciones a.button:hover {
	background: var(--ma-teal-100);
	color: var(--ma-teal-800);
	transform: translateY(-2px);
}

/* El icono que añade el JS de WooCommerce ("Ver carrito" tras añadir). */
.ma-tienda .ma-tarjeta-producto__acciones a.button::after {
	display: none;
}

/*
 * EL SPINNER DE WOOCOMMERCE NO SE USA.
 * `a.added::after` y `a.loading::after` pintan un GIF alojado en el plugin:
 * una petición HTTP más por cada clic, con su parpadeo. Se apaga aquí y en su
 * lugar se usa un anillo de CSS (sección 6), que no pide nada a la red.
 */
.ma-tienda .ma-tarjeta-producto__acciones a.loading::after,
.ma-tienda .ma-tarjeta-producto__acciones a.added::after {
	display: none;
}

/* ============================================================================
   5. LA CABECERA, LA BARRA DE RESULTADOS Y EL BUSCADOR
   ========================================================================== */
.ma-tienda__cabecera {
	padding-block: 0 clamp(0.85rem, 2vw, 1.4rem);
	border-bottom: 0;
	margin-bottom: clamp(0.85rem, 2vw, 1.4rem);
}

.ma-tienda__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	padding-bottom: clamp(0.75rem, 1.8vw, 1.1rem);
	margin-bottom: clamp(0.9rem, 2vw, 1.5rem);
	border-bottom: var(--ma-line);
}

/* --- 5.1 El orden y el recuento de WooCommerce ---------------------------
   WooCommerce imprime `.woocommerce-result-count` y
   `.woocommerce-ordering` con su propio estilo; aquí se alinean con el tema.
   ------------------------------------------------------------------------ */
.ma-tienda .woocommerce-result-count,
.ma-tienda__resultados {
	margin: 0;
	font-family: var(--ma-font-ui);
	font-size: var(--ma-fs-sm);
	color: var(--ma-ink-500);
}

.ma-tienda .woocommerce-ordering,
.ma-tienda__orden {
	margin: 0;
}

.ma-tienda .woocommerce-ordering select {
	min-height: 2.5rem;
	padding: 0.4rem 2.2rem 0.4rem 1rem;
	border: 1.5px solid var(--ma-ink-200);
	border-radius: var(--ma-pill);
	background-color: var(--ma-paper);
	color: var(--ma-ink-800);
	font-family: var(--ma-font-ui);
	font-size: var(--ma-fs-sm);
	font-weight: 600;
	cursor: pointer;
	/* Sin `appearance: none`: la flecha nativa no cuesta una petición y se
	   comporta igual en todos los sistemas. */
	transition:
		border-color var(--ma-t-fast) var(--ma-ease),
		box-shadow var(--ma-t-fast) var(--ma-ease);
}

.ma-tienda .woocommerce-ordering select:hover { border-color: var(--ma-teal-300); }

.ma-tienda .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--ma-teal-500);
	box-shadow: 0 0 0 4px var(--ma-teal-50);
}

/* --- 5.2 La descripción de la categoría ---------------------------------- */
.ma-tienda__descripcion {
	max-width: 68ch;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	font-size: var(--ma-fs-md);
	line-height: 1.65;
	color: var(--ma-ink-500);
}

.ma-tienda__descripcion > * + * { margin-top: 0.8em; }

/* --- 5.3 El buscador de la tienda ---------------------------------------
   El buscador de la cabecera lo define header.css; aquí sólo se le da algo
   más de altura en la tienda y en el estado vacío, donde es la acción
   principal y compite con la rejilla, no con un menú.
   ------------------------------------------------------------------------ */
.ma-tienda__buscador { max-width: 40rem; }

.ma-tienda__buscador .ma-busqueda__campo { height: 3rem; font-size: var(--ma-fs-base); }
.ma-tienda__buscador .ma-busqueda__boton { min-height: 3rem; padding-inline: 1.5rem; }

/* ============================================================================
   6. ESTADOS: CARGA
   Sin peticiones: nada de GIFs ni de spinners externos.
   ========================================================================== */
.ma-tarjeta-producto.is-cargando {
	opacity: .72;
}

.ma-tienda .ma-tarjeta-producto__anadir.is-cargando,
.ma-tienda .ma-tarjeta-producto__comprar.is-cargando,
.ma-tienda .ma-tarjeta-producto__acciones a.loading {
	color: transparent;
	pointer-events: none;
	cursor: progress;
}

/* El anillo de carga: un borde que gira. Cero peticiones.
   `inset: 0` + `margin: auto` lo centra sin depender del tamaño del texto. */
.ma-tienda .ma-tarjeta-producto__anadir.is-cargando::after,
.ma-tienda .ma-tarjeta-producto__comprar.is-cargando::after,
.ma-tienda .ma-tarjeta-producto__acciones a.loading::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 1rem;
	height: 1rem;
	margin: auto;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ma-girar 620ms var(--ma-ease) infinite;
}

/* El texto desaparece, así que el anillo necesita su propio color. El icono
   también se apaga: si no, quedaría la pastilla blanca flotando sola. */
.ma-tienda .ma-tarjeta-producto__anadir.is-cargando::after,
.ma-tienda .ma-tarjeta-producto__comprar.is-cargando::after {
	color: var(--ma-teal-600);
}

.ma-tienda .ma-tarjeta-producto__comprar.is-cargando::after {
	color: var(--ma-paper);
}

.ma-tienda .ma-tarjeta-producto__anadir.is-cargando .ma-boton__ico,
.ma-tienda .ma-tarjeta-producto__comprar.is-cargando .ma-boton__ico,
.ma-tienda .ma-tarjeta-producto__acciones a.loading .ma-boton__ico {
	visibility: hidden;
}

.ma-tienda .ma-tarjeta-producto__anadir.is-cargando,
.ma-tienda .ma-tarjeta-producto__comprar.is-cargando,
.ma-tienda .ma-tarjeta-producto__acciones a.loading {
	position: relative;
}

@keyframes ma-girar {
	to { transform: rotate(1turn); }
}

/*
 * EL ESQUELETO DE CARGA DE LA REJILLA.
 * Se usa cuando la rejilla se recarga sin recargar la página (filtros u
 * ordenación por AJAX). Regla dura del proyecto: esto NO puede ser la única
 * forma de ver el contenido. El esqueleto se pinta ENCIMA de la rejilla real,
 * y si el JS no llega nunca aparece: el contenido se ve igual.
 */
.ma-tienda__cargando {
	position: relative;
	min-height: 12rem;
}

.ma-tienda__cargando::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(233, 246, 250, .85) 50%,
		rgba(255, 255, 255, 0) 70%
	);
	background-size: 200% 100%;
	animation: ma-brillar 1.1s var(--ma-ease) infinite;
	pointer-events: none;
}

@keyframes ma-brillar {
	from { background-position: 140% 0; }
	to   { background-position: -40% 0; }
}

/* ============================================================================
   7. ESTADO VACÍO: SIN RESULTADOS
   Reutiliza `.ma-vacio` de layout.css y le añade lo que sólo tiene sentido
   aquí: el buscador y las categorías como salida.
   ========================================================================== */
.ma-tienda__vacio { padding-block: clamp(2rem, 5vw, 4rem) 0; }

.ma-tienda__vacio-titulo { margin-bottom: 0.6rem; }

.ma-tienda__vacio-texto { color: var(--ma-ink-500); }

.ma-tienda__vacio-buscador {
	max-width: 38rem;
	margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
	text-align: left;
}

.ma-tienda__vacio-sugerencias {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-top: 1.5rem;
	border-top: var(--ma-line);
}

/* ============================================================================
   8. LO QUE NO DEBE PARECER UNA TIENDA DE 2014
   ========================================================================== */

/* La barra lateral de WooCommerce no se usa: la tienda es la rejilla. */
.ma-tienda #secondary,
.ma-tienda .widget-area { display: none; }

/*
 * Los avisos de WooCommerce, con el look del tema.
 *
 * DOS CAMINOS, LOS DOS CUBIERTOS
 * ------------------------------
 *  · Si existe `template-parts/aviso.php`, inc/woocommerce.php redirige ahí la
 *    carga de `notices/*.php` y el aviso sale con el marcado del tema
 *    (`.ma-aviso` de layout.css, que ya trae sus cuatro variantes de color).
 *  · Si no existe, se imprimen los de WooCommerce y son estas reglas las que
 *    les dan el mismo aspecto.
 *
 * Los cuatro colores de estado son LOS MISMOS que `.ma-aviso--exito`,
 * `.ma-aviso--info`, `.ma-aviso--error` y `.ma-aviso--atencion` de layout.css.
 * No se inventan aquí: si cambian allí, cambian aquí. Es la única excepción a
 * "ningún color a mano" de este archivo, y es para no tener dos verdes de
 * "éxito" distintos en el mismo sitio.
 */
.ma-tienda .woocommerce-message,
.ma-tienda .woocommerce-info,
.ma-tienda .woocommerce-error,
.ma-tienda .woocommerce-notice {
	border: var(--ma-line);
	border-top: 0;
	border-radius: var(--ma-r-sm);
	background: var(--ma-paper);
	color: var(--ma-ink-800);
	font-size: var(--ma-fs-md);
	box-shadow: none;
}

/* Mismos valores que layout.css: .ma-aviso--exito / --info / --error / --atencion */
.ma-tienda .woocommerce-message { background: #E7F5EC; border-color: #B6E0C4; }
.ma-tienda .woocommerce-info { background: var(--ma-teal-50); border-color: var(--ma-teal-200); }
.ma-tienda .woocommerce-error { background: #FCEFED; border-color: #F0C4BD; }
.ma-tienda .woocommerce-notice { background: var(--ma-warm-50); border-color: #F6D3B4; }

.ma-tienda .woocommerce-message::before,
.ma-tienda .woocommerce-info::before,
.ma-tienda .woocommerce-error::before,
.ma-tienda .woocommerce-notice::before {
	display: none;
}

/* El botón de WooCommerce genérico (formularios, cupones, carrito). */
.ma-tienda .woocommerce a.button,
.ma-tienda .woocommerce button.button,
.ma-tienda .woocommerce input.button {
	border-radius: var(--ma-pill);
	border: 0;
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	font-family: var(--ma-font-ui);
	font-weight: 700;
}

.ma-tienda .woocommerce a.button:hover,
.ma-tienda .woocommerce button.button:hover,
.ma-tienda .woocommerce input.button:hover {
	background: var(--ma-teal-700);
	color: var(--ma-paper);
}

/* ============================================================================
   9. MOVIMIENTO REDUCIDO
   Quien pide menos movimiento no ve ni el giro del anillo ni el brillo del
   esqueleto. El estado de carga sigue siendo legible por el texto.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ma-tarjeta-producto,
	.ma-tarjeta-producto__media img,
	.ma-tarjeta-producto__imagen {
		transition: none;
	}

	.ma-tarjeta-producto:hover { transform: none; }
	.ma-tarjeta-producto:hover .ma-tarjeta-producto__media img,
	.ma-tarjeta-producto:hover .ma-tarjeta-producto__imagen { transform: none; }

	.ma-tarjeta-producto__favorito:hover { transform: none; }

	.ma-tienda .ma-tarjeta-producto__anadir.is-cargando::after,
	.ma-tienda .ma-tarjeta-producto__comprar.is-cargando::after,
	.ma-tienda .ma-tarjeta-producto__acciones a.loading::before,
	.ma-tienda__cargando::after {
		animation: none;
	}
}