/**
 * Area: desktop top nav + mega menus (gaps #41-#48).
 * Markup: four WoodMart HTML blocks (Men, Women, Kids, Shop), each a
 * [vc_raw_html el_class="ll-mega-raw"] holding <div class="ll-mega">. Every selector below keys
 * off those classes, never off a block ID, so the area needs no per-site ID. (On the site this
 * was built from the blocks were 91041/91042/91043/91044 - other sites number their own.)
 * JS: assets/js/areas/mega-menu.js (page dim overlay).
 * Overrides style.css §15e / §15r with higher specificity; style.css is not edited.
 */

@media (min-width: 1025px) {

	/* ---------- Top nav: 14px/600 uppercase, no chevrons, red bar under the label ---------- */
	.yb .whb-header .wd-nav.wd-nav-main > li > a {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: #000;
		box-shadow: none;
	}
	.yb .whb-header .wd-nav.wd-nav-main > li > a:hover,
	.yb .whb-header .wd-nav.wd-nav-main > li.current-menu-item > a {
		color: #000;
		box-shadow: none;
	}
	/* WoodMart dropdown chevron (woodmart-font icon in a::after) */
	.yb .whb-header .wd-nav.wd-nav-main > li.menu-item-has-children > a::after,
	.yb .whb-header .wd-nav.wd-nav-main > li > a .wd-nav-arrow {
		display: none;
	}
	.yb .whb-header .wd-nav.wd-nav-main > li > a .nav-link-text {
		position: relative;
	}
	.yb .whb-header .wd-nav.wd-nav-main > li > a .nav-link-text::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -8px;
		height: 3px;
		background: #d22030;
		transform: scaleX(0);
		transition: transform .2s ease;
	}
	.yb .whb-header .wd-nav.wd-nav-main > li:hover > a .nav-link-text::after,
	.yb .whb-header .wd-nav.wd-nav-main > li:focus-within > a .nav-link-text::after,
	.yb .whb-header .wd-nav.wd-nav-main > li.current-menu-item > a .nav-link-text::after {
		transform: scaleX(1);
	}

	/* ---------- Panel: white, full width, fade only ---------- */
	.yb .whb-header .wd-nav.wd-nav-main .wd-dropdown-menu.wd-design-full-width {
		margin-top: 0;
		padding: 36px 0 0;
		border: 0;
		border-top: 1px solid #e5e5e5;
		box-shadow: none;
		background: #fff;
		transform: none;
		transition: opacity .2s ease, visibility .2s ease;
	}
	.yb .whb-header .wd-nav.wd-nav-main .wd-dropdown-menu.wd-design-full-width > .container {
		max-width: var(--wd-container-w, 1222px);
	}
	.yb .whb-header .wd-dropdown-menu .ll-mega-raw,
	.yb .whb-header .wd-dropdown-menu .ll-mega-raw > .wpb_wrapper {
		margin: 0;
		padding: 0;
	}

	/* ---------- Mega layout ---------- */
	.yb .ll-mega {
		color: #000;
		text-align: left;
	}
	.yb .ll-mega ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.yb .ll-mega li {
		margin: 0 0 18px;
		padding: 0;
		font-size: 17px;
		line-height: 1.3;
		font-weight: 400;
		break-inside: avoid;
	}
	.yb .ll-mega a {
		color: #000;
		text-decoration: none;
	}
	.yb .ll-mega li a:hover,
	.yb .ll-mega li a:focus-visible {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.yb .ll-mega__cols {
		display: flex;
		align-items: flex-start;
		padding-bottom: 22px;
	}

	/* Column 1: un-headed featured links + vertical divider */
	.yb .ll-mega__featured {
		flex: 0 0 220px;
		align-self: stretch;
		margin-right: 36px !important;
		padding-right: 20px !important;
		border-right: 1px solid #e5e5e5;
	}

	/* Headed category groups */
	.yb .ll-mega__group {
		flex: 0 1 auto;
		min-width: 150px;
		margin-right: 48px;
	}
	.yb .ll-mega__group--wide .ll-mega__list {
		columns: 2;
		column-gap: 48px;
	}
	.yb .ll-mega__head {
		display: inline-flex;
		align-items: center;
		margin: 0 0 22px;
		font-size: 14px;
		line-height: 14px;
		font-weight: 600;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}
	.yb .ll-mega__head::after,
	.yb .ll-mega__cta::after,
	.yb .ll-mega__all::after {
		content: "";
		display: inline-block;
		width: 16px;
		height: 10px;
		margin-left: 10px;
		background: #d22030;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform .2s ease;
	}
	.yb .ll-mega__head:hover::after,
	.yb .ll-mega__feat:hover .ll-mega__cta::after,
	.yb .ll-mega__all:hover::after {
		transform: translateX(4px);
	}

	/* Feature block: landscape image, headline, text, arrow CTA */
	.yb .ll-mega__feat {
		display: block;
		flex: 0 1 380px;
		min-width: 240px;
		max-width: 380px;
		margin-left: auto;
		background: none;
		padding: 0;
	}
	.yb .ll-mega__feat-media {
		display: block;
		aspect-ratio: 380 / 175;
		overflow: hidden;
		margin-bottom: 16px;
		background: #f5f5f5;
	}
	.yb .ll-mega__feat-media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 30%;
	}
	.yb .ll-mega__feat-title {
		display: block;
		margin: 0 0 6px;
		font-size: 22px;
		line-height: 1.2;
		font-weight: 600;
	}
	.yb .ll-mega__feat-text {
		display: block;
		margin: 0 0 12px;
		font-size: 16px;
		line-height: 1.35;
		color: #000;
	}
	.yb .ll-mega__cta {
		display: inline-flex;
		align-items: center;
		font-size: 17px;
		font-weight: 600;
	}

	/* Grey bottom bar across the full panel width */
	.yb .ll-mega__bar {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 60px;
		padding: 18px 0;
		background: #f5f5f5;
		box-shadow: 0 0 0 100vmax #f5f5f5;
		clip-path: inset(0 -100vmax);
	}
	.yb .ll-mega__all {
		display: inline-flex;
		align-items: center;
		font-size: 14px;
		line-height: 14px;
		font-weight: 600;
		letter-spacing: 1.2px;
		text-transform: uppercase;
	}

	/* ---------- Page dim behind the open menu (element added by mega-menu.js) ---------- */
	.ll-mega-overlay {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: var(--ll-mega-top, 0px);
		z-index: 389; /* under .whb-main-header (390) */
		background: rgba(0, 0, 0, .3);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .2s ease, visibility .2s ease;
	}
	body.ll-mega-open .ll-mega-overlay {
		opacity: 1;
		visibility: visible;
	}
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.yb .ll-mega__featured { flex-basis: 180px; margin-right: 24px !important; }
	.yb .ll-mega__group { margin-right: 28px; min-width: 150px; }
	.yb .ll-mega__group--wide .ll-mega__list { column-gap: 28px; }
	.yb .ll-mega__feat { flex-basis: 300px; max-width: 300px; }
}

@media (max-width: 1024px) {
	.ll-mega-overlay { display: none; }
}