/**
 * Хлебные крошки — единый компонент для всего сайта (KOY-2638).
 * Макет: Figma 92:1512. Печатает их шапка (parts/home/header.php), поэтому
 * на любой странице они стоят сразу под ней и на одном и том же расстоянии —
 * эталон отступа взят со страницы «О компании».
 *
 * Свойства продублированы явно (list-style, margin, text-decoration):
 * на старых страницах рядом работают стили Shopkeeper, и без сброса
 * список получил бы маркеры и отступы темы.
 */

.sm-crumbs {
	padding-top: 14px;
}

.sm-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sm-font-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sm-ink);
}

.sm-crumbs .sm-crumbs__item {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-crumbs .sm-crumbs__item::before,
.sm-crumbs .sm-crumbs__item::marker {
	content: none;
}

.sm-crumbs .sm-crumbs__link {
	color: #9c9c9c;
	text-decoration: none;
	border: 0;
	transition: color 0.2s ease;
}

.sm-crumbs .sm-crumbs__link:hover,
.sm-crumbs .sm-crumbs__link:focus {
	color: var(--sm-ink);
	text-decoration: none;
}

/*
 * Уголок-разделитель в макете нарисован в поле 10x10, но сам штрих
 * выходит за него: файл 13x13. Сжатие до 10 делало линию тоньше и мельче,
 * поэтому svg рисуем в натуральную величину.
 */
.sm-crumbs__sep {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
}

/*
 * max-width снимаем явно: сброс редизайна (:where(img, svg) { max-width: 100% })
 * ужимал svg до ширины поля 10 и вытягивал уголок. flex-shrink — на случай
 * страниц без этого сброса.
 */
.sm-crumbs__sep svg {
	flex-shrink: 0;
	max-width: none;
	width: 13px;
	height: 13px;
	overflow: visible;
}

.sm-crumbs__item--current {
	color: var(--sm-ink);
}

/*
 * Старые страницы (всё, что рисуется через header.php, — блог, портфолио,
 * каталоги, страницы на WPBakery) лежат в #page_wrapper. У их первых блоков
 * своего верхнего отступа часто нет, и заголовок вплотную подпирал крошки —
 * поэтому воздух под крошками добавляем здесь. На редизайн-шаблонах этой
 * обёртки нет: там отступ задают сами секции, и эталон «О компании»
 * остаётся нетронутым.
 */
#page_wrapper > .sm-crumbs {
	padding-bottom: 28px;
}

@media (max-width: 768px) {
	.sm-crumbs__list {
		font-size: 12px;
		gap: 8px;
	}

	.sm-crumbs .sm-crumbs__item {
		gap: 8px;
	}

	#page_wrapper > .sm-crumbs {
		padding-bottom: 18px;
	}
}