/* 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;
  }
}