/* SpecSix - responsive.css */
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .btn-search{min-width:320px}
  .spec-summary .pill:nth-of-type(n+3){display:none}
  .card-grid.four{grid-template-columns:repeat(2,1fr)}
  .build-card{padding:56px}
}
@media (max-width:1100px){
  .results-layout{grid-template-columns:1fr}
  .aside{position:fixed;top:0;left:0;bottom:0;z-index:150;width:min(380px,90vw);max-height:none;border-radius:0;border:0;transform:translateX(-102%);transition:transform .45s var(--ease)}
  .aside.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.2)}
  .aside-close{display:grid}
  .only-mobile{display:inline-flex!important}
  .step{grid-template-columns:minmax(0,1fr);gap:18px}
  .step-label{display:flex;align-items:baseline;gap:12px}
  .step-label p{display:none}
  .foot-left{flex-direction:column;align-items:flex-start;gap:10px}
  .about-grid,.cx-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .cx-mock{overflow-x:auto}
  .build-card{grid-template-columns:1fr}
  .dt-cats{grid-template-columns:repeat(2,1fr)}
  .slot-txt span{display:none}
}
@media (max-width:900px){
  :root{--hdr-h:64px}
  .main-nav{position:fixed;top:var(--hdr-h);left:0;right:0;flex-direction:column;gap:0;padding:8px 20px 20px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s}
  .main-nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--ease),visibility 0s}
  .main-nav a{padding:14px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,.06)}
  .main-nav a::after{display:none}
  .hdr-burger{display:grid}
  .hdr-btn .lbl{display:none}
  .hdr-btn.account{border:0;margin-left:0}
  .hero-stats{gap:16px}
  .hero-stats li{min-width:0;flex:1}
  .hero-blueprint{opacity:.45;width:90vw;right:-20vw;top:40px}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-3>.field:first-child{grid-column:1/-1}
  .sc-foot{flex-direction:column;align-items:stretch;gap:14px}
  .foot-right{align-items:stretch}
  .btn-search{min-width:0;width:100%}
  .dt-top{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"media" "info" "seller"}
  .dt-seller{padding:0 36px 30px}
  .dt-seller .dt-dealer{margin-top:0}
  .dt-media{min-height:0;aspect-ratio:16/10}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-top>div:first-child{grid-column:1/-1}
  .tray-label{display:none}
  .options-head{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .container{padding:0 16px}
  .hero{padding:56px 0 40px}
  .hero .lead{font-size:15.5px}
  .hero-stats strong{font-size:24px}
  .search-section::before{height:120px}
  .search-card{padding:26px 18px 0;border-radius:6px}
  .sc-head{flex-direction:column;gap:14px;padding-bottom:22px}
  .sc-head h2{font-size:26px}
  .focus-pill{white-space:normal;height:auto;padding:8px 14px;line-height:1.35}
  .step{padding:24px 0}
  .grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hdr{gap:12px}
  .hdr-btn.account{display:none}
  .hdr-btn{padding:0 9px}
  .wordmark{font-size:16px}
  .ogrid{grid-template-columns:1fr}
  .sc-foot{margin:0 -18px;padding:14px 18px;border-radius:0 0 6px 6px}
  .foot-left .seg{width:100%}
  .foot-left .seg button{flex:1}
  .spec-summary{display:none}
  .btn-search{height:58px;padding:0 8px 0 18px;gap:12px}
  .btn-search .main{font-size:15.5px}
  .btn-search .count{height:40px;padding:0 10px;font-size:11.5px}
  .acc-t small{display:none}
  section.block{padding:72px 0}
  .results{padding:52px 0 72px}
  .toolbar{align-items:flex-start;flex-direction:column}
  .toolbar-right{width:100%}
  .sort{flex:1}
  .sort>span{display:none}
  .sort .select{min-width:0;flex:1}
  .card-grid,.card-grid.four{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .build{padding:72px 0}
  .build-card{padding:32px 22px}
  .cx-mock th,.cx-mock td{padding:10px 8px;font-size:12.5px}
  .ft-top{grid-template-columns:1fr}
  .tray-in{gap:12px;padding:10px 0}
  .slots{grid-template-columns:repeat(4,52px);gap:6px}
  .slot{height:44px;padding:0}
  .slot.filled .slot-txt,.slot.vacant span.t{display:none}
  .slot.vacant{padding:0}
  .slot-img{width:100%;height:100%}
  .slot .x{top:-6px;right:-6px;transform:none;width:20px;height:20px;background:var(--graphite-3);color:var(--white)}
  .tray-acts{margin-left:auto;gap:10px}
  .tray-acts .btn{height:46px;padding:0 14px;font-size:13.5px}
  .tray-acts .link-btn{display:none}
  .ov-head{padding:0 16px;gap:12px}
  .ov-head .wordmark{display:none}
  .ov-head .ttl{padding-left:0;border-left:0}
  .switch .sw-t{display:none}
  .cmp-scroll{padding:0 12px 40px}
  table.cmp col.lbl-col{width:128px}
  table.cmp col.car-col{width:188px}
  table.cmp col.add-col{width:150px}
  .cmp-legend h3{font-size:18px}
  .cmp-legend span{display:none}
  .cmp tbody th,.cmp tbody td{font-size:13px;padding:12px 8px}
  .cmp-car h4{font-size:14px}
  .cmp-car .row-acts{display:none}
  .modal{padding:0;place-items:end stretch}
  .modal-card{max-height:92vh;border-radius:12px 12px 0 0}
  .dt-info{padding:24px 18px}
  .dt-seller{padding:0 18px 24px}
  .dt-body{padding:6px 18px 32px}
  .dt-cats{grid-template-columns:1fr;gap:18px}
  .dt-info h2,.dt-info .pr{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}