/* Moho header dropdowns with category icons (Storefront). */

/* Dropdown panel */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu {
	background: #fff;
	border: 1px solid #ececec;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
	min-width: 250px;
	padding: .35em 0;
}

.main-navigation ul.menu ul.sub-menu li,
.main-navigation ul.nav-menu ul.sub-menu li {
	border: 0;
}

.main-navigation ul.menu ul.sub-menu li a,
.main-navigation ul.nav-menu ul.sub-menu li a {
	position: relative;
	padding: .7em 1.2em .7em 3em;
	font-size: .95em;
	color: #2b2b2b;
	transition: background .15s ease;
}

.main-navigation ul.menu ul.sub-menu li a:hover,
.main-navigation ul.nav-menu ul.sub-menu li a:hover {
	background: #f6f6f6;
}

/* Icon slot on each category item */
li.moho-mm-item > a::before {
	content: "";
	position: absolute;
	left: 1.05em;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .9;
}

li.moho-icon-overhead    > a::before { background-image: url('icons/overhead.svg'); }
li.moho-icon-selfclean   > a::before { background-image: url('icons/selfclean.svg'); }
li.moho-icon-arm         > a::before { background-image: url('icons/arm.svg'); }
li.moho-icon-soap        > a::before { background-image: url('icons/soap.svg'); }
li.moho-icon-accessories > a::before { background-image: url('icons/accessories.svg'); }
li.moho-icon-sink        > a::before { background-image: url('icons/sink.svg'); }

/* Small caret on dropdown parents */
.main-navigation ul.menu > li.menu-item-has-children > a::after,
.main-navigation ul.nav-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: .45em;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	vertical-align: middle;
	opacity: .6;
}

/* On mobile the icon indent is not needed as heavily; keep it readable */
@media (max-width: 768px) {
	.main-navigation ul.menu ul.sub-menu li a,
	.main-navigation ul.nav-menu ul.sub-menu li a {
		padding-left: 3em;
	}
}

/* ===== Site logo sizing ===== */
.site-header .custom-logo,
.site-branding .custom-logo-link img {
	max-height: 88px;
	width: auto;
	height: auto;
}
@media (max-width: 768px) {
	.site-header .custom-logo,
	.site-branding .custom-logo-link img { max-height: 64px; }
}