.sortingtab, .brandctrgyfiltr{
            --lc-gold:#ffef4d;
            --lc-gold-lite:#fff7a6;
            --lc-ink:#1a1a1a;
        }

        /* ---- The row the strip and the sort control share -----------------------------
           style.min.css lays the sort control out as `float:right; width:15%`. A float is
           taken out of the flow, so it does not reserve any space - the strip runs the full
           width underneath it and the control lands ON TOP of the last brand tiles. That was
           survivable while the control was a bare 15%-wide <select>; the pill is wider than
           15% on a normal desktop, so it now covers them outright.

           Making the wrapper a flex row gives each one a real share. min-width:0 on the
           strip because a flex item will not shrink below its content width without it, and
           the swiper's content is as wide as all its slides. */
        /* CANCEL THE FLOAT EVERYWHERE, not only inside the row below.
           The first version of this fix was scoped to `.brandctrgyfiltr > .container >
           .sortingtab`, which only the FLEET and OFFERS templates have. Brand and location
           pages put the control in a plain `.cars-section > .container` with no such row, so
           the rule never matched them, `float:right` from style.min.css survived, and the
           pill - taken out of the flow and reserving no space - rode up over the brand strip
           in the section above. Rami found it on a brand page.

           Scoped to .lc-sort-ready so it only applies once the script has replaced the
           native select with the pill; without JS the original float is left exactly as it
           was, which is the fallback the rest of this file is built around. */
        .sortingtab.sortingtabinrpage.lc-sort-ready{
            float:none !important;
            width:auto !important;
            display:flex;justify-content:flex-end;margin-left:auto;
        }

        .brandctrgyfiltr > .container{
            display:flex;align-items:center;gap:22px;flex-wrap:wrap;
        }
        .brandctrgyfiltr > .container > .brandswrap{flex:1 1 320px;min-width:0}

        /* The strip used to run at a HALF slide per view, so a tile was always sliced down
           the middle at the right edge - the "there is more, scroll me" peek. A fade to the
           section's white was layered over the cut to make it look intended.

           Both are gone. The slide counts are whole numbers now and the dots below carry
           that message instead: a cut tile was read as a bug every time it was seen, twice
           reported as the Sort By pill covering a card, and a fade is a disguise rather
           than a fix. position:relative stays - the dots are positioned against it. */
        .brandctrgyfiltr > .container > .brandswrap{position:relative}

        /* ---- Brand strip pagination ---------------------------------------------------
           In normal flow under the strip rather than absolutely positioned over it: these
           tiles are white on white and an overlaid dot row would sit on top of a logo.
           Swiper's own .swiper-pagination defaults to absolute, so that is undone here. */
        .brandctrgyfiltr .bcf-pagination{
            position:static !important;
            display:flex;justify-content:center;align-items:center;gap:7px;
            margin-top:12px;
        }
        .brandctrgyfiltr .bcf-pagination .swiper-pagination-bullet{
            width:8px !important;height:8px !important;margin:0 !important;
            /* #8A8A8A, not Swiper's default #000 at .2 opacity. That default is 1.3:1 on
               this white section - the same invisible-dot problem the product cards had.
               This is 3.45:1, which clears the 3:1 that WCAG asks of a UI component. */
            background:#8A8A8A !important;opacity:1 !important;
            border-radius:50%;
            transition:width .25s ease,background-color .25s ease;
        }
        .brandctrgyfiltr .bcf-pagination .swiper-pagination-bullet-active{
            width:22px !important;border-radius:5px;
            background:var(--lc-gold) !important;
            box-shadow:0 0 0 1px rgba(0,0,0,.12);
        }
        /* The yellow is 1.2:1 against white on its own, so the active dot is told apart by
           SHAPE - it is nearly three times as wide - with a hairline ring to keep its edge
           findable. Colour alone would fail anyone who cannot see it. */
        .brandctrgyfiltr .bcf-pagination .swiper-pagination-bullet:focus-visible{
            outline:2px solid var(--lc-ink);outline-offset:2px;
        }

        .brandctrgyfiltr > .container > .sortingtab{
            float:none !important;width:auto !important;
            flex:0 0 auto;margin-bottom:0 !important;
        }
        @media only screen and (max-width:767px){
            /* Stacked, with the control full width under the strip. */
            .brandctrgyfiltr > .container > .brandswrap{flex:1 1 100%}
            .brandctrgyfiltr > .container > .sortingtab{flex:1 1 100%}
        }

        /* Swiper sizes each slide with an inline `width` - at 3.5-across on a 387px phone
           that is 99px. A flex-basis beats width in a flex row, and something in
           style.min.css leaves these slides with a percentage basis, so they rendered 63px
           (the old 5.5-across size) no matter what the breakpoint config said. flex:0 0 auto
           returns the basis to auto and lets the inline width win, which is what makes the
           slidesPerView change actually take effect. */
        .brandctrgyfiltr .bcfcarousel .swiper-slide{flex:0 0 auto !important}

        /* ---- Brand filter strip ------------------------------------------------------
           Tiles are buttons carrying only a logo today; the name below it comes from the
           .bf-name span the two templates with a strip now render. */
        .brandctrgyfiltr .brand-button{
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            /* 5px of side padding, not 10. The tile is about 103px wide, and at 10px a side
               the text box came to 72px while "Lamborghini" needs 74 - so it clipped on the
               DESKTOP too, not just on phones. */
            gap:8px;width:100%;height:100%;min-height:104px;padding:14px 5px 11px;
            background:#fff;border:1px solid #ececec;border-radius:16px;
            box-shadow:0 1px 2px rgba(0,0,0,.04);
            cursor:pointer;
            transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease;
        }
        .brandctrgyfiltr .brand-button img{
            width:auto;max-width:76px;height:44px;object-fit:contain;
        }
        /* Two lines, wrapping at spaces, at every size - not one ellipsised line. "Range
           Rover" and "Mini Cooper" are two words and simply wrap; the single long words
           ("Lamborghini", "Maserati") fit on one line now that the padding gives them the
           room. The clamp is the backstop for anything longer than both. */
        /* Darker and heavier than the #4a4a4a/500 it was. The name is what the tile is FOR -
           the logo is recognisable but the word is what gets read - and at this size a mid
           grey on white reads as disabled rather than quiet. */
        .brandctrgyfiltr .brand-button .bf-name{
            font-size:13px;line-height:1.2;color:#2a2a2a;font-weight:600;
            text-align:center;max-width:100%;
            /* The tile is a column flex with align-items:center, which shrink-wraps its
               children - so the label was sized to its own text and clipped 2px short of
               fitting. Stretching it to the tile's full content width is the difference. */
            align-self:stretch;
            white-space:normal;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
            overflow:hidden;
        }
        .brandctrgyfiltr .brand-button:hover{
            border-color:#dcdcdc;box-shadow:0 4px 12px rgba(0,0,0,.07);
        }
        .brandctrgyfiltr .brand-button:active{transform:translateY(1px)}

        /* Selected. The strip's own JS toggles .active on click. */
        .brandctrgyfiltr .brand-button.active{
            background:var(--lc-ink);border-color:var(--lc-gold);
            box-shadow:0 0 0 2px rgba(255,239,77,.35),0 6px 18px rgba(0,0,0,.25);
        }
        .brandctrgyfiltr .brand-button.active .bf-name{color:#fff}

        /* The carousel arrows. Swiper draws its own glyph through ::after; it is replaced
           rather than hidden so no second arrow can show through. */
        .brandctrgyfiltr .bcf-swiper-button-next,
        .brandctrgyfiltr .bcf-swiper-button-prev{
            width:42px;height:42px;border-radius:50%;
            background:#fff;border:1.5px solid var(--lc-gold);
            box-shadow:0 4px 14px rgba(0,0,0,.1);
            color:var(--lc-gold);
        }
        /* The glyph stays dark rather than taking --lc-gold. These arrows sit on a WHITE
           circle on a white page, and #ffef4d on white is barely legible - the gold it
           replaced had the contrast to carry it, the brand yellow does not. The ring keeps
           the yellow so the control still reads as part of the set. */
        .brandctrgyfiltr .bcf-swiper-button-next:after,
        .brandctrgyfiltr .bcf-swiper-button-prev:after{
            font-size:15px;font-weight:700;color:#1a1a1a;
        }

        /* ---- Sort By ------------------------------------------------------------------
           The native <select> stays in the DOM and stays the source of truth; the button
           and list below are a skin over it that writes back and fires `change`, so the
           existing #sort-by handler that rewrites the URL runs untouched. If the script
           does not run, .lc-sort-ready is never set and the plain select is what shows -
           the control still works, it is just unstyled. */
        /* Every declaration is !important, and that is not defensive habit - style.min.css
           carries `.sortingtabinrpage select{width:15%!important}` and
           `.brandctrgyfiltr .sortingtabinrpage select{width:100%!important}`. Without the
           same weight the width:1px lost, so the select stayed full width while absolutely
           positioned, and pushed the document 115px wider than a 387px phone viewport -
           the white strip down the right of every mobile page. left/top pin it inside the
           viewport so it cannot extend the page from its own offset either. */
        .sortingtab.lc-sort-ready select{
            position:absolute !important;
            left:0 !important;top:0 !important;
            width:1px !important;height:1px !important;
            margin:-1px !important;padding:0 !important;border:0 !important;
            overflow:hidden;white-space:nowrap;
            clip:rect(0 0 0 0);clip-path:inset(50%);
        }
        .sortingtab .lc-sort{position:relative;display:none}
        .sortingtab.lc-sort-ready .lc-sort{display:block}

        /* ---- THE CONTROL'S HEIGHT IS RESERVED BEFORE THE SCRIPT RUNS -------------------
           The page loaded with a native <select> 35px tall and then swapped in the pill at
           44px, so everything below it - the entire car grid - was pushed down 9px about
           three seconds into the load. Measured on production: CLS 0.19 on /car-listings/,
           the shift reported against DIV.allcarssec and DIV.filtermobbtn. It is the largest
           single layout shift on the site.

           ONE token, used by both the placeholder and the finished control, so the two
           cannot disagree. This is not an arbitrary height plucked to make a number go
           down: it is the pill's own height, and if its padding ever changes this is the
           line to change with it. The pill is the same height at every breakpoint - only
           its WIDTH is adjusted on mobile - so a single value is safe across screens.

           min-height rather than height, so a longer label is still free to wrap and grow
           instead of being clipped. */
        .sortingtab{--lc-sort-h:44px}
        .sortingtab:not(.lc-sort-ready) select{min-height:var(--lc-sort-h)}

        .sortingtab .lc-sort-btn{
            display:flex;align-items:center;gap:12px;
            min-height:var(--lc-sort-h);
            /* Taller than it was. On one line the label no longer needs two rows of height,
               so the padding is what gives the pill its presence instead. */
            min-width:210px;padding:12px 20px;
            background:var(--lc-ink);color:#fff;
            border:1.5px solid var(--lc-gold);border-radius:999px;
            box-shadow:0 6px 18px rgba(0,0,0,.18);
            cursor:pointer;text-align:left;
        }
        .sortingtab .lc-sort-btn .lc-ico{flex:0 0 18px;width:18px;height:18px;color:var(--lc-gold)}
        /* ONE line - "Sort By: Default" - not a stacked caption above a value.
           Baseline alignment rather than centre: the two have different font sizes, and
           centring them makes the smaller one sit visibly high against the larger. */
        .sortingtab .lc-sort-btn .lc-lbl{
            flex:1 1 auto;min-width:0;line-height:1.15;
            display:flex;align-items:baseline;gap:6px;
        }
        .sortingtab .lc-sort-btn .lc-lbl small{
            flex:0 0 auto;font-size:14px;font-weight:500;color:#b9b3a1;
        }
        .sortingtab .lc-sort-btn .lc-lbl span{
            flex:0 1 auto;min-width:0;font-size:16px;font-weight:700;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        }
        .sortingtab .lc-sort-btn .lc-caret{
            flex:0 0 16px;width:16px;height:16px;color:var(--lc-gold);
            transition:transform .18s ease;
        }
        .sortingtab .lc-sort[data-open="1"] .lc-caret{transform:rotate(180deg)}
        .sortingtab .lc-sort-btn:focus-visible{outline:2px solid var(--lc-gold);outline-offset:3px}

        .sortingtab .lc-sort-list{
            position:absolute;z-index:60;top:calc(100% + 8px);right:0;min-width:100%;
            margin:0;padding:6px;list-style:none;
            background:#141414;border-radius:18px;
            border:1px solid rgba(255,239,77,.45);
            box-shadow:0 18px 40px rgba(0,0,0,.45);
            display:none;
        }
        .sortingtab .lc-sort[data-open="1"] .lc-sort-list{display:block}
        .sortingtab .lc-sort-list li{margin:0}
        .sortingtab .lc-sort-list button{
            display:flex;align-items:center;gap:12px;width:100%;
            padding:11px 14px;border:0;border-radius:12px;background:transparent;
            color:#fff;font-size:15px;font-weight:500;white-space:nowrap;
            cursor:pointer;text-align:left;
        }
        .sortingtab .lc-sort-list button .lc-ico{flex:0 0 18px;width:18px;height:18px;color:var(--lc-gold)}
        .sortingtab .lc-sort-list button .lc-txt{flex:1 1 auto}
        .sortingtab .lc-sort-list button .lc-check{flex:0 0 16px;width:16px;height:16px;opacity:0}
        .sortingtab .lc-sort-list button:hover{background:rgba(255,239,77,.14)}
        .sortingtab .lc-sort-list button:focus-visible{outline:2px solid var(--lc-gold);outline-offset:-2px}
        .sortingtab .lc-sort-list button[aria-selected="true"]{
            background:linear-gradient(90deg,var(--lc-gold-lite),var(--lc-gold));
            color:#1a1a1a;font-weight:700;
        }
        .sortingtab .lc-sort-list button[aria-selected="true"] .lc-ico{color:#1a1a1a}
        .sortingtab .lc-sort-list button[aria-selected="true"] .lc-check{opacity:1}

        @media only screen and (max-width:767px){
            /* The original phone treatment, kept for the one page that still uses it: the
               main /car-listings/ screen, whose .sortingtab carries no .sortingtabinrpage
               and sits in its own narrow container. Unchanged. */
            .sortingtab .lc-sort-btn{min-width:0;width:100%}
            /* Right-anchoring a full-width control would push the panel off-screen. */
            .sortingtab .lc-sort-list{left:0;right:auto}

            /* ---- Inner listing pages (brand, fleet, location, offers) -------------------
               Centred on a phone, right-anchored on a desktop.

               On a wide screen the pill sits at the end of a row it shares with the brand
               strip, so flex-end is what lines it up with the content beside it. On a phone
               that row has collapsed and the pill is alone on its line - and alone against
               the left edge of a centred card below it, right-anchoring read as a stray
               control that had drifted into the corner rather than a deliberate position.

               Three declarations, because the desktop rule needs undoing in three places:
               the container is shrink-to-fit (width:auto !important) and pushed right
               (margin-left:auto), so widening it is what gives justify-content:center any
               room to work in. */
            .sortingtab.sortingtabinrpage.lc-sort-ready{
                width:100% !important;
                margin-left:0;
                justify-content:center;
            }

            /* Centred, not stretched: full-width the control stops reading as a pill and
               starts reading as a form field. min-width is restated because the rule above
               zeroes it at this breakpoint, and without it the pill shrinks to its text.

               Scoped to .sortingtabinrpage, like every rule in this block. The main
               /car-listings/ page carries a bare .sortingtab and sits in a different
               layout - its pill is left-aligned inside a narrow shrink-to-fit container.
               An unscoped version of this rule widened it from 194px to 210px, which is a
               page nobody asked about changing. Measured before and after. */
            .sortingtab.sortingtabinrpage .lc-sort-btn{
                min-width:210px;width:auto;max-width:100%;
            }

            /* Follows the button. The panel's min-width is the button's width but its
               content can be wider, so anchoring either edge could send it off-screen now
               that the button is in the middle; centring on the button cannot. */
            .sortingtab.sortingtabinrpage .lc-sort-list{
                left:50%;right:auto;transform:translateX(-50%);
            }
            /* Taller tile, bigger logo. In the reference the mark is about 40% of the tile's
               height; at 34px on a 96px tile it was 35% and read as a thumbnail with a
               caption rather than a brand tile. The extra 8px of height is what keeps the
               two wrapped lines of a long name fitting after the mark grew. */
            .brandctrgyfiltr .brand-button{min-height:104px;padding:13px 6px 11px}
            .brandctrgyfiltr .brand-button img{height:40px;max-width:64px}
            /* The tiles are narrow on a phone, and a single clipped line turned
               "Mercedes" into "Merc...", "Range Rover" into "Rang...". Two wrapped lines
               fit the real name; anything longer still clips, but at twice the room. */
            .brandctrgyfiltr .brand-button .bf-name{
                font-size:12px;line-height:1.2;
                white-space:normal;text-overflow:clip;
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
                overflow:hidden;
            }
        }
        @media (prefers-reduced-motion:reduce){
            .sortingtab .lc-sort-btn .lc-caret,
            .brandctrgyfiltr .brand-button{transition:none}
        }