/* 27.1 Global navy header — scoped to the active Elementor header template
(.elementor-location-header), so it restyles the site-wide header bar without
touching page bodies or the footer. Pairs with the gold-badge logo (logo-gold.png)
swapped into the header image widget. Palette matches the home facelift:
navy #15233d / #1a2c4a, gold #c89a44 / #e3bd6a, light text #eef1f6. */
/* --- Header bar background: navy on the top-level containers + the header itself --- */
.elementor-location-header,
.elementor-location-header > .e-con.e-parent,
.elementor-location-header > .e-con.e-parent > .e-con-inner {
background-color: #15233d !important;
background-image: none !important;
}
/* --- Main navigation links --- */
.elementor-location-header .elementor-nav-menu .elementor-item {
color: #eef1f6 !important;
font-weight: 600;
transition: color .15s ease;
}
.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item:focus,
.elementor-location-header .elementor-nav-menu .current-menu-item > .elementor-item,
.elementor-location-header .elementor-nav-menu .current-menu-ancestor > .elementor-item {
color: #e3bd6a !important;
}
.elementor-location-header .elementor-item .sub-arrow svg { fill: currentColor; }
/* underline pointer accent -> gold */
.elementor-location-header .e--pointer-underline .elementor-item:before,
.elementor-location-header .e--pointer-underline .elementor-item:after,
.elementor-location-header .e--pointer-double-line .elementor-item:before,
.elementor-location-header .e--pointer-double-line .elementor-item:after {
background-color: #c89a44 !important;
}
/* --- Dropdown submenus --- */
.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header .elementor-nav-menu .sub-menu {
background-color: #1a2c4a !important;
border-top: 2px solid #c89a44;
}
.elementor-location-header .elementor-sub-item {
color: #eef1f6 !important;
transition: background .12s ease, color .12s ease;
}
.elementor-location-header .elementor-sub-item:hover,
.elementor-location-header .elementor-sub-item:focus,
.elementor-location-header .elementor-sub-item.highlighted,
.elementor-location-header .current-menu-item > .elementor-sub-item {
color: #0d1626 !important;
background-color: #e3bd6a !important;
}
/* --- Logged-in status text --- */
/* When signed in, the [login_status] shortcode outputs a plain
Currently logged in as Name
(no .loginsignup wrapper),
which would otherwise render in the default dark color and be unreadable on navy. */
.elementor-location-header .elementor-shortcode p {
color: #eef1f6 !important;
margin: 0;
font-size: .9rem;
line-height: 1.25;
}
.elementor-location-header .elementor-shortcode strong { color: #e3bd6a !important; }
/* --- Login / Sign Up buttons --- */
.elementor-location-header .loginsignup { display: flex; gap: 10px; align-items: center; }
.elementor-location-header .loginsignup .loginBtn {
display: inline-block;
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 700;
font-size: .82rem;
line-height: 1;
padding: .62em 1.15em;
border-radius: 3px;
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Login = ghost (outline). a.loginBtn + !important to beat the DB-stored .loginBtn rule. */
.elementor-location-header .loginsignup a.loginBtn:first-child {
color: #eef1f6 !important;
border: 1.5px solid rgba(255,255,255,.45) !important;
background: transparent !important;
}
.elementor-location-header .loginsignup a.loginBtn:first-child:hover {
border-color: #e3bd6a !important;
color: #e3bd6a !important;
}
/* Sign Up = solid gold CTA (matches the hero gold buttons) */
.elementor-location-header .loginsignup a.loginBtn:last-child {
background: #c89a44 !important;
color: #0d1626 !important;
border: 1.5px solid #c89a44 !important;
}
.elementor-location-header .loginsignup a.loginBtn:last-child:hover {
background: #e3bd6a !important;
border-color: #e3bd6a !important;
color: #0d1626 !important;
}
/* Logged-in identity line — "Logged in as " (admins/store managers impersonating
customers rely on seeing the current user at a glance). */
.elementor-location-header .rbp-account { flex-wrap: wrap; }
.elementor-location-header .rbp-whoami {
color: #aeb9cc !important;
font-size: .82rem;
line-height: 1.2;
white-space: nowrap;
margin-right: 2px;
}
.elementor-location-header .rbp-whoami strong { color: #e3bd6a; font-weight: 700; }
/* Logged-in (.rbp-account): My Account = gold primary, Log Out = ghost.
Natural reading order, so override the default first/last treatment above. */
.elementor-location-header .rbp-account a.loginBtn:first-of-type {
background: #c89a44 !important;
color: #0d1626 !important;
border: 1.5px solid #c89a44 !important;
}
.elementor-location-header .rbp-account a.loginBtn:first-of-type:hover {
background: #e3bd6a !important;
border-color: #e3bd6a !important;
color: #0d1626 !important;
}
.elementor-location-header .rbp-account a.loginBtn:last-of-type {
background: transparent !important;
color: #eef1f6 !important;
border: 1.5px solid rgba(255,255,255,.45) !important;
}
.elementor-location-header .rbp-account a.loginBtn:last-of-type:hover {
background: transparent !important;
border-color: #e3bd6a !important;
color: #e3bd6a !important;
}
/* Logged in with a single account button: make it the gold primary (overrides the
first/last-of-type rules above, which both match when there is only one button). */
.elementor-location-header .rbp-account a.loginBtn:only-of-type {
background: #c89a44 !important;
color: #0d1626 !important;
border: 1.5px solid #c89a44 !important;
}
.elementor-location-header .rbp-account a.loginBtn:only-of-type:hover {
background: #e3bd6a !important;
border-color: #e3bd6a !important;
color: #0d1626 !important;
}
/* --- Cart toggle --- */
.elementor-location-header .elementor-menu-cart__toggle_button {
background: transparent !important;
color: #eef1f6 !important;
}
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-text,
.elementor-location-header .elementor-menu-cart__toggle_button .woocommerce-Price-amount,
.elementor-location-header .elementor-menu-cart__toggle_button bdi {
color: #eef1f6 !important;
}
.elementor-location-header .elementor-menu-cart__toggle_button svg { fill: #eef1f6 !important; }
.elementor-location-header .elementor-menu-cart__toggle_button:hover,
.elementor-location-header .elementor-menu-cart__toggle_button:hover .elementor-button-text,
.elementor-location-header .elementor-menu-cart__toggle_button:hover .woocommerce-Price-amount {
color: #e3bd6a !important;
}
.elementor-location-header .elementor-menu-cart__toggle_button:hover svg { fill: #e3bd6a !important; }
/* qty bubble -> gold */
.elementor-location-header .elementor-button-icon-qty {
background-color: #c89a44 !important;
color: #0d1626 !important;
}
/* --- Standalone icons (search / account) --- */
.elementor-location-header .elementor-widget-icon .elementor-icon,
.elementor-location-header .elementor-widget-icon .elementor-icon i,
.elementor-location-header .elementor-widget-icon .elementor-icon svg {
color: #eef1f6 !important;
fill: #eef1f6 !important;
transition: color .15s ease, fill .15s ease;
}
.elementor-location-header .elementor-widget-icon .elementor-icon:hover,
.elementor-location-header .elementor-widget-icon .elementor-icon:hover i,
.elementor-location-header .elementor-widget-icon .elementor-icon:hover svg {
color: #e3bd6a !important;
fill: #e3bd6a !important;
}
/* --- Icon sizing: enlarge the cart + search icons so they balance the taller
My Account / Log Out buttons (default ~20px looked dwarfed beside them). --- */
.elementor-location-header .elementor-widget-icon .elementor-icon { font-size: 28px !important; }
.elementor-location-header .elementor-widget-icon .elementor-icon svg { width: 28px !important; height: 28px !important; }
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon svg { width: 28px !important; height: 28px !important; }
/* The whole right-side cluster uses fixed-width containers that can't fit the wider
logged-in account UI (Logged-in-as + My Account + Log Out), which overflows and
squeezes the cart + search into each other. Size every cell + wrapper to its content
and stop them shrinking, with consistent gaps. (Header template #4567 — the element
ids are template-specific; re-verify on live at migration.) */
.elementor-location-header .e-con:has( > .elementor-widget-shortcode ) { /* login/account cell (desktop + mobile) */
width: auto !important;
flex: 0 0 auto !important;
margin-right: 20px !important;
}
.elementor-location-header .elementor-element-1f2214f, /* right-cluster wrapper (login + cart/search) */
.elementor-location-header .elementor-element-afeb27c, /* cart + search wrapper */
.elementor-location-header .elementor-element-b985a9d, /* cart cell */
.elementor-location-header .elementor-element-70c8f14 { /* search cell */
width: auto !important;
flex: 0 0 auto !important;
}
.elementor-location-header .elementor-element-1f2214f { align-items: center !important; }
.elementor-location-header .elementor-element-afeb27c { gap: 16px !important; align-items: center !important; }
/* --- Mobile dropdown toggle (hamburger) --- */
.elementor-location-header .elementor-menu-toggle { color: #eef1f6 !important; }
.elementor-location-header .elementor-menu-toggle svg { fill: #eef1f6 !important; }