/* BWA Accessible Mega Menu */

/* Brand wiring. Each role resolves into a distinct local var (--amm-*) so there
   is NO self-reference cycle. Resolution order:
   1. recolor token (--bg/--text/--accent/...) injected by the stan AI Assist
      agent on this root class — wins when an editor recolors.
   2. inherited --bwa-accessible-mega-menu-* emitted at :root by
      BrandCorpusController from this plugin's manifest brandInheritance (folder
      slug = "accessible-mega-menu") — the live BrandCorpus value.
   3. the literal fallback — the module's original default.
   The dropdown panels, mobile drawer list, and overlay all render as
   descendants of .bwa-mega-menu (the JS appends the overlay to the nav), so the
   root class alone is enough to define these vars. */
.bwa-mega-menu {
    --amm-bg:         var(--bg,         var(--bwa-accessible-mega-menu-bg, #ffffff));
    /* Card fill. NOT --amm-bg: bg-1 is the page's own white, so a card mapped to it vanishes
       on a white section. Prefer bg-2, then the derived tint, then the original bg. */
    --amm-panel: var(--panel, var(--bwa-color-bg-2, var(--amm-surface-2, var(--amm-bg))));
    --amm-text:       var(--text,       var(--bwa-accessible-mega-menu-text, #333333));
    --amm-accent:     var(--accent,     var(--bwa-accessible-mega-menu-accent, #1a73e8));
    --amm-link:       var(--link,       var(--bwa-accessible-mega-menu-link, var(--amm-accent)));
    --amm-link-hover: var(--link-hover, var(--bwa-accessible-mega-menu-link-hover, color-mix(in srgb, var(--amm-accent) 82%, #000)));
    --amm-accent-ink: #ffffff;
    --amm-muted:      color-mix(in srgb, var(--amm-text) 62%, transparent);
    --amm-faint:      color-mix(in srgb, var(--amm-text) 45%, transparent);
    --amm-border:     color-mix(in srgb, var(--amm-text) 14%, transparent);
    --amm-surface-2:  color-mix(in srgb, var(--amm-text) 6%, var(--amm-bg));
}

.bwa-mega-menu {
    position: relative;
    /* The brand's body face when a corpus defines one; otherwise whatever the host bar uses.
       Not a bare inherit: a rich-text editor's wrapping span (monospace, say) must not restyle
       the site's navigation. */
    font-family: var(--bwa-font-body, inherit);
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
    z-index: 9998;
}

.bwa-mega-menu *,
.bwa-mega-menu *::before,
.bwa-mega-menu *::after {
    box-sizing: border-box;
}

/* ---- Hamburger (mobile only) ---- */
.bwa-mega-menu__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: var(--bwa-border-width, 1px) solid var(--amm-border);
    border-radius: var(--bwa-radius-sm, 4px);
    padding: 10px 12px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    transition: background-color 0.2s ease;
}

.bwa-mega-menu__hamburger:hover {
    background-color: var(--amm-surface-2);
}

.bwa-mega-menu__hamburger:focus-visible {
    outline: 2px solid var(--amm-accent);
    outline-offset: 2px;
}

.bwa-mega-menu__hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--amm-text);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.bwa-mega-menu__hamburger[aria-expanded="true"] .bwa-mega-menu__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.bwa-mega-menu__hamburger[aria-expanded="true"] .bwa-mega-menu__hamburger-line:nth-child(2) {
    opacity: 0;
}

.bwa-mega-menu__hamburger[aria-expanded="true"] .bwa-mega-menu__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Menubar (top-level list) ---- */
.bwa-mega-menu__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* ---- Top-level items ---- */
.bwa-mega-menu__item {
    position: relative;
}

.bwa-mega-menu__link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* The widget's own link LOOK - not for a SKINNED menu, whose top links wear the host header's own
   nav-item classes (MegaMenuRenderer.RenderWidget with a link class): those classes are the look
   there, and these rules would outrank them. :where() keeps each rule's original specificity. */
:where(.bwa-mega-menu:not(.bwa-mega-menu--skinned)) .bwa-mega-menu__link {
    padding: 12px 16px;
    color: var(--amm-text);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
    background: none;
}

:where(.bwa-mega-menu:not(.bwa-mega-menu--skinned)) .bwa-mega-menu__link:hover,
:where(.bwa-mega-menu:not(.bwa-mega-menu--skinned)) .bwa-mega-menu__link:focus {
    background-color: var(--amm-surface-2);
    color: var(--amm-accent);
}

/* The host's chevron sizes itself. Two classes, so it holds against .bwa-mega-menu__arrow's 14px box,
   which comes later in this file - that box squeezed the design's 14px chevron and its margin to 8px. */
.bwa-mega-menu__arrow.bwa-mega-menu__arrow--host {
    width: auto;
    height: auto;
    margin-left: 0;
}

.bwa-mega-menu__link:focus-visible {
    outline: 2px solid var(--amm-accent);
    outline-offset: -2px;
}

/* ---- Dropdown arrow ---- */
/* A chevron icon (MegaMenuRenderer.ChevronSvg), not a border triangle: the cue a header design
   draws. This box sizes it; its stroke follows the link's colour. */
.bwa-mega-menu__arrow {
    display: inline-flex;
    flex: none;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    margin-left: 2px;
}

.bwa-mega-menu__arrow svg {
    width: 100%;
    height: 100%;
}

.bwa-mega-menu__link[aria-expanded="true"] .bwa-mega-menu__arrow {
    transform: rotate(180deg);
}

/* ---- Dropdown panel ---- */
.bwa-mega-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background-color: var(--amm-panel);
    border: var(--bwa-border-width, 1px) solid var(--amm-border);
    border-radius: 0 0 4px 4px;
    box-shadow: var(--bwa-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
    padding: 16px 20px;
    z-index: 9999;
    display: none;
}

/* Animation: Fade */
.bwa-mega-menu[data-animation="fade"] .bwa-mega-menu__panel {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bwa-mega-menu[data-animation="fade"] .bwa-mega-menu__panel--open {
    display: block;
    opacity: 1;
}

/* Animation: Slide */
.bwa-mega-menu[data-animation="slide"] .bwa-mega-menu__panel {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bwa-mega-menu[data-animation="slide"] .bwa-mega-menu__panel--open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Animation: None */
.bwa-mega-menu[data-animation="none"] .bwa-mega-menu__panel--open {
    display: block;
}

/* ---- Submenu (column layout) ---- */
.bwa-mega-menu__submenu {
    display: grid;
    grid-template-columns: repeat(var(--bwa-mm-columns, 4), 1fr);
    gap: var(--bwa-space-1, 4px) var(--bwa-space-4, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bwa-mega-menu__subitem {
    min-width: 0;
}

.bwa-mega-menu__sublink {
    display: block;
    padding: 8px 12px;
    color: var(--amm-text);
    text-decoration: none;
    border-radius: var(--bwa-radius-sm, 4px);
    transition: background-color 0.15s ease, color 0.15s ease;
    font-size: 14px;
}

.bwa-mega-menu__sublink:hover {
    background-color: var(--amm-surface-2);
    color: var(--amm-accent);
}

.bwa-mega-menu__sublink:focus-visible {
    outline: 2px solid var(--amm-accent);
    outline-offset: -2px;
    border-radius: var(--bwa-radius-sm, 4px);
}

.bwa-mega-menu__sublink-title {
    display: block;
    font-weight: 500;
}

.bwa-mega-menu__sublink-desc {
    display: block;
    font-size: 12px;
    color: var(--amm-muted);
    margin-top: 2px;
    line-height: 1.3;
}

/* ---- Mobile overlay ---- */
.bwa-mega-menu__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9997;
}

.bwa-mega-menu__overlay--visible {
    display: block;
}

/* ---- Mobile styles ---- */
.bwa-mega-menu--mobile .bwa-mega-menu__hamburger {
    display: flex;
}

.bwa-mega-menu--mobile .bwa-mega-menu__list {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    background-color: var(--amm-bg);
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0;
    box-shadow: var(--bwa-shadow-md, 2px 0 12px rgba(0, 0, 0, 0.2));
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.bwa-mega-menu--mobile .bwa-mega-menu__list--open {
    display: flex;
    transform: translateX(0);
}

.bwa-mega-menu--mobile .bwa-mega-menu__item {
    border-bottom: var(--bwa-border-width, 1px) solid var(--amm-border);
}

.bwa-mega-menu--mobile .bwa-mega-menu__link {
    padding: 14px 20px;
    width: 100%;
    justify-content: space-between;
}

.bwa-mega-menu--mobile .bwa-mega-menu__panel {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 8px 16px;
    background-color: var(--amm-surface-2);
}

.bwa-mega-menu--mobile .bwa-mega-menu__panel--open {
    display: block;
    opacity: 1;
    transform: none;
}

.bwa-mega-menu--mobile .bwa-mega-menu__submenu {
    grid-template-columns: 1fr;
    gap: 0;
}

.bwa-mega-menu--mobile .bwa-mega-menu__sublink {
    padding: 10px 20px;
    border-radius: 0;
}

.bwa-mega-menu--mobile .bwa-mega-menu__arrow {
    width: 16px;
    height: 16px;
}

/* ================================================================
   v2 — header chrome (Chrome/Navbar.ascx). Everything below is driven by
   the CMS navigation tree and each page's Menu Settings; see README.txt.
   ================================================================ */

/* ---- Bar layout: brand | menubar (desktop) / brand | hamburger (mobile) ---- */
.bwa-mega-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.bwa-mega-menu__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    padding: 8px 0;
    color: var(--amm-text);
    text-decoration: none;
    font-weight: 600;
}

.bwa-mega-menu__brand img {
    display: block;
    max-height: 48px;
    width: auto;
}

/* ---- Mega panel (page has Rich Nav + Disable Navigation): full bar width ----
   The item stops being the containing block, so the panel spans .bwa-mega-menu,
   which is position:relative above. */
.bwa-mega-menu__item--mega {
    position: static;
}

.bwa-mega-menu__panel--mega {
    left: 0;
    right: 0;
    min-width: 0;
}

/* Rich Nav content: the first row of a mega panel. */
.bwa-mega-menu__rich {
    margin-bottom: 12px;
}

.bwa-mega-menu__rich:empty {
    display: none;
}

/* Rich Nav content is hand-authored HTML, usually lifted from a page where it sat inside a
   narrow card. Dropped into a full-bar mega panel it has no constraining container, so its
   images render at natural size - measured 441x442 on this site, giving 787px of content
   inside a 648px panel. Cap the image box here rather than editing the authored HTML, which
   belongs to the author and would be overwritten on the next edit.
   Bootstrap itself is fine and active; this is purely a container-width mismatch. */
.bwa-mega-menu__rich img {
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The authored markup carries CONFLICTING Bootstrap column classes on the same element
   (e.g. `col-lg-7 col-lg-12`); col-lg-12 wins, so a card column the design sized for a
   narrow dropdown stretches the full 1398px bar and its cards stretch with it. The
   design's own card CSS in BWA/css/custom.css (.megasubMenu li a .subMenuMains -
   display:flex, gap:16px, padding:15px 14px) is correct and ships fine; it just needs a
   sane column width to work in. Lay the cards out as a responsive grid and neutralise the
   Bootstrap widths on the items, rather than editing the authored HTML. */
.bwa-mega-menu__rich .megasubMenu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 24px;
    align-content: start;
}

.bwa-mega-menu__rich .megasubMenu > li {
    width: auto;
    max-width: none;
    flex: none;
}

/* BWA/css/custom.css sizes the card thumbnail with `aspect-ratio: 1/1; height: 100%`, which
   works in the narrow card the design drew but turns into a 398px square when the card sits in
   a full-bar mega panel - a 296x180 image floating in a mostly empty box. Let the container
   hug its image here; the rule is untouched everywhere else on the site. */
.bwa-mega-menu__rich .header-img-container {
    aspect-ratio: auto;
    height: auto;
    padding: 14px 10px;
}

/* A column heading (the design's bare <li> with no card inside) should span the row rather
   than consume a whole grid column and leave a gap beside it. */
.bwa-mega-menu__rich .megasubMenu > li:not(:has(.subMenuMains)) {
    grid-column: 1 / -1;
}

/* Cards sit in a grid, so their thumbnails must share one height or the titles below them
   stagger (the design's images are not a uniform aspect ratio). */
.bwa-mega-menu__rich .header-img-container {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bwa-mega-menu__rich .header-img-container img {
    max-height: 120px;
}

/* When an author has written Rich Nav content for a mega page, THAT content is the panel - it
   already lays out the links as designed cards. The auto-generated child-page column list
   underneath is then a duplicate, and on pages whose only menu-visible child is the hidden
   "<Section>MegaMenu" carrier page it renders that carrier's name as a stray heading
   ("PRODUCTMEGAMENU"). Suppress the generated list only on panels that actually have authored
   content; panels without it keep the generated columns exactly as before.
   Scoped to .bwa-site-header (the BWA Website chrome) because that duplicate pairing is that
   site's authoring pattern: elsewhere a page may legitimately want its Rich Nav banner ABOVE
   its generated child columns, and this one shared stylesheet must not take that away. */
.bwa-site-header .bwa-mega-menu__panel--mega:has(.bwa-mega-menu__rich:not(:empty)) .bwa-mega-menu__submenu {
    display: none;
}

/* ---- Plain dropdown (no Rich Nav + Disable Navigation pair): one column ---- */
.bwa-mega-menu__panel--simple .bwa-mega-menu__submenu {
    grid-template-columns: 1fr;
}

/* Its third level nests under its parent, indented under a quiet rule - the drawer's section
   shape - instead of reading as more of the same list. */
.bwa-mega-menu__panel--simple .bwa-mega-menu__subitem > .bwa-mega-menu__col-list {
    margin: 2px 0 6px 12px;
    padding-left: 10px;
    border-left: 2px solid var(--amm-border);
}

/* ---- Column layout: level 2 heading, level 3 items, level 4 sub-items ---- */
.bwa-mega-menu__col-list,
.bwa-mega-menu__col-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bwa-mega-menu__col-sub {
    margin-left: 12px;
    border-left: 2px solid var(--amm-border);
}

.bwa-mega-menu__sublink--heading {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--amm-muted);
}

.bwa-mega-menu__sublink--sub {
    font-size: 13px;
    color: var(--amm-muted);
}

/* Disable Navigation on a child page: a focusable menu item, not a link. */
.bwa-mega-menu__sublink--static {
    cursor: default;
}

.bwa-mega-menu__sublink--static:hover {
    background: none;
    color: var(--amm-text);
}

/* ---- Add Menu Separator ---- */
.bwa-mega-menu__separator {
    width: 1px;
    align-self: stretch;
    margin: 8px 4px;
    background-color: var(--amm-border);
}

.bwa-mega-menu__col-list > .bwa-mega-menu__separator,
.bwa-mega-menu__col-sub > .bwa-mega-menu__separator,
.bwa-mega-menu__panel--simple .bwa-mega-menu__separator {
    width: auto;
    height: 1px;
    margin: 4px 8px;
}

/* ---- Hide on Small Screen: once the JS flips the bar into hamburger mode ---- */
.bwa-mega-menu--mobile .bwa-mega-menu__item--hide-mobile,
.bwa-mega-menu--mobile .bwa-mega-menu__subitem--hide-mobile,
.bwa-mega-menu--mobile .bwa-mega-menu__separator {
    display: none;
}

.bwa-mega-menu--mobile .bwa-mega-menu__rich {
    padding: 0 20px;
}

.bwa-mega-menu--mobile .bwa-mega-menu__col-sub {
    margin-left: 20px;
}

/* ================================================================
   v2.1 — configured panels: live facet columns with counts, page
   columns and the Rich Nav promo box (MegaMenuPanelRenderer).
   ================================================================ */

/* A configured panel says how many columns it rendered; the grid follows
   that instead of the global --bwa-mm-columns. */
/* Columns are content, not layout: a mega panel spans the whole bar, and 1fr columns on a
   1200px bar put a row's label 300px from its count. Each column is capped at a readable width,
   the panel sizes to its columns from the bar's left edge, and the grid packs left. */
.bwa-mega-menu__panel--configured {
    right: auto;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    padding: 20px 28px 24px;
}

.bwa-mega-menu__submenu[data-columns] {
    justify-content: start;
    column-gap: var(--bwa-space-5, 40px);
}

.bwa-mega-menu__submenu[data-columns="1"] { grid-template-columns: repeat(1, minmax(0, var(--bwa-mm-col-max, 280px))); }
.bwa-mega-menu__submenu[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, var(--bwa-mm-col-max, 280px))); }
.bwa-mega-menu__submenu[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, var(--bwa-mm-col-max, 280px))); }
.bwa-mega-menu__submenu[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, var(--bwa-mm-col-max, 280px))); }
.bwa-mega-menu__submenu[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, var(--bwa-mm-col-max, 280px))); }
.bwa-mega-menu__submenu[data-columns="6"] { grid-template-columns: repeat(6, minmax(0, var(--bwa-mm-col-max, 280px))); }

/* A panel that SPANS the bar shares its width among the columns it has - the way a header design
   lays a mega panel out - instead of 280px columns pushed left with the rest of the bar empty
   (CarJiffy Resources, 2026-10-10). A planned panel in the standalone widget hugs its content and
   keeps the rules above; the phone layout keeps its single column. */
.bwa-mega-menu:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega:not(.bwa-mega-menu__panel--configured) .bwa-mega-menu__submenu[data-columns],
.bwa-mega-menu--embedded:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega .bwa-mega-menu__submenu[data-columns] { justify-content: stretch; }
.bwa-mega-menu:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega:not(.bwa-mega-menu__panel--configured) .bwa-mega-menu__submenu[data-columns="1"],
.bwa-mega-menu--embedded:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega .bwa-mega-menu__submenu[data-columns="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bwa-mega-menu:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega:not(.bwa-mega-menu__panel--configured) .bwa-mega-menu__submenu[data-columns="2"],
.bwa-mega-menu--embedded:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega .bwa-mega-menu__submenu[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bwa-mega-menu:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega:not(.bwa-mega-menu__panel--configured) .bwa-mega-menu__submenu[data-columns="3"],
.bwa-mega-menu--embedded:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega .bwa-mega-menu__submenu[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bwa-mega-menu:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega:not(.bwa-mega-menu__panel--configured) .bwa-mega-menu__submenu[data-columns="4"],
.bwa-mega-menu--embedded:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega .bwa-mega-menu__submenu[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bwa-mega-menu:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega:not(.bwa-mega-menu__panel--configured) .bwa-mega-menu__submenu[data-columns="5"],
.bwa-mega-menu--embedded:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega .bwa-mega-menu__submenu[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bwa-mega-menu:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega:not(.bwa-mega-menu__panel--configured) .bwa-mega-menu__submenu[data-columns="6"],
.bwa-mega-menu--embedded:not(.bwa-mega-menu--mobile) .bwa-mega-menu__panel--mega .bwa-mega-menu__submenu[data-columns="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* A column caption that is not a link (the keyboard skips it). */
.bwa-mega-menu__col-heading {
    display: block;
    padding: 8px 12px 6px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--amm-muted);
}

/* ---- The panel never outgrows the viewport ----
   Content volume varies per site and per column type (a facet's items, a catalog's
   collections, a model grid); rows and tiles are capped upstream, and this is the
   backstop: a mega panel taller than the viewport allows scrolls inside itself
   instead of running under the fold. Focus moves scroll the panel natively, so the
   keyboard model is unaffected. The mobile drawer manages its own scrolling. */
.bwa-mega-menu__panel--mega {
    max-height: min(72vh, 680px);
    overflow-y: auto;
}

.bwa-mega-menu--mobile .bwa-mega-menu__panel--mega {
    max-height: none;
    overflow-y: visible;
}

/* The "View all" tail of a capped column. */
.bwa-mega-menu__sublink--more {
    font-weight: 600;
    color: var(--amm-accent);
}

/* ---- Model tiles: a provider column whose rows carry a photo ----
   The column escapes the capped grid and spans the panel; the panel goes back to
   full bar width for it (the :has undoes the --configured max-content sizing). */
.bwa-mega-menu__col--tiles {
    grid-column: 1 / -1;
}

.bwa-mega-menu__panel--configured:has(.bwa-mega-menu__col--tiles) {
    width: auto;
    right: 0;
}

.bwa-mega-menu__tiles {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px 20px;
}

.bwa-mega-menu__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 10px 8px;
    white-space: normal;
}

.bwa-mega-menu__tile-img {
    display: block;
    width: 100%;
    max-width: 132px;
    height: 64px;
    object-fit: contain;
}

.bwa-mega-menu__tile-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.35;
}

.bwa-mega-menu--mobile .bwa-mega-menu__tiles {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 4px 8px;
}

/* A row with a trailing count. */
.bwa-mega-menu__sublink--count {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.bwa-mega-menu__count {
    font-size: 12px;
    color: var(--amm-faint);
    font-variant-numeric: tabular-nums;
}

/* The page's Rich Nav content as a promo box. */
.bwa-mega-menu__promo {
    padding: 14px 16px;
    border-radius: var(--bwa-radius-sm, 4px);
    background: var(--amm-surface-2);
    font-size: 14px;
    line-height: 1.5;
}

.bwa-mega-menu__promo img {
    max-width: 100%;
    height: auto;
}

.bwa-mega-menu__promo > :first-child { margin-top: 0; }
.bwa-mega-menu__promo > :last-child { margin-bottom: 0; }

/* Phones: one column whatever the panel says. */
.bwa-mega-menu--mobile .bwa-mega-menu__submenu[data-columns] {
    grid-template-columns: 1fr;
}

.bwa-mega-menu--mobile .bwa-mega-menu__promo {
    margin: 0 20px 8px;
}

/* ================================================================
   v2.2 — embedded in a host header: {{bwa:megamenu}} inside an imported chrome
   that has a Menu toggle and drawer of its own. The chrome renders the widget
   through MegaMenuRenderer.RenderWidget(host, breakpoint) into its nav slot;
   below the chrome's breakpoint the chrome's toggle and drawer take over (the
   drawer rows come from RenderMobile), so this widget shows no hamburger and
   nothing at all in its mobile state - one menu, never two. Colours follow the
   host bar: the Brand Corpus header tokens when the corpus defines them, the
   bar's own text colour otherwise, so the menu reads as part of the header
   rather than a white box dropped into it. The mega panels anchor to the host's
   wrapper (the chrome makes it position:relative) and span the bar instead of
   the width of the links.
   ================================================================ */
.bwa-mega-menu--embedded {
    position: static;
    background: transparent;
}

/* The panel spans the HOST BAR, which is what the note above promises.
   .bwa-mega-menu__item is position:relative for the standalone widget, and that makes the ITEM the
   panel's containing block - so an embedded panel could never reach the host's wrapper. It opened
   at its trigger's left edge at min-width 240px and ran off to one side. Releasing the item lets
   the panel resolve against the chrome's wrapper and stretch across it. */
.bwa-mega-menu--embedded .bwa-mega-menu__item--mega {
    position: static;
}

.bwa-mega-menu--embedded .bwa-mega-menu__panel--mega {
    left: 0;
    right: 0;
    min-width: 0;
}

/* A MIXED menu: only a mega item's panel spans the bar. A plain dropdown hangs under its own item
   (which stays its containing block) as wide as its rows - "Why CarJiffy", one column of four
   links, opened as a 1392px band (CarJiffy, 2026-10-10). The script ends it at the item's right
   edge instead when it would run past the viewport (bwa-mega-menu__panel--end). */
.bwa-mega-menu--embedded .bwa-mega-menu__panel--simple {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 32px));
}

.bwa-mega-menu__panel--simple.bwa-mega-menu__panel--end {
    left: auto;
    right: 0;
}

/* Panel copy WRAPS. white-space:nowrap is the menubar link's rule - a wrapped label would break
   the bar - but inherited into a panel it clips the item text instead. */
.bwa-mega-menu--embedded .bwa-mega-menu__panel,
.bwa-mega-menu--embedded .bwa-mega-menu__sublink,
.bwa-mega-menu--embedded .bwa-mega-menu__sublink-title,
.bwa-mega-menu--embedded .bwa-mega-menu__sublink-desc {
    white-space: normal;
}

/* A panel built from a column PLAN is width:max-content in the standalone widget, where it hangs
   off its own item and hugging its content is correct. Embedded, the containing block is the HOST
   WRAPPER, so max-content pins the panel to the left edge of the BAR whatever item opened it -
   measured 2026-09-14: Product hovered at x=377 opened its panel at x=16, under the logo. With
   left and width both set, right:0 is ignored, so the width has to be released too. */
.bwa-mega-menu--embedded .bwa-mega-menu__panel--configured {
    right: 0;
    width: auto;
}

.bwa-mega-menu--embedded .bwa-mega-menu__hamburger {
    display: none;
}

.bwa-mega-menu--embedded.bwa-mega-menu--mobile {
    display: none;
}

.bwa-mega-menu--embedded:not(.bwa-mega-menu--skinned) > .bwa-mega-menu__list > .bwa-mega-menu__item > .bwa-mega-menu__link {
    color: var(--bwa-color-header-text, inherit);
}

.bwa-mega-menu--embedded:not(.bwa-mega-menu--skinned) > .bwa-mega-menu__list > .bwa-mega-menu__item > .bwa-mega-menu__link:hover,
.bwa-mega-menu--embedded:not(.bwa-mega-menu--skinned) > .bwa-mega-menu__list > .bwa-mega-menu__item > .bwa-mega-menu__link:focus {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--bwa-color-header-link-hover, var(--bwa-color-header-text, inherit));
}

.bwa-mega-menu--embedded > .bwa-mega-menu__list > .bwa-mega-menu__item > .bwa-mega-menu__link:focus-visible {
    outline-color: currentColor;
}

.bwa-mega-menu--embedded .bwa-mega-menu__separator {
    background: currentColor;
    opacity: .3;
}

/* ---- The panel is its own surface, whatever the bar does ----
   A Brand Corpus header recolour paints every link in <header> the header text colour with
   !important and a stack of :not()s (header a:not([class*="logo"]):not([class*="btn"])...), so on
   a red bar with white text the rows inside this white panel went white too - counts were the
   only thing left. The corpus even carries a `header .bwa-mega-menu__panel a` rule for exactly
   this, but at lower specificity it loses to its own header rule. Neither the bar's colour nor
   the corpus's specificity is this stylesheet's to change, so these outrank both: !important on
   a selector carrying an id-level term (:not(#_) never matches anything, it only counts). */
header .bwa-mega-menu__panel a:not(#_),
header .bwa-mega-menu__panel .bwa-mega-menu__sublink:not(#_) {
    color: var(--amm-text) !important;
}

header .bwa-mega-menu__panel .bwa-mega-menu__sublink--heading:not(#_),
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--sub:not(#_),
header .bwa-mega-menu__panel .bwa-mega-menu__col-heading:not(#_) {
    color: var(--amm-muted) !important;
}

header .bwa-mega-menu__panel .bwa-mega-menu__sublink:not(#_):hover,
header .bwa-mega-menu__panel .bwa-mega-menu__sublink:not(#_):focus,
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--heading:not(#_):hover,
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--heading:not(#_):focus {
    color: var(--amm-accent) !important;
}

header .bwa-mega-menu__panel .bwa-mega-menu__sublink--static:not(#_):hover {
    color: var(--amm-text) !important;
}

/* ================================================================
   v2.3 — column heading icons, per-column footer links, promo image
   cards, and the current-page underline. The underline attributes
   (aria-current / --current) are applied client-side by
   bwa-mega-menu.js on every page view: the menubar HTML is cached
   across pages and must never carry per-page state.
   ================================================================ */

/* ---- Column heading icon: an <img> (URL/SVG) or an <i> (icon-font class list) ---- */
.bwa-mega-menu__hicon {
    display: inline-block;
    margin-right: 6px;
    vertical-align: text-bottom;
}

img.bwa-mega-menu__hicon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

i.bwa-mega-menu__hicon {
    font-size: 16px;
    line-height: 1;
}

/* ---- Configured footer link, e.g. "Learn More About Our Solutions →" ----
   __sublink--more already carries the accent + weight; this adds the separation
   from the list it closes. When configured it REPLACES a provider column's
   automatic "View all" (MegaMenuPanelRenderer.RenderFooterLink). */
.bwa-mega-menu__subitem--footer {
    margin-top: 6px;
}

.bwa-mega-menu__sublink--footer {
    font-size: 13px;
}

/* ---- Promo image card: a rounded picture the whole column links through ----
   The <a> keeps __sublink so the keyboard walk and focus ring stay uniform;
   padding goes back to zero so the image fills the card. */
.bwa-mega-menu__col--promo {
    min-width: 0;
}

.bwa-mega-menu__promo-card {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: var(--bwa-radius-md, 10px);
}

.bwa-mega-menu__promo-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.bwa-mega-menu__promo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 12px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.bwa-mega-menu--mobile .bwa-mega-menu__promo-card {
    max-width: 300px;
}

/* ---- BWA Website chrome (bwa-bwa-site-header-dc) panel alignment ----
   The chrome makes its snippet wrapper position:relative, but that wrapper holds only the
   brand + nav slot and ENDS before the bar's right-side controls - so a mega panel spanning
   it opened with its left edge poking out under the logo and its right edge stopping short
   of the CTA (measured 96..1263 in a 1600 viewport whose container is 80..1520). The
   positioning context moves to the header's real content container; the design-slug class
   keeps every other chrome's geometry untouched. */
.bwa-bwa-site-header-dc .bwa-hdr-ca {
    position: static !important;
}

.bwa-bwa-site-header-dc > div > div {
    position: relative;
}

.bwa-bwa-site-header-dc .bwa-mega-menu--embedded .bwa-mega-menu__panel {
    border-radius: 0 0 10px 10px;
}

/* A panel that carries a promo card spreads its columns across the container so the card
   pins to the right edge, the way the design draws it - instead of all columns packing
   left with a dead zone beside them. */
.bwa-bwa-site-header-dc .bwa-mega-menu--embedded .bwa-mega-menu__submenu[data-columns]:has(.bwa-mega-menu__col--promo) {
    justify-content: space-between;
}

/* ---- Host-drawer collapsible groups (MegaMenuRenderer.RenderMobile) ----
   A top-level page with panel content renders as a closed group in the host's
   own drawer. The head row = the page's link in the HOST's row markup (the
   name appears once and matches the plain rows) + a chevron toggle button
   that bwa-mega-menu.js owns. Sections inside are indented under their
   heading so the sub-heading governs the links below it. ---- */
.bwa-mm-drawer__group {
    width: 100%;
}

.bwa-mm-drawer__grouphead {
    display: flex;
    align-items: center;
}

.bwa-mm-drawer__grouphead > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.bwa-mm-drawer__groupname {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
}

.bwa-mm-drawer__toggle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    /* Min/max too: host drawers style their own buttons (full-width CTAs), and a host
       width rule inflated this toggle to the whole row, crushing the link beside it.
       Min/max clamp the box whichever width declaration wins. */
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    max-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.bwa-mm-drawer__toggle:hover {
    background: rgba(127, 127, 127, 0.08);
}

.bwa-mm-drawer__chev {
    display: inline-flex;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.bwa-mm-drawer__chev svg {
    width: 100%;
    height: 100%;
}

/* The chevrons are OUTLINE icons (fill="none"). A Brand Corpus generated before 2026-10-10 fills
   every svg in a header nav (header nav a svg { fill: currentColor !important }), which turns a
   chevron into a solid triangle - so the icon's own fill="none" is restated here, outranking it. */
.bwa-mega-menu__arrow svg:not(#_),
.bwa-mm-drawer__chev svg:not(#_) {
    fill: none !important;
}

/* A drawer row is a line of its own. The host's row is often a bare <a>, and a tenant theme may
   make every <a> inline-block (CarJiffy custom.css: a { display:inline-block }, unlayered, so it
   also beats the design's own utility classes): two short rows in one section ("Team", "Contact
   Us") sat side by side. A row the design draws as flex or grid keeps that shape. */
.bwa-mm-drawer__rows > a:not(#_),
.bwa-mm-drawer__section > a:not(#_) {
    display: block;
}

.bwa-mm-drawer__rows > a:is([class~="flex"], [class~="inline-flex"]):not(#_),
.bwa-mm-drawer__section > a:is([class~="flex"], [class~="inline-flex"]):not(#_) {
    display: flex;
}

.bwa-mm-drawer__rows > a:is([class~="grid"], [class~="inline-grid"]):not(#_),
.bwa-mm-drawer__section > a:is([class~="grid"], [class~="inline-grid"]):not(#_) {
    display: grid;
}

/* Each toggle's own state: a section nests inside its group, so the group's open class would turn
   every chevron inside it. */
.bwa-mm-drawer__toggle[aria-expanded="true"] .bwa-mm-drawer__chev {
    transform: rotate(180deg);
}

/* The hidden attribute must win over any display the host's row classes set. */
.bwa-mm-drawer__rows[hidden] {
    display: none !important;
}

/* A section heading governs its links: they sit indented under a quiet rule. */
.bwa-mm-drawer__section {
    margin: 0 0 8px 12px;
    padding-left: 10px;
    border-left: 2px solid rgba(127, 127, 127, 0.18);
}

/* ---- Current page: accent underline on the page's own top link, a thinner
   muted one on the section it sits under. box-shadow, not border: zero layout
   shift, and it works embedded in a host header bar too. ---- */
.bwa-mega-menu__list > .bwa-mega-menu__item > .bwa-mega-menu__link[aria-current="page"] {
    box-shadow: inset 0 -3px 0 0 var(--amm-accent);
}

.bwa-mega-menu__list > .bwa-mega-menu__item > .bwa-mega-menu__link--current {
    box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--amm-accent) 55%, transparent);
}

/* ---- A SKINNED dropdown (MegaMenuRenderer.RenderWidget with a host skin) ----
   The host design's classes are a skinned panel's card and its rows' look. They are compiled into
   the host's scoped stylesheet, which outranks this file's one-class rules; these step the widget's
   own card and row look aside where the design says nothing - a border, padding, rounding or shadow
   the design never drew. :where() holds each at one class, so the design's classes still win.
   Colour is set apart, below. */
.bwa-mega-menu__panel:where(.bwa-mega-menu__panel--skin) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

:where(.bwa-mega-menu__panel--skin) .bwa-mega-menu__submenu {
    gap: 0;
}

.bwa-mega-menu__sublink:where(.bwa-mega-menu__sublink--skin) {
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* A group in a skinned dropdown: its row opens and closes the list after it (bwa-mega-menu.js),
   closed at first, and its chevron turns while open. [hidden] wins over any display the host's
   classes give the list. */
.bwa-mega-menu__col-list[hidden] {
    display: none !important;
}

.bwa-mega-menu__group {
    cursor: pointer;
}

.bwa-mega-menu__group[aria-expanded="true"] .bwa-mega-menu__group-chevron {
    transform: rotate(180deg);
}

/* A skinned panel's rows and headings in the colours the host design gives them, handed over as
   values on the panel (--amm-skin-text, --amm-skin-heading - MegaMenuRenderer.SkinInk): the design's
   own card is under them, so they read as the design draws them, and these outrank a header
   recolour exactly as the panel rules above do. Without a value, those rules' colours stand. */
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--skin:not(#_):not(#_),
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--skin:not(#_):not(#_):hover,
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--skin:not(#_):not(#_):focus {
    color: var(--amm-skin-text, var(--amm-text)) !important;
}

header .bwa-mega-menu__panel .bwa-mega-menu__sublink--skin.bwa-mega-menu__sublink--heading:not(#_):not(#_),
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--skin.bwa-mega-menu__sublink--heading:not(#_):not(#_):hover,
header .bwa-mega-menu__panel .bwa-mega-menu__sublink--skin.bwa-mega-menu__sublink--heading:not(#_):not(#_):focus,
header .bwa-mega-menu__panel .bwa-mega-menu__col-heading--skin:not(#_):not(#_) {
    color: var(--amm-skin-heading, var(--amm-muted)) !important;
}

/* A skinned column heading - a link, or a caption with nowhere to go - steps the widget's own
   heading look aside where the design says nothing (its caps, tracking, weight, padding). */
.bwa-mega-menu__sublink--heading:where(.bwa-mega-menu__sublink--skin),
.bwa-mega-menu__col-heading:where(.bwa-mega-menu__col-heading--skin) {
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* A skinned mega panel the host design hangs under its OWN item, at its own width (the skin's
   megaPanelWidth, on the panel), instead of spanning the bar - CarJiffy Resources is a 980px card
   under "Resources". Where it would overrun the viewport, bwa-mega-menu.js moves it left just far
   enough (an inline left), never past the viewport's left edge. */
.bwa-mega-menu--embedded .bwa-mega-menu__item--mega.bwa-mega-menu__item--anchored {
    position: relative;
}

.bwa-mega-menu--embedded .bwa-mega-menu__panel--mega.bwa-mega-menu__panel--anchored {
    left: 0;
    right: auto;
    max-width: calc(100vw - 32px);
}