/* Replicated-site rep bar (shown only for visitors who came through a rep link).
   Isolated component above the header; does not touch the nav. Colours are
   variables so the design can be tuned without code changes. */
.abb-rep-bar {
	--abb-rep-bar-bg: var(--e-global-color-vamtam_accent_1, #5e7c9f); /* site accent 1 (footer colour) */
	--abb-rep-bar-text: #ffffff;
	--abb-rep-bar-max: 1350px;
	position: relative;
	z-index: 1;
	width: 100%;
	background: var(--abb-rep-bar-bg);
	color: var(--abb-rep-bar-text);
	box-sizing: border-box;
}

.abb-rep-bar__inner {
	box-sizing: border-box;
	max-width: calc(var(--abb-rep-bar-max) + 32px); /* content edge lines up with the header container */
	min-height: 60px;
	margin: 0 auto;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.abb-rep-bar__photo {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	background: #e9eef4;
	display: block;
}

.abb-rep-bar__photo img,
.abb-rep-bar__photo svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.abb-rep-bar__text {
	display: flex;
	flex-direction: column;
	line-height: 19px;
	min-width: 0;
	font-family: inherit;
}

.abb-rep-bar .abb-rep-bar__name {
	font-size: 14px;
	font-weight: 400;
	line-height: 19px;
	color: var(--abb-rep-bar-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Theme link styles are aggressive; keep the phone looking like the design. */
.abb-rep-bar a.abb-rep-bar__phone,
.abb-rep-bar a.abb-rep-bar__phone:visited,
.abb-rep-bar a.abb-rep-bar__phone:hover,
.abb-rep-bar a.abb-rep-bar__phone:focus {
	font-size: 14px !important;
	font-weight: 400 !important;
	font-family: inherit !important;
	color: var(--abb-rep-bar-text) !important;
	opacity: 0.85;
	text-decoration: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 19px !important;
}

.abb-rep-bar a.abb-rep-bar__phone:hover,
.abb-rep-bar a.abb-rep-bar__phone:focus-visible {
	opacity: 1;
	text-decoration: underline !important;
}

@media (max-width: 767px) {
	.abb-rep-bar__inner {
		min-height: 52px;
		padding: 6px 16px;
	}
	.abb-rep-bar__photo {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
	}
	.abb-rep-bar .abb-rep-bar__name { font-size: 13px; line-height: 17px; }
	.abb-rep-bar a.abb-rep-bar__phone { font-size: 13px !important; line-height: 17px !important; }
}

/* ---------------------------------------------------------------------------
   Placement. The JS moves the bar inside the theme's sticky header container
   (desktop and mobile), so it sticks, hides and reappears with the nav. When
   the header is fixed and its spacer doesn't cover the bar, the JS sets
   --abb-rep-pad and the page is pushed down by that amount.
   --------------------------------------------------------------------------- */
.abb-rep-bar.abb-rep-bar--in-header {
	order: -1;
	flex: 0 0 auto;
	align-self: stretch;
	max-width: none;
}
html.abb-has-rep-bar body {
	padding-top: var(--abb-rep-pad, 0px) !important;
}

/* Elementor's sticky header leaves a hidden copy of itself (the spacer) in the
   page. Make sure nothing inside that copy can show through, e.g. a second cart
   icon drifting up while scrolling. */
.elementor-sticky__spacer,
.elementor-sticky__spacer * {
	visibility: hidden !important;
}