/* WorkStyle Shop By mega menu — Figma Frame 45 @1920×635
 * Banners 345×458 · Headings Space Grotesk 500/24 · Brands #F2F3FF
 * Desktop tokens match the measured 1920px Frame 45 anchors.
 */

li.ws-shop-by > .wd-dropdown-menu.ws-shop-by-dropdown,
.wd-dropdown-menu.ws-shop-by-dropdown {
	--ws-mega-gutter: clamp(28px, 2.0833vw, 40px); /* 40 @1920 */
	--ws-mega-banner-w: clamp(220px, 17.96875vw, 345px); /* 345 @1920 */
	--ws-mega-banner-h: clamp(340px, 23.8542vw, 458px); /* 458 @1920 */
	--ws-mega-banner-gap: clamp(16px, 1.3542vw, 26px);
	--ws-mega-after-banners: clamp(48px, 4.1667vw, 80px);
	--ws-mega-col-gap: clamp(72px, 6.7708vw, 130px);
	--ws-mega-content-y: clamp(28px, 1.8229vw, 35px);
	--ws-mega-list-gap: clamp(12px, 0.8333vw, 16px);
	--ws-mega-head-gap: clamp(14px, 0.9375vw, 18px);
	--ws-mega-head-size: clamp(16px, 1.25vw, 24px);
	--ws-mega-link-size: clamp(14px, 0.8333vw, 16px);
	--ws-mega-brands-h: clamp(60px, 3.9583vw, 76px);
	--ws-mega-logo-h: clamp(24px, 1.6667vw, 32px);
	--ws-mega-swatch: clamp(14px, 0.8333vw, 16px);
	--ws-mega-brands-bg: #f2f3ff;
	--ws-mega-panel-bg: #ffffff;
	--ws-font: "Space Grotesk", system-ui, sans-serif;
	--ws-primary: #6a4972;
	--wd-dropdown-padding: 0;
	--wd-dropdown-width: 100vw;
	--sub-menu-color: #000000;
	--sub-menu-color-hover: var(--ws-primary);
	--nav-img-width: auto;
	--nav-img-height: auto;

	position: fixed !important;
	top: var(--ws-mega-top, 120px) !important;
	left: 0 !important;
	right: 0 !important;
	inset-inline-start: 0 !important;
	inset-inline-end: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	/* The selected Figma frame is exactly 635px high at 1920px. */
	min-height: clamp(480px, 33.0729vw, 635px) !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--ws-mega-panel-bg) !important;
	box-shadow: 0 18px 40px rgba(17, 24, 39, 0.12) !important;
	overflow: hidden !important;
	text-transform: none !important;
	transform: none !important;
	z-index: 360;
	font-family: var(--ws-font) !important;

	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* WoodMart :hover cannot open this panel — only .ws-mega-open (Shop By JS) */
li.ws-shop-by.wd-event-hover:hover > .wd-dropdown-menu.ws-shop-by-dropdown,
li.ws-shop-by.wd-event-hover:hover > .wd-dropdown.ws-shop-by-dropdown,
li.ws-shop-by:hover > .wd-dropdown-menu.ws-shop-by-dropdown {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

li.ws-shop-by.ws-mega-open > .wd-dropdown-menu.ws-shop-by-dropdown,
li.ws-shop-by.ws-mega-open.wd-event-hover:hover > .wd-dropdown-menu.ws-shop-by-dropdown,
li.ws-shop-by.wd-event-click.wd-opened > .wd-dropdown-menu.ws-shop-by-dropdown,
.wd-dropdown-menu.ws-shop-by-dropdown.wd-opened {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: none !important;
}

li.ws-shop-by {
	position: relative;
}

li.ws-shop-by > a {
	position: relative;
	z-index: 2;
}

.wd-dropdown-menu.ws-shop-by-dropdown::after {
	content: none !important;
	display: none !important;
}

.wd-dropdown-menu.ws-shop-by-dropdown > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding: var(--ws-mega-content-y) var(--ws-mega-gutter) !important;
	box-sizing: border-box;
}

/* ---------- Top Brands ---------- */
.ws-mega-brands {
	width: 100%;
	background: var(--ws-mega-brands-bg);
}

.ws-mega-brands__inner,
.ws-mega-brands__inner.container {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 2.083vw, 40px);
	max-width: 100% !important;
	width: 100% !important;
	min-height: var(--ws-mega-brands-h);
	height: var(--ws-mega-brands-h);
	margin: 0 !important;
	padding: 0 var(--ws-mega-gutter) !important;
	box-sizing: border-box;
}

.ws-mega-brands__title {
	flex: 0 0 auto;
	font-family: var(--ws-font);
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 700;
	line-height: 1;
	color: #000;
	letter-spacing: 0;
}

.ws-mega-brands__list {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: clamp(32px, 2.5vw, 48px);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ws-mega-brands__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	align-items: center;
}

.ws-mega-brands__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ws-mega-brands-h);
	line-height: 0;
	transition: opacity 0.2s ease;
}

.ws-mega-brands__link:hover {
	opacity: 0.7;
}

.ws-mega-brands__logo,
.ws-shop-by-dropdown .ws-mega-brands__logo {
	display: block !important;
	height: var(--ws-mega-logo-h) !important;
	width: auto !important;
	max-width: clamp(100px, 7.8125vw, 150px) !important;
	max-height: var(--ws-mega-logo-h) !important;
	object-fit: contain !important;
	object-position: center;
	visibility: visible !important;
	opacity: 0.74 !important;
	/* Figma brand marks are charcoal/black — flatten color logos */
	filter: brightness(0) saturate(100%) !important;
	mix-blend-mode: normal;
}

/* Balance wide wordmarks vs compact badges */
.ws-mega-brands__item:nth-child(3) .ws-mega-brands__logo {
	max-width: clamp(110px, 8.3333vw, 160px) !important;
}

/* IRG badge already dark + white type — keep as-is */
.ws-mega-brands__item:last-child .ws-mega-brands__logo {
	height: var(--ws-mega-logo-h) !important;
	max-height: var(--ws-mega-logo-h) !important;
	max-width: clamp(76px, 5.2083vw, 100px) !important;
	filter: none !important;
	opacity: 1 !important;
}

/* ---------- Content flex row ---------- */
.ws-shop-by-dropdown .wd-sub-menu.ws-shop-by-grid {
	--wd-col: 5;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--ws-mega-col-gap);
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .wd-col,
.ws-shop-by-dropdown .ws-shop-by-grid > .menu-item {
	flex: 0 0 auto !important;
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-banner {
	width: var(--ws-mega-banner-w) !important;
	flex: 0 0 var(--ws-mega-banner-w) !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-banner--women {
	margin-inline-end: calc(var(--ws-mega-banner-gap) - var(--ws-mega-col-gap)) !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-banner--men {
	/* Fixed gap after photos — not margin-auto (that blew a 500px+ hole) */
	margin-inline-end: calc(var(--ws-mega-after-banners) - var(--ws-mega-col-gap)) !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-col--jobs,
.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-col--category,
.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-col--colors {
	flex: 0 0 auto !important;
	width: auto !important;
	margin-inline-start: 0 !important;
	padding-top: clamp(16px, 1.25vw, 24px) !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-col--jobs {
	width: clamp(128px, 8.3333vw, 160px) !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-col--category {
	width: clamp(92px, 5.2083vw, 100px) !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-col--colors {
	width: clamp(136px, 8.3333vw, 160px) !important;
}

/* ---------- Banners ---------- */
.ws-shop-by-dropdown .ws-mega-banner > .ws-mega-banner__link {
	position: relative;
	display: block !important;
	width: 100%;
	height: var(--ws-mega-banner-h) !important;
	overflow: hidden;
	background: #1f2641;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 0;
}

.ws-shop-by-dropdown .ws-mega-banner__img,
.ws-shop-by-dropdown .ws-mega-banner__img.wp-post-image,
.ws-shop-by-dropdown .ws-mega-banner a img,
.ws-shop-by-dropdown .ws-mega-banner__placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center top !important;
	visibility: visible !important;
	opacity: 1 !important;
	transition: transform 0.4s ease;
}

.ws-shop-by-dropdown .ws-mega-banner__placeholder {
	background: linear-gradient(160deg, #6a4972 0%, #1f2641 100%);
}

.ws-shop-by-dropdown .ws-mega-banner__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 42%,
		rgba(0, 0, 0, 0.35) 78%,
		rgba(0, 0, 0, 0.55) 100%
	);
	pointer-events: none;
}

.ws-shop-by-dropdown .ws-mega-banner__label {
	position: absolute;
	left: clamp(12px, 0.833vw, 16px);
	right: clamp(12px, 0.833vw, 16px);
	bottom: clamp(18px, 1.1458vw, 22px);
	z-index: 2;
	font-family: var(--ws-font);
	font-size: clamp(15px, 0.9375vw, 18px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none !important;
	color: #fff !important;
}

.ws-shop-by-dropdown .ws-mega-banner__link:hover .ws-mega-banner__img {
	transform: scale(1.03);
}

/* ---------- Headings: Space Grotesk Medium 24 / #000 ---------- */
.ws-shop-by-dropdown .ws-shop-by-grid > .menu-item:not(.ws-mega-banner) > a {
	display: block !important;
	margin: 0 0 var(--ws-mega-head-gap) !important;
	padding: 0 !important;
	font-family: var(--ws-font) !important;
	font-size: var(--ws-mega-head-size) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: #000 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid > .menu-item:not(.ws-mega-banner) > a:hover {
	color: var(--ws-primary) !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid .sub-sub-menu,
.ws-shop-by-dropdown .ws-shop-by-grid .menu-item .sub-sub-menu {
	display: flex !important;
	flex-direction: column;
	gap: var(--ws-mega-list-gap);
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto !important;
}

.ws-shop-by-dropdown .ws-shop-by-grid .sub-sub-menu > .menu-item {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1;
}

.ws-shop-by-dropdown .ws-shop-by-grid .sub-sub-menu > .menu-item > a {
	display: inline-flex !important;
	align-items: center;
	gap: clamp(10px, 0.729vw, 14px);
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-family: var(--ws-font) !important;
	font-size: var(--ws-mega-link-size) !important;
	font-weight: 400 !important;
	line-height: 1.25;
	color: #000 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: color 0.15s ease;
}

.ws-shop-by-dropdown .ws-shop-by-grid .sub-sub-menu > .menu-item > a:hover {
	color: var(--ws-primary) !important;
	transform: none;
}

/* ---------- Swatches ---------- */
.ws-mega-swatch {
	display: inline-block !important;
	flex: 0 0 auto;
	width: var(--ws-mega-swatch) !important;
	height: var(--ws-mega-swatch) !important;
	min-width: var(--ws-mega-swatch);
	min-height: var(--ws-mega-swatch);
	border-radius: 0;
	background: var(--ws-swatch, #111);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.ws-shop-by-dropdown .ws-shop-by-grid .sub-sub-menu > .menu-item > a:has(.ws-mega-swatch) {
	color: #000 !important;
	font-weight: 400 !important;
}

.ws-shop-by-dropdown .wd-nav-opener,
.ws-shop-by-dropdown .menu-item-has-children > a::after {
	display: none !important;
}

@media (max-width: 1024px) {
	.ws-shop-by-dropdown .wd-sub-menu.ws-shop-by-grid {
		flex-wrap: wrap;
		gap: 20px;
	}

	.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-banner--women,
	.ws-shop-by-dropdown .ws-shop-by-grid > .ws-mega-banner--men {
		margin-inline-end: 0 !important;
	}

	.ws-shop-by-dropdown .ws-mega-banner > .ws-mega-banner__link {
		height: 240px !important;
	}
}