/* Breadcrumbs (хлебные крошки) - современная стилизация
 *
 * Применяется только когда включена опция "Применять современную стилизацию для хлебных крошек"
 * в настройках BulbaSoft Tuning.
 *
 * Поддерживаемые варианты:
 * - WooCommerce: .woocommerce-breadcrumb
 * - Тема / NavXT: .breadcrumb (обёртка-строка, не span)
 */

.bsfttune-breadcrumbs-wrap {
	margin-bottom: 20px;
	display: block;
	width: 100%;
	clear: both;
	box-sizing: border-box;
	/* Горизонтальный скролл если крошки не помещаются */
	overflow-x: auto;
	overflow-y: hidden;
	/* Плавный скролл */
	scroll-behavior: smooth;
	/* Скрыть скроллбар по умолчанию, показать при наведении */
	scrollbar-width: thin;
	scrollbar-color: #ccc #f5f5f5;
	/* direction: rtl добавляется условно через inline-стиль, если включена опция "При горизонтальном скролле показывать конец крошек" */
}

/* Стилизация скроллбара для Webkit (Chrome, Safari, Edge) */
.bsfttune-breadcrumbs-wrap::-webkit-scrollbar {
	height: 6px;
}

.bsfttune-breadcrumbs-wrap::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 3px;
}

.bsfttune-breadcrumbs-wrap::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
	transition: background 0.3s ease;
}

.bsfttune-breadcrumbs-wrap::-webkit-scrollbar-thumb:hover {
	background: #999;
}

.woocommerce-breadcrumb {
	font-size: 15px !important;
	display: flex;
	flex-wrap: nowrap; /* Не переносить на новую строку */
	align-items: center;
	gap: 8px;
	/* Минимальная ширина для контента */
	min-width: min-content;
	/* direction: ltr добавляется условно через inline-стиль вместе с direction: rtl для родителя */
}

/* WooCommerce: сброс clearfix у крошек (::before/::after + display:table), иначе лишний отступ/строка */
.woocommerce .woocommerce-breadcrumb::before,
.woocommerce .woocommerce-breadcrumb::after {
	content: none !important;
	display: none !important;
	clear: none !important;
}

/* ==============================
   Theme breadcrumbs: обёртка-строка (NavXT и т.п.)
   Не span: у Yoast каждый пункт — span.breadcrumb, иначе flex ломается.
   ============================== */
.breadcrumb:not(span) {
	font-size: 15px !important;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: min-content;
}

.breadcrumb:not(span) span {
	display: inline-flex;
	align-items: center;
}

.breadcrumb:not(span) a {
	display: inline-block;
	padding: 6px 12px;
	background: #f5f5f5;
	color: #555;
	border-radius: 3px;
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 14px;
}

.breadcrumb:not(span) a:hover {
	background: #e0e0e0;
	color: #000;
}

/* Последний элемент (текущая страница) */
.breadcrumb:not(span) span:last-child {
	display: inline-block;
	padding: 6px 12px;
	background: #eee;
	color: #000;
	border-radius: 3px;
	font-weight: bold;
	font-size: 14px;
}

/* Yoast внутри nav.woocommerce-breadcrumb — те же селекторы WC + разделители Yoast */
.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb #breadcrumbs,
.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb .breadcrumbs {
	font-size: 15px !important;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: min-content;
}

.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb #breadcrumbs span.breadcrumb,
.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb .breadcrumbs span.breadcrumb {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
}

.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb span.breadcrumb a {
	display: inline-block;
	padding: 6px 12px;
	background: #f5f5f5;
	color: #555;
	border-radius: 3px;
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 14px;
}

.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb span.breadcrumb a:hover {
	background: #e0e0e0;
	color: #000;
}

.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb span.breadcrumb.breadcrumb_last,
.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb span.breadcrumb:last-child {
	font-weight: bold;
	font-size: 14px;
}

.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb span.breadcrumb.breadcrumb_last a,
.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb span.breadcrumb:last-child a {
	background: #eee;
	color: #000;
}

.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb .breadcrumb-separator,
.bsfttune-breadcrumbs-wrap .woocommerce-breadcrumb.bsfttune-yoast-breadcrumb .breadcrumb_separator {
	flex: 0 0 auto;
	color: #999;
	font-size: 14px;
}

/* Скрываем вложенные span-обертки и работаем напрямую с содержимым */
.woocommerce-breadcrumb > span {
	display: contents;
}

.woocommerce-breadcrumb > span > span {
	display: inline-flex;
	align-items: center;
}

/* Стили для ссылок - плашки с фоном */
.woocommerce-breadcrumb a {
	display: inline-block;
	padding: 6px 12px;
	background: #f5f5f5;
	color: #555;
	border-radius: 3px;
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 14px;
}

.woocommerce-breadcrumb a:hover {
	background: #e0e0e0;
	color: #000;
}

/* Активный (последний) элемент - выделение цветом */
.woocommerce-breadcrumb .breadcrumb_last {
	display: inline-block;
	padding: 6px 12px;
	background: #eee;
	color: #000;
	border-radius: 3px;
	font-weight: bold;
	font-size: 14px;
}