/**
 * Mega menu styles.
 */

@media (min-width: 1200px) {
	nav #menu-primary-menu > li.mega-menu-parent {
		position: static;
	}

	nav #menu-primary-menu > li.mega-menu-parent > .mega-menu {
		display: none;
		position: fixed;
		top: var(--ppi-header-height);
		left: 0;
		right: 0;
		width: 100%;
		min-height: 476px;
		background: #fff;
		border-top: 1px solid rgba(26, 26, 74, 0.08);
		box-shadow: 0 18px 40px rgba(26, 26, 74, 0.08);
		z-index: 998;
		overflow: hidden;
	}

	body.admin-bar nav #menu-primary-menu > li.mega-menu-parent > .mega-menu {
		top: calc(var(--ppi-header-height) + 32px);
	}

	nav #menu-primary-menu > li.mega-menu-parent:hover > .mega-menu,
	nav #menu-primary-menu > li.mega-menu-parent:focus-within > .mega-menu,
	nav #menu-primary-menu > li.mega-menu-parent.is-mega-open > .mega-menu {
		display: block;
	}

	.mega-menu__inner {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 370px minmax(0, 1fr);
		min-height: 476px;
	}

	/* Full-bleed grey panel from the right column edge to the viewport edge. */
	nav #menu-primary-menu > li.mega-menu-parent > .mega-menu::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: calc(50% - 250px);
		background: #f4f4f6;
		z-index: 0;
		pointer-events: none;
	}

	nav #menu-primary-menu > li.mega-menu-parent > .mega-menu {
		pointer-events: none;
	}

	nav #menu-primary-menu > li.mega-menu-parent:hover > .mega-menu,
	nav #menu-primary-menu > li.mega-menu-parent:focus-within > .mega-menu,
	nav #menu-primary-menu > li.mega-menu-parent.is-mega-open > .mega-menu {
		pointer-events: auto;
	}

	/* Invisible bridge so the cursor can travel from the nav item into the panel. */
	nav #menu-primary-menu > li.mega-menu-parent > .mega-menu::before {
		content: "";
		position: absolute;
		top: -16px;
		left: 0;
		right: 0;
		height: 16px;
		background: transparent;
	}

	nav #menu-primary-menu > li.mega-menu-parent:hover > .mega-menu::before,
	nav #menu-primary-menu > li.mega-menu-parent:focus-within > .mega-menu::before,
	nav #menu-primary-menu > li.mega-menu-parent.is-mega-open > .mega-menu::before {
		pointer-events: auto;
	}

	.mega-menu__left {
		padding: 40px 32px 48px 0;
	}

	.mega-menu__left .mega-menu__nav-item .mega-menu__panel {
		display: none;
	}

	.mega-menu__right {
		padding: 40px 0 48px 56px;
		background: transparent;
	}

	.mega-menu__heading {
		margin: 0 0 32px;
		color: var(--ppi-navy, #1a1a4a);
		font-size: 25px;
		font-weight: 400;
		line-height: 1.1;
	}

	.mega-menu__nav {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.mega-menu__nav-item a {
		color: var(--ppi-navy, #1a1a4a);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.4;
		text-decoration: none;
		white-space: normal;
	}

	.mega-menu__nav-item.is-active a,
	.mega-menu__nav-item a:hover,
	.mega-menu__nav-item a:focus {
		color: var(--ppi-navy, #1a1a4a);
		text-decoration: underline;
		text-decoration-color: var(--ppi-green, #8ad845);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}

	.mega-menu__panels {
		position: relative;
		min-height: 294px;
	}

	.mega-menu__panel {
		display: none;
	}

	.mega-menu__panel.is-active {
		display: block;
        padding-left: 15px;
        padding-top: 15px;
	}

	.mega-menu__panel-content {
		display: block;
	}

	.mega-menu__panel-content--has-tile {
		display: flex;
		align-items: flex-start;
		gap: 40px;
	}

	.mega-menu__panel-main {
		min-width: 0;
	}

	.mega-menu__columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
		max-width: 491px;
	}

	.mega-menu__product-list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 12px;
		min-width: 0;
	}

	.mega-menu__product-list li {
		min-width: 0;
	}

	.mega-menu__product-list a {
		color: var(--ppi-navy, #1a1a4a);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.3;
		text-decoration: none;
		display: block;
	}

	.mega-menu__columns--split .mega-menu__product-list a {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mega-menu__product-list a:hover,
	.mega-menu__product-list a:focus {
		color: var(--ppi-blue, #089ef7);
	}

	.mega-menu__view-all a {
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--ppi-blue, #089ef7);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
		white-space: normal;
	}

	.mega-menu__empty {
		margin: 0;
		color: rgba(26, 26, 74, 0.7);
		font-size: 14px;
		line-height: 1.4;
	}

	.mega-menu__featured-cards {
		display: flex;
		align-items: stretch;
		gap: 24px;
	}

	.mega-menu__featured-card {
		display: flex;
		flex: 0 0 292px;
		flex-direction: column;
		width: 292px;
		overflow: hidden;
		background: #fff;
	}

	.mega-menu__featured-card-media {
		aspect-ratio: 288 / 202;
		overflow: hidden;
		background: #e8e8ec;
	}

	.mega-menu__featured-card-media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.mega-menu__featured-card-content {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 16px;
		padding: 20px 23px;
	}

	.mega-menu__featured-card-title {
		margin: 0;
		color: var(--ppi-navy, #1a1a4a);
		font-size: 25px;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: -0.125px;
	}

	nav #menu-primary-menu li .mega-menu .mega-menu__featured-card-title {
		color: var(--ppi-navy, #1a1a4a);
		font-size: 25px;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: -0.125px;
		text-transform: none;
		white-space: normal;
	}

	.mega-menu__featured-card-link {
		margin-top: auto;
		color: var(--ppi-navy, #1a1a4a);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
		text-decoration: underline;
		text-decoration-color: var(--ppi-blue, #089ef7);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	nav #menu-primary-menu li .mega-menu .mega-menu__featured-card-link {
		color: var(--ppi-navy, #1a1a4a);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
		text-decoration: underline;
		text-decoration-color: var(--ppi-blue, #089ef7);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
		text-transform: none;
		white-space: normal;
	}

	.mega-menu__featured-card-link:hover,
	.mega-menu__featured-card-link:focus,
	nav #menu-primary-menu li .mega-menu .mega-menu__featured-card-link:hover,
	nav #menu-primary-menu li .mega-menu .mega-menu__featured-card-link:focus {
		color: var(--ppi-blue, #089ef7);
		text-decoration: none;
	}

	.mega-menu__tile {
		flex: 0 0 288px;
		width: 288px;
		margin-left: auto;
	}

	.mega-menu__tile-card {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 333px;
		overflow: hidden;
		background: #101828;
	}

	.mega-menu__tile-media {
		flex: 0 0 200px;
		height: 200px;
		overflow: hidden;
		background: #101036;
	}

	.mega-menu__tile-media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.mega-menu__tile-content {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 16px;
		min-height: 133px;
		padding: 24px 24px 28px;
	}

	.mega-menu__tile-title {
		margin: 0;
		color: #fff;
		font-size: 24px;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: -0.12px;
		white-space: normal;
	}

	nav #menu-primary-menu li .mega-menu .mega-menu__tile-title {
		color: #fff;
		font-size: 24px;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: -0.12px;
		text-transform: none;
	}

	.mega-menu__tile-link {
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		text-decoration: underline;
		text-decoration-color: var(--ppi-blue, #089ef7);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		white-space: normal;
	}

	nav #menu-primary-menu li .mega-menu .mega-menu__tile-link {
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		text-decoration: underline;
		text-decoration-color: var(--ppi-blue, #089ef7);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		text-transform: none;
		white-space: normal;
	}

	.mega-menu__tile-link:hover,
	.mega-menu__tile-link:focus,
	nav #menu-primary-menu li .mega-menu .mega-menu__tile-link:hover,
	nav #menu-primary-menu li .mega-menu .mega-menu__tile-link:focus {
		color: var(--ppi-blue, #089ef7);
		text-decoration: none;
	}

	nav #menu-primary-menu > li.mega-menu-parent > .mega-menu ~ .sub-menu,
	nav #menu-primary-menu > li.mega-menu-parent > .sub-menu {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	.mega-menu {
		width: 100%;
	}

	.mega-menu__left,
	.mega-menu__right {
		padding: 0;
	}

	.mega-menu__right {
		display: none;
	}

	.mega-menu__left .mega-menu__nav-item {
		position: relative;
		padding-right: 20px;
	}

	.mega-menu__left .mega-menu__nav-item .icon {
		display: inline-block;
		position: absolute;
		top: 8px;
		right: 0;
		width: 15px;
		height: 9px;
		background: url("../images/icon-chevron-down.svg") no-repeat center center / contain;
		cursor: pointer;
	}

	.mega-menu__left .mega-menu__nav-item.is-active .icon {
		transform: rotate(180deg);
	}

	.mega-menu__right {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid rgba(26, 26, 74, 0.08);
		background: transparent;
	}

	.mega-menu__heading {
		margin: 0 0 16px;
		font-size: 20px;
	}

	.mega-menu__nav {
		margin: 0;
		padding: 0 0 0 15px;
		list-style: none;
	}

	.mega-menu__nav-item + .mega-menu__nav-item {
		margin-top: 12px;
	}

	.mega-menu__nav-item a {
		font-size: 15px;
	}

	.mega-menu__panel {
		display: none;
	}

	.mega-menu__panel.is-active {
		display: block;
	}

	.mega-menu__columns {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mega-menu__product-list {
		margin: 0 0 16px;
		padding: 0 0 0 15px;
		list-style: none;
		min-width: 0;
	}

	.mega-menu__product-list li {
		min-width: 0;
	}

	.mega-menu__product-list li + li {
		margin-top: 14px;
	}

	.mega-menu__product-list a {
		font-size: 14px;
		display: block;
	}

	.mega-menu__tile {
		display: none;
	}

	.mega-menu__featured-cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		padding-left: 15px;
	}

	.mega-menu__featured-card {
		width: 100%;
		max-width: none;
		flex: none;
	}

	.mega-menu__featured-card-media {
		height: 200px;
	}

	.mega-menu__featured-card-content {
		padding: 24px;
	}

	.mega-menu__featured-card-title {
		font-size: 20px;
	}

	.mega-menu-parent .mega-menu { 
		display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows 0.3s ease;
	}

	.mega-menu-parent.is-mega-open .mega-menu {
		grid-template-rows: 1fr;
		padding-top: 12px;
	}

	.mega-menu-parent.is-mega-open > a::after {
		transform: rotate(180deg);
	}

	.mega-menu-parent .mega-menu__inner {
		min-height: 0;
		overflow: hidden;
		padding-right: 0;
	}

	.is-mega-open .mega-menu__inner {
		margin-bottom: 9px;
	}

	nav #menu-primary-menu > li.menu-item-has-children > a::after {
		width: 15px;
		height: 9px;
	}

	ul.navbar-nav > li.about .mega-menu__heading {
		display: none;
	}

	ul.navbar-nav > li.about .mega-menu__right {
		display: none;
	}

	ul.navbar-nav > li.about .mega-menu__nav {
		padding-left: 0;
	}

}