/* Desktop Systemy dropdown from the Figma menu component (1512 × 129). */
.her-system-mega-menu {
	position: fixed;
	top: 150px;
	left: 0;
	/* The dropdown must sit above the sticky header's bottom shadow. */
	z-index: 120;
	display: block;
	width: 100%;
	padding: 35px 100px 42px;
	background: var(--her-cream);
	color: var(--her-ink);
	border-bottom: 1px solid rgba(79, 65, 49, .14);
	box-shadow: 0 8px 18px rgba(59, 48, 37, .08);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-9px);
	transition: top .24s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
}

.her-system-mega-menu[hidden] {
	display: none;
}

.her-system-mega-menu.is-open,
.her-system-mega-menu.is-closing {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.her-system-mega-menu.is-open {
	pointer-events: auto;
	transition: top .24s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
}

.her-system-mega-menu.is-closing {
	pointer-events: none;
}

.her-system-mega-menu.is-fade-out {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-9px);
}

.her-system-mega-menu__inner {
	display: flex;
	width: min(1312px, 100%);
	height: 52px;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
}

.her-system-mega-menu__item {
	position: relative;
	z-index: 0;
	isolation: isolate;
	display: flex;
	/* Let the cell contain the complete image + label, including long names. */
	width: max-content;
	min-width: 153px;
	height: 47.402px;
	flex: 0 0 auto;
	align-items: center;
	gap: 36px;
	color: var(--her-ink);
	text-decoration: none;
	transition: transform .24s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}

.her-system-mega-menu__item::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* The hover surface covers the complete cell: image, gap and label. */
	inset: -9px -10px;
	border-radius: 15px;
	background: rgba(255, 255, 255, .3);
	opacity: 0;
	transform: scale(.94);
	transition: opacity .22s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 1101px) {
	.her-system-mega-menu__item:hover,
	.her-system-mega-menu__item:focus-visible {
		color: var(--her-olive);
		transform: translateY(-2px) scale(1.025);
	}

	.her-system-mega-menu__item:hover::before,
	.her-system-mega-menu__item:focus-visible::before {
		opacity: 1;
		transform: scale(1);
	}
}

.her-system-mega-menu__item img {
	display: block;
	width: 70px;
	height: 47.402px;
	flex: 0 0 70px;
	border-radius: 7.89px;
	object-fit: cover;
	opacity: 0;
	transform: translateX(-18px) scale(.84);
	transform-origin: center;
	transition: opacity .24s ease, transform .34s cubic-bezier(.22, 1, .36, 1), filter .24s ease, box-shadow .24s ease;
	transition-delay: 0ms;
}

.her-system-mega-menu__item span {
	white-space: pre-line;
	font: 500 17px/1.5 "Cormorant", Georgia, serif;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(17px);
	transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1), letter-spacing .22s ease;
	transition-delay: 0ms;
}

.her-system-mega-menu.is-open .her-system-mega-menu__item img {
	opacity: 1;
	transform: translateX(0) scale(1);
	transition-delay: var(--mega-open-delay, 240ms);
}

.her-system-mega-menu.is-open .her-system-mega-menu__item span {
	opacity: 1;
	transform: translateX(0);
	transition-delay: calc(var(--mega-open-delay, 240ms) + 32ms);
}

.her-system-mega-menu.is-closing .her-system-mega-menu__item img {
	opacity: 0;
	transform: translateX(-18px) scale(.84);
	transition-delay: var(--mega-close-delay, 0ms);
}

.her-system-mega-menu.is-closing .her-system-mega-menu__item span {
	opacity: 0;
	transform: translateX(17px);
	transition-delay: calc(var(--mega-close-delay, 0ms) + 22ms);
}

@media (min-width: 1101px) {
	.her-system-mega-menu.is-open .her-system-mega-menu__item:hover img,
	.her-system-mega-menu.is-open .her-system-mega-menu__item:focus-visible img {
		filter: brightness(1.045) saturate(1.04);
		box-shadow: 0 5px 12px rgba(79, 65, 49, .16);
		transform: translateX(1px) scale(1.035);
		transition-delay: 0ms;
	}

	.her-system-mega-menu.is-open .her-system-mega-menu__item:hover span,
	.her-system-mega-menu.is-open .her-system-mega-menu__item:focus-visible span {
		transform: translateX(2px);
		letter-spacing: 3.7px;
		transition-delay: 0ms;
	}
}

.her-system-mega-menu__item:focus-visible {
	outline: 1px solid var(--her-brown);
	outline-offset: 6px;
}

@media (max-width: 1100px) {
	.her-system-mega-menu {
		display: none !important;
	}
}