/*!
 * r8-header.css — scroll-transformed header ("glass bar").
 *
 * State model: r8-header.js toggles `r8-nav-x` on <html> with hysteresis
 * (engage past 24px, release under 8px — no threshold flicker), and keeps
 * `--r8-nav-h` equal to the visible header bar's current height so the
 * mobile dropdown pins exactly flush under it.
 *
 * Scope: everything is keyed off html.r8-nav-x + .elementor-location-header,
 * so it styles BOTH header rows (desktop + mobile) from this one file and
 * does not depend on Elementor's sticky-effects class at all. Elementor's
 * Sticky (top) setting on the two containers is still what PINS the bar;
 * this file only owns the scrolled-state appearance.
 *
 * Selectors in here were written against the live markup (Sept 2026):
 *   header wrapper  div[data-elementor-type=header].elementor-location-header
 *   bars            > .e-con  (desktop row / mobile row)
 *   cart            .xoo-wsc-sc-cont > .xoo-wsc-cart-trigger > .xoo-wsc-sc-bkcont
 *                     > span.xoo-wsc-sc-bki  + span.xoo-wsc-sc-count
 *   nav (top bar)   .elementor-nav-menu--main
 *   mobile panel    nav.elementor-nav-menu__container.elementor-nav-menu--dropdown
 *                     (NOT bare .elementor-nav-menu--dropdown — Elementor also
 *                     puts that class on every ul.sub-menu hover dropdown)
 *   toggle          .elementor-menu-toggle
 *
 * !important is used deliberately on third-party-owned properties (cart
 * plugin colors, widget-panel colors/backgrounds) to end specificity wars.
 */

/* ── Base state: transitions only (cheap properties — no blur/filter tweens) ── */
.elementor-location-header > .e-con {
	transition: background-color .35s cubic-bezier(.22, .61, .36, 1),
	            min-height .35s cubic-bezier(.22, .61, .36, 1),
	            box-shadow .35s ease;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item,
.elementor-location-header .elementor-button {
	transition: color .35s ease, font-size .35s ease, padding .35s ease,
	            border-color .35s ease, background-color .35s ease;
}
.elementor-location-header .elementor-icon,
.elementor-location-header .elementor-menu-toggle,
.elementor-location-header .elementor-menu-toggle i {
	transition: color .35s ease, font-size .35s ease;
}
.elementor-location-header .elementor-icon svg,
.elementor-location-header .elementor-menu-toggle svg {
	transition: width .35s ease, height .35s ease;
}
.elementor-location-header .elementor-widget-theme-site-logo img {
	transform-origin: left center;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), filter 0s linear .15s;
}
.elementor-location-header .xoo-wsc-sc-cont {
	transform-origin: center;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.elementor-location-header .xoo-wsc-sc-bki {
	transition: color 0s linear .15s;
}

/* ── Scrolled state — the glass bar ─────────────────────────────────────── */
html.r8-nav-x .elementor-location-header > .e-con {
	background-color: rgba(8, 10, 14, .85) !important;
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .30);
	--min-height: 58px;
	min-height: 58px !important;
}
@media (max-width: 767px) {
	html.r8-nav-x .elementor-location-header > .e-con {
		--min-height: 54px;
		min-height: 54px !important;
	}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html.r8-nav-x .elementor-location-header > .e-con {
		background-color: rgba(8, 10, 14, .97) !important;
	}
}

/* Top-bar nav links: white + slightly smaller (dropdown NOT affected) */
html.r8-nav-x .elementor-location-header .elementor-nav-menu--main .elementor-item {
	color: #fff !important;
	fill: #fff !important;
	font-size: .9em;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* Icon widgets (account icon) + hamburger toggle: white + smaller */
html.r8-nav-x .elementor-location-header .elementor-icon,
html.r8-nav-x .elementor-location-header .elementor-menu-toggle,
html.r8-nav-x .elementor-location-header .elementor-menu-toggle i {
	color: #fff !important;
	font-size: 20px;
}
html.r8-nav-x .elementor-location-header .elementor-icon svg,
html.r8-nav-x .elementor-location-header .elementor-menu-toggle svg {
	fill: #fff !important;
	width: 22px;
	height: 22px;
}

/* Cutoff timer widget (desktop row): keep its text legible on the glass */
html.r8-nav-x .elementor-location-header .r8-cutoff,
html.r8-nav-x .elementor-location-header .r8-cutoff * {
	color: #fff;
}

/* Account button: outlined, slimmer */
html.r8-nav-x .elementor-location-header .elementor-button {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .65) !important;
	border-radius: 8px;
	padding: 6px 14px;
}
html.r8-nav-x .elementor-location-header .elementor-button:hover {
	background: rgba(255, 255, 255, .12) !important;
	border-color: #fff !important;
}

/* Cart (side-cart plugin): white glyph + count, scaled to match the icons.
   The glyph is a font icon on span.xoo-wsc-sc-bki — color is the lever. */
html.r8-nav-x .elementor-location-header .xoo-wsc-sc-cont {
	transform: scale(.8);
}
html.r8-nav-x .elementor-location-header .xoo-wsc-sc-bki,
html.r8-nav-x .elementor-location-header .xoo-wsc-sc-count,
html.r8-nav-x .elementor-location-header .xoo-wsc-cart-trigger,
html.r8-nav-x .elementor-location-header .xoo-wsc-sc-bkcont {
	color: #fff !important;
}
/* If the cart icon is ever switched to a custom image/SVG, keep it white too. */
html.r8-nav-x .elementor-location-header .xoo-wsc-sc-cont img,
html.r8-nav-x .elementor-location-header .xoo-wsc-sc-cont svg {
	filter: brightness(0) invert(1);
}

/* Logo: scale in perfect sync with the bar; color-invert snaps 150ms in,
   hidden under the darkening background. */
html.r8-nav-x .elementor-location-header .elementor-widget-theme-site-logo img {
	transform: scale(.75);
	filter: brightness(0) invert(1);
}

/* ── Mobile dropdown PANEL while scrolled ────────────────────────────────
   CRITICAL SCOPING: Elementor puts .elementor-nav-menu--dropdown on THREE
   things — the mobile panel (nav.elementor-nav-menu__container) AND the
   ul.sub-menu hover dropdowns nested inside both navs. Every rule here is
   therefore scoped to .elementor-nav-menu__container.elementor-nav-menu--dropdown
   (the panel). A bare .elementor-nav-menu--dropdown selector would also
   fix-position the desktop Info hover sub-menu across the viewport — that
   broad selector was one of the paste-CSS era bugs.

   The panel is pinned flush under the bar: the bar's backdrop-filter makes
   it the containing block for fixed descendants, so top = the bar's own
   height, which r8-header.js keeps in --r8-nav-h. Items stay FULL SIZE
   (Elementor's own type/padding — tap targets untouched), and every
   hover/tap highlight is killed — that light stripe made items unreadable.
   Elementor's stretch JS writes inline left/width when opening; the
   !important full-bleed values below beat it deterministically. */
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	position: fixed !important;
	top: var(--r8-nav-h, 54px) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	margin-top: 0 !important;
	background-color: rgba(8, 10, 14, .96) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown a {
	color: #fff !important;
	-webkit-tap-highlight-color: transparent;
}
/* Sub-menu ULs inside the panel (e.g. Info expanded): no white card —
   inherit the panel's dark glass. */
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown .sub-menu {
	position: static !important;
	background: transparent !important;
	box-shadow: none !important;
}
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown a:hover,
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown a:focus,
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown a:active,
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown a.highlighted,
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown li.highlighted > a,
html.r8-nav-x .elementor-location-header .elementor-element .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item-active {
	background: none !important;
	background-color: transparent !important;
	color: #fff !important;
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header > .e-con,
	.elementor-location-header .elementor-nav-menu--main .elementor-item,
	.elementor-location-header .elementor-button,
	.elementor-location-header .elementor-icon,
	.elementor-location-header .elementor-icon svg,
	.elementor-location-header .elementor-menu-toggle,
	.elementor-location-header .elementor-menu-toggle i,
	.elementor-location-header .elementor-menu-toggle svg,
	.elementor-location-header .elementor-widget-theme-site-logo img,
	.elementor-location-header .xoo-wsc-sc-cont,
	.elementor-location-header .xoo-wsc-sc-bki {
		transition: none !important;
	}
}