/* Boot Buddy Journey: phone menu (V2 page 10). 850 px = Max Mega Menu's mobile breakpoint (also in mobile-menu.js). */
.bbj-mm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Toggle, inside the header's phone/basket list. Hidden on desktop, where the full menu shows. */
html body header #topcontacts li.bbj-mm-li,
html body li.bbj-mm-li { display: none !important; }
.bbj-mm-toggle,
.bbj-mm-toggle:hover,
.bbj-mm-toggle:focus {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0; padding: 0;
  background: transparent !important; border: 0 !important; border-radius: 4px; box-shadow: none !important;
  color: #fff !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bbj-mm-toggle:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; }
.bbj-mm-toggle__bars { position: relative; display: block; width: 26px; height: 20px; }
.bbj-mm-toggle__bars span,
.bbj-mm-toggle__bars span::before,
.bbj-mm-toggle__bars span::after {
  position: absolute; left: 0; display: block; width: 26px; height: 3px; border-radius: 2px; background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.bbj-mm-toggle__bars span { top: 8.5px; }
.bbj-mm-toggle__bars span::before,
.bbj-mm-toggle__bars span::after { content: ""; }
.bbj-mm-toggle__bars span::before { top: -8.5px; }
.bbj-mm-toggle__bars span::after { top: 8.5px; }
.bbj-mm-toggle.is-open .bbj-mm-toggle__bars span { background: transparent; }
.bbj-mm-toggle.is-open .bbj-mm-toggle__bars span::before { top: 0; transform: rotate(45deg); }
.bbj-mm-toggle.is-open .bbj-mm-toggle__bars span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 850px) {
  html body header #topcontacts li.bbj-mm-li,
  html body li.bbj-mm-li { display: block !important; flex-shrink: 0; margin: 0 -6px 0 0; }
  /* Max Mega Menu's phone toggle and panel give way to this menu while its toggle is on the page. */
  html.bbj-mm-on header #mega-menu-wrap-header { display: none !important; }
  header:has(.bbj-mm-toggle) #mega-menu-wrap-header { display: none !important; }
  header:has(.bbj-mm-toggle) .fl-col:has(#mega-menu-wrap-header) { display: none !important; }
}

/* Panel: opens from the right below the header bar, so the shield, phone number, basket and close button stay put. */
html.bbj-mm-locked { overflow: hidden; }
/* F7 (VERIFY-1 L2): opened further down the page, the header bar is held at the top of the window while the menu is
   open (a spacer keeps its place), so the page doesn't jump to the top. */
.fl-row.bbj-mm-pinned { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99991 !important; }
.bbj-mm { position: fixed; top: var(--bbj-mm-top, 0px); right: 0; bottom: 0; left: 0; z-index: 99990; font-size: 16px; line-height: 1.3; }
.bbj-mm[hidden] { display: none; }
.bbj-mm *, .bbj-mm *::before, .bbj-mm *::after { box-sizing: border-box; }
.bbj-mm__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.2s ease; }
.bbj-mm__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(74vw, 340px);
  padding: 12px 16px 28px; overflow-y: auto; overscroll-behavior: contain;
  background: #17181a; color: #fff; transform: translateX(100%); transition: transform 0.2s ease;
}
.bbj-mm.is-open .bbj-mm__scrim { opacity: 1; }
.bbj-mm.is-open .bbj-mm__panel { transform: none; }
.bbj-mm__list { margin: 0; padding: 0; list-style: none; }
.bbj-mm__list li { margin: 0; padding: 0; list-style: none; }
.bbj-mm__list li::before { display: none; }
.bbj-mm__cta,
.bbj-mm__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none !important; }
.bbj-mm__cta {
  margin: 0 0 8px; padding: 12px 16px; border-radius: 3px;
  background: #e94c00; color: #fff !important; font-size: 19px; font-weight: 700; line-height: 1.2;
  transition: background-color 0.15s ease;
}
.bbj-mm__cta:hover,
.bbj-mm__cta:focus-visible { background: #c43f00; }
.bbj-mm__link {
  padding: 10px 2px 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff !important; font-size: 17px; font-weight: 600;
}
.bbj-mm__list li:last-child .bbj-mm__link { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.bbj-mm__link strong { font-weight: 700; }
.bbj-mm__link:hover span,
.bbj-mm__link:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.bbj-mm__chev { flex: 0 0 auto; color: currentColor; transition: transform 0.15s ease; }
.bbj-mm__cta:hover .bbj-mm__chev,
.bbj-mm__link:hover .bbj-mm__chev { transform: translateX(2px); }
.bbj-mm a:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; }
/* F7 (VERIFY-1 M1): the orange "Find your car" row gets a white ring (white on orange ≈ 3.8:1, on the panel ≈ 17:1). */
.bbj-mm a.bbj-mm__cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bbj-mm__car { padding: 16px 0 0; }
.bbj-mm__car[hidden] { display: none; }
.bbj-mm__car-name { margin: 0 0 4px; color: #fff; font-size: 16px; font-weight: 600; }
.bbj-mm__change { color: #ff8a3d !important; font-size: 16px; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.bbj-mm__change:hover { color: #fff !important; }

@media (min-width: 851px) {
  .bbj-mm { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bbj-mm__scrim, .bbj-mm__panel, .bbj-mm-toggle__bars span, .bbj-mm-toggle__bars span::before, .bbj-mm-toggle__bars span::after { transition: none; }
}

/* === G1: floating controls (V2 p22, p25: nothing floating may cover the buying buttons on a phone) === */
/* The theme's "Scroll To Top" button (bottom centre) sat on the phone's sticky "Continue" bar and, at 1440 px, on the
   route's option cards. It is hidden on product, journey, basket and checkout pages at every width (the footer has its
   own "Back to top" link) and moved to the bottom-right corner everywhere else. */
body.single-product #fl-to-top,
body.woocommerce-cart #fl-to-top,
body.woocommerce-checkout #fl-to-top { display: none !important; }
body:has(#bbj-app) #fl-to-top { display: none !important; }
/* F7 (VERIFY-1 L3): wherever the new footer has its own "Back to top" link, the theme's floating copy is not shown,
   so the two never sit on top of each other (seen at 1024 px). */
body:has(.bbf__pill[href="#top"]) #fl-to-top { display: none !important; }
html body #fl-to-top { left: auto !important; right: 20px !important; margin-left: 0 !important; }
/* Superchat's launcher and CookieYes's "revisit consent" button are fixed to the bottom of the screen on live (neither
   loads on staging). While the journey's sticky bar is on the page they sit above it. The CookieYes consent box itself
   is never moved or hidden; it closes once a choice is made. Selectors checked on live 6 Oct 2026; the lift is
   unverified on live until release. */
@media (max-width: 640px) {
  body:has(.bbj .bbj-nav) #superchat-widget-content-root { bottom: var(--bbj-float-lift, 110px) !important; }
  body:has(.bbj .bbj-nav) .cky-btn-revisit-wrapper { bottom: calc(var(--bbj-float-lift, 110px) + 8px) !important; }
}