/*
 * CILI: the artwork cards and their grids follow the app (roadmap F10, ADR-0023 D2 to D7): Explore, /q/, the artist's
 * /u/ page, Related and "More from this author", and the first page's lists, which all print Heilz's card
 * (templates/explore/listing/, the child's copies of gallery.php, action.php and badges.php).
 *
 * The card is the app's post (the owner's decision of 2026-10-19, ADR-0023, WEB-654, WEB-687), the same at every width: the
 * artist's avatar and name on top with the artwork's type under the name; the image with its own shape, Save (the bookmark)
 * in its top-right corner; the title; then the clap control with the artwork's total of claps beside it, and Share. It
 * replaces the owner's reference card of 2026-10-09 (Q106: the title and the round buttons over the image's foot on a
 * hover, 1200 pixels up) and the approved mockups' tile (768 to 1199). The price is under the title, as the app prints it, when the
 * artwork has one (the owner's decision of 2026-10-20). The views are not on it unless the owner turns them on (wp-admin > LCR >
 * Display, 2026-10-19).
 * Save shows only while the card is hovered or has the keyboard in it on a device that can hover (a mouse), and always on a
 * touch screen.
 * The grids are Heilz's masonry of columns (the server deals the cards into columns, explore.js adds to the shortest): the
 * gaps are the grid-gap tokens, the columns above 768 pixels are Heilz's. On a phone (under 768 pixels) every list is one card
 * per row (web.columns.phone), in the list's own order.
 *
 * Grayscale only, colour only from content: the image and, while it loads, its dominant colour (--lcr-placeholder,
 * from the content). Every rule starts with `html body`; `!important` answers only a vendor `!important`, named.
 */

/* ------------------------------------------------------------------------------------------- the card */

html body .ulz-listing .ulz-listing-cover,
html body .ulz-listing .ulz-listing-image .ulz-image,
html body .ulz-listing .ulz-dummy-image {
	border-radius: var(--lcr-radius-tile);
	overflow: hidden;
}

/* The image's ratio and its dominant colour, from the content (templates/explore/listing/gallery.php). */
html body .ulz-listing .ulz-listing-image .ulz-image.lcr-ratio {
	padding-top: var(--lcr-ratio);
}

html body .ulz-listing .ulz-listing-image .ulz-image.lcr-placeholder {
	background-color: var(--lcr-placeholder);
}

html body .ulz-listing .ulz-listing-image .ulz-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	pointer-events: none;
}

html body .ulz-listing .ulz-listing-gallery-item.lcr-first {
	opacity: 1;
	background-image: var(--lcr-image);
}

/* An artwork without an image: the panel gray and the line image icon. */
html body .ulz-listing .ulz-dummy-image {
	background-color: var(--lcr-color-panel);
	color: var(--lcr-color-muted);
}

html body .ulz-listing .ulz-dummy-image .lcr-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	transform: translate(-50%, -50%);
}

/* A video's play mark: the line play icon in a white ring, as the app's feed (ADR-0022). */
html body .ulz-listing .ulz-image.ulz--is-video {
	background-color: var(--lcr-color-stage); /* a video's ground stays dark in both modes (ADR-0045 D4) */
}

html body .ulz-listing .ulz-image.ulz--is-video .lcr-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	padding: var(--lcr-space-10);
	box-sizing: border-box;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-overlay);
	color: var(--lcr-color-on-stage); /* over the picture's veil, which is the same in both modes */
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* The badges (templates/explore/listing/badges.php): the marks a card carries itself, such as payments' "Promovat"
   (ADR-0029, P7), at the image's top-left and shown at every width without a hover; the list is empty on an organic card. */
html body .ulz-listing .ulz-listing-badges {
	top: var(--lcr-space-12);
	right: auto;
	left: var(--lcr-space-12);
	z-index: 2;
	margin: 0;
	opacity: 1;
}

/* "Link copied" (assets/js/card-share.js): a short gray-scale note at the foot of the screen, a polite live region. */
html body .lcr-share-status {
	position: fixed;
	bottom: var(--lcr-space-24);
	left: 50%;
	z-index: 1000;
	max-width: calc(100vw - 2 * var(--lcr-space-16));
	padding: var(--lcr-space-10) var(--lcr-space-20);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-web-type-label-line-height);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity var(--lcr-motion-duration-short) var(--lcr-motion-easing-standard);
}

html body .lcr-share-status.lcr-share-status--shown {
	opacity: 1;
}

/* The author: a round avatar, the name in the label type, the date and the type in the meta type. */
html body .ulz-listing .ulz-cover-author .ulz--image {
	flex: 0 0 var(--lcr-size-avatar-card) !important; /* theme.css's `.ulz-cover-author .ulz--image { flex: 0 1 38px !important }` */
	max-width: var(--lcr-size-avatar-card) !important; /* and its `max-width: 38px !important` */
	margin-top: 0 !important; /* and its `margin-top: 7px !important` */
}

html body .ulz-listing .ulz-cover-author .ulz--image img,
html body .ulz-listing .ulz-cover-author .ulz-avatar-placeholder {
	display: block;
	width: var(--lcr-size-avatar-card);
	height: var(--lcr-size-avatar-card);
	margin: 0;
	padding: 0;
	border-radius: var(--lcr-radius-pill);
	object-fit: cover;
}

/* A member without a picture: a gray disc with the line person icon (Utillz prints Material Icons' "person"). */
html body .ulz-listing .ulz-avatar-placeholder {
	position: relative;
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-muted);
}

/* Its size is the circle's times the token (design.css, WEB-677). */
html body .ulz-listing .ulz-avatar-placeholder .material-icons {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/person.svg") center / contain no-repeat;
	mask: url("../icons/person.svg") center / contain no-repeat;
	transform: translate(-50%, -50%);
}

html body .ulz-listing .ulz-cover-author .ulz--heading {
	gap: var(--lcr-space-4);
	margin: 0;
	padding: 0 var(--lcr-space-10);
	font-size: var(--lcr-type-meta-font-size);
	line-height: var(--lcr-type-meta-line-height);
}

html body .ulz-listing .ulz-cover-author .ulz--author-name {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-4);
	font-size: var(--lcr-type-meta-font-size) !important; /* heilz-site.css's `a.ulz--author-name.ulz-ellipsis { font-size: 12px }`, the same value */
	font-weight: var(--lcr-font-weight-regular);
}

html body .ulz-listing .ulz-cover-author .lcr-line {
	display: block;
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-label-line-height);
}

/* The listing type's name: an outlined chip (Heilz's style.css paints it teal; the interface has no colour, Q48). */
html body .listingtype-newname {
	display: inline-block;
	align-self: flex-start;
	padding: var(--lcr-space-4) var(--lcr-space-10);
	border: var(--lcr-size-hairline) solid currentColor;
	border-radius: var(--lcr-radius-pill);
	background: transparent;
	color: inherit;
	font-size: var(--lcr-type-caption-font-size);
	font-weight: var(--lcr-type-caption-font-weight);
	line-height: var(--lcr-type-caption-line-height);
}

/* The open button: a round icon button. */
html body .ulz-listing .ulz-listing-cover .ulz--action .ulz--download a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-control);
	height: var(--lcr-size-control);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
}

html body .ulz-listing .ulz-listing-cover .ulz--action .ulz--download .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

/* The artwork's title and details under the image: the title type and outlined chips. */
html body .ulz-listing .ulz-listing-content .ulz-title h4 {
	margin: 0;
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	letter-spacing: var(--lcr-type-title-letter-spacing);
	line-height: var(--lcr-type-title-line-height);
	color: var(--lcr-color-ink);
}

/* The heading under the image starts at the content's own padding (Heilz's margins: 20px 10px 8px, and -24px under
   the tagline). */
html body .ulz-listing .ulz-listing-content .ulz--heading,
html body .ulz-listing .ulz-listing-content .ulz-listing-tagline {
	margin: 0;
}

/* The tagline, which many artworks show in place of a title. */
html body .ulz-listing .ulz-listing-content .ulz-listing-tagline p {
	margin: var(--lcr-space-4) 0 0;
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
	color: var(--lcr-color-body);
}

html body .ulz-listing .ulz-listing-tags ul {
	gap: var(--lcr-space-6);
	margin: 0;
}

html body .ulz-listing .ulz-listing-tags li {
	padding: 0;
}

html body .ulz-listing .ulz-listing-tags :is(a, span) {
	padding: var(--lcr-space-4) var(--lcr-space-12);
	border: var(--lcr-size-hairline) solid var(--lcr-color-chip-outline);
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-meta-font-size);
	line-height: var(--lcr-type-meta-line-height);
}

html body .ulz-listing .ulz-listing-tags a:hover {
	border-color: var(--lcr-color-ink);
	background-color: transparent;
}

/* ------------------------------------------------------------------------------------------- the grids */

html body .ulz-listings-columns {
	column-gap: var(--lcr-web-grid-gap-desktop);
}

html body .ulz-listings-columns .ulz-listings,
html body .ulz-dynamic .ulz-explore-listings .ulz-listings-column .ulz-listings {
	row-gap: var(--lcr-web-grid-gap-desktop) !important; /* heilz-site.css's `row-gap: 1.5rem !important`, the same value */
}

/* ------------------------------------------------------------------------------------------- the lists, tablet and phone */

@media (max-width: 1199.98px) {

	html body .ulz-listings-columns {
		column-gap: var(--lcr-web-grid-gap-phone);
	}

	html body .ulz-listings-columns .ulz-listings,
	html body .ulz-dynamic .ulz-explore-listings .ulz-listings-column .ulz-listings {
		row-gap: var(--lcr-space-24) !important; /* heilz-site.css's `row-gap: 1.5rem !important` */
	}
}

/* On a phone, every list is one card per row (the owner's decision of 2026-10-19, ADR-0023). From 768 pixels up the lists
   keep Heilz's columns; only the card below is the same everywhere. */
@media (max-width: 767.98px) {

	/* No sideways scroll (D7, WCAG 1.4.10): Utillz's `.ulz-explore { margin: 0 calc(-1 * var(--gap)) }` and the list's
	   `padding: 0 var(--gap)` (24px) cancel out inside the page's 16px side padding only when the gap is that padding;
	   with 24 the box stands 8px outside the page on each side. The listings' own negative margin and the items'
	   padding (half the gap) follow the same variable. */
	html body .ulz-explore {
		--gap: var(--lcr-space-16);
	}

	/*
	 * The list: web.columns.phone columns (one), the cards in the order of the list, not of the server's masonry. The
	 * server deals the cards into columns by height, so the page's markup runs column by column; each card carries its
	 * place in the list (`--lcr-order`, from the card's index, a page after the other when the list is loaded further)
	 * and the column boxes give way (`display: contents`) so that the cards are the grid's own items.
	 */
	html body .ulz-listings-columns,
	html body .ulz-explore-listings > .ulz-listings {
		display: grid;
		grid-template-columns: repeat(var(--lcr-web-columns-phone), minmax(0, 1fr)) !important; /* Heilz's theme.css: `.ulz-listings-columns { grid-template-columns: repeat(3, ...) !important }` */
		column-gap: 0;
		row-gap: var(--lcr-space-32);
	}

	html body .ulz-listings-columns .ulz-listings-column,
	html body .ulz-listings-columns .ulz-listings {
		display: contents;
	}

	html body .ulz-listings-columns .ulz-listing-item,
	html body .ulz-explore-listings > .ulz-listings > .ulz-listing-item {
		order: var(--lcr-order, 0);
		display: block;
		min-width: 0;
		margin: 0;
	}
}

/* ------------------------------------------------------------------------------------------- the card, at every width */

/*
 * The card is a post, as the app's feed card (home_screen.dart, FeedCard; artwork_post_card.dart): the artist's avatar and
 * name with the artwork's type under it, the image with Save in its top-right corner, the title, then the clap control (the
 * artwork's total of claps beside it) and Share. A grid of one column and four rows (the artist, the image, the title, the row of
 * buttons, itself a flex line that wraps). The cover's boxes, the author's row box and the counts' give way (`display: contents`) so
 * that each part is a grid item of the card, or an item of the row of buttons: the parts
 * keep their markup, their links, their data-modal attributes and their names. The cover has no box then, so the image box
 * draws the ring of a focused image link around itself (below). The markup is in the order the post shows its parts (the card's
 * templates/explore/listing/listing.php: the artist, the image, Save, the title, the row of buttons), so the links' Tab order is
 * that order too (the owner's decision of 2026-10-20); the grid places every part explicitly, so the markup's order moves no part.
 */
html body .ulz-listing .ulz-listing-image .ulz-image.lcr-ratio {
	padding-top: var(--lcr-ratio) !important; /* theme.css forces 300px under 1200 (`.ulz-image { padding-top: 300px !important }`) */
}

/* Heilz's darkening of the image on a hover is not the post's. */
html body .ulz-listing .ulz-listing-overlay {
	display: none;
}

html body .ulz-listing {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	row-gap: var(--lcr-space-12);
}

html body .ulz-listing .ulz-listing-cover,
html body .ulz-listing .ulz-listing-cover-inner,
html body .ulz-listing .ulz-listing-cover .ulz--action,
html body .ulz-listing .lcr-card-overlay,
html body .ulz-listing .lcr-card-counts {
	display: contents;
	overflow: visible; /* no box, so nothing to clip; Utillz's `overflow: hidden` would still be read as a clip */
}

html body .ulz-listing .ulz-listing-cover .ulz--action .ulz--download,
html body .ulz-listing .ulz-listing-cover .ulz--action .ulz-cover-author {
	padding: 0 !important; /* theme.css's and heilz-site.css's paddings with `!important` on the cover's author */
	margin: 0 !important; /* and their margins with `!important` */
}

html body .ulz-listing .ulz-cover-author,
html body .ulz-listing .ulz-cover-author a {
	color: var(--lcr-color-ink);
}

/* The ring of a link that fills the image (the image, a slider's pictures): the image box clips its children, so it draws the
   ring around itself, with the corners of the image. */
html body .ulz-listing .ulz-listing-image {
	border-radius: var(--lcr-radius-tile);
}

html body .ulz-listing .ulz-listing-image:has(:is(a.ulz-image, a.ulz-listing-gallery-item, a:has(.ulz-dummy-image)):focus-visible) {
	outline-style: solid !important; /* Heilz's style.css: `outline: 0 !important` */
}

/* Row 1, the artist: the avatar, the name and, under the name, the artwork's type. */
html body .ulz-listing .ulz-listing-cover .ulz--action .ulz--author {
	grid-row: 1;
	grid-column: 1 / -1;
	min-width: 0;
}

html body .ulz-listing .ulz-cover-author {
	align-items: center;
}

html body .ulz-listing .ulz-cover-author .ulz--image a {
	display: block;
	border-radius: var(--lcr-radius-pill);
}

html body .ulz-listing .ulz-cover-author .ulz--heading {
	min-width: 0;
	padding: 0 0 0 var(--lcr-space-10);
}

html body .ulz-listing .ulz-cover-author .ulz--author-name {
	gap: 0;
}

/* The title link of Heilz's header markup (its `data-replace` placeholders) is no part of the card: neither shown nor a Tab stop. */
html body .ulz-listing .ulz-cover-author .ulz--title {
	display: none !important; /* Heilz's theme.css shows every `.ulz-ellipsis` below 768 (`display: block !important`) */
}

html body .ulz-listing .ulz-cover-author .ulz--author-name span:not(.lcr-name):not(.listingtype-newname) {
	display: none;
}

/* The name stays ink: the selector is as specific as the muted gray the rule for the author's spans above sets. */
html body .ulz-listing .ulz-cover-author .ulz--author-name span.lcr-name:not(.lcr-line):not(.listingtype-newname) {
	display: block;
	overflow: hidden;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-body-large-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-body-large-line-height);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The artwork's type, plain muted text under the name, as the app's card line (Heilz's chip is for the page). */
html body .ulz-listing .ulz-cover-author .ulz--author-name span.listingtype-newname {
	display: block;
	align-self: stretch;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
	font-weight: var(--lcr-font-weight-regular);
	line-height: var(--lcr-type-meta-line-height);
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .ulz-listing .ulz-cover-author .ulz--author-name span.listingtype-newname:empty {
	display: none;
}

/* On an artist's own page a card has no artist row (the owner's decision of 2026-10-20, WEB-734; templates/explore/listing/action.php
   prints none): its first row would be an empty track with the row gap above the image, so the card's three rows are the image's, the
   title's and the buttons', the same places one row higher. Placed by the class, never hidden: nothing of the row is in the page. */
html body .ulz-listing.lcr-card--no-artist :is(.ulz-listing-image, .ulz-listing-badges, .ulz-listing-favorite) {
	grid-row: 1;
}

html body .ulz-listing.lcr-card--no-artist .ulz-listing-content {
	grid-row: 2;
}

html body .ulz-listing.lcr-card--no-artist .lcr-card-buttons {
	grid-row: 3;
}

/* Row 2, the image, and over its corners, in the image's own grid cell, Save at the top-right and the badges (the
   "Promoted" chip) at the top-left. */
html body .ulz-listing .ulz-listing-image,
html body .ulz-listing .ulz-listing-badges,
html body .ulz-listing .ulz-listing-favorite {
	grid-row: 2;
	grid-column: 1 / -1;
}

html body .ulz-listing .ulz-listing-badges {
	position: relative;
	inset: auto;
	align-self: start;
	justify-self: start;
	width: fit-content;
	margin: var(--lcr-space-12);
	z-index: 2;
	opacity: 1;
}

html body .ulz-listing .ulz-listing-priority {
	z-index: 2;
}

/* Save: Utillz's favorite link, a round white button on the image, ink when the artwork is a favourite. */
html body .ulz-listing .ulz-listing-favorite {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	justify-self: end;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	margin: var(--lcr-space-10);
	z-index: 2;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

html body .ulz-listing .ulz-listing-favorite.ulz--active {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .ulz-listing .ulz-listing-favorite .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

/* On a device that can hover (a mouse) Save shows only while the card is hovered or has the keyboard in it, so the picture is
   clean; it stays in the Tab order and the accessibility tree (opacity, never display or visibility). A touch screen has no
   hover, so there it stays visible. A saved artwork is not kept visible: the owner's decision of 2026-10-19. */
@media (hover: hover) and (pointer: fine) {

	html body .ulz-listing .ulz-listing-favorite {
		opacity: 0;
		pointer-events: none;
	}

	html body .ulz-listing:is(:hover, :focus-within) .ulz-listing-favorite {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	html body .ulz-listing .ulz-listing-favorite {
		transition: opacity var(--lcr-motion-duration-short) var(--lcr-motion-easing-standard);
	}
}

/* Row 3, the title. Nothing else of the details shows: the description, the details and the open button are the
   image's and the title's (the same link and quick view). */
html body .ulz-listing .ulz-listing-content {
	grid-row: 3;
	grid-column: 1 / -1;
	padding: 0;
	margin: 0;
}

html body .ulz-listing .ulz-listing-tagline,
html body .ulz-listing .ulz-listing-tags,
html body .ulz-listing .ulz-listing-bottom,
html body .ulz-listing .ulz--action .ulz--download {
	display: none;
}

html body .ulz-listing .ulz-listing-content .ulz-title h4 {
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	letter-spacing: var(--lcr-type-title-letter-spacing);
	line-height: var(--lcr-type-title-line-height);
}

/* The price under the title, the text the app prints (the owner's decision of 2026-10-20; listing.php prints it only when LCR Core gives
   one): the app's label style, in ink, as text of the title's link, never a control. */
html body .ulz-listing .ulz-listing-content .lcr-card-price {
	margin: var(--lcr-space-4) 0 0;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	letter-spacing: var(--lcr-type-label-letter-spacing);
	line-height: var(--lcr-type-label-line-height);
	overflow-wrap: anywhere;
}

/*
 * Row 4, the buttons: the clap control (layout-applause.css gives it its look) with, beside it, the artwork's total of claps (only
 * when there is one), then Share, round on the gray fill; the views, small and muted, at the end of the row, only when the owner
 * shows them. Every button is there without a hover and is a tap target of `size.icon-button`. The row is a flex line that wraps
 * (the owner's decision of 2026-10-20, WEB-731): in a card too narrow for all of it (the tablet's three columns at 768 pixels, a
 * large total of claps beside the control) the count and Share go under the button, never past the card's edge, so nothing
 * overflows and no sideways scroll appears at any width. The gaps are the row's, so what wraps starts at the card's edge.
 */
html body .ulz-listing .lcr-card-buttons {
	grid-row: 4;
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lcr-space-4) var(--lcr-space-8);
	min-width: 0;
}

html body .ulz-listing :is(.lcr-clap, a.lcr-card-applause) {
	flex: none;
}

html body .ulz-listing .lcr-card-share {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	padding: 0;
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	box-shadow: none;
	color: var(--lcr-color-ink);
	cursor: pointer;
}

html body .ulz-listing .lcr-card-share .lcr-icon {
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

@media (hover: hover) and (pointer: fine) {

	html body .ulz-listing .lcr-card-share:hover {
		background-color: var(--lcr-color-outline);
	}
}

html body .ulz-listing .lcr-card-count {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-4);
}

html body .ulz-listing .lcr-card-count--applause {
	flex: none;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	line-height: var(--lcr-type-label-line-height);
}

html body .ulz-listing .lcr-card-count--applause .lcr-icon,
html body .ulz-listing .lcr-card-count--empty {
	display: none;
}

html body .ulz-listing .lcr-card-count--views {
	margin-left: auto; /* the end of the row */
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
	line-height: var(--lcr-type-meta-line-height);
}

html body .ulz-listing .lcr-card-count--views .lcr-icon {
	width: var(--lcr-space-16);
	height: var(--lcr-space-16);
}

/* On the member's own artwork no control precedes the count, so it keeps its icon. */
html body .ulz-listing .lcr-card-count--applause.lcr-card-count--alone .lcr-icon {
	display: inline;
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

html body .ulz-listing .lcr-card-count--applause.lcr-card-count--alone.lcr-card-count--empty {
	display: none;
}

/* ------------------------------------------------------------------------------------------- the "Promoted" chip */

/* The chip of a promoted slot and its "Why am I seeing this?" panel (templates/explore/listing/badges.php,
   cili/utillz/promoted-slots.php; ADR-0029 D18, roadmap P7). Grayscale, the line icon of the flag, shown at every width
   without a hover, a target as tall as the small control (ADR-0023 D7). The list itself is placed by the rule above. */
html body .ulz-listing .ulz-listing-badges .lcr-card-promoted {
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .ulz-listing .lcr-card-promoted-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-6);
	min-height: var(--lcr-size-control-small);
	padding: 0 var(--lcr-space-12);
	border: var(--lcr-size-hairline) solid var(--lcr-color-chip-outline);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-background);
	box-shadow: none;
	color: var(--lcr-color-ink);
	cursor: pointer;
	font-size: var(--lcr-type-meta-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-meta-line-height);
}

html body .ulz-listing .lcr-card-promoted-chip .lcr-icon {
	width: var(--lcr-space-16);
	height: var(--lcr-space-16);
}

/* The panel: a native dialog in the top layer, so no card's clip cuts it. */
html body dialog.lcr-card-promoted-panel {
	width: var(--lcr-web-container-text);
	max-width: calc(100% - 2 * var(--lcr-web-gutter-phone));
	padding: 0;
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-panel);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-body);
}

html body dialog.lcr-card-promoted-panel::backdrop {
	background-color: var(--lcr-color-scrim);
}

html body dialog.lcr-card-promoted-panel .lcr-card-promoted-body {
	padding: var(--lcr-space-24);
}

html body dialog.lcr-card-promoted-panel h2 {
	margin: 0 0 var(--lcr-space-12);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-section-font-size);
	font-weight: var(--lcr-type-section-font-weight);
	line-height: var(--lcr-type-section-line-height);
}

html body dialog.lcr-card-promoted-panel p {
	margin: 0 0 var(--lcr-space-12);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
}

html body dialog.lcr-card-promoted-panel .lcr-card-promoted-payer {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

html body dialog.lcr-card-promoted-panel a {
	color: var(--lcr-color-ink);
	text-decoration: underline;
}

html body dialog.lcr-card-promoted-panel .lcr-card-promoted-close {
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-20);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-ink);
	box-shadow: none;
	color: var(--lcr-color-on-ink);
	cursor: pointer;
	font-weight: var(--lcr-font-weight-semibold);
}

/* A card's image as a real `<img>` (templates/explore/listing/gallery.php, ADR-0032): it fills Utillz's `.ulz--img`
   box as its background did (cover, centred), shown at once (Utillz's theme.css hides the box,
   `.utillz .ulz-listing-image .ulz-image .ulz--img { opacity: 0 }`, until its script has painted the background), the
   box keeping its ratio and corners. */
html body .ulz-listing .ulz-listing-image .ulz--img.lcr-card-image {
	opacity: 1;
}

html body .ulz-listing .ulz-listing-image .ulz--img.lcr-card-image > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}