/*
 * WARNING: rules below are directly copied from
 * https://opengrok.a8c.com/source/xref/a8c/jetpackme-new/scss/jetpack-header.css
 *
 * Some overwrites are necessary to make both this and Jetpack.com headers look
 * similar.
 */

$duration: 0.1s;
$delay-ratio: 1.5;
$delay: 0.055s;

.is-group-jetpack-cloud.is-section-jetpack-cloud-pricing .jpcom-masterbar,
.is-group-jetpack-cloud.is-section-jetpack-cloud-features-comparison .jpcom-masterbar {
	// ============================================================================
	// Overwrites
	// ============================================================================

	.header {
		position: fixed !important;
		z-index: z-index( 'root', '.jpcom-masterbar' ) !important;
		top: 0;
		left: 0;
		width: 100%;
		color: #101517;
		font-size: 1.125rem; /* stylelint-disable-line scales/font-sizes */
		transition: background 0.1s;
	}
}

.is-group-jetpack-cloud.is-section-jetpack-cloud-pricing .jpcom-masterbar,
.is-group-jetpack-cloud.is-section-jetpack-cloud-features-comparison .jpcom-masterbar,
.is-group-jetpack-cloud.is-section-jetpack-cloud-manage-pricing .jpcom-masterbar {
	// ============================================================================
	// Overwrites
	// ============================================================================

	.header__nav-wrapper {
		text-align: left;
		display: flex;
		justify-content: space-between;
		padding: 2rem 0;
		flex: 1;
		min-width: 0;
	}

	.header__jetpack-masterbar-cart {
		display: inline-flex;
		margin-right: 40px;
	}

	.header__sections-list,
	.header__actions-list,
	.header__submenu-links-list,
	.user-menu__list {
		margin: 0 auto !important;
	}

	.header__sections-list > li.is-active > a {
		cursor: default;

		&::after {
			width: 100%;
		}
	}

	.tooltip {
		left: auto !important;
		right: 0;
		transform: none !important;

		&::after {
			display: none !important;
			content: '';
			position: absolute;
			left: 50%;
			bottom: 100%;
			border-style: solid;
			border-color: transparent;
			border-width: 0 8px 8px 8px;
			border-bottom-color: var( --studio-white );
			transform: translateX( -50% );
		}
		position: absolute;
		top: calc( 100% + 16px );
		min-width: 160px;
		padding: 0.5rem 1rem;
		background-color: var( --studio-white );
		border-radius: 3px;
		box-shadow:
			-1px -1px 2px rgba( 0, 0, 0, 0.15 ),
			1px 1px 2px rgba( 0, 0, 0, 0.15 );
		font-size: 0.875rem;
		text-align: center;
	}

	.header__submenu-content {
		margin-top: 25px;
		display: flex;
		position: relative;
		z-index: 1;
		width: 100%;
		padding-top: 6rem;
		background: transparent;
	}

	.jp-product-icon,
	.header__submenu-bundles-section,
	.header__submenu-category-wrapper,
	.header__submenu-wrapper {
		box-sizing: border-box;
	}

	.header__submenu-label {
		font-weight: 500 !important;
	}

	@media ( max-width: 900px ) {
		.user-menu__list {
			margin-left: 0 !important;
		}

		.header__submenu-content {
			margin-top: 0;
		}

		.header__content-wrapper {
			margin-top: 1.2rem;
			position: relative;
			width: 100%;
		}
	}

	@media ( max-width: 782px ) {
		.header__content {
			padding: 0 !important;
			width: 95% !important;
		}
	}

	.header__submenu-bundles-list {
		margin-left: 0;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	// ============================================================================
	// Jetpack.com styles
	// ============================================================================

	@keyframes submenu-item {
		from {
			transform: translateY( -8px );
			opacity: 0;
		}
		to {
			transform: translateY( 0 );
			opacity: 1;
		}
	}
	@keyframes submenu-backdrop {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@keyframes submenu-content {
		from {
			transform: scaleY( 0 );
		}
		to {
			transform: scaleY( 1 );
		}
	}
	@keyframes submenu-content-mobile {
		from {
			transform: translateX( 100% );
		}
		to {
			transform: translateY( 0 );
		}
	}
	.header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		padding: 2rem 0;
		color: #101517;
		font-size: 18px;
		transition: background 0.1s;
	}
	@media ( max-width: 900px ) {
		.header {
			position: relative;
			display: flex;
			align-items: center;
			padding: 0;
			height: 80px;
			background-color: #fff;
		}
	}
	.header.is-mobile-menu-visible {
		position: relative;
		display: flex;
		align-items: center;
		padding: 0;
		height: 80px;
		background-color: #fff;
	}
	.header.is-mobile-menu-visible + .in.revolving-headers {
		padding-top: 0;
	}
	html.with-admin-bar .header.is-mobile-menu-visible {
		top: 0;
	}
	.header.is-mobile-menu-visible .mobile-btn {
		display: flex !important;
		align-items: center;
	}
	.header.is-mobile-menu-visible .header__nav-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		display: none;
		overflow-y: auto;
		width: 100%;
		height: calc( 100vh - 80px );
		padding: 1rem 0 2rem;
		margin-top: 80px;
		background-color: #fff;
		box-shadow: 0 12px 12px 0 rgba( 0, 0, 0, 0.15 );
	}
	.header.is-mobile-menu-visible .header__nav-wrapper.is-expanded,
	.header.is-mobile-menu-visible .header__nav-wrapper:target {
		display: block;
	}
	html.no-js .header.is-mobile-menu-visible .header__nav-wrapper {
		height: auto;
	}
	.header.is-mobile-menu-visible .header__content {
		justify-content: space-between;
	}
	.header.is-mobile-menu-visible .header__sections-list {
		width: 85%;
		max-width: 1200px;
		margin: 0 auto;
		overflow: visible;
		display: block;
		padding: 0;
	}
	@media ( max-width: 1300px ) {
		.header.is-mobile-menu-visible .header__sections-list {
			width: 90%;
		}
	}
	@media ( max-width: 1100px ) {
		.header.is-mobile-menu-visible .header__sections-list {
			width: 95%;
		}
	}
	@media ( max-width: 782px ) {
		.header.is-mobile-menu-visible .header__sections-list {
			padding: 0 2rem;
			width: 100%;
		}
	}
	.header.is-mobile-menu-visible .header__sections-list > li {
		margin: 1rem 0;
	}
	.header.is-mobile-menu-visible .header__actions-list {
		width: 85%;
		max-width: 1200px;
		margin: 0 auto;
		display: block;
		margin-top: 2rem;
	}
	@media ( max-width: 1300px ) {
		.header.is-mobile-menu-visible .header__actions-list {
			width: 90%;
		}
	}
	@media ( max-width: 1100px ) {
		.header.is-mobile-menu-visible .header__actions-list {
			width: 95%;
		}
	}
	@media ( max-width: 782px ) {
		.header.is-mobile-menu-visible .header__actions-list {
			padding: 0 2rem;
			width: 100%;
		}
	}
	.header.is-mobile-menu-visible .header__actions-list > li {
		margin: 1rem 0;
	}
	.header.is-mobile-menu-visible .header__actions-list .header__user-menu {
		margin: 1rem 0;
	}
	.header.is-mobile-menu-visible .header__actions-list .header__user-menu .user-menu__btn {
		display: none !important;
	}
	.header.is-mobile-menu-visible .header__actions-list .header__user-menu .user-menu__tooltip {
		position: initial;
		display: block !important;
		animation: none;
	}
	.header.is-mobile-menu-visible .header__actions-list .header__user-menu .user-menu__tooltip a {
		transition: none;
		position: relative;
		font-size: 18px;
	}
	.header.is-mobile-menu-visible
		.header__actions-list
		.header__user-menu
		.user-menu__tooltip
		a:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	.header.is-mobile-menu-visible
		.header__actions-list
		.header__user-menu
		.user-menu__tooltip
		a::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header.is-mobile-menu-visible
		.header__actions-list
		.header__user-menu
		.user-menu__tooltip
		a:hover::after {
		width: 100%;
	}
	.header.is-mobile-menu-visible
		.header__actions-list
		.header__user-menu
		.user-menu__tooltip
		a:any-link {
		color: #101517;
		text-decoration: none;
	}
	.header.is-mobile-menu-visible
		.header__actions-list
		.header__user-menu
		.user-menu__tooltip
		.tooltip {
		position: inherit;
		display: block;
		width: fit-content;
		min-width: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
	}
	.header.is-mobile-menu-visible
		.header__actions-list
		.header__user-menu
		.user-menu__tooltip
		.tooltip::after {
		display: none;
	}
	.header.is-mobile-menu-visible .header__actions-list .header__user-menu .user-menu__list > li {
		margin: 1rem 0;
	}
	.header.is-mobile-menu-visible .header__actions-list .header__cta {
		margin-top: 1.5rem;
	}
	.header.is-mobile-menu-visible .header__submenu-categories-list {
		flex-direction: column;
	}
	.header.is-mobile-menu-visible .header__search-btn {
		width: fit-content;
		margin-inline-start: -0.5rem;
		margin-bottom: -0.5rem;
		padding: 0 0.5rem;
	}
	.header.is-mobile-menu-visible .header__search-label {
		display: initial;
		margin-inline-start: 0.5rem;
	}
	.header.is-mobile-menu-visible .header__menu-btn .gridicon {
		transform: rotate( -90deg ) !important;
	}
	html.no-js .header.is-mobile-menu-visible .header__submenu {
		position: static;
		overflow: visible;
		display: block;
		height: auto;
	}
	.header.is-mobile-menu-visible .header__submenu::before {
		display: none;
	}
	.header.is-mobile-menu-visible .header__submenu-content {
		display: block;
		z-index: 3;
		padding-top: 0;
		background: #fff;
		background-image: none;
		animation-duration: 0.35s;
		animation-name: submenu-content-mobile;
	}
	.header.is-mobile-menu-visible .header__submenu-content hr {
		width: calc( 100% - 4rem );
	}
	.header.is-mobile-menu-visible .header__submenu-content::before {
		display: none;
	}
	.header.is-mobile-menu-visible .header__submenu-wrapper {
		flex-direction: column;
		width: 100%;
		border: none;
		min-height: 90vh;
		max-width: none;
	}
	.header.is-mobile-menu-visible .jp-product-icon {
		width: 3rem;
		height: 3rem;
	}
	.header.is-mobile-menu-visible .jp-product-icon svg {
		scale: 1.3;
	}
	.header.is-mobile-menu-visible .header__submenu-links-list > li {
		margin: 1.5rem 0;
	}
	.header.is-mobile-menu-visible .header__submenu-bundles-list .header__submenu-label {
		font-size: 1rem;
	}
	.header.is-mobile-menu-visible .header__submenu-bundles-list > li {
		margin-bottom: 1.5rem;
	}
	.header.is-mobile-menu-visible .header__submenu-link {
		font-size: 20px;
	}
	.header.is-mobile-menu-visible .header__submenu-category .header__submenu-label {
		font-size: 1rem;
	}
	.header.is-mobile-menu-visible p.header__submenu-category-title {
		font-size: 1.25rem;
		animation-name: none;
	}
	.header.is-mobile-menu-visible
		.header__submenu-items-wrapper
		.header__submenu-categories-list
		.header__submenu-label {
		font-weight: 500;
	}
	.header.is-mobile-menu-visible .header__submenu-bundles-section {
		padding-bottom: 5rem;
		padding-left: 1.5rem;
		display: block;
		width: 100%;
	}
	.header.is-mobile-menu-visible .header__submenu-category-wrapper {
		gap: 1.5rem;
	}
	.header.is-mobile-menu-visible .header__submenu-bundles-wrapper {
		max-width: none;
		gap: 1.5rem;
	}
	.header.is-mobile-menu-visible .header__submenu-bundle-icons {
		max-width: 250px;
		width: auto;
	}
	.header.is-mobile-menu-visible .header__back-btn {
		display: flex !important;
	}
	.header.force-opaque,
	.header.is-opaque {
		background-color: #fff;
	}
	html.with-admin-bar .header {
		top: 32px;
	}
	@media ( max-width: 900px ) {
		html.with-admin-bar .header {
			top: 0;
		}
	}
	.header .gridicon {
		fill: #101517;
	}

	.header__content {
		width: 85%;
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	@media ( max-width: 1300px ) {
		.header__content {
			width: 90%;
		}
	}
	@media ( max-width: 1100px ) {
		.header__content {
			width: 95%;
		}
	}
	@media ( max-width: 782px ) {
		.header__content {
			padding: 0 2rem;
			width: 100%;
		}
	}
	@media ( max-width: 900px ) {
		.header__content {
			justify-content: space-between;
		}
	}
	.header__content a {
		text-decoration: none;
	}

	@media ( max-width: 900px ) {
		.header__nav-wrapper {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			display: none;
			overflow-y: auto;
			width: 100%;
			height: calc( 100vh - 80px );
			padding: 1rem 0 2rem;
			margin-top: 80px;
			background-color: #fff;
			box-shadow: 0 12px 12px 0 rgba( 0, 0, 0, 0.15 );
		}
		.header__nav-wrapper.is-expanded,
		.header__nav-wrapper:target {
			display: block;
		}
		html.no-js .header__nav-wrapper {
			height: auto;
		}
	}

	.header__skip {
		position: absolute;
		left: 0;
		top: 100%;
		overflow: hidden;
		display: block;
		width: 1px;
		height: 1px;
		padding: 1rem;
		background-color: #101517;
		transform: translateX( -1000px );
		transition: transform 0.1s ease-in-out;
	}
	.header__skip:focus {
		color: #fff;
		transform: translateX( 0 );
		width: auto;
		height: auto;
	}
	.header__skip:any-link {
		color: #fff;
	}

	.header__home-link {
		transition: none;
		z-index: 2;
		margin-inline-end: 3rem;
	}
	.header__home-link:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	.header__home-link:any-link {
		color: #101517;
	}
	.header__home-link svg {
		display: block;
	}

	.header__sections-list {
		margin-block-start: 0;
		margin-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		font-size: inherit;
		list-style-type: none;
		overflow: hidden;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0.5rem 0;
	}
	@media ( max-width: 900px ) {
		.header__sections-list {
			width: 85%;
			max-width: 1200px;
			margin: 0 auto;
			overflow: visible;
			display: block;
			padding: 0;
		}
	}
	@media ( max-width: 900px ) and ( max-width: 1300px ) {
		.header__sections-list {
			width: 90%;
		}
	}
	@media ( max-width: 900px ) and ( max-width: 1100px ) {
		.header__sections-list {
			width: 95%;
		}
	}
	@media ( max-width: 900px ) and ( max-width: 782px ) {
		.header__sections-list {
			padding: 0 2rem;
			width: 100%;
		}
	}
	html.no-js .header__sections-list {
		flex-wrap: wrap;
	}
	.header__sections-list > li {
		margin: 0 1rem;
	}
	@media ( max-width: 900px ) {
		.header__sections-list > li {
			margin: 1rem 0;
		}
	}
	.header__sections-list > li > a,
	.header__sections-list > li > button {
		transition: none;
		position: relative;
		z-index: 2;
		padding: 0;
		color: #101517;
	}
	.header__sections-list > li > a:focus-visible,
	.header__sections-list > li > button:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	.header__sections-list > li > a::after,
	.header__sections-list > li > button::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header__sections-list > li > a:hover::after,
	.header__sections-list > li > button:hover::after {
		width: 100%;
	}
	.header__sections-list > li > a:hover,
	.header__sections-list > li > button:hover {
		color: #101517;
	}

	.header__actions-list {
		margin-block-start: 0;
		margin-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		font-size: inherit;
		list-style-type: none;
		z-index: 2;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		margin-inline-start: auto;
	}
	@media ( max-width: 900px ) {
		.header__actions-list {
			width: 85%;
			max-width: 1200px;
			margin: 0 auto;
			display: block;
			margin-top: 2rem;
		}
	}
	@media ( max-width: 900px ) and ( max-width: 1300px ) {
		.header__actions-list {
			width: 90%;
		}
	}
	@media ( max-width: 900px ) and ( max-width: 1100px ) {
		.header__actions-list {
			width: 95%;
		}
	}
	@media ( max-width: 900px ) and ( max-width: 782px ) {
		.header__actions-list {
			padding: 0 2rem;
			width: 100%;
		}
	}
	.header__actions-list > li {
		margin: 0 1rem;
	}
	.header__actions-list > li:first-child {
		margin-inline-start: 0;
		margin-inline-end: 0;
	}
	.header__actions-list > li:last-child {
		margin-inline-end: 0;
	}
	@media ( max-width: 900px ) {
		.header__actions-list > li {
			margin: 1rem 0;
		}
	}
	.header__actions-list .header__action-link {
		transition: none;
		position: relative;
		padding: 0;
	}
	.header__actions-list .header__action-link:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	.header__actions-list .header__action-link::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header__actions-list .header__action-link:hover::after {
		width: 100%;
	}
	.header__actions-list .header__action-link:any-link {
		color: #101517;
	}
	.header__actions-list .header__action-link:any-link:hover {
		color: #101517;
	}
	.header__actions-list .header__user-menu.is-logged-in {
		margin: 0;
	}
	@media ( max-width: 900px ) {
		.header__actions-list .header__user-menu {
			margin: 1rem 0;
		}
	}
	@media ( max-width: 900px ) {
		.header__actions-list .header__cta {
			margin-top: 1.5rem;
		}
	}

	.header__search-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 48px;
		min-height: 48px;
		background: none;
		border: none;
		border-radius: 3px;
		transition:
			transform 0.1s,
			background 0.1s,
			color 0.1s;
	}
	.header__search-btn:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 0;
	}
	@media ( max-width: 900px ) {
		.header__search-btn {
			width: fit-content;
			margin-inline-start: -0.5rem;
			margin-bottom: -0.5rem;
			padding: 0 0.5rem;
		}
	}
	.header__search-btn:any-link {
		color: #101517;
	}
	.header__search-btn:any-link:hover {
		background-color: #101517;
		color: #fff;
	}
	.header__search-btn:active {
		transform: scale( 0.9 );
	}
	.header__search-btn .gridicon {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
		transform: scaleX( -1 );
	}

	.header__search-label {
		display: none;
	}
	@media ( max-width: 900px ) {
		.header__search-label {
			display: initial;
			margin-inline-start: 0.5rem;
		}
	}

	.header__menu-btn {
		display: flex;
		align-items: center;
		width: fit-content;
		background: none;
		border: none;
	}
	.header__menu-btn:focus {
		outline: none;
	}
	.header__menu-btn[hidden] {
		display: none;
	}
	.header__menu-btn .gridicon {
		width: 1rem;
		height: 1rem;
		margin-inline-start: 0.25rem;
		transform-origin: center center;
		transition: transform 0.1s;
	}
	@media ( max-width: 900px ) {
		.header__menu-btn .gridicon {
			transform: rotate( -90deg ) !important;
		}
	}
	.header__menu-btn[aria-expanded='true'] .gridicon {
		transform: rotate( 180deg );
	}

	.header__submenu {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		overflow: scroll;
		width: 100%;
		height: 100vh;
	}
	@media ( max-width: 900px ) {
		html.no-js .header__submenu {
			position: static;
			overflow: visible;
			display: block;
			height: auto;
		}
	}
	.header__submenu:target {
		display: block;
	}
	.header__submenu::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: transparent;
	}
	@media ( max-width: 900px ) {
		.header__submenu::before {
			display: none;
		}
	}
	.header__submenu.js {
		display: block;
	}
	.header__submenu.js[hidden] {
		display: none;
	}
	.header__submenu :any-link {
		color: #101517;
	}
	.header__submenu :any-link:hover {
		color: #101517;
	}

	html.with-admin-bar .header__submenu-content::before {
		height: 10.5rem;
	}

	.header__submenu-content::before {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		content: '';
		background-color: #fff;
		z-index: 1;
	}
	.header__submenu-content hr {
		width: 85%;
		max-width: 1200px;
		background: #646970;
		margin: 0 auto;
	}
	@media ( max-width: 1300px ) {
		.header__submenu-content hr {
			width: 90%;
		}
	}
	@media ( max-width: 1100px ) {
		.header__submenu-content hr {
			width: 95%;
		}
	}
	@media ( max-width: 782px ) {
		.header__submenu-content hr {
			padding: 0 2rem;
			width: 100%;
		}
	}
	@media ( max-width: 782px ) {
		.header__submenu-content hr {
			width: calc( 100% - 4rem );
		}
	}
	@media ( prefers-reduced-motion ) {
		.header__submenu-content {
			animation-duration: 0;
		}
	}
	@media ( max-width: 782px ) {
		.header__submenu-content hr {
			margin: 0 2rem;
		}
	}
	@media ( max-width: 900px ) {
		.header__submenu-content {
			display: block;
			z-index: 3;
			padding-top: 0;
			background: #fff;
			background-image: none;
			animation-duration: 0.35s;
			animation-name: submenu-content-mobile;
		}
		.header__submenu-content::before {
			display: none;
		}
	}

	.header__submenu-wrapper {
		position: relative;
		display: flex;
		left: 50%;
		transition: left 0.2s ease-out;
		max-width: 911px;
		border-radius: 4px;
		border: 1px solid #dcdcde;
		background: #fff;
		z-index: 3;
		box-shadow: 0 4px 8px 0 rgba( 0, 0, 0, 0.1 );
		--arrow-left: 6%;
	}
	.header__submenu-wrapper::before,
	.header__submenu-wrapper::after {
		content: '';
		position: absolute;
		left: var( --arrow-left );
		top: -12px;
		transform: translateX( -50% );
		z-index: 4;
		pointer-events: none;
	}
	@media ( max-width: 1200px ) {
		.header__submenu-wrapper::before,
		.header__submenu-wrapper::after {
			left: 20%;
		}
	}
	@media ( max-width: 1100px ) {
		.header__submenu-wrapper::before,
		.header__submenu-wrapper::after {
			left: 21%;
		}
	}
	@media ( max-width: 1000px ) {
		.header__submenu-wrapper::before,
		.header__submenu-wrapper::after {
			left: 24%;
		}
	}
	.header__submenu-wrapper::before {
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-bottom: 12px solid #dcdcde;
		width: 0;
		height: 0;
	}
	.header__submenu-wrapper::after {
		border-left: 11px solid transparent;
		border-right: 11px solid transparent;
		border-bottom: 11px solid #fff;
		top: -11px;
		width: 0;
		height: 0;
	}
	@media ( max-width: 900px ) {
		.header__submenu-wrapper {
			flex-direction: column;
			width: 100%;
			border: none;
			min-height: 90vh;
		}
	}

	.header__submenu-categories-list {
		margin-block-start: 0;
		margin-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		font-size: inherit;
		list-style-type: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		column-gap: 1rem;
		row-gap: 1.5rem;
		width: 100%;
		margin: 0;
	}
	@media ( max-width: 900px ) {
		.header__submenu-categories-list {
			flex-direction: column;
		}
	}
	.header__submenu-categories-list > li {
		flex: 1;
		min-width: 40%;
		animation-fill-mode: backwards;
		animation-name: submenu-item;
		animation-duration: 0.1s;
		animation-timing-function: ease-out;
	}
	@media ( prefers-reduced-motion ) {
		.header__submenu-categories-list > li {
			animation-duration: 0;
			animation-delay: 0;
		}
	}
	@media ( max-width: 900px ) {
		.header__submenu-categories-list > li {
			animation: none;
		}
	}
	.header__submenu-categories-list > li .header__category,
	.header__submenu-categories-list > li .header__submenu-link {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-direction: row;
		animation-fill-mode: backwards;
		animation-name: submenu-item;
		animation-duration: 0.1s;
		animation-timing-function: ease-out;
	}
	@media ( prefers-reduced-motion ) {
		.header__submenu-categories-list > li .header__category,
		.header__submenu-categories-list > li .header__submenu-link {
			animation-duration: 0;
			animation-delay: 0;
		}
	}
	@media ( max-width: 900px ) {
		.header__submenu-categories-list > li .header__category,
		.header__submenu-categories-list > li .header__submenu-link {
			animation: none;
		}
	}
	.header__submenu-categories-list > li:nth-of-type( 1 ) {
		animation-delay: calc( 0.055s * 1 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> p {
		animation-delay: calc( 0.055s * 3 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> p {
		animation-delay: calc( 0.055s * 4 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> p {
		animation-delay: calc( 0.055s * 5 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> p {
		animation-delay: calc( 0.055s * 6 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> p {
		animation-delay: calc( 0.055s * 7 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 1 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> p {
		animation-delay: calc( 0.055s * 8 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list > li:nth-of-type( 2 ) {
		animation-delay: calc( 0.055s * 2 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> p {
		animation-delay: calc( 0.055s * 4 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> p {
		animation-delay: calc( 0.055s * 5 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> p {
		animation-delay: calc( 0.055s * 6 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> p {
		animation-delay: calc( 0.055s * 7 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> p {
		animation-delay: calc( 0.055s * 8 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 2 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> p {
		animation-delay: calc( 0.055s * 9 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list > li:nth-of-type( 3 ) {
		animation-delay: calc( 0.055s * 3 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> p {
		animation-delay: calc( 0.055s * 5 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> p {
		animation-delay: calc( 0.055s * 6 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> p {
		animation-delay: calc( 0.055s * 7 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> p {
		animation-delay: calc( 0.055s * 8 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> p {
		animation-delay: calc( 0.055s * 9 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 3 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> p {
		animation-delay: calc( 0.055s * 10 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list > li:nth-of-type( 4 ) {
		animation-delay: calc( 0.055s * 4 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> p {
		animation-delay: calc( 0.055s * 6 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> p {
		animation-delay: calc( 0.055s * 7 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> p {
		animation-delay: calc( 0.055s * 8 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> p {
		animation-delay: calc( 0.055s * 9 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> p {
		animation-delay: calc( 0.055s * 10 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 4 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> p {
		animation-delay: calc( 0.055s * 11 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list > li:nth-of-type( 5 ) {
		animation-delay: calc( 0.055s * 5 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 1 )
		> p {
		animation-delay: calc( 0.055s * 7 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 2 )
		> p {
		animation-delay: calc( 0.055s * 8 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 3 )
		> p {
		animation-delay: calc( 0.055s * 9 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 4 )
		> p {
		animation-delay: calc( 0.055s * 10 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 5 )
		> p {
		animation-delay: calc( 0.055s * 11 + 0.1s / 1.5 );
	}
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> a,
	.header__submenu-categories-list
		> li:nth-of-type( 5 )
		.header__submenu-links-list
		> li:nth-of-type( 6 )
		> p {
		animation-delay: calc( 0.055s * 12 + 0.1s / 1.5 );
	}

	.jp-product-icon {
		background-color: #003010;
		border-radius: 4px;
		padding: 4px 3.5px 4px 4.5px;
		display: flex;
		width: 2rem;
		height: 2rem;
		justify-content: center;
		align-items: center;
	}
	@media ( max-width: 900px ) {
		.jp-product-icon {
			width: 3rem;
			height: 3rem;
		}
		.jp-product-icon svg {
			scale: 1.3;
		}
	}

	.header__submenu-bundles-list > li > a.header__submenu-link {
		animation-fill-mode: backwards;
		animation-name: submenu-item;
		animation-duration: 0.1s;
		animation-timing-function: ease-out;
		animation-delay: calc( 0.055s * 6 + 0.1s / 1.5 );
	}
	@media ( prefers-reduced-motion ) {
		.header__submenu-bundles-list > li > a.header__submenu-link {
			animation-duration: 0;
			animation-delay: 0;
		}
	}
	@media ( max-width: 900px ) {
		.header__submenu-bundles-list > li > a.header__submenu-link {
			animation: none;
		}
	}

	.header__submenu-links-list,
	.header__submenu-bundles-list {
		margin-block-start: 0;
		margin-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		font-size: inherit;
		list-style-type: none;
	}
	.header__submenu-links-list > li,
	.header__submenu-bundles-list > li {
		margin: 1.25rem 0;
	}
	.header__submenu-links-list > li:last-child,
	.header__submenu-bundles-list > li:last-child {
		margin-bottom: 0;
	}
	@media ( max-width: 900px ) {
		.header__submenu-links-list > li,
		.header__submenu-bundles-list > li {
			margin: 1.5rem 0;
		}
		.header__submenu-links-list > li:last-child,
		.header__submenu-bundles-list > li:last-child {
			margin-bottom: 0;
		}
	}

	.header__submenu-bundles-list .header__submenu-link,
	.header__submenu-links-list .header__submenu-link {
		font-weight: 500;
	}

	.header__submenu-links-list {
		margin-block-end: 0;
	}
	.header__submenu-links-list .header__submenu-link:hover .jp-product-icon {
		transition: background-color 0.2s ease-in-out;
		background-color: #069e08;
	}
	.header__submenu-links-list .header__submenu-link:hover .header__submenu-label::after {
		width: 100%;
	}
	.header__submenu-links-list .header__submenu-label {
		position: relative;
		position: relative;
	}
	.header__submenu-links-list .header__submenu-label::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header__submenu-links-list .header__submenu-label:hover::after {
		width: 100%;
	}

	.header__submenu-bundles-list li {
		margin: 0;
	}
	@media ( max-width: 900px ) {
		.header__submenu-bundles-list li {
			margin-bottom: 1.5rem;
		}
	}

	.header__submenu-link {
		transition: none;
		display: flex;
		flex-direction: column;
		width: fit-content;
		font-size: 16px;
	}
	.header__submenu-link:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	@media ( max-width: 900px ) {
		.header__submenu-link {
			font-size: 20px;
		}
	}

	.header__submenu-bundles-list .header__submenu-label {
		font-weight: 400;
		font-size: 0.875rem;
		margin-bottom: 1.5rem;
		margin-top: 0;
	}
	@media ( max-width: 900px ) {
		.header__submenu-bundles-list .header__submenu-label {
			font-size: 1rem;
		}
	}
	.header__submenu-bundles-list .header__submenu-label > span {
		position: relative;
	}
	.header__submenu-bundles-list .header__submenu-label > span::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header__submenu-bundles-list .header__submenu-link:hover .header__submenu-label > span::after {
		width: 100%;
	}
	.header__submenu-bundles-list .header__submenu-link:hover .jp-product-icon {
		transition: background-color 0.2s ease-in-out;
		background-color: #069e08;
	}
	.header__submenu-bundles-list .header__submenu-link:hover .jetpack-hero-product-background {
		transition: fill 0.2s ease-in-out;
		fill: #069e08;
	}

	.header__submenu-chevron {
		position: absolute;
		top: 0;
		bottom: 0;
		inset-inline-start: -1.25rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	body.rtl .header__submenu-chevron {
		transform: scaleX( -1 );
	}
	@media ( max-width: 900px ) {
		.header__submenu-chevron {
			display: none;
		}
	}
	.header__submenu-chevron .gridicon {
		width: 10px;
	}

	.header__submenu-category {
		margin-bottom: 1.5rem;
		font-size: 0.875rem;
	}
	.header__submenu-category .header__submenu-label {
		margin-bottom: 0;
		line-height: 1.2;
		font-weight: 400;
	}
	@media ( max-width: 900px ) {
		.header__submenu-category .header__submenu-label {
			font-size: 1rem;
		}
	}

	p.header__submenu-category {
		margin: 0;
	}

	a.header__submenu-category .header__submenu-label {
		position: relative;
	}
	a.header__submenu-category .header__submenu-label::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	a.header__submenu-category .header__submenu-label:hover::after {
		width: 100%;
	}

	p.header__submenu-category-title {
		color: #101517;
		font-size: 1rem;
		font-weight: 500;
		margin: 0;
		animation-fill-mode: backwards;
		animation-duration: 0.1s;
		animation-timing-function: ease-out;
		animation-delay: 0.1766666667s;
		animation-name: submenu-item;
	}
	@media ( max-width: 900px ) {
		p.header__submenu-category-title {
			font-size: 1.25rem;
			animation-name: none;
		}
	}

	.header__submenu-category-wrapper {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1.5rem 0 1.5rem 1.5rem;
		flex-basis: 77%;
	}
	@media ( max-width: 900px ) {
		.header__submenu-category-wrapper {
			gap: 1.5rem;
		}
	}

	.header__submenu-items-wrapper {
		padding: 1.5rem;
	}
	.header__submenu-items-wrapper .header__submenu-categories-list {
		flex-direction: column;
		display: flex;
		gap: 1rem;
	}
	.header__submenu-items-wrapper .header__submenu-categories-list .header__submenu-label {
		position: relative;
		position: relative;
	}
	.header__submenu-items-wrapper .header__submenu-categories-list .header__submenu-label::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header__submenu-items-wrapper
		.header__submenu-categories-list
		.header__submenu-label:hover::after {
		width: 100%;
	}
	@media ( max-width: 900px ) {
		.header__submenu-items-wrapper .header__submenu-categories-list .header__submenu-label {
			font-weight: 500;
		}
	}

	.header__submenu-bundles-section {
		background-color: #f6f7f7;
		padding: 1.5rem 1.5rem 1.5rem 2.5rem;
		display: flex;
		justify-content: flex-end;
		gap: 3rem;
		width: 40%;
	}
	@media ( max-width: 900px ) {
		.header__submenu-bundles-section {
			padding-bottom: 5rem;
			padding-left: 1.5rem;
			display: block;
			width: 100%;
		}
	}

	.header__submenu-bundles-wrapper {
		flex: 2;
		max-width: 317px;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	@media ( min-width: 783px ) {
		.header__submenu-bundles-wrapper {
			padding-top: 0;
		}
	}
	@media ( max-width: 900px ) {
		.header__submenu-bundles-wrapper {
			max-width: none;
			gap: 1.5rem;
		}
	}

	.header__submenu-bundle-icons {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 152px;
	}
	@media ( max-width: 900px ) {
		.header__submenu-bundle-icons {
			max-width: 250px;
			width: auto;
		}
	}

	.header__more.js {
		display: block !important;
	}
	.header__more.js[hidden] {
		display: none;
	}
	@media ( max-width: 900px ) {
		.header__more {
			display: none;
		}
	}

	.header__more-submenu a {
		transition: none;
		position: relative;
	}
	.header__more-submenu a:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	.header__more-submenu a::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header__more-submenu a:hover::after {
		width: 100%;
	}
	.header__more-submenu .header__submenu-content {
		background: #fff;
	}
	.header__more-submenu .header__submenu-categories-list {
		width: 85%;
		margin: 0 auto;
		margin: 0 auto;
		max-width: 1200px;
		padding: 3rem 1rem 3rem 0;
	}
	@media ( max-width: 1300px ) {
		.header__more-submenu .header__submenu-categories-list {
			width: 90%;
		}
	}
	@media ( max-width: 1100px ) {
		.header__more-submenu .header__submenu-categories-list {
			width: 95%;
		}
	}
	@media ( max-width: 782px ) {
		.header__more-submenu .header__submenu-categories-list {
			padding: 0 2rem;
			width: 100%;
		}
	}

	.header__back-btn {
		position: relative;
		display: none;
		align-items: center;
		width: fit-content;
		margin: 1.5rem;
		padding: 0;
		background-color: transparent;
		border: none;
		font-size: 16px;
	}
	.header__back-btn:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	.header__back-btn::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 0;
		height: 2px;
		background-color: currentColor;
		transition: width 0.2s ease-in-out;
	}
	.header__back-btn:hover::after {
		width: 100%;
	}
	@media ( max-width: 900px ) {
		.header__back-btn {
			display: flex !important;
		}
	}
	.header__back-btn .gridicon {
		width: 1rem;
		height: 1rem;
		margin-inline-end: 0.25rem;
	}

	.mobile-btn {
		position: relative;
		display: none;
		min-width: 48px;
		min-height: 48px;
		margin-inline-end: -0.5rem;
		padding: 0 0.5rem;
		background: transparent;
		border: none;
		border-radius: 3px;
		font-size: 0.875rem;
		line-height: 1;
		text-transform: uppercase;
		transition: background 0.1s;
	}
	.mobile-btn:focus-visible {
		border-radius: 2px;
		outline: solid 2px currentColor;
		outline-offset: 4px;
	}
	@media ( max-width: 900px ) {
		.mobile-btn {
			display: flex !important;
			align-items: center;
		}
	}
	.mobile-btn:any-link {
		color: #101517;
	}
	.mobile-btn:any-link:hover {
		background: #000;
		color: #fff;
	}
	.mobile-btn:any-link:hover .mobile-btn__inner,
	.mobile-btn:any-link:hover .mobile-btn__inner::before,
	.mobile-btn:any-link:hover .mobile-btn__inner::after {
		background: #fff;
	}
	.mobile-btn:any-link:focus {
		background-color: transparent;
		color: #101517;
	}
	.mobile-btn:any-link:focus .mobile-btn__inner,
	.mobile-btn:any-link:focus .mobile-btn__inner::before,
	.mobile-btn:any-link:focus .mobile-btn__inner::after {
		background: #101517;
	}
	.mobile-btn:active {
		transform: scale( 0.95 );
	}

	.mobile-btn__icon {
		position: relative;
		width: 30px;
		height: 20px;
	}

	.mobile-btn__inner {
		display: block;
		top: 50%;
		margin-top: -2px;
	}
	.mobile-btn__inner,
	.mobile-btn__inner::before,
	.mobile-btn__inner::after {
		position: absolute;
		width: 100%;
		height: 3px;
		background: #000;
		border-radius: 3px;
	}
	.mobile-btn__inner::before,
	.mobile-btn__inner::after {
		content: '';
		display: block;
		transition: transform 0.2s;
	}
	.mobile-btn__inner::before {
		top: -8px;
	}
	.mobile-btn__inner::after {
		bottom: -8px;
	}
	[aria-expanded='true'] .mobile-btn__inner {
		background: none !important;
	}
	[aria-expanded='true'] .mobile-btn__inner::before {
		top: 0;
		transform: rotate( 45deg );
	}
	[aria-expanded='true'] .mobile-btn__inner::after {
		bottom: 0;
		transform: rotate( -45deg );
	}

	.mobile-btn__label {
		margin-inline-start: 0.75rem;
	}

	.tooltip:not( .jetpack-sharing-button__list-item ) {
		position: absolute;
		top: calc( 100% + 16px );
		left: 50%;
		min-width: 160px;
		padding: 0.5rem 1rem;
		background-color: #fff;
		border-radius: 3px;
		box-shadow:
			-1px -1px 2px rgba( 0, 0, 0, 0.15 ),
			1px 1px 2px rgba( 0, 0, 0, 0.15 );
		font-size: 0.875rem;
		text-align: center;
		transform: translateX( -50% );
	}
	.tooltip:not( .jetpack-sharing-button__list-item )::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 100%;
		display: block;
		border-style: solid;
		border-color: transparent;
		border-width: 0 8px 8px 8px;
		border-bottom-color: #fff;
		transform: translateX( -50% );
	}
	.tooltip:not( .jetpack-sharing-button__list-item ) a {
		color: #008710;
		text-decoration: underline;
	}
	.tooltip:not( .jetpack-sharing-button__list-item ) a:hover {
		color: #005b18;
		text-decoration: none;
	}

	@keyframes user-menu {
		from {
			transform: translateY( -50% );
			opacity: 0;
		}
		to {
			transform: translateY( 0 );
			opacity: 1;
		}
	}
	.user-menu {
		position: relative;
	}

	.user-menu__btn {
		display: flex !important;
		justify-content: center;
		align-items: center;
		min-width: 48px;
		padding: 0;
		background: transparent;
		border: none;
		border-radius: 50%;
		transition: transform 0.1s ease-in-out;
	}
	@media ( max-width: 900px ) {
		.user-menu__btn {
			display: none !important;
		}
	}
	.user-menu__btn:focus,
	.user-menu__btn:focus-visible {
		outline: none;
	}
	.user-menu__btn:hover .user-menu__avatar,
	.user-menu__btn:focus-visible .user-menu__avatar {
		box-shadow: 0 0 0 2px #101517;
	}
	.user-menu__btn:active {
		transform: scale( 0.9 );
	}

	.user-menu__avatar {
		border-radius: inherit;
		background-color: #a7aaad;
	}

	.user-menu__tooltip {
		display: none;
		animation-fill-mode: backwards;
		animation-name: user-menu;
		animation-duration: 0.25s;
		animation-timing-function: ease-out;
	}
	@media ( prefers-reduced-motion ) {
		.user-menu__tooltip {
			animation-duration: 0;
			animation-delay: 0;
		}
	}
	@media ( max-width: 900px ) {
		.user-menu__tooltip {
			position: initial;
			display: block !important;
			animation: none;
		}
		.user-menu__tooltip a {
			transition: none;
			position: relative;
			font-size: 18px;
		}
		.user-menu__tooltip a:focus-visible {
			border-radius: 2px;
			outline: solid 2px currentColor;
			outline-offset: 4px;
		}
		.user-menu__tooltip a::after {
			content: '';
			position: absolute;
			top: 100%;
			left: 0;
			display: block;
			width: 0;
			height: 2px;
			background-color: currentColor;
			transition: width 0.2s ease-in-out;
		}
		.user-menu__tooltip a:hover::after {
			width: 100%;
		}
		.user-menu__tooltip a:any-link {
			color: #101517;
			text-decoration: none;
		}
	}
	.user-menu__tooltip:target {
		display: block;
	}
	.user-menu__tooltip.js {
		display: block;
	}
	.user-menu__tooltip.js[hidden] {
		display: none;
	}
	.user-menu__tooltip .tooltip {
		text-align: start;
		min-width: 220px;
	}
	@media ( max-width: 900px ) {
		.user-menu__tooltip .tooltip {
			position: inherit;
			display: block;
			width: fit-content;
			min-width: 0;
			padding: 0;
			background: none;
			box-shadow: none;
			transform: none;
		}
		.user-menu__tooltip .tooltip::after {
			display: none;
		}
	}

	.user-menu__display-name {
		color: #2c3338;
		font-size: 1rem;
		font-weight: 700;
	}

	.user-menu__username {
		color: #646970;
	}

	.user-menu__list {
		margin-block-start: 0;
		margin-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		font-size: inherit;
		list-style-type: none;
		margin-top: 1rem;
	}
	.user-menu__list > li {
		margin: 0.5rem 0;
	}
	@media ( max-width: 900px ) {
		.user-menu__list > li {
			margin: 1rem 0;
		}
	}

	@media ( min-width: 900px ) {
		//show desktop cart
		.header__sections-list {
			& ~ .header__jetpack-masterbar-cart {
				display: flex;
				align-items: center;
			}
		}

		.header {
			&.is-sticky {
				padding: 56px;
			}
		}

		//hide mobile cart
		.header__content {
			& > .header__jetpack-masterbar-cart {
				display: none;
			}
		}
	}

	@media ( max-width: 900px ) {
		.header__content {
			& > .header__jetpack-masterbar-cart {
				justify-content: flex-end;
				flex: unset;
				margin-right: 0.5rem;
				align-items: center;
			}
			.header__home-link {
				flex: 1;
			}
		}
	}
	@media ( max-width: 480px ) {
		.header__content > .masterbar__item.header__jetpack-masterbar-cart {
			flex: unset;
			justify-content: flex-end;
			margin-left: 7px;
			margin-right: 10px;
		}
		.header__home-link {
			margin-right: 6px;
			flex: 1;
		}
	}
}

//open the cart to full width and height of viewport
@media ( max-width: 480px ) {
	.is-group-jetpack-cloud.is-section-jetpack-cloud-pricing {
		.masterbar-cart-button__popover .mini-cart {
			top: 0;
			bottom: unset;
			box-shadow: rgb( 99 99 99 / 20% ) 0 2px 8px 0;
			max-height: 100%;
		}
		.masterbar-cart-button__popover {
			//display mobile cart at the top most layer
			z-index: 9999999;
		}
	}
}
