/* The site's one breadcrumb bar (includes/functions-crumb-bar.php).
 *
 * The look of the shop's bar, which is the reference (Mark, 2026-10-13): resources/scss/woocommerce/single-product/
 * _before-main-content.scss (the slim full-width row with the header's hairline under it) and global/_breadcrumb.scss
 * (red semibold links, grey current page, chevrons, one line that scrolls on phones). The shop's own stylesheet is not
 * loaded on pillar pages, guides, posts or the FAQ-style pages, so the same rules live here for them.
 * Colours come from the theme's palette variables. */

.crumb-bar {
	padding: 0;
	border-bottom: 1px solid var(--seo-hairline, #ddd4d0); /* full viewport width: it separates the white bar from the beige page body (Mark, 2026-10-17) */
}

/* One breadcrumb box on every page (Mark, 2026-10-16): the header's content width; the hairline sits under the trail only. */
.crumb-bar > .wrapper {
	max-width: calc(1440px + 80px) !important;
}

.crumb-bar__nav {
	padding: 4px 0;
}

@media (min-width: 1024px) {
	.crumb-bar__nav {
		padding: 8px 0;
	}
}

.crumb-bar__nav,
.top-bar-navigation .woocommerce-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 !important;
	font-size: 12px;
	line-height: 1.6;
	color: var(--color-grey-500, #767676);
}

@media (min-width: 1024px) {
	.crumb-bar__nav,
	.top-bar-navigation .woocommerce-breadcrumb {
		font-size: 14px;
	}
}

.crumb-bar__nav *,
.top-bar-navigation .woocommerce-breadcrumb * {
	vertical-align: text-bottom;
}

.crumb-bar__nav svg,
.top-bar-navigation .woocommerce-breadcrumb svg {
	flex: none;
	margin: 0 6px;
}

@media (min-width: 1280px) {
	.crumb-bar__nav svg,
	.top-bar-navigation .woocommerce-breadcrumb svg {
		margin: 0 12px;
	}
}

.crumb-bar__nav a,
.top-bar-navigation .woocommerce-breadcrumb a {
	display: inline-block;
	min-height: 24px;
	padding: 2px 0;
	font-weight: 600;
	color: var(--color-red, #c8102e) !important;
	text-decoration: none;
}

.crumb-bar__nav a:hover,
.top-bar-navigation .woocommerce-breadcrumb a:hover {
	color: var(--color-dark-red, #991026) !important;
}

.crumb-bar__current,
.top-bar-navigation .woocommerce-breadcrumb__current {
	display: inline-block;
	min-height: 24px;
	padding: 2px 0;
	color: var(--color-grey-500, #767676);
}

/* Phones: one line, scrolling sideways when the trail is long, so it never costs a second row. */
@media (max-width: 767px) {
	.crumb-bar__nav {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.crumb-bar__nav::-webkit-scrollbar {
		display: none;
	}
}


/* The trail's text sits in the middle of its 24px boxes (Mark, 2026-10-17). */
.crumb-bar__nav a,
.crumb-bar__current,
.top-bar-navigation .woocommerce-breadcrumb a,
.top-bar-navigation .woocommerce-breadcrumb__current {
	display: inline-flex !important;
	align-items: center;
	line-height: 1.2;
	padding-top: 0;
	padding-bottom: 0;
}