/* Top Cars Telford - centred social bar under the logo, hides on scroll-down.
   Added on top of the mirrored site; scoped to #header_v23 so the footer is untouched.
   Collapse uses grid-template-rows (not height/padding) so there is no layout thrash. */

.tct-social-bar{
  display:grid;
  grid-template-rows:1fr;
  width:100%;
  transition:grid-template-rows .35s ease;
}
.tct-social-inner{
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  padding:9px 0 3px;
  transform:translateY(0);
  opacity:1;
  transition:transform .35s ease, opacity .3s ease;
}
.tct-social-bar a{
  color:#141414;
  font-size:20px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.tct-social-bar a:hover,
.tct-social-bar a:focus-visible{
  color:#cc0000;
  transform:translateY(-2px);
}
.tct-social-bar a:focus-visible{ outline:2px solid #cc0000; outline-offset:3px; border-radius:3px; }
.tct-social-bar .cd5tiktok{ width:16px; height:16px; fill:currentColor; display:block; }

/* socials now live ONLY under the logo: suppress the mirrored native sets in the header */
#header_v23 .col-left .social-icon,
#header_v23 .mobiletopdiv .mob-social,
#header_v23 .sticky-phone .social-icon,
#header_v23 .menu-mobile .social-icon,
#header_v23 .toplink.hidden-md .social-icon{
  display:none !important;
}

/* desktop: lift the icons into the logo's top band so they don't clip the nav below */
@media (min-width:901px){
  #header_v23 .toplink{ min-height:158px; }
  .tct-social-inner{ padding-top:4px; padding-bottom:2px; }
}

/* keep the icons tidy on small screens */
@media (max-width:900px){
  .tct-social-inner{ gap:26px; padding:7px 0 2px; }
  .tct-social-bar a{ font-size:21px; }
  .tct-social-bar .cd5tiktok{ width:17px; height:17px; }
  /* drop the phone icon down so it lines up with the hamburger on the other side */
  #header_v23 .mobiletopdiv{ top:35px; }
}
@media (prefers-reduced-motion:reduce){
  .tct-social-bar,
  .tct-social-inner{ transition:opacity .2s ease; }
  .tct-social-bar.tct-hidden .tct-social-inner{ transform:none; }
}

/* search filter status bar (shown when arriving from the Search our collection form) */
.tct-search-status{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  max-width:1200px; margin:18px auto 4px; padding:12px 18px;
  background:#111; color:#fff; border-radius:6px;
  font-family:inherit; font-size:15px; line-height:1.4;
}
.tct-search-status strong{ color:#fff; }
.tct-search-status a{
  color:#fff; background:#cc0000; text-decoration:none; font-weight:700;
  padding:7px 14px; border-radius:4px; white-space:nowrap; transition:background .2s ease;
}
.tct-search-status a:hover{ background:#a30000; }
@media (max-width:600px){ .tct-search-status{ margin:14px 12px 4px; font-size:14px; } }

/* ============================================================
   Hero carousel: on mobile it uses owl items:1 + animateOut:fadeOut + loop,
   which slides the NEXT slide's button into view while the current one is still
   there (two buttons flash mid-transition). Stack the slides in place and let
   them cross-fade by opacity so nothing slides across the screen.
   ============================================================ */
/* LCP + CLS: the owl hero is display:none (0 height) until owl.js runs, so on slow
   mobile it (a) paints its image ~20s late and (b) shifts the page when it appears.
   Reserve its box (aspect-ratio matches the loaded 390x405) and paint the first slide's
   already-preloaded background immediately. owl takes over on init with no size change. */
@media (max-width:900px){
  #heroImage_v21{ display:block !important; }
  #heroImage_v21:not(.owl-loaded){ aspect-ratio:390 / 405; overflow:hidden; }
  #heroImage_v21:not(.owl-loaded) .item{ display:none !important; }
  #heroImage_v21:not(.owl-loaded) .item:first-child{
    display:block !important; width:100%; height:100%;
    background-size:cover !important; background-position:center !important;
  }
}
@media (max-width:900px){
  #heroImage_v21 .owl-stage{ transform:none !important; width:100% !important; }
  #heroImage_v21 .owl-stage .owl-item{
    position:absolute; top:0; left:0; right:0; width:100% !important;
    opacity:0; transition:opacity .7s ease; pointer-events:none;
  }
  #heroImage_v21 .owl-stage .owl-item.active{
    position:relative; opacity:1; pointer-events:auto;
  }
}

/* a11y contrast: the "Search our collection" panel sat on a 35%-opacity dark layer,
   so its white labels/values failed contrast over the hero image behind it. Make the
   panel solid enough for AA. */
#banner_v21 .innerWhiteBox.webbe-search-bar,
#banner_v21 .innerWhiteBox.webbe-search-bar.tabing_form,
#banner_v21 .tabing_form,
#search_bar_v21 .innerWhiteBox{ background-color:rgba(15,15,15,0.82) !important; }
#slider-range-value21, #slider-range-value22{ text-shadow:0 1px 3px rgba(0,0,0,.85); }

/* best-practices: keep the finance p/m banner images at their true aspect (no stretch) */
img[alt*="p/m"], img[alt*="p/m "]{ object-fit:contain; }

/* ============================================================
   Mobile polish pass (impeccable)
   ============================================================ */
@media (max-width:900px){
  /* The fixed bottom quick-bar (#foot-bar) overlays the last ~62px of every page.
     Body had 0 bottom padding, so the footer (incl. the Elev8 credit) sat behind it.
     Reserve space so nothing is hidden under the bar. */
  body{ padding-bottom:70px; }

  /* Open hamburger menu was position:static and only ~386px tall, so the page bled
     through below it with a white gap. Make the open menu fill the viewport cleanly.
     (Closed state is display:none, so these only apply while it is open; scoped to
     mobile so the desktop horizontal nav is untouched.) */
  #header_v23 #mobile-menu.menu-mobile{
    min-height:calc(100vh - 120px);
    min-height:calc(100dvh - 120px);
    background:#fff !important;
    padding-bottom:36px;
    box-sizing:border-box;
  }
}

/* select2 built-in search field summons the mobile keyboard; with tiny option lists it is pure annoyance */
.select2-search--dropdown{display:none!important}
/* readable car description */
.tct-desc p{margin:0 0 12px;line-height:1.65}
.tct-desc ul{margin:10px 0 18px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px 20px}
.tct-desc li{position:relative;padding-left:16px;line-height:1.45}
.tct-desc li:before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:#cc0000}
@media (max-width:600px){.tct-desc ul{grid-template-columns:1fr}}
/* Finance "per month" cards: images were stretched (width+height 100% with no object-fit) */
.imgdiv img{object-fit:cover;object-position:center 60%}

/* --------------------------------------------------------------
   CLS fix: the fixed bottom quick-bar (#foot-bar) is anchored to the
   bottom of the viewport. When the Font Awesome icon font arrives late
   its glyph metrics reflow the bar's height, and because it is bottom
   anchored the whole full-width bar jumps up (the biggest layout shift on
   mobile). Lock the bar and its icon boxes to fixed dimensions so an icon
   font swap can never change their size. Visual result is identical.
   -------------------------------------------------------------- */
/* style.min.css paints the bar at bottom:25px, then an inline <style> later in
   the document overrides it to bottom:0. That 25px jump (a full-width bar) is
   the real CLS culprit. socials.css is render-blocking (parsed before first
   paint), so pin bottom:0 here to match the final state from the very start.
   Final appearance is unchanged (it always ends at bottom:0). */
#foot-bar{height:62px;bottom:0!important}
#foot-bar .foot-bar{height:62px;align-items:center}
/* Force the fixed bottom bar to exist + sit on its own composited layer from
   the first render-blocking paint, so its first layout isn't deferred past FCP
   (which Lighthouse counted as a 0,0,0,0 -> visible "appear" shift). */
@media (max-width:900px){#foot-bar{display:block!important;transform:translateZ(0);will-change:transform;contain:layout paint}}

/* NOTE: the hero (#heroImage_v21 Owl slider) is left to its native CD5 behaviour
   by request. The pre-existing critical CSS (<style id="e8-crit">) reserves its
   pre-load height; we do not override Owl's own layout. */

/* socials.js appends the social bar into .logo after load; reserve its height
   so inserting it never nudges the header (was a small .logo layout shift). */
.tct-social-bar{min-height:30px}

/* --------------------------------------------------------------
   The REAL mobile CLS: many images ship with no width/height, so they occupy
   zero space until they lazy-load, then push everything below. The worst are
   the partner-logo strip INSIDE the hero overlay (reflows the giant hero =
   the ~0.7 spike) and the header logo (grows the header, shoves the hero).
   Reserve each one's real rendered height so loading changes nothing. Sizes
   measured from the live layout at 412px.
   -------------------------------------------------------------- */
/* Cookie banner: keep it in the render tree from first paint (its inline style
   is display:none, revealed to display:block by JS after load = a large "appear"
   CLS on a fixed element). Instead show/hide it with a composited transform, so
   it is present at first paint (off-screen) and slides in with zero layout shift.
   cd5_cookienotice.js now toggles .cb-show instead of display. */
#consent-banner{display:block!important;transform:translateY(110%);transition:transform .35s ease;will-change:transform;pointer-events:none}
#consent-banner.cb-show{transform:translateY(0);pointer-events:auto}

.container-center .plogos{min-height:59px}                 /* hero partner-logo row */
.m168_reviewimage{height:22px;width:auto}                  /* review-site logos */
#header_v23 .logo a img,#header_v23 .navbar-brand img{height:74px;width:auto}   /* header logo reserves header height */
.carstock-list ul li a img.lazyload{width:100%;aspect-ratio:182/116;height:auto;object-fit:cover}  /* car tiles */
.m90_highly_rated img{height:14px;width:auto}              /* rated badge */
#foot-bar .foot-bar_listitem{height:62px}
#foot-bar .foot-bar_link{height:62px;box-sizing:border-box}
#foot-bar .foot-bar_link i{display:block;height:22px;line-height:22px;min-width:1em;text-align:center}

/* social bar: each link now sits inside a role="listitem" span (accessible
   list structure); keep them behaving exactly like the old flex items */
.tct-social-inner .tct-social-item{display:inline-flex;align-items:center}