/**
 * Power Life custom main header.
 *
 * Restyle via the custom properties below rather than the selectors.
 */

.mpl-header {
	/* Brand palette */
	--mpl-brand-primary: #1c439b;
	--mpl-brand-secondary: #2cb34a;
	--mpl-brand-tertiary: #f96900;

	/* Metrics */
	--mpl-header-max-width: 1280px;
	--mpl-header-pad-y: 16px;

	--mpl-logo-height: 30px;
	--mpl-logo-gap: 64px;
	--mpl-menu-gap: 20px;
	--mpl-actions-gap: 20px;
	--mpl-icon-size: 24px;

	/* Color */
	--mpl-header-bg: #fff;
	--mpl-header-color: #000;
	--mpl-header-color-hover: var(--mpl-brand-primary);
	/* Mobile drawer row dividers only; the bar is borderless. */
	--mpl-header-border: 1px solid rgba(28, 67, 155, 0.12);

	--mpl-icon-color: var(--mpl-header-color);
	--mpl-icon-color-hover: var(--mpl-brand-primary);

	/* Masks use alpha only; --mpl-icon-color does the painting. */
	--mpl-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E");

	--mpl-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
	--mpl-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 173.3 54.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E");
	--mpl-chevron: var(--mpl-chevron-down);

	/* Type */
	--mpl-header-font-size: 14px;
	--mpl-header-font-weight: 500;
	--mpl-header-letter-spacing: 0;

	/* Dropdowns */
	--mpl-submenu-bg: #fff;
	--mpl-submenu-shadow: 0 8px 24px rgba(28, 67, 155, 0.16);
	--mpl-submenu-radius: 6px;
	--mpl-submenu-width: 220px;

	/* Cart count badge */
	--mpl-cart-badge-bg: var(--mpl-brand-primary);
	--mpl-cart-badge-color: #fff;
	--mpl-cart-badge-size: 16px;
	--mpl-cart-badge-font-size: 10px;
	--mpl-cart-badge-offset: -6px;

	--mpl-header-z: 1000;

	position: relative;
	z-index: var(--mpl-header-z);
	background: var(--mpl-header-bg);
	color: var(--mpl-header-color);
	font-size: var(--mpl-header-font-size);
	font-weight: var(--mpl-header-font-weight);
}

.mpl-header a:focus-visible,
.mpl-header button:focus-visible {
	outline: 2px solid var(--mpl-brand-primary);
	outline-offset: 2px;
}

/* Must beat the flex display rules below. */
.mpl-header [hidden] {
	display: none !important;
}

.mpl-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--mpl-logo-gap);
	row-gap: 0;
	max-width: var(--mpl-header-max-width);
	margin: 0 auto;
	padding: var(--mpl-header-pad-y) 0;
}

/* ---------------------------------------------------------------- Logo */

.mpl-header__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.mpl-header__logo-link {
	display: block;
	line-height: 0;
}

.mpl-header__logo-img {
	display: block;
	height: var(--mpl-logo-height);
	width: auto;
}

.mpl-header__logo-text {
	font-size: 20px;
	font-weight: 700;
	line-height: var(--mpl-logo-height);
	color: inherit;
	text-decoration: none;
}

/* ------------------------------------------------------------- Menus */

/* Divi's `.et-l--header ul` et al. set list-style, padding and line-height at a
   specificity that outranks a lone .mpl-menu. Scoping under .mpl-header wins
   without !important, which is why later rules touching these stay scoped. */
.mpl-header ul.mpl-menu,
.mpl-header ul.sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: inherit;
}

.mpl-menu {
	display: flex;
	align-items: center;
	gap: var(--mpl-menu-gap);
}

.mpl-header .mpl-menu li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: inherit;
}

/* flex, not inline-flex: inline-level boxes get baseline-aligned on a line box,
   adding descender space the cart link does not have, which misaligns them. */
.mpl-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mpl-header-color);
	font-weight: var(--mpl-header-font-weight);
	letter-spacing: var(--mpl-header-letter-spacing);
	text-decoration: none;
	white-space: nowrap;
}

/* Keeps the bar at pad-y + logo + pad-y. */
.mpl-menu > li > a {
	line-height: var(--mpl-logo-height);
}

.mpl-menu a:hover,
.mpl-menu a:focus-visible,
.mpl-menu .current-menu-item > a {
	color: var(--mpl-header-color-hover);
}

/* From the menu editor. An <img>, so CSS cannot recolor it. */
.mpl-menu__icon {
	display: block;
	width: var(--mpl-icon-size);
	height: var(--mpl-icon-size);
	object-fit: contain;
	flex: 0 0 auto;
}

/* Hidden on the guest bubble; replaced with "Hi, <name>" on the account one. */
.mpl-menu__label {
	white-space: nowrap;
}

/* Fills the middle, pushing the actions flush right. */
.mpl-header__primary {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-start;
}

/* --------------------------------------------------------- Sub-menus */

.mpl-header .mpl-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	display: block;
	min-width: var(--mpl-submenu-width);
	padding: 8px 0;
	background: var(--mpl-submenu-bg);
	border-radius: var(--mpl-submenu-radius);
	box-shadow: var(--mpl-submenu-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.mpl-menu li:hover > .sub-menu,
.mpl-menu li:focus-within > .sub-menu,
.mpl-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mpl-menu .sub-menu a {
	padding: 8px 16px;
	line-height: 1.4;
	white-space: normal;
}

/* Third level opens to the side of its parent. */
.mpl-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.mpl-menu .menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--mpl-chevron) no-repeat center / contain;
	mask: var(--mpl-chevron) no-repeat center / contain;
}

.mpl-menu .menu-item-has-children:hover > a::after,
.mpl-menu .menu-item-has-children.is-open > a::after {
	--mpl-chevron: var(--mpl-chevron-up);
}

/* Sideways submenus point right in both states: the down glyph rotated, with the
   up swap undone or the rotation would point it left. */
.mpl-menu .sub-menu .menu-item-has-children > a {
	justify-content: space-between;
}

.mpl-menu .sub-menu .menu-item-has-children > a::after,
.mpl-menu .sub-menu .menu-item-has-children:hover > a::after,
.mpl-menu .sub-menu .menu-item-has-children.is-open > a::after {
	--mpl-chevron: var(--mpl-chevron-down);
	transform: rotate(-90deg);
}

/* Injected by mpl-header.js; only interactive in the mobile drawer. */
.mpl-menu__sub-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}

/* ------------------------------------------------- Actions (right side) */

.mpl-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--mpl-actions-gap);
	margin-left: auto;
}

.mpl-header__icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mpl-icon-color);
	text-decoration: none;
	cursor: pointer;
}

.mpl-header__icon-btn:hover,
.mpl-header__icon-btn:focus-visible {
	color: var(--mpl-icon-color-hover);
}

.mpl-header__icon {
	display: block;
	width: var(--mpl-icon-size);
	height: var(--mpl-icon-size);
	background: currentColor;
}

.mpl-header__icon--cart {
	-webkit-mask: var(--mpl-cart-icon) no-repeat center / contain;
	mask: var(--mpl-cart-icon) no-repeat center / contain;
}

/* ------------------------------------------- Guest / My Account bubble

   Nav menus: one top-level item (#guest or #account) whose uploaded icon is the
   bubble, with the links as children. Toggled in js/mpl-header.js. */

.mpl-header__bubble {
	display: flex;
	align-items: center;
}

.mpl-menu--bubble > li > a {
	gap: 8px;
}

/* Icon-only. :has() so an item with no icon still shows its words. */
.mpl-header__bubble--guest .mpl-menu--bubble > li > a:has(.mpl-menu__icon) > .mpl-menu__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* No chevron; the account bubble keeps one since it shows a label. */
.mpl-header__bubble--guest .mpl-menu--bubble > .menu-item-has-children > a::after {
	display: none;
}

/* Right-aligned, to stay inside the viewport. */
.mpl-menu--bubble > li > .sub-menu {
	left: auto;
	right: 0;
}

.mpl-menu--bubble > li > .sub-menu .sub-menu {
	left: auto;
	right: 100%;
}

/* ---------------------------------------------------------------- Cart */

/* min-width plus padding: circular at one digit, a pill at two or three. */
.mpl-header__cart-count {
	position: absolute;
	top: var(--mpl-cart-badge-offset);
	right: var(--mpl-cart-badge-offset);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--mpl-cart-badge-size);
	height: var(--mpl-cart-badge-size);
	padding: 0 4px;
	background: var(--mpl-cart-badge-bg);
	border-radius: 999px;
	color: var(--mpl-cart-badge-color);
	font-size: var(--mpl-cart-badge-font-size);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

/* --------------------------------------------------- Mobile toggle */

.mpl-header__toggle {
	display: none;
	position: relative;
	width: var(--mpl-icon-size);
	height: var(--mpl-icon-size);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.mpl-header__toggle-bars,
.mpl-header__toggle-bars::before,
.mpl-header__toggle-bars::after {
	position: absolute;
	left: 0;
	width: var(--mpl-icon-size);
	height: 2px;
	background: var(--mpl-icon-color);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mpl-header__toggle-bars {
	top: 11px;
}

.mpl-header__toggle-bars::before,
.mpl-header__toggle-bars::after {
	content: "";
}

.mpl-header__toggle-bars::before {
	top: -7px;
}

.mpl-header__toggle-bars::after {
	top: 7px;
}

.mpl-header.is-open .mpl-header__toggle-bars {
	background: transparent;
}

.mpl-header.is-open .mpl-header__toggle-bars::before {
	transform: translateY(7px) rotate(45deg);
}

.mpl-header.is-open .mpl-header__toggle-bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------ Mobile layout */

@media (max-width: 980px) {
	.mpl-header__inner {
		column-gap: 12px;
	}

	.mpl-header__toggle {
		display: block;
		order: 1;
		flex: 0 0 auto;
	}

	/* Hamburger left, logo centered, cart right. */
	.mpl-header__logo {
		order: 2;
		flex: 1 1 auto;
		justify-content: center;
	}

	/* display:contents lifts the children to bar level, so the cart stays in the
	   bar while the bubble drops into the drawer. */
	.mpl-header__actions {
		display: contents;
	}

	.mpl-header__cart {
		order: 3;
		flex: 0 0 auto;
	}

	.mpl-header__primary {
		order: 4;
		flex: 1 0 100%;
		display: none;
		justify-content: flex-start;
		padding-top: var(--mpl-header-pad-y);
	}

	.mpl-header.is-open .mpl-header__primary {
		display: block;
	}

	.mpl-header__bubble {
		order: 5;
		flex: 1 0 100%;
		display: none;
	}

	.mpl-header.is-open .mpl-header__bubble {
		display: block;
	}

	/* Labelled here; an icon alone in a drawer row is cryptic. */
	.mpl-header__bubble--guest .mpl-menu--bubble > li > a:has(.mpl-menu__icon) > .mpl-menu__label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	.mpl-menu--primary,
	.mpl-menu--bubble {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.mpl-menu--primary > li,
	.mpl-menu--bubble > li {
		border-top: var(--mpl-header-border);
	}

	.mpl-menu--primary a,
	.mpl-menu--bubble > li > a {
		padding: 12px 0;
	}

	.mpl-menu > li > a {
		line-height: 1.4;
	}

	/* Label left, caret right; the ::after chevron would double up. */
	.mpl-menu--primary .menu-item-has-children,
	.mpl-menu--bubble .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.mpl-menu--primary .menu-item-has-children > a,
	.mpl-menu--bubble .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.mpl-menu--primary .menu-item-has-children > a::after,
	.mpl-menu--bubble .menu-item-has-children > a::after {
		display: none;
	}

	.mpl-menu--primary .menu-item-has-children > .mpl-menu__sub-toggle,
	.mpl-menu--bubble .menu-item-has-children > .mpl-menu__sub-toggle {
		display: block;
		flex: 0 0 auto;
		color: var(--mpl-icon-color);
	}

	.mpl-menu__sub-toggle::after {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		background: currentColor;
		-webkit-mask: var(--mpl-chevron) no-repeat center / contain;
		mask: var(--mpl-chevron) no-repeat center / contain;
	}

	.mpl-menu .is-open > .mpl-menu__sub-toggle::after {
		--mpl-chevron: var(--mpl-chevron-up);
	}

	.mpl-header .mpl-menu--primary .sub-menu,
	.mpl-header .mpl-menu--bubble .sub-menu {
		position: static;
		flex: 1 0 100%;
		min-width: 0;
		padding: 0 0 8px 16px;
		background: none;
		box-shadow: none;
		border-radius: 0;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Hover must not open submenus on touch. Must precede the .is-open rule so
	   the equal-specificity match wins. */
	.mpl-menu--primary li:hover > .sub-menu,
	.mpl-menu--primary li:focus-within > .sub-menu,
	.mpl-menu--bubble li:hover > .sub-menu,
	.mpl-menu--bubble li:focus-within > .sub-menu {
		display: none;
	}

	.mpl-menu--primary li.is-open > .sub-menu,
	.mpl-menu--bubble li.is-open > .sub-menu {
		display: block;
	}

	.mpl-menu--primary .sub-menu a,
	.mpl-menu--bubble .sub-menu a {
		padding: 10px 0;
	}
}

@media (max-width: 640px) {
	.mpl-header {
		--mpl-actions-gap: 16px;
	}
}