/* ------------------------------------------------------------------ */
/* Precios de la tarjeta: contado, con tarjeta y cuota                 */
/* ------------------------------------------------------------------ */

.cm-precios {
	/* Tokens propios: el bloque también se usa fuera de los widgets, en las
	   listas de categoría, donde las variables del widget no existen. */
	--cm-p-tinta: #1d1d1f;
	--cm-p-suave: #6e6e73;
	--cm-p-tenue: #8e8e93;
	--cm-p-borde: #e8e8ed;
	--cm-p-azul: #0048e6;

	margin: auto 0 14px;

	text-align: left;
}

.cm-precios__antes {
	margin: 0 0 2px;
	min-height: 1.3em;

	color: var(--cm-p-tenue);

	font-size: 12.5px;
	line-height: 1.3;
}

.cm-precios__antes del,
.cm-precios__antes del * {
	color: var(--cm-p-tenue) !important;

	font-weight: 400;
	text-decoration: line-through;
}

.cm-precios__cap {
	display: block;

	color: var(--cm-p-suave);

	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
}

/* La etiqueta de la cuota, un punto por debajo de las demás. */
.cm-precios__fila:last-child .cm-precios__cap {
	font-size: 12px;
	color: var(--cm-p-tenue);
}

p.cm-precios__cap {
	margin: 0;
}

.cm-precios__contado,
.cm-precios__contado .woocommerce-Price-amount,
.cm-precios__contado .woocommerce-Price-currencySymbol,
.cm-precios__contado bdi {
	color: var(--cm-p-tinta) !important;
}

.cm-precios__contado {
	margin: 1px 0 10px;

	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* Cada forma de pago en su fila, separadas por una línea fina. */
.cm-precios__fila {
	display: flex;
	align-items: center;
	gap: 9px;

	padding: 9px 0;

	border-top: 1px solid var(--cm-p-borde);
}

.cm-precios__texto {
	min-width: 0;
}

/* El tema pinta de azul todo lo que lleve marcado de precio de WooCommerce.
   Aquí solo el precio con tarjeta va en azul; la cuota es un dato de apoyo y
   se queda en tinta, como en el resto de la tarjeta. */
.cm-precios__val,
.cm-precios__val .woocommerce-Price-amount,
.cm-precios__val .woocommerce-Price-currencySymbol,
.cm-precios__val bdi,
.cm-precios__val ins {
	color: var(--cm-p-tinta) !important;
}

.cm-precios__val {
	display: block;

	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
}

/* Tercer nivel: la cuota es un dato de apoyo, ni negrita ni tinta plena. */
.cm-precios__val--suave,
.cm-precios__val--suave .woocommerce-Price-amount,
.cm-precios__val--suave .woocommerce-Price-currencySymbol,
.cm-precios__val--suave bdi {
	color: var(--cm-p-suave) !important;
}

.cm-precios__val--suave {
	font-size: 13.5px;
	font-weight: 400;
}

.cm-precios__val--suave .woocommerce-Price-amount {
	font-weight: 600;
}

/* "sin intereses" pasa entero a la línea siguiente si no cabe junto al
   importe: partido, "intereses" quedaba suelto en la rejilla del móvil. */
.cm-precios__sin {
	white-space: nowrap;
}

.cm-precios__val--azul,
.cm-precios__val--azul .woocommerce-Price-amount,
.cm-precios__val--azul .woocommerce-Price-currencySymbol,
.cm-precios__val--azul bdi {
	color: var(--cm-p-azul) !important;
}

.cm-precios__ico {
	flex: 0 0 auto;

	width: 22px;
	height: 22px;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cm-precios__ico--tarjeta {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230048E6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2.5'/><path d='M2 10h20'/><path d='M6 15h3'/></svg>");
}

.cm-precios__ico--cuotas {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='17' rx='2.5'/><path d='M3 9.5h18M8 2.5v4M16 2.5v4'/><path d='M8 14h4'/></svg>");
}

.cm-precios__ico--contado {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A7F37' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='12' rx='2.5'/><circle cx='12' cy='12' r='2.5'/><path d='M6 12h.01M18 12h.01'/></svg>");
}

/* El icono acompaña, no compite: el de la cuota va un punto más pequeño. */
.cm-precios__ico--suave {
	width: 19px;
	height: 19px;

	opacity: .9;
}

@media (max-width: 767px) {
	.cm-precios__contado {
		font-size: 21px;
	}

	.cm-precios__val {
		font-size: 14px;
	}

	.cm-precios__fila {
		padding: 8px 0;
	}
}

/* En la rejilla de dos columnas del móvil la tarjeta mide poco más de 150 px
   de texto: se encoge la letra para que la cuota no ocupe tres renglones. */
@media (max-width: 575px) {
	.cm-precios__cap {
		font-size: 11.5px;
	}

	.cm-precios__val {
		font-size: 13px;
	}

	.cm-precios__contado {
		font-size: 19px;
	}

	.cm-precios__ico {
		width: 19px;
		height: 19px;
	}

	.cm-precios__fila {
		gap: 7px;
		padding: 7px 0;
	}
}

/* ------------------------------------------------------------------ */
/* Carruseles del tema: tarjetas más estrechas que en la rejilla       */
/* ------------------------------------------------------------------ */

/*
 * En los carruseles de WoodMart (relacionados de la ficha, "otras personas
 * también compraron", bloques de producto del home) la tarjeta no siempre
 * está centrada ni tiene el ancho de la rejilla: el bloque se alinea a la
 * izquierda igual que el resto del contenido de la tarjeta.
 */
.wd-products .cm-precios,
.wd-carousel .cm-precios {
	margin-bottom: 10px;
}

.wd-products.title-line-two .cm-precios,
.wd-carousel .cm-precios {
	text-align: left;
}