.elementor-35 .elementor-element.elementor-element-bf0b7d0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-208c8c8 );--border-color:var( --e-global-color-208c8c8 );--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;--z-index:100;}.elementor-35 .elementor-element.elementor-element-bf0b7d0:not(.elementor-motion-effects-element-type-background), .elementor-35 .elementor-element.elementor-element-bf0b7d0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2880533 );}.elementor-35 .elementor-element.elementor-element-4b9034c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 20px;--row-gap:0px;--column-gap:20px;--flex-wrap:nowrap;--padding-top:14px;--padding-bottom:14px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-35 .elementor-element.elementor-element-3401f2f{text-align:start;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-menu-toggle{margin-left:auto;}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );padding-left:0px;padding-right:0px;padding-top:6px;padding-bottom:6px;}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-primary );}.elementor-35 .elementor-element.elementor-element-2430a74 .e--pointer-framed .elementor-item:before,
					.elementor-35 .elementor-element.elementor-element-2430a74 .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-primary );}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-primary );}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before,
					.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:var( --e-global-color-primary );}.elementor-35 .elementor-element.elementor-element-2430a74 .e--pointer-framed .elementor-item.elementor-item-active:before,
					.elementor-35 .elementor-element.elementor-element-2430a74 .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:var( --e-global-color-primary );}.elementor-35 .elementor-element.elementor-element-2430a74{--e-nav-menu-horizontal-menu-item-margin:calc( 8px / 2 );}.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:8px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-35 .elementor-element.elementor-element-0721685 .elementor-button{background-color:#FFC83E;font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );fill:#504D4D;color:#504D4D;border-radius:9999px 9999px 9999px 9999px;padding:12px 24px 12px 24px;}.elementor-35 .elementor-element.elementor-element-0721685 .elementor-button:hover, .elementor-35 .elementor-element.elementor-element-0721685 .elementor-button:focus{background-color:#F1B827;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-35 .elementor-element.elementor-element-4b9034c{--content-width:1140px;}}/* Start custom CSS for nav-menu, class: .elementor-element-2430a74 *//* ---------------------------------------------------------------
   DESKTOP BAR — the Xero Blog pattern (owner reference, 2026-08-22).

   Five category labels of 17-19 characters, plus the Abbpay Home bridge,
   plus logo and CTA, on one 1140px row. Long labels WRAP TO TWO LINES
   rather than the type being shrunk to fit; max-width forces the break,
   not a <br>, so labels stay plain text and follow term renames.

   🔴 THE FLEX CONTAINER IS THE <ul>, NOT THE <nav>.
   Elementor renders:
     <nav class="elementor-nav-menu--main ... --layout-horizontal">
       <ul class="elementor-nav-menu">   <-- display:flex; flex-wrap:wrap

   A `flex-wrap: nowrap` on .elementor-nav-menu--main targets the <nav>
   wrapper and does NOTHING. It must go on the <ul>, as below, where it
   computes to (0,5,0) against Elementor's own (0,2,0) wrap rule.

   SPACING: menu_space_between emits
   `--e-nav-menu-horizontal-menu-item-margin: calc(N / 2)` applied to both
   adjacent sides, so the control value IS the real gap. It is 8px.

   Poppins measures ~0.675em per character here (calibrated against a
   screenshot), not the 0.55em textbook figure. At 14px with a 120px cap
   the row lands near 985px of 1100 available.

   Font size lives here, not in the Typography panel — a globally-bound
   typography group emits only font-family and font-weight.
   --------------------------------------------------------------- */
.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap;
	align-items: center;
}

.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-nav-menu > li {
	flex: 0 0 auto;
}

.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item {
	font-size: 14px;
	line-height: 1.25;
	white-space: normal;
	text-align: center;
	max-width: 120px;
	padding-left: 0;
	padding-right: 0;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* Tightest desktop band, just before the hamburger takes over at <=1024. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--main .elementor-item {
		font-size: 13px;
		max-width: 100px;
	}
}

/* Hamburger panel - brand styled: Poppins, brand-black links, purple active.
   Full width, left aligned - the opposite of the bar above. These resets
   matter: without them the panel inherits the centred, width-capped bar
   styling and renders as narrow stubs. */

.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--dropdown {
	background-color: var(--e-global-color-2880533);
	border-top: 1px solid var(--e-global-color-208c8c8);
}

.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--dropdown a {
	color: var(--e-global-color-text);
	font-size: 16px;
	padding: 14px 20px;
	text-align: left;
	max-width: none;
}

.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--dropdown a:hover,
.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-35 .elementor-element.elementor-element-2430a74 .elementor-nav-menu--dropdown a.highlighted {
	color: var(--e-global-color-primary);
	background-color: var(--e-global-color-31b6cc2);
}

.elementor-35 .elementor-element.elementor-element-2430a74 div.elementor-menu-toggle {
	color: var(--e-global-color-text);
}

.elementor-35 .elementor-element.elementor-element-2430a74 div.elementor-menu-toggle:hover {
	color: var(--e-global-color-primary);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0721685 *//* Wrapping the nav to two lines freed enough room that the CTA no longer
   has to scale - it sits at a fixed, readable 15px. Colours are the
   owner's; only sizing is set here. */
.elementor-35 .elementor-element.elementor-element-0721685 .elementor-button {
	font-size: 15px;
	white-space: nowrap;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b9034c *//* Abbpay hub header - row layout.

   NOTE ON FONT SIZE: this container used to hard-code
   `.hub-header__nav .elementor-item { font-size: 15px }` and a matching 15px
   on the CTA. Both were removed on 2026-08-22. With five long category labels
   on the bar, the nav and CTA now scale with the viewport via clamp(), set on
   those widgets themselves. A fixed size here sits at the same specificity
   (0,4,0) and would fight the clamp depending purely on source order.
   Do not put a nav or CTA font-size back in this container. */

.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__logo img {
	height: 38px;
	width: auto;
	display: block;
}

.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__cta .elementor-button {
	line-height: 1;
	white-space: nowrap;
}

/* The CTA's hover colour belongs to the BUTTON widget, which the owner set to
   gold (#F1B827). A `background-color: secondary` hover used to live here and
   won on specificity (0,6,0 vs the widget's 0,5,0), so a gold pill flipped to
   purple on hover. Removed - do not reintroduce. */

/* Tightest desktop band: narrowest the full bar ever gets before the
   hamburger takes over at <=1024. Buy back room from the logo and gap. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-35 .elementor-element.elementor-element-4b9034c {
		gap: 14px;
	}

	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__logo img {
		height: 32px;
	}
}

/* Tablet and below: the CTA pill stays on the bar, ordered before the burger,
   never buried inside the hamburger panel. */
@media (max-width: 1024px) {
	.elementor-35 .elementor-element.elementor-element-4b9034c {
		gap: 12px;
	}

	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__logo {
		order: 1;
	}

	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__cta {
		order: 2;
		margin-left: auto;
	}

	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__nav {
		order: 3;
	}

	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__logo img {
		height: 32px;
	}

	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__cta .elementor-button {
		font-size: 14px;
		padding: 10px 18px;
	}
}

@media (max-width: 767px) {
	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__logo img {
		height: 28px;
	}

	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__cta .elementor-button {
		font-size: 13px;
		padding: 9px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__cta .elementor-button,
	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__nav .elementor-item::after,
	.elementor-35 .elementor-element.elementor-element-4b9034c .hub-header__nav .elementor-item::before {
		transition: none !important;
	}
}/* End custom CSS */