/* Marcin: mega menu look in the style of the rest of the site (05.11.2026).
   The content and HTML come from the menu module in the BO (sf-mm-* classes) and the client's styles in
   custom/inspiration.css (block "MEGA MENU SecondFlor"); this file only changes the visual layer and is loaded
   after it (header.tpl). The client's rules use !important in many places, so do some of these.
   Palette as the account / checkout pages: green #414f34 (hover #2f3a25), text #2b2b29 / #3c3c3b / #6d6c67,
   lines #e3e3e3 / #ebebeb, light surface #f4f4f4, 4px corners. */

/* ---------- top bar ---------- */
/* plain links instead of green pills; the open / hovered item gets a 2px green line on the header's bottom edge */
@media (min-width: 768px) {
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"] > a {
		position: relative;
		padding: 10px 18px !important;
		border-radius: 0 !important;
		background: transparent !important;
		transition: none;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro) > a::after {
		content: "";
		position: absolute;
		right: 18px;
		bottom: 0;
		left: 18px;
		height: 2px;
		background: #414f34;
		transform: scaleX(0);
		transition: transform 0.2s ease;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro):hover > a {
		background: transparent !important;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro):hover > a::after {
		transform: scaleX(1);
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro):hover > a .mm_menu_content_title {
		color: #414f34 !important;
	}
}

.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] > a .mm_menu_content_title {
	/* the module's min-height: 30px set the bar height regardless of the padding */
	min-height: 0;
	color: #2b2b29;
	/* !important: the module's BO styles (inline) set Marcellus !important on .mm_menu_content_title */
	font-family: "Open Sans", sans-serif !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/* "Open a pro account" (guests only): the site's main button - green, 4px corners */
.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro > a {
	border: 0 !important;
	border-radius: 4px !important;
	background: #414f34 !important;
}

.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro > a .mm_menu_content_title {
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro:hover > a {
	background: #2f3a25 !important;
}

@media (min-width: 768px) {
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro > a {
		/* button in the middle of the bar, 4px above and below */
		margin: 4px 0 4px 18px;
		padding: 7px 18px !important;
	}
}

/* page behind the open panel: a light veil instead of 50% black (module megamenu.css) */
body .ets_mm_megamenu::before {
	background-color: rgba(43, 43, 41, 0.18);
}

/* ---------- panel ---------- */
.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_ul {
	border-top: 1px solid #e3e3e3;
	box-shadow: 0 16px 32px rgba(43, 43, 41, 0.08);
}

.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_ul::before {
	border-top: 1px solid #e3e3e3;
}

@media (min-width: 768px) {
	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_ul {
		padding-top: 32px;
		padding-bottom: 8px;
	}
}

/* column headings: Marcellus with a light line, as the section headings */
.ets_mm_megamenu .sf-mm-title {
	margin: 0 0 10px !important;
	padding: 0 0 10px !important;
	border-bottom: 1px solid #ebebeb;
	color: #2b2b29;
	font-size: 20px !important;
	font-weight: 400;
}

.ets_mm_megamenu .sf-mm-title a:hover {
	color: #414f34 !important;
}

/* links: dark grey, green on hover, no underline (one green on the whole site) */
.ets_mm_megamenu [class^="sf-mm"] a,
.ets_mm_megamenu [class*=" sf-mm"] a {
	color: #3c3c3b;
}

.ets_mm_megamenu [class^="sf-mm"] a:hover,
.ets_mm_megamenu [class*=" sf-mm"] a:hover {
	color: #414f34 !important;
	text-decoration: none;
}

.ets_mm_megamenu .sf-mm-list li {
	padding: 6px 0;
}

.ets_mm_megamenu .sf-mm-list li a {
	color: #3c3c3b;
}

/* "See all ..." / "All articles" / "All business types": green small caps with the arrow, as the card links */
.ets_mm_megamenu .sf-mm-all {
	margin-top: 12px;
	color: #414f34 !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ets_mm_megamenu .sf-mm-all:hover {
	color: #2f3a25 !important;
}

/* small labels ("Quick links", "Latest", "Free", "Warehouse") */
.ets_mm_megamenu .sf-mm-kicker {
	color: #8a8984;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* light boxes (Collections, Watch & follow, Warehouse, Business Guides): the site's #f4f4f4 with 4px corners */
.ets_mm_megamenu .sf-mm-box,
.ets_mm_megamenu .sf-mm-card-guide {
	border-radius: 4px;
	background: #f4f4f4;
}

.ets_mm_megamenu .sf-mm-box {
	padding: 20px 24px;
}

.ets_mm_megamenu .sf-mm-box .sf-mm-title {
	border-bottom-color: #e3e3e3;
}

/* boxes beside the columns (Collections, Watch & follow, Business Guides, Warehouse): pulled up by their top padding
   so the first line inside is level with the column headings */
.ets_mm_megamenu .sf-mm-box.sf-mm-collections,
.ets_mm_megamenu .sf-mm-gr > .sf-mm-box,
.ets_mm_megamenu .sf-mm-about > .sf-mm-box {
	margin-top: -20px;
	padding-top: 20px;
}

.ets_mm_megamenu .sf-mm-res > .sf-mm-card-guide {
	align-items: flex-start;
	margin-top: -20px;
	padding: 20px 24px;
}

/* ---------- Shop: quick links strip ---------- */
.ets_mm_megamenu .sf-mm-quick {
	margin-top: 24px;
	padding: 16px 0 20px;
	border-top: 1px solid #ebebeb;
}

.ets_mm_megamenu .sf-mm-quick a {
	color: #3c3c3b;
}

/* "Quick links": a bit larger than the other small labels (11px) */
.ets_mm_megamenu .sf-mm-quick .sf-mm-kicker {
	font-size: 13px !important;
}

/* its links larger too (14px -> 17px, the "Restocking soon" tag 12px -> 15px); "Not sure what..." stays */
.ets_mm_megamenu .sf-mm-quick a:not(.sf-mm-more):not(.sf-mm-soon) {
	font-size: 17px !important;
}

.ets_mm_megamenu .sf-mm-quick a.sf-mm-soon {
	font-size: 15px !important;
}

/* "Restocking soon": a toned tag like the status pills on the account pages */
.ets_mm_megamenu .sf-mm-soon {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px !important;
	border-radius: 12px !important;
	background: #eef2e8 !important;
	color: #414f34 !important;
	font-size: 12px !important;
	font-weight: 600;
}

.ets_mm_megamenu .sf-mm-more {
	color: #414f34 !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* the client's ".sf-mm-quick a" (14px !important) outranked the 12px above */
.ets_mm_megamenu .sf-mm-quick a.sf-mm-more {
	font-size: 12px !important;
}

/* 992-1199 (940px container): at 17px the strip needed ~980px and "Not sure what..." fell under it on the right -
   15px links, 13px tag, 20px gaps keep one line (Marcin, 05.11.2026) */
@media (min-width: 992px) and (max-width: 1199px) {
	.ets_mm_megamenu .sf-mm-quick {
		column-gap: 20px;
	}

	.ets_mm_megamenu .sf-mm-quick a:not(.sf-mm-more):not(.sf-mm-soon) {
		font-size: 15px !important;
	}

	.ets_mm_megamenu .sf-mm-quick a.sf-mm-soon {
		font-size: 13px !important;
	}
}

/* ---------- By business: cards as the homepage tiles ---------- */
/* the panel heading as the column headings of the other panels: 20px / 25px, 10px to the line,
   so it starts on the same line when switching between the menu items */
.ets_mm_megamenu .sf-mm-h {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 20px !important;
	line-height: 25px !important;
}

.ets_mm_megamenu .sf-mm-biz-head {
	/* the client's baseline alignment pushed the heading 6px down to the "All business types" link's baseline */
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ebebeb;
}

/* "All business types" beside the heading: no top margin of the "See all" links */
.ets_mm_megamenu .sf-mm-biz-head .sf-mm-all {
	margin-top: 0;
}

.ets_mm_megamenu .sf-mm-cards {
	gap: 24px;
}

.ets_mm_megamenu .sf-mm-card-img {
	border-radius: 4px;
}

/* 2:1 - the panel keeps both rows of cards on a laptop screen (phone: the client's 76 x 60 thumbnails) */
@media (min-width: 768px) {
	.ets_mm_megamenu .sf-mm-card:not(.sf-mm-card-guide) .sf-mm-card-img img {
		height: auto;
		aspect-ratio: 2 / 1;
	}
}

.ets_mm_megamenu .sf-mm-card-img img,
.ets_mm_megamenu .sf-mm-art img {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ets_mm_megamenu .sf-mm-card-img:hover img {
	transform: scale(1.03);
}

.ets_mm_megamenu .sf-mm-card-title {
	margin-top: 8px;
	color: #2b2b29 !important;
	font-size: 19px !important;
}

.ets_mm_megamenu .sf-mm-card-title:hover {
	color: #414f34 !important;
}

.ets_mm_megamenu .sf-mm-card-sub {
	color: #6d6c67;
}

.ets_mm_megamenu .sf-mm-card-link {
	margin-top: 4px;
	color: #414f34 !important;
}

.ets_mm_megamenu .sf-mm-card-link:hover {
	color: #2f3a25 !important;
}

.ets_mm_megamenu .sf-mm-card-guide .sf-mm-card-img {
	border-radius: 2px;
}

/* ---------- The Green Room ---------- */
.ets_mm_megamenu .sf-mm-art img {
	border-radius: 4px;
}

@media (min-width: 768px) {
	.ets_mm_megamenu .sf-mm-art img {
		height: auto;
		aspect-ratio: 16 / 10;
	}
}

.ets_mm_megamenu .sf-mm-art {
	overflow: hidden;
}

.ets_mm_megamenu .sf-mm-art:hover img {
	transform: scale(1.03);
}

.ets_mm_megamenu .sf-mm-art .sf-mm-kicker {
	color: #414f34;
}

.ets_mm_megamenu .sf-mm-art-title {
	font-size: 18px !important;
}

.ets_mm_megamenu .sf-mm-art:hover .sf-mm-art-title {
	color: #414f34;
	text-decoration: none;
}

.ets_mm_megamenu .sf-mm-box-title {
	border-top-color: #e3e3e3;
	font-size: 19px !important;
}

/* "Contact us": the site's secondary button (white, thin line, 4px corners) */
.ets_mm_megamenu .sf-mm-btn-outline {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
	color: #3c3c3b !important;
	letter-spacing: 0.08em;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.ets_mm_megamenu .sf-mm-btn-outline:hover {
	border-color: #414f34;
	background: #f7f8f5;
	color: #414f34 !important;
}

/* ---------- icons (About, Watch & follow): 16px, muted, green on hover ---------- */
.ets_mm_megamenu .sf-ico::before {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	vertical-align: -3px;
	background: #8a8984;
}

.ets_mm_megamenu .sf-ico:hover::before {
	background: #414f34;
}

.ets_mm_megamenu .sf-mm-contact {
	color: #3c3c3b;
}

/* ---------- tablet (Marcin, 05.11.2026) ---------- */
/* the bar did not fit the container (720px at 768-991, 940px at 992-1199) and the titles wrapped into two lines:
   one line with tighter items, the green line under the text */
@media (min-width: 768px) and (max-width: 1199px) {
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro) > a {
		padding: 10px 12px !important;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro) > a::after {
		right: 12px;
		left: 12px;
	}

	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] > a .mm_menu_content_title {
		font-size: 12px;
		letter-spacing: 0.08em;
		white-space: nowrap;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro > a {
		margin-left: 12px;
		padding: 7px 14px !important;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro > a .mm_menu_content_title {
		font-size: 11px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	/* "Open a pro account" (guests) does not fit beside the five items; the Sign in window and the homepage keep the offer */
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro {
		display: none !important;
	}

	/* panels: the client's one-column stacking (max-width: 991px) made them taller than the screen -
	   two or three columns again, the boxes as a full-width row under them */
	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_ul {
		padding-top: 24px;
	}

	/* 17px: "Preserved Greenery" in one line in the 25% Shop column (158px), level with the other headings */
	.ets_mm_megamenu .sf-mm-title {
		font-size: 17px !important;
	}

	/* Shop: the four category columns 25% each (were 125px), Collections under them with the links in four columns */
	.ets_mm_megamenu .mm_menus_li.sf-mm-shop .mm_columns_li.column_size_2 {
		width: 25% !important;
	}

	.ets_mm_megamenu .mm_menus_li.sf-mm-shop .mm_columns_li.column_size_4 {
		width: 100% !important;
	}

	.ets_mm_megamenu .sf-mm-box.sf-mm-collections {
		margin-top: 16px;
		padding: 16px 20px 12px;
	}

	.ets_mm_megamenu .sf-mm-collections .sf-mm-list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 20px;
	}

	/* tablet: the links at 15px in one row, "Not sure what..." always on its own row on the left
	   (it no longer fits beside them, and wrapping it by chance left it hanging on the right) */
	.ets_mm_megamenu .sf-mm-quick {
		column-gap: 20px;
		margin-top: 16px;
	}

	.ets_mm_megamenu .sf-mm-quick a:not(.sf-mm-more):not(.sf-mm-soon) {
		font-size: 15px !important;
	}

	.ets_mm_megamenu .sf-mm-quick a.sf-mm-soon {
		font-size: 13px !important;
	}

	.ets_mm_megamenu .sf-mm-quick .sf-mm-more {
		flex: 0 0 100%;
		margin-left: 0;
	}

	/* By business: four cards in a row with lower pictures (two rows instead of four), the guide card in the last cell */
	.ets_mm_megamenu .sf-mm-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px 16px;
		padding-bottom: 16px;
	}

	.ets_mm_megamenu .sf-mm-card-title {
		font-size: 16px !important;
	}

	.ets_mm_megamenu .sf-mm-card-sub {
		font-size: 13px !important;
	}

	.ets_mm_megamenu .sf-mm-biz .sf-mm-card-guide {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px;
	}

	.ets_mm_megamenu .sf-mm-biz .sf-mm-card-guide .sf-mm-card-img {
		flex: 0 0 auto;
	}

	.ets_mm_megamenu .sf-mm-biz .sf-mm-card-guide img {
		width: 48px;
		height: 69px;
	}

	.ets_mm_megamenu .sf-mm-biz .sf-mm-card-guide .sf-mm-card-title {
		font-size: 16px !important;
	}

	/* The Green Room: the list beside the two articles, Watch & follow as a row under them */
	.ets_mm_megamenu .sf-mm-gr {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 24px 28px;
		padding-bottom: 16px;
	}

	.ets_mm_megamenu .sf-mm-arts {
		gap: 16px;
	}

	.ets_mm_megamenu .sf-mm-art-title {
		font-size: 16px !important;
	}

	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: 28px;
		margin-top: 0;
		padding: 16px 20px;
	}

	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box > .sf-mm-kicker,
	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box > .sf-mm-social {
		grid-column: 1;
	}

	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box > .sf-mm-box-title,
	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box > .sf-mm-btn-outline {
		grid-column: 2;
		justify-self: start;
	}

	/* the question on the "Watch & follow" line, the button 12px under it */
	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box > .sf-mm-box-title {
		grid-row: 1;
		align-self: end;
		margin: 0;
		padding: 0;
		border-top: 0;
	}

	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box > .sf-mm-btn-outline {
		grid-row: 2;
		align-self: start;
		margin-top: 12px;
	}

	/* Resources: the two lists side by side, the guide as a row under them */
	.ets_mm_megamenu .sf-mm-res {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 28px;
		padding-bottom: 16px;
	}

	.ets_mm_megamenu .sf-mm-res > .sf-mm-card-guide {
		grid-column: 1 / -1;
		margin-top: 0;
		padding: 16px 20px;
	}

	.ets_mm_megamenu .sf-mm-res .sf-mm-card-guide .sf-mm-card-img {
		flex-basis: 64px;
	}

	.ets_mm_megamenu .sf-mm-res .sf-mm-card-guide img {
		width: 64px;
		height: 92px;
	}

	.ets_mm_megamenu .sf-mm-res .sf-mm-card-guide .sf-mm-card-title {
		font-size: 20px !important;
	}

	/* About: the desktop's three columns fit (224px each) */
	.ets_mm_megamenu .sf-mm-about {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		padding-bottom: 16px;
	}
}

/* ---------- phone: the menu drawer ---------- */
@media (max-width: 767px) {
	/* drawer head (close button): white with a line instead of the grey strip */
	.ets_mm_megamenu .mm_menus_ul > li.mobile_menu_top {
		border-bottom: 1px solid #ebebeb;
		background: #fff;
	}

	/* rows 52px with a line under each */
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro) {
		border-top: 0 !important;
		border-bottom: 1px solid #ebebeb !important;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"]:not(.sf-mm-pro) > a {
		min-height: 52px;
		padding: 16px 20px !important;
	}

	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] > a .mm_menu_content_title {
		font-size: 14px;
		letter-spacing: 0.08em;
	}

	/* open / close: a chevron instead of the module's "+" made of two lines (borders with !important) */
	/* the arrow sits at the row's top by its static position (absolute without top - the li is not positioned) */
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"] > .arrow {
		width: 56px;
		height: 52px;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"] > .arrow::before {
		/* the module puts the "+" 50px from the box's left edge (6px from the drawer's edge) - cut in half on phones */
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		width: 8px;
		height: 8px;
		border-top: 0 !important;
		border-right: 1.5px solid #3c3c3b !important;
		border-bottom: 1.5px solid #3c3c3b !important;
		transform: translate(-50%, -70%) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"] > .arrow::after {
		display: none !important;
	}

	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li[class*="sf-mm-"] > .arrow.opened::before {
		transform: translate(-50%, -30%) rotate(-135deg);
	}

	/* open section: no panel shadow / line, content in from the edges; 8px instead of the client's 26px above it */
	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_ul {
		padding-top: 8px !important;
		border-top: 0;
		box-shadow: none;
	}

	/* the button row's own top line doubled the line under About */
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro {
		border-top: 0 !important;
	}

	/* content from the same 20px edge as the row titles (the module adds 15px on each block) */
	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_ul .megamenu_wide_container_inner {
		padding: 4px 20px 24px;
	}

	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_ul .mm_blocks_li {
		padding-right: 0;
		padding-left: 0;
	}

	/* Shop opened was 1756px tall: the category lists and Collections in two columns, smaller headings,
	   the box no longer pulled up onto "See all artificial", the quick links at phone size (Marcin, 05.11.2026) */
	.ets_mm_megamenu .sf-mm-title {
		font-size: 18px !important;
	}

	.ets_mm_megamenu .mm_menus_li.sf-mm-shop .sf-mm-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.ets_mm_megamenu .mm_menus_li.sf-mm-shop .sf-mm-list li {
		padding: 5px 0;
	}

	.ets_mm_megamenu .mm_menus_li.sf-mm-shop .mm_columns_ul .mm_blocks_li {
		margin-bottom: 24px;
	}

	.ets_mm_megamenu .sf-mm-box.sf-mm-collections {
		margin-top: 0;
		padding: 16px;
	}

	.ets_mm_megamenu .sf-mm-quick {
		gap: 8px 16px;
		margin-top: 0;
		padding-bottom: 0;
	}

	.ets_mm_megamenu .sf-mm-quick .sf-mm-kicker {
		flex: 0 0 100%;
		font-size: 12px !important;
	}

	.ets_mm_megamenu .sf-mm-quick a:not(.sf-mm-more):not(.sf-mm-soon) {
		font-size: 15px !important;
	}

	.ets_mm_megamenu .sf-mm-quick a.sf-mm-soon {
		font-size: 13px !important;
	}

	.ets_mm_megamenu .sf-mm-quick .sf-mm-more {
		flex: 0 0 100%;
		margin-top: 4px;
	}

	/* The Green Room / Resources lists in two columns too; the boxes beside the columns on desktop were pulled up
	   by 20px there - on phones that put them onto the content above */
	.ets_mm_megamenu .sf-mm-gr > .sf-mm-col .sf-mm-list,
	.ets_mm_megamenu .sf-mm-res > .sf-mm-col .sf-mm-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.ets_mm_megamenu .sf-mm-gr > .sf-mm-box,
	.ets_mm_megamenu .sf-mm-about > .sf-mm-box,
	.ets_mm_megamenu .sf-mm-res > .sf-mm-card-guide {
		margin-top: 0;
	}

	.ets_mm_megamenu .sf-mm-art-title {
		font-size: 15px !important;
	}

	/* Resources guide: the client's desktop cover (110 x 158) outranked the phone size of the other guide card */
	.ets_mm_megamenu .sf-mm-res .sf-mm-card-guide {
		padding: 16px;
	}

	.ets_mm_megamenu .sf-mm-res .sf-mm-card-guide .sf-mm-card-img {
		flex-basis: 56px;
	}

	.ets_mm_megamenu .sf-mm-res .sf-mm-card-guide img {
		width: 56px;
		height: 80px;
	}

	.ets_mm_megamenu .sf-mm-res .sf-mm-card-guide .sf-mm-card-title {
		font-size: 18px !important;
	}

	.ets_mm_megamenu .sf-mm-cards {
		gap: 16px;
	}

	/* no empty band under the last block of an open section (module 20px + the cards' / grids' own 24px) */
	.ets_mm_megamenu .mm_menus_li[class*="sf-mm-"] .mm_columns_li:last-child .mm_blocks_li:last-child {
		margin-bottom: 0;
	}

	.ets_mm_megamenu .sf-mm-cards,
	.ets_mm_megamenu .sf-mm-gr,
	.ets_mm_megamenu .sf-mm-res,
	.ets_mm_megamenu .sf-mm-about {
		padding-bottom: 0;
	}

	/* "Open a pro account" (guests): full-width button under the list */
	.ets_mm_megamenu .mm_menus_ul > li.mm_menus_li.sf-mm-pro > a {
		margin: 20px !important;
		padding: 14px !important;
	}
}