/**
 * WooCommerce breadcrumb trail.
 *
 * Restyles .woocommerce-breadcrumb to match the flat, squared design used
 * across the site (see #home-screen in style.css). Parent links are muted
 * and turn accent-red on hover; the current (last) crumb reads darker; the
 * whole trail sits in its own bar separated from the content below.
 *
 * Markup is: <a>Domov</a>&nbsp;/&nbsp;<a>..</a>&nbsp;/&nbsp;Current
 * The "/" separators are plain text nodes we can't select, so they simply
 * inherit the muted trail colour, which reads as a soft grey divider.
 */

/* Legacy aliases — the --bc-* names point at the global design tokens
   (design-system/tokens.css). New code should use --vk-* directly. */
.woocommerce-breadcrumb {
	--bc-ink: var(--vk-ink);
	--bc-ink-soft: var(--vk-ink-soft);
	--bc-accent: var(--vk-accent);
	--bc-border: var(--vk-border);

	margin: 0 0 24px;
	padding: 12px 0;
	border-bottom: 1px solid var(--bc-border);

	/* Trail (and thus the "/" separators) is a soft grey. */
	color: var(--vk-ink-faint);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.4;
	word-spacing: 3px;
}



/* Parent crumbs (links) — readable grey, accent on hover with an underline. */
.woocommerce-breadcrumb a {
	color: var(--bc-ink-soft);
	text-decoration: none;
	transition: color .15s ease;
}
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
	color: var(--bc-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 600px) {
	.woocommerce-breadcrumb {
		padding: 14px 0;
		margin-bottom: 30px;
	}
}