/* RoadHelp responsive layout corrections v49. */
/* Contacts: these cards have no numeric rail. The generic mobile .steps
   layout must not place their heading in its 40px counter column. */
.pages-v3.page-contacts .p3-safety-section .steps>div{
  display:block;
  min-width:0;
}
.pages-v3.page-contacts .p3-safety-section .steps h3{
  margin:0 0 12px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.pages-v3.page-contacts .p3-safety-section .steps p{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
}
/* Text inside a flex channel must be allowed to shrink at narrow widths. */
.pages-v3.page-contacts .p3-channels a>span:not(.p3-channel-symbol){
  min-width:0;
  overflow-wrap:anywhere;
}
.pages-v3.page-contacts .p3-company-info .contact-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pages-v3.page-contacts .contact-list li{
  min-width:0;
  overflow-wrap:anywhere;
}
@media(max-width:760px){
  .pages-v3.page-contacts .p3-safety-section .steps{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .pages-v3.page-contacts .p3-safety-section .steps>div{
    margin-bottom:0;
    padding-top:18px;
  }
  .pages-v3.page-contacts .p3-safety-section .steps p{
    font-size:14px;
    line-height:1.75;
  }
}
@media(max-width:360px){
  .pages-v3.page-contacts .p3-channels strong{font-size:20px;}
}

/* Battery jump navigation: labels must not shrink below their text width.
   Keep the existing horizontal scroll instead of letting numeric markers
   collide with text in adjacent links on narrow screens. */
.battery-v3 .bv-page-nav a{flex:0 0 auto;min-width:max-content}
.battery-v3 .bv-page-nav a>span{flex:none}

/* The address card was absolutely positioned across the photo caption.
   Keep it in normal flow so both the caption and destination stay readable. */
.service-kat-v3.sv5-specialist .s5-kat-visual{padding-bottom:0}
.service-kat-v3.sv5-specialist .s5-kat-route{position:relative;inset:auto;width:100%;margin-top:12px}


/* Service hub mosaic: allow labels to shrink inside their grid cell and give
   the full intro width to the mosaic before its two small tiles get cramped. */
.pages-v3.page-services.primary-hub-v5 .p3-service-mosaic a>span{
  grid-template-columns:minmax(0,1fr) 22px;
  gap:4px 8px;
}
.pages-v3.page-services.primary-hub-v5 .p3-service-mosaic :is(strong,small){
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
@media(max-width:1100px){
  .pages-v3.page-services.primary-hub-v5 .p3-service-mosaic strong{
    font-size:clamp(22px,2.6vw,28px);
  }
}
@media(max-width:900px){
  .pages-v3.page-services.primary-hub-v5 .p3-services-intro{
    display:block;
  }
  .pages-v3.page-services.primary-hub-v5 .p3-service-mosaic{
    margin-top:28px;
  }
}
@media(max-width:420px){
  .pages-v3.page-services.primary-hub-v5 .p3-service-mosaic{
    grid-template-columns:minmax(0,1fr);
  }
  .pages-v3.page-services.primary-hub-v5 .p3-service-mosaic>a,
  .pages-v3.page-services.primary-hub-v5 .p3-service-mosaic .p3-mosaic-main{
    grid-column:auto;
    aspect-ratio:16/7;
  }
  .pages-v3.page-services.primary-hub-v5 .p3-service-mosaic strong{
    font-size:26px;
  }
}

/* Keep the vehicle choices legible in the narrower calculator column. */
.sc-price-page .sc-vehicles>button{min-width:0}
.sc-price-page .sc-vehicles :is(strong,span){max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
@media(max-width:1100px){.sc-price-page .sc-vehicles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}