﻿/*
* Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/

.mega-menu,
.menu-title,
.mega-menu .dropdown,
.drop-menu .dropdown {
	display: none;
}

@media all and (min-width: 1025px) {

	/* =========================================
	   Default top-level mega menu behavior
	========================================= */

	.mega-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		position: relative;
		flex: 0 0 auto;
		width: auto;
		min-height: 38px;
		margin-left: auto;
		padding: 0;
	}

	.mega-menu > li {
		flex: 0 0 auto;
	}

	.mega-menu-responsive {
		display: none !important;
	}

	.mega-menu > li > a,
	.mega-menu > li > span {
		display: flex;
		align-items: center;
		min-height: 38px;
		padding: 8px 14px;
		font-size: 16px;
		line-height: 1;
		white-space: nowrap;
		color: #fff;
	}

	.mega-menu > li > a:hover,
	.mega-menu > li > span:hover {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.mega-menu > li > span {
		cursor: default;
	}

	.with-dropdown-in-grid {
		position: relative;
	}

	.drop-menu .sublist > li > span {
		display: block;
		padding: 8px 15px 8px 20px;
		color: #333;
	}

	.drop-menu .sublist > li:hover > span {
		background-color: #f3f3f3;
	}

	.mega-menu .dropdown,
	.drop-menu .dropdown {
		position: absolute;
	}

	.mega-menu .dropdown {
		left: 0;
	}

	.drop-menu .dropdown {
		top: -10px;
		left: 100%;
		padding-left: 2px;
	}

	.mega-menu .active,
	.drop-menu .active {
		display: block;
	}

	.mega-menu .row-wrapper,
	.drop-menu .row-wrapper {
		width: 990px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		background-color: #fff;
		padding: 20px;
	}

	.mega-menu .row,
	.drop-menu .row {
		display: flex;
		column-gap: 10px;
	}

	.mega-menu .row + .row,
	.drop-menu .row + .row {
		margin-top: 25px;
	}

	.mega-menu .box,
	.drop-menu .box {
		display: flex;
		flex-flow: column;
		float: left;
	}

	.mega-menu .boxes-1 .box,
	.drop-menu .boxes-1 .box {
		width: 100%;
	}

	.mega-menu .boxes-2 .box,
	.drop-menu .boxes-2 .box {
		width: calc(50% - 5px);
	}

	.mega-menu .boxes-3 .box,
	.drop-menu .boxes-3 .box {
		width: calc(33.333% - 6.66px);
	}

	.mega-menu .boxes-4 .box,
	.drop-menu .boxes-4 .box {
		width: calc(25% - 7.5px);
	}

	.mega-menu .boxes-5 .box,
	.drop-menu .boxes-5 .box {
		width: calc(20% - 8px);
	}

	.mega-menu .boxes-6 .box,
	.drop-menu .boxes-6 .box {
		width: calc(16.666% - 8.33px);
	}

	.mega-menu .boxes-7 .box,
	.drop-menu .boxes-7 .box {
		width: calc(14.285% - 8.57px);
	}

	.mega-menu .boxes-8 .box,
	.drop-menu .boxes-8 .box {
		width: calc(12.5% - 8.75px);
	}

	.mega-menu .picture,
	.drop-menu .picture {
		order: 0;
		border: 1px solid #eee;
		border-radius: 6px;
		overflow: hidden;
		font-size: 0;
	}

	.mega-menu .picture a,
	.drop-menu .picture a {
		display: block;
	}

	.mega-menu .picture img,
	.drop-menu .picture img {
		display: block;
		border-radius: 6px;
	}

	.mega-menu .box .title,
	.drop-menu .box .title {
		order: 1;
		margin-top: 15px;
		font-size: 20px;
		font-weight: 700;
	}

	.mega-menu .title a,
	.drop-menu .title a {
		color: #333;
	}

	.mega-menu .title a:hover,
	.drop-menu .title a:hover {
		color: #4e30a4;
	}

	.mega-menu .subcategories,
	.drop-menu .subcategories {
		order: 2;
		display: flex;
		flex-flow: column;
		row-gap: 10px;
		margin-top: 10px;
	}

	.mega-menu .subcategories a,
	.drop-menu .subcategories a {
		color: #333;
	}

	.mega-menu .subcategories a:hover,
	.drop-menu .subcategories a:hover {
		color: #4e30a4;
	}

	.mega-menu .subcategories .view-all,
	.drop-menu .subcategories .view-all {
		font-weight: 700;
		color: #4e30a4;
	}

	/* =========================================
	   LEFT CATEGORY DROPDOWN - tighter Kingdom-style
	   Applies only to the drop-menu area
	========================================= */

	.drop-menu .mega-menu {
		display: block;
		width: 300px;
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	.drop-menu .mega-menu > li {
		display: block;
		flex: none;
	}

	/* Hide duplicate inner root trigger text inside the dropdown */
	.drop-menu .mega-menu > .root-category > a,
	.drop-menu .mega-menu > .root-category > span {
		display: none !important;
	}

	/* Keep the categories panel visible inside the left dropdown */
	.drop-menu .mega-menu .dropdown.categories {
		display: block;
		position: static;
		left: auto;
		top: auto;
		padding: 0;
	}

	.drop-menu .mega-menu .row-wrapper {
		width: 300px !important;
		padding: 0 !important;
		background: #f3f3f3;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
		overflow: visible;
	}

	/* Stack all category rows vertically */
	.drop-menu .mega-menu .row {
		display: block !important;
		margin: 0 !important;
		column-gap: 0 !important;
	}

	.drop-menu .mega-menu .row + .row {
		margin-top: 0 !important;
	}

	/* Each category row */
	.drop-menu .mega-menu .box {
		position: relative;
		display: flex !important;
		flex-flow: row;
		align-items: center;
		width: 100% !important;
		min-height: 42px;
		padding: 0 12px !important;
		margin: 0 !important;
		background: #f3f3f3;
		border-bottom: 1px solid #d9d9d9;
		box-sizing: border-box;
		float: none !important;
	}

	.drop-menu .mega-menu .box:last-child {
		border-bottom: 0;
	}

	.drop-menu .mega-menu .box:hover {
		background: #ececec;
	}

	/* Small image/icon on the left */
	.drop-menu .mega-menu .picture {
		order: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 18px;
		width: 18px;
		height: 18px;
		margin: 0 10px 0 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		overflow: hidden;
		background: transparent !important;
		font-size: 0;
	}

	.drop-menu .mega-menu .picture a {
		display: block;
		width: 18px;
		height: 18px;
	}

	.drop-menu .mega-menu .picture img {
		display: block;
		width: 18px !important;
		height: 18px !important;
		max-width: 18px !important;
		max-height: 18px !important;
		object-fit: contain;
		border-radius: 0 !important;
	}

	/* Category name */
	.drop-menu .mega-menu .box .title {
		order: 1;
		flex: 1 1 auto;
		margin: 0 !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.2;
	}

	.drop-menu .mega-menu .title a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 42px;
		color: #444;
		text-decoration: none;
	}

	.drop-menu .mega-menu .title a:hover {
		color: #222;
	}

	/* Arrow on rows that have subcategories */
	.drop-menu .mega-menu .box:has(.subcategories) .title a::after {
		content: "\203A";
		margin-left: auto;
		font-size: 20px;
		line-height: 1;
		color: #666;
	}

	/* Flyout subcategory panel */
	.drop-menu .mega-menu .subcategories {
		display: none;
		position: absolute;
		top: 0;
		left: calc(100% + 1px);
		min-width: 240px;
		max-width: 300px;
		margin: 0 !important;
		padding: 14px 16px !important;
		background: #fff;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
		z-index: 10;
		box-sizing: border-box;
		row-gap: 8px;
	}

	.drop-menu .mega-menu .box:hover .subcategories {
		display: flex;
	}

	.drop-menu .mega-menu .subcategory-item {
		display: block;
		margin: 0;
		padding: 0;
	}

	.drop-menu .mega-menu .subcategory-item a {
		display: block;
		color: #444;
		line-height: 1.3;
		text-decoration: none;
	}

	.drop-menu .mega-menu .subcategory-item a:hover {
		color: #4e30a4;
	}

	.drop-menu .mega-menu .subcategory-item.all .view-all {
		font-weight: 700;
		color: #4e30a4;
	}
}