.wakoo-menu { --wakoo-accent: #6C5CE7; position: relative; }
.wakoo-menu__notice { color: #9a9ab0; font-size: 14px; }
.wakoo-menu ul { list-style: none; margin: 0; padding: 0; }
.wakoo-menu a { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 6px; }

/* ---- horizontal ---- */
.wakoo-menu--horizontal .wakoo-menu__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wakoo-menu--horizontal .wakoo-menu__item { position: relative; }
.wakoo-menu--horizontal .wakoo-menu__item > a { padding: 12px 14px; font-weight: 600; border-radius: 6px; }
.wakoo-menu--horizontal .wakoo-menu__item > a:hover { color: var(--wakoo-accent); }
.wakoo-menu__caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }

/* dropdown */
.wakoo-menu--horizontal .wakoo-menu__sub {
	position: absolute; top: 100%; left: 0; min-width: 210px;
	background: #fff; border-radius: 10px; padding: 8px;
	box-shadow: 0 16px 40px rgba(0,0,0,.14);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: .18s ease; z-index: 50;
}
.wakoo-menu--horizontal .wakoo-menu__item:hover > .wakoo-menu__sub,
.wakoo-menu--horizontal .wakoo-menu__item.is-open > .wakoo-menu__sub {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.wakoo-menu__sub .wakoo-menu__item > a { padding: 9px 12px; border-radius: 6px; color: #1a1a2e; }
.wakoo-menu__sub .wakoo-menu__item > a:hover { background: #f3f2fb; color: var(--wakoo-accent); }

/* mega */
.wakoo-menu__item.is-mega { position: static; }
.wakoo-menu__mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-radius: 12px; padding: 20px;
	box-shadow: 0 20px 50px rgba(0,0,0,.16);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: .18s ease; z-index: 50;
}
.wakoo-menu__item.is-mega:hover > .wakoo-menu__mega,
.wakoo-menu__item.is-mega.is-open > .wakoo-menu__mega { opacity: 1; visibility: visible; transform: translateY(0); }
.wakoo-menu__mega-inner > .wakoo-menu__sub { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 8px 24px; box-shadow: none; padding: 0; opacity: 1; visibility: visible; transform: none; }

/* burger (mobile) */
.wakoo-menu__burger { display: none; width: 44px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.wakoo-menu__burger i, .wakoo-menu__burger i::before, .wakoo-menu__burger i::after {
	content: ''; display: block; width: 24px; height: 2px; background: currentColor; position: relative; margin: 0 auto;
}
.wakoo-menu__burger i::before { position: absolute; top: -7px; }
.wakoo-menu__burger i::after { position: absolute; top: 7px; }

@media (max-width: 1024px) {
	.wakoo-menu--horizontal.is-collapsible .wakoo-menu__burger { display: block; }
	.wakoo-menu--horizontal.is-collapsible .wakoo-menu__list { display: none; flex-direction: column; align-items: stretch; }
	.wakoo-menu--horizontal.is-collapsible.is-open .wakoo-menu__list { display: flex; }
	.wakoo-menu--horizontal.is-collapsible .wakoo-menu__sub,
	.wakoo-menu--horizontal.is-collapsible .wakoo-menu__mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; }
	.wakoo-menu--horizontal.is-collapsible .wakoo-menu__item.is-open > .wakoo-menu__sub,
	.wakoo-menu--horizontal.is-collapsible .wakoo-menu__item.is-open > .wakoo-menu__mega { display: block; }
}

/* ---- off-canvas ---- */
.wakoo-oc__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; background: transparent; font-size: 15px; font-weight: 600; cursor: pointer; }
.wakoo-oc__bars { width: 22px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.wakoo-oc__bars::before, .wakoo-oc__bars::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.wakoo-oc__bars::before { top: -7px; } .wakoo-oc__bars::after { top: 7px; }
.wakoo-oc__overlay { position: fixed; inset: 0; background: rgba(10,12,24,.5); opacity: 0; visibility: hidden; transition: .25s; z-index: 99998; }
.wakoo-oc__panel {
	position: fixed; top: 0; left: 0; height: 100%; width: min(320px, 85vw);
	background: #fff; z-index: 99999; padding: 56px 18px 18px;
	transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto;
	box-shadow: 0 0 60px rgba(0,0,0,.25);
}
.wakoo-oc.is-open .wakoo-oc__panel { transform: translateX(0); }
.wakoo-oc.is-open .wakoo-oc__overlay { opacity: 1; visibility: visible; }
.wakoo-oc__close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #333; }
.wakoo-menu--vertical ul { display: block; }
.wakoo-menu--vertical .wakoo-menu__item > a { padding: 11px 8px; border-radius: 6px; color: #1a1a2e; font-weight: 600; justify-content: space-between; }
.wakoo-menu--vertical .wakoo-menu__sub { display: none; padding-left: 14px; }
.wakoo-menu--vertical .wakoo-menu__item.is-open > .wakoo-menu__sub { display: block; }