.menupanel, .menupanel > .aoci { 
	overflow:visible; 
}

.aos__menu:not(.mobile).smooth * { 
	transition: all .3s ease;
}

/* KEEP THIS AT TWO CLASSES (0,2,0). It deliberately TIES with `.aos__menu.mobile`
   further down, which sets position:inherit, and the later rule wins on source order —
   that tie is what lets a burger panel escape its cell and span the design row.
   Adding a third :not() here (e.g. :not(.mega)) raises specificity to 0,3,0, wins
   outright, and silently collapses every burger panel to the width of its icon.
   Mega Menu opts out below instead, at matching specificity. */
.aos__menu:not(.fullwidth) {
	position:relative;
}

.aos__menu a[class*="-N"]:not(.aos-FWB), 
.aos__menu a[class*="-N"]:not(.aos-FWB):hover,
.aos__menu a[class*="-WYSEdit"]:not(.aos-FWB), 
.aos__menu a[class*="-WYSEdit"]:not(.aos-FWB):hover { 
	text-decoration:none; 
	font-weight: inherit;
}

.aos__menu:not(.in-page):not(.mobile), 
.aos__menu:not(.in-page):not(.mobile) .aos__menu__l1 { 
	height:100%;
}
		
.aos__menu.dropdown .sublevel,
.aos__menu.fullwidth .sublevel { 
	position:absolute;
	z-index:1111;
	left:0; 
}
.aos__menu.dropdown .aos__menu__node:not(.aos-W100),
.aos__menu.fullwidth .aos__menu__node:not(.aos-W100) {
    flex-shrink: 0;
}

.aos__menu:not(.dropdown) .sublevel/*,.aos__menu .aoci*/{
	width: 100%;
}

.aos__menu__node.tree:not(.activeNode){
	overflow: hidden;
}

.aos__menu .aos-DF.component{
	flex-direction:column;
}

.aos__menu div[id*="aoc-Panel"] {
	position: relative !important;
}
.aos__menu div[id*="aoc-Panel"] .activePanel,
.aos__menu .activePanel div[id*="aoc-Panel"] {
   transition: none;
}

.aos__menu.dropdown .aos__menu__node.aos__DONode > div.sublevel {
	position: absolute;
	left: 0;
	width: 100%;
}

.aos__menu__node .aor{
	width:100%;
}

/* Dropdown Menu */
.aos__menu.dropdown .aos__menu__node:not(.aos__DONode) {
	position:relative; 
}

.aos__menu.dropdown .sublevel { 
	width: max-content;
}
.aos__menu.dropdown .aos__menu__l2.sublevel,
.aos__menu.dropdown .aos__menu__l3.sublevel { 
	min-width: 100%;
}

.aos__menu .aos__menu__node > *[class*="-Border"] { 
	border-radius:0;
}
/* Drop the trailing divider on the last node of a level: in a stacked list its bottom border
   doubles up with the panel edge, and on a level 1 bar its right border leaves a dangling rule.
   Level 2 is exempted for Mega Menu — there the level 2 nodes are grid CELLS, not a stack, so
   ":last-of-type" is just whichever column heading happens to be last in the DOM and its
   underline is load-bearing, not redundant. */
.aos__menu .aos__menu__l1 > .aos__menu__node:last-of-type > *[class*="-Border"],
.aos__menu:not(.mega) .aos__menu__l2 > .aos__menu__node:last-of-type > *[class*="-Border"],
.aos__menu .aos__menu__l3 > .aos__menu__node:last-of-type > *[class*="-Border"] {
	border:0 none;
}

.aos__menu:not(.in-page):not(.mega) .sublevel:not(.activeLevel) {
	display:none;
}

/* Mega Menu: ONLY the level 2 panel opens and closes. Level 3 is rendered permanently open
   inside it, so it must not be caught by the blanket .sublevel rule above. */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2:not(.activeLevel) {
	display:none;
}

/* Dropdown menu alignment */

.aos__menu.dropdown .aos__menu__l2 .aos__menu__l3 { 
	position: absolute;
	left: 100%;
	top: 0; 
}	

/* AUTO */
.aos__menu.dropdown .aos__menu__l2.rhc { 
	left: auto;
	right:0; 
}
.aos__menu.dropdown .aos__menu__l2.rhc .aos__menu__l3 { 
	left: auto;
	right:100%; 
}

/* LEFT */
.aos__menu.dropdown.left .aos__menu__l2 { 
	left: 0;
	right:auto; 
}

/* RIGHT */
.aos__menu.dropdown.right .aos__menu__l2 { 
	left: auto;
	right:0; 
}

/* CENTER */
.aos__menu.dropdown.center .aos__menu__l2 { 
  left: 50%;
  right: auto;
	transform: translateX(-50%);
}

/******************************* MEGA MENU *******************************
   Level 1 behaves like a Dropdown / Full Width bar. Its level 2 panel spans the design row and
   lays the level 2 nodes out on the Item Grid (grid-template-columns generated per-DE in
   DC_MenuDisplay.cfc). Each grid cell is one level 2 heading plus its permanently-open level 3
   list, so within the panel nothing toggles — only the panel itself opens and closes. */

/* The panel. Fills whichever positioned ancestor it escapes to — normally the full-width design
   row — and stacks above following content. Capped by the Mega Menu Panel Max Width setting and
   placed by the Dropdown Menu Alignment setting.
   Two values arrive from getDesignElementCSS as plain lengths, deliberately: the generated skin CSS
   is put through YUI Compressor 2.4.8, which predates calc()/min() and strips units off zeros, so
   all the arithmetic has to live in this file, which is served raw. It also means none of these
   rules need media queries of their own — they re-derive as --aos-mega-gap changes per breakpoint.
     --aos-mega-gap        the Item Grid gap: column gutter AND panel padding
     --aos-mega-panel-max  the Panel Max Width setting */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	position: absolute;
	z-index: 1111;
	left: 0;
	width: 100%;
	max-width: var(--aos-mega-panel-max, none);
	gap: var(--aos-mega-gap, 0px);
	padding: var(--aos-mega-gap, 0px);
}

/* --- Column placement ---
   Two different layouts, one grid.

   "Balance the Megamenu Columns" UNTICKED: a plain grid. The level 2 groups carry no column, so
   grid-column resolves to the 'auto' fallback below and they flow in DOM order across each row —
   5 groups over 4 columns put group 2 at the top of column 2 and group 5 at the start of row 2
   (Luismi, 27-Aug-2026). Same behaviour as the In-Page Item Grid.

   TICKED: DC_MenuDisplay.cfc packs the groups into .aos__menu__col wrappers by height and gives
   each wrapper its column, per breakpoint, as an inline --aos-mega-col* property
   (getMegaColumnVars). The wrappers are placed EXPLICITLY rather than flowed, because the split is
   uneven: 4 wrappers over 3 columns is 2|1|1, and a grid's rows are shared across all of its
   columns, so the row count this replaced — grid-auto-flow:column plus
   grid-template-rows:repeat(ceil(items/columns),auto) — could only ever describe columns of EQUAL
   length. It filled each column to that count before moving on, so 4 wrappers over 3 columns came
   out 2+2 with the third column empty (27-Aug-2026). Do not go back to it.

   dense is load-bearing, not an optimisation. With a definite column and an auto row, sparse
   packing never moves the placement cursor back up, so the second column's first wrapper would land
   on whatever row the first column had already reached instead of at the top. Every wrapper has a
   definite column, so dense cannot reorder anything — it only lets each column start at row 1. It
   is a no-op unticked, where nothing has a definite column.

   The var() chains mirror how the Item Grid resolves a blank breakpoint: the CFC emits a breakpoint
   only when that item's column CHANGES, and anything it left out reads back through the next widest.

   Keep the rules unscoped by mode. The 'auto' fallback is what makes one mechanism serve both, and
   scoping to .balanced (an earlier attempt did) drops the fallback that unticked panels rely on. */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	grid-auto-flow: row dense;
}
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__node,
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__col {
	grid-column: var(--aos-mega-col, auto);
}
@media screen and (max-width:1024px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__node,
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__col {
		grid-column: var(--aos-mega-col-1, var(--aos-mega-col, auto));
	}
}
@media screen and (max-width:799px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__node,
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__col {
		grid-column: var(--aos-mega-col-2, var(--aos-mega-col-1, var(--aos-mega-col, auto)));
	}
}
@media screen and (max-width:599px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__node,
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__col {
		grid-column: var(--aos-mega-col-3, var(--aos-mega-col-2, var(--aos-mega-col-1, var(--aos-mega-col, auto))));
	}
}
@media screen and (max-width:479px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__node,
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 > .aos__menu__col {
		grid-column: var(--aos-mega-col-4, var(--aos-mega-col-3, var(--aos-mega-col-2, var(--aos-mega-col-1, var(--aos-mega-col, auto)))));
	}
}

/* --- Balanced columns (Mega Menu > Balance the Megamenu Columns) ---
   A column becomes a real element: DC_MenuDisplay.cfc packs the level 2 groups into
   .aos__menu__col wrappers by line count, so a column can hold several groups and the columns come
   out roughly level. The wrappers are then the grid items, so everything above still applies.

   Why a wrapper rather than CSS columns. Multi-column was the obvious answer and was tried first,
   but column-fill:balance settles on a column height BEFORE placing anything, so any group taller
   than that height gets fragmented however emphatically break-inside:avoid asks otherwise. On lion
   it split "BR NAVIGATION" in half and stranded its last two links at the top of the next column
   (26-Aug-2026). A group is only safe from being split if it sits in a box of its own — hence this.

   The wrapper stacks its groups and spaces them with the Item Grid gap, so the space between two
   groups in a column matches the space between the columns themselves. gap on the parent, not
   margins on the groups, which also leaves the groups' own DS borders and backgrounds untouched. */
.aos__menu.mega.balanced .aos__menu__col {
	display: flex;
	flex-direction: column;
	gap: var(--aos-mega-gap, 0px);
	min-width: 0;
}

/* Level 1 bar: items keep their intrinsic width instead of being squeezed by the flex row
   (mirrors the dropdown/fullwidth rule near the top of this file). */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node:not(.aos-W100) {
	flex-shrink: 0;
}

/* .tree nodes get overflow:hidden until they are .activeNode. Mega level 2 headings are .tree
   (they have children) but never become active, so that would make every grid cell a new block
   formatting context for no reason.

   The second selector is the balanced mode, where the group sits one level deeper inside its
   .aos__menu__col wrapper. Both are needed: matching only the direct child would silently clip
   every group in a balanced panel. */
.aos__menu.mega .aos__menu__l2 > .aos__menu__node.tree,
.aos__menu.mega .aos__menu__l2 > .aos__menu__col > .aos__menu__node.tree {
	overflow: visible;
}

/* --- Fit Content to Row Width ---
   The panel is deliberately wider than the page content — that is the point of a mega menu — but the
   columns inside it should still line up with the rest of the page. So inset them by the half
   difference between the panel and the row, which lands the content area exactly on the row's width.

   --aos-row-max-width is the row's own max-width, published beside it by the row generator in
   DC_DesignCentre.cfc. It inherits down the DOM, so it reaches this panel even though the panel has
   positioned itself outside the row's box. That avoids hardcoding a width, and it tracks whatever
   each row is set to — px, a percentage, or a different value at every breakpoint.

   min(100%, --aos-mega-panel-max) is the panel's own width: percentage padding resolves against the
   containing block, so bare 100% would be the row's full-width ancestor rather than the capped panel.

   max(--aos-mega-gap, ..) is what handles narrow screens. Below the row's max-width the difference
   goes negative, the gap wins, and this becomes an ordinary gap-sized inset — no overhang, no
   negative offsets, nothing to clip. Fallbacks are chosen so a missing value collapses its own term:
   no row max-width -> 100% -> the difference is 0 -> the gap wins. */
.aos__menu.mega.fitrow > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	/* The inset is symmetric, so it only lands on the row if the panel is centred too. Matters
	   once Panel Max Width caps the panel: left-aligned, a 1500px panel inside a 1900px page would
	   centre its columns on itself rather than on the page. This is why displayDesignElement does
	   not emit the Dropdown Menu Alignment class in this mode. */
	left: 50%;
	transform: translateX(-50%);
	padding-inline: max(
		var(--aos-mega-gap, 0px),
		(min(100%, var(--aos-mega-panel-max, 100%)) - var(--aos-row-max-width, 100%)) / 2
	);
}

/* Panel alignment, used when the Max Width setting makes it narrower than the row. */
.aos__menu.mega.left > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	left: 0;
	right: auto;
}
.aos__menu.mega.right > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	left: auto;
	right: 0;
}
.aos__menu.mega.center > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.aos__menu .aos-ToggleLevel > a {
	border-radius:0;
}
.aos__menu .aos-ToggleLevel > span { 
	cursor:pointer;
	width:40px; 
}
.aos__menu .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span,
.aos__menu .aos__menu__node.tree > span > span.aos-FS, 
.aos__menu .aos__menu__node.tree > span::after {
	cursor:pointer;
}
.aos__menu__node *[class*="-N"] .aos-FWB{
	color:inherit;
}
.aos__menu.scroll.aos__menu__boxshadow,
.aos__menu:not(.scroll) .aos__menu__l1.aos__menu__boxshadow,
.aos__menu:not(.scroll) .aos__menu__boxshadow:not(.aos__menu__l1) > * {
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.2);
}

/*Burger Menu */
.aos__menu.mobile {
	height: 100%;
	position: inherit;
}
/* Mega Menu needs its panel to position against an ancestor further up the design row so it
   can span wider than the menu bar. Done here rather than as a third :not() on the
   `.aos__menu:not(.fullwidth)` rule at the top of this file — that would raise its specificity
   above `.aos__menu.mobile` above and break every burger panel. Same 0,2,0, later wins. */
.aos__menu.mega {
	position: inherit;
}
.aos__menu.mobile .aos__burger+.aos__menu__l1{
	display: none;
	position: absolute;
	width: 100%;
	z-index:1113;
	max-height: 100vh;	
}
.aos__menu.mobile .aos__burger+.aos__menu__l1:not(:has(.ao-searchde-serchform)){
	overflow-y: auto;
}
.aos__menu.mobile:not(.rhc) .aos__burger+.aos__menu__l1{
	left: 0;
}
.aos__menu.mobile.rhc .aos__burger+.aos__menu__l1{
	right: 0;
}
.aos__menu.mobile .aos__burger:not(.expanded) > .hidemenu{
	display: none;
}
.aos__menu.mobile .aos__burger.expanded > .showmenu{
	display: none;
}
.aos__menu.mobile .aos__burger > i{
	font-size: 33px;
	width: 33px;
}

/******* Default Icons *********/
.aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu__node.tree > span.aos-ToggleLevel > span {
	background-size: 20px;
	background-repeat:no-repeat;
	background-position:center;
}
.aos__menu.mobile .aos__menu__node.tree > span.aos-ToggleLevel > span {
	text-align:center;
	padding: 0 !important;
}

/**** Level 1 ****/

/** -- MOBILE -- **/
.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel) {
	padding-right:40px;
}
.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree > span.aos-ToggleLevel > a {
	width:calc(100% - 40px);
}

.aos__menu.mobile:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	width:20px;
	background-size: auto;
	position:absolute;
	right:10px;
	text-align: center;
	font-size: 11px;
	font-weight: 900;
}
.aos__menu.mobile:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after {	
	content:"\f077"; /* Up Chevron */
}

.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree > span.aos-ToggleLevel > span::after {
	font-family: 'Font Awesome 5 Free';
	font-size: 11px;
	font-weight: 900;
	content:"\f078"; /* Down Chevron */
}
.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree.activeNode > span.aos-ToggleLevel > span::after {
	content:"\f077"; /* Up Chevron */
}

/** -- Dropdown or Full-width -- **/					
.aos__menu.dropdown .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.mega .aos__menu__l1 > .aos__menu__node.tree > a.hover::after {
	width:16px;
	min-height:16px;
	background-size: 100% auto;
	background-repeat:no-repeat;
	margin-left:5px;
}
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > a.hover::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	font-size: 11px;
	font-weight: 900;
	display: flex;
  align-items: center;
  justify-content: center;
}
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > a.hover::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > a.hover::after {
	content:"\f077"; /* Up Chevron */
}

/**** Level 2 ****/

/** -- Dropdown -- **/	
.aos__menu.dropdown .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown .aos__menu__l2 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > a.hover::after {
	width:16px;
	min-height:16px;
	background-size: 16px;
	background-position: center right;
	background-repeat:no-repeat;
	margin-left:5px;
}

.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > a.hover::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f054"; /* Right Chevron */
	font-size: 11px;
	font-weight: 900;	
	position: absolute;
	right: 0;
}

/* Level 2 closes the chevron back on itself: Right when collapsed (above), Left when open.
   Full Width shares this because its level 2 opens sideways just like Dropdown — Mobile is the
   only level 2 that expands downwards, so it keeps Down/Up further below. */
.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > a.hover::after {
	content:"\f053"; /* Left Chevron */
}

/** -- Full-width or Mobile -- **/
/*.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel),*/
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel) {
	padding-right:40px;
}

/*.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > a,*/
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > a {
	width:calc(100% - 40px);
}			

.aos__menu.mobile:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	width:16px;
	min-height:16px;
	background-size: 100% auto;
	background-repeat:no-repeat;	
	text-align: center;
	font-size: 11px;
	font-weight: 900;
	position:absolute;
	right:8px;
}
.aos__menu.mobile:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after {
	content:"\f077"; /* Up Chevron */
}

.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > span,
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > span::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	font-size: 11px;
	font-weight: 900;
}

.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree.activeNode > span.aos-ToggleLevel > span,
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree.activeNode > span.aos-ToggleLevel > span::after {
	content:"\f077"; /* Up Chevron */
}

/* Mega Menu is scoped to level 1 in these three: only its level 1 items carry a chevron, so the
   level 2 headings inside the panel must keep normal flow and full-width text. */
.aos__menu.dropdown .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel),
.aos__menu.fullwidth .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel),
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) {
	justify-content: space-between;
}
.aos__menu.dropdown .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span,
.aos__menu.fullwidth .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span,
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span {
	width:100%;
	/*text-align: center;*/
}

.aos__menu.dropdown .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth .aos__menu__node.tree > a.hover::after,
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > a.hover::after {
	flex-shrink: 0;
}

/************ COMPONENTS *****************/

/*LOGIN FORM */
.aos__menu form#deLogin div input[type="text"], 
.aos__menu form#deLogin div input[type="password"] { 
	padding:0.5em; 
	min-width:100px;
}	

.aos__menu form { 
	width:100%;
}

.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-email,
.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-password { 
	width:calc(50% - 40px); 
}

.aos__menu form.ao-loginde-horizontal > div.aos-CA { 
	display:flex; 
	align-items: stretch;
}
.aos__menu form.ao-loginde-horizontal div input[type="text"], 
.aos__menu form.ao-loginde-horizontal input[type="password"] { 
	display:flex; 
	height: 100%; 
}

@media screen and (max-width:479px) {
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-email { width:100%; padding-right:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-password { width:100%; padding-right:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-submit { width:100%; padding-right:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-bottomlinks { text-align:center; }
}

@media screen and (min-width:480px) {
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-email { margin-bottom:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-password { margin-bottom:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-submit { margin-bottom:0; }
}

.aos__menu .ao-searchde-srchbox {
	padding: 0.5em;
	width: 100%;
	min-height:37px;
}
.aos__menu .ao-searchde-serchform > div:not(.ao-searchde-result) {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}
.aos__menu .ao-searchde-serchform > div > span {
	display: flex;
}
/* Input span takes only what the button leaves. flex-basis MUST be 0, not auto:
   with auto it claims the input's content width (~180px) up front and competes with
   the button's min-width, overflowing the form whenever Search Form Max Width is set.
   min-width:0 releases the flex auto-minimum so it can shrink below that content width. */
.aos__menu .ao-searchde-serchform > div > span:first-of-type {
	flex: 1 1 0;
	min-width: 0;
}
.aos__menu .ao-searchde-serchform button {
	background-position: center center;
	line-height:normal;
	min-width:37px;
	min-height:37px;
	height:100%;
}
.aos__menu .aos-searchde-srchbox-label {
	position:absolute;
	left:-999999px;
	z-index:-1;
}
.aos__menu .ao-searchde-srchbox:focus:not(:focus-visible) {
	outline:none;
}

.aos__menu .ao-searchde-serchform.image > div > span:nth-of-type(2) {
	min-width: 40px;
}

.aos__menu .ao-searchde-result{ 
	display:none; 
	z-index:9999;
	position:absolute;
	text-align:left;
	max-height:300px;
	overflow-y:auto;
	overflow-x:hidden;
	top: calc(100% + 5px);
	width:100% !important; }
.aos__menu .ao-searchde-result .ao-srchres-thmb { 
	width:80px; 
}
.aos__menu .ao-searchde-result .ao-srchres-thmb+div { 
	width:calc(100% - 80px); 
}
.aos__menu .ao-searchde-result .ao-srchres-avatar { 
	width:50px; 
}
.aos__menu .ao-searchde-result .ao-srchres-avatar+div { 
	width:calc(100% - 50px); 
}
.aos__menu .ao-searchde-result .ao-srchres-label { 
	max-width:200px;
	line-height:110%; 
} 

/****************** HORIZONTAL SCROLL MENU ***************************/

/* The scroll menu sits inside CSS-table cell wrappers (.aori/.aoc = display:table,
   .aoci = display:table-cell). An auto-layout table shrink-wraps to the menu's content
   width and overflows the column instead of scrolling, so the whole page scrolls
   sideways. Force block layout for just this cell chain: the wrappers then fill the
   column (width:100%) and the strip scrolls internally. Scoped via :has so no other
   design cell is affected. TASK-290423 (teiss).

   The :not(.ao-Hide) qualifiers on .aoc are load-bearing - do not simplify them away.
   :has() ignores visibility, so a scroll menu sitting in a HIDDEN cell wrapper (.aoc,
   a breakpoint variant say) still matched the row, and this rule's display:block then
   beat .ao-Hide{display:none} on specificity and un-hid the whole chain - two menus
   painted on top of each other. Wyvex Fish Farmer, Aug 2026. So: only match when a
   VISIBLE .aoc holds the menu, and never force a hidden .aoc to block. */
.aori:has(> .aoc:not(.ao-Hide) > .aoci > .aos__menu.scroll),
.aori:has(> .aoc:not(.ao-Hide) > .aoci > .aos__menu.scroll) > .aoc:not(.ao-Hide),
.aori:has(> .aoc:not(.ao-Hide) > .aoci > .aos__menu.scroll) > .aoc:not(.ao-Hide) > .aoci {
  display: block;
  width: 100%;
}

.aos__menu.scroll {
  overflow: hidden;
  min-width: 0;    /* allow the scroll menu (if a flex item) to shrink to its column */
  max-width: 100%; /* and never grow past it, so the strip scrolls internally instead
                      of expanding to content width and overflowing the viewport.
                      TASK-290423 (teiss). */
}

.aos__menu.scroll .aos__menu__l1 {
  display: flex;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


.aos__menu.scroll .aos__menu__navtrack {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;  /* Shrink to container so the track scrolls internally instead of
                    expanding to content width. Container-relative (not viewport), so it
                    never breaks out of a contained/centred layout and overflow detection
                    + scroll work at every breakpoint. TASK-290423 (teiss). */
  -ms-overflow-style: none;  /* IE and Edge */
  scroll-behavior: smooth;
  scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.aos__menu.scroll .aos__menu__navtrack::-webkit-scrollbar {
  display: none;
}

/* Scrollable Nav Overflowing */
.aos__menu.scroll .aos__menu__l1.overflowingHSMenu .aos__menu__navtrack {
  justify-content: space-between;
}
.aos__menu.scroll .aos__menu__l1.overflowingHSMenu > button {
  display: flex;
  height: 100%;
}

.inactiveHSMenu {
  opacity: 0;
  visibility: hidden;
  cursor: auto;
}

.aos__menu.scroll .aos__menu__l1 > button {
  cursor: pointer;  
  background-color: #FFF;
  width: 30px;   
  align-items: center;
  justify-content: center;
  display: none;
  position: absolute;
  z-index: 1;
  border: none;
  padding: 0;
}
.aos__menu.scroll .aos__menu__l1 > button.right {
	right:0;
}
.aos__menu.scroll .aos__menu__l1 > button.left {
	left:0;
}
.aos__menu.scroll .aos__menu__l1 button:active,
.aos__menu.scroll .aos__menu__l1 button:focus:not(:focus-visible) {
  outline: none;
  border: none;
}

.aos__menu.scroll .aos__menu__l1 > button:not(.inactiveHSMenu):after {
  position: absolute;
  top: 0;
  left: 30px;
  height: 100%;
  width: 14px;
  content: "";
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  z-index: 1;
}
.aos__menu.scroll .aos__menu__l1 > button.right:not(.inactiveHSMenu):after {
  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  left: -14px;
}
.aos__menu.scroll .aos__menu__l1 > button i {
  z-index: 1;
  font-size: 14px;
  transition: opacity .2s ease-in-out;
}

.aos__menu.scroll .aos__menu__node {
  flex-shrink: 0;
}

.aos__menu.scroll .overflowingHSMenu .aos__menu__node {
  /*height: calc(100% - 17px);*/
  width: auto !important;
}

.aos__menu.scroll .aos__menu__node:last-of-type > * {
	border: none;
}


/**
* Media Queries
**/

@media screen and (min-width: 600px) {

  .aos__menu.scroll .aos__menu__l1 > button:after {
    width: 50px;
  }

  .aos__menu.scroll .aos__menu__l1 > button.right:after {
    left: -45px; 
  } 
  
  .aos__menu.scroll {
    max-height: 60px; 
  }
  .aos__menu.scroll .aos__menu__l1 {
    min-height: 50px;
  }
}

/* Hide node at Breakpoint */
@media screen and (min-width: 1200px){ 
	.aos__menu__BPHide_F{ 
		display:none;
	} 
}
@media screen and (min-width: 1025px) and (max-width: 1199px) { 
	.aos__menu__BPHide_0{ 
		display:none;
	} 
}
@media screen and (min-width: 800px) and (max-width: 1024px) { 
	.aos__menu__BPHide_1{ 
		display:none;
	} 
}
@media screen and (min-width: 600px) and (max-width: 799px) { 
	.aos__menu__BPHide_2{ 
		display:none;
	} 
}
@media screen and (min-width: 480px) and (max-width: 599px) { 
	.aos__menu__BPHide_3{ 
		display:none;
	} 
}
@media screen and (max-width:479px) {  
	.aos__menu__BPHide_4{ 
		display:none;
	}  
}