/* ============================================================
   B2B cross-sell bar  (2026-08-14)
   ------------------------------------------------------------
   Slim bar that sits above the logo on the consumer (B2C) site
   and routes business visitors to the B2B site at the root.

   It is rendered as the FIRST CHILD of .header-wrapper, which is
   position:fixed, so the bar rides with the fixed header instead
   of being overlapped by it. Inner pages already clear the header
   with padding-top:190px, which absorbs the extra height.
   ============================================================ */

.b2b-topbar {
	background-color: #000;
	background-image: none;
	width: 100%;
	position: relative;
	z-index: 1;
}

.b2b-topbar .b2b-topbar-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 9px 20px;
	text-align: center;
}

.b2b-topbar p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #d6d6de;
}

.b2b-topbar a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	padding-bottom: 1px;
	margin-left: 4px;
	transition: border-color 150ms ease, color 150ms ease;
	white-space: nowrap;
}

.b2b-topbar a:hover,
.b2b-topbar a:focus {
	color: var(--plum, #de5e99);
	border-bottom-color: var(--plum, #de5e99);
}

.b2b-topbar a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Hugeicons ArrowRight05 (stroke-rounded), inlined as SVG because the site
   is static HTML with no React/npm build step. It inherits the link colour
   via currentColor, so it turns plum on hover with the rest of the link. */
.b2b-topbar a .b2b-arrow {
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: -3px;
	margin-left: 5px;
	transition: transform 150ms ease;
}

.b2b-topbar a:hover .b2b-arrow,
.b2b-topbar a:focus .b2b-arrow {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.b2b-topbar a .b2b-arrow {
		transition: none;
	}

	.b2b-topbar a:hover .b2b-arrow,
	.b2b-topbar a:focus .b2b-arrow {
		transform: none;
	}
}

/* --- Small screens: drop the lead-in, keep the call to action --- */
@media (max-width: 575px) {
	.b2b-topbar .b2b-topbar-inner {
		padding: 8px 14px;
	}

	.b2b-topbar p {
		font-size: 13px;
	}

	.b2b-topbar .b2b-lead {
		display: none;
	}

	.b2b-topbar a {
		margin-left: 0;
	}
}