/*
 * Page-title bar (design-main 3.6, design-shop 5.4): full-bleed dark sauna
 * photo, centred white title, breadcrumb line under it (invisible on the main
 * site but still 24px tall, visible on the shop). Touches the header
 * (-40px) and keeps 40px to the content below.
 */

.lvt-page-title {
	margin-top: calc(-1 * var(--lvt-main-gap));
	margin-bottom: var(--lvt-main-gap);
	padding: 41px 0;
	background: #0A0A0A url("../img/page-title-bg.webp") center / cover no-repeat;
	color: rgba(255, 255, 255, .8);
	text-align: center;
}

.lvt-page-title__inner {
	margin-bottom: -10px;
}

.lvt-page-title__title {
	margin: 0 0 10px;
	color: #FFFFFF;
	font-family: var(--lvt-font-heading);
	font-size: 44px;
	font-weight: 600;
	line-height: 52.8px;
	letter-spacing: -0.01px;
}

.lvt-page-title__crumbs {
	display: block;
	height: var(--lvt-lh-body);
	margin-bottom: 10px;
	font-family: var(--lvt-font-body);
	font-size: 16px;
	line-height: var(--lvt-lh-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Live shop computes .7 for the links (design-shop 5.3 says .8). Main: crumbs are hidden. */
.lvt-site-shop .lvt-page-title__crumb {
	color: rgba(255, 255, 255, .7);
}

a.lvt-page-title__crumb:hover {
	color: #FFFFFF;
}

.lvt-page-title__crumb.is-current {
	color: #FFFFFF;
	font-weight: 600;
}

.lvt-page-title__sep {
	margin: 0 8px;
}

/* Main site: breadcrumbs exist but are not shown (live keeps the line height). */
.lvt-site-main .lvt-page-title__crumbs {
	font-size: 0;
}

.lvt-page-title--no-crumbs .lvt-page-title__inner {
	margin-bottom: 0;
}

.lvt-page-title--no-crumbs .lvt-page-title__title {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.lvt-page-title {
		padding: 15px 0;
	}

	.lvt-page-title__title {
		font-size: 36px;
		line-height: 43.2px;
	}
}

@media (max-width: 767px) {
	.lvt-page-title__crumbs {
		font-size: 14px;
	}
}