/* === Font Metric Overrides for CLS Prevention ===
 * These @font-face rules create adjusted fallback fonts that match
 * the metrics of Inter and Poppins, preventing layout shifts.
 */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Poppins Fallback';
    src: local('Arial');
    size-adjust: 113%;
    ascent-override: 83%;
    descent-override: 28%;
    line-gap-override: 0%;
}

/* ============================================================
   MODERN HEADER DESIGN
   CLS and LCP Optimizations
   ============================================================ */

:root {
	--piximfix-header-accent: #007aff;
	--piximfix-header-accent-soft: #4a90e2;
	--piximfix-header-accent-dark: #005fcc;
	--piximfix-header-gradient: linear-gradient(135deg, var(--piximfix-header-accent-soft) 0%, var(--piximfix-header-accent) 100%);
	--piximfix-header-text: rgba(248, 252, 255, 0.92);
	--piximfix-header-text-strong: #ffffff;
	--piximfix-header-hover-surface: rgba(255, 255, 255, 0.16);
	--piximfix-header-hover-surface-strong: rgba(255, 255, 255, 0.22);
	--piximfix-header-underline: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
	--piximfix-header-shadow: 0 18px 45px rgba(15, 23, 36, 0.22);
	--piximfix-header-border: rgba(255, 255, 255, 0.18);
	--piximfix-header-sticky-shadow: 0 18px 36px rgba(15, 23, 36, 0.24);
	--piximfix-header-dropdown-shadow: 0 18px 45px rgba(12, 35, 64, 0.18);
	--piximfix-header-dropdown-border: rgba(74, 144, 226, 0.2);
	--piximfix-header-dropdown-hover: linear-gradient(90deg, rgba(74, 144, 226, 0.16) 0%, rgba(0, 122, 255, 0.1) 100%);
	--piximfix-header-icon: rgba(248, 252, 255, 0.85);
	--piximfix-menu-divider: rgba(255, 255, 255, 0.18);
	--piximfix-submenu-shadow: 0 22px 48px rgba(15, 23, 36, 0.22);
	--piximfix-submenu-divider: rgba(74, 144, 226, 0.18);
	--piximfix-submenu-text: #0f1724;
	--piximfix-mobile-menu-bg: linear-gradient(180deg, rgba(248, 252, 255, 0.98) 0%, rgba(233, 241, 255, 0.94) 100%);
	--piximfix-mobile-menu-shadow: 16px 0 40px rgba(15, 23, 36, 0.24);
	--piximfix-mobile-menu-divider: rgba(74, 144, 226, 0.16);
	--piximfix-menu-text: rgba(247, 250, 255, 0.94);
	--piximfix-submenu-hover-shadow: 0 12px 28px rgba(74, 144, 226, 0.18);
	--piximfix-offcanvas-text: #102237;
	--piximfix-offcanvas-text-muted: rgba(16, 34, 55, 0.7);
	--piximfix-focus-glow: rgba(0, 122, 255, 0.28);
}

/* ============================================================
   HEADER CONTAINER - LCP and CLS Optimizations
   ============================================================ */

/* ============================================================
   HEADER LOGO: Show get-cookies.png as the primary logo
   WordPress custom_logo (attachment 74104) renders the image.
   GP Premium navigation branding also shows it in the nav bar.
   ============================================================ */

/* Hide text-only branding (logo image is enough) */
.inside-header > .site-branding-container,
.inside-header > .site-branding {
	display: none !important;
}

/* Show .site-logo as the primary branding */
.inside-header > .site-logo {
	display: flex !important;
	align-items: center;
	flex-shrink: 0;
	height: 100%;
	max-height: 60px;
	z-index: 10;
}

/* Size the logo for the 70px header */
.inside-header > .site-logo img,
.inside-header > .site-logo .header-image {
	display: block !important;
	max-width: 50px !important;
	width: auto !important;
	height: 42px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}

.inside-header > .site-logo a {
	display: flex;
	align-items: center;
	height: 100%;
	width: auto;
	min-width: 0;
	min-height: 0;
	line-height: 0;
	aspect-ratio: auto;
}

/* Navigation branding logo (GP Premium) */
#site-navigation .navigation-branding {
	display: none !important;
	align-items: center;
	flex-shrink: 0;
}

#site-navigation .navigation-branding .site-logo,
.navigation-branding .site-logo {
	display: block !important;
}

#site-navigation .navigation-branding .site-logo img,
#site-navigation .navigation-branding img,
.navigation-branding .site-logo img {
	max-width: 50px !important;
	width: auto !important;
	height: 42px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}

/* Hide duplicate cookie-manager logo (primary .site-logo handles branding) */
.cm-header-logo,
img.cm-header-logo,
.menu-item img.cm-header-logo {
	display: none !important;
}

/* Branding text: "G COOKIES" next to the logo icon */
.pxf-brand-text {
display: flex !important;
align-items: center;
flex-shrink: 0;
margin-left: -4px;
z-index: 10;
}

.pxf-brand-text a {
display: flex;
align-items: baseline;
gap: 0.3rem;
text-decoration: none !important;
font-family: 'Inter', 'Poppins', 'Segoe UI', sans-serif;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: 1.5px;
text-transform: uppercase;
line-height: 1;
transition: opacity 0.25s ease;
}

.pxf-brand-text a:hover {
opacity: 0.85;
}

.pxf-brand-g {
color: #ffffff;
font-size: 1.3rem;
font-weight: 900;
}

.pxf-brand-cookies {
color: #e8922a;
font-weight: 800;
}

/* Responsive: hide text on small screens, keep icon */
@media (max-width: 480px) {
.pxf-brand-text {
display: none !important;
}
}
/* ============================================================
   DASHBOARD HEADER: Icon-based Category Navigation
   Layout: [Logo + Text] | [Category Icons] | [Search + Profile]
   ============================================================ */

/* Hide default GP text navigation */
.site-header #site-navigation,
.site-header nav.main-navigation,
.site-header .mobile-menu-control-wrapper {
display: none !important;
}

/* ── Category Icon Nav Bar (center) ── */
.pxf-cat-nav {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
min-width: 0;
}

.pxf-cat-icons {
display: flex;
align-items: center;
gap: 14px;
padding: 0 16px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
}

.pxf-cat-icons::-webkit-scrollbar {
display: none;
}

/* ── Individual Category Icon ── */
.pxf-cat-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(248, 252, 255, 0.7);
text-decoration: none !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.pxf-cat-icon svg,
.pxf-cat-icon__svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}

/* Inner wrapper for consistent alignment */
.pxf-cat-icon__inner {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}

/* Emoji-based category icons */
.pxf-cat-icon__emoji {
font-size: 1.25rem;
line-height: 1;
text-align: center;
}

/* Image-based category icons (from WP admin) */
.pxf-cat-icon__img,
.pxf-cat-icon img {
width: 28px !important;
height: 28px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
object-fit: contain;
border-radius: 4px;
filter: brightness(1.1);
transition: filter 0.25s ease;
}

.pxf-cat-icon:hover img {
filter: brightness(1.3);
}

.pxf-cat-icon:hover {
background: rgba(232, 146, 42, 0.15);
border-color: rgba(232, 146, 42, 0.4);
color: #e8922a;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(232, 146, 42, 0.2);
}

.pxf-cat-icon.active {
background: rgba(232, 146, 42, 0.2);
border-color: rgba(232, 146, 42, 0.5);
color: #e8922a;
box-shadow: 0 0 0 1px rgba(232, 146, 42, 0.3);
}

/* ── Tooltip ── */
.pxf-cat-icon::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 5px 12px;
border-radius: 6px;
background: rgba(15, 23, 36, 0.95);
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.5px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 9999;
border: 1px solid rgba(232, 146, 42, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Tooltip arrow */
.pxf-cat-icon::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(15, 23, 36, 0.95);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 9999;
}

.pxf-cat-icon:hover::after,
.pxf-cat-icon:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

/* ── Right Utilities (Search + Profile) ── */
.pxf-header-utils {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: auto;
padding-left: 12px;
}

.pxf-util-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(248, 252, 255, 0.7);
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none !important;
padding: 0;
line-height: 1;
font-size: 0;
}

.pxf-util-btn svg {
width: 18px;
height: 18px;
}

.pxf-util-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-1px);
}

/* Also hide old search container that GP renders */
.site-header .header-search-container {
display: none !important;
}

/* ── Inline Header Search (slides open) ── */
.pxf-inline-search {
display: flex;
align-items: center;
max-width: 0;
overflow: hidden;
opacity: 0;
transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.25s ease,
            padding 0.35s ease;
padding: 0;
height: 38px;
}

.pxf-inline-search.open {
max-width: 320px;
opacity: 1;
padding-right: 4px;
}

.pxf-inline-search__form {
display: flex;
align-items: center;
height: 36px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(232, 146, 42, 0.3);
border-radius: 10px;
padding: 0 10px;
min-width: 220px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pxf-inline-search__form:focus-within {
border-color: rgba(232, 146, 42, 0.6);
box-shadow: 0 0 0 2px rgba(232, 146, 42, 0.15);
}

.pxf-inline-search__input {
flex: 1;
background: none !important;
border: none !important;
outline: none !important;
color: #fff !important;
font-size: 0.85rem !important;
font-family: inherit;
padding: 6px 8px !important;
box-shadow: none !important;
min-width: 0;
width: 100%;
}

.pxf-inline-search__input::placeholder {
color: rgba(255, 255, 255, 0.35);
}

/* Hide native browser clear button */
.pxf-inline-search__input::-webkit-search-cancel-button,
.pxf-inline-search__input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}

.pxf-inline-search__close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
border: none;
background: rgba(255, 255, 255, 0.06);
border-radius: 6px;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
margin-left: 6px;
}

.pxf-inline-search__close svg {
width: 14px;
height: 14px;
}

.pxf-inline-search__close:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}

/* Search button active state */
.pxf-search-toggle.active {
background: rgba(232, 146, 42, 0.2);
border-color: rgba(232, 146, 42, 0.4);
color: #e8922a;
}

@media (max-width: 480px) {
.pxf-inline-search.open {
max-width: 180px;
}
.pxf-inline-search__form {
min-width: 140px;
}
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
.pxf-cat-icons {
gap: 4px;
padding: 0 8px;
}

.pxf-cat-icon {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 8px;
}

.pxf-cat-icon svg {
width: 17px;
height: 17px;
}

.pxf-util-btn {
width: 32px;
height: 32px;
}

.pxf-util-btn svg {
width: 16px;
height: 16px;
}
}

@media (max-width: 480px) {
.pxf-brand-text {
display: none !important;
}

.pxf-cat-icons {
gap: 3px;
padding: 0 4px;
}

.pxf-cat-icon {
width: 32px;
height: 32px;
min-width: 32px;
}
}
/* Header Container - Merged rules for performance */
.site-header {
	/* Layout & Containment */
	contain: layout style;
	box-sizing: border-box;

	/* Visual Styling */
	background: var(--piximfix-header-gradient);
	color: var(--piximfix-header-text);
	box-shadow: var(--piximfix-header-shadow);
	border-bottom: 1px solid var(--piximfix-header-border);

	/* Positioning */
	position: sticky;
	top: 0;
	z-index: 1000;
	overflow: visible;

	/* Performance */
	transform: translateY(0);
	will-change: transform;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	/* CLS Prevention - Reserve space and lock height */
	min-height: 70px;
	height: 70px;
	/* Height locked for CLS prevention */
	overflow: visible;
}

/* Header Inner Container - Merged rules */
.inside-header {
	box-sizing: border-box;
	width: 100%;
	min-height: 70px;
	height: 70px;
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	overflow: visible;
}

/* Responsive Header Heights */
/* BREAKPOINT CHANGE: Mobile breakpoint updated from 768px to 1274px */
@media (max-width: 1274px) {

	.site-header,
	.inside-header {
		min-height: 60px;
	}
}

@media (max-width: 480px) {

	.site-header,
	.inside-header {
		min-height: 55px;
	}
}

/* Site Branding Container - High specificity override */
body .site-header .inside-header .site-branding-container {
	display: none !important;
}

.site-header a {
	color: var(--piximfix-header-text);
	transition: color 0.25s ease;
}

.site-header a:hover,
.site-header a:focus {
	color: var(--piximfix-header-text-strong);
}

/* BREAKPOINT CHANGE: Mobile breakpoint updated from 768px to 1274px */
@media (max-width: 1274px) {
	.site-header {
		box-shadow: 0 14px 28px rgba(15, 23, 36, 0.18);
	}
}

/* Header Hidden State (scrolling down) - GPU accelerated */
.site-header.header-hidden {
	transform: translateY(-100%);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Header Visible State (scrolling up) - GPU accelerated */
.site-header.header-visible {
	transform: translateY(0);
	box-shadow: var(--piximfix-header-sticky-shadow);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Header Inner Container - Layout */
.inside-header {
	padding: 0.75rem 2rem;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 2rem;
	position: relative;
	overflow: visible;
	contain: layout style;
	min-height: 70px;
	box-sizing: border-box;
}

/* Desktop Header Layout (Above 1274px) */
@media (min-width: 1275px) {
	.inside-header {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		justify-content: unset;
		/* Override flex justify */
	}

	/* Left Column: Branding (25%) */
	body .site-header .inside-header .site-branding-container {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100% !important;
		justify-content: flex-start !important;
		/* grid-column removed */
		/* order removed - element hidden */
		margin: 0 !important;
	}

	/* Center Column: Navigation (50%) */
	#site-navigation,
	nav#site-navigation {
		/* grid-column removed */
		flex: 1 1 auto;
		width: 100%;
		justify-content: center;
		margin: 0 !important;
		transform: none !important;
		/* Reset any shifts */
	}

	.main-nav {
		width: 100%;
		justify-content: center;
	}

	.main-nav>ul {
		justify-content: center;
		width: 100%;
	}

	/* Right Column: Search/Widgets (25%) */
	.header-search-container,
	.header-widget {
		/* grid-column removed */
		flex-shrink: 0;
		margin-left: auto !important;
		justify-content: flex-end;
		display: flex;
	}

	/* Prevent search expansion from shifting layout in Grid mode */
	.inside-header.search-active #site-navigation {
		transform: none !important;
		margin-right: 0 !important;
	}
}

/* CLS Fix: Add min-width: 0 to all flex children to prevent overflow shifts */
.inside-header>* {
	min-width: 0;
}

/* Site Branding / Logo - Centered by default */
.site-branding-container,
.inside-header .site-branding-container,
.site-header .inside-header .site-branding-container,
body .site-header .inside-header .site-branding-container {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem;
	flex-shrink: 0 !important;
	z-index: 10 !important;
	min-width: 0;
	flex: 1 1 auto;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: auto !important;
	margin: 0 !important;
	text-align: center !important;
	float: none !important;
	clear: none !important;
}

/* Logo - CLS Fix: Reserve space and prevent layout shift */
.site-logo,
.site-logo img,
.header-image.is-logo-image {
	display: block;
	max-width: 50px;
	width: auto;
	height: auto;
	min-height: 50px;
	min-width: 0;
	aspect-ratio: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
	will-change: transform;
	contain: layout style;
	/* Don't use paint containment on logo */
	/* CLS Fix: Reserve space to prevent layout shift */
	box-sizing: border-box;
}

/* Ensure logo container has fixed dimensions */
.site-logo a {
	display: block;
	width: auto;
	min-width: 0;
	min-height: 0;
	line-height: 0;
	box-sizing: border-box;
	aspect-ratio: auto;
}

/* Logo hover effect - scale only the image, not the container - GPU accelerated */
.site-branding-container .site-logo:hover,
.site-logo:hover {
	transform: scale(1.05);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Ensure logo container transform stays centered */
.site-branding-container:hover {
	transform: translate(-50%, -50%) !important;
}

.site-branding {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Main Title - CLS Fix: Prevent font loading shift */
.main-title {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	letter-spacing: -0.5px;
	transition: color 0.3s ease;
	/* CLS Fix: Prevent layout shift from font loading */
	min-height: 1.68rem;
	min-width: 0;
	display: block;
	font-display: swap;
	color: var(--piximfix-header-text-strong);
	/* Reserve space to prevent CLS */
	contain: layout style;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
}

.main-title a {
	text-decoration: none;
	color: inherit;
	transition: color 0.3s ease;
}

.main-title a:hover {
	color: var(--piximfix-header-text-strong);
}

.site-description {
	font-size: 0.875rem;
	color: rgba(248, 252, 255, 0.75);
	margin: 0;
	font-weight: 400;
	opacity: 1;
}

/* Navigation Menu - Positioned to the left - CLS Fix */
/* Navigation float right margin */
.nav-float-right #site-navigation {
	margin-left: 20%;
}

/* Toggled navigation background */
.main-navigation.toggled .main-nav>ul {
	background-color: #3a8be8;
}

/* Navigation text styles - Desktop */
/* Redesigned: white text on transparent background, matching footer style */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: #ffffff !important;
	font-weight: 600;
	font-size: clamp(11px, 1.2vw + 0.5rem, 14px);
	letter-spacing: 0.3px;
}

.main-navigation .main-nav ul li[class*="current-menu-"]>a {
	color: #ffffff !important;
}

#site-navigation,
nav#site-navigation {
	flex: 0 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	order: 1;
	margin-right: auto;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 0;
	overflow: visible;
	will-change: transform;
	/* CLS Fix: Reserve space to prevent layout shift */
	min-height: 50px;
	width: auto;
	/* Don't use containment - allows submenus to display */
	contain: none;
	box-sizing: border-box;
	border-radius: 12px !important;
	/* Redesigned: transparent nav background, no white pill */
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* CLS Fix: Use CSS variable for safe search transform - prevents layout shift */
:root {
	--search-nav-shift: 0px;
}

/* Move navigation left when search is active to maintain gap */
/* CLS Fix: Use CSS variable instead of hard-coded translateX to prevent layout shift */
.inside-header.search-active #site-navigation {
	transform: translateX(var(--search-nav-shift, -340px));
	margin-right: var(--search-nav-margin, -75px);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin-right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ensure smooth transition when search closes */
.inside-header:not(.search-active) #site-navigation {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin-right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: nowrap;
	overflow: visible;
	/* Ensure submenus can display */
	contain: none;
	position: relative;
	/* CLS Fix: Prevent layout shift */
	min-width: 0;
	min-height: 50px;
	width: 100%;
	box-sizing: border-box;
}

.main-navigation .main-nav>ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	/* CLS Fix: Prevent overflow shifts */
	min-width: 0;
}

.main-nav ul {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
	/* CLS Fix: Prevent layout shift */
	min-width: 0;
	min-height: 50px;
	width: auto;
	box-sizing: border-box;
}

.main-nav ul li {
	position: relative;
	flex-shrink: 0;
	white-space: nowrap;
	/* CLS Fix: Prevent layout shift - min-width: 0 allows proper flex shrinking */
	min-width: 0;
	min-height: 40px;
	box-sizing: border-box;
}

.main-nav ul li a {
	display: block;
	padding: 0.5rem 1rem;
	color: #ffffff !important;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	border-radius: 0;
	transition: all 0.3s ease;
	position: relative;
	/* CLS Fix: Prevent layout shift */
	min-width: 0;
	min-height: 40px;
	box-sizing: border-box;
	font-display: swap;
	line-height: 1.4;
	background: transparent !important;
}

/* More specific selector for main navigation items */
.main-navigation .main-nav ul li a {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 30px;
}

.main-navigation .main-nav ul li.menu-item-has-children>a {
	padding-right: 0;
	position: relative;
	font-weight: 500;
	font-size: 16px;
}

/* Old ::before underline disabled — icons now use ::before, underline moved to ::after */

/* Current Menu Item - Specific Styling - Desktop */
/* Redesigned: transparent background with underline indicator */
.main-navigation .main-nav ul li[class*="current-menu-"]>a {
	color: #ffffff !important;
	background: transparent !important;
	font-weight: 700;
}

/* Hover/Focus on Non-Current Menu Items */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover>a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus>a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"])>a,
.main-navigation .menu-bar-item:hover>a,
.main-navigation .menu-bar-item.sfHover>a {
	color: #ffffff !important;
	background: transparent !important;
}

/* ============================================================
   MENU ITEM ICONS — Inline SVG via CSS ::before
   ============================================================ */

/* Base icon style for all main nav items */
.main-nav>ul>li>a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}

.main-nav>ul>li>a::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	min-width: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.9;
	transition: opacity 0.3s ease, transform 0.3s ease;
	position: static;
	transform: none;
	left: auto;
	bottom: auto;
}

.main-nav>ul>li>a:hover::before {
	opacity: 1;
	transform: scale(1.1) !important;
}

/* Underline effect — move to ::after since ::before is now used for icons */
.main-nav>ul>li>a::after {
	content: '';
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	width: 70%;
	height: 2px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2px;
	transition: transform 0.3s ease;
}

.main-nav>ul>li>a:hover::after,
.main-nav>ul>li.current-menu-item>a::after,
.main-nav>ul>li.current-menu-ancestor>a::after {
	transform: translateX(-50%) scaleX(1);
}

/* Posts — Document/article icon */
#menu-item-73597>a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

/* Premium Cookies — Cookie/star icon */
#menu-item-73600>a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M21.95 10.99c-1.79-.03-3.7-1.95-2.68-4.22-2.98 1-5.77-1.59-5.19-4.56C6.95.71 2 6.58 2 12c0 5.52 4.48 10 10 10 5.89 0 10.54-5.08 9.95-11.01zM8.5 15c-.83 0-1.5-.67-1.5-1.5S7.67 12 8.5 12s1.5.67 1.5 1.5S9.33 15 8.5 15zm2-5C9.67 10 9 9.33 9 8.5S9.67 7 10.5 7s1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5 6c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
}

/* About — Info/person icon */
#menu-item-73598>a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* Contact us — Mail/envelope icon */
#menu-item-73599>a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Dropdown Menus - Modern Design */
.main-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 255, 0.96) 100%);
	box-shadow: var(--piximfix-submenu-shadow);
	border-radius: 12px;
	padding: 0.35rem 0;
	padding-top: 5px;
	padding-bottom: 5px;
	min-width: 260px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px) scale(0.98);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-direction: column;
	gap: 0;
	margin-top: 0;
	z-index: 10001;
	border: 1px solid var(--piximfix-header-dropdown-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
	display: flex;
	/* Ensure submenu is not clipped by containment */
	contain: none;
	overflow: visible;
	color: var(--piximfix-submenu-text);
	/* CLS Fix: Prevent layout shift */
	box-sizing: border-box;
	will-change: transform, opacity, visibility;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Create invisible hover bridge between parent menu item and submenu */
.main-nav ul li.menu-item-has-children::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
	background: transparent;
	z-index: 999;
	pointer-events: none;
}

.main-nav ul li.menu-item-has-children:hover::after {
	pointer-events: auto;
}

.main-nav ul li:hover>ul,
.main-nav ul li.sfHover>ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition-delay: 0s;
}

/* Keep submenu visible when hovering over it */
.main-nav ul ul:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.main-nav ul ul li {
	width: 100%;
	position: relative;
	color: var(--piximfix-submenu-text);
}

/* Ensure parent menu item stays hovered when hovering over submenu */
.main-nav ul li.menu-item-has-children:hover>a {
	background: transparent !important;
	color: #ffffff !important;
}

.main-nav ul ul li:first-child {
	margin-top: 0;
}

.main-nav ul ul li:last-child {
	margin-bottom: 0;
}

/* Submenu Links - Desktop */
.main-nav ul ul li a {
	padding: 15px 0.5rem;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--piximfix-submenu-text);
	position: relative;
	transition: all 0.3s ease;
	margin: 0 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1.25;
	min-height: 44px;
	box-sizing: border-box;
	font-display: swap;
}

.main-nav ul ul li a::before {
	display: none;
}

.main-nav ul ul li a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) scaleY(0);
	width: 3px;
	height: 0;
	background: linear-gradient(180deg, var(--piximfix-header-accent) 0%, var(--piximfix-header-accent-dark) 100%);
	border-radius: 0 3px 3px 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav ul ul li a:hover {
	background: var(--piximfix-header-dropdown-hover);
	padding: 15px 0px 15px 1.5rem;
	color: var(--piximfix-header-accent);
	transform: translateX(4px);
	box-shadow: var(--piximfix-submenu-hover-shadow);
}

.main-nav ul ul li a:hover::after {
	height: 60%;
	transform: translateY(-50%) scaleY(1);
}

/* Active submenu item */
.main-nav ul ul li.current-menu-item>a,
.main-nav ul ul li.current-menu-ancestor>a {
	background: linear-gradient(90deg, rgba(74, 144, 226, 0.24) 0%, rgba(0, 122, 255, 0.12) 100%);
	color: var(--piximfix-header-accent);
	font-weight: 600;
	box-shadow: var(--piximfix-submenu-hover-shadow);
}

.main-nav ul ul li.current-menu-item>a::after,
.main-nav ul ul li.current-menu-ancestor>a::after {
	height: 60%;
	transform: translateY(-50%) scaleY(1);
}

/* Submenu divider */
.main-nav ul ul li:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 1.5rem;
	right: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--piximfix-submenu-divider) 50%, transparent 100%);
}

/* Nested submenus (third level) */
.main-nav ul ul ul {
	top: 0;
	left: calc(100% + 8px);
	margin-top: 0;
	transform: translateX(-15px) scale(0.95);
}

.main-nav ul ul li:hover>ul {
	transform: translateX(0) scale(1);
}

/* Submenu arrow indicator */
.main-nav ul ul li.menu-item-has-children>a::before {
	content: '→';
	position: absolute;
	right: 1.5rem;
	font-size: 0.875rem;
	color: #999;
	transition: all 0.3s ease;
	opacity: 0.6;
}

.main-nav ul ul li.menu-item-has-children>a:hover::before {
	right: 1.25rem;
	color: var(--piximfix-header-accent);
	opacity: 1;
}

/* Dropdown Toggle Icon */
.dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.25rem;
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease;
}

.main-nav ul li:hover>a .dropdown-menu-toggle,
.main-nav ul li.sfHover>a .dropdown-menu-toggle {
	transform: rotate(180deg);
}

/* Header Widget Area */
.header-widget {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

/* Header Search Field Container */
.header-search-field {
	display: flex;
	align-items: center;
	margin-left: auto;
	order: 3;
	position: relative;
}

/* Modern Header Search - Positioned to the right - CLS Fix */
.header-search-container {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: auto;
	order: 3;
	flex-shrink: 0;
	min-width: 40px;
	/* Reserve space to prevent CLS */
	width: 40px;
	height: 40px;
	min-height: 40px;
}

.header-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	background: var(--piximfix-header-hover-surface);
	border: none;
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease;
	color: var(--piximfix-header-text-strong);
	padding: 0;
	position: relative;
	z-index: 0;
	font-weight: bolder;
	will-change: transform;
	contain: layout style paint;
}

.header-search-toggle:hover {
	background: var(--piximfix-header-hover-surface-strong);
	transform: scale(1.1);
	box-shadow: 0 10px 26px rgba(0, 122, 255, 0.25);
}

.header-search-toggle:active {
	transform: scale(0.95);
}

/* Hide toggle icon when search is active */
.header-search-container.active .header-search-toggle svg {
	opacity: 0;
	visibility: hidden;
}

.header-search-toggle svg {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	stroke: rgb(255, 255, 255);
	fill: none;
	display: block;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	/* CLS Fix: Reserve space for icon to prevent layout shift */
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Search Form - Expandable - Modern Design */
/* CLS Fix: Use transform/opacity only, avoid width transitions */
.header-search-form {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) scaleX(0);
	transform-origin: right center;
	width: 320px;
	min-width: 320px;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, visibility 0.2s ease;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 30px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
		0 6px 18px rgba(74, 144, 226, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.85);
	z-index: 9;
	white-space: nowrap;
	/* LSP Fix: Reserve space */
	box-sizing: border-box;
	min-height: 40px;
}

.header-search-container.active .header-search-form {
	width: 320px;
	min-width: 320px;
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scaleX(1);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, visibility 0.2s ease;
	/* CLS Fix: Reserve space - width already set above to prevent layout shift */
	box-sizing: border-box;
}

/* Adjust search container when active to prevent overlap */
.header-search-container.active {
	margin-left: 0;
	z-index: 11;
}

.header-search-form form {
	display: flex;
	align-items: center;
	width: 99%;
	padding: 0px;
	min-width: 300px;
	max-width: 100%;
	box-sizing: border-box;
	gap: 0.75rem;
	/* LSP Fix: Reserve space */
	min-height: 40px;
}

.header-search-form input[type="search"],
.header-search-form input[type="text"] {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 0.95rem;
	color: #1a1a1a;
	padding: 0.625rem 0.5rem;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	font-weight: 400;
	letter-spacing: 0.01em;
	transition: color 0.3s ease;
	/* LSP Fix: Reserve space */
	min-height: 40px;
	font-display: swap;
}

.header-search-form input[type="search"]:focus,
.header-search-form input[type="text"]:focus {
	color: var(--piximfix-header-accent);
}

.header-search-form input[type="search"]::placeholder,
.header-search-form input[type="text"]::placeholder {
	color: #999;
	opacity: 0.7;
	font-weight: 400;
	transition: opacity 0.3s ease;
}

.header-search-form input[type="search"]:focus::placeholder,
.header-search-form input[type="text"]:focus::placeholder {
	opacity: 0.5;
}

.header-search-form button[type="submit"] {
	background: linear-gradient(135deg, var(--piximfix-header-accent-soft) 0%, var(--piximfix-header-accent) 100%);
	border: none;
	cursor: pointer;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin: 0;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	flex-shrink: 0;
	box-shadow: 0 8px 20px rgba(74, 144, 226, 0.35),
		0 4px 12px rgba(0, 122, 255, 0.25);
	position: relative;
	overflow: hidden;
	/* LSP Fix: Reserve space */
	box-sizing: border-box;
}

.header-search-form button[type="submit"]::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease;
}

.header-search-form button[type="submit"]:hover::before {
	width: 100%;
	height: 100%;
}

.header-search-container.active .header-search-form button[type="submit"] {
	display: flex;
	animation: slideInButton 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes slideInButton {
	from {
		opacity: 0;
		transform: scale(0) rotate(-180deg);
	}

	to {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.header-search-form button[type="submit"]:hover {
	color: #ffffff;
	background: linear-gradient(135deg, var(--piximfix-header-accent) 0%, var(--piximfix-header-accent-dark) 100%);
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 10px 26px rgba(0, 122, 255, 0.35),
		0 6px 18px rgba(74, 144, 226, 0.25);
}

.header-search-form button[type="submit"]:active {
	transform: scale(0.95) rotate(0deg);
}

.header-search-form button[type="submit"] svg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	stroke: currentColor;
	fill: none;
	display: block;
	position: relative;
	z-index: 1;
	stroke-width: 2.5;
	transition: transform 0.3s ease;
	/* LSP Fix: Reserve space */
	box-sizing: border-box;
}

.header-search-form button[type="submit"]:hover svg {
	transform: scale(1.1);
}

.header-widget .widget {
	margin: 0;
	padding: 0;
}

/* Menu Bar Items (Search, etc.) */
.menu-bar-items {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: 1rem;
}

.menu-bar-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	/* CLS Fix: Prevent layout shift */
	box-sizing: border-box;
	flex-shrink: 0;
}

.menu-bar-item:hover {
	background: var(--piximfix-header-hover-surface-strong);
	transform: scale(1.1);
}

.menu-bar-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--piximfix-header-text-strong);
	text-decoration: none;
}

/* Mobile Menu Toggle Button */
.menu-toggle,
.mobile-menu-control-wrapper .menu-toggle {
	display: none;
	background: transparent;
	border: none;
	border-radius: 12px;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-direction: row;
	gap: 0;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
	/* CLS Fix: Prevent layout shift */
	box-sizing: border-box;
	flex-shrink: 0;
}

.menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:hover {
	background: transparent;
	border: none;
}

.menu-toggle svg {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	fill: var(--piximfix-header-icon);
	stroke: none;
	transition: fill 0.3s ease;
	/* CLS Fix: Reserve space for icon to prevent layout shift */
	display: block;
	box-sizing: border-box;
}

.menu-toggle:hover svg {
	fill: var(--piximfix-header-text-strong);
}

/* Top Bar */
.top-bar {
	background: rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid var(--piximfix-header-border);
	padding: 0.5rem 0;
	font-size: 0.875rem;
	color: var(--piximfix-header-text);
}

.top-bar a {
	color: var(--piximfix-header-text);
	transition: color 0.25s ease;
}

.top-bar a:hover,
.top-bar a:focus {
	color: var(--piximfix-header-text-strong);
}

.inside-top-bar {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Sticky Header Effect */
.site-header.sticky {
	box-shadow: var(--piximfix-header-sticky-shadow);
	padding: 0.5rem 0;
}

.site-header.sticky .inside-header {
	padding: 0.75rem 2rem;
}

.site-header.sticky .site-logo,
.site-header.sticky .site-logo img,
.site-header.sticky .header-image.is-logo-image {
	max-width: 150px;
	width: 150px;
	min-height: 50px;
}

.site-header.sticky .site-logo a {
	width: 150px;
	min-height: 50px;
}

/* BREAKPOINT CHANGE: Mobile breakpoint updated from 768px to 1274px */
@media (max-width: 1274px) {
	.site-header.sticky .inside-header {
		padding: 0.4rem 0.75rem;
	}

	.site-header.sticky .site-logo {
		max-width: 90px;
	}
}

/* Responsive Design - Keep everything in one row */
/* Very large screens (above 1600px) - maintain optimal font size */
@media (min-width: 1601px) {
	.main-navigation .main-nav ul li a {
		font-size: 13px;
		/* Fixed size for very large screens to prevent excessive scaling */
	}
}

@media (max-width: 1600px) {
	.inside-header {
		padding: 0.75rem 3rem;
		gap: 0rem;
		flex-wrap: nowrap;
		justify-content: flex-start;
		position: relative;
		place-items: center;
	}

	/* Center logo at breaking point */
	.site-branding-container {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		order: 2;
		z-index: 1;
		width: auto;
		margin: 0 !important;
		flex-shrink: 0;
	}

	/* Position navigation to the left of center */
	#site-navigation {
		order: 1;
		margin-right: auto;
		flex: 0 1 auto;
	}

	/* Position search to the right */
	.header-search-container {
		order: 3;
		margin-left: auto;
		flex-shrink: 0;
	}

	/* Large desktop navigation adjustments */
	.main-nav ul {
		gap: 10px;
	}

	/* Responsive navigation text at 1600px - maintain readable size on large screens */
	.main-navigation .main-nav ul li a {
		font-size: clamp(12px, 1.1vw + 0.4rem, 13px);
	}
}

@media (max-width: 1400px) {
	.inside-header {
		padding: 0.75rem 1.75rem;
		gap: 1.75rem;
		flex-wrap: nowrap;
		justify-content: flex-start;
		position: relative;
	}

	/* Center logo at breaking point */
	.site-branding-container {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		order: 2;
		z-index: 1;
		width: auto;
		margin: 0 !important;
		flex-shrink: 0;
	}

	/* Position navigation to the left of center */
	#site-navigation {
		order: 1;
		margin-right: auto;
		flex: 0 1 auto;
	}

	/* Position search to the right */
	.header-search-container {
		order: 3;
		margin-left: auto;
		flex-shrink: 0;
	}

	.main-nav ul {
		gap: 18px;
		flex-wrap: nowrap;
	}

	/* Responsive navigation adjustments */
	.main-navigation .main-nav ul li a {
		padding-left: 19px;
		padding-right: 19px;
		font-size: clamp(11px, 1.1vw + 0.4rem, 12.5px);
	}
}

@media (max-width: 1130px) {
	.has-inline-mobile-toggle .inside-header {
		flex-direction: column;
		text-align: left;
		flex-wrap: wrap;
	}

	/* Responsive navigation adjustments */
	.main-navigation .main-nav ul li a {
		padding-left: 16px;
		padding-right: 16px;
		font-size: clamp(10.5px, 1vw + 0.3rem, 12.5px);
	}

	.main-nav ul {
		gap: 12px;
	}
}

@media (max-width: 1200px) {
	.inside-header {
		padding: 0.75rem 1.5rem;
		gap: 1.5rem;
		flex-wrap: nowrap;
		justify-content: flex-start;
		position: relative;
	}

	/* Center logo at breaking point */
	.site-branding-container {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		order: 2;
		z-index: 1;
		width: auto;
		margin: 0 !important;
		flex-shrink: 0;
	}

	/* Position navigation to the left of center */
	#site-navigation {
		order: 1;
		margin-right: auto;
		flex: 0 1 auto;
	}

	/* Position search to the right */
	.header-search-container {
		order: 3;
		margin-left: auto;
		flex-shrink: 0;
	}

	.main-nav ul {
		gap: 15px;
		flex-wrap: nowrap;
	}

	.main-nav ul li a {
		padding: 0.5rem 0.875rem;
		font-size: 0.9rem;
	}

	/* Responsive navigation text */
	.main-navigation .main-nav ul li a {
		padding-left: 18px;
		padding-right: 18px;
		font-size: clamp(11px, 1.05vw + 0.35rem, 12.8px);
	}

	.site-logo,
	.site-logo img,
	.header-image.is-logo-image {
		max-width: 130px;
		width: 130px;
		min-height: 45px;
	}

	.site-logo a {
		width: 130px;
		min-height: 45px;
	}

	.main-title {
		font-size: 1.35rem;
	}
}

@media (max-width: 1024px) {
	.inside-header {
		padding: 0.75rem 1.25rem;
		gap: 0.75rem;
		flex-wrap: nowrap;
		overflow: visible;
		justify-content: flex-start;
		position: relative;
	}

	/* Center logo at breaking point */
	.site-branding-container {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		order: 2;
		z-index: 1;
		width: auto;
		margin: 0 !important;
		flex-shrink: 0;
	}

	/* Position navigation to the left of center */
	#site-navigation {
		order: 1;
		margin-right: auto;
		flex: 0 1 auto;
	}

	/* Position search to the right */
	.header-search-container {
		order: 3;
		margin-left: auto;
		flex-shrink: 0;
	}

	.main-nav ul {
		gap: 10px;
		flex-wrap: nowrap;
	}

	.main-nav ul li a {
		padding: 0.5rem 0.75rem;
		font-size: clamp(10px, 0.95vw + 0.25rem, 0.85rem);
		white-space: nowrap;
	}

	/* Responsive navigation text at 1024px */
	.main-navigation .main-nav ul li a {
		font-size: clamp(10px, 0.9vw + 0.2rem, 12px);
	}

	.site-logo,
	.site-logo img,
	.header-image.is-logo-image {
		max-width: 120px;
		width: 120px;
		min-height: 40px;
	}

	.site-logo a {
		width: 120px;
		min-height: 40px;
	}

	.main-title {
		font-size: 1.25rem;
	}

	/* Adjust search form width on tablets */
	.header-search-container.active .header-search-form {
		width: 260px;
	}

	/* CLS Fix: Adjust navigation movement for search - use safe transform */
	.inside-header.search-active #site-navigation {
		transform: translateX(var(--search-nav-shift-mobile, -275px));
		margin-right: var(--search-nav-margin-mobile, 15px);
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin-right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
}

/* BREAKPOINT CHANGE: Tablet breakpoint removed - tablets (769px-1024px) now use mobile styles (<1275px) */
/* Previous tablet-specific styles are now handled by the mobile breakpoint above */

/* BREAKPOINT CHANGE: Mobile breakpoint updated from 768px to 1274px */
/* This is the main mobile navigation breakpoint - all mobile menu styles below */
@media (max-width: 1274px) {

	/* Navigation text styles - Mobile */
	.main-navigation .main-nav ul li a,
	.main-navigation .menu-toggle,
	.main-navigation .menu-bar-items {
		color: #ffffff;
		font-weight: 600;
		font-size: 14px;
	}

	.site-header.sticky .inside-header {
		padding: 0.4rem 0.75rem;
	}

	.site-header.sticky .site-logo {
		max-width: 90px;
	}

	.inside-header {
		padding: 5px;
		gap: 0px;
		min-height: 5px;
		justify-content: space-between;
		position: relative;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		max-width: 100%;
		overflow: visible;
	}

	/* Ensure navigation doesn't move on mobile when search opens */
	.inside-header.search-active #site-navigation {
		transform: none !important;
		margin-right: 0 !important;
		display: none;
	}

	/* Disable default off-canvas overlays */
	#site-navigation::before {
		display: none !important;
	}

	.main-navigation.toggled::before {
		display: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM DARK OFF-CANVAS MOBILE MENU — COMPLETE REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* Hide by default on desktop — the mobile media query below overrides this */
.offcanvas-root {
	display: none;
}

/* Dark overlay backdrop — defined here, enforced at bottom of file */

/* Hide header search when menu is open */
html.slide-opened .site-header .header-search-container,
html.slide-opened .site-header .header-search-toggle,
html.mobile-menu-open .site-header .header-search-container,
html.mobile-menu-open .site-header .header-search-toggle {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Hide Desktop Navigation on Mobile to prevent layout shifts */
@media (max-width: 1274px) {
	#site-navigation {
		display: none !important;
	}
}

@media (max-width: 1274px) {

	/* ── Logo / Branding ── */
	.site-branding-container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		order: 2;
		gap: 0.5rem;
		z-index: 1;
		width: auto;
		margin: 0;
		flex-shrink: 0;
	}

	.site-logo,
	.site-logo img,
	.header-image.is-logo-image {
		max-width: 100px;
		width: 100px;
		min-height: 35px;
	}

	.site-logo a {
		width: 100px;
		min-height: 35px;
		place-content: center;
	}

	.main-title {
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.site-description {
		font-size: 0.75rem;
		display: none;
	}

	/* ══════════════════════════════════════════════════════════════
	   FUTURISTIC DARK OFF-CANVAS PANEL (STRUCTURALLY FIXED)
	   ══════════════════════════════════════════════════════════════ */
	.offcanvas-root {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		pointer-events: none;
		visibility: hidden;
	}

	.offcanvas-root.is-open {
		pointer-events: auto;
		visibility: visible;
	}

	.offcanvas-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 9998;
	}

	.offcanvas-root.is-open .offcanvas-overlay {
		opacity: 1;
	}

	.offcanvas-panel {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 82% !important;
		min-width: 82% !important;
		max-width: 82% !important;
		height: 100vh !important;
		height: 100dvh !important;
		background: linear-gradient(170deg, #1565c0 0%, #0d47a1 40%, #0a3d91 100%) !important;
		background-color: #0d47a1 !important;
		box-shadow: -10px 0 50px rgba(0, 0, 0, 0.4);
		transform: translateX(100%);
		transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
		z-index: 10000;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		display: flex;
		border-radius: 0;
		will-change: transform;
		font-family: 'Inter', system-ui, -apple-system, sans-serif;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		box-sizing: border-box;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		visibility: visible;
		border-left: 1px solid rgba(255, 255, 255, 0.1);
	}

	.offcanvas-root.is-open .offcanvas-panel {
		transform: translateX(0);
	}

	/* Override GP offside plugin backgrounds */
	.main-navigation.offside,
	.main-navigation.offside.toggled {
		background: linear-gradient(170deg, #1565c0 0%, #0d47a1 40%, #0a3d91 100%) !important;
		background-color: #0d47a1 !important;
	}

	.offcanvas-panel .main-nav,
	.offcanvas-panel .inside-navigation {
		position: relative;
		z-index: 1;
		pointer-events: auto;
	}

	.offcanvas-panel .main-nav ul,
	.offcanvas-panel .main-nav ul li,
	.offcanvas-panel .main-nav ul li a {
		position: relative;
		z-index: 2;
		pointer-events: auto;
	}

	#site-navigation.toggled,
	.main-navigation.toggled {
		transform: translateX(0);
		display: flex;
	}

	/* ── Inner container ── */
	#site-navigation .inside-navigation {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap !important;
		gap: 0;
		padding: 0;
		background: transparent;
		backdrop-filter: none;
		border-bottom: none;
		min-width: 0;
		min-height: 0;
		box-sizing: border-box;
		position: relative;
		flex: 1;
		overflow: visible;
	}

	/* ── Top header bar with brand ── */
	#site-navigation .inside-navigation::before {
		content: 'PIXIMFIX';
		display: flex !important;
		align-items: center;
		font-size: 18px;
		font-weight: 800;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: #ffffff;
		padding: 24px 22px 20px;
		width: 100%;
		box-sizing: border-box;
		font-family: 'Inter', system-ui, sans-serif;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}

	/* ── Hide the redundant native close button (we use #pf-offcanvas-close instead) ── */
	html.slide-opened button.slideout-exit,
	html.mobile-menu-open button.slideout-exit,
	html.slide-opened .offcanvas-close,
	html.mobile-menu-open .offcanvas-close {
		display: none !important;
	}

	/* Force primary JS close button to be visible */
	html.slide-opened #pf-offcanvas-close,
	html.mobile-menu-open #pf-offcanvas-close {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* Remove X icon on the close button */
	html.slide-opened button.slideout-exit::after,
	html.mobile-menu-open button.slideout-exit::after {
		content: none !important;
	}

	/* Remove the old pseudo-element X — it was non-functional */
	#site-navigation .inside-navigation::after {
		display: none !important;
		content: none !important;
	}

	/* ── Site logo at bottom of menu ── */
	#site-navigation .navigation-branding {
		display: flex !important;
		align-items: center;
		justify-content: center;
		margin-top: auto;
		padding: 24px 18px 32px;
		width: 100%;
		box-sizing: border-box;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		opacity: 0.5;
		transition: opacity 0.3s ease;
		order: 99;
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		float: none !important;
		flex-shrink: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#site-navigation .navigation-branding:hover {
		opacity: 0.8;
	}

	#site-navigation .navigation-branding .site-logo,
	#site-navigation .navigation-branding .site-logo img,
	#site-navigation .navigation-branding .header-image {
		max-width: 80px;
		width: 80px;
		height: auto;
		filter: brightness(0) invert(1);
		position: static !important;
		transform: none !important;
	}

	#site-navigation .navigation-branding a {
		display: flex;
		align-items: center;
		justify-content: center;
		position: static !important;
		transform: none !important;
	}

	/* Force the sticky logo wrapper to be visible inside off-canvas */
	#site-navigation .navigation-branding .sticky-navigation-logo,
	#site-navigation .navigation-branding .mobile-header-navigation,
	#site-navigation .navigation-branding>* {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
		height: auto !important;
	}

	#site-navigation .navigation-branding .sticky-navigation-logo a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: auto !important;
		height: auto !important;
	}

	#site-navigation .navigation-branding img,
	#site-navigation .navigation-branding .is-logo-image {
		display: block !important;
		width: 80px !important;
		max-width: 80px !important;
		height: auto !important;
		min-height: 0 !important;
		filter: brightness(0) invert(1) !important;
		position: static !important;
		transform: none !important;
	}

	#site-navigation .navigation-search {
		display: none !important;
	}

	#site-navigation .menu-bar-items {
		display: none !important;
	}

	/* ── Main nav ── */
	.main-nav {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		display: flex;
		padding-top: 0;
		background: transparent !important;
		background-color: transparent !important;
		height: auto !important;
		flex: 0 0 auto !important;
	}

	.main-nav ul {
		flex-direction: column;
		width: 100%;
		gap: 4px;
		display: flex;
		list-style: none;
		margin: 0;
		padding: 20px 18px;
		min-width: 0;
		min-height: 0;
		box-sizing: border-box;
		background: transparent !important;
		background-color: transparent !important;
	}

	/* Kill ALL blue backgrounds from GP Customizer in the menu panel */
	#site-navigation .inside-navigation,
	#site-navigation .main-nav,
	#site-navigation .main-nav>ul,
	#site-navigation .main-nav ul,
	#site-navigation .main-nav ul li,
	.main-navigation .inside-navigation,
	.main-navigation .main-nav,
	.main-navigation .main-nav>ul,
	.main-navigation .main-nav ul {
		background-color: transparent !important;
		background-image: none !important;
	}

	#site-navigation.toggled .main-nav,
	.main-navigation.toggled .main-nav {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	#site-navigation.toggled .main-nav ul,
	.main-navigation.toggled .main-nav ul {
		display: flex !important;
		border-radius: 0;
	}

	/* ═══ SECTION LABEL — "NAVIGATION" above menu items ═══ */
	.main-nav>ul::before {
		content: 'N A V I G A T I O N';
		display: block;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.45);
		padding: 0 4px 14px;
		width: 100%;
		box-sizing: border-box;
	}

	/* ═══ MENU ITEMS ═══ */
	.main-nav ul li {
		width: 100%;
		border-bottom: none;
		position: relative;
		display: block;
		margin: 0;
	}

	.main-nav>ul>li:last-child {
		border-bottom: none;
	}

	.main-nav>ul>li+li::before {
		display: none;
	}

	/* ── Individual menu item ── */
	.main-nav ul li a {
		padding: 16px 18px 16px 18px;
		border-radius: 10px !important;
		width: 100%;
		margin: 0;
		font-size: 14px;
		line-height: 1.5;
		display: flex !important;
		align-items: center;
		gap: 16px;
		text-decoration: none;
		color: rgba(255, 255, 255, 0.85) !important;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		font-weight: 500;
		background: rgba(255, 255, 255, 0.06) !important;
		border: 1px solid rgba(255, 255, 255, 0.08);
		position: relative;
		min-height: 56px;
		box-sizing: border-box;
		letter-spacing: 0.8px;
		text-transform: capitalize;
		border-left: none;
	}

	.main-navigation .main-nav ul li a {
		padding: 16px 18px;
		border-bottom: none !important;
		min-height: 56px;
		box-sizing: border-box;
		font-display: swap;
		width: 100%;
		max-width: 100%;
	}

	.main-navigation .main-nav ul li.menu-item-has-children>a {
		padding-right: 2.5rem;
	}

	/* ── Hover state ── */
	.main-nav ul li a:hover,
	.main-nav ul li a:focus {
		color: #ffffff !important;
		background: rgba(255, 255, 255, 0.14) !important;
		border-color: rgba(255, 255, 255, 0.15);
		border-radius: 10px !important;
		transform: none;
	}

	/* ── Active / Current item ── */
	.main-nav ul li.current-menu-item>a,
	.main-nav ul li.current-menu-ancestor>a {
		color: #ffffff !important;
		background: rgba(255, 255, 255, 0.18) !important;
		border-color: rgba(255, 255, 255, 0.2);
		border-radius: 10px !important;
		transform: none;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	}

	/* ── Disable desktop ::after underline ── */
	.main-nav>ul>li>a::after {
		content: none !important;
		display: none !important;
	}

	/* ── Glowing left accent on active ── */
	.main-nav ul li.current-menu-item>a::after,
	.main-nav ul li.current-menu-ancestor>a::after {
		content: none !important;
		display: none !important;
	}

	.main-nav ul li.current-menu-item>a::before,
	.main-nav ul li.current-menu-ancestor>a::before {
		display: inline-block;
	}

	/* Current Menu Item */
	.main-navigation .main-nav ul li[class*="current-menu-"]>a {
		color: #ffffff !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.18) !important;
		font-weight: 600;
	}

	.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover>a,
	.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus>a,
	.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"])>a,
	.main-navigation .menu-bar-item:hover>a,
	.main-navigation .menu-bar-item.sfHover>a {
		color: #ffffff !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.14) !important;
	}

	/* ── Icons — blue tinted ── */
	.main-nav>ul>li>a::before {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
		opacity: 0.85 !important;
		filter: none !important;
		transition: opacity 0.3s ease !important;
	}

	.main-nav ul li a:hover::before {
		opacity: 1 !important;
	}

	.main-nav ul li.current-menu-item>a::before,
	.main-nav ul li.current-menu-ancestor>a::before {
		opacity: 1 !important;
		filter: none !important;
	}

	/* Dropdown toggle button for mobile */
	.main-nav ul li.menu-item-has-children .dropdown-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 1rem;
		top: 50%;
		transform: translateY(-50%);
		width: 24px;
		height: 24px;
		min-width: 24px;
		min-height: 24px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		background: rgba(255, 255, 255, 0.15);
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		padding: 0;
		margin: 0;
		color: rgba(255, 255, 255, 0.8);
		z-index: 2;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.main-nav ul li.menu-item-has-children .dropdown-menu-toggle:hover {
		background: rgba(255, 255, 255, 0.25);
		color: #ffffff;
		transform: translateY(-50%) scale(1.05);
	}

	.main-nav ul li.menu-item-has-children .dropdown-menu-toggle:active {
		transform: translateY(-50%) scale(0.95);
		background: #2569c4;
	}

	.main-nav ul li.toggled .dropdown-menu-toggle {
		transform: translateY(-50%) rotate(180deg);
		background: #2569c4;
		color: #ffffff;
		box-shadow: 0 2px 8px rgba(58, 139, 232, 0.4);
	}


	/* Mobile dropdown menus - Modern Futuristic Animated */
	.main-nav ul ul {
		position: static;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px) scale(0.98);
		box-shadow: 0 8px 24px rgba(0, 122, 255, 0.15), 0 0 0 1px rgba(74, 144, 226, 0.1) inset;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 255, 0.95) 100%);
		margin: 0.5rem 1rem 0.5rem 1rem;
		padding: 0.5rem;
		display: none;
		border-radius: 12px;
		border: 1px solid rgba(74, 144, 226, 0.2);
		width: calc(100% - 2rem);
		flex-direction: column;
		list-style: none;
		backdrop-filter: blur(16px) saturate(180%);
		-webkit-backdrop-filter: blur(16px) saturate(180%);
		transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
		position: relative;
	}

	.main-nav ul ul::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--piximfix-header-gradient), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.main-nav ul ul::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: radial-gradient(circle at 50% 0%, rgba(74, 144, 226, 0.08) 0%, transparent 70%);
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.main-nav ul li.toggled>ul,
	.main-nav ul ul.toggled-on {
		display: flex !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) scale(1) !important;
		animation: submenuReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.main-nav ul li.toggled>ul::before,
	.main-nav ul ul.toggled-on::before {
		opacity: 1;
		animation: shimmerLine 1.5s ease-in-out infinite;
	}

	.main-nav ul li.toggled>ul::after,
	.main-nav ul ul.toggled-on::after {
		opacity: 1;
	}

	@keyframes submenuReveal {
		0% {
			opacity: 0;
			transform: translateY(-12px) scale(0.96);
			filter: blur(4px);
		}

		50% {
			opacity: 0.8;
			transform: translateY(-4px) scale(0.99);
			filter: blur(2px);
		}

		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
			filter: blur(0);
		}
	}

	@keyframes shimmerLine {

		0%,
		100% {
			opacity: 0.6;
			transform: translateX(-100%);
		}

		50% {
			opacity: 1;
			transform: translateX(100%);
		}
	}

	.main-nav ul ul li {
		width: 100%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
		position: relative;
		opacity: 0;
		transform: translateX(-8px);
		animation: submenuItemFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.main-nav ul li.toggled>ul li,
	.main-nav ul ul.toggled-on li {
		animation: submenuItemFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.main-nav ul li.toggled>ul li:nth-child(1) {
		animation-delay: 0.05s;
	}

	.main-nav ul li.toggled>ul li:nth-child(2) {
		animation-delay: 0.1s;
	}

	.main-nav ul li.toggled>ul li:nth-child(3) {
		animation-delay: 0.15s;
	}

	.main-nav ul li.toggled>ul li:nth-child(4) {
		animation-delay: 0.2s;
	}

	.main-nav ul li.toggled>ul li:nth-child(5) {
		animation-delay: 0.25s;
	}

	.main-nav ul li.toggled>ul li:nth-child(6) {
		animation-delay: 0.3s;
	}

	.main-nav ul li.toggled>ul li:nth-child(7) {
		animation-delay: 0.35s;
	}

	.main-nav ul li.toggled>ul li:nth-child(8) {
		animation-delay: 0.4s;
	}

	@keyframes submenuItemFadeIn {
		from {
			opacity: 0;
			transform: translateX(-8px);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.main-nav ul ul li:last-child {
		border-bottom: none;
	}

	.main-nav ul ul li a {
		padding: 0.625rem 1rem;
		font-size: 0.875rem;
		margin: 0.125rem 0;
		border-radius: 8px;
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		line-height: 1.5;
		min-height: 40px;
		display: flex;
		align-items: center;
		color: #0F1724;
		font-weight: 500;
		text-decoration: none;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		background: transparent;
		border: 1px solid transparent;
		overflow: hidden;
	}

	.main-nav ul ul li a::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 0;
		background: var(--piximfix-header-gradient);
		transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		opacity: 0.15;
		z-index: 0;
	}

	.main-nav ul ul li a::after {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 60%;
		background: var(--piximfix-header-gradient);
		border-radius: 0 4px 4px 0;
		transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		opacity: 0;
		z-index: 1;
	}

	.main-nav ul ul li a:hover,
	.main-nav ul ul li a:focus {
		background: linear-gradient(90deg, rgba(74, 144, 226, 0.1) 0%, rgba(0, 122, 255, 0.08) 100%);
		color: var(--piximfix-header-accent);
		transform: translateX(4px);
		border-color: rgba(74, 144, 226, 0.15);
		box-shadow: 0 2px 8px rgba(74, 144, 226, 0.12), 0 0 0 1px rgba(74, 144, 226, 0.08) inset;
		position: relative;
		z-index: 1;
	}

	.main-nav ul ul li a:hover::before,
	.main-nav ul ul li a:focus::before {
		width: 100%;
		opacity: 0.1;
	}

	.main-nav ul ul li a:hover::after,
	.main-nav ul ul li a:focus::after {
		width: 3px;
		opacity: 1;
	}

	/* Note: ::after pseudo-element is used for hover effects above, don't hide it */

	.main-nav ul ul li:not(:last-child)::after {
		display: none;
	}

	.main-nav ul ul li.menu-item-has-children>a::before {
		right: 1.5rem;
	}

	/* Nested submenus (level 3) in mobile */
	.main-nav ul ul ul {
		background: #F5F8FF;
		margin: 0.25rem 0.375rem 0 0.375rem;
		border-left: 2px solid var(--piximfix-header-accent-soft);
		padding: 0.25rem 0;
		border-radius: 6px;
	}

	.main-nav ul ul ul li a {
		font-size: 0.8125rem;
		padding: 0.4375rem 0.625rem;
		color: #0F1724;
	}

	.main-nav ul ul ul li a:hover,
	.main-nav ul ul ul li a:focus {
		background: rgba(0, 122, 255, 0.1);
		color: var(--piximfix-header-accent);
	}

	/* Show mobile menu toggle - Right Corner - Modern Design */
	.menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle {
		display: flex !important;
		order: 3;
		width: 42px;
		height: 42px;
		padding: 0;
		border: none;
		background: var(--piximfix-header-gradient);
		margin-left: 0;
		margin-right: 0;
		flex-shrink: 0;
		position: absolute;
		right: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		border-radius: 12px;
		box-shadow: 0 12px 28px rgba(0, 122, 255, 0.3),
			0 6px 14px rgba(74, 144, 226, 0.25);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		gap: 0;
		width: auto;
		height: auto;
		min-width: 42px;
		min-height: 42px;
	}

	.menu-toggle:hover,
	.mobile-menu-control-wrapper .menu-toggle:hover {
		background: linear-gradient(135deg, var(--piximfix-header-accent) 0%, var(--piximfix-header-accent-dark) 100%);
		transform: translateY(-50%) scale(1.05);
		box-shadow: 0 12px 24px rgba(0, 122, 255, 0.32),
			0 6px 14px rgba(74, 144, 226, 0.24);
	}

	.menu-toggle:active,
	.mobile-menu-control-wrapper .menu-toggle:active {
		transform: translateY(-50%) scale(0.95);
	}

	.menu-toggle:before {
		content: "\f0c9";
		font-family: GeneratePress;
		width: 48px;
		text-align: center;
		display: inline-block;
		color: white;
	}

	.menu-toggle svg,
	.mobile-menu-control-wrapper .menu-toggle svg {
		width: 20px;
		height: 20px;
		fill: rgb(255, 255, 255);
		stroke: none;
		transition: transform 0.3s ease;
		display: block;
	}

	.menu-toggle:hover svg,
	.mobile-menu-control-wrapper .menu-toggle:hover svg {
		transform: rotate(90deg);
	}

	.menu-toggle.toggled svg,
	.mobile-menu-control-wrapper .menu-toggle.toggled svg {
		transform: rotate(180deg);
	}

	.menu-bar-items {
		order: 1;
		margin-left: 0;
		gap: 0.5rem;
		display: none;
	}

	/* Show search icon on mobile */
	.menu-bar-item.search-item {
		display: flex;
	}

	/* Hide search field on mobile */
	.navigation-search {
		display: none;
	}

	/* Responsive adjustments for animated search */
	.header-animated-search {
		width: 50px;
		height: 50px;
	}

	.header-animated-search:hover,
	.header-animated-search:focus-within {
		width: 220px;
	}

	.header-animated-search .search-icon-wrapper {
		width: 50px;
		height: 50px;
	}

	.header-animated-search .search-input {
		font-size: 16px;
	}

	html.menu-open,
	body.menu-open {
		overflow: hidden;
	}

	/* Close button or click outside to close */
	#mobile-header {
		display: none !important;
	}

	.header-widget {
		display: none;
	}

	/* Mobile Search - Left Side */
	.header-search-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* order removed - element hidden */
		position: absolute;
		left: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		flex-shrink: 0;
	}

	.header-search-container.active .header-search-form {
		width: calc(100vw - 100px);
		max-width: 280px;
		left: 0;
		right: auto;
		top: calc(100% + 8px);
		transform: translateY(0) scale(1);
	}

	.header-search-toggle {
		width: 36px;
		height: 36px;
		background: var(--piximfix-header-hover-surface);
	}

	.header-search-toggle svg {
		width: 16px;
		height: 16px;
	}

	.header-search-form {
		top: calc(100% + 8px);
		right: 0;
		transform: translateY(0) scale(0.95);
	}

	.header-search-form form {
		padding: 0.5rem 0.75rem;
		min-width: auto;
		gap: 0.5rem;
	}

	.header-search-form input[type="search"],
	.header-search-form input[type="text"] {
		font-size: 0.875rem;
		padding: 0.5rem 0.25rem;
	}

	.header-search-form button[type="submit"] {
		width: 32px;
		height: 32px;
	}

	.header-search-form button[type="submit"] svg {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 480px) {
	.inside-header {
		padding: 1px;
		gap: 0px;
		min-height: 35px;
		justify-content: space-between;
		flex-wrap: nowrap;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Logo - Center */
	.site-branding-container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		order: 2;
		gap: 0.4rem;
		z-index: 1;
		width: auto;
		margin: 0;
		flex-shrink: 0;
	}

	.site-logo,
	.site-logo img,
	.header-image.is-logo-image {
		max-width: 160px;
		width: 160px;
		min-height: 50px;
	}

	.site-logo a {
		width: 160px;
		min-height: 50px;
	}

	.main-title {
		font-size: 1.1rem;
		line-height: 1.2;
	}

	.site-description {
		display: none;
	}

	.menu-bar-items {
		gap: 0.4rem;
	}

	.menu-bar-item {
		width: 32px;
		height: 32px;
	}

	.header-search-container {
		left: 0.75rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		flex-shrink: 0;
	}

	.header-search-toggle {
		width: 36px;
		height: 36px;
	}

	.header-search-toggle svg {
		width: 16px;
		height: 16px;
		stroke: rgb(255 255 255);
		fill: none;
		display: block;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle {
		width: 32px;
		height: 32px;
		position: absolute;
		right: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 12px;
		background: var(--piximfix-header-gradient);
		box-shadow: 0 10px 22px rgba(0, 122, 255, 0.32),
			0 5px 12px rgba(74, 144, 226, 0.24);
		flex-shrink: 0;
	}

	.menu-toggle svg,
	.mobile-menu-control-wrapper .menu-toggle svg {
		width: 20px;
		height: 20px;
		fill: rgb(255, 255, 255);
		stroke: none;
	}

	.header-search-container.active .header-search-form {
		width: calc(100vw - 80px);
		max-width: 260px;
		left: 0;
	}

	.main-nav ul li a {
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
	}

	.main-nav ul ul li a {
		padding: 0.3rem 1rem 0.3rem 2rem;
		font-size: 0.8rem;
	}
}

/* Animated Search Field - Header Search */
.header-animated-search {
	width: 60px;
	height: 60px;
	background: var(--piximfix-header-gradient);
	border-radius: 50px;
	box-shadow: 0 16px 38px rgba(0, 122, 255, 0.28);
	display: flex;
	align-items: center;
	overflow: hidden;
	transition: all 0.3s ease;
	margin-left: auto;
	order: 3;
	cursor: pointer;
	position: relative;
}

.header-animated-search:hover,
.header-animated-search:focus-within {
	width: 270px;
}

.header-animated-search .search-icon-wrapper {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	fill: #ffffff;
	pointer-events: none;
}

.header-animated-search svg {
	width: 22px;
	height: 22px;
	fill: #ffffff;
}

.header-animated-search .header-search-form {
	display: flex;
	align-items: center;
	flex: 1;
	height: 100%;
}

.header-animated-search .search-input {
	outline: none;
	background: transparent;
	width: 100%;
	color: #ffffff;
	font-size: 20px;
	font-weight: normal;
	padding: 0 1rem;
	border: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	flex: 1;
	min-width: 0;
}

.header-animated-search:hover .search-input,
.header-animated-search:focus-within .search-input {
	opacity: 1;
}

.header-animated-search .search-input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.header-animated-search .header-search-form {
	display: flex;
	align-items: center;
	flex: 1;
	height: 100%;
	min-width: 0;
}

/* Navigation Search - Header Search Field */
.navigation-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	order: 3;
}

.navigation-search .search-field {
	padding: 0.625rem 1.25rem;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 25px;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	width: 200px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--piximfix-offcanvas-text);
}

.navigation-search .search-field::placeholder {
	color: var(--piximfix-offcanvas-text-muted);
	opacity: 0.7;
}

.navigation-search .search-field:focus {
	outline: none;
	border-color: var(--piximfix-header-accent);
	width: 250px;
	box-shadow: 0 0 0 3px var(--piximfix-focus-glow);
}

.navigation-search .search-field:hover {
	border-color: rgba(74, 144, 226, 0.55);
}

/* Search form styling */
.search-form.navigation-search {
	display: flex;
	align-items: center;
}

/* Position search in header */
.inside-header .navigation-search {
	margin-left: 1rem;
}

/* Position search when navigation is in header */
.nav-float-right .inside-header .navigation-search,
.nav-float-left .inside-header .navigation-search {
	margin-left: 1rem;
}

/* Search in menu bar items */
.menu-bar-items .navigation-search {
	margin-left: 0;
}

/* Hide search icon button on desktop when search field is visible */
.menu-bar-item.search-item {
	display: none;
}

/* Header Alignment Variants */
.header-aligned-center .inside-header {
	justify-content: center;
}

.header-aligned-center .site-branding-container {
	margin: 0 auto;
}

.header-aligned-right .inside-header {
	justify-content: flex-end;
}

.header-aligned-right .site-branding-container {
	order: 2;
}

.header-aligned-right #site-navigation {
	order: 1;
}

/* Navigation Float Variants */
.nav-float-right .inside-header {
	justify-content: center;
}

.nav-float-right #site-navigation {
	margin-left: auto;
}

.nav-float-left .inside-header {
	justify-content: space-between;
}

.nav-float-left #site-navigation {
	order: -1;
}

/* Smooth Scroll Behavior */
html {
	scroll-behavior: smooth;
}

/* Accessibility Improvements */
.menu-toggle:focus,
.main-nav a:focus {
	outline: 2px solid var(--piximfix-header-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18);
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* Submenu Animation - Removed unused animation (handled by CSS transitions) */

/* Slideout Navigation Styles */
.main-navigation.slideout-navigation .main-nav>ul>li>a {
	line-height: 25px;
}

/* Disable legacy left slideout navigation (but NOT .slideout-overlay) */
.slideout-navigation,
#generate-slideout-menu,
#generate-slideout-menu~.slideout-overlay {
	display: none !important;
	pointer-events: none !important;
}

/* When menu is closed, hide the overlay */
.slideout-overlay {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/* Override: Show overlay when menu IS open (must come AFTER the legacy disable) */
html.slide-opened .slideout-overlay,
html.slide-opened #generate-slideout-menu~.slideout-overlay,
html.mobile-menu-open .slideout-overlay {
	display: block !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	z-index: 9998 !important;
	/* FIXED: lowered from 9999 so it sits behind the 9999 root */
	pointer-events: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	cursor: pointer;
}

/* ── iOS Safe Scroll Locking ── */
html.slide-opened,
html.mobile-menu-open,
html.slide-opened body,
html.mobile-menu-open body {
	overflow: hidden !important;
	overscroll-behavior: none !important;
}

/* Safari specific scrolling fix */
@supports (-webkit-touch-callout: none) {

	html.slide-opened body,
	html.mobile-menu-open body {
		height: 100dvh !important;
		touch-action: none !important;
	}
}

/* Hide: redundant close button when menu IS open */
html.slide-opened button.slideout-exit,
html.mobile-menu-open button.slideout-exit {
	display: none !important;
	visibility: hidden !important;
}

/* Print Styles */
@media print {
	.site-header {
		position: static;
		box-shadow: none;
	}

	.menu-toggle,
	.menu-bar-items,
	#site-navigation {
		display: none;
	}
}

.main-navigation .main-nav>ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
	max-width: 480px;
}

/* ---------------------------------------------------------------
   SMART STICKY HEADER REPAIR (MOBILE)
   --------------------------------------------------------------- */
@media (max-width: 1274px) {
	#sticky-navigation {
		background: var(--piximfix-header-gradient) !important;
		box-shadow: var(--piximfix-header-shadow) !important;
		width: 100vw !important;
		max-width: 100% !important;
		padding: 5px !important;
		left: 0 !important;
		display: block !important;
	}

	#sticky-navigation .inside-navigation {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 0 !important;
		width: 100% !important;
	}

	/* Restore Logo inside sticky nav */
	#sticky-navigation .navigation-branding {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		display: flex !important;
	}

	#sticky-navigation .navigation-branding img,
	#sticky-navigation .sticky-navigation-logo img {
		filter: brightness(0) invert(1) !important;
		/* Make logo white */
		width: 100px !important;
		max-width: 100px !important;
		height: auto !important;
		min-height: 35px !important;
	}

	/* Restore hamburger toggle wrapper that we cloned via JS */
	#sticky-navigation .mobile-menu-control-wrapper {
		display: flex !important;
		order: 99 !important;
	}

	#sticky-navigation .mobile-menu-control-wrapper .menu-toggle {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		color: white !important;
		align-items: center !important;
		justify-content: center !important;
		width: 32px !important;
		height: 32px !important;
		background: transparent !important;
	}

	#sticky-navigation .mobile-menu-control-wrapper .menu-toggle svg {
		fill: white !important;
		width: 20px !important;
		height: 20px !important;
	}

	/* Hide desktop menu items completely from sticky header */
	#sticky-navigation .main-nav {
		display: none !important;
	}
}


/* Force main header to be unsticky on mobile to prevent double-header overlap */
@media (max-width: 1274px) {
	.site-header {
		position: relative !important;
		top: auto !important;
		z-index: auto !important;
	}
}
/* CLS Fix: Explicit fallback font chain for nav */
.site-header, .main-nav, .main-nav a, #primary-menu a {
    font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
}