/*
 * CILI: an artwork's page, its quick view and its gallery follow the app's artwork screen (roadmap F10, ADR-0023 D2
 * to D7; ADR-0018 D2, the artwork screen).
 *
 * The cover (templates/single/cover/full-cover.php and top.php, shared by the page and the quick view): a white
 * ground instead of Heilz's black band, the artist's row and the actions above the artwork, the artwork in a light
 * panel with the hero's rounded corners. The page's content (Utillz's modules: the description, the details, the
 * gallery block, the author, the reviews, the report) in the app's type, panels and pills; the line icons where the
 * modules print icon-font glyphs (masks from assets/icons/, D4). The quick view and the gallery keep their behaviour
 * (WEB-607, WEB-609); only their look changes.
 *
 * Grayscale only, colour only from content; every value a token; `html body` first; `!important` only against a
 * vendor `!important`, named.
 */

/* ------------------------------------------------------------------------------------------- the cover */

html body .ulz-cover.ulz-cover-gallery {
	margin: 0 0 var(--lcr-space-32);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

/* Heilz's full-cover.php printed this in a <style> block. */
html body .ulz-cover video {
	position: relative;
}

/* The header row: no gradient (Heilz's, for a row over the image), on the page's row, as the content below it. */
html body .ulz-cover.ulz-cover-gallery .ulz-cover-top {
	background: none;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--inner {
	align-items: center;
	gap: var(--lcr-space-16);
	margin: 0;
	padding: var(--lcr-space-16) 0;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--inner > * {
	padding-left: 0;
	padding-right: 0;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a:hover {
	background-color: var(--lcr-color-outline);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--author {
	align-items: center;
	gap: var(--lcr-space-12);
	margin: 0; /* Heilz's -8px and the cells' 8px paddings and margins, which put 40px between the avatar and the name */
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top :is(.ulz--image, .ulz--heading) {
	margin: 0;
	padding: 0;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--image {
	flex: none;
	width: var(--lcr-size-avatar-artist);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--image img,
html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz-avatar-placeholder {
	width: var(--lcr-size-avatar-artist);
	height: var(--lcr-size-avatar-artist);
	margin: 0;
	padding: 0;
	border-radius: var(--lcr-radius-pill);
	object-fit: cover;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--title {
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-title-font-size);
	font-weight: var(--lcr-web-type-title-font-weight);
	letter-spacing: var(--lcr-web-type-title-letter-spacing);
	line-height: var(--lcr-web-type-title-line-height);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--author-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lcr-space-4) var(--lcr-space-8);
	color: var(--lcr-color-muted);
	font-size: var(--lcr-web-type-meta-font-size);
	line-height: var(--lcr-web-type-meta-line-height);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--author-name > span:first-child {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

/* The actions: round icon buttons of the fill gray; Share, where it shows its word, and Download as pills. */
html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action {
	gap: var(--lcr-space-8);
	margin: 0; /* Heilz's `margin: 0 -.35rem` ended the bookmark 6px past the artwork's panel */
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action > div {
	padding: 0;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lcr-space-6);
	min-width: var(--lcr-size-control);
	height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-8);
	box-sizing: border-box;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-web-type-label-font-weight);
	text-decoration: none;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a[data-action="share"],
html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a[data-action="download-toggle"] {
	padding: 0 var(--lcr-space-16);
}

/* The icon-only buttons are circles: the page link, the bookmark, the quick view's close. */
html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a[aria-label] {
	width: var(--lcr-size-control);
	padding: 0;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a.ulz--active {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a span {
	display: inline-flex;
	align-items: center;
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .lcr-icon,
html body .ulz-preview-nav .lcr-icon,
html body .ulz-modal-gallery .ulz-gallery-nav .lcr-icon,
html body .ulz-modal .ulz-close .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

/* The artwork: as wide as the page's row (the content token, Heilz's --row), on the page's white with no gray panel
   around it (the owner's request of 2026-10-11). Its corners are as the pictures of the gallery block below ("More
   photos") look: those have the tile's 16px, but Heilz's `.ulz-cover-adaptive { overflow: hidden }` cuts 4px off their
   edge (`.ulz--images { margin: -4px }`), which leaves a small rounding on the screen, and that is the corner the owner
   chose. The work takes the picture token (4px, measured against those pictures at two device pixels per pixel), on the
   page, in the quick view and in the popup below, and shows as much of itself as it can (the owner's request of
   2026-10-12). */
html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec {
	max-width: var(--lcr-web-container-content);
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	border-radius: var(--lcr-radius-picture);
	background: none;
}

html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec img[data-replace="image"],
html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec video {
	border-radius: var(--lcr-radius-picture);
}

/* The artwork keeps its proportions at every width. full-cover.php prints the first image's width and height (ADR-0032),
   and the browser reads the `width` attribute as a fixed width (`width: 1080px`): `max-width: 100%` shortens it alone,
   `img { height: auto }` (the WordPress theme's style.css) derives the height from that width, and Heilz's
   `.ulz-cover img { max-height }` (theme.css) cuts the height alone, so a tall artwork came out wide and squashed.
   With the width automatic too, a max-height that bites takes the width down with it (CSS 2.1 section 10.4), and the
   box stays the picture's own, so the rounded corners above follow the picture; `contain` is a second line, so a box
   some other rule gives a different ratio still never stretches what it holds. The attributes stay: WordPress reads
   them for the image's `fetchpriority`, and they give search engines its size; the box takes its room once the image's
   own size is known. */
html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec img[data-replace="image"],
html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec video {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* The title under the artwork (full-cover.php prints it on the page only): the phone and the tablet's, where the app's
   artwork screen puts it; from the desktop up the header row above the artwork keeps the title. */
html body .ulz-cover .lcr-artwork-intro {
	display: none;
}

/* The artwork's price, as the app's price panel shows it (the owner's decision of 2026-10-20; full-cover.php prints it on the page only,
   when LCR Core gives one): a small "Price" over the text, large and in ink. From the desktop up it stands under the artwork, centred
   as the artwork is; on the tablet and the phone, below, under the title and the type, as the app's artwork screen. */
html body .ulz-cover .lcr-artwork-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: var(--lcr-space-16) 0 0;
}

html body .ulz-cover .lcr-artwork-price-label {
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
	line-height: var(--lcr-type-meta-line-height);
}

html body .ulz-cover .lcr-artwork-price-value {
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-price-font-size);
	font-weight: var(--lcr-web-type-price-font-weight);
	letter-spacing: var(--lcr-web-type-price-letter-spacing);
	line-height: var(--lcr-web-type-price-line-height);
	overflow-wrap: anywhere;
}

/* The watermark, which Heilz's templates styled inline. */
html body .ulz-cover .ulz--watermark {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 150px;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	pointer-events: none;
}

html body .ulz-modal-gallery .ulz--watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 25%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	pointer-events: none;
}

/* ------------------------------------------------------------------------------------------- the page's content */

html body .ulz-single-content .ulz-mod-listing > h4,
html body .ulz-single-content .ulz-mod-heading,
html body .ulz-listing-sidebar .ulz-mod-heading {
	margin: 0 0 var(--lcr-space-16);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-title-font-size);
	font-weight: var(--lcr-web-type-title-font-weight);
	letter-spacing: var(--lcr-web-type-title-letter-spacing);
	line-height: var(--lcr-web-type-title-line-height);
}

html body .ulz-single-content .ulz-mod-listing {
	margin: 0 0 var(--lcr-space-40);
}

/* The sections' titles are all in ink: the description's inherits the body gray of its text, which made "Description"
   lighter than "Medium", "Subjects" and the rest. */
html body .ulz-single-content .ulz-mod-listing-content {
	color: var(--lcr-color-body);
	font-size: var(--lcr-web-type-body-large-font-size);
	line-height: var(--lcr-web-type-body-large-line-height);
}

/* The details' lists: an ink dot in place of Font Awesome's circle (listing.css `.ulz--style-list li:before`). */
html body .ulz-tax-list.ulz--style-list li {
	padding-left: var(--lcr-space-20);
	font-size: var(--lcr-web-type-body-font-size);
}

html body .ulz-tax-list.ulz--style-list li::before {
	content: "";
	width: var(--lcr-size-dot);
	height: var(--lcr-size-dot);
	border-radius: var(--lcr-radius-pill);
	background-color: currentColor;
	font-size: 0;
}

/* The subjects: outlined pills, as the cards' chips (Utillz's gray-filled rectangles with 4px corners go). */
html body .ulz-listing-tags li a {
	display: inline-block;
	padding: var(--lcr-space-6) var(--lcr-space-14);
	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-web-type-small-font-size);
	line-height: var(--lcr-web-type-small-line-height);
	text-decoration: none;
}

/* The gallery block ("More photos"): the tile's rounded corners. */
html body .ulz-single-content .ulz--gallery-lighbox .ulz--image,
html body .ulz-single-content .ulz--gallery-lighbox img {
	border-radius: var(--lcr-radius-tile);
	overflow: hidden;
}

/* Its pictures are links whose ring the block's clip would cut off (Heilz's `.ulz-cover-adaptive` hides their outer
   4px: `.ulz--images { margin: -4px }`, the space-4 token here): the ring is drawn inside the visible picture, an ink
   line on a white band, so it shows on any image (D7, WEB-622). The offset holds at all times, so that the vendor's
   `transition: all` does not slide the ring in from outside. */
html body .ulz-single-content .ulz--gallery-lighbox a.ulz--image {
	outline-offset: calc(-1 * (var(--lcr-space-4) + 2 * var(--lcr-web-focus-ring)));
}

html body .ulz-single-content .ulz--gallery-lighbox a.ulz--image:focus-visible {
	box-shadow: inset 0 0 0 calc(var(--lcr-space-4) + var(--lcr-web-focus-ring)) var(--lcr-color-on-ink);
	transition: none;
}

/* The author's box, in the content and in the sidebar: a light panel, the actions as pills. */
html body .ulz-author {
	padding: var(--lcr-space-24);
	border: 0;
	border-radius: var(--lcr-radius-panel);
	background-color: var(--lcr-color-panel);
	box-shadow: none;
	color: var(--lcr-color-ink);
}

/* The same box in the sidebar (Utillz's contact action: 8px corners and an outline): a panel, the name in ink and
   semibold, "Send message" with the app's send icon. */
html body .ulz-listing-sidebar .ulz-mod-action-contact {
	padding: var(--lcr-space-24);
	border-radius: var(--lcr-radius-panel);
	background-color: var(--lcr-color-panel);
	box-shadow: none;
}

html body .ulz-listing-sidebar .ulz-action-author .ulz--name {
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-title-font-size);
	font-weight: var(--lcr-web-type-title-font-weight);
	letter-spacing: var(--lcr-web-type-title-letter-spacing);
	line-height: var(--lcr-web-type-title-line-height);
}

html body .ulz-action-contact .ulz-action-footer .ulz-button {
	justify-content: center;
}

html body .ulz-action-contact .ulz-action-footer .ulz-button::before {
	content: "";
	flex: none;
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
	background-color: currentColor;
	-webkit-mask: url("../icons/send.svg") center / contain no-repeat;
	mask: url("../icons/send.svg") center / contain no-repeat;
}

html body .ulz-author .ulz-button,
html body .ulz-mod-listing-reviews .ulz-button,
html body .ulz-listing-sidebar .ulz-button {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-8);
	min-height: var(--lcr-size-control);
	padding: 0 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);
}

/* The icon of these pills sits on the label's middle line, as the label does (design.css). */
html body :is(.ulz-author, .ulz-mod-listing-reviews, .ulz-listing-sidebar) .ulz-button > i {
	margin-top: 0 !important; /* Utillz core.css's `.ulz-button>i { margin-top: 5px !important }` */
}

/* The reviews: the rating's word in ink (Utillz's stylesheet paints it). */
html body .ulz-mod-listing-reviews .score-description {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

/* The rating bars' width, which templates/single/reviews/stats.php passes as a custom property (it was inline). */
html body .ulz-reviews-stat-bar .ulz-progress-bar {
	width: var(--lcr-width, 0);
}

/* The report link. */
html body .ulz-action-report a.ulz--label {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-6);
	color: var(--lcr-color-muted);
	font-size: var(--lcr-web-type-small-font-size);
}

/* Related and "More from this author": the section type of the web. */
html body .ulz-related h4 {
	margin: 0 0 var(--lcr-space-24);
	font-size: var(--lcr-web-type-section-font-size);
	font-weight: var(--lcr-web-type-section-font-weight);
	letter-spacing: var(--lcr-web-type-section-letter-spacing);
	line-height: var(--lcr-web-type-section-line-height);
}

/* The modules' icon-font glyphs are the line icons through assets/js/line-icons.js and line-icons.css (D6). */

/* ------------------------------------------------------------------------------------------- the quick view */

html body .ulz-modal-listing-preview .ulz-preview-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

html body .ulz-listing-preview-skeleton .lcr-icon {
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	color: var(--lcr-color-muted);
}

/* ------------------------------------------------------------------------------------------- the gallery */

html body .ulz-modal-gallery .ulz-gallery-nav span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

html body .ulz-modal-gallery .ulz-modal-image img {
	border-radius: var(--lcr-radius-picture);
}

/* Every modal's close button (templates/modals/close.php): a round icon button, its line icon at the icon size inside.
   Utillz's core.css pads the link 18.5px (`.ulz-modal .ulz-close`, and Heilz's 9px from the top below 768), so in a
   40px box only 3px were left for the icon, and as a flex item the icon shrank to 3 by 20 (a dot, the owner's
   screenshot of 2026-10-12): no padding, a border box, and neither the link nor the icon shrinks (ADR-0023, D6; the
   "Icons are SVG" rule of docs/design/README.md). The sign-in modal, which had its own close, is gone (ADR-0039).
   It sits inside the modal's corner, at the space-12 token from both edges: below 992px Utillz makes every modal
   fill the screen, and the gallery's and the quick view's always do, so a button outside the corner would be off it. */
html body .ulz-modal .ulz-close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--lcr-size-control);
	height: var(--lcr-size-control);
	padding: 0;
	top: var(--lcr-space-12);
	right: var(--lcr-space-12);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
}

html body .ulz-modal .ulz-close .lcr-icon {
	flex: none;
}

/* A card modal (every one but the gallery's and the quick view's, which fill the screen) is its own box from
   the desktop token up, 700px wide in the middle of the page: its close button straddles the card's top-right corner,
   the space-12 token outside both edges. Nothing clips it: the modal is fixed in the page, with no overflow of its own. */
@media (min-width: 1200px) {

	html body .ulz-modal:not(.ulz-modal-gallery, .ulz-modal-listing-preview) .ulz-close {
		top: calc(-1 * var(--lcr-space-12));
		right: calc(-1 * var(--lcr-space-12));
	}
}

/* ------------------------------------------------------------------------------------------- phone and tablet */

/* Below 768 Share and Download show only their icon (Utillz's `.ulz--hide-lt-sm`): circles too. */
@media (max-width: 767.98px) {

	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a[data-action="share"],
	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action a[data-action="download-toggle"] {
		width: var(--lcr-size-control);
		padding: 0;
	}

	/* Utillz's listing.css makes the author's buttons blocks here (`.ulz-author .ulz--action .ulz-button`, three
	   classes), where the label rode high and the icon low: as wide, but laid out as the pills (WEB-652). */
	html body .ulz-author .ulz--action .ulz-button {
		display: flex;
		justify-content: center;
	}
}

@media (max-width: 1199.98px) {

	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--inner {
		padding: var(--lcr-space-12) 0;
	}

	/* The artwork itself, at the page's edge, with the picture token's corners as the gallery block's pictures look, no
	   gray panel around it. */
	html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec {
		margin: 0 var(--lcr-space-16);
		padding: 0;
		border-radius: var(--lcr-radius-picture);
		background: none;
	}

	html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec img[data-replace="image"],
	html body .ulz-cover.ulz-cover-gallery #ulz_gallery_sec video {
		border-radius: var(--lcr-radius-picture);
	}

	/* The artwork's title, large, under the image, with the type's name in muted gray, as the app's artwork screen
	   (title 28, ADR-0018 D2); the small title beside the avatar, which it replaces, is hidden. */
	html body .ulz-cover .lcr-artwork-intro {
		display: block;
		margin: var(--lcr-space-20) var(--lcr-space-16) 0;
	}

	html body .ulz-cover .lcr-artwork-title {
		margin: 0;
		color: var(--lcr-color-ink);
		font-size: var(--lcr-type-display-font-size);
		font-weight: var(--lcr-type-display-font-weight);
		letter-spacing: var(--lcr-type-display-letter-spacing);
		line-height: var(--lcr-type-display-line-height);
		overflow-wrap: anywhere;
	}

	html body .ulz-cover .lcr-artwork-type {
		margin: var(--lcr-space-4) 0 0;
		color: var(--lcr-color-muted);
		font-size: var(--lcr-type-body-font-size);
		line-height: var(--lcr-type-body-line-height);
	}

	html body .ulz-cover .lcr-artwork-price {
		align-items: flex-start;
		margin: var(--lcr-space-12) var(--lcr-space-16) 0;
	}

	html body:has(.lcr-artwork-intro) .ulz-cover-top .ulz--title {
		display: none !important; /* Heilz theme.css: `.ulz-ellipsis { display: block !important }` below 768px */
	}

	/* The description and the details flush with their titles (Heilz indents them 10px, and the lists 20px more for a dot
	   the app's details do not have). */
	html body .ulz-single-content .ulz-mod-listing-content .ulz--content,
	html body .ulz-single-content .ulz-mod-listing-content .ulz--content p,
	html body .ulz-tax-list.ulz--style-list li p {
		margin-left: 0;
		margin-right: 0;
	}

	html body .ulz-tax-list.ulz--style-list li {
		padding-left: 0;
	}

	html body .ulz-tax-list.ulz--style-list li::before {
		display: none;
	}

	/*
	 * "Send message", the Contact action's own link, as the app's bar at the foot of the screen: fixed above the bottom
	 * bar when the page has one (under it in the stack, z-index 120, so the bar and the menu above it are never hidden),
	 * at the foot of the screen otherwise (`--lcr-mobile-bar-room`, layout-frame.css), as wide as the screen
	 * inside the gutter. It is the vendor's own element under the vendor's own conditions, only placed; the page
	 * leaves room under its last line.
	 */
	html body .ulz-action-contact .ulz-action-footer {
		position: fixed;
		right: 0;
		bottom: var(--lcr-mobile-bar-room);
		left: 0;
		z-index: 119;
		padding: var(--lcr-space-12) var(--lcr-web-gutter-phone);
		background-color: var(--lcr-color-background);
		box-shadow: inset 0 var(--lcr-size-hairline) 0 var(--lcr-color-divider);
	}

	html body .ulz-action-contact .ulz-action-footer .ulz--action,
	html body .ulz-action-contact .ulz-action-footer .ulz-button {
		display: flex;
		width: 100%;
		min-height: var(--lcr-size-control); /* the buttons' one height (WEB-652) */
		box-sizing: border-box;
		margin: 0; /* Heilz's phone margin of the action's row */
	}

	html body:has(.ulz-action-contact .ulz-action-footer) .ulz-footer {
		padding-bottom: calc(var(--lcr-mobile-bar-room) + var(--lcr-size-control) + 2 * var(--lcr-space-12) + var(--lcr-web-gutter-phone));
	}

	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--title {
		font-size: var(--lcr-type-title-font-size);
		line-height: var(--lcr-type-title-line-height);
	}

	html body .ulz-single-content .ulz-mod-listing > h4,
	html body .ulz-single-content .ulz-mod-heading,
	html body .ulz-listing-sidebar .ulz-mod-heading {
		font-size: var(--lcr-type-section-font-size);
		line-height: var(--lcr-type-section-line-height);
	}

	html body .ulz-single-content .ulz-mod-listing-content {
		font-size: var(--lcr-type-body-large-font-size);
		line-height: var(--lcr-type-body-large-line-height);
	}

	html body .ulz-related h4 {
		font-size: var(--lcr-type-section-font-size);
		line-height: var(--lcr-type-section-line-height);
	}
}