/* AUTOMART — "Автомашин үзэх" каталог хэсгийн загвар. cars.js-тэй хамт ажиллана. */

.cars{
  position:relative;
  padding:120px max(45px,calc((100vw - var(--max))/2));
  background:linear-gradient(180deg,#fff 0%,#faf9f7 62%,#f6f4f1 100%);
}
.cars-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:28px;
  margin-bottom:38px;
}
/* Маркийн зурвасыг гарчгаас нимгэн зураасаар салгаж, тусдаа блок болгоно. */
.cars #homeBrands{
  margin:0 0 30px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.cars-head>.section-tag{grid-column:1/-1;margin-bottom:22px}
.cars h2{
  margin:0;
  font-size:clamp(49px,5vw,83px);
  line-height:.94;
}
.cars h2 em{font-style:normal;color:var(--red)}
.cars-head p{
  justify-self:end;
  max-width:430px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

/* Хэрэгслийн мөр: шүүлтүүр + эрэмбэлэлт. */
.car-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  margin:44px 0 22px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.car-chips{display:flex;flex-wrap:wrap;gap:9px}
.car-chip{
  height:42px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.car-chip:hover{border-color:rgba(16,17,20,.28);transform:translateY(-2px)}
.car-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.car-chip-count{font-size:9px;font-weight:700;opacity:.5}
.car-chip.active .car-chip-count{opacity:.65}
.car-sort{display:flex;align-items:center;gap:12px}
.car-sort label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
}
.car-sort select{
  height:42px;
  padding:0 38px 0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%23101114' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/16px;
  color:var(--ink);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.car-count{
  margin:0 0 26px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Карт. */
.car-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.car-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,0,0,.06);
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.05);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
  animation:carIn .55s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes carIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.car-card:hover{transform:translateY(-10px);box-shadow:0 30px 70px rgba(0,0,0,.1)}
.car-card:focus-within{box-shadow:0 0 0 2px var(--red),0 30px 70px rgba(0,0,0,.1)}
.car-media{
  position:relative;
  height:252px;
  display:grid;
  place-items:center;
  padding:30px 28px 22px;
  background:radial-gradient(120% 96% at 50% 16%,#fff 0%,#f2f0ec 88%);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.car-media img{
  position:relative;
  z-index:2;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:200px;
  object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.22));
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.car-card:hover .car-media img{transform:scale(1.06)}
.car-floor{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:30px;
  width:58%;
  height:16px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(16,17,20,.17);
  filter:blur(12px);
}
.car-badge{
  position:absolute;
  z-index:3;
  left:20px;
  top:20px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
}
.car-fav{
  position:absolute;
  z-index:3;
  right:18px;
  top:18px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--ink);
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.car-fav svg{width:17px;height:17px}
.car-fav:hover{transform:scale(1.08);border-color:var(--red);color:var(--red)}
.car-fav.is-saved{background:var(--red);border-color:var(--red);color:#fff}
.car-fav.is-saved svg path{fill:currentColor}
.car-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:22px 26px 24px;
}
.car-body h3{
  margin:0;
  font-size:19px;
  line-height:1.15;
  letter-spacing:-.035em;
}
.car-brand{
  display:block;
  margin-bottom:7px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
}
/* Үнэ зарлаагүй — тоо биш тул арай жижиг, тайван өнгөтэй. */
.car-price.is-ask{font-size:15px;letter-spacing:-.02em;color:var(--ink)}

/* Лого байвал нэрийн оронд — жижиг ч тод, мөрийн өндрийг ихэсгэхгүй. */
/* Марк бүрийн лого яг ижил өндөртэй хайрцагт багтана — аль нэг нь бусдаасаа
 * том харагдахгүй. Өндөр нь машины нэрнээс (19px) бага байхаар 17px. */
.car-brand{display:flex;align-items:center;height:19px}
.car-brand .brand-mark{
  display:block;
  height:17px;
  width:auto;
  max-width:118px;
  object-fit:contain;
  object-position:left center;
}
.car-trim{
  display:block;
  margin-top:7px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  opacity:.85;
}
/* Он · түлш · гүйлт — карт бүрт яг ижил гурван үзүүлэлт, нэг мөрөнд. */
.car-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:13px 0 0;
  padding:0;
  list-style:none;
  font-size:11px;
  color:var(--muted);
}
.car-meta li{display:flex;align-items:center;gap:7px}
.car-meta li+li:before{content:"";width:1px;height:11px;background:var(--line)}
.car-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:20px;
}
.car-price{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--red)}
.car-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  background:none;
  color:var(--ink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.car-more .icon-wrap{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  transition:background .25s,color .25s,border-color .25s;
}
.car-more .icon-wrap svg{width:15px;height:15px}
.car-card:hover .car-more .icon-wrap{background:var(--red);border-color:var(--red);color:#fff}

/* Сүүлийн CTA карт. */
.car-card-cta{
  justify-content:center;
  padding:38px 32px;
  background:#111214;
  border-color:#111214;
  color:#fff;
  cursor:default;
  overflow:hidden;
}
.car-card-cta:before{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,24,45,.85),rgba(240,24,45,.12) 42%,transparent 70%);
}
.car-card-cta>*{position:relative;z-index:2}
.car-card-cta>span{font-size:64px;font-weight:800;letter-spacing:-.07em;line-height:.9}
.car-card-cta strong{display:block;margin-top:14px;font-size:22px;line-height:1.05;letter-spacing:-.04em}
.car-card-cta p{margin:14px 0 0;max-width:280px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.66)}
.car-cta-link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:24px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}
.car-cta-link .icon-wrap{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  transition:background .25s,border-color .25s;
}
.car-cta-link .icon-wrap svg{width:15px;height:15px}
.car-cta-link:hover .icon-wrap{background:var(--red);border-color:var(--red)}
.car-empty{
  grid-column:1/-1;
  padding:60px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.cars-note{
  margin:26px 0 0;
  font-size:10px;
  line-height:1.7;
  color:#9a9ca2;
}

/* Дэлгэрэнгүй цонх. */
.car-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:24px}
.car-modal[hidden]{display:none}
.car-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,7,9,.72);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .28s ease;
}
.car-modal.is-open .car-modal-backdrop{opacity:1}
.car-modal-panel{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  width:min(1000px,100%);
  max-height:min(88vh,760px);
  border-radius:32px;
  background:#fff;
  overflow:hidden auto;
  box-shadow:0 40px 110px rgba(0,0,0,.4);
  opacity:0;
  transform:translateY(24px) scale(.98);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.car-modal.is-open .car-modal-panel{opacity:1;transform:none}
.car-modal-close{
  position:absolute;
  z-index:4;
  right:18px;
  top:18px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.car-modal-close svg{width:17px;height:17px}
.car-modal-close:hover{background:var(--red);border-color:var(--red);color:#fff}
.car-modal-media{
  position:relative;
  display:grid;
  place-items:center;
  min-height:300px;
  padding:46px 36px;
  background:radial-gradient(120% 92% at 50% 18%,#fff 0%,#eceae6 92%);
}
.car-modal-media .car-floor{display:none}
.car-modal-media img{
  position:relative;
  z-index:2;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:320px;
  object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.26));
}
.car-modal-info{padding:44px 40px 40px;display:flex;flex-direction:column}
.car-modal-tag{
  align-self:flex-start;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(240,24,45,.1);
  color:var(--red);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.car-modal-info h3{
  margin:16px 0 0;
  font-size:clamp(26px,2.4vw,34px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.car-modal-info .car-price{display:block;margin-top:12px;font-size:26px}
.car-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:26px 0 0;
  border-top:1px solid var(--line);
}
.car-specs>div{padding:13px 0;border-bottom:1px solid var(--line)}
.car-specs>div:nth-child(odd){padding-right:14px}
.car-specs dt{
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.car-specs dd{margin:6px 0 0;font-size:13px;font-weight:700;letter-spacing:-.01em}
.car-modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.car-btn{
  height:50px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.car-btn svg{width:15px;height:15px}
.car-btn-primary{background:var(--red);color:#fff}
.car-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(240,24,45,.28)}
.car-btn-secondary{border:1px solid var(--line);color:var(--ink)}
.car-btn-secondary:hover{transform:translateY(-2px);background:#f3f1ed}
.car-modal-note{margin:20px 0 0;font-size:10px;line-height:1.7;color:#9a9ca2}
body.car-modal-open{overflow:hidden}

/* Цэсэнд 7 холбоос болсон тул нарийн дэлгэц дээр зайг багасгана.
   final.css дотор #nav{gap:34px} гэсэн ID-сонголт байгаа тул мөн #nav-аар бичив. */
/* Цэсэнд 8 холбоос болсон тул нарийн дэлгэц дээр зай, үсгийн хэмжээг алхам алхмаар багасгана.
   final.css дотор #nav{gap:34px;font-size:12px!important} гэсэн ID-сонголт байгаа тул
   мөн #nav-аар, шаардлагатай газарт !important-оор дарж бичив. */
#nav a{white-space:nowrap}
.nav-cta{white-space:nowrap}
@media(max-width:1440px) and (min-width:1341px){
  #nav{gap:22px}
}
@media(max-width:1340px) and (min-width:1261px){
  #nav{gap:14px}
  #nav a{font-size:11px!important;letter-spacing:.01em}
}
@media(max-width:1260px) and (min-width:1181px){
  #nav{gap:10px}
  #nav a{font-size:10.5px!important;letter-spacing:0}
}
@media(max-width:1180px) and (min-width:1101px){
  #nav{gap:7px}
  #nav a{font-size:10px!important;letter-spacing:0}
  .nav-cta{padding:0 11px!important;font-size:8.5px!important;gap:7px!important}
}
@media(max-width:1100px){
  .cars{padding-left:24px;padding-right:24px}
  .cars-head{grid-template-columns:1fr}
  .cars-head p{justify-self:start;max-width:560px}
  .car-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .car-modal-panel{grid-template-columns:1fr;max-height:90vh}
  .car-modal-media{min-height:0;padding:44px 28px 26px}
  .car-modal-media img{max-height:230px}
  .car-modal-info{padding:30px 28px 34px}
}
@media(max-width:650px){
  .cars{padding:78px 18px}
  .cars h2{font-size:clamp(31px,10vw,44px)}
  .car-toolbar{margin-top:32px;gap:14px}
  .car-chips{gap:7px}
  .car-chip{height:38px;padding:0 14px;font-size:10px}
  .car-sort{width:100%;justify-content:space-between}
  .car-sort select{flex:1;max-width:230px}
  .car-grid{grid-template-columns:1fr;gap:14px}
  .car-media{height:220px;padding:26px 22px 20px}
  .car-media img{max-height:174px}
  .car-body{padding:20px 22px 22px}
  .car-body h3{font-size:18px}
  .car-price{font-size:19px}
  .car-card-cta{padding:32px 24px}
  .car-modal{padding:0}
  .car-modal-panel{
    width:100%;
    max-height:100%;
    height:100%;
    border-radius:0;
  }
  .car-specs{grid-template-columns:1fr}
  .car-specs>div:nth-child(odd){padding-right:0}
  .car-modal-actions .car-btn{flex:1;justify-content:center}
}