/* -----------------------------------------------------------------------------
   Mega menu — version B (tiles). Companion to inc/mega-menu-b.php.

   Loaded only while version B is being served, ON TOP of amm-menu.css: the shell
   (dropdown, rail, drawer, category filter) is shared, and this file changes only
   what a pane looks like. Everything is therefore scoped under .ammb-content or
   .ammb-rail so that nothing here can reach version A.

   A few overrides carry !important because the rules they beat carry it too —
   .amm-child .amm-gc in the parent-derived block sets margin/padding that way.
   That is the reason, not a shortcut.

   Excluded from Remove Unused CSS by basename in mu-plugins/15-amm-lazy-panels.php,
   for the same reason amm-menu.css is: the markup arrives after the page does, so
   RUCSS sees none of these classes and would strip the lot.
----------------------------------------------------------------------------- */

/* -----------------------------------------------
   Rail — the icon sits before the label here, small
----------------------------------------------- */
.ammb-rail .amm-sidebar__item > a {
	gap: 10px;
	padding: 11px 16px;
	font-size: 15px;
}

.ammb-rail .amm-sidebar__icon {
	-webkit-box-ordinal-group: 0;
	-ms-flex-order: -1;
	order: -1;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	object-fit: contain;
}

/* -----------------------------------------------
   Pane — a stack of sections, not three text columns
----------------------------------------------- */
.ammb-content .amm-pane--active {
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
}

.ammb-sec {
	margin: 0 0 26px;
	padding: 0 0 22px;
	border-bottom: 1px solid #f1eff5;
}

.ammb-sec:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.ammb-sec__hd {
	display: block;
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: #1c1330;
	text-decoration: none;
}

.ammb-sec__hd span { display: inline-block; }

a.ammb-sec__hd:hover span {
	color: #2e0c64;
	text-decoration: underline;
}

/* The heading of a real category also carries .amm-child__hd, whose image rule from
   version A would otherwise reserve a 36px slot that is empty here. */
.ammb-content .amm-child__hd img { display: none !important; }

/* -----------------------------------------------
   Tiles
----------------------------------------------- */
/* `.ammb-content` is on the selector for weight, not for scoping: version A indents
   grandchild lists with `.amm-child .amm-gc { margin: 4px 0 0 45px !important }`, and a
   single class cannot beat two even with !important. Without this the tiles sat 45px
   right of their own section heading. */
.ammb-content .ammb-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 18px 12px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Version A indents the same lists TWICE: `.amm-child .amm-gc` (line ~208) and again
   `.amm-content .amm-child .amm-gc { margin-left: 45px !important }` (line ~626). Both
   have to be answered at their own weight, or the tiles keep the 45px the second one
   applies and no longer line up with their heading. */
.ammb-content .amm-child .ammb-tiles {
	margin-left: 0 !important;
}

.ammb-tile { margin: 0; line-height: 1.3; }

.ammb-tile > a {
	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;
	gap: 8px;
	text-decoration: none;
	color: #222;
}

.ammb-tile__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: 100%;
	aspect-ratio: 1 / 1;
	max-width: 88px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #efedf4;
	border-radius: 10px;
	background: #fafafa;
	overflow: hidden;
	-webkit-transition: border-color .15s ease, box-shadow .15s ease;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ammb-tile__img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	mix-blend-mode: multiply; /* product cut-outs are shot on white */
}

.ammb-tile__label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Two lines' worth whether the name needs them or not, so tiles in a row keep a
	   common baseline and the next section does not start on a ragged edge. */
	min-height: 2.6em;
	font-size: 12.5px;
	color: #333;
	text-align: center;
}

.ammb-tile > a:hover .ammb-tile__img {
	border-color: #cbbce6;
	box-shadow: 0 2px 10px rgba(46, 12, 100, .10);
}

.ammb-tile > a:hover .ammb-tile__label {
	color: #2e0c64;
}

/* -----------------------------------------------
   Brands — logos, wider than they are tall
----------------------------------------------- */
.ammb-content .ammb-tiles--brands {
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}

.ammb-tiles--brands .ammb-tile__img {
	aspect-ratio: 16 / 9;
	max-width: none;
	padding: 10px 12px;
	background: #fff;
}

.ammb-tiles--brands .ammb-tile__img img { mix-blend-mode: normal; }

.ammb-tiles--brands .ammb-tile__label {
	font-weight: 600;
	-webkit-line-clamp: 1;
}

/* A brand with no logo on disk: the name is set inside the frame instead, so the
   tile carries the same weight as the logos beside it. */
.ammb-tile__img--wordmark {
	padding: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #2e0c64;
	text-align: center;
	letter-spacing: .01em;
	word-break: break-word;
}

/* Blank rail slot for a category with no thumbnail — keeps the labels aligned. */
.ammb-rail .amm-sidebar__icon--blank {
	display: block;
	background: transparent;
}

/* -----------------------------------------------
   Narrower desktops: fewer, smaller tiles per row
----------------------------------------------- */
@media (min-width: 992px) and (max-width: 1280px) {
	.ammb-content .ammb-tiles {
		grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
		gap: 14px 10px;
	}

	.ammb-tile__img { max-width: 76px; }
	.ammb-tile__label { font-size: 12px; }
	.ammb-rail .amm-sidebar__item > a { font-size: 14px; padding: 10px 14px; }
}