/* Phones and small tablets – loaded last */

/* grid children must be allowed to shrink (a long photo strip otherwise stretches the whole page) */
.car-top>*,.car-body>*,.catalog>*,.two-col>*,.hero .wrap>*,.calc>*{min-width:0}
.gallery{min-width:0;max-width:100%}
.thumbs{max-width:100%;-webkit-overflow-scrolling:touch}
html,body{overflow-x:hidden}

@media (max-width:1020px){
  .car-top,.car-body,.two-col{grid-template-columns:minmax(0,1fr)}
  .car-top{gap:18px;padding-bottom:24px}
  .car-body{gap:0}
}

@media (max-width:620px){
  .wrap{padding-left:16px;padding-right:16px}
  .crumbs{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:12px}

  /* gallery: taller frame so tall phone photos use the space */
  .gallery .main{aspect-ratio:4/5;max-height:72vh;border-radius:18px}
  .gallery .nv{width:38px;height:38px}
  .gallery .nv.prev{left:8px}.gallery .nv.next{right:8px}
  .thumbs{gap:8px}
  .thumbs button{width:70px;height:52px;border-width:2px}

  /* price / contact card */
  .buy{padding:18px;border-radius:20px}
  .buy h1{font-size:1.3rem}
  .buy .price{font-size:1.75rem;margin:8px 0 12px}
  .buy .q{padding:9px 10px;font-size:.86rem}
  .buy .mini{gap:8px}
  .buy .mini button{flex:1 1 90px;min-width:0;padding:9px 6px;font-size:.84rem}
  .panel{padding:18px;border-radius:20px;margin-bottom:16px}
  .panel h2{font-size:1.1rem}
  .spec-table div{padding:9px 0;font-size:.94rem}
  .xchip{font-size:.86rem;padding:7px 10px}
  .desc{font-size:.96rem}

  /* header / chrome */
  .topbar .wrap{padding-top:6px;padding-bottom:6px;font-size:.8rem}
  .header .wrap{height:64px}
  .nav{inset:64px 0 auto 0;max-height:calc(100vh - 64px);overflow:auto}
  .float-wa{right:12px;bottom:12px;gap:8px}
  .float-wa a{width:46px;height:46px}
  .float-wa .ic{width:22px;height:22px}
  .cmp-bar .wrap{padding-top:2px;padding-bottom:2px}
  .lightbox .nv{width:42px;height:42px}
  .lightbox .prev{left:8px}.lightbox .next{right:8px}
  .modal{padding:10px}
  .modal .box{padding:20px;border-radius:18px}
  .page-head{padding:28px 0}
  .grid{gap:16px}
  .section-head{margin-bottom:20px}
}

/* car page: sticky contact bar instead of the floating chat buttons */
.mbar{display:none}
@media (max-width:820px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(19,20,23,.97);border-top:1px solid #2a2d34}
  .mbar .btn{flex:1;padding:11px 8px;min-width:0;box-shadow:none}
  body[data-page="car"] .footer{padding-bottom:calc(26px + 74px)}
  body[data-page="car"] .float-wa{display:none}
  body[data-page="car"] .cmp-bar{bottom:64px}
}
@media (max-width:620px){
  .buy .mini button{flex-direction:column;gap:3px;padding:8px 4px;font-size:.78rem;line-height:1.2}
}

/* the compare bar must be fully hidden until a car is selected */
.cmp-bar{visibility:hidden}
.cmp-bar.on{visibility:visible}

/* home search: 8 filters + button */
.search-grid .btn{grid-column:1/-1}
@media (min-width:1021px){.search-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.req-band{padding:22px;gap:14px;border-radius:24px}.req-band .btn{width:100%}}