/* Stalco mega menu (see megamenu.js). Colors: Stalco green #006241, charcoal #242424, light #f5f5f5. */

/* Desktop panels */
body.smm .et-menu > li.smm-mega { position: relative; display: inline-flex; align-items: center; }
body.smm .et-menu > li.smm-mega > a { padding-right: 0 !important; }
body.smm .et-menu > li.smm-mega > a::after { display: none !important; }

.smm-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; margin: 0 6px 0 2px; padding: 0;
	border: 0; border-radius: 2px; background: transparent; color: #242424; cursor: pointer;
}
.smm-toggle::before {
	content: ""; width: 7px; height: 7px; margin-top: -4px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .15s ease;
}
.smm-open > .smm-toggle { color: #006241; }
.smm-open > .smm-toggle::before { transform: rotate(-135deg); margin-top: 4px; }
.smm-toggle:focus-visible,
.smm-panel a:focus-visible,
.smm-acc-toggle:focus-visible { outline: 2px solid #006241; outline-offset: 2px; }

.smm-panel {
	position: absolute; top: 100%; right: 0; z-index: 9999;
	margin-top: 8px; padding: 20px;
	background: #fff; border-top: 3px solid #006241; border-radius: 0 0 2px 2px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
	font-family: 'Noto Sans', sans-serif; text-align: left;
}
.smm-panel[hidden] { display: none !important; }
/* Invisible bridge so the panel doesn't close while the pointer crosses the gap. */
.smm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.smm-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.smm-item { margin: 0; padding: 0; }
body.smm .et-menu li.smm-mega > ul.smm-src { display: none !important; }

.smm-panel--grid { width: 640px; }
.smm-panel--grid .smm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.smm-panel--grid .smm-link {
	display: block; padding: 12px 14px !important;
	border-left: 4px solid transparent; border-radius: 2px;
	color: #242424 !important; font-size: 15px !important; font-weight: 400; line-height: 1.35; opacity: 1 !important;
}
.smm-panel--grid .smm-link:hover,
.smm-panel--grid .smm-link:focus-visible { background: #f5f5f5; border-left-color: #006241; color: #006241 !important; }

.smm-all {
	display: block; margin-top: 14px; padding: 14px 14px 0 !important;
	border-top: 1px solid #e2e2e2; color: #006241 !important; font-size: 15px; font-weight: 700; opacity: 1 !important;
}
.smm-all:hover { text-decoration: underline; }

/* Product lines: one card per line in its own color. */
.smm-panel--lines { width: 300px; }
.smm-panel--lines .smm-list { display: grid; gap: 8px; }
.smm-panel--lines .smm-link {
	display: block; padding: 16px 18px !important; border-radius: 2px;
	color: #fff !important; font-size: 16px !important; font-weight: 700; letter-spacing: .02em; opacity: 1 !important;
	transition: filter .15s ease;
}
.smm-panel--lines .smm-link:hover { filter: brightness(1.12); }
.smm-line--stalco { background: #006241; }
.smm-line--perfect { background: #242424; }
.smm-line--garden { background: #7ab51d; color: #102a00 !important; }

.smm-desc { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; opacity: .8; }

@media (max-width: 980px) {
	.smm-panel, .smm-toggle { display: none !important; }
}

/* Mobile accordion (Divi's hamburger menu) */
@media (max-width: 980px) {
	.et_mobile_menu .smm-toggle, .et_mobile_menu .smm-panel { display: none !important; }
	.et_mobile_menu li.smm-acc { position: relative; }
	.et_mobile_menu li.smm-acc > a { padding-right: 64px !important; }
	.smm-acc-toggle {
		position: absolute; top: 0; right: 0; width: 56px; height: 52px;
		display: flex; align-items: center; justify-content: center;
		border: 0; border-left: 1px solid #e2e2e2; background: transparent; color: #006241; cursor: pointer;
	}
	.smm-acc-toggle::before {
		content: ""; width: 9px; height: 9px; margin-top: -5px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); transition: transform .15s ease;
	}
	.smm-acc-open > .smm-acc-toggle::before { transform: rotate(-135deg); margin-top: 5px; }
	.et_mobile_menu li.smm-acc > a { border-bottom: 1px solid #e2e2e2 !important; padding-bottom: 14px !important; }
	.et_mobile_menu li.smm-acc-open > ul.sub-menu { padding-top: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.smm-toggle::before, .smm-acc-toggle::before, .smm-panel--lines .smm-link { transition: none; }
}