.flyout { z-index: 1000 }

.flyout:hover { z-index: 10000 }

.flyout__panel {
	position: absolute;
	transition: transform .3s, opacity .3s;
	opacity: 0;
	pointer-events: none;
	background-color: white;
	right: 0;
}

.flyout:hover .flyout__panel,
.flyout__panel.is-active {
	opacity: 1;
	pointer-events: auto;
}

.store-search-box.flyout__panel {
	position: absolute;
	left: 0;
	width: 100%;
	top: 100%;
}


@media (max-width: 1024px) {
	[class].flyout-cart .flyout__panel {
		display: none;
	}
}


@media (min-width: 1025px) {
	.flyout {
		z-index: 1015;
		position: relative;
	}

	.flyout__panel {
		position: absolute;
		transition: transform .3s, opacity .3s;
		opacity: 0;
		pointer-events: none;
		transform: translateY(20px) translateX(-49%);
		left: 50%;
		background-color: white;
	}
	
	.flyout:hover .flyout__panel,
	.flyout__panel.is-active {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0px) translateX(-49%);
	}

	.flyout--search-box {
		width: 50%;
		max-width: 32rem;
	}

	.store-search-box.flyout__panel {
		all: revert;
		display: flex;
    gap: 0.25rem;
	}

	[data-search-flyout-toggle] {
		display: none;
	}

	.flyout:hover .store-search-box.flyout__panel,
	.store-search-box.flyout__panel.is-active {
    transform: initial;
	}






	.flyout-cart .flyout__panel {
		left: auto;
		right: 0;
		min-width: 20rem;
		transform: translateY(20px) translateX(0);
	}

	.flyout-cart:hover .flyout__panel {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-3px) translateX(0);
	}

	.flyout-cart .items {
		position: relative;
		max-height: calc(100vh - 24rem);
		overflow: hidden;
	}

	.flyout-cart__quantity-n-subtotal {
		background-color: #FFF8BF;
		padding: var(--space-300) var(--space-500);
		border-radius: var(--space-700);
	}

	.flyout-cart .item { margin: .75rem 0 }
	
	.flyout-cart .items :first-child { margin-top: 0 }
}