/**
 * Catalog side menu — style as on shvedskayastenka.ru
 * Scope: #sp-left sidebar + #yt_slideshow homepage column
 *
 * Does not change menu items / order — CSS only.
 * Rollback: comment out sidebar-menu-modern.css in templates/sj_topdeal/index.php
 */

/* ---- Container: kill coolgrays / theme backgrounds ---- */
:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas.mainNavOff,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu,
:is(#sp-left, #yt_slideshow) #jux_megamenucss3.coolgrays #js-mainnavcss3.megamenu,
:is(#sp-left, #yt_slideshow) #jux_megamenucss3.none #js-mainnavcss3.megamenu {
	background: #fff !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 10px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	/* must stay visible — flyout submenus are positioned outside the box */
	overflow: visible !important;
}

:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas .jux-closed {
	display: none;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3 {
	margin: 0 !important;
	position: relative;
	border-bottom: 1px solid #f0f0f0;
	background: transparent !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3:last-child {
	border-bottom: none;
}

/* Ensure flyouts open on hover (coolgrays is missing opacity/visibility reveal) */
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.noJS ul.megamenu li.haschild > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild > div.childcontent.adddropdown {
	display: none;
	opacity: 0;
	visibility: hidden;
}

:is(#sp-left, #yt_slideshow) #js-mainnavcss3.noJS ul.megamenu li.haschild:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.noJS ul.megamenu li.haschild.megacss3:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild.megacss3:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild-over > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.nav-hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild.megacss3:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) .childcontent.open > .dropdown-menu {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 9999 !important;
}

/* Vertical flyout positioning (noJS mode has no .js-megamenu wrapper) */
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.megamenu li.megacss3 > .childcontent.adddropdown {
	position: absolute !important;
}

/* Level 0: open to the right of sidebar item */
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level0 > li.megacss3 > .childcontent.adddropdown {
	left: 100% !important;
	top: 0 !important;
	margin-left: 0 !important;
	margin-top: -47px !important;
}

/* Level 1+ : open to the right of parent row (direct child only!) */
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level1 > li.haschild > .childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level2 > li.haschild > .childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level3 > li.haschild > .childcontent.adddropdown {
	left: 100% !important;
	right: auto !important;
	top: 0 !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
}

:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level1 > li.haschild,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level1 > li.haschild-over,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level2 > li.haschild,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level2 > li.haschild-over,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level3 > li.haschild,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level3 > li.haschild-over {
	position: relative !important;
}

/* Module rule "ul.level0 li .childcontent { margin-left:100% }" hits nested levels too — reset */
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level1 > li.haschild > .childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level2 > li.haschild > .childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left ul.level3 > li.haschild > .childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #jux_megamenucss3 .horizontal .level1 .childcontent.adddropdown.cols1 {
	margin-left: 0 !important;
}

/* Parents must not clip flyouts */
:is(#sp-left, #yt_slideshow) #jux_megamenucss3,
:is(#sp-left, #yt_slideshow) #jux_megamenucss3.coolgrays,
:is(#sp-left, #yt_slideshow) .sp-module,
:is(#sp-left, #yt_slideshow) .sppb-addon-module,
:is(#sp-left, #yt_slideshow) .sppb-column-addons,
:is(#sp-left, #yt_slideshow) .sppb-addon,
#yt_slideshow .sppb-col-md-3,
#yt_slideshow .sppb-col-sm-3,
#sp-left .sp-column {
	overflow: visible !important;
}

/* ---- Top-level links ---- */
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3 > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3 > span.megacss3 {
	display: block;
	padding: 12px 38px 12px 14px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #333 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3 > a.megacss3 .menu-title {
	display: block;
	color: inherit !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3 > a.megacss3:hover,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3:hover > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3.nav-hover > a.megacss3,
:is(#sp-left, #yt_slideshow) .js-megamenu-off-canvas ul.level0 li > a:hover,
:is(#sp-left, #yt_slideshow) .js-megamenu-off-canvas ul.level0 li > a:focus,
:is(#sp-left, #yt_slideshow) .js-megamenu-off-canvas li.nav-hover > a {
	background: #fff7f3 !important;
	color: #ff5722 !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3.active > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3 > a.megacss3.active,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3.active,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 .active,
:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas .active {
	background: #fff3ee !important;
	color: #ff5722 !important;
	box-shadow: inset 3px 0 0 #ff5722;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3.active > a.megacss3 .menu-title,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.megacss3 > a.megacss3.active .menu-title {
	color: #ff5722 !important;
}

/* ---- Chevron for items with children ---- */
/* Hide module FontAwesome arrows (fixed top:10px — misaligned on multi-line items) */
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left li.haschild span.menu-title::after,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu.vertical.left li.haschild-over span.menu-title::after {
	content: none !important;
	display: none !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.haschild > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.haschild-over > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.haschild > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.haschild-over > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.haschild > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.haschild-over > a.megacss3 {
	position: relative;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.haschild > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.haschild-over > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.haschild > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.haschild-over > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.haschild > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.haschild-over > a.megacss3::after {
	content: "\203A" !important;
	display: block !important;
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	color: #bbb !important;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1;
	pointer-events: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.haschild:hover > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.haschild.nav-hover > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.haschild:hover > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.haschild-over:hover > a.megacss3::after,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.haschild:hover > a.megacss3::after {
	color: #ff5722 !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level0 > li.haschild.open > a.megacss3::after {
	transform: translateY(-50%) rotate(90deg);
	color: #ff5722 !important;
}

:is(#sp-left, #yt_slideshow) .js-megamenu-off-canvas .arrow-icon,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 .arrow-icon {
	display: none !important;
}

/* ---- Flyout submenu panels ---- */
:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas ul.megamenu li.haschild:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas ul.megamenu li.haschild-over > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas ul.megamenu li.nav-hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild.megacss3:hover > div.childcontent.adddropdown {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

:is(#sp-left, #yt_slideshow) .childcontent.adddropdown .childcontent-inner-wrap.dropdown-menu,
:is(#sp-left, #yt_slideshow) .childcontent.adddropdown .childcontent-inner,
:is(#sp-left, #yt_slideshow) .childcontent-inner-wrap,
:is(#sp-left, #yt_slideshow) .childcontent-inner,
:is(#sp-left, #yt_slideshow) .childcontent.open > .dropdown-menu,
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild > div.childcontent .childcontent-inner-wrap,
:is(#sp-left, #yt_slideshow) #jux_megamenucss3.coolgrays #js-mainnavcss3 ul.megamenu li.haschild > div.childcontent .childcontent-inner-wrap,
:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas .childcontent-inner,
:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas .childcontent.open > .dropdown-menu {
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
	padding: 6px 0 !important;
}

/* Do not put overflow/display on the flyout wrapper itself — only style the inner panel */
:is(#sp-left, #yt_slideshow) #js-mainnavcss3 ul.megamenu li.haschild.megacss3:hover > div.childcontent.adddropdown,
:is(#sp-left, #yt_slideshow) #jux_megamenucss3.coolgrays #js-mainnavcss3 ul.megamenu li.haschild.megacss3:hover > div.childcontent.adddropdown {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

:is(#sp-left, #yt_slideshow) .childcontent.adddropdown .childcontent.adddropdown .childcontent-inner-wrap,
:is(#sp-left, #yt_slideshow) .childcontent.adddropdown .childcontent.adddropdown .childcontent-inner {
	background: #fff !important;
	border: 1px solid #e0e0e0 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
}

/* Inline expanded submenu (accordion) — also white */
:is(#sp-left, #yt_slideshow) .childcontent.open > .dropdown-menu,
:is(#sp-left, #yt_slideshow) .childcontent.open .childcontent-inner {
	background: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 4px 0 !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level3 {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level3 > li.megacss3 {
	border-bottom: 1px solid #ececec;
	background: transparent !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.megacss3:last-child,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.megacss3:last-child,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level3 > li.megacss3:last-child {
	border-bottom: none;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.megacss3 > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.megacss3 > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level3 > li.megacss3 > a.megacss3 {
	display: block;
	padding: 9px 14px 9px 22px !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	color: #555 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.megacss3 > a.megacss3:hover,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.megacss3 > a.megacss3:hover,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level3 > li.megacss3 > a.megacss3:hover {
	background: #fff7f3 !important;
	color: #ff5722 !important;
}

:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level1 > li.megacss3.active > a.megacss3,
:is(#sp-left, #yt_slideshow) .megamenu.wtf-menu.level2 > li.megacss3.active > a.megacss3 {
	color: #ff5722 !important;
	font-weight: 600 !important;
}

:is(#sp-left, #yt_slideshow) .accordion-btn-wrap {
	right: 0 !important;
	width: 36px !important;
	height: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

:is(#sp-left, #yt_slideshow) .accordion-btn-wrap .accordion-btn {
	color: #999 !important;
	font-size: 0 !important;
	line-height: 1;
}

:is(#sp-left, #yt_slideshow) .accordion-btn-wrap .accordion-btn::before {
	font-family: FontAwesome;
	font-size: 14px;
	content: "\f107";
}

:is(#sp-left, #yt_slideshow) .accordion-btn-wrap .accordion-expanded::before {
	content: "\f106";
}

/* ---- Promo colors (same as reference) ---- */
:is(#sp-left, #yt_slideshow) a.megacss3[href*="aktsiya"] .menu-title,
:is(#sp-left, #yt_slideshow) a.megacss3[href*="skidki"] .menu-title {
	color: #e53935 !important;
	font-weight: 700 !important;
}

:is(#sp-left, #yt_slideshow) a.megacss3[href*="novinka"] .menu-title {
	color: #2e7d32 !important;
	font-weight: 700 !important;
}

@media (max-width: 991px) {
	:is(#sp-left, #yt_slideshow) #js-meganav-off-canvas.mainNavOff,
	:is(#sp-left, #yt_slideshow) #js-mainnavcss3.megamenu {
		border-radius: 0;
		box-shadow: none;
	}
}

/* Homepage: slightly denser rows */
#yt_slideshow .sppb-row {
	align-items: flex-start;
}

#yt_slideshow .megamenu.wtf-menu.level0 > li.megacss3 > a.megacss3 {
	padding: 8px 28px 8px 12px !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
}

#yt_slideshow .megamenu.wtf-menu.level0 > li.megacss3 > a.megacss3 .menu-title {
	line-height: 1.25 !important;
}

#yt_slideshow .megamenu.wtf-menu.level0 > li.haschild > a.megacss3::after,
#yt_slideshow .megamenu.wtf-menu.level0 > li.haschild-over > a.megacss3::after,
#yt_slideshow .megamenu.wtf-menu.level1 > li.haschild > a.megacss3::after,
#yt_slideshow .megamenu.wtf-menu.level2 > li.haschild > a.megacss3::after {
	font-size: 13px !important;
	right: 10px !important;
}

#yt_slideshow .megamenu.wtf-menu.level1 > li.megacss3 > a.megacss3,
#yt_slideshow .megamenu.wtf-menu.level2 > li.megacss3 > a.megacss3,
#yt_slideshow .megamenu.wtf-menu.level3 > li.megacss3 > a.megacss3 {
	padding: 6px 10px 6px 18px !important;
	font-size: 11.5px !important;
	line-height: 1.25 !important;
}

#yt_slideshow {
	padding-bottom: 12px !important;
}