/* Step I navigation: desktop dropdowns, drawer accordions, bottom-bar badge.
   Loaded after style.css; uses its tokens (--purple, --border, --bg, --grey,
   --pink, --r-sm, --shadow-lg, --ease). Existing .menu/.mobile-drawer/.mobile-nav
   rules are left untouched. */
.nav-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Desktop: dropdown triggers look like the existing menu links */
.menu>li{position:relative}
.menu>li>.menu-trigger{display:flex;align-items:center;gap:5px;padding:16px 13px;font:inherit;font-size:14px;font-weight:500;color:#374151;background:none;border:0;cursor:pointer;position:relative;transition:color .25s}
.menu>li>.menu-trigger:hover,.menu>li.open>.menu-trigger{color:var(--purple)}
.menu>li>.menu-trigger::after{content:"";position:absolute;bottom:10px;left:13px;right:13px;height:2px;background:var(--purple);transform:scaleX(0);transition:transform .25s var(--ease)}
.menu>li>.menu-trigger:hover::after,.menu>li.active>.menu-trigger::after{transform:scaleX(1)}
.menu-trigger .caret{transition:transform .2s}
.menu>li.open>.menu-trigger .caret{transform:rotate(180deg)}
.menu a:focus-visible,.menu-trigger:focus-visible,.drawer-toggle:focus-visible,.mobile-drawer a:focus-visible,.mobile-nav a:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:6px}

.dropdown{display:none;position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:8px;z-index:200}
.menu>li.open>.dropdown{display:block}
html:not(.nav-js) .menu>li:hover>.dropdown,
html:not(.nav-js) .menu>li:focus-within>.dropdown{display:block}
.menu>li:last-child>.dropdown{left:auto;right:0}
.dropdown ul{display:block}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:#374151;white-space:nowrap}
.dropdown a:hover,.dropdown a[aria-current="page"]{background:var(--bg);color:var(--purple)}
.dropdown .dd-all{font-weight:600;color:var(--purple)}
.dropdown .dd-heading{margin:6px 12px 2px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}

/* Mobile drawer accordions */
.drawer-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:14px 0;border:0;border-bottom:1px solid var(--border);background:none;font:inherit;font-weight:600;font-size:16px;color:inherit;cursor:pointer;text-align:left}
.drawer-toggle .caret{transition:transform .2s}
.drawer-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mobile-drawer .drawer-sub{margin-top:0;padding:0 0 6px 14px}
.mobile-drawer .drawer-sub[hidden]{display:none}
.mobile-drawer .drawer-sub li a{padding:11px 0;font-weight:500;font-size:15px}
.mobile-drawer .drawer-subhead{padding:12px 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.mobile-drawer a[aria-current="page"]{color:var(--purple)}

/* Bottom bar basket badge */
.mobile-nav a{position:relative}
.mobile-nav .mn-badge{position:absolute;top:-4px;left:calc(50% + 4px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pink);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}

@media (prefers-reduced-motion:reduce){.menu-trigger .caret,.drawer-toggle .caret,.menu>li>.menu-trigger::after{transition:none}}