/**
 * S597: the visible trail under the header of the V7 comparison pages
 * (desktop only).
 *
 * A navy band that continues V7's hero. The inner column is the content box
 * of the Home page hero's grid (.wrap.hero__grid, css/home.css): below
 * 1600px, min(1540px, calc(100% - 40px)); from 1600px, 1550px less 48px of
 * padding on each side = 1454px (owner ruling, 4 Nov: the container matches
 * the Home page hero). V7's .wrap carries the same two rules in the page
 * content. If the Home hero grid changes, change the same widths here in
 * the same change.
 *
 * Hidden at 1024px and below (1025px is Woodmart's desktop breakpoint).
 */

.ceo-vs-crumbs {
	background: #0b1d42;
	color: #d6e1f4;
	font-family: Poppins, "CEO Poppins", "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

.ceo-vs-crumbs__in {
	width: min(1540px, calc(100% - 40px));
	margin-inline: auto;
	padding: 12px 0 0;
}

@media (min-width: 1600px) {

	.ceo-vs-crumbs__in {
		width: 1454px;
	}
}

.ceo-vs-crumbs a {
	color: #fff;
	text-decoration: underline;
}

/*
 * Hover, focus and press (owner, 4 Nov: "Breadcrumbs hover needs fixing"):
 * the theme's link hover colour is dark and vanished on the navy band. The
 * links turn V7's hero orange (#ffbb64, 10:1 on #0b1d42); the class pair
 * outranks the theme's hover rules.
 */
.ceo-vs-crumbs .ceo-vs-crumbs__in a:hover,
.ceo-vs-crumbs .ceo-vs-crumbs__in a:focus-visible,
.ceo-vs-crumbs .ceo-vs-crumbs__in a:active {
	color: #ffbb64;
	text-decoration: underline;
}

.ceo-vs-crumbs .ceo-vs-crumbs__in a:focus-visible {
	outline: 2px solid #ffbb64;
	outline-offset: 2px;
}

.ceo-vs-crumbs__sep {
	margin: 0 0.6em;
}

@media (max-width: 1024px) {

	.ceo-vs-crumbs {
		display: none;
	}
}