/* The Products mega menu.
 *
 * Sits inside Electro's .yamm-content, which supplies the panel and nothing
 * else. Everything here is scoped to .smc-mm so it cannot leak into the
 * theme's other dropdowns. Electro out-specifies plugin selectors on links,
 * so the few declarations it would otherwise win are marked.
 */

/* Electro anchors this dropdown under the Products item and fixes it at 900px.
   Pulling it left to the container edge looks tempting — 300px of the row sits
   empty — but that space is not free: the logo occupies it in the same header
   row, and on the home page the always-open "Shop By Category" panel sits
   directly below it. Widening leftward puts the first column underneath both.
   So the left edge stays where the theme puts it, and only the right edge
   grows. The nav's right edge to the container's right edge measures 300px up
   to 1440 and 358px above it, so +300 lands exactly on the container edge at
   common widths and never overflows at large ones. */
.yamm .dropdown.yamm-fw > .dropdown-menu:has(.smc-mm) {
	width: calc(100% + 300px);
	max-width: none;
}
.smc-mm {
	padding: 22px 26px 0;
	font-family: inherit;
}

/* One column per group. They are equal width rather than content width: a
   ragged column edge is the thing that makes a menu look unfinished. */
.smc-mm__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 26px;
}

.smc-mm--cols-4 .smc-mm__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.smc-mm--cols-5 .smc-mm__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.smc-mm--cols-6 .smc-mm__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.smc-mm__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* --- the column heading --- */

.smc-mm__head {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Two of the five headings wrap. Without a floor the rules beneath them
	   sit at five different heights and the first product in each column
	   starts on a different line. Bootstrap puts border-box on everything, so
	   this figure includes the padding: two lines at 13.5px/1.3 plus the 9px
	   gap measures 43.8, and 46 leaves room for a different font metric. */
	min-height: 46px;
	padding-bottom: 9px;
	margin-bottom: 9px;
	border-bottom: 1px solid #e6ebf0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: #1d2b36 !important;
	text-decoration: none !important;
}

.smc-mm__head:hover,
.smc-mm__head:focus { color: #0787ea !important; }

.smc-mm__head i {
	flex: 0 0 auto;
	font-size: 14px;
	color: #0787ea;
}

.smc-mm__headname { min-width: 0; }

/* --- the products --- */

.smc-mm__items {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	flex: 1 1 auto;
}

.smc-mm__items li { margin: 0; }

/* A product name gets two lines before it is cut. "EcoWealth 10kW Solar
   System" truncated to "EcoWealth 10kW Sol..." is not a listing anyone can
   use, and because .smc-mm__items grows to fill the column the "View all"
   links still line up across all five regardless of height. */
.smc-mm__items a {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	padding: 3px 0 !important;
	font-size: 12.5px;
	line-height: 1.45;
	color: #5a6b78 !important;
	text-decoration: none !important;
	overflow: hidden;
}

.smc-mm__items a:hover,
.smc-mm__items a:focus { color: #0787ea !important; }

.smc-mm__more {
	font-size: 12px;
	font-weight: 600;
	color: #0787ea !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.smc-mm__more:hover,
.smc-mm__more:focus { text-decoration: underline !important; }

/* --- the store strip --- */

.smc-mm__foot {
	display: flex;
	align-items: center;
	/* The strip itself does not wrap — only the pills inside it do — so
	   "Shop all products" stays on the right rather than dropping to a line
	   of its own. */
	flex-wrap: nowrap;
	gap: 10px 18px;
	margin-top: 20px;
	padding: 13px 26px;
	margin-left: -26px;
	margin-right: -26px;
	background: #f6f8fa;
	border-top: 1px solid #e6ebf0;
}

.smc-mm__footlabel {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8394a1;
}

.smc-mm__stores {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}

/* Electro resolves these to display:block, border:0 and no horizontal padding,
   so every declaration that draws the pill has to be marked or there is no
   pill — measured, not guessed. */
.smc-mm__stores a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 4px 11px !important;
	border: 1px solid #e0e6ec !important;
	border-radius: 15px !important;
	background: #fff !important;
	font-size: 12.5px;
	color: #1d2b36 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.smc-mm__stores a:hover,
.smc-mm__stores a:focus {
	border-color: #0787ea !important;
	color: #0787ea !important;
}

/* The count is the honest part of a menu entry: it says whether the link is
   worth following. Quiet enough not to compete with the name. */
.smc-mm__count {
	font-size: 11px;
	font-weight: 600;
	color: #8394a1;
	font-variant-numeric: tabular-nums;
}

.smc-mm__all {
	font-size: 12.5px;
	font-weight: 600;
	color: #0787ea !important;
	text-decoration: none !important;
	white-space: nowrap;
	margin-left: auto;
}

.smc-mm__all:hover,
.smc-mm__all:focus { text-decoration: underline !important; }

/* Electro only shows this header above 1200px, so the rules below are a
   safety net rather than the mobile experience. */
@media (max-width: 1199px) {
	.smc-mm { padding: 16px 16px 0; }
	.smc-mm__cols,
	.smc-mm--cols-4 .smc-mm__cols,
	.smc-mm--cols-5 .smc-mm__cols,
	.smc-mm--cols-6 .smc-mm__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.smc-mm__foot { margin-left: -16px; margin-right: -16px; padding: 13px 16px; }
	.smc-mm__all { margin-left: 0; }
}