/* -----------------------------------------------------------------------------
   Mega menu (.amm-*) — the ONE home for this feature's CSS.

   WHY THIS FILE EXISTS.
   mu-plugins/15-amm-lazy-panels.php stopped shipping the ~219 KB panel markup
   inside every page; it is fetched on first open instead. WP Rocket's Remove
   Unused CSS decides what is "used" by scanning the RENDERED HTML, so the moment
   that markup left the page it stripped nearly every .amm-* rule — from the
   parent stylesheet AND from the child's wp_add_inline_style() block, which RUCSS
   empties into #wpr-usedcss. The panels then arrived unstyled: .amm-ml
   { display:none } was gone, so every drill level rendered at once.

   The rules that happened to survive were the ones whose class names appear as
   selector STRINGS in the menu's inline JS (.amm-ml__back, .amm-ml__item--drill,
   .amm-sidebar__item) — RUCSS counts those as used. That is luck, not a contract.

   So this file is excluded from RUCSS by name (see the same mu-plugin), which is
   why the whole feature's CSS had to live in one place instead of two.

   RULES FOR EDITING.
   - Put every new .amm-* rule HERE. A rule added to the parent stylesheet or to
     an inline style block will be tree-shaken away again the moment the markup
     it targets is not in the server-rendered HTML.
   - Keep the exclusion pattern in 15-amm-lazy-panels.php matching this filename.

   Origin: metro/assets/css/style.css lines 15050-15585 (the "Admin testing mega
   menu" section) plus the .amm-* rules from metro_child_header5_layout_css(),
   in their original cascade order. Pre-split copies: ~/backups/amm-rucss-20260904/
----------------------------------------------------------------------------- */

/* -----------------------------------------------
   Admin testing mega menu (.amm-*)
----------------------------------------------- */
.amm-nav {
	position: relative;
	width: 100%;
}

.amm-topbar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.amm-topbar__item > a {
	display: block;
	position: relative;
	font-weight: 500;
	color: #111111;
	padding: 32px 15px;
	text-decoration: none;
	white-space: nowrap;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.amm-topbar__item > a:hover,
.amm-topbar__item--panel:hover > a {
	color: #2e0c64;
}

.amm-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	background: transparent;
}

.amm-dropdown--open {
	display: block;
}

.amm-dropdown__inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 100%;
	overflow: hidden;
	background: #fff;
	/* The panel floats 8px clear of the menu bar (see .amm-dropdown padding-top),
	   so it reads as a card — round all four corners. overflow:hidden above is
	   what clips the sidebar's grey fill to the curve. */
	border-radius: 14px;
	-webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.amm-sidebar {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 25%;
	list-style: none;
	overflow-y: auto;
	margin: 0;
	padding: 8px 0;
	background: #f7f7f7;
	border-right: 1px solid #ebebeb;
}

.amm-sidebar__item {
	margin: 0;
}

.amm-sidebar__icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	margin-left: auto;
	padding-left: 8px;
	flex-shrink: 0;
}

.amm-sidebar__item > a {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	padding: 9px 18px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: #333;
	text-decoration: none;
	border-left: 3px solid transparent;
	-webkit-transition: all 0.15s;
	transition: all 0.15s;
	line-height: 1.4;
}

.amm-sidebar__item > a:hover,
.amm-sidebar__item--active > a {
	color: #2e0c64;
	background: #fff;
	border-left-color: #2e0c64;
}

.amm-content {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 20px 24px;
}

.amm-pane {
	display: none;
}

.amm-pane--active {
	display: block;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
}

.amm-child {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 28px;
}

.amm-child__hd {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	margin-bottom: 6px;
}

.amm-child__hd img {
	width: 36px;
	height: 36px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 4px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	border: 1px solid #ebebeb;
}

.amm-child__hd span {
	font-size: 14px;
	font-weight: 800;
	color: #222;
	line-height: 1.3;
}

.amm-child__hd:hover span {
	color: #2e0c64;
}

.amm-child .amm-gc {
	list-style: none !important;
	margin: 4px 0 0 45px !important;
	padding: 0 !important;
}

.amm-gc li {
	margin: 0;
	line-height: 1;
}

.amm-gc li a {
	font-size: 13px;
	color: #222;
	text-decoration: none;
	line-height: 1.9;
	display: block;
}

.amm-gc li a:hover {
	color: #2e0c64;
}

/* AMM: vertical menu hover trigger */
.vertical-menu-area.amm-vertical-mode {
	position: relative;
}

.vertical-menu-area.amm-vertical-mode .amm-dropdown {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: 8px;
	background: transparent;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 300ms, opacity 200ms ease 300ms;
	z-index: 9999;
}

.vertical-menu-area.amm-vertical-mode:hover .amm-dropdown {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s linear 0s, opacity 200ms ease 0s;
}

.vertical-menu-area.amm-vertical-mode .vertical-menu-btn .rtin-crossbar {
	display: none !important;
}
.vertical-menu-area.amm-vertical-mode .vertical-menu-btn .rtin-menubar {
	opacity: 1 !important;
	visibility: visible !important;
}

/* AMM: mobile hamburger */
@media (max-width: 991px) {
	.vertical-menu-area.amm-vertical-mode:hover .amm-dropdown {
		display: none;
	}

	.vertical-menu-area.amm-vertical-mode.amm-open .amm-dropdown {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		padding-top: 0;
		background: #fff;
		z-index: 99999;
	}

	.vertical-menu-area.amm-vertical-mode.amm-open .amm-dropdown__inner {
		display: none;
	}

	.vertical-menu-area.amm-vertical-mode .amm-mobile-close {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 14px 18px;
		background: #2e0c64;
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 10;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.vertical-menu-area.amm-vertical-mode .amm-mobile-close i {
		font-size: 20px;
	}

	.vertical-menu-area.amm-vertical-mode .vertical-menu-btn .rtin-crossbar {
		display: none !important;
	}

	.vertical-menu-area.amm-vertical-mode .vertical-menu-btn .rtin-menubar {
		opacity: 1 !important;
		visibility: visible !important;
	}
}

.vertical-menu-area.amm-vertical-mode .amm-mobile-close {
	display: none !important;
}

/* AMM: Brands pane */
.amm-brands-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 16px 20px;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-ms-flex-line-pack: start;
	    align-content: flex-start;
	padding: 8px 0;
}

.amm-brand-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	text-decoration: none;
	color: #333;
	width: 80px;
}

.amm-brand-item img {
	max-width: 72px;
	max-height: 48px;
	width: auto;
	height: auto;
	-o-object-fit: contain;
	   object-fit: contain;
	margin-bottom: 5px;
	-webkit-filter: grayscale(20%);
	        filter: grayscale(20%);
	-webkit-transition: -webkit-filter 0.2s;
	transition: filter 0.2s;
}

.amm-brand-item:hover img {
	-webkit-filter: none;
	        filter: none;
}

.amm-brand-item span {
	font-size: 11px;
	color: #555;
	line-height: 1.3;
}

/* AMM: drill-down mobile menu */
.amm-mobile-menu {
	display: none;
}

@media (max-width: 991px) {
	.vertical-menu-area.amm-vertical-mode.amm-open .amm-dropdown__inner {
		display: none;
	}

	.vertical-menu-area.amm-vertical-mode.amm-open .amm-mobile-menu {
		display: block;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
	}

	.amm-ml {
		display: none;
	}

	.amm-ml.amm-ml--active {
		display: block;
	}

	.amm-ml__header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 14px 18px;
		background: #2e0c64;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
	}

	.amm-ml__header .amm-ml__close {
		font-size: 20px;
		cursor: pointer;
	}

	.amm-ml__back {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 14px 18px;
		font-size: 15px;
		font-weight: 600;
		color: #2e0c64;
		background: #f0eaf8;
		cursor: pointer;
		border-bottom: 1px solid #ddd;
	}

	.amm-ml__back span {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 10px;
	}

	.amm-ml__back .amm-ml__close {
		font-size: 20px;
		color: #888;
		cursor: pointer;
	}

	.amm-ml__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.amm-ml__item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		margin: 0;
	}

	.amm-ml__img {
		width: 36px;
		height: 36px;
		-o-object-fit: cover;
		object-fit: cover;
		border-radius: 4px;
		margin: 10px 0 10px 16px;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.amm-ml__link {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		display: block;
		padding: 14px 16px;
		font-size: 15px;
		color: #222;
		text-decoration: none;
	}

	.amm-ml__item--drill {
		cursor: pointer;
	}

	.amm-ml__item--drill .amm-ml__link {
		color: #222;
	}

	.amm-ml__arrow {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		padding: 14px 18px;
		color: #2e0c64;
		font-size: 13px;
	}

	.amm-ml__item--view-all .amm-ml__link {
		color: #2e0c64;
		font-weight: 600;
		font-style: italic;
	}

	.amm-ml__item--view-all {
		border-bottom: 2px solid #f0eaf8;
	}

	.amm-ml__brand-img {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		width: 44px;
		height: 44px;
		margin: 8px 0 8px 16px;
		-ms-flex-negative: 0;
		    flex-shrink: 0;
	}

	.amm-ml__brand-img img {
		max-width: 40px;
		max-height: 36px;
		width: auto;
		height: auto;
		-o-object-fit: contain;
		   object-fit: contain;
	}
}

/* -----------------------------------------------
   Moved out of metro_child_header5_layout_css()
----------------------------------------------- */

/* Below 992: force mobile drawer behavior, never desktop dropdown. */
@media (max-width: 991.98px) {
	/* Below 992: force mobile drawer behavior, never desktop dropdown.
	   NOTE: do NOT use :hover here — iOS sticky hover after a tap would
	   beat .amm-open on specificity and hide the drawer. */
	.vertical-menu-area.amm-vertical-mode:not(.amm-open) .amm-dropdown,
	.vertical-menu-area.amm-vertical-mode:not(.amm-open) .amm-dropdown--open {
		display: none !important;
	}
	/* Drawer: viewport-bound, close bar pinned, only inner menu scrolls */
	.vertical-menu-area.amm-vertical-mode.amm-open .amm-dropdown {
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		height: auto !important;
		max-height: 100dvh !important;
		overflow: hidden !important;
	}
	.vertical-menu-area.amm-vertical-mode.amm-open .amm-mobile-close {
		position: sticky !important;
		top: 0 !important;
		z-index: 20 !important;
		flex-shrink: 0 !important;
	}
	.vertical-menu-area.amm-vertical-mode.amm-open .amm-mobile-menu {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	/* Per-level drawer header stays pinned while list scrolls */
	.vertical-menu-area.amm-vertical-mode.amm-open .amm-ml__header,
	.vertical-menu-area.amm-vertical-mode.amm-open .amm-ml__back {
		position: sticky !important;
		top: 0 !important;
		z-index: 10 !important;
	}
}

/* Desktop AMM: show child icons, indent grandchildren to align under the label */
@media (min-width: 992px) {
.amm-content .amm-child__hd img {
	display: block !important;
}
.amm-content .amm-child .amm-gc {
	margin-left: 45px !important;
}
}

/* Lock background scroll while drawer is open (any viewport) */
html.amm-scroll-locked,
body.amm-scroll-locked {
overflow: hidden !important;
touch-action: none !important;
overscroll-behavior: contain !important;
}

/* Account / orders / wishlist / cart quick links at the top of the mobile menu */
.amm-ml__icons { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #eee; background: #fbfaff; }
.amm-ml__icon { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #222; text-decoration: none; font-size: 11px; line-height: 1.2; text-align: center; }
.amm-ml__icon .metro-hicon__svg { display: block; width: 25px; height: 25px; pointer-events: none; }
.amm-ml__icon:hover, .amm-ml__icon:focus { color: #5a3d8a; }
.amm-ml__icon span { opacity: .85; }
/* Press feedback: native tap flash + held :active state (mobile menu had none) */
.amm-ml__icon { -webkit-tap-highlight-color: rgba(122,77,209,.2); border-radius: 10px; cursor: pointer; transition: background .12s ease, transform .08s ease; }
.amm-ml__icon:active { background: #ece4fb; transform: scale(.95); }
.amm-mobile-menu .amm-ml__item,
.amm-mobile-menu .amm-ml__link { -webkit-tap-highlight-color: rgba(122,77,209,.2); }
.amm-mobile-menu .amm-ml__item { cursor: pointer; transition: background .12s ease; }
.amm-mobile-menu .amm-ml__link { transition: background .12s ease; }
.amm-mobile-menu .amm-ml__item:active,
.amm-mobile-menu .amm-ml__link:active { background: #ece4fb; }
/* JS-driven pressed state (reliable across touch devices) */
.amm-mobile-menu .amm-ml__item.amm-pressed,
.amm-mobile-menu .amm-ml__back.amm-pressed { background: #ece4fb !important; }
.amm-ml__icon.amm-pressed { background: #ece4fb; transform: scale(.95); }

/* -----------------------------------------------
   .amm-toplevel — the server-rendered fallback list

   template-parts/vertical-menu.php prints this when lazy panels are on: the
   top-level category links, kept in the HTML for the internal link graph and as
   the fallback when the panel fetch fails. It shipped with no CSS at all, so it
   rendered as a bare bulleted list.

   On mobile the drawer hides .amm-dropdown__inner once open, which would leave a
   failed fetch showing an empty drawer — so while the fallback is still in place
   (the loader drops data-amm-lazy after injecting) it stays visible and is styled
   to match .amm-ml__list, the list it is about to be replaced by.
----------------------------------------------- */
.amm-toplevel {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.amm-toplevel__item {
	margin: 0;
	border-bottom: 1px solid #f0f0f0;
}

.amm-toplevel__item:last-child {
	border-bottom: 0;
}

.amm-toplevel__item > a {
	display: block;
	padding: 14px 16px;
	font-size: 15px;
	color: #222;
	text-decoration: none;
}

.amm-toplevel__item > a:hover,
.amm-toplevel__item > a:focus {
	background: #f7f4fd;
	color: #2e0c64;
}

/* Desktop: the fallback sits in the flex panel card, so give it a column to fill. */
@media (min-width: 992px) {
	.amm-dropdown__inner[data-amm-lazy] {
		display: block;
		padding: 8px 0;
		max-height: 70vh;
		overflow-y: auto;
	}
}

@media (max-width: 991px) {
	/* Keep the fallback reachable in the drawer until the panels replace it. */
	.vertical-menu-area.amm-vertical-mode.amm-open .amm-dropdown__inner[data-amm-lazy] {
		display: block;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.amm-toplevel__item > a {
		-webkit-tap-highlight-color: rgba(122, 77, 209, .2);
	}

	.amm-toplevel__item > a:active {
		background: #ece4fb;
	}
}

/* -----------------------------------------------
   Icon glyphs for the icons that only the fetched markup uses

   The drill arrows and back arrows are Font Awesome classes (fa fa-chevron-right /
   fa-chevron-left) that now appear ONLY in the panel markup fetched on first open.
   RUCSS therefore strips .fa-chevron-right:before / .fa-chevron-left:before from
   Font Awesome's own stylesheet — the base .fa rule survives (other icons on the
   page keep it) so the element gets the font but no glyph, and every row lost its
   chevron. .fa-times is unaffected because .amm-mobile-close puts it in the page.

   Scoped to the menu so global Font Awesome is left alone; the codepoints are the
   same ones Font Awesome declares (\f054 / \f053).
----------------------------------------------- */
#amm-dropdown .fa-chevron-right:before {
	content: "\f054";
}

#amm-dropdown .fa-chevron-left:before {
	content: "\f053";
}