/**
 * Selector de vista del listado (grilla / lista / columnas / cantidad por página) y
 * aspecto de las tarjetas de avisos.
 *
 * Reaprovecha el mecanismo de vistas que ya trae Motors (view_type + filtrado por AJAX);
 * acá se estiliza la barra de botones, el ancho de la grilla según las columnas elegidas
 * y las tarjetas con el sistema visual del sitio (diseno.css): borde de 1 px sin sombra,
 * precio en acero, cifras tabulares.
 */

/* -------------------------------------------------------------------------
 * Barra de vista
 *
 * Cada grupo es un control segmentado: botones pegados dentro de un mismo borde, así se
 * lee como una sola elección y no como botones sueltos. Lo elegido va en acero lleno; el
 * óxido queda para las acciones (filtrar, mostrar más).
 * ---------------------------------------------------------------------- */

.rm-vista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin: 0 0 16px;
	padding: 10px 12px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #fff;
	font-family: var( --rm-fuente );
}

.rm-vista__grupo {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rm-vista__etiqueta {
	color: var( --rm-gris );
	font-size: 13px;
	font-weight: 600;
}

.rm-vista__seg {
	display: inline-flex;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	overflow: hidden;
}

/* `body` delante: el kit de Elementor pinta todos los <button> (fondo, borde, mayúsculas)
   con más especificidad que una clase sola. */
body .rm-vista__btn {
	min-width: 40px;
	height: 36px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var( --rm-tinta );
	font-family: var( --rm-fuente );
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

body .rm-vista__btn + .rm-vista__btn {
	border-left: 1px solid var( --rm-linea );
}

body .rm-vista__btn:hover {
	background: var( --rm-hormigon );
	color: var( --rm-tinta );
}

body .rm-vista__btn.is-active {
	background: var( --rm-acero );
	color: #fff;
}

body .rm-vista__btn:focus-visible {
	position: relative;
	outline: 2px solid var( --rm-acero );
	outline-offset: -4px;
	box-shadow: inset 0 0 0 4px #fff;
}

.rm-vista__columnas.rm-oculto {
	display: none;
}

/* La cantidad por página es la última decisión de la fila: va al otro extremo para no
   confundirse con los dos grupos que sí cambian el aspecto de las tarjetas. */
.rm-vista__cantidad {
	margin-left: auto;
}

/* Las columnas solo cambian algo desde 992 px (ver más abajo): antes el botón no haría
   nada visible, así que no se ofrece. */
@media ( max-width: 991px ) {
	.rm-vista__columnas {
		display: none;
	}
}

/* Cuando la barra se parte en varias líneas, ese `auto` deja el grupo colgando solo a la
   derecha: en pantalla angosta los grupos van alineados a la izquierda. */
@media ( max-width: 767px ) {
	.rm-vista {
		gap: 10px 16px;
		padding: 8px 10px;
	}

	.rm-vista__cantidad {
		margin-left: 0;
	}

	body .rm-vista__btn {
		height: 40px;
	}
}

/* -------------------------------------------------------------------------
 * «Mostrar más máquinas»
 *
 * Mientras el botón está disponible se esconde la paginación numerada: las dos son formas
 * de avanzar por el mismo listado y, una vez agregada una página a la anterior, los números
 * dirían que el visitante sigue en la página 1 viendo cuarenta avisos. La paginación se
 * oculta desde una clase que pone el JS, así que sin JS —o para un buscador— sigue visible
 * y sigue siendo la única navegación.
 * ---------------------------------------------------------------------- */

#listings-result.rm-mas-activo .stm_ajax_pagination {
	display: none;
}

.rm-mas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 24px 0 8px;
	clear: both;
}

body .rm-mas__btn {
	min-height: 44px;
	padding: 0 28px;
	border: 1px solid var( --rm-acero );
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	color: var( --rm-acero );
	font-family: var( --rm-fuente );
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

body .rm-mas__btn:hover {
	background: var( --rm-acero );
	color: #fff;
}

body .rm-mas__btn[ disabled ] {
	opacity: 0.6;
	cursor: default;
}

.rm-mas__estado {
	margin: 0;
	color: var( --rm-gris );
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Columnas de la grilla
 *
 * Motors fija el ancho de cada tarjeta por HTML (col-md-4: tres por fila). Acá se pisa
 * ese ancho por CSS según lo elegido, sin tocar el marcado que arma el propio plugin.
 * Solo en escritorio (min-width 992px): es el mismo corte que usa Motors para col-md-*,
 * así que el apilado de una columna por fila en mobile queda intacto.
 *
 * Hay que pisar las TRES propiedades, no solo `width`: la fila de la grilla es flex y
 * `col-md-4` trae `flex: 0 0 33.3333%` y `max-width: 33.3333%`. Con solo `width` la clase
 * cambiaba pero la tarjeta seguía midiendo lo mismo (283 px con 2, 3 o 4 columnas): la
 * base flex y el tope de ancho mandan por encima de `width`.
 * ---------------------------------------------------------------------- */

@media ( min-width: 992px ) {
	#listings-result.rm-cols-2 .stm-isotope-sorting-grid .stm-directory-grid-loop {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
	}

	#listings-result.rm-cols-3 .stm-isotope-sorting-grid .stm-directory-grid-loop {
		flex: 0 0 33.3333% !important;
		width: 33.3333% !important;
		max-width: 33.3333% !important;
	}

	#listings-result.rm-cols-4 .stm-isotope-sorting-grid .stm-directory-grid-loop {
		flex: 0 0 25% !important;
		width: 25% !important;
		max-width: 25% !important;
	}
}

/* -------------------------------------------------------------------------
 * Tarjetas: piezas comunes a grilla y lista
 * ---------------------------------------------------------------------- */

/* Aviso sin foto: bloque neutro del mismo alto que una foto (rm_tarjeta_sin_foto()). */
#listings-result .rm-sin-foto,
.rm-sin-foto {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: var( --rm-hormigon );
	color: var( --rm-gris );
	font-family: var( --rm-fuente );
	font-size: 13px;
	font-weight: 600;
}

/* Cinta de la foto. Motors la dibuja como banda cruzada con puntas de triángulo; acá es
   una etiqueta chica en la esquina, sin mayúsculas: informa sin tapar la máquina. */
#listings-result .special-label.rm-cinta,
.rm-cinta {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	bottom: auto;
	z-index: 3;
	width: auto;
	height: auto;
	margin: 0;
	padding: 4px 8px;
	border-radius: 4px;
	box-shadow: none;
	font-family: var( --rm-fuente );
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	transform: none;
}

#listings-result .special-label.rm-cinta::before,
#listings-result .special-label.rm-cinta::after,
.rm-cinta::before,
.rm-cinta::after {
	display: none !important;
}

.rm-cinta--vendido {
	background: var( --rm-tinta ) !important;
	color: #fff !important;
}

.rm-cinta--destacado {
	background: var( --rm-senal ) !important;
	color: var( --rm-tinta ) !important;
}

/* Un vendido queda en el listado como referencia de precio, pero en segundo plano. */
#listings-result .listing-list-loop:has( .rm-cinta--vendido ) .image-inner img,
.stm-directory-grid-loop:has( .rm-cinta--vendido ) .image-inner img {
	filter: grayscale( 0.6 );
	opacity: 0.8;
}

/* Precio: la etiqueta óxido con el filo inclinado de «Mis avisos» es un componente común
   (diseno.css, «Precio en etiqueta»); acá solo va su lugar. Cuelga de la esquina superior
   derecha de la tarjeta, sin margen, como en «Mis avisos». En lista va junto al título; en
   grilla, sobre la esquina de la foto, para que el título conserve todo el ancho de una
   tarjeta angosta. */
#listings-result .price {
	position: static;
	flex: none;
	align-self: flex-start;
	margin: 0;
}

/* El contenido de la tarjeta en lista tiene 14 px de relleno arriba y 18 a la derecha
   (`.content`): márgenes negativos para que la etiqueta llegue al borde de la tarjeta.
   El tope de 60 % va acá y no en la regla de arriba porque el componente de diseno.css fija
   `max-width: 100%` con una especificidad que esa regla no alcanza: un texto largo («Llamar
   para consultar precio») se parte en dos líneas en vez de dejar el título en tres. */
#listings-result .listing-list-loop .meta-top .price {
	max-width: 60%;
	margin: -14px -18px 0 0;
}

/* -------------------------------------------------------------------------
 * Tarjeta en grilla
 * ---------------------------------------------------------------------- */

#listings-result .stm-directory-grid-loop {
	display: flex;
	margin-bottom: 24px;
}

#listings-result .stm-directory-grid-loop > a {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	color: var( --rm-tinta );
	text-decoration: none;
	transition: border-color 0.15s ease;
}

#listings-result .stm-directory-grid-loop > a:hover {
	border-color: var( --rm-acero );
}

#listings-result .stm-directory-grid-loop > a:focus-visible {
	outline: 2px solid var( --rm-acero );
	outline-offset: 2px;
}

#listings-result .stm-directory-grid-loop .image {
	position: relative;
	margin: 0;
}

/* Proporción fija: con fotos de distinto tamaño la fila quedaba escalonada. */
#listings-result .stm-directory-grid-loop .image-inner {
	position: relative;
	aspect-ratio: 4 / 3;
	height: auto !important;
	overflow: hidden;
	background: var( --rm-hormigon );
}

#listings-result .stm-directory-grid-loop .image-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#listings-result .stm-directory-grid-loop .rm-sin-foto {
	min-height: 0;
}

#listings-result .stm-directory-grid-loop .listing-car-item-meta {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px 14px 14px;
}

/* El precio sale del flujo (etiqueta sobre la esquina de la foto): el título queda solo. */
#listings-result .stm-directory-grid-loop > a {
	position: relative;
}

/* Motors le deja a la zona de texto un `transform` (vacío), y un transform convierte al
   elemento en la referencia de los hijos absolutos: la etiqueta se medía desde el texto y
   no desde la tarjeta. */
#listings-result .stm-directory-grid-loop .listing-car-item-meta,
#listings-result .stm-directory-grid-loop .car-meta-top {
	position: static;
	transform: none !important;
}

/* Pegada a la esquina de la foto (la tarjeta recorta con su radio), un punto más chica que
   en lista para no tapar la foto de una tarjeta angosta. */
#listings-result .stm-directory-grid-loop .price {
	--rm-precio-fs: 17px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	max-width: 100%;
}

/* Insignia de fotos y videos (.stm-car-medias): Motors la deja arriba a la izquierda, justo
   donde la etiqueta del precio, que ahora es más ancha y llega a la esquina, la tapaba (con
   4 columnas, en tablet y con un precio de 12 cifras la cámara quedaba medio escondida
   detrás del filo). En vez de achicar el precio hasta que quepa —un precio largo no cabe
   nunca— se la pasa a la esquina de abajo a la derecha, la única libre de la foto: arriba a
   la derecha va el precio, arriba a la izquierda la cinta de destacado/vendido y abajo a la
   izquierda la estrella de favoritos. Va igual en 2, 3 y 4 columnas para que no cambie de
   lugar al cambiar de vista. */
#listings-result .stm-directory-grid-loop .stm-car-medias {
	top: auto;
	right: 7px;
	bottom: 6px;
	left: auto;
}

#listings-result .stm-directory-grid-loop .car-meta-top {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}

#listings-result .stm-directory-grid-loop .car-meta-top::before,
#listings-result .stm-directory-grid-loop .car-meta-top::after {
	display: none;
}

#listings-result .stm-directory-grid-loop .car-title {
	order: -1;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	color: var( --rm-tinta );
	font-family: var( --rm-fuente );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

#listings-result .stm-directory-grid-loop .car-meta-bottom {
	margin-top: auto;
	padding: 10px 0 0;
	border: 0;
}

#listings-result .stm-directory-grid-loop .car-meta-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#listings-result .stm-directory-grid-loop .car-meta-bottom li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	color: var( --rm-gris );
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

#listings-result .stm-directory-grid-loop .car-meta-bottom li i {
	position: static;
	margin: 0;
	color: var( --rm-gris );
	font-size: 12px;
	opacity: 0.8;
}

#listings-result .stm-directory-grid-loop .car-meta-bottom li span {
	color: var( --rm-tinta );
}

/* -------------------------------------------------------------------------
 * Tarjeta en lista (solo el listado: «Mis avisos» y favoritos los viste cuenta.css)
 * ---------------------------------------------------------------------- */

#listings-result .listing-list-loop.stm-isotope-listing-item,
#listings-result .listing-list-loop {
	display: flex;
	gap: 0;
	margin: 0 0 14px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
}

#listings-result .listing-list-loop::before,
#listings-result .listing-list-loop::after {
	display: none;
}

#listings-result .listing-list-loop:hover {
	border-color: var( --rm-acero );
}

#listings-result .listing-list-loop > .image {
	position: relative;
	flex: 0 0 280px;
	width: 280px;
	max-width: 280px;
	margin: 0;
	padding: 0;
	float: none;
}

#listings-result .listing-list-loop .image-inner {
	position: relative;
	aspect-ratio: 4 / 3;
	height: auto !important;
	overflow: hidden;
	background: var( --rm-hormigon );
}

#listings-result .listing-list-loop .image-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#listings-result .listing-list-loop .rm-sin-foto {
	min-height: 0;
}

#listings-result .listing-list-loop > .content {
	flex: 1;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 14px 18px;
	float: none;
}

/* Título a la izquierda, recuadro de precio a la derecha. */
#listings-result .listing-list-loop .meta-top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

#listings-result .listing-list-loop .meta-top::before,
#listings-result .listing-list-loop .meta-top::after {
	display: none;
}

#listings-result .listing-list-loop .meta-top .title {
	order: -1;
	flex: 1;
	min-width: 0;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	font-family: var( --rm-fuente );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

#listings-result .listing-list-loop .meta-top .title a {
	color: var( --rm-tinta );
	text-decoration: none;
}

#listings-result .listing-list-loop .meta-top .title a:hover {
	color: var( --rm-acero );
}

/* Datos en rejilla de celdas iguales: nombre chico en gris arriba, valor en tinta abajo. */
#listings-result .listing-list-loop .meta-middle {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 10px 16px;
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid var( --rm-linea );
	border-bottom: 0;
}

#listings-result .listing-list-loop .meta-middle::before,
#listings-result .listing-list-loop .meta-middle::after {
	display: none;
}

/* `display: block`, no el flex de Motors (ícono + texto en fila): como ítem flex, el bloque
   del texto no se achica por debajo del largo de su valor (min-width: auto), así que el
   recorte con «…» del valor nunca actuaba y un dato largo («Fumigadora de Arrastre») se
   montaba sobre la celda vecina. El ícono igual va oculto. */
#listings-result .listing-list-loop .meta-middle-unit {
	display: block;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

#listings-result .listing-list-loop .meta-middle-unit .icon {
	display: none;
}

/* `column-gap`: en el teléfono Motors pone el nombre y el valor en la misma fila, y sin
   espacio se leían pegados («CiudadTalca»). Donde van apilados no cambia nada. */
#listings-result .listing-list-loop .meta-middle-unit-top {
	min-width: 0;
	padding: 0;
	column-gap: 5px;
}

#listings-result .listing-list-loop .meta-middle-unit .name {
	margin: 0 0 1px;
	color: var( --rm-gris );
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
}

#listings-result .listing-list-loop .meta-middle-unit .value {
	margin: 0;
	color: var( --rm-tinta );
	font-family: var( --rm-fuente );
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#listings-result .listing-list-loop .meta-bottom {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
}

/* «Comparte esto» de Motors ocupaba una fila entera al pie de cada aviso del listado:
   se deja el ícono solo, a la derecha. */
#listings-result .listing-list-loop .single-car-actions ul {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}

#listings-result .listing-list-loop .single-car-actions li.w-100 {
	display: none;
}

/* «Compartir» propio (loop/list/features.php + vista-listado.js): botón con texto, y
   debajo un menú corto cuando el navegador no tiene el menú nativo de compartir. */
.rm-compartir {
	position: relative;
	margin-left: auto;
}

body .rm-compartir__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #fff !important;
	box-shadow: none;
	color: var( --rm-acero ) !important;
	font-family: var( --rm-fuente );
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none !important;
	cursor: pointer;
}

body .rm-compartir__btn:hover,
body .rm-compartir__btn[ aria-expanded="true" ] {
	border-color: var( --rm-acero );
	background: var( --rm-hormigon ) !important;
}

body .rm-compartir__btn:focus-visible,
.rm-compartir__opcion:focus-visible {
	outline: 2px solid var( --rm-acero );
	outline-offset: 2px;
}

.rm-compartir__menu {
	position: absolute;
	right: 0;
	bottom: calc( 100% + 6px );
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	padding: 4px 0;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 16px rgba( 34, 48, 60, 0.16 );
}

body .rm-compartir__opcion {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	background: none !important;
	box-shadow: none;
	color: var( --rm-tinta ) !important;
	font-family: var( --rm-fuente );
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: none !important;
	cursor: pointer;
}

body .rm-compartir__opcion {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rm-compartir__opcion svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var( --rm-acero );
}

body .rm-compartir__opcion:hover {
	background: var( --rm-hormigon ) !important;
}

#listings-result .listing-list-loop .car-action-unit {
	color: var( --rm-gris );
}

/* «View more» de Motors (sin traducir, en teléfono) sobra: la foto y el título ya llevan a la ficha. */
body #listings-result .listing-list-loop .stm-car-view-more {
	display: none;
}

@media ( max-width: 767px ) {
	#listings-result .listing-list-loop.stm-isotope-listing-item,
	#listings-result .listing-list-loop {
		flex-direction: column;
	}

	#listings-result .listing-list-loop > .image {
		flex: none;
		width: 100%;
		max-width: none;
	}

	#listings-result .listing-list-loop > .content {
		padding: 12px 14px 14px;
	}

	/* En el teléfono la foto va arriba del texto: la etiqueta del precio pasa a la esquina
	   de la foto, como en la grilla, y el título conserva todo el ancho. */
	#listings-result .listing-list-loop {
		position: relative;
	}

	#listings-result .listing-list-loop > .content,
	#listings-result .listing-list-loop .meta-top {
		position: static;
		transform: none;
	}

	#listings-result .listing-list-loop .meta-top .price {
		--rm-precio-fs: 17px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 3;
		max-width: 100%;
		margin: 0;
	}

	#listings-result .listing-list-loop .meta-middle {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	#listings-result .stm-directory-grid-loop {
		margin-bottom: 16px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#listings-result .stm-directory-grid-loop > a {
		transition: none;
	}
}

/*
 * Perfil público del vendedor (tema, user/public/user.php). `.hfeed.site` es flex en
 * columna y el `.container` tiene margen automático: sin ancho propio se encogía al de su
 * contenido (537 px en una pantalla de 1280 al quitar el recuadro de contacto).
 */
/* `border-box`: con el `width: 100%` más los 20 px de cada lado el perfil medía 40 px más
   que la pantalla y en el celular el borde derecho de las tarjetas quedaba cortado. El tope
   de 1280 deja el mismo contenido de 1240 px de antes, alineado con la cabecera. */
.hfeed.site > .container.stm-user-public-profile,
.rm-principal > .container.stm-user-public-profile {
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin: 32px auto 56px;
	padding: 0 20px;
}

.stm-user-public-listing-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 16px;
}

.stm-user-public-listing-top .rm-vista {
	margin: 0;
}

/* En el perfil no carga la hoja del inventario de Motors: la fila de la grilla se arma aquí. */
.rm-listado-perfil .stm-isotope-sorting-grid .car-listing-row.row {
	display: flex;
	flex-wrap: wrap;
}

/* En el perfil la tarjeta en lista mide casi 900 px de texto (en /inventory/ los filtros
   se llevan un tercio): con celdas de 130 px entraban seis datos por fila, apretados y
   cortados. Con 180 px quedan cuatro, del mismo ancho que se lee en el inventario. Solo
   desde 768 px: abajo manda la rejilla de dos columnas del teléfono. */
@media ( min-width: 768px ) {
	#listings-result.rm-listado-perfil .listing-list-loop .meta-middle {
		grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	}
}

@media ( max-width: 991px ) {
	.rm-listado-perfil .stm-isotope-sorting-grid .stm-directory-grid-loop {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media ( max-width: 575px ) {
	.rm-listado-perfil .stm-isotope-sorting-grid .stm-directory-grid-loop {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Paginación: inventario, perfil público y «Mis avisos»
 *
 * Las tres usan el `paginate_links()` de WordPress, pero Motors las vestía distinto y mal:
 * números en cajas de 34 px, todos en óxido (el número actual era el único gris, al revés
 * de lo esperable) y «anterior/siguiente» en cajas de 54 px clavadas a los extremos con
 * `position: absolute` y letra de 20 px. En «Mis avisos», donde esas flechas son las
 * palabras «Anterior» y «Siguiente», el texto no cabía y se salía de la caja (comentario
 * del dueño: «errores de tamaño de texto o tamaño de botón»).
 *
 * Una sola fila centrada con botones iguales de 40 px de alto, en el mismo lenguaje que el
 * selector de vista: borde de línea, la página actual en acero lleno. Va aquí y no en
 * cuenta.css porque esta hoja carga en todo el sitio y así las tres no se separan.
 * `body` delante: la hoja del widget de resultados de Motors carga después que esta y
 * usa selectores con id del mismo peso.
 * ---------------------------------------------------------------------- */

body #listings-result .stm_ajax_pagination ul.page-numbers,
body .user-listings-pagination ul.page-numbers,
body .rm-cuenta .pagination-container ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: static;
	margin: 28px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body #listings-result .stm_ajax_pagination ul.page-numbers li,
body .user-listings-pagination ul.page-numbers li,
body .rm-cuenta .pagination-container ul.page-numbers li {
	display: block;
	margin: 0;
	padding: 0;
}

body #listings-result .stm_ajax_pagination ul.page-numbers li > .page-numbers,
body .user-listings-pagination ul.page-numbers li > .page-numbers,
body .rm-cuenta .pagination-container ul.page-numbers li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: static;
	box-sizing: border-box;
	width: auto;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #fff;
	color: var( --rm-tinta );
	font-family: var( --rm-fuente );
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

body #listings-result .stm_ajax_pagination ul.page-numbers li > a.page-numbers:hover,
body .user-listings-pagination ul.page-numbers li > a.page-numbers:hover,
body .rm-cuenta .pagination-container ul.page-numbers li > a.page-numbers:hover {
	border-color: var( --rm-acero );
	background: var( --rm-hormigon );
	color: var( --rm-tinta );
}

body #listings-result .stm_ajax_pagination ul.page-numbers li > a.page-numbers:focus-visible,
body .user-listings-pagination ul.page-numbers li > a.page-numbers:focus-visible,
body .rm-cuenta .pagination-container ul.page-numbers li > a.page-numbers:focus-visible {
	outline: 2px solid var( --rm-acero );
	outline-offset: 2px;
}

body #listings-result .stm_ajax_pagination ul.page-numbers li > .current,
body .user-listings-pagination ul.page-numbers li > .current,
body .rm-cuenta .pagination-container ul.page-numbers li > .current {
	border-color: var( --rm-acero );
	background: var( --rm-acero );
	color: #fff;
}

/* Los «…» no son un botón. */
body #listings-result .stm_ajax_pagination ul.page-numbers li > .dots,
body .user-listings-pagination ul.page-numbers li > .dots,
body .rm-cuenta .pagination-container ul.page-numbers li > .dots {
	min-width: 24px;
	padding: 0;
	border-color: transparent;
	background: none;
	color: var( --rm-gris );
}

/* Anterior / siguiente: acción de avanzar, en acero como el «Mostrar más» del inventario. */
body #listings-result .stm_ajax_pagination ul.page-numbers li > .prev,
body #listings-result .stm_ajax_pagination ul.page-numbers li > .next,
body .user-listings-pagination ul.page-numbers li > .prev,
body .user-listings-pagination ul.page-numbers li > .next,
body .rm-cuenta .pagination-container ul.page-numbers li > .prev,
body .rm-cuenta .pagination-container ul.page-numbers li > .next {
	padding: 0 14px;
	color: var( --rm-acero );
}

body #listings-result .stm_ajax_pagination ul.page-numbers li > .page-numbers i,
body .user-listings-pagination ul.page-numbers li > .page-numbers i {
	margin: 0;
	font-size: 16px;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * Título del listado (rm-seo.php): «Maquinaria en venta» o «Maquinaria Agrícola en venta», con la
 * descripción de la familia debajo. Es el <h1> de la página; filtros.js lo cambia al filtrar.
 * ---------------------------------------------------------------------- */

.rm-listado-cabecera {
	margin: 0 0 14px;
}

.rm-listado-cabecera .rm-listado-cabecera__titulo {
	margin: 0;
	color: var( --rm-acero ) !important;
	font-size: clamp( 24px, 2.6vw, 32px ) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.01em;
	text-transform: none !important;
}

.rm-listado-cabecera .rm-listado-cabecera__intro {
	max-width: 75ch;
	margin: 6px 0 0;
	color: var( --rm-gris );
	font-size: 15px;
	line-height: 1.5;
}

.rm-listado-cabecera .rm-listado-cabecera__intro[hidden] {
	display: none;
}