/* The subtitles are injected into the shared list, so they exist in the desktop DOM
           too. Hidden by default and shown only in the drawer - otherwise they would print
           as stray text across the desktop menu bar. */
        .navwrap .mn-sub{display:none}

        @media only screen and (max-width:991px){
            .navwrap{
                --mn-gold:#ffef4d;
                --mn-gold-lite:#fff7a6;
                --mn-row:#1b1b1b;
                --mn-subtle:#9a9a9a;
                /* The panel itself was background-color:#fff, so the dark row cards sat on
                   a white sheet and the whole lower half - currency, help card, socials -
                   was a block of white. The drawer is a dark surface now. */
                background-color:#0e0e0e !important;
            }

            /* The submenu links inside the expandable rows were coloured #4a4a4a for that
               white panel. On the dark one they would be near-invisible. */
            .navwrap .submenubrands li a,
            .navwrap .submenufleet li a,
            .navwrap .submenuloc li a,
            .navwrap .servcdropd li a{color:#d7d7d7 !important}
            .navwrap .submenubrands .ct-count,
            .navwrap .submenufleet .ct-count{color:var(--mn-subtle) !important}

            /* ...but the panels those links sit in were never darkened with them. All four
               carry `background-color: var(--white)` from style.css, so the links recoloured
               just above ended up #d7d7d7 on #fafafa - 1.38:1, where text needs 4.5:1. The
               Categories list read as blank rows.

               Transparent rather than a new dark colour: the drawer already paints #0e0e0e
               on .navwrap, and that is the surface the #d7d7d7 above was chosen against.
               Naming a second dark here would be a second thing to keep in step.

               The `background` SHORTHAND, not background-color: all four panels also set
               background-image:url(fleetdropdownbg.webp) for the desktop dropdown. The
               shorthand clears the image, position, size and repeat along with the colour,
               so this does not depend on each panel separately being handed
               background-image:none further down style.css.

               Scoped by the enclosing @media, so the desktop dropdowns - which are white on
               purpose and sit over page content, not over the drawer - keep their panels. */
            .navwrap .submenubrands,
            .navwrap .submenufleet,
            .navwrap .submenuloc,
            .navwrap .servcdropd{background:transparent !important}

            /* ---- Search ------------------------------------------------------------ */
            .navwrap .mobnav-searchform{
                display:flex;align-items:center;gap:10px;
                padding:11px 16px;
                background:#141414;
                border:1.5px solid var(--mn-gold);border-radius:999px;
                box-shadow:0 0 18px rgba(212,175,55,.16);
            }
            .navwrap .mobnav-searchform button{
                flex:0 0 20px;width:20px;height:20px;padding:0;
                background:transparent;border:0;
                display:flex;align-items:center;justify-content:center;
            }
            .navwrap .mobnav-searchform button .svgicon{width:18px;height:18px;fill:var(--mn-gold)}
            .navwrap .mobnav-searchform input{
                flex:1 1 auto;min-width:0;
                background:transparent;border:0;color:#fff;
                /* 16px: below that iOS Safari zooms the page on focus and never zooms back. */
                font-size:16px;
            }
            .navwrap .mobnav-searchform input::placeholder{color:#8d8d8d;font-size:14px}
            .navwrap .mobnav-searchform input:focus{outline:0}

            /* ---- Rows --------------------------------------------------------------
               `> a` / `> span` reaches the row's own label only, so the submenu links
               inside the expandable rows keep their existing styling. */
            .navwrap > li > a,
            .navwrap > li > span{
                position:relative;
                display:flex;align-items:center;gap:14px;
                padding:13px 44px 13px 15px;margin-bottom:8px;
                /* !important throughout, and not as a habit. style.min.css sets
                   `.navwrap > li > a{color:#1c1c1c}` and
                   `.navwrap li a{text-transform:uppercase; font-family:"Anton"}`, and those
                   were winning: the titles rendered near-BLACK on a near-black card, in
                   capitals, while the subtitles - which already carried !important - came
                   out white and sentence-cased. That split is exactly what gave it away. */
                background:var(--mn-row) !important;
                border:1px solid rgba(255,255,255,.06);border-radius:14px;
                color:#fff !important;
                font-family:"Graphik Arabic",system-ui,sans-serif !important;
                font-size:16px !important;font-weight:600 !important;
                text-transform:none !important;letter-spacing:0 !important;
                line-height:1.25;
            }
            .navwrap > li.logowrap > a{
                background:transparent !important;border:0;padding:0;margin:0;
            }

            .navwrap .mobnav-ico{
                flex:0 0 22px;width:22px;height:22px;
                fill:var(--mn-gold) !important;
            }

            /* Absolutely placed, so it stays pinned right whether or not the row carries a
               subtitle changing its height. */
            .navwrap > li > a .mobnav-chev,
            .navwrap > li > .angle-icon{
                position:absolute;right:15px;top:50%;transform:translateY(-50%);
                width:15px;height:15px;fill:#8d8d8d;
            }

            /* Label and subtitle stack; the wrapper is added by the script because the
               label is a bare text node with nothing to hang a column on. */
            .navwrap .mn-txt{
                flex:1 1 auto;min-width:0;
                color:#fff !important;
                font-family:"Graphik Arabic",system-ui,sans-serif !important;
                font-size:16px !important;font-weight:600 !important;
                text-transform:none !important;letter-spacing:0 !important;
            }
            .navwrap .mn-sub{
                display:block;margin-top:3px;
                font-family:"Graphik Arabic",system-ui,sans-serif !important;
                font-size:12px !important;font-weight:400 !important;line-height:1.3;
                text-transform:none !important;letter-spacing:0 !important;
                color:var(--mn-subtle) !important;
            }

            /* ---- Current page ---- set_active() already puts .active on the <li>. ---- */
            .navwrap > li.active > a,
            .navwrap > li.active > span{
                background:linear-gradient(90deg,var(--mn-gold-lite),var(--mn-gold)) !important;
                border-color:transparent;color:#161616 !important;
                box-shadow:0 6px 18px rgba(212,175,55,.3);
            }
            .navwrap > li.active > a .mobnav-ico,
            .navwrap > li.active > span .mobnav-ico{fill:#161616 !important}
            .navwrap > li.active .mn-sub{color:rgba(22,22,22,.78) !important}
            .navwrap > li.active .mn-txt{color:#161616 !important}
            .navwrap > li.active > a .mobnav-chev,
            .navwrap > li.active > .angle-icon{fill:#161616 !important}

            /* ---- Currency ---------------------------------------------------------- */
            .navwrap #currency2{
                margin-top:6px;padding:10px 16px;
                background:#141414 !important;color:#fff !important;
                border:1.5px solid var(--mn-gold) !important;border-radius:999px !important;
                font-size:15px;font-weight:600;
            }

            /* ---- "Need Help?" card ------------------------------------------------------
               It was #f7f7f7 with black text - a light card sitting at the bottom of a
               near-black drawer. Same treatment as the rows above it. */
            .navwrap .mobnav-helpcard{
                background:var(--mn-row) !important;
                border:1px solid rgba(255,255,255,.07) !important;
                border-radius:14px !important;
            }
            .navwrap .mobnav-helptext strong{
                color:#fff !important;text-transform:none !important;
                font-family:"Graphik Arabic",system-ui,sans-serif !important;
            }
            .navwrap .mobnav-helptext span{
                color:var(--mn-subtle) !important;text-transform:none !important;
                font-family:"Graphik Arabic",system-ui,sans-serif !important;
            }
            .navwrap .mobnav-helpicon{background:var(--mn-gold) !important}
            .navwrap .mobnav-helpicon .svgicon{fill:#161616 !important}
            /* The button only goes full width below 400px. On a 412 or 430px phone it sat
               beside the text instead, and "Our team is always here for you." was cut off
               behind it. 440 covers the common Android widths; above that there is genuinely
               room for both. The text also wraps rather than being clipped, so no width is
               a silent truncation. */
            .navwrap .mobnav-helpcard{flex-wrap:wrap}
            .navwrap .mobnav-helptext{flex:1 1 150px;min-width:0}
            .navwrap .mobnav-helptext span{white-space:normal;overflow-wrap:anywhere}
            .navwrap .mobnav-helpbtn{
                flex:0 0 auto;white-space:nowrap;justify-content:center;
                background:var(--mn-gold) !important;color:#161616 !important;
                border-radius:999px !important;
            }
            .navwrap .mobnav-helpbtn .svgicon{fill:#161616 !important}
        }
        /* Below 440px the button takes its own line under the text, rather than sharing it
           and squeezing the sentence to nothing. */
        @media only screen and (max-width:440px){
            .navwrap .mobnav-helpbtn{flex:1 1 100% !important}
        }
        @media only screen and (max-width:991px){

            /* ---- Social row -------------------------------------------------------------
               Measured 441px of icons in a 380px row, so the last one was cut in half.
               Letting the row wrap and giving each icon a fixed 44px box puts five of them
               in 252px with room to spare, and a sixth channel would simply wrap. */
            .navwrap .mobnav-social{
                display:flex !important;flex-wrap:wrap;justify-content:center;
                gap:10px;padding:2px 0 0 !important;margin:0 !important;
            }
            .navwrap .mobnav-social a{
                flex:0 0 44px;width:44px !important;height:44px !important;
                margin:0 !important;padding:0 !important;
                display:flex;align-items:center;justify-content:center;
                background:var(--mn-row) !important;
                border:1px solid rgba(255,255,255,.07);border-radius:12px !important;
            }
            .navwrap .mobnav-social a .svgicon{
                width:19px;height:19px;fill:var(--mn-gold) !important;
            }
        }