/* ========================================================================== _clone-shim.css — extracted verbatim from customV1.css:2553-2666 ========================================================================== PROVENANCE — read before changing anything here. These rules are NOT part of the original B2B Store site's CSS. They were hand-written by whoever produced the static snapshot in `referance/`, to stand in for a Vue mobile-navigation component the snapshot lost. They are kept because the port's target is *the reference as it renders*, not the original live site. Delete them and every viewport below 1100px stops matching, because master.css:9987 hides `.bs-headermenu-outer` outright down there and nothing else brings it back. Behaviour is driven by `useMobileNav()` (app/composables/useMobileNav.ts), which replaces the snapshot's assets/js/site.js. The class contract is: .bs-mobile-nav-open on .bs-headermenu-outer — panel is open .bs-menu-active on a .bs-main-menu-title — that submenu is expanded .bs-mobile-nav-lock on — page scroll is locked The original authors' comments are preserved verbatim below. ========================================================================== */ /* ========================================================================== Offline static clone additions The live site's mobile drill-down nav is rendered client-side by a Vue component that isn't present in the server-rendered HTML this clone is built from. These rules make the existing header markup (already shared with the desktop hover dropdowns) work as a full-screen mobile panel, toggled by assets/js/site.js. ========================================================================== */ @media (max-width: 1100px) { /* master.css hides .bs-headermenu-outer entirely below 1100px in favour of a client-rendered `.bs-sm-outer` mobile header that only exists at runtime on the live site (never present in the server-rendered HTML this clone is built from). Keep the real header visible instead. */ .bs-headermenu-outer { display: block !important; } } @media (max-width: 991px) { .bs-headermenu-outer .bs-main-menu-outer { flex-wrap: nowrap; } .bs-headermenu-outer .bs-main-menu-outer > .bs-main-menu:not(.bs-menu-logo-outer) { display: none; } .bs-headermenu-outer .bs-mobile-menu-btn { display: block; margin-inline-start: auto; } .bs-headermenu-outer.bs-mobile-nav-open { position: fixed; inset: 0; overflow-y: auto; z-index: 999; } .bs-headermenu-outer.bs-mobile-nav-open .bs-main-menu-outer { flex-wrap: wrap; height: auto; } .bs-headermenu-outer.bs-mobile-nav-open .bs-main-menu-outer > .bs-main-menu:not(.bs-menu-logo-outer) { display: block; width: 100%; border-bottom: 1px solid #eee; } .bs-headermenu-outer.bs-mobile-nav-open .bs-main-menu-outer > .bs-menu-logo-outer { display: block; width: 100%; padding: var(--gap); border-bottom: 1px solid #eee; } /* `.bs-headermenu-outer .bs-logo { height: 100% }` (master.css) normally resolves against the fixed 50/64px header row; once that row becomes an auto-height wrapped panel the percentage has nothing sane to resolve against and the logo balloons. Pin it back down. */ .bs-headermenu-outer.bs-mobile-nav-open .bs-logo { height: 44px !important; min-width: unset !important; padding: 0 !important; } .bs-headermenu-outer.bs-mobile-nav-open .bs-main-menu-title { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gap); width: 100%; } .bs-headermenu-outer.bs-mobile-nav-open .bs-main-menu-title:after { font-family: FontAwesome; content: "\f107"; } .bs-headermenu-outer.bs-mobile-nav-open .bs-main-menu-title.bs-menu-active:after { content: "\f106"; } /* The desktop hover style (customV1.css) keeps `.bs-sub-menu-outer` at `display:flex` at all times and only reveals it via `visibility` + `opacity` on `:hover` - properties the `.bs-menu-active` !important rule above doesn't touch. Take full, explicit control of all three inside the mobile panel instead of fighting that cascade. */ .bs-headermenu-outer.bs-mobile-nav-open .bs-sub-menu-outer { display: none !important; position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; padding: 0 0 10px calc(2 * var(--gap)); width: 100%; max-width: 100%; } .bs-headermenu-outer.bs-mobile-nav-open .bs-main-menu-title.bs-menu-active + .bs-sub-menu-outer { display: flex !important; flex-wrap: wrap; } .bs-headermenu-outer.bs-mobile-nav-open .bs-sub-menu { width: 100%; } } body.bs-mobile-nav-lock { overflow: hidden; }