/* Scrap.Autos v5.7 - permanent viewport/footer visibility correction.
 * The dock is a sibling of the clipped hero, not a child: no ancestor can hide it.
 * This stylesheet intentionally changes only the homepage.
 */
html:has(body.sa-immersive-home),
body.sa-immersive-home {
  height:100%;
  overflow:hidden!important;
}
body.sa-immersive-home main.sa-one-screen-home,
body.sa-immersive-home .sa-story-cinema {
  box-sizing:border-box!important;
  height:100svh!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  overflow:clip!important;
}
/* Reserve a real place for both the compact header and the bottom dock. */
body.sa-immersive-home .sa-story-cinema .sa-cinema-inner {
  box-sizing:border-box!important;
  height:100%!important;
  min-height:0!important;
  padding-top:clamp(78px,10vh,100px)!important;
  padding-bottom:clamp(88px,12vh,110px)!important;
}
body.sa-immersive-home .sa-story-cinema .sa-cinema-copy {
  box-sizing:border-box!important;
  min-height:0!important;
  max-height:calc(100dvh - 180px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* Visible, keyboard-reachable home dock. It sits outside the clipped hero. */
body.sa-immersive-home .sa-home-dock {
  box-sizing:border-box!important;
  display:block!important;
  position:fixed!important;
  inset-inline:clamp(9px,1.2vw,18px)!important;
  bottom:max(10px, env(safe-area-inset-bottom, 0px))!important;
  top:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:50px!important;
  z-index:100!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:16px!important;
  background:rgba(10,17,24,.9)!important;
  -webkit-backdrop-filter:blur(16px) saturate(115%)!important;
  backdrop-filter:blur(16px) saturate(115%)!important;
  box-shadow:0 8px 36px rgba(0,0,0,.22)!important;
  color:#fff!important;
}
body.sa-immersive-home .sa-home-dock .sa-cinema-bottom-inner {
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:min(calc(100% - 30px),1380px)!important;
  height:auto!important;
  min-height:50px!important;
  margin-inline:auto!important;
  padding-block:5px!important;
}
body.sa-immersive-home .sa-home-dock .sa-proof-line {
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px 14px!important;
  font-size:clamp(.57rem,.75vw,.68rem)!important;
  color:#f1f3f4!important;
}
body.sa-immersive-home .sa-home-dock .sa-legal-links {
  display:flex!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:5px 14px!important;
  margin-left:auto!important;
}
body.sa-immersive-home .sa-home-dock .sa-legal-links a {
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:2px 0!important;
  color:#fff!important;
  text-decoration-color:rgba(255,255,255,.6)!important;
  text-shadow:none!important;
  font-size:clamp(.6rem,.76vw,.72rem)!important;
  font-weight:700!important;
}
body.sa-immersive-home .sa-home-dock .sa-legal-links a:focus-visible {
  outline:2px solid #edc58c;
  outline-offset:4px;
  border-radius:2px;
}
/* No excessive card height or footer overlap on short laptops. */
@media (min-width:821px) and (max-height:800px) {
  body.sa-immersive-home .sa-story-cinema .sa-cinema-inner {
    padding-top:75px!important;
    padding-bottom:86px!important;
  }
  body.sa-immersive-home .sa-story-cinema .sa-cinema-copy {
    max-height:calc(100dvh - 166px)!important;
    padding:clamp(17px,2.4vh,26px)!important;
  }
  body.sa-immersive-home .sa-story-cinema .sa-hero-brand {
    width:min(204px,65%)!important;
    margin-bottom:8px!important;
  }
  body.sa-immersive-home .sa-story-cinema .sa-kicker { margin-bottom:7px!important; }
  body.sa-immersive-home .sa-story-cinema h1 { font-size:clamp(2.15rem,4.3vw,3.5rem)!important; }
  body.sa-immersive-home .sa-story-cinema .sa-hero-lead { margin-top:10px!important; line-height:1.47!important; }
  body.sa-immersive-home .sa-story-cinema .sa-hero-actions { margin-top:13px!important; }
}
@media (max-width:820px) {
  body.sa-immersive-home .sa-story-cinema .sa-cinema-inner {
    padding-top:72px!important;
    padding-bottom:94px!important;
  }
  body.sa-immersive-home .sa-story-cinema .sa-cinema-copy {
    max-height:calc(100dvh - 172px)!important;
    overflow-y:auto!important;
  }
  body.sa-immersive-home .sa-home-dock {
    inset-inline:6px!important;
    border-radius:13px!important;
  }
  body.sa-immersive-home .sa-home-dock .sa-cinema-bottom-inner {
    width:calc(100% - 16px)!important;
    min-height:47px!important;
    padding-block:4px!important;
  }
  body.sa-immersive-home .sa-home-dock .sa-proof-line {display:none!important;}
  body.sa-immersive-home .sa-home-dock .sa-legal-links {
    width:100%!important;
    margin:0!important;
    justify-content:center!important;
    gap:4px 12px!important;
  }
  body.sa-immersive-home .sa-home-dock .sa-legal-links a {
    font-size:clamp(.59rem,2.3vw,.71rem)!important;
    min-height:32px!important;
  }
}
@media (max-height:580px) {
  body.sa-immersive-home .sa-story-cinema .sa-cinema-inner {padding-top:68px!important;padding-bottom:78px!important;}
  body.sa-immersive-home .sa-story-cinema .sa-cinema-copy {max-height:calc(100dvh - 145px)!important;}
}