/*
 * Desktop mega menu (Products). Values measured from the live Elementor off-canvas panels:
 * a 1300px x 80vh card centred over an overlay, 1% inner padding, fading in over 0.3s.
 * Category panels open on top of the main panel (with their own lighter overlay), exactly as
 * the live panels stack.
 */

.ew-mega[hidden],
.ew-mega__panel[hidden] { display: none; }

.ew-mega__panel {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: ew-fade-in .3s both;
}
.ew-mega__panel--cat,
.ew-mega__panel--list,
.ew-mega__panel--brands { z-index: 10001; }

@keyframes ew-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ew-mega__overlay { position: absolute; inset: 0; background-color: #000000cc; }
.ew-mega__overlay--sub { background-color: var(--ew-nav-overlay); }

.ew-mega__card {
	position: relative;
	outline: none;
	width: 1300px;
	max-width: 100%;
	height: 80vh;
	overflow: auto;
	border-radius: 20px;
	background-color: var(--ew-purple);
}

.ew-mega__inner {
	position: relative;
	display: flex;
	gap: 20px;
	min-height: 100%;
	padding: 1%;
	background-color: var(--ew-purple);
}
.ew-mega__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/wavy-background.webp") center / cover no-repeat;
	pointer-events: none;
}
.ew-mega__inner > * { position: relative; }

/* ---------- Shared: help block ---------- */
.ew-mega__help { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding: 1%; }
.ew-mega__help-text { margin-bottom: -10px; color: var(--ew-off-white); font-family: var(--ew-font-jakarta); font-weight: 600; }
.ew-mega__help-text p { margin-block-end: .9rem; }
.ew-mega__divider { display: flex; padding-block: 2px; }
.ew-mega__divider span { width: 85%; border-top: 1px solid var(--ew-off-white); }
.ew-mega__phone,
.ew-mega__phone:hover { display: flex; align-items: center; height: 40px; }
.ew-mega__phone-icon { display: flex; position: relative; top: -3px; width: 50px; color: var(--ew-white); }
.ew-mega__phone-icon .ew-icon { width: 40px; height: 40px; }
.ew-mega__phone-text {
	padding-left: 5px;
	color: var(--ew-mustard);
	font-family: var(--ew-font-gibson);
	font-size: 35px;
	font-weight: 900;
	line-height: 1.1em;
	text-transform: uppercase;
}

/* ---------- Main panel ---------- */
.ew-mega__nav { display: flex; flex-direction: column; justify-content: space-around; gap: 20px; flex: 0 0 25%; padding: 1%; }
.ew-mega__logo { width: 78.871%; }
.ew-mega__logo .ew-logo { display: block; }
.ew-mega__logo .ew-logo img { width: 100%; }
.ew-mega__links { display: flex; flex-direction: column; align-items: flex-start; padding: 1%; }
.ew-mega__link,
.ew-mega__link:visited {
	display: inline-block;
	padding: 20px 40px;
	background-color: transparent;
	color: var(--ew-mustard);
	font-family: var(--ew-font-gibson);
	font-size: 20px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	transition: all .3s;
}
.ew-mega__link:hover,
.ew-mega__link:focus-visible { background-color: var(--ew-purple); color: var(--ew-white); }

.ew-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	flex: 1 1 auto;
	min-height: 100%;
	border-radius: 0 15px 15px 0;
	background-color: var(--ew-white);
}
.ew-mega__tile {
	display: flex;
	flex-direction: column;
	padding: 1%;
	border: 0 solid var(--ew-purple);
	background-color: transparent;
	text-align: center;
	white-space: normal;
	transition: background-color 1s;
}
.ew-mega__tile:hover,
.ew-mega__tile:focus-visible { background-color: var(--ew-mustard); }
/* Grid lines as on the live site (adjacent tiles both draw a border, giving 2px inner lines). */
.ew-mega__tile:nth-child(1) { border-width: 0 1px 1px 0; }
.ew-mega__tile:nth-child(2) { border-width: 0 1px 1px 1px; }
.ew-mega__tile:nth-child(3) { border-width: 0 0 1px 1px; }
.ew-mega__tile:nth-child(4) { border-width: 1px 1px 1px 0; }
.ew-mega__tile:nth-child(5) { border-width: 1px; }
.ew-mega__tile:nth-child(6) { border-width: 1px 0 1px 1px; }
.ew-mega__tile:nth-child(7) { border-width: 1px 1px 0 0; }
.ew-mega__tile:nth-child(8) { border-width: 1px 1px 0 1px; }
.ew-mega__tile:nth-child(9) { border-width: 1px 0 0 1px; }
.ew-mega__tile-img { display: block; line-height: 0; }
.ew-mega__tile-img img { display: inline-block; vertical-align: middle; }
.ew-tile--img-half .ew-mega__tile-img img { width: 50%; }
.ew-mega__tile-title,
.ew-mega__sub-title {
	display: block;
	color: var(--ew-purple);
	font-family: var(--ew-font-gibson);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1em;
	text-align: center;
	text-transform: uppercase;
}

/* ---------- Secondary panels: left column ---------- */
.ew-mega__side { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; flex: 0 0 27.318%; padding: 1%; }
.ew-mega__side--bordered { border-right: 1px solid var(--ew-off-white); }
.ew-panel--narrow .ew-mega__side { flex-basis: 25%; }
/* Brands: the help block isn't pulled up or bottom-aligned on the live site. */
.ew-mega__panel--brands .ew-mega__help { justify-content: flex-start; }
.ew-mega__panel--brands .ew-mega__help-text { margin-bottom: 0; }
.ew-mega__panel--brands .ew-mega__phone { height: 44px; }
.ew-mega__side-top { display: flex; flex-direction: column; gap: 20px; padding-top: 50px; }
.ew-mega__panel--cat .ew-mega__side-top { padding-top: 40px; }
.ew-mega__panel--cat.ew-panel--pad-50 .ew-mega__side-top { padding-top: 50px; }
.ew-mega__side-title {
	margin: 0;
	color: var(--ew-mustard);
	font-family: var(--ew-font-gibson);
	font-size: 40px;
	font-weight: 900;
	line-height: 1.1em;
	text-transform: uppercase;
}
.ew-mega__side-text { width: 92.1%; color: var(--ew-off-white); font-family: var(--ew-font-jakarta); font-weight: 400; }
.ew-mega__side-text p { margin-block-end: .9rem; }
.ew-mega__back,
.ew-mega__back:hover,
.ew-mega__back:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	align-self: flex-start;
	width: 90%;
	padding: 21px 15px 15px;
	background-color: var(--ew-white);
	color: var(--ew-purple);
	font-family: var(--ew-font-gibson);
	font-size: 20px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
}
.ew-mega__back:hover,
.ew-mega__back:focus-visible { background-color: var(--ew-mustard); }
.ew-mega__back .ew-icon { width: 20px; height: 20px; }

/* ---------- Category panels: content ---------- */
.ew-mega__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 20px 20px 20px 0;
	background-color: var(--ew-off-white);
}
.ew-mega__content-inner { display: flex; flex-direction: column; min-height: 100%; }
.ew-mega__hero {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 50%;
	padding: 5%;
	border-radius: 0 15px 0 0;
	background: center / cover no-repeat;
}
.ew-mega__hero-title {
	margin: 0;
	color: var(--ew-white);
	font-family: var(--ew-font-gibson);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2em;
	text-transform: uppercase;
}
.ew-mega__hero-text { width: 40%; margin-bottom: 80px; color: var(--ew-off-white); font-family: var(--ew-font-jakarta); font-weight: 400; }
.ew-hero--mb-20 .ew-mega__hero-text { margin-bottom: 20px; }
.ew-hero--mb-100 .ew-mega__hero-text { margin-bottom: 100px; }
.ew-mega__hero-text p { margin-block-end: .9rem; }
/* The last paragraph's margin merges into the gap below, as on the live site. */
.ew-mega__hero-text p:last-child { margin-block-end: 0; }
.ew-mega__hero-links { display: flex; gap: 40px; }
.ew-mega__hero-link,
.ew-mega__hero-link:hover,
.ew-mega__hero-link:focus {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: transparent;
	color: var(--ew-white);
	font-family: var(--ew-font-gibson);
	font-size: 20px;
	font-weight: 500;
	line-height: 1em;
	text-transform: none;
}
.ew-mega__hero-link .ew-icon { width: 19px; height: 19px; color: var(--ew-mustard); }
.ew-mega__hero-link span { padding-left: 5px; }

.ew-mega__row { display: flex; min-height: 50%; }
.ew-mega__row--top .ew-mega__hero { flex: 0 0 66.6%; border-radius: 0; }
.ew-mega__sub {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 100%;
	padding: 1%;
	border: 1px solid var(--ew-purple);
	background-color: transparent;
	white-space: normal;
	transition: background-color .5s, border-radius .3s;
}
.ew-mega__panel--four .ew-mega__sub { justify-content: center; }
.ew-mega__sub:hover,
.ew-mega__sub:focus-visible { background-color: var(--ew-mustard); }
.ew-mega__row--subs .ew-mega__sub:last-child:hover { border-radius: 0 0 15px 0; }
.ew-mega__sub-img { display: block; line-height: 0; text-align: center; }
.ew-mega__sub-img img { display: inline-block; vertical-align: middle; }

/* ---------- List view ---------- */
.ew-mega__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-content: center;
	align-items: start;
	justify-items: start;
	flex: 1 1 auto;
	padding: 2% 5%;
}
.ew-mega__list-col { display: flex; flex-direction: column; gap: 5px 0; width: 100%; padding: 1%; }
.ew-mega__list-head,
.ew-mega__list-head:hover {
	display: block;
	padding: 10px;
	color: var(--ew-mustard);
	font-family: var(--ew-font-gibson);
	font-size: 20px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	transition: transform .3s;
}
.ew-mega__list-head:hover { transform: scale(1.025); }
.ew-mega__list-items { margin: 0; padding: 10px; list-style: none; }
.ew-mega__list-items li:not(:last-child) { padding-block-end: 5px; }
.ew-mega__list-items li:not(:first-child) { margin-block-start: 5px; }
.ew-mega__list-items a { display: flex; align-items: center; font-family: var(--ew-font-jakarta); font-weight: 500; }
.ew-mega__list-items .ew-icon { width: 14px; height: 14px; margin-right: 3.5px; color: var(--ew-mustard); }
.ew-mega__list-items span { padding-left: 5px; color: var(--ew-white); transition: color .5s; }
.ew-mega__list-items a:hover span { color: var(--ew-mustard); }

/* ---------- Brands ---------- */
.ew-mega__brands { display: flex; flex: 1 1 auto; padding: 1%; border-radius: 0 15px 15px 0; background-color: var(--ew-white); }
.ew-mega__brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); flex: 1 1 auto; min-height: 100%; }
.ew-mega__brand { display: block; padding: 1%; border: 1px solid var(--ew-purple); background: center / contain no-repeat; transition: background-color 1s; }
.ew-mega__brand:first-child { grid-column: span 2; }

body.ew-scroll-lock { overflow: hidden; }