/*
 * Front-end styles for bsm-breadcrumb-bar.
 *
 * Компактная полоса под topnav. Используется в page-detail.php.
 * Markup: ../template-parts/breadcrumbs.php
 * Source: ../files/10_Projects/bsm_company/05_Brand/design/04-library.html (.breadcrumb-bar)
 */

.bsm-breadcrumb-bar {
	background: var(--bg-soft);
	border-bottom: var(--hairline);
	padding: 10px 32px;
	font-family: inherit;
}

.bsm-breadcrumb-bar__wrap {
	max-width: var(--container-max);
	margin: 0 auto;
}

.bsm-breadcrumb-bar .breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 20px;
	color: var(--gray);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsm-breadcrumb-bar .breadcrumbs__item {
	display: inline-block;
	line-height: 20px;
	margin: 0;
	padding: 0;
}

.bsm-breadcrumb-bar .breadcrumbs a,
.bsm-breadcrumb-bar .breadcrumbs span {
	display: inline-block;
	line-height: 20px;
	font-weight: 400;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

.bsm-breadcrumb-bar .breadcrumbs__item + .breadcrumbs__item::before {
	content: "›";
	color: var(--line-strong);
	font-size: 14px;
	margin-right: 8px;
}

.bsm-breadcrumb-bar .breadcrumbs a {
	color: var(--gray);
	text-decoration: none;
}

.bsm-breadcrumb-bar .breadcrumbs a:hover {
	color: var(--accent-strong);
	text-decoration: none;
}

.bsm-breadcrumb-bar .breadcrumbs .current {
	color: var(--navy);
	font-weight: 400;
}

@media (max-width: 900px) {
	.bsm-breadcrumb-bar {
		padding: 8px 16px;
	}
}