/* =============================================================================
   Mega menu - desktop
   GENERATED by .db/gen-nav-mega-scss.mjs. Edit the generator, not this file.

   Restyles the existing mega panels into a card grid: logo, label, chevron.
   Nothing here changes the markup - the nav is CMS-driven (tblCMSSections), so
   this hangs entirely off the classes and hrefs the CMS already emits.

   Scoped to min-width 1280px because below that .mastheader-nav is handed to
   the mmenu plugin, which rewrites this same DOM into the off-canvas drawer.
   The :not(.mm-menu) guard is belt and braces for that.
   ============================================================================= */
/* chevron and map pin travel as data URIs so the panel needs no extra requests */
@media all and (min-width: 1280px) {
  .mastheader-nav:not(.mm-menu) {
    /* ---- the panel ---------------------------------------------------- */
    /* The white full-bleed backdrop is an :after on .mega stretched to the
       viewport. Recolour it so the white cards read against it, and give the
       panel a real edge instead of the old 3px shadow. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega::after {
    background-color: #f6f7f9;
    box-shadow: 0 18px 32px -18px rgba(20, 24, 33, 0.28), inset 0 1px 0 0 #e7e9ee;
  }
  .mastheader-nav:not(.mm-menu) {
    /* ---- the grid ----------------------------------------------------- */
    /* Was flex with max-width 800px and margin auto, which stranded three
       narrow columns in the middle of a 1280px panel. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: 8px 28px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 20px 22px;
    box-sizing: border-box;
  }
  .mastheader-nav:not(.mm-menu) {
    /* the CMS emits one flat <li> per link; the card is the <a> so the whole
       row is the hit area */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    display: block;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    background-color: #fff;
    color: #1f2330;
    font-size: 13.5px;
    line-height: 1.3;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
    /* logo tile - the image itself is attached per-href further down.
       Wider than it is tall because most tyre-brand assets are wordmarks;
       contain keeps the roundel makes (BMW, VW) centred and unstretched. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a::before {
    content: "";
    flex: 0 0 46px;
    width: 46px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a {
    /* chevron */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23b6bac2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E") no-repeat center/16px 16px;
    transition: background-image 0.15s ease, transform 0.15s ease;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a:hover, .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a:focus-visible {
    border-color: rgba(255, 8, 1, 0.45);
    box-shadow: 0 4px 14px -6px rgba(20, 24, 33, 0.25);
    color: #ff0801;
    transform: translateY(-1px);
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a:hover::after, .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a:focus-visible::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ff0801' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
    transform: translateX(2px);
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a:focus-visible {
    outline: 2px solid #ff0801;
    outline-offset: 2px;
  }
  .mastheader-nav:not(.mm-menu) {
    /* ---- section heading ---------------------------------------------- */
    /* ::before on the grid container becomes a grid item, so it can span the
       full row. Decorative only - the accessible name is the top-level link. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group::before {
    grid-column: 1/-1;
    margin: 0 0 6px;
    padding-left: 10px;
    border-left: 3px solid #ff0801;
    color: #6b7079;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres > .mega > ul.group::before {
    content: "Browse tyres";
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega > ul.group::before {
    content: "Popular tyre brands";
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega > ul.group::before {
    content: "Popular manufacturers";
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-models > .mega > ul.group::before {
    content: "Popular tyre models";
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group::before {
    content: "Find a fitter near you";
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tools > .mega > ul.group::before {
    content: "Tools";
  }
  .mastheader-nav:not(.mm-menu) {
    /* ---- "All ..." row as a full-width footer -------------------------- */
    /* Each of these menus ends with a real "All ..." / "View All ..." link,
       pinned last because tblCMSSections renders in id order. Promote it to a
       footer bar rather than leaving it as a lone card in column one.
       Tyres Near Me had no such link until
       2026-09-03_nav-view-all-locations.sql added one. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega > ul.group > li:last-child,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega > ul.group > li:last-child,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group > li:last-child {
    grid-column: 1/-1;
    margin-top: 6px;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega > ul.group > li:last-child > a,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega > ul.group > li:last-child > a,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group > li:last-child > a {
    justify-content: flex-start;
    min-height: 50px;
    border-color: rgba(255, 8, 1, 0.22);
    background-color: #fff4f3;
    color: #ff0801;
    font-weight: 700;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega > ul.group > li:last-child > a::before,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega > ul.group > li:last-child > a::before,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group > li:last-child > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ff0801'%3E%3Ccircle cx='5' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='19' cy='5' r='1.8'/%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3Ccircle cx='5' cy='19' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3Ccircle cx='19' cy='19' r='1.8'/%3E%3C/svg%3E");
    background-size: 18px 18px;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega > ul.group > li:last-child > a::after,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega > ul.group > li:last-child > a::after,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group > li:last-child > a::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ff0801' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega > ul.group > li:last-child > a:hover,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega > ul.group > li:last-child > a:hover,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group > li:last-child > a:hover {
    border-color: rgba(255, 8, 1, 0.5);
    background-color: #ffe9e7;
  }
  .mastheader-nav:not(.mm-menu) {
    /* ---- text-only menus ------------------------------------------------ */
    /* Artwork earns its place in the two brand menus, where the logo is how
       people recognise the row at a glance. It does not in these four: Tyres
       and Tools have no artwork to show, and for models and locations a tread
       render and a repeated pin add nothing the label does not already say -
       every row carried the same pin, so it read as decoration. Drop the tile
       and let the label sit against the card edge, as Tools already did. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres > .mega > ul.group > li > a::before,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tools > .mega > ul.group > li > a::before,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-models > .mega > ul.group > li > a::before,
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group > li > a::before {
    display: none;
  }
  .mastheader-nav:not(.mm-menu) {
    /* The locations footer row keeps its mark - it is the one emphasised row
       in the panel, matching the brand menus' "All ..." bar. Declared after
       the rule above so it wins without extra specificity. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyres-near-me > .mega > ul.group > li:last-child > a::before {
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff0801' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9h16v11H4z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
    background-size: 19px 19px;
  }
  .mastheader-nav:not(.mm-menu) {
    /* ---- top-level items ------------------------------------------------ */
    /* The bar is full: twelve items already measure exactly the 1280px the
       menu has, so anything added here has to be paid for. Labels are pinned
       to one line and the horizontal padding trimmed from 15px to 11px, which
       frees ~96px - comfortably more than the carets cost. Without the nowrap
       every multi-word item ("Tyre Brands", "Knowledge Hub") breaks in two,
       because the link is a flex container and the label is a shrinkable
       anonymous item. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li > a {
    white-space: nowrap;
    padding-left: 11px;
    padding-right: 11px;
  }
  .mastheader-nav:not(.mm-menu) {
    /* _navigation.scss insets the red hover underline by 16px, which was the
       old padding. Match the new one so the rule sits under the whole label
       instead of stopping short of it. (While the labels were wrapping this
       underline landed between the two lines and read as a strikethrough -
       that was the wrap, not the rule.) */
  }
  .mastheader-nav:not(.mm-menu) > ul > li:hover > a::after {
    left: 11px;
    right: 11px;
  }
  .mastheader-nav:not(.mm-menu) {
    /* Signal which items open a panel.
       This has to be ::before, not ::after: _navigation.scss already uses
       ::after on these links for the red hover underline, and borrowing it
       turned that underline into a red diamond. The link is display:flex, so
       order:1 moves the caret after the label without touching the markup. */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.single-tier.topnav > a::before {
    content: "";
    order: 1;
    flex: none;
    align-self: center;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.5;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.single-tier.topnav:hover > a::before {
    transform: translateY(1px) rotate(225deg);
    opacity: 1;
  }
  /* ---- narrower desktops --------------------------------------------- */
  /* Between 1280 and 1440 three columns of cards get tight, so ease the gap
     and let the labels wrap rather than overflow. */
}
@media all and (min-width: 1280px) and (max-width: 1439px) {
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group {
    gap: 6px 16px;
    padding: 16px 16px 18px;
  }
  .mastheader-nav:not(.mm-menu) > ul > li.topnav > .mega > ul.group > li > a {
    font-size: 13px;
    padding: 6px 10px;
    min-height: 42px;
  }
}
/* -----------------------------------------------------------------------------
   Mobile drawer - blank submenu fix

   Below 1280px .mastheader-nav is handed to the mmenu plugin, which turns each
   .mega into an accordion panel and controls open/closed with its own classes.
   But the desktop hover script writes visibility INLINE onto .mega (visible on
   hover in, hidden on hover out), and nothing clears those inline styles when
   the layout crosses into the drawer. A menu whose last desktop interaction was
   a hover-out therefore arrives in the drawer as visibility:hidden - it expands
   to its full height and reserves the space, but paints nothing and cannot be
   hit-tested, so the drawer shows a tall blank white gap. Tapping the gap
   re-runs the script, which sets visibility:visible, and the items appear -
   which is what made this look like a rendering glitch rather than a style bug.

   In the drawer, visibility is never the right mechanism for open/closed -
   mmenu owns that - so pin it visible. !important is needed to beat the inline
   style, which is the only way to win against one.
   -------------------------------------------------------------------------- */
@media all and (max-width: 1279px) {
  .mm-menu .mega {
    visibility: visible !important;
  }
}
/* -----------------------------------------------------------------------------
   Logo mapping
   Keyed on href because the CMS gives the nav no image reference. Scoped per
   menu so a slug shared between menus (a brand and one of its models) cannot
   pick up the wrong artwork.
   -------------------------------------------------------------------------- */
@media all and (min-width: 1280px) {
  .mastheader-nav:not(.mm-menu) > ul > li {
    /* ---- tyre brands ------------------------------------------------- */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/michelin/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/product-card-brand-michelin.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/continental/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-continental.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/bridgestone/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-bridgestone.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/goodyear/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/product-card-brand-goodyear.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/pirelli/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-pirelli.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/dunlop/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-dunlop.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/hankook/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-hankook.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/kumho/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-kumho-alt.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/yokohama/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-yokohama.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/falken/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-falken.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/toyo/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/toyo.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/avon/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-avon.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/uniroyal/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-uniroyal.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/bfgoodrich/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/bfgoodrich-1.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/firestone/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/firestone.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/vredestein/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-vredestein.jpg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/nokian/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/nokian.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/nankang/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/brand-type-nankang-1.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/churchill/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/churchill.jpeg.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/tomket/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/tomket.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-tyre-brands > .mega a[href$="/royal-black/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/tyrebrand/200-200/royalblack.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li {
    /* ---- car manufacturers ------------------------------------------- */
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/ford/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/ford-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/volkswagen/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/volkswagen-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/bmw/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/bmw-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/audi/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/audi-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/mercedes/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/mercedes-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/vauxhall/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/vauxhall-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/nissan/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/nissan-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/kia/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/kia-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/peugeot/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/peugeot-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/hyundai/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/hyundai-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/honda/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/honda-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/volvo/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/volvo-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/renault/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/renault-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/mini/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/mini-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/seat/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/seat-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/tesla/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/tesla-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/byd/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/byd-main-logo.png.webp");
  }
  .mastheader-nav:not(.mm-menu) > ul > li.nav-car-brands > .mega a[href$="/chevrolet/"]::before {
    background-image: url("https://d2ysfdnnlyf698.cloudfront.net/make/200-200/chevrolet-main-logo.png.webp");
  }
}