/* Motor Atlas mobile catalogue upgrade
   Desktop/laptop presentation is intentionally left untouched.
   Only pagination controls have shared styling outside the phone breakpoint. */

.catalogue-pagination{
  margin:2rem 0 3rem;
  padding:1rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--border);
}
.catalogue-pagination[hidden]{display:none!important}
.page-status{color:var(--muted);font-size:.76rem;letter-spacing:.04em}
.page-controls{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}
.page-controls button{
  min-width:2.55rem;
  min-height:2.55rem;
  padding:.45rem .7rem;
  border:1px solid #344139;
  border-radius:.6rem;
  background:#0d130f;
  color:#d8dfda;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.page-controls button:hover:not(:disabled){border-color:var(--lime);transform:translateY(-1px)}
.page-controls button.active{background:var(--lime);border-color:var(--lime);color:#071006;font-weight:700}
.page-controls button:disabled{opacity:.28;cursor:not-allowed}
.page-ellipsis{padding:0 .15rem;color:var(--muted)}

@media(max-width:47.99rem){
  /* Phone shell */
  html{scroll-padding-top:4.1rem}
  body{font-size:.9rem}
  header{
    min-height:4rem!important;
    height:4rem!important;
    padding:.55rem .75rem!important;
    gap:.6rem!important;
  }
  header .brand{font-size:.78rem!important;letter-spacing:1.35px!important;gap:.45rem!important}
  header .mark{font-size:1.55rem!important}
  .mobile-menu-toggle{
    width:2.45rem!important;
    height:2.45rem!important;
    min-width:2.45rem!important;
    min-height:2.45rem!important;
    border-radius:.55rem!important;
  }
  header nav{
    top:calc(100% + .35rem)!important;
    left:.7rem!important;
    right:.7rem!important;
    padding:.5rem!important;
    border-radius:.85rem!important;
  }
  header nav a,header nav button{min-height:2.55rem!important;padding:.62rem .75rem!important}

  main{padding-inline:.72rem!important}

  /* Compact hero */
  .intro{
    min-height:235px!important;
    padding:2rem 0 1.45rem!important;
    align-items:flex-end!important;
  }
  .intro::before{inset:-10px -.72rem 0!important}
  .intro::after{font-size:2.35rem!important;right:-.5rem!important;bottom:.55rem!important}
  .intro .eyebrow{font-size:.62rem!important;letter-spacing:.16em!important}
  .intro .eyebrow::before{width:22px!important}
  .intro h1{
    margin:.18rem 0 .25rem!important;
    max-width:100%!important;
    font-size:clamp(2.65rem,13vw,3.7rem)!important;
    line-height:.9!important;
    white-space:normal!important;
  }
  .intro p{font-size:.82rem!important;line-height:1.45!important;margin:0!important}
  .index-note{display:none!important}

  .section-title{
    margin-top:1.35rem!important;
    margin-bottom:.75rem!important;
    gap:.2rem!important;
  }
  .section-title h2{font-size:1.75rem!important;line-height:1!important;margin:0!important}
  .section-title>span{font-size:.72rem!important;line-height:1.35!important}

  /* Manufacturer and catalogue controls */
  .brand-browser{
    margin:0 0 .75rem!important;
    padding:.78rem!important;
    border-radius:.85rem!important;
  }
  .brand-browser-head{margin-bottom:.55rem!important;gap:.12rem!important}
  .brand-browser-head strong{font-size:1.05rem!important}
  .brand-browser-head span{font-size:.58rem!important;letter-spacing:.09em!important}
  .brand-switch{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:.4rem!important;
    margin-inline:-.25rem!important;
    padding:.1rem .25rem .3rem!important;
    scrollbar-width:none!important;
  }
  .brand-switch::-webkit-scrollbar{display:none}
  .brand-switch button{
    flex:0 0 auto!important;
    min-height:2.35rem!important;
    padding:.5rem .68rem!important;
    border-radius:.65rem!important;
    font-size:.7rem!important;
  }
  .brand-switch button small{font-size:.58rem!important}

  .collection-switch{
    margin:.7rem 0!important;
    gap:.4rem!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding-bottom:.2rem!important;
    scrollbar-width:none!important;
  }
  .collection-switch::-webkit-scrollbar{display:none}
  .collection-switch button{
    flex:0 0 auto!important;
    min-height:2.35rem!important;
    padding:.48rem .72rem!important;
    font-size:.7rem!important;
  }

  .toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.5rem!important;
    margin-bottom:.55rem!important;
  }
  .toolbar .search,.toolbar .selectlabel{
    min-height:2.7rem!important;
    padding:.48rem .68rem!important;
    border-radius:.68rem!important;
  }
  .toolbar input,.toolbar select{font-size:.82rem!important}
  .selectlabel{font-size:.6rem!important;letter-spacing:.08em!important}

  .filterline{margin-top:.55rem!important}
  .tabs{
    display:flex!important;
    gap:.35rem!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding-bottom:.2rem!important;
    scrollbar-width:none!important;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    flex:0 0 auto!important;
    min-height:2.3rem!important;
    padding:.44rem .65rem!important;
    font-size:.68rem!important;
  }
  #count{font-size:.68rem!important;margin:.45rem 0 0!important;padding-bottom:.45rem!important}
  .scope{
    margin:.55rem 0 1rem!important;
    padding:.65rem .72rem!important;
    font-size:.67rem!important;
    line-height:1.5!important;
  }
  .scope span{font-size:.58rem!important}

  /* Compact single-column car cards */
  .brand-group{
    margin:0 0 1.35rem!important;
    padding:.55rem 0 .8rem!important;
  }
  .brand-group::before{left:-.72rem!important;right:-.72rem!important}
  .brand-group-heading{
    margin:0 0 .65rem!important;
    padding:0 0 .5rem!important;
    align-items:flex-end!important;
  }
  .brand-group-heading .eyebrow{font-size:.54rem!important;letter-spacing:.13em!important}
  .brand-group-heading h2{font-size:1.75rem!important;line-height:1!important}
  .brand-group-heading>span{font-size:.62rem!important}
  .brand-grid{grid-template-columns:1fr!important;gap:.75rem!important}

  .card{
    border-radius:.8rem!important;
    box-shadow:0 8px 22px #0005!important;
  }
  .card:hover{transform:none!important}
  .photo{
    height:auto!important;
    aspect-ratio:16/9!important;
    min-height:0!important;
  }
  .photo img,.photo-open img{width:100%!important;height:100%!important;object-fit:cover!important}
  .bodytag{padding:.3rem .48rem!important;font-size:.58rem!important;top:.55rem!important;left:.55rem!important}
  .rating{transform:scale(.88);transform-origin:top right;top:.45rem!important;right:.45rem!important}
  .view-badge{font-size:.57rem!important;padding:.32rem .48rem!important}

  .cardbody{padding:.78rem!important}
  .modelyear{font-size:.58rem!important;letter-spacing:.09em!important;margin-bottom:.18rem!important}
  .card h2{font-size:1.65rem!important;line-height:1!important;margin:.05rem 0 .2rem!important}
  .trim{font-size:.72rem!important;line-height:1.35!important;margin:.15rem 0 .65rem!important}
  .specstrip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    margin:.45rem 0 .65rem!important;
  }
  .specstrip>div{padding:.45rem .35rem!important;min-width:0!important}
  .specstrip span{font-size:.5rem!important;letter-spacing:.07em!important}
  .specstrip b{font-size:.72rem!important;line-height:1.15!important;overflow-wrap:anywhere!important}
  .specstrip b small{font-size:.54rem!important}
  .cardactions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:.55rem!important;
  }
  .cardactions .view{min-height:2.45rem!important;padding:.5rem .7rem!important;font-size:.72rem!important}
  .compare{min-height:2.45rem!important;font-size:.68rem!important;white-space:nowrap!important}
  .compare input{width:1rem!important;height:1rem!important}

  /* Pagination is compact and thumb-friendly */
  .catalogue-pagination{
    margin:1rem 0 2rem!important;
    padding:.8rem 0 0!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:.65rem!important;
  }
  .page-status{font-size:.66rem!important}
  .page-controls{gap:.3rem!important;width:100%!important}
  .page-controls button{
    min-width:2.35rem!important;
    min-height:2.35rem!important;
    padding:.35rem .5rem!important;
    border-radius:.55rem!important;
    font-size:.75rem!important;
  }

  /* Full-screen mobile vehicle details */
  dialog{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
  }
  .dialogtop{position:sticky!important;top:0!important;z-index:5!important;padding:.6rem .75rem!important}
  #dialogContent{padding:.7rem!important}
  .detailhero{grid-template-columns:1fr!important;gap:.75rem!important;padding-bottom:.7rem!important}
  .detailhero .detail-photo,.detailhero img{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  .detailhero h2{font-size:2.35rem!important;line-height:.92!important;margin:.08rem 0 .25rem!important}
  .detailhero p{font-size:.78rem!important}
  .showroom-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.45rem!important}
  .showroom-stat{padding:.7rem!important}
  .showroom-tabs{gap:.3rem!important}
  .showroom-tabs button,.viewer-tabs button{min-height:2.4rem!important;padding:.45rem .65rem!important;font-size:.7rem!important}
  .specsections{grid-template-columns:1fr!important;gap:.55rem!important}
  .specsections section{padding:.75rem!important}
  .specsections h3{font-size:.9rem!important}
  dl>div{font-size:.73rem!important;padding:.45rem 0!important}
  .sourcebox,.detailnote{font-size:.72rem!important;padding:.7rem!important}

  /* Keep fixed desktop furniture off phones */
  .atlas-rail,.atlas-progress{display:none!important}
  .comparebar{
    width:calc(100vw - .8rem)!important;
    max-width:calc(100vw - .8rem)!important;
    left:.4rem!important;
    right:.4rem!important;
    bottom:max(.4rem,env(safe-area-inset-bottom))!important;
    padding:.55rem!important;
    border-radius:.75rem!important;
  }
  .comparebar>div:first-child{font-size:.7rem!important}
  .comparebar button{min-height:2.35rem!important;font-size:.7rem!important}

  footer{
    margin-bottom:4.5rem!important;
    padding-top:1rem!important;
    gap:.55rem!important;
    font-size:.72rem!important;
  }
  footer p{font-size:.7rem!important;line-height:1.5!important}
  footer button{font-size:.7rem!important;min-height:2.35rem!important}
  .quick-download{width:28px!important;height:28px!important}
}

@media(max-width:22rem){
  .intro h1{font-size:2.45rem!important}
  .cardbody{padding:.7rem!important}
  .specstrip{grid-template-columns:1fr 1fr!important}
  .specstrip>div:last-child{grid-column:1/-1}
  .page-controls{gap:.2rem!important}
  .page-controls button{min-width:2.15rem!important;min-height:2.15rem!important}
}

@media(prefers-reduced-motion:reduce){
  .page-controls button{transition:none!important}
}