/* Page banner (shop, category, brand and single product): title + breadcrumb over an image. */

/* ---------- Banner ---------- */
.bb-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(120px, 11vw, 200px);
	background: linear-gradient(160deg, #1e3340, #0d161d);
	color: #fff;
	overflow: hidden;
}

.bb-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(8, 14, 18, 0.55), rgba(8, 14, 18, 0.1));
}

.bb-banner__inner {
	position: relative;
	z-index: 1;
	padding-block: 20px;
}

.bb-banner__title {
	font-size: clamp(28px, 3.6vw, 52px);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.bb-crumbs {
	margin-top: 6px;
	font-family: var(--bb-font-head);
	font-size: 15px;
	text-transform: uppercase;
}

.bb-crumbs a {
	color: var(--bb-orange);
}

.bb-crumbs a:hover {
	text-decoration: underline;
}

.bb-crumbs__sep {
	margin-inline: 10px;
}