/* Main navigation — Navigation template 2a (desktop) and 3a (mobile).
   Desktop: buttons 13.5 @600 .82, 44 high, padding 0 13, pill; open / current area: .1 fill, white; caret rotates.
   Panels: #0d0a3f, hairline .14 without top border, radius 0 0 24 24, shadow 0 30 60 -20 .75. Mega panels hang from
   the header bar (its containing block) between the gutters; small dropdowns (300 wide) from their button, top edge on
   the bar's bottom line. Entries: name 14 @700 (+ tag 10 uppercase orange), line 12.5/1.4 .68, padding 8/10, hover .07,
   current page orange tint .12. Products: 3 columns + free add-ons column 260 (.05 fill). Solutions: 4 tiles per row.
   Design Studio: 4 columns. Mobile and tablet (< 1180, while the six main items don't fit in one row, responsive spec
   §4.1): menu button 48, sheet below the header bar (#050134), accordion rows 58 high 18 @700, cells 44 high 14.5 @600
   (.04 fill; current .14 orange + 2px bar), Demo + Support pinned at the bottom. */

.bd-nav { display: flex; align-items: center; }
.bd-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bd-nav__item--small { position: relative; }
.bd-nav__btn {
	display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px; border: 0; border-radius: var(--bd-r-pill);
	background: transparent; color: rgba(255,255,255,.82); cursor: pointer; white-space: nowrap;
	font: 600 13.5px/1.2 var(--wp--preset--font-family--montserrat);
	transition: background-color 180ms ease-out, color 180ms ease-out;
}
.bd-nav__btn:hover { color: #f7f8f9; }
.bd-nav__item.is-open > .bd-nav__btn,
.bd-nav__list:not(:has(.is-open)) .bd-nav__btn.is-section { background: rgba(247,248,249,.1); color: #f7f8f9; }
.bd-nav__btn:focus-visible, .bd-nav__toggle:focus-visible { border-radius: var(--bd-r-pill); } /* the global ring sets radius 4 */
.bd-nav__caret { flex: none; opacity: .7; transition: transform 180ms ease-out; }
.bd-nav__item.is-open > .bd-nav__btn .bd-nav__caret { transform: rotate(180deg); }

/* Panels (hidden until open; without JS on hover / focus). */
.bd-nav__panel {
	display: none; position: absolute; z-index: 5; top: 100%; box-sizing: border-box; color: #f7f8f9;
	background: #0d0a3f; border: 1px solid rgba(247,248,249,.14); border-top: 0; border-radius: 0 0 var(--bd-r-card) var(--bd-r-card);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.75);
}
.bd-nav__item.is-open > .bd-nav__panel,
html:not(.js) .bd-nav__item:is(:hover, :focus-within) > .bd-nav__panel { display: block; animation: bd-nav-in 160ms ease-out; }
@keyframes bd-nav-in { from { opacity: 0; transform: translateY(-4px); } }
.bd-nav__panel--mega { left: var(--bd-gutter); right: var(--bd-gutter); padding: 26px 30px 28px; }
.bd-nav__panel--products { padding: 0; overflow: hidden; }
.bd-nav__item.is-open > .bd-nav__panel--products,
html:not(.js) .bd-nav__item:is(:hover, :focus-within) > .bd-nav__panel--products { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.bd-nav__panel--small { left: 0; top: calc(var(--bd-hbar, 76px) / 2 + 22px); width: 300px; padding: 10px 8px 12px; }

.bd-nav__col { padding: 26px 30px 28px; }
.bd-nav__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bd-nav__head .bd-kicker { margin: 0; }
.bd-nav__all { font: 700 13px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); white-space: nowrap; transition: color 180ms ease-out; }
.bd-nav__all:hover { color: #f7f8f9; }

.bd-nav__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; margin: 0; padding: 0; list-style: none; }
.bd-nav__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-nav__entry {
	display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--bd-r-sm);
	color: #f7f8f9; transition: background-color 180ms ease-out;
}
a.bd-nav__entry:hover { background: rgba(247,248,249,.07); color: #f7f8f9; }
.bd-nav__entry.is-current { background: rgba(250,154,66,.12); }
.bd-nav__name { display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; font: 700 14px/1.22 var(--wp--preset--font-family--montserrat); }
.bd-nav__tag { font: 600 10px/1.2 var(--wp--preset--font-family--montserrat); letter-spacing: .05em; text-transform: uppercase; color: var(--bd-sun); }
.bd-nav__line { font: 600 12.5px/1.4 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.68); }

/* Solutions: tiles, hover / current = the solution gradient. */
.bd-nav__grid--tiles { gap: 10px; }
.bd-nav__grid--tiles > li { display: flex; }
.bd-nav__tile { flex: 1; gap: 4px; margin: 0; padding: 14px 16px; background: rgba(247,248,249,.05); border: 1px solid rgba(247,248,249,.1); transition: background-color 180ms ease-out, border-color 180ms ease-out; }
.bd-nav__tile .bd-nav__name { font-size: 14.5px; }
a.bd-nav__tile:hover, .bd-nav__tile.is-current { background: linear-gradient(120deg, rgba(163,0,190,.34), rgba(250,154,66,.14)); border-color: rgba(247,248,249,.22); }

/* Products: free add-ons column. */
.bd-nav__side { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; background: rgba(247,248,249,.05); border-left: 1px solid rgba(247,248,249,.12); }
.bd-nav__side .bd-nav__side-kicker { margin: 0; color: rgba(247,248,249,.68); }
.bd-nav__side-text { margin: 0; font: 600 12.5px/1.45 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.68); }
.bd-nav__side-list { display: flex; flex-direction: column; margin: 2px 0 0; padding: 0; list-style: none; }
.bd-nav__side-list a { display: block; padding: 5px 0; font: 600 13px/1.25 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.82); transition: color 180ms ease-out; }
.bd-nav__side-list a:hover { color: var(--bd-sun); }
.bd-nav__side-all { margin-top: auto; padding-top: 12px; }

/* Small dropdowns. */
.bd-nav__small { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bd-nav__small .bd-nav__entry { margin: 0; padding: 10px 12px; }
.bd-nav__entry.is-soon { cursor: default; }

/* lg: tighter so the bar fits next to the actions. */
@media (max-width: 1279px) {
	.bd-nav__btn { padding: 0 9px; }
	.bd-nav__list { gap: 0; }
	.bd-nav__panel--products .bd-nav__col { padding-inline: 24px; }
	.bd-nav__panel--mega:not(.bd-nav__panel--products) { padding-inline: 24px; }
	.bd-nav__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mobile: account + cart icons (styles: header-actions), menu button + sheet ---------- */
.bd-nav__icons { display: none; align-items: center; }
.bd-nav__toggle { display: none; flex: none; width: 48px; height: 48px; margin-right: -12px; padding: 0; border: 0; border-radius: var(--bd-r-pill); background: transparent; color: #f7f8f9; cursor: pointer; align-items: center; justify-content: center; }
.bd-nav__toggle .bd-nav__close, .bd-nav__toggle[aria-expanded="true"] .bd-nav__burger { display: none; }
.bd-nav__toggle[aria-expanded="true"] .bd-nav__close { display: block; }
.bd-nav__sheet { display: none; }

@media (max-width: 1179px) {
	.bd-nav__main { display: none; }
	.bd-nav__icons, .bd-nav__toggle { display: flex; }
	.bd-nav__sheet {
		position: fixed; z-index: 3; left: 0; right: 0; top: var(--bd-sheet-top, 60px); bottom: 0;
		display: flex; flex-direction: column; background: var(--bd-ink); color: #f7f8f9;
	}
	.bd-nav__sheet[hidden] { display: none; }
}
.bd-nav__sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 6px var(--bd-gutter) 20px; }
.bd-nav__acc { margin: 0; padding: 0; list-style: none; }
.bd-nav__acc-item { border-bottom: 1px solid rgba(247,248,249,.12); }
.bd-nav__acc-btn {
	width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: #f7f8f9;
	font: 700 18px/1.2 var(--wp--preset--font-family--montserrat);
}
.bd-nav__acc-btn svg { flex: none; color: rgba(247,248,249,.68); transition: transform 200ms ease-out; }
.bd-nav__acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.bd-nav__acc-panel { display: flex; flex-direction: column; gap: 6px; padding: 0 0 18px; }
.bd-nav__acc-panel[hidden] { display: none; }
.bd-nav__cells { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bd-nav__cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-nav__cells > li { display: flex; }
.bd-nav__cell {
	flex: 1; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px;
	padding: 6px 12px; border-radius: var(--bd-r-sm); background: rgba(247,248,249,.04); color: rgba(247,248,249,.82);
	font: 600 14.5px/1.3 var(--wp--preset--font-family--montserrat); transition: background-color 180ms ease-out, color 180ms ease-out;
}
.bd-nav__cells--2 .bd-nav__cell { padding-inline: 10px; }
a.bd-nav__cell:hover { color: #f7f8f9; background: rgba(247,248,249,.08); }
.bd-nav__cell.is-current { color: #f7f8f9; background: rgba(250,154,66,.14); box-shadow: inset 2px 0 0 var(--bd-sun); }
.bd-nav__cell .bd-nav__tag { font-size: 9.5px; }
.bd-nav__addons {
	margin-top: 8px; min-height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 7px 16px; border-radius: var(--bd-r-sm); background: rgba(247,248,249,.06); border: 1px solid rgba(247,248,249,.12); color: #f7f8f9;
}
.bd-nav__addons:hover { color: #f7f8f9; background: rgba(247,248,249,.1); }
.bd-nav__addons-text { display: flex; flex-direction: column; gap: 1px; }
.bd-nav__addons-title { font: 700 14px/1.25 var(--wp--preset--font-family--montserrat); }
.bd-nav__addons-sub { font: 600 12px/1.3 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.68); }
.bd-nav__addons-arrow { font: 700 14px/1 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); }
.bd-nav__acc-all { align-self: flex-start; min-height: 44px; display: flex; align-items: center; gap: 4px; font: 700 14px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); }
.bd-nav__acc-all:hover { color: #f7f8f9; }
.bd-nav__sheet-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px var(--bd-gutter) max(30px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(247,248,249,.14); background: var(--wp--preset--color--ink-deep, #03012a); }
.bd-nav__sheet-demo { min-height: 50px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--bd-r-pill); color: #f7f8f9; font: 700 15px/1.2 var(--wp--preset--font-family--montserrat); transition: border-color 180ms ease-out, color 180ms ease-out; }
.bd-nav__sheet-demo:hover { border-color: var(--bd-sun); color: var(--bd-sun); }
.bd-nav__sheet-support { min-height: 44px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.82); font: 600 14px/1.2 var(--wp--preset--font-family--montserrat); }
.bd-nav__sheet-support:hover { color: var(--bd-sun); }