/**
 * Presentación de la tienda: plegado de facetas largas.
 *
 * Es comportamiento del plugin, no aspecto del tema: acompaña al JS de
 * "mostrar más". Todo lo demás que hubo aquí retocaba Kadence y se retiró al
 * activar el tema propio.
 */

.ml-facet-collapsed .ml-facet-hidden {
	display: none;
}

.ml-facet-toggle {
	display: inline-block;
	margin: 0.4rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
}

.ml-facet-toggle:hover {
	text-decoration: none;
}

/*
 * Logo de la marca en la ficha de producto.
 *
 * Caja de alto fijo y `object-fit: contain`: los logos de fabricante vienen cada
 * uno con sus proporciones y su propio aire, así que igualar solo el ancho los
 * dejaría de tamaños dispares. Es el mismo criterio que la tira de marcas de la
 * portada.
 *
 * EL FONDO BLANCO SE FUNDE CON LA PÁGINA (`multiply`), y no es un adorno.
 *
 * El logo de Hettich es un PNG con **fondo blanco opaco**, no transparente. Sobre
 * el crema de la página eso se ve como un rectángulo blanco recortado alrededor
 * del logotipo —y le pasaría a cualquier logo de fabricante, porque casi todos se
 * publican así—. Multiplicando, el blanco toma el color del fondo y desaparece;
 * los trazos oscuros y las barras de color se quedan como están, porque
 * multiplicar por un crema casi blanco no llega a moverlos un 2 %.
 *
 * Sigue valiendo el día que llegue un fichero con transparencia: sobre lo que ya
 * es transparente, el modo de fusión no hace nada.
 */

.ml-brand {
	display: block;
	margin-top: 0.75rem;

	/* El logo iba dentro de un enlace, que es quien mataba el hueco que deja la
	   línea base bajo una imagen. Sin enlace —ver `brand_with_logo()`— toca
	   hacerlo aquí. */
	line-height: 0;
}

/* Las marcas sin logo se escriben. Hoy es el caso de Unilux: el fichero solo
   está para Hettich. */
.ml-brand__nombre {
	color: var(--ml-text-muted, #666d72);
	font-size: var(--ml-text-sm, 0.875rem);
	line-height: 1.4;
}

.ml-brand__logo {
	width: auto;
	height: 40px;
	max-width: 180px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
 * PIEZAS COMPATIBLES
 *
 * Va antes que los vecinos de categoría y con la misma pinta que ellos, porque
 * son lo mismo —una fila de tarjetas de producto— y lo que las distingue es lo
 * que dicen, no cómo se ven: estas las declara el fabricante y las otras salen
 * de compartir categoría.
 *
 * La nota bajo el título es la que hace útil la sección: sin ella, «Piezas
 * compatibles» se lee como «accesorios», y no lo son — hace falta UNA de ellas
 * para poder montar el artículo.
 * -------------------------------------------------------------------------- */

/* El ancho lo pone el TEMA, que es de quien es la rejilla de la ficha (ver
   `woo-compat.css`): un plugin no coloca sus cosas en una maquetación que no
   conoce. Aquí solo va lo que es de esta sección. */
.ml-compatibles__nota {
	margin: calc(-1 * var(--ml-space-2, 0.5rem)) 0 var(--ml-space-4, 1rem);
	color: var(--ml-text-muted, #666d72);
}

/* --------------------------------------------------------------------------
 * DOCUMENTACIÓN DEL FABRICANTE
 *
 * La pestaña «Descargas»: fichas técnicas, instrucciones de montaje, modelos
 * CAD y vídeos que Hettich publica por artículo. Vienen en el BMEcat y hasta
 * el 9/9/2026 se tiraban.
 *
 * SIN VIÑETAS Y CON EL ICONO DEL TIPO DELANTE, porque la lista dice dos cosas a
 * la vez: qué es cada documento y si al pulsarlo te llevas un fichero o te vas
 * a otra pantalla. Con viñeta redonda las dos se leían igual.
 * -------------------------------------------------------------------------- */

.ml-docs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-docs__item {
	padding-block: var(--ml-space-2, 0.5rem);
	border-bottom: 1px solid var(--ml-border, #e5ded4);
}

.ml-docs__item:last-child {
	border-bottom: 0;
}

/* El icono es de texto y va en un pseudoelemento: no hay que cargar ningún
   fichero y desaparece solo al copiar y pegar la lista. */
.ml-docs__item::before {
	display: inline-block;
	width: 1.5rem;
	color: var(--ml-text-muted, #666d72);
	content: "\2193";  /* flecha abajo: se descarga */
}

.ml-docs__item--enlace::before {
	content: "\2197";  /* flecha en diagonal: sale de la tienda */
}

.ml-docs a {
	color: var(--ml-brand, #0e655e);
}