/* === F8: one container for the header, page content and footer ===
   Content is at most 1280 px wide, centred, with 20 px gutters below 1320 px: the box the theme's Beaver Builder rows
   give every page (1300 px rows, 10 px row padding, 10 px module margin). Backgrounds stay full width. From 768 px;
   phones keep their own spacing. --bbj-fixed-top (assets/layout.js) is the height fixed at the top of the window. */
:root { --bbj-container: 1280px; --bbj-gutter: 20px; }
html { scroll-padding-top: calc(var(--bbj-fixed-top, 0px) + 12px); }
/* SAFARI-QA S-1: the space of an always-on scrollbar stays reserved when the phone menu locks the page, so the header
   doesn't move sideways. F9: only while the menu is open and only when the page has such a scrollbar (mobile-menu.js
   adds the class), so a page too short to scroll shows no empty strip beside the header and footer. Overlay scrollbars
   (phones, macOS default) take no space either way. */
html.bbj-mm-gutter { scrollbar-gutter: stable; }

@media (min-width: 768px) {
  /* Header (Themer layout): logo row and delivery strip. Overrides the layout CSS's 24 px / 16 px side padding. */
  html body header.fl-builder-content[data-type="header"] > .fl-row > .fl-row-content-wrap { padding-left: var(--bbj-gutter) !important; padding-right: var(--bbj-gutter) !important; }
  html body header.fl-builder-content[data-type="header"] > .fl-row > .fl-row-content-wrap > .fl-row-content { max-width: var(--bbj-container) !important; margin-left: auto !important; margin-right: auto !important; }

  /* Footer (Themer layout 5273, G1-D module): 1240 px with 24 px padding before. */
  html body .bbf__grid { max-width: calc(var(--bbj-container) + 2 * var(--bbj-gutter)); padding-left: var(--bbj-gutter); padding-right: var(--bbj-gutter); }
  /* The bottom bar's orange rule spans the content width only, so it ends where the header and page content end. */
  html body .bbf__bar { max-width: none; padding-left: 0; padding-right: 0; margin-left: max(var(--bbj-gutter), calc((100% - var(--bbj-container)) / 2)); margin-right: max(var(--bbj-gutter), calc((100% - var(--bbj-container)) / 2)); }

  /* Car bar printed under the header on product, category, basket and checkout pages (assets/carbar.js). */
  html body .bbj-carbar-global__inner { max-width: calc(var(--bbj-container) + 2 * var(--bbj-gutter)); padding-left: var(--bbj-gutter); padding-right: var(--bbj-gutter); }

  /* Product pages (route, gallery, panel, details): 1200 px with 16 px padding before. */
  html body .bbj-pp, html body .bbj-pp__details { max-width: calc(var(--bbj-container) + 2 * var(--bbj-gutter)); padding-left: var(--bbj-gutter); padding-right: var(--bbj-gutter); }
  /* Builder rows placed inside the product page (tab content) line up with it: no row padding, outer module margins cancelled. */
  html body .bbj-pp .fl-row-content-wrap { padding-left: 0 !important; padding-right: 0 !important; }
  html body .bbj-pp .fl-row-content > .fl-col-group { margin-left: -10px; margin-right: -10px; }

  /* The journey inside a builder module (finder and results page): the module already sits on the container. */
  html body .fl-module > .bbj, html body .fl-module-content > .bbj, html body .fl-html > .bbj { max-width: none; padding-left: 0; padding-right: 0; }
  /* Landing pages: the white finder panel spans the module, level with the row's heading (it was 1200 px, centred). */
  html body .bbj-landing .bbj { max-width: none; }

  /* Vehicle category pages (BBJ_Category): the theme's Bootstrap container is 90 % wide with 15 px column padding. */
  html body .container.bbj-cat-wrap { width: auto; max-width: calc(var(--bbj-container) + 2 * var(--bbj-gutter)); padding-left: var(--bbj-gutter); padding-right: var(--bbj-gutter); }
  html body .bbj-cat-wrap > .row { margin-left: 0; margin-right: 0; }
  html body .bbj-cat-wrap > .row > .bbj-cat { padding-left: 0; padding-right: 0; }

  /* "Can't see your car?" enquiry block (saved row, G1-E class bb-enquiry): its modules have no side margin, so the
     column keeps the 10 px every other module has and the black panel ends at the container edge. */
  html body .fl-col.bb-enquiry > .fl-col-content { margin-left: 10px; margin-right: 10px; }

  /* Basket: the builder module is the container (1140 px before). */
  html body .bbj-basket, html body .bbj-basket.bbj-empty { max-width: none; }
}

/* Grey car bars inside the page (product page, results, category): the bar's background runs the full window width
   while its text keeps to the content edges. The shadow is clipped to the bar's height and adds no scroll width. */
html body .bbj-pp .bbj-pp__carbar, html body .bbj .bbj-carbar, html body .bbj-cat-carbar .bbj-carbar {
  margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; border-radius: 0;
  box-shadow: 0 0 0 100vmax #f2f2f2; clip-path: inset(0 -100vmax);
}
html body .bbj-pp__carbar > *, html body .bbj .bbj-carbar > * { min-width: 0; }

/* Empty basket (V2 p23 on wider screens, V5 p11 on phones): one centred column, buttons in the middle, trust row and
   delivery band across the container. The product photograph shows on phones only (V2 p23 has none). */
@media (min-width: 768px) {
  html body .bbj-empty { text-align: center; }
  html body .bbj-empty .bbj-basket__crumbs { justify-content: flex-start; text-align: left; }
  html body .bbj-empty .bbj-empty__photo { display: none; }
  html body .bbj-empty .bbj-empty__title { margin-top: 12px; }
  html body .bbj-empty .bbj-empty__intro { margin-bottom: 24px; }
  html body .bbj-empty .bbj-empty__actions { margin-left: auto; margin-right: auto; max-width: 420px; }
  html body .bbj-empty .bbj-empty__help { max-width: 640px; margin: 0 auto; }
  html body .bbj-empty .bbj-empty__more { position: static; left: auto; width: auto; transform: none; margin-top: 32px; text-align: left; }
}

/* Sticky panels and scroll targets clear everything fixed at the top (admin bar, header and delivery strip). */
html body .bbj .bbj-summary { top: calc(var(--bbj-fixed-top, var(--bbj-top, 0px)) + 16px); }
html body .bbj-stepbar { scroll-margin-top: calc(var(--bbj-fixed-top, 78px) + 12px); }
@media (min-width: 1024px) {
  html body .bbj-basket__side { top: calc(var(--bbj-fixed-top, 8px) + 16px); }
}
/* Phone menu opened down the page: the pinned header bar sits below a fixed admin bar (logged-in staff, 600-782 px). */
html body .fl-row.bbj-mm-pinned { top: var(--bbj-admin-top, 0px) !important; right: var(--bbj-mm-sb, 0px) !important; width: auto !important; }

/* F9: the car bar sits directly under the header and delivery strip, as on product and basket pages. Category pages:
   the theme's 40 px (20 px on phones) content margin goes when the journey has put its car bar first. Finder results
   and page-mode routes: the builder row's top padding, the module's top margin and the journey's own top padding go
   when the car bar opens the page's first row. Browsers without :has() keep the old spacing. */
html body .fl-content.bbj-cat:has(> .bbj-cat-carbar:first-child) { margin-top: 0; }
html body .fl-builder-content > .fl-row:first-child:has(#bbj-app.bbj--page > .bbj-carbar:first-child) > .fl-row-content-wrap { padding-top: 0; }
html body .fl-builder-content > .fl-row:first-child .fl-module:has(> #bbj-app.bbj--page > .bbj-carbar:first-child) { margin-top: 0; }
html body .fl-builder-content > .fl-row:first-child #bbj-app.bbj--page:has(> .bbj-carbar:first-child) { padding-top: 0; }