/* Mega menu: left rail of types, right pane of brands + top series. */

/* ---------- Mobile drawer (accordion) ---------- */
.bb-mega {
	display: none;
	background: #151516;
}

.has-mega.is-open > .bb-mega {
	display: block;
}

.bb-mega__rail {
	padding-bottom: 4px;
}

.bb-mega__type {
	position: relative;
}

.bb-mega__typelink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 52px 10px 36px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

.bb-mega__pane {
	display: none;
	padding: 0 0 8px;
	background: #0f0f10;
}

.bb-mega__type.is-open > .bb-mega__pane {
	display: block;
}

.bb-mega__all,
.bb-mega__toplink a {
	color: var(--bb-orange);
}

.bb-mega__pane .bb-mega__all,
.bb-mega__brandlink,
.bb-mega__plain a,
.bb-mega__brand--plain a {
	display: block;
	padding: 9px 20px 9px 52px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

.bb-mega__toplink a {
	padding: 10px 20px 10px 36px !important;
	font-size: 15px !important;
}

/* On mobile, series stay out of the drawer (reached via the brand link). */
.bb-mega__series {
	display: none;
}

.bb-mega__brand--plain > .bb-mega__series {
	display: block;
}

/* ---------- Desktop panel ---------- */
@media (min-width: 1100px) {
	.bb-nav .menu > li.has-mega {
		position: static;
	}

	/* Fill the full height of the header row so the hover area touches the panel. */
	.bb-nav {
		align-self: stretch;
		display: flex;
	}

	.bb-nav .menu {
		align-items: stretch;
	}

	.bb-nav .menu > li > a {
		height: 100%;
	}

	.bb-mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		display: block;
		background: #fff;
		color: var(--bb-text);
		border-top: 3px solid var(--bb-orange);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
	}

	.has-mega:hover > .bb-mega,
	.has-mega:focus-within > .bb-mega {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Grid: rail links in column 1, the active pane spans every row of column 2.
	   Height follows the content, so nothing scrolls. */
	.bb-mega__inner {
		position: relative;
		display: grid;
		grid-template-columns: 290px minmax(0, 1fr); /* 290px = logo block width */
		grid-template-rows: repeat(var(--bb-rows, 3), auto) 1fr;
		min-height: 300px;
		max-height: calc(100vh - 190px);
		background: linear-gradient(to right, #fff 289px, #e8e8e8 289px 290px, #fff 290px);
	}

	.bb-mega__rail,
	.bb-mega__type,
	.bb-mega__toplink {
		display: contents;
	}

	.bb-mega__typelink {
		grid-column: 1;
	}

	.bb-mega__toplink a {
		grid-column: 1;
	}

	.bb-nav .bb-mega__typelink {
		padding: 12px 20px !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		color: var(--bb-text);
	}

	.bb-mega__typelink {
		position: relative;
	}

	.bb-mega__type.has-pane > .bb-mega__typelink::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 22px;
		width: 8px;
		height: 8px;
		border: solid currentcolor;
		border-width: 2px 2px 0 0;
		transform: translateY(-50%) rotate(45deg);
	}

	/* The first type is the default, unless another one is being hovered/focused. */
	.bb-mega__rail:has(.bb-mega__type:not(:first-child):is(:hover, :focus-within)) .bb-mega__type:first-child:not(:hover):not(:focus-within) > .bb-mega__typelink {
		background: none;
		color: var(--bb-text);
		box-shadow: none;
	}

	.bb-nav .bb-mega__toplink a {
		align-self: start;
		margin: 8px 0 0;
		padding: 14px 20px !important;
		font-size: 16px !important;
		border-top: 1px solid #e2e2e2;
	}

	.bb-mega__toplink a:hover {
		color: var(--bb-orange-dark);
	}

	/* Pane */
	.bb-mega__pane {
		grid-column: 2;
		grid-row: 1 / -1;
		display: none;
		min-height: 0;
		padding: 24px clamp(20px, 2.5vw, 40px) 32px;
		overflow: hidden auto; /* only if the screen is too short */
		background: #fff;
	}

	.bb-mega__type:first-child > .bb-mega__pane,
	.bb-mega__type:hover > .bb-mega__pane,
	.bb-mega__type:focus-within > .bb-mega__pane {
		display: block;
	}

	.bb-mega__rail:has(.bb-mega__type:not(:first-child):is(:hover, :focus-within)) .bb-mega__type:first-child:not(:hover):not(:focus-within) > .bb-mega__pane {
		display: none;
	}

	.bb-nav .bb-mega__pane > .bb-mega__all {
		display: inline-block;
		margin-bottom: 20px;
		padding: 0 !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		color: var(--bb-orange);
	}

	.bb-mega__all:hover,
	.bb-mega__more a:hover {
		text-decoration: underline;
	}

	.bb-mega__brands {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
		gap: 28px 32px;
		align-content: start;
	}

	.bb-nav .bb-mega__brandlink {
		display: block;
		padding: 0 0 8px !important;
		margin-bottom: 8px;
		border-bottom: 2px solid #ececec;
		font-family: var(--bb-font-head);
		font-size: 19px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		color: var(--bb-text);
	}

	.bb-nav .bb-mega__brandlink:hover {
		color: var(--bb-orange);
		border-color: var(--bb-orange);
	}

	.bb-mega__series {
		display: block;
	}

	.bb-mega__series li + li {
		margin-top: 3px;
	}

	/* Each item gets its own left rule, so a wrapped name still reads as one item. */
	.bb-nav .bb-mega__series a {
		display: block;
		padding: 4px 0 4px 12px !important;
		border-left: 2px solid #ececec;
		font-family: var(--bb-font-head);
		font-size: 17px !important;
		font-weight: 400 !important;
		line-height: 1.25;
		letter-spacing: 0.01em;
		text-transform: none !important;
		color: #2b2b2d;
	}

	.bb-nav .bb-mega__series a:hover {
		color: var(--bb-orange);
		border-left-color: var(--bb-orange);
	}

	.bb-nav .bb-mega__more a {
		border-left-color: transparent;
		font-weight: 700 !important;
		color: var(--bb-orange);
	}

	.bb-mega__brand--plain {
		grid-column: 1 / -1;
	}

	.bb-mega__brand--plain > .bb-mega__series {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
		gap: 0 32px;
	}
}