/* Brands mega menu: a wall of clickable brand logos. */
.aes-bmenu {
	padding: 4px 0 8px;
}

.aes-bmenu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 18px;
}

.aes-bmenu__h {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #1d1d1b;
	white-space: nowrap;
}

.aes-bmenu__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 40px;
	align-items: start;
}

.aes-bmenu__main {
	border-left: 1px solid #eeece8;
	padding-left: 40px;
}

.aes-bmenu__eyebrow {
	margin: 0 0 14px;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9a9a96;
}

.aes-bmenu__list {
	columns: 2;
	column-gap: 28px;
}

.aes-bmenu .aes-bmenu__list a {
	display: block !important;
	width: auto !important;
	font-size: 13px;
	line-height: 2.05;
	color: #4a4a47;
	break-inside: avoid;
	transition: color .18s ease;
}

.aes-bmenu .aes-bmenu__list a:hover {
	color: #1d1d1b;
}

/* The wall shows nine logos at a time; the arrow swaps in the next nine. */
.aes-bmenu__main {
	display: flex;
	flex-direction: column;
}

.aes-bmenu__wall {
	order: 1;
}

.aes-bmenu__grid {
	display: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.aes-bmenu__grid.is-on {
	display: grid;
}

.aes-bmenu__next {
	order: 2;
	align-self: flex-end;
	margin-top: 14px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e5e2dd;
	border-radius: 50%;
	background: #fff;
	color: #1d1d1b;
	cursor: pointer;
	padding: 0;
	transition: background .18s ease, border-color .18s ease;
}

.aes-bmenu__next:hover,
.aes-bmenu__next:focus-visible {
	background: #f2f0ec;
	border-color: #d8d4cd;
}

.aes-bmenu__item {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #faf9f7;
	padding: 24px 18px;
	min-height: 98px;
	transition: background .18s ease;
}

.aes-bmenu__item:hover,
.aes-bmenu__item:focus-visible {
	background: #f2f0ec;
}

.aes-bmenu__item img {
	display: block;
	width: 100%;
	max-width: 158px;
	height: 44px;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
	transition: transform .18s ease;
}

.aes-bmenu__item:hover img,
.aes-bmenu__item:focus-visible img {
	transform: scale(1.04);
}

.aes-bmenu__all {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
	display: inline-block;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #1d1d1b;
	border-bottom: 1px solid #1d1d1b;
	padding-bottom: 2px;
	white-space: nowrap;
}

.aes-bmenu__all:hover {
	color: #1d1d1b;
	opacity: .65;
}

@media (max-width: 1200px) {
	.aes-bmenu__split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.aes-bmenu__main { border-left: 0; padding-left: 0; border-top: 1px solid #eeece8; padding-top: 24px; }
	.aes-bmenu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.aes-bmenu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aes-bmenu__item { padding: 18px 14px; min-height: 78px; }
	.aes-bmenu__item img { height: 34px; }
}

@media (max-width: 600px) {
	.aes-bmenu__list { columns: 1; }
}

@media (max-width: 600px) {
	.aes-bmenu__head { flex-wrap: wrap; gap: 10px; }
}

/* The theme forces header links to display:block;width:100%, which flattens the
   head row. Specificity plus !important is the only thing that holds here. */
.aes-bmenu .aes-bmenu__head .aes-bmenu__all {
	display: inline-block !important;
	width: auto !important;
	flex: 0 0 auto !important;
	margin-left: auto !important;
	text-align: right !important;
}

.aes-bmenu .aes-bmenu__head .aes-bmenu__h {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* The theme styles any button in the header as a dark pill and stretches it, so the
   swap arrow needs the specificity plus !important to stay a quiet round control. */
.aes-bmenu .aes-bmenu__next {
	width: 38px !important;
	min-width: 0 !important;
	max-width: 38px !important;
	height: 38px !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	background: #fff !important;
	color: #1d1d1b !important;
	border: 1px solid #e5e2dd !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
}

.aes-bmenu .aes-bmenu__next:hover,
.aes-bmenu .aes-bmenu__next:focus-visible {
	background: #f2f0ec !important;
	color: #1d1d1b !important;
	border-color: #d8d4cd !important;
}

.aes-bmenu .aes-bmenu__next svg {
	display: block;
	width: 16px;
	height: 16px;
}


/* --- column headings + swap arrow (Rohit round, 2026-08-20) --------------------
   Both column titles match the Shop dropdown headings (Jost 18/600, black) so the two
   mega menus read as one system. "All Brands" is the link to the brands page and
   carries the underline that says so. The arrow is the carousel control used across
   the site: filled dark circle, white glyph. */
.aes-bmenu .aes-bmenu__colhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	min-height: 38px;
}

/* Wraps the prev/next pair so both round buttons sit together on the right of the
   colhead row, same spacing as the gap between the two columns' own controls. */
.aes-bmenu .aes-bmenu__colhead .aes-bmenu__nav {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
}

.aes-bmenu .aes-bmenu__h,
.aes-bmenu .aes-bmenu__colhead .aes-bmenu__h {
	margin: 0 !important;
	font-family: Jost, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	color: #000 !important;
	text-transform: none !important;
	white-space: nowrap;
	width: auto !important;
	display: inline-block !important;
}

.aes-bmenu .aes-bmenu__h--link {
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.aes-bmenu .aes-bmenu__h--link:hover {
	color: #000 !important;
	opacity: .65;
}

.aes-bmenu .aes-bmenu__colhead .aes-bmenu__next {
	order: 0 !important;
	align-self: center !important;
	margin-top: 0 !important;
	background: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}

.aes-bmenu .aes-bmenu__colhead .aes-bmenu__next:hover,
.aes-bmenu .aes-bmenu__colhead .aes-bmenu__next:focus-visible {
	background: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

/* --- Rohit corrections, 2026-08-20 -------------------------------------------
   1. The theme forces display:block on header buttons, which silently killed the
      flex centring and left the glyph 10px left of centre inside the circle.
      display:flex has to be !important or the arrow never centres.
   2. Both column headings carry the rule underneath, not just the linked one.
   3. The brand name list was 13px, too small beside 18px headings. */
.aes-bmenu .aes-bmenu__next,
.aes-bmenu .aes-bmenu__colhead .aes-bmenu__next {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	line-height: 0 !important;
}

.aes-bmenu .aes-bmenu__next svg {
	display: block;
	margin: 0 auto;
	flex: 0 0 auto;
}

.aes-bmenu .aes-bmenu__h,
.aes-bmenu .aes-bmenu__h--link {
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 6px !important;
}

.aes-bmenu .aes-bmenu__list a {
	font-size: 15px !important;
	line-height: 1.95 !important;
}

/* At laptop widths the 15px names need a little more room across four columns, so the
   gutters tighten and the name rail takes a slightly larger share of the split. */
@media (max-width: 1460px) {
	.aes-bmenu .aes-bmenu__list { column-gap: 12px !important; }
	.aes-bmenu .aes-bmenu__split { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.5fr); gap: 28px; }
	.aes-bmenu .aes-bmenu__main { padding-left: 28px; }
}

/* --- brand name list: weight and hover (Rohit, 2026-08-20) ---------------------
   The theme was rendering these at weight 500 in pure black, which reads as bold, and
   its hover colour (#1d1d1b) was LIGHTER than the resting colour, so hovering did
   nothing visible. Resting state is now regular weight in a soft grey; hover darkens to
   black and nudges right, and the transition sits on the base rule so it eases back out
   again on leave. */
.aes-bmenu .aes-bmenu__list a,
.aes-bmenu .aes-bmenu__side .aes-bmenu__list a {
	font-weight: 400 !important;
	color: #5c5a55 !important;
	transition: color .22s ease, transform .22s ease, opacity .22s ease !important;
	transform: translateX(0);
}

.aes-bmenu .aes-bmenu__list a:hover,
.aes-bmenu .aes-bmenu__list a:focus-visible,
.aes-bmenu .aes-bmenu__side .aes-bmenu__list a:hover {
	color: #000 !important;
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.aes-bmenu .aes-bmenu__list a { transition: color .22s ease !important; }
	.aes-bmenu .aes-bmenu__list a:hover { transform: none; }
}

/* --- logo wall 4x4 (Rohit, 2026-08-20) ----------------------------------------
   An extra row and column, sixteen per page, with the tiles and marks scaled down so
   the wall stays roughly the height of the name list beside it. */
.aes-bmenu .aes-bmenu__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 8px !important;
}

.aes-bmenu .aes-bmenu__item {
	padding: 16px 12px !important;
	min-height: 82px !important;
}

.aes-bmenu .aes-bmenu__item img {
	max-width: 128px !important;
	height: 34px !important;
}

@media (max-width: 1460px) {
	.aes-bmenu .aes-bmenu__item { min-height: 76px !important; padding: 14px 10px !important; }
	.aes-bmenu .aes-bmenu__item img { max-width: 112px !important; height: 30px !important; }
}

/* --- logo tiles must be flex, not block (Rohit, 2026-08-20) --------------------
   Same trap as the swap arrow: the theme forces header links to display:block, which
   silently voids align-items/justify-content, so every mark sat 25px left of centre in
   its tile. display:flex has to be !important here or nothing centres. */
.aes-bmenu .aes-bmenu__item {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: auto !important;
}

.aes-bmenu .aes-bmenu__item img {
	margin: 0 auto !important;
	flex: 0 0 auto;
}

/* --- headings: a rule that actually paints (Rohit, 2026-08-20) ------------------
   "Companies by Logo" is a <p> and painted its text-decoration underline; "All Brands"
   is an <a> and did not, even though both computed text-decoration-line: underline with
   a black colour. The theme suppresses the painted decoration on links. A border-bottom
   cannot be suppressed the same way, so both headings use one and match exactly. */
.aes-bmenu .aes-bmenu__h,
.aes-bmenu .aes-bmenu__colhead .aes-bmenu__h,
.aes-bmenu .aes-bmenu__h--link {
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	border-bottom: 1px solid currentColor !important;
	padding-bottom: 5px !important;
	display: inline-block !important;
}

/* The name list starts with a text line, the logo wall starts with a filled tile, so at
   equal box spacing the left column READS looser by exactly the half-leading of the
   first line (7px here). Pull the list up by that much so both columns begin level. */
.aes-bmenu .aes-bmenu__list {
	margin-top: -7px !important;
}

/* Names a step darker (Rohit, 2026-08-20). Not pure black: that is the hover state, and
   at weight 400 full black is what read as "bold" in the first place. */
.aes-bmenu .aes-bmenu__list a,
.aes-bmenu .aes-bmenu__side .aes-bmenu__list a {
	color: #35332f !important;
}

/* Darker again (Rohit asked twice). Near-black at rest; the hover feedback now rides on
   the slide rather than the colour, since there is little colour headroom left. */
.aes-bmenu .aes-bmenu__list a,
.aes-bmenu .aes-bmenu__side .aes-bmenu__list a {
	color: #171614 !important;
}

/* --- brand names get the Shop menu's leading dash (Rohit, 2026-08-20) -----------
   Copied from the Shop dropdown's icon-list exactly: a 5x1px bar in currentColor,
   3px from the left edge, vertically centred, with the text indented 15px. */
.aes-bmenu .aes-bmenu__list a {
	position: relative !important;
	padding-left: 15px !important;
}

.aes-bmenu .aes-bmenu__list a::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 1px;
	background: currentColor;
	display: block;
}

/* The dash indent costs 15px a column, which pushed two names onto a second line at
   laptop width. Tighten the indent and gutters there and give the name rail a slightly
   bigger share, rather than dropping the dash. */
@media (max-width: 1460px) {
	.aes-bmenu .aes-bmenu__list { column-gap: 8px !important; }
	.aes-bmenu .aes-bmenu__list a { padding-left: 12px !important; }
	.aes-bmenu .aes-bmenu__list a::before { left: 1px; }
	.aes-bmenu .aes-bmenu__split { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1.5fr); gap: 24px; }
	.aes-bmenu .aes-bmenu__main { padding-left: 24px; }
}