/* ============================================================================
   PanOxyl Header — styles for the rebuilt header.php  (v2)
   ----------------------------------------------------------------------------
   Key change vs v1: Max Mega Menu styles its menus with TWO ID selectors
   (#mega-menu-wrap-menu-1 #mega-menu-menu-1), which out-specifies plain class
   rules. So every nav-layout rule below is prefixed with .pox-header (class +
   2 IDs) and uses !important on the load-bearing properties to win the cascade.

   Also: the mega-PANEL rules that used to live in the theme's inline <style>
   are restored at the bottom (their selectors still match MMM's output), and
   .container is widened so the bar has room.
   ========================================================================== */

:root {
	--pox-blue:        #243e8c;
	--pox-blue-dark:   #20285c;
	--pox-blue-darkest:#111c3a;
	--pox-yellow:      #fac22b;
	--pox-blue-light:  #9fb6e6;

	/* "The Spot" logo dot palette (pulled from Logo_TheSpotbyPanOxyl SVG) */
	--spot-blue:   #69b5de;
	--spot-yellow: #fac22b;
	--spot-orange: #f58120;
	--spot-pink:   #ff947c;

	--pox-nav-font:  "Gotham", "Helvetica Neue", Arial, sans-serif;
	--pox-logo-font: "TradeGothic LT CondEighteen", "Arial Narrow", sans-serif;

	--pox-bar-h:   clamp(64px, 9.5vh, 96px);
	--pox-nav-fs:  clamp(0.85rem, 0.55rem + 0.55vw, 1.12rem);
	--pox-logo-fs: clamp(2.2rem, 1.2rem + 2.2vw, 3.8rem);
	--pox-gap:     clamp(0.8rem, 0.2rem + 1.15vw, 2.3rem);
}

/* shell ------------------------------------------------------------------- */
/* sticky on every viewport — pins the bar to the top while scrolling.
   (sticky also establishes the positioning context relative used to provide.) */
.pox-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; }
.pox-header__bar { background: var(--pox-blue); overflow: visible; }

/* Bar container: 84vw with ~8vw breathing room on each side (per the original) */
.pox-header__bar > .container {
	max-width: 84vw;
	width: 100%;
	margin-inline: auto;
	padding-inline: 0;
	position: relative;
}

.pox-header__inner { position: relative; width: 100%; min-height: var(--pox-bar-h); }

.pox-header__logo { display: inline-flex; align-items: center; text-decoration: none; color: #fff; line-height: 1; }
.pox-header__logo .icon-PanOxyl-Logo { font-size: var(--pox-logo-fs); line-height: 1; }
.pox-header .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   MOBILE CHROME (hamburger + top bar) — base rules.
   The top bar is display:none by default and only switched on inside the
   mobile media query, so desktop is completely unaffected by any of this.
   The hamburger->X transform is width-agnostic and lives here.
   ========================================================================== */
.pox-header__mobilebar { display: none; }            /* shown only on mobile */
.pox-header__logo--mobile { color: #fff; text-decoration: none; line-height: 1; }

.pox-header__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0; margin: 0;
	background: none; border: 0; cursor: pointer; color: #fff;
}
.pox-header__toggle-box { position: relative; display: inline-block; width: 24px; height: 18px; }
.pox-header__toggle-inner,
.pox-header__toggle-inner::before,
.pox-header__toggle-inner::after {
	position: absolute; left: 0; width: 24px; height: 2px;
	background: #fff; border-radius: 2px;
	transition: transform .25s ease, top .25s ease, background-color .15s ease;
}
.pox-header__toggle-inner { top: 50%; margin-top: -1px; }
.pox-header__toggle-inner::before { content: ""; top: -8px; }
.pox-header__toggle-inner::after  { content: ""; top:  8px; }

/* open state -> X */
.pox-header.is-open .pox-header__toggle-inner { background: transparent; }
.pox-header.is-open .pox-header__toggle-inner::before { top: 0; transform: rotate(45deg); background: #fff; }
.pox-header.is-open .pox-header__toggle-inner::after  { top: 0; transform: rotate(-45deg); background: #fff; }

/* ==========================================================================
   DESKTOP (>= 1024.98px) — 3-column grid, MMM menus forced compact
   ========================================================================== */
@media (min-width: 1024.98px) {

	.pox-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--pox-gap);
	}

	/* ROOT-CAUSE FIX -------------------------------------------------------
	   The top-level mega-panels must stay OUT of normal flow. If they sit in
	   the flow (position:static), each panel-owning <li> reserves the panel's
	   full height inside the bar, which shoves All Products / About / Where To
	   Buy (and their row-mates) up and off the top of the page. Forcing the
	   panels absolute removes that reserved height. (Nested rows/columns are
	   left alone so the open panel still lays out normally.) */
	.pox-header #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu,
	.pox-header #mega-menu-menu-2 > li.mega-menu-item > ul.mega-sub-menu {
		position: absolute !important;
	}

	/* Cells FILL their 1fr columns (do NOT shrink to content — that collapse is
	   what was dropping "PanOxyl Difference" onto a 2nd row). Each cell is a flex
	   row that pins its menu to the correct edge. */
	.pox-header__menu--left  { min-width: 0; display: flex; align-items: center; justify-content: flex-start; }
	.pox-header__logo        { justify-self: center; }
	.pox-header__menu--right { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--pox-gap); }

	/* --- MMM menus: single row, never wrap, sit on one line at their edge. --- */
	.pox-header #mega-menu-wrap-menu-1,
	.pox-header #mega-menu-wrap-menu-2 { width: auto !important; background: none !important; }

	.pox-header #mega-menu-wrap-menu-1 #mega-menu-menu-1,
	.pox-header #mega-menu-wrap-menu-2 #mega-menu-menu-2 {
		display: flex !important;
		flex-wrap: nowrap !important;          /* one line, never a 2nd row */
		align-items: center !important;        /* vertically center links with the logo */
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		gap: var(--pox-gap) !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
	}
	.pox-header #mega-menu-wrap-menu-1 #mega-menu-menu-1 { justify-content: flex-start !important; }
	.pox-header #mega-menu-wrap-menu-2 #mega-menu-menu-2 { justify-content: flex-end !important; }

	.pox-header #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item,
	.pox-header #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	.pox-header #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link,
	.pox-header #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item > a.mega-menu-link {
		display: flex !important;
		align-items: center !important;   /* MMM pins indicator-links' text to the top without this */
		gap: .4em;
		/*height: var(--pox-bar-h) !important;   identical box height for every link */
		padding: 0 .4em !important;
		font-family: var(--pox-nav-font) !important;
		font-size: var(--pox-nav-fs) !important;
		font-weight: 500 !important;
		line-height: 1 !important;
		text-transform: none !important;   /* design uses Title Case, not UPPERCASE */
		white-space: nowrap !important;
		color: #fff;
		background: none;
		transition: color .18s ease, background-color .18s ease;
	}

	/* plain links -> light blue on hover */
	.pox-header #mega-menu-menu-1 > li.mega-menu-item:not(.mega-menu-megamenu):not(.join-the-spot) > a.mega-menu-link:hover,
	.pox-header #mega-menu-menu-2 > li.mega-menu-item:not(.mega-menu-megamenu):not(.join-the-spot) > a.mega-menu-link:hover {
		color: var(--pox-blue-light) !important;
	}

	/* open mega trigger -> white tab meeting the white panel */
	.pox-header #mega-menu-menu-1 > li.mega-menu-megamenu.mega-toggle-on > a.mega-menu-link,
	.pox-header #mega-menu-menu-2 > li.mega-menu-megamenu.mega-toggle-on > a.mega-menu-link,
	.pox-header #mega-menu-menu-1 > li.mega-menu-megamenu > a.mega-menu-link:hover,
	.pox-header #mega-menu-menu-2 > li.mega-menu-megamenu > a.mega-menu-link:hover {
		background: #fff !important;
		color: var(--pox-blue) !important;
	}

	/* search button */
	.pox-header__search {
		display: inline-flex; align-items: center; justify-content: center;
		height: var(--pox-bar-h); padding: 0 .35em; margin: 0; min-width: 0;
		background: none; border: 0; color: #fff; cursor: pointer;
	}
	.pox-header__search i { padding: 0; font-size: 1.05em; }
	.pox-header__search:hover { color: var(--pox-blue-light); }
}

/* ==========================================================================
   MOBILE (<= 1024.98px) — hamburger top bar + single full-width drawer.
   Both MMM menus stack (menu-1 above menu-2); MMM's own mobile accordion +
   chevrons handle submenus, exactly like the previous header build.
   ========================================================================== */
@media (max-width: 1024.98px) {

	/* ----------------------------------------------------------------------
	   PROGRESSIVE ENHANCEMENT — the drawer only COLLAPSES once JS has marked
	   the header `.pox-js` (and a hamburger therefore exists). Before/without
	   JS the menus stay visible, so the header can never collapse to 0px or
	   vanish. The JS injects the top bar + hamburger if header.php doesn't
	   already provide them, so updating only the CSS/JS is enough.
	   ---------------------------------------------------------------------- */

	/* stack both menus full width — applies with or without JS */
	.pox-header__menu { display: block; width: 100%; }

	/* MMM emits its own per-menu mobile toggle; we use ONE hamburger instead */
	.pox-header .mega-menu-toggle { display: none !important; }

	/* top bar (authored in header.php OR injected by JS) */
	.pox-header__mobilebar {
		display: flex; align-items: center; justify-content: space-between;
		min-height: var(--pox-bar-h); width: 100%;
		padding: 0 1.25rem;
	}
	.pox-header__logo--mobile { display: inline-flex; align-items: center; }
	.pox-header__logo--mobile .icon-PanOxyl-Logo { font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1; }
	.pox-header__mobilebar-buttons { display: flex; align-items: center; gap: .25rem; }
	.pox-header__mobilebar .pox-header__search {
		display: inline-flex; align-items: center; justify-content: center;
		width: 2.75rem; height: 2.75rem; padding: 0; margin: 0;
		background: none; border: 0; color: #fff; cursor: pointer;
	}
	.pox-header__mobilebar .pox-header__search i { font-size: 1.2rem; }

	/* ---- JS-enhanced drawer mode (only when `.pox-js` is present) ---- */
	/* 1.5rem top padding positions the logo / search / hamburger correctly */
	.pox-header__bar { padding-top: 1.5rem !important; }
	.pox-header.pox-js .pox-header__bar > .container { max-width: 100%; padding-inline: 0; }

	/* a 6px blue rule under the bar — only while the drawer is open */
	.pox-header.pox-js.is-open .pox-header__bar { border-bottom: 6px solid var(--pox-blue); }

	/* the drawer slides: collapsed height 0 -> JS sets the real height for a
	   smooth measured open/close (CSS max-height below is the no-JS fallback) */
	.pox-header.pox-js .pox-header__inner {
		display: block;
		width: 100%;
		background: #fff;
		overflow: hidden;
		min-height: 0;          /* base sets min-height to the bar height; that
		                           overrides max-height:0 and leaves the first item
		                           peeking out when collapsed — clear it here */
		max-height: 0;
		transition: max-height .35s ease;
	}
	.pox-header.pox-js.is-open .pox-header__inner { max-height: 200vh; }

	/* the center logo belongs in the top bar, not in the drawer.
	   Robust to its class — matches `pox-header__logo` OR `--desktop`. */
	.pox-header.pox-js .pox-header__inner > .pox-header__logo { display: none !important; }

	/* search lives in the top bar -> hide the in-drawer one */
	.pox-header.pox-js .pox-header__menu--right .pox-header__search { display: none; }

	/* ----------------------------------------------------------------------
	   JOIN THE SPOT on mobile:
	   - sparkles sit to the RIGHT of the text (inline), so the link keeps the
	     same vertical height as every other menu item
	   - animation runs unconditionally (no hover needed)
	   - text inherits the blue MMM link colour so it reads on the white panel
	   ---------------------------------------------------------------------- */
	/* NOTE: the base sparkle rules appear later in this file, so these mobile
	   overrides use the higher-specificity `a.mega-menu-link.jts ...` form to
	   win the cascade regardless of source order. */
	a.mega-menu-link.jts .jts__wrap { display: inline-flex; align-items: center; }
	/* This link is the current page (mega-current-menu-item), so `inherit` picks
	   up MMM's light-blue current-item colour. Force the brand dark blue so it
	   matches the sibling links; adjust the value if your links use a different navy. */
	.pox-header a.mega-menu-link.jts .jts__text { order: 0; color: var(--pox-blue); }
	/* and don't let the desktop hover-highlight fire on touch */
	.pox-header a.mega-menu-link.jts:hover .jts__text,
	.pox-header a.mega-menu-link.jts:focus .jts__text,
	.pox-header a.mega-menu-link.jts:focus-visible .jts__text { color: var(--pox-blue); }
	a.mega-menu-link.jts .jts__sparkles {
		order: 1;                 /* after the text == to its right */
		position: relative;       /* was absolute/above on desktop */
		left: auto; bottom: auto; transform: none;
		margin: 0 0 0 .5em;
		width: 2em; height: 1.2em;
	}
	a.mega-menu-link.jts .jts__spark--main { animation: jts-pulse   1.4s  ease-in-out infinite; }
	a.mega-menu-link.jts .jts__spark--a    { animation: jts-twinkle 1.15s ease-in-out       infinite; }
	a.mega-menu-link.jts .jts__spark--b    { animation: jts-twinkle 1.15s ease-in-out .28s  infinite; }
	a.mega-menu-link.jts .jts__spark--c    { animation: jts-twinkle 1.15s ease-in-out .55s  infinite; }
}

/* reduced-motion: keep the sparkles visible but static on mobile, no slide */
@media (max-width: 1024.98px) and (prefers-reduced-motion: reduce) {
	.pox-header.pox-js .pox-header__inner { transition: none; }
	a.mega-menu-link.jts .jts__spark { animation: none !important; }
	a.mega-menu-link.jts .jts__spark--a,
	a.mega-menu-link.jts .jts__spark--b,
	a.mega-menu-link.jts .jts__spark--c { opacity: 1; }
}

/* ==========================================================================
   "JOIN THE SPOT" — sparkle link (injected by panoxyl-header.js)
   ========================================================================== */
a.mega-menu-link.jts { overflow: visible; }
.jts .jts__wrap { position: relative; display: inline-flex; align-items: center; line-height: 1; }
.jts .jts__text { color: #fff; transition: color .18s ease; }
a.mega-menu-link.jts:hover .jts__text,
a.mega-menu-link.jts:focus-visible .jts__text { color: var(--pox-yellow); }
/* For yellow text at ALL times, set the default .jts .jts__text color to var(--pox-yellow). */

.jts .jts__sparkles {
	position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
	margin-bottom: .12em; width: 2.6em; height: 1.5em; pointer-events: none;
}
.jts .jts__spark { position: absolute; border-radius: 50%; }
.jts .jts__spark svg { display: none; }   /* drop the old 4-point star markup */
/* circular orbs matching The Spot logo dots. The light-blue orb is the largest
   and is the always-visible central one; the others twinkle in/out. */
.jts .jts__spark--main { width: .58em; height: .58em; left: 50%; top: .46em; transform: translateX(-50%); background: var(--spot-blue); }
.jts .jts__spark--a    { width: .34em; height: .34em; left: 12%; top: .18em; background: var(--spot-yellow); opacity: 0; }
.jts .jts__spark--b    { width: .34em; height: .34em; left: 82%; top: .14em; background: var(--spot-orange); opacity: 0; }
.jts .jts__spark--c    { width: .28em; height: .28em; left: 70%; top: 1em;   background: var(--spot-pink);   opacity: 0; }

a.mega-menu-link.jts:hover .jts__spark--main,
a.mega-menu-link.jts:focus-visible .jts__spark--main { animation: jts-pulse 1.4s ease-in-out infinite; }
a.mega-menu-link.jts:hover .jts__spark--a, a.mega-menu-link.jts:focus-visible .jts__spark--a { animation: jts-twinkle 1.15s ease-in-out infinite; }
a.mega-menu-link.jts:hover .jts__spark--b, a.mega-menu-link.jts:focus-visible .jts__spark--b { animation: jts-twinkle 1.15s ease-in-out .28s infinite; }
a.mega-menu-link.jts:hover .jts__spark--c, a.mega-menu-link.jts:focus-visible .jts__spark--c { animation: jts-twinkle 1.15s ease-in-out .55s infinite; }

@keyframes jts-twinkle {
	0%   { opacity: 0;   transform: scale(.4) rotate(-10deg); }
	45%  { opacity: 1;   transform: scale(1)  rotate(0deg); }
	75%  { opacity: .85; }
	100% { opacity: 0;   transform: scale(.4) rotate(10deg); }
}
@keyframes jts-pulse {
	0%, 100% { transform: translateX(-50%) scale(1);    opacity: 1; }
	50%      { transform: translateX(-50%) scale(1.18); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
	.jts .jts__spark { animation: none !important; }
	a.mega-menu-link.jts:hover .jts__spark--a,
	a.mega-menu-link.jts:hover .jts__spark--b,
	a.mega-menu-link.jts:hover .jts__spark--c { opacity: 1; }
}

/* ==========================================================================
   RESTORED MEGA-PANEL RULES
   These were in the theme's old inline <style> block and the dropdown panels
   depend on them. Ported here verbatim (selectors still match MMM's output).
   ========================================================================== */
@media (min-width: 1024.98px) and (max-width: 1599.97px) {
	#mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect=fade_up] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
		width: 100% !important; /*left: 0 !important;*/ position: fixed; padding-inline: 2rem;
	}
}
@media screen and (min-width: 1024.98px) {
	#mega-menu-wrap-menu-2 #mega-menu-menu-2 .mega-sub-menu li.mega-menu-item { height: 100%; }
	/* center the label against its product image (layout/sizing left to MMM) */
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column > ul.mega-sub-menu { align-items: center !important; }
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu { min-height: unset; height: auto; }
	#mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
	#mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu {
		height: 100%; min-height: fit-content; display: flex; align-items: center; align-content: flex-start; justify-content: space-evenly; flex-wrap: wrap; flex-direction: row;
	}
}
@media screen and (min-width: 1919px) {
	#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12:nth-of-type(1) { border-right: 1px solid #ddd; }
	#mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu { justify-content: center; }
	#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item { border: none !important; }
}
@media (min-width: 1199.98px) {
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-menu-megamenu { max-height: unset; }
}
@media (min-width: 1599.98px) and (max-width: 1919.97px) {
	#mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu { margin-top: 0px; }
}
@media screen and (min-width: 1025px) {
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row { padding-block: 1rem; }
}
@media (min-width: 1199.98px) and (max-width: 1599.97px) {
	#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item { width: 100%; border: none !important; }
	#mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu { justify-content: center; }
	#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12:nth-of-type(1) { border-right: 1px solid #ddd; }
}
@media only screen and (max-width: 1024.98px) {
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu { align-content: flex-start; }
}

/* ==========================================================================
   PRESERVED WAVE-BLOCK RULES
   ========================================================================== */
@media screen and (min-width: 1921px) { header .wave-block { margin-top: -2px; } }
@media (min-width: 1324.98px) and (max-width: 1600px) {
	.header .wave-block img { height: -webkit-max-content; top: 0; bottom: auto; margin-bottom: auto; }
	header .wave-block { margin: 0 !important; border-top: 0; display: flex; }
}
@media (min-width: 1324.98px) and (max-width: 1499px) { .header .wave-block img { top: -3px; border-top: 1px solid #00; } }
@media screen and (min-width: 1599.98px) { header .wave-block { margin-top: -2px; border-top: solid thin #243F8B; } }
@media (min-width: 1024.98px) and (max-width: 1600px) { .header .wave-block img { max-height: 30px; } }
@media (min-width: 1600.98px) and (max-width: 1920px) { .header .wave-block img { max-height: 35px; } }

@media (min-width: 1919.97px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
        /* max-width: 1500px; */
        margin: auto;
        padding: 0 4vw;
    }
}
@media (min-width: 1024.98px) {
#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-item:first-child {margin-left:auto;margin-right:0;}
}
@media (min-width: 1024.98px) and (max-width: 1599.97px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-menu-megamenu {
        height: auto;
    }
    .pox-header__bar > .container {
        max-width:100vw;
    }
    .pox-header__inner {
        padding: 0rem 2.5rem 0rem;
    }
    .pox-header__bar {
        padding: 0;
    }
    header.header.pox-header {
        height: calc(var(--pox-bar-h) + 24px);
    }
    .pox-header #mega-menu-wrap-menu-1 #mega-menu-menu-1, .pox-header #mega-menu-wrap-menu-2 #mega-menu-menu-2, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-menu-megamenu {
        height:100%;
    }
    .pox-header__menu--left, .pox-header__menu--right {
        height: calc(var(--pox-bar-h) + 24px) !important;
        padding-top:24px
    }
    a.pox-header__logo {
        height: calc(var(--pox-bar-h) + 24px);
    }
    i.icon-PanOxyl-Logo {margin-top:auto;margin-bottom:auto;padding-top: 24px;}
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect=fade_up] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
        width:100vw !important;
    }
}
@media (min-width: 1024.98px) and (max-width: 1399.98px) {
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item:nth-child(2) > a.mega-menu-link {
        width: auto !important;
        min-width:unset !important;
        max-width: 100% !important;
    }

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item {
    margin-right: 0;
}
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right {
        
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right a {
        max-height: var(--pox-bar-h) !important;
        padding-inline:0 !important;
    }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {
        margin:auto;
    }
}@media (min-width: 1919.97px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
        /* max-width: 1500px; */
        margin: auto;
        padding: 0 4vw;
    }
}
@media (min-width: 1024.98px) {
#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-item:first-child {margin-left:auto;margin-right:0;}
}
@media (min-width: 1024.98px) and (max-width: 1599.97px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-menu-megamenu {
        height: auto;
    }
    .pox-header__bar > .container {
        max-width:100vw;
    }
    .pox-header__inner {
        padding: 0rem 2.5rem 0rem;
    }
    .pox-header__bar {
        padding: 0;
    }
    header.header.pox-header {
        height: calc(var(--pox-bar-h) + 24px);
    }
    .pox-header #mega-menu-wrap-menu-1 #mega-menu-menu-1, .pox-header #mega-menu-wrap-menu-2 #mega-menu-menu-2, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-menu-megamenu {
        height:100%;
    }
    .pox-header__menu--left, .pox-header__menu--right {
        height: calc(var(--pox-bar-h) + 24px) !important;
        padding-top:24px
    }
    a.pox-header__logo {
        height: calc(var(--pox-bar-h) + 24px);
    }
    i.icon-PanOxyl-Logo {margin-top:auto;margin-bottom:auto;padding-top: 24px;}
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect=fade_up] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
        width:100vw !important;
    }
}
@media (min-width: 1024.98px) and (max-width: 1399.98px) {
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item:nth-child(2) > a.mega-menu-link {
        width: auto !important;
        min-width:unset !important;
        max-width: 100% !important;
    }

#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item {
    margin-right: 0;
}
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right {
        
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right a {
        max-height: var(--pox-bar-h) !important;
        padding-inline:0 !important;
    }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {
        margin:auto;
    }
}
@media screen and (min-width:1300px) and (max-width:1599px){
    .pox-header__menu--left, .pox-header__menu--right {
        padding-top:0;
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right {
        margin-block:0 !important;
    }
#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-item, #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right a {
    height:100%;
    max-height:unset !important;
}
  i.icon-PanOxyl-Logo {
      padding:0;
  }  
}
@media (min-width: 1025px) and (max-width: 1280px) {
    div#mega-menu-wrap-menu-1.mega-menu-wrap {
        max-width: 100%;
        flex: 0 0 40vw;
        justify-content: space-evenly;
    }
}
@media screen and (min-width:1024.97px) and (max-width:1280px){
    .pox-header__menu--left, .pox-header__menu--right {
        padding-top:0;
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right {
        margin-block:0 !important;
    }
	#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-item, #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right a, .pox-header #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link, .pox-header #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item > a.mega-menu-link {
	    height:100%;
	    max-height:unset !important;
	}
    #mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu {
        margin-top:-5px;
    }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect=fade_up] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
        margin-top:-1px;
    }
	i.icon-PanOxyl-Logo {
	    padding:0;
	}  

	li#mega-menu-item-2261 {
	    margin:none !important;
	}
}
@media (min-width: 1300px) and (max-width: 1599px) and (-webkit-min-device-pixel-ratio: 1.76),
       (min-width: 1300px) and (max-width: 1599px) and (min-resolution: 1.76dppx) {
li#mega-menu-item-2261 {
    margin-right: 0 !important;
}
           #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item.mega-item-align-right {
               padding:0 !important;
           }
#mega-menu-wrap-menu-2 #mega-menu-menu-2 > li#mega-menu-item-201.mega-menu-item.mega-item-align-right a:has(span.mega-indicator){
    padding-inline:8px !important;margin-left:-8px;
}
}
@media (min-width: 1200px) and (max-width: 1599px) {
    /* */
	header .wave-block {
        padding-bottom: 6px;
    }
        header .wave-block img{
        width: 100%;
        height: auto;
    }
    .header .wave-block img {
        position: relative;
        border-top: solid 2px #243e8c;
        top: 0;
        margin-top: -1px !important;
        padding: 0 !important;
        display: block;
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
        margin:auto !important;
    }
}
@media screen and (min-width:1920px) {
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12 {
    width: 48%;
}
#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    margin-inline:auto;
}
}
@media (min-width: 1025px) and (max-width: 1199px) {
    .header .wave-block img {
        position: relative;
        width:100%;
        border-top: solid 2px #243e8c;
        top: 0;
        margin-top: -1px !important;
        display: block;
        height: auto;
        max-height:unset;
        padding-bottom: 6px;
    }
        header .wave-block {
        margin-top: -4px;
    }

    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12 {
        flex: 50%;
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12:first-of-type {
        border-right:solid 1px #666;
        border-right-color: #66666650;
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
        padding-inline:0;margin:auto;
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] .mega-sub-menu .widget_media_image {border:none !important;}
}
@media (min-width: 768px) and (max-width: 1024px) {
    /* */
    header .wave-block {
        padding-bottom: 6px;
    }
        header .wave-block img{
        width: auto;
        height: clamp(30px, 3vw, 4vh);
    }
    .header .wave-block img {
        position: relative;
        border-top: solid 2px #243e8c;
        top: 0;
        margin-top: -1px !important;
        padding: 0 !important;
        display: block;
    }
}
@media screen and (min-width:1920px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect=fade_up] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on>ul.mega-sub-menu {
        margin-top: -2px;
    }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu {
        margin-top:-2px;
    }
}
@media only screen and (max-width: 1023.98px) {
    @media (orientation: portrait) {
       .mega-sub-menu .widget_media_image img {
        height: auto !important;
       }
     #mega-menu-wrap-menu-1, #mega-menu-wrap-menu-2 {
      margin-inline:0 !important;
     }
     #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
      padding-inline:1rem;
     }
     #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {
      padding-inline:0;
     }
     #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-item {
      width:100%;
      padding-inline:0;
     }
     div#mega-menu-wrap-menu-2 ul#mega-menu-menu-2 li.mega-menu-item a.mega-menu-link {
      padding-inline:1rem;
     }
     #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
      padding-bottom:0;
     }
     #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
      font-family:var(--font-family-secondary);
      color:#243e8c;
     }
    #mega-menu-wrap-menu-2 #mega-menu-menu-2 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
        color: #8dc0db;
    }
  }
}
@media screen and (min-width: 1920px) {
   #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12 ul{
    flex-direction:column;
    display: block;
    }
}

@media only screen and (min-width: 1280.98px) {
 #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12 {
  width:50%;
 }
#mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-4-of-12 ul{
    flex-direction:column;
    display: block;
    }
}
/*style.css repairs*/
@media (min-width: 1025px) and (max-width: 1280.97px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li#mega-menu-item-187, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li#mega-menu-item-185 a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li#mega-menu-item-186 {
        width: 14vw;
        max-width: 14vw;
        display: inline-grid;
    }
}
@media (min-width: 1025px) and (max-width: 1280.97px) {
    #mega-menu-wrap-menu-1, #mega-menu-wrap-menu-1 #mega-menu-menu-1, #mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu, #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item, #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-row, #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column, #mega-menu-wrap-menu-1 #mega-menu-menu-1 a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1 span.mega-menu-badge, #mega-menu-wrap-menu-2, #mega-menu-wrap-menu-2 #mega-menu-menu-2, #mega-menu-wrap-menu-2 #mega-menu-menu-2 ul.mega-sub-menu, #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-item, #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-row, #mega-menu-wrap-menu-2 #mega-menu-menu-2 li.mega-menu-column, #mega-menu-wrap-menu-2 #mega-menu-menu-2 a.mega-menu-link, #mega-menu-wrap-menu-2 #mega-menu-menu-2 span.mega-menu-badge, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        font-size: calc(14px + .1vw) !important;
    }
}
@media (min-width: 1025px) and (max-width: 1280px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
        top: calc(var(--pox-bar-h) + 20px) !important;
        flex-flow: wrap;
        max-height: 100% !important;
        padding-bottom: 26px;
        padding-left: 5vw;
        padding-right: 5vw;
    }
}