/**
 * Shop mega menu — custom header
 * Structure: .header-all-parent > .header-parent > .nav-links > .ssa-has-mega-menu
 */

/* Hide default WP submenu under Shop */
.nav-links .ssa-has-mega-menu > .sub-menu,
#menu-header-menu .ssa-has-mega-menu > .sub-menu {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* Positioning context for full-width panel */
.header-all-parent,
.header-parent {
	position: relative !important;
	overflow: visible !important;
}

.header-row,
.header-menu-col,
.header-inner-col-menu,
.nav-links,
#menu-header-menu {
	overflow: visible !important;
	position: static !important;
}

/* Shop li must be static so panel anchors to .header-parent */
.nav-links > li.ssa-has-mega-menu,
#menu-header-menu > li.ssa-has-mega-menu {
	position: static !important;
}

/* Desktop */
@media (min-width: 992px) {

	.nav-links > li.ssa-has-mega-menu > .sub-menu-toggle,
	#menu-header-menu > li.ssa-has-mega-menu > .sub-menu-toggle {
		display: none !important;
	}

	.ssa-mega-panel {
		display: none;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		z-index: 9999;
		margin: 0;
		padding: 28px 0 36px;
		background: #fff;
		border-top: 1px solid #e5e5e5;
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
		text-align: left;
	}

	.header-parent .ssa-mega-panel {
		top: 100%;
	}

	.nav-links > li.ssa-has-mega-menu:hover > .ssa-mega-panel,
	.nav-links > li.ssa-has-mega-menu:focus-within > .ssa-mega-panel,
	.nav-links > li.ssa-has-mega-menu.is-mega-open > .ssa-mega-panel,
	#menu-header-menu > li.ssa-has-mega-menu:hover > .ssa-mega-panel,
	#menu-header-menu > li.ssa-has-mega-menu:focus-within > .ssa-mega-panel,
	#menu-header-menu > li.ssa-has-mega-menu.is-mega-open > .ssa-mega-panel {
		display: block !important;
	}

	.ssa-mega-panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -18px;
		height: 18px;
	}

	.ssa-mega-inner {
		box-sizing: border-box;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 15px;
	}

	.header-parent .container .ssa-mega-inner,
	.header-all-parent .container ~ * .ssa-mega-inner {
		max-width: 100%;
	}

	.header-parent > .container {
		position: static;
	}

	.ssa-mega-top {
		margin: 0 0 18px;
	}

	.ssa-mega-all {
		color: #e87722 !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		text-decoration: none !important;
		padding: 0 !important;
		background: none !important;
	}

	.ssa-mega-all:hover,
	.ssa-mega-all:focus {
		text-decoration: underline !important;
	}

	.ssa-mega-grid {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 8px;
		align-items: start;
	}

	.ssa-mega-col {
		min-width: 0;
	}

	.ssa-mega-panel a,
	.ssa-mega-panel span {
		display: inline !important;
		float: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		text-decoration: none !important;
		line-height: 1.45 !important;
		color: #1a1a1a !important;
		white-space: normal !important;
	}

	.ssa-mega-panel a:hover,
	.ssa-mega-panel a:focus {
		text-decoration: underline !important;
		color: #1a1a1a !important;
	}

	.ssa-mega-count {
		font-size: 11px !important;
		color: #888 !important;
		font-weight: 400 !important;
	}

	.ssa-mega-heading {
		margin: 0 0 12px;
		padding: 0;
	}

	.ssa-mega-heading-link,
	.ssa-mega-heading > span {
		font-size: 16px !important;
		font-weight: 700 !important;
		color: #111 !important;
	}

	.ssa-mega-list,
	.ssa-mega-children {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ssa-mega-group {
		margin: 0 0 14px !important;
		padding: 0 !important;
		position: static !important;
		display: block !important;
	}

	.ssa-mega-group-title {
		margin: 0 0 4px;
	}

	.ssa-mega-group-link,
	.ssa-mega-group-title > span {
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #222 !important;
	}

	.ssa-mega-children li {
		margin: 0 !important;
		padding: 2px 0 !important;
		position: static !important;
		display: block !important;
		float: none !important;
		width: auto !important;
	}

	.ssa-mega-child-link,
	.ssa-mega-children span {
		font-size: 13px !important;
		font-weight: 400 !important;
		color: #555 !important;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.ssa-mega-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 20px;
	}
}

@media (max-width: 991px) {

	.ssa-mega-panel {
		display: none;
		position: static !important;
		width: 100% !important;
		margin: 8px 0 12px !important;
		padding: 12px 0 4px !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		left: auto !important;
		top: auto !important;
	}

	.ssa-has-mega-menu.is-mega-open > .ssa-mega-panel {
		display: block !important;
	}

	.ssa-mega-inner {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.ssa-mega-top {
		margin: 0 0 12px;
	}

	.ssa-mega-all {
		color: #e87722 !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		text-decoration: none !important;
		padding: 0 !important;
	}

	.ssa-mega-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ssa-mega-panel a,
	.ssa-mega-panel span {
		display: inline !important;
		padding: 0 !important;
		text-decoration: none !important;
		color: #1a1a1a !important;
	}

	.ssa-mega-heading-link,
	.ssa-mega-heading > span {
		font-size: 16px !important;
		font-weight: 700 !important;
	}

	.ssa-mega-group-link,
	.ssa-mega-group-title > span {
		font-size: 15px !important;
		font-weight: 700 !important;
	}

	.ssa-mega-child-link,
	.ssa-mega-children span {
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #555 !important;
	}

	.ssa-mega-list,
	.ssa-mega-children {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ssa-mega-group {
		margin: 0 0 10px !important;
	}

	.ssa-mega-children {
		padding-left: 12px !important;
	}
}