/* =========================================================
   خودروها: کارت، شبکه، تب‌ها، فرم جستجو، صفحه فهرست
   (صفحه اصلی + برگه‌های فهرست + خودروهای مشابه در تک‌محصول)
   ========================================================= */

/* ============================ لیست خودروها (تب‌ها) ============================ */

.cars-section{ background:#fff; }
.cars-head{ background:var(--c-dark); color:#fff; padding-top:34px; }
.cars-head__top{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.cars-head__title{ margin:0; font-size:var(--fs-h2); font-weight:700; color:#fff; }
.cars-head__hl{ color:var(--c-primary); }
.cars-head__count{ display:flex; align-items:center; gap:8px; font-size:13px; color:#c8ccd0; }
.cars-head__num{ font-weight:700; color:var(--c-secondary-light); }

.cars-tabs{ display:flex; gap:2px; }
.cars-tab{
  padding:14px 34px; border:0; background:#3a3d40; color:#c8ccd0;
  font-size:14px; font-weight:700; line-height:1.2; transition:background .2s, color .2s;
}
.cars-tab:hover{ background:#45494c; color:#fff; }
.cars-tab.is-active{ background:#fff; color:var(--c-primary); }

.cars-body{ padding-top:var(--sec-py); padding-bottom:var(--sec-py); }
.cars-panel[hidden]{ display:none; }
.cars-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px 28px; }
.cars-more{ text-align:center; margin-top:46px; }
.cars-empty{ text-align:center; color:var(--c-muted); padding:40px 0; }

/* --- کارت خودرو --- */
.car-card__media{ position:relative; display:block; overflow:hidden; background:#eef0f2; }
.car-card__img{ display:block; width:100%; aspect-ratio:1.9/1; max-height:none; object-fit:cover; }
.car-card__ribbon{ position:absolute; top:0; right:0; width:104px; height:104px; overflow:hidden; pointer-events:none; }
.car-card__ribbon span{
  position:absolute; top:24px; right:-32px; width:150px; padding:4px 0; text-align:center;
  transform:rotate(45deg); background:var(--c-accent); color:#fff; font-size:13px; font-weight:700;
}
.car-card__bar{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:3px; height:4px; padding:0 3px; }
.car-card__bar i{ flex:1; background:rgba(0,0,0,.28); transition:background .2s; }
.car-card__bar i.is-active{ background:var(--c-secondary); }

.car-card__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; min-height:56px; }
.car-card__title{ margin:0; font-size:15px; font-weight:700; line-height:1.6; }
.car-card__title a{ color:var(--c-text); }
.car-card__title a:hover{ color:var(--c-primary); }
.car-card__price{
  flex:none; padding:10px 14px 10px 14px; background:var(--c-secondary); color:#fff;
  font-size:12px; font-weight:700; line-height:1.3;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
}
.car-card__price *{ color:#fff; text-decoration:none; }
.car-card__meta{
  display:flex; align-items:center; gap:18px; margin:22px 0 0; padding:14px 0 0;
  list-style:none; border-top:1px solid #e3e6e8; font-size:14px; color:var(--c-muted);
}
.car-card__meta li{ display:flex; align-items:center; gap:6px; }

/* --- تب جستجو --- */
.cars-search__title{ display:flex; align-items:center; gap:10px; margin:0 0 30px; font-size:26px; font-weight:700; }
.cars-search{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 44px; align-items:start; }
.cars-search select{
  width:100%; height:56px; padding:0 18px; border:0; color:#5b6166; font-size:14px;
  appearance:none; -webkit-appearance:none;
  background:#f5f6f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E") no-repeat left 18px center;
}
.cars-search__btn{ height:68px; justify-content:center; border-bottom:3px solid rgba(0,0,0,.18); }

.cars-call{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:56px; padding:36px 40px; background:var(--c-accent); color:#fff;
}
.cars-call__text{ display:flex; align-items:center; gap:18px; font-size:30px; font-weight:400; }
.cars-call__phone{ display:flex; align-items:center; gap:14px; color:#fff; }
.cars-call__num{ font-size:40px; font-weight:400; letter-spacing:1px; }
.cars-call__ico{ display:flex; }

@media (max-width:1199px){
  .cars-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:991px){
  .cars-grid{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .cars-search{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .cars-tab{ padding:12px 18px; }
  .cars-call{ flex-direction:column; text-align:center; padding:24px; }
  .cars-call__text{ font-size:20px; }
  .cars-call__num{ font-size:28px; }
}
@media (max-width:575px){
  .cars-grid{ grid-template-columns:1fr; }
  .cars-head__top{ flex-direction:column; align-items:flex-start; gap:8px; }
  .cars-tabs{ overflow-x:auto; }
}

/* ============================ صفحه فهرست خودروها ============================ */

.cars-head--page{ padding-top:44px; }
.cars-head--page .cars-head__title{ font-size:var(--fs-h1); } /* در صفحه‌ی فهرست این عنوان h1 است */
.cars-head--page .cars-tabs{ flex-wrap:wrap; }
.cars-tab{ display:inline-block; text-decoration:none; }

/* موبایل: تب‌ها همیشه در یک خط، با اسکرول افقی (خانه + صفحات فهرست) */
@media (max-width:767px){
  .cars-tabs,
  .cars-head--page .cars-tabs{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cars-tabs::-webkit-scrollbar{ display:none; }
  .cars-tab{ flex:none; white-space:nowrap; }
}
.cars-listing{ padding:var(--sec-py) 0; }
.cars-listing .cars-search{ margin-bottom:56px; }

.cars-pagination{ margin-top:56px; }
.cars-pagination ul{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.cars-pagination a,
.cars-pagination span{
  display:flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px;
  background:#f5f6f8; color:var(--c-text); font-weight:700; font-size:14px;
}
.cars-pagination a:hover{ background:var(--c-secondary); color:#fff; }
.cars-pagination .current{ background:var(--c-primary); color:#fff; }

.cars-intro{ margin-top:60px; padding-top:34px; border-top:1px solid #e3e6e8; line-height:2; color:#4a4f54; }
.cars-intro h2,.cars-intro h3{ margin:0 0 14px; font-size:22px; }


/* ============================ فروشگاه: جستجوی نام، فیلترهای فعال، مرتب‌سازی، دسته‌بندی‌ها ============================ */

/* فرم جستجو (نام + فیلترها): ردیف اول نام + دکمه، بعد فیلترها، آخر دکمه‌ی پاک‌کردن */
.cars-search{ grid-template-columns:repeat(4,1fr); gap:20px 24px; align-items:stretch; }
.cars-search__name{
  grid-column:span 3; display:flex; align-items:center; gap:12px; height:56px; padding:0 18px;
  background:#f5f6f8; color:var(--c-muted);
}
.cars-search__name:focus-within{ outline:2px solid var(--c-secondary); }
.cars-search__name input{ flex:1; min-width:0; height:100%; border:0; background:transparent; font-size:14px; color:var(--c-text); font-family:inherit; }
.cars-search__name input:focus{ outline:none; }
.cars-search__btn{ height:56px; justify-content:center; }

/* چیدمان با ستون دسته‌بندی‌ها */
.cars-layout{ display:block; }
.cars-layout.has-sidebar{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:44px; align-items:start; }
.cars-layout.has-sidebar .cars-grid{ grid-template-columns:repeat(3,1fr); }
.cars-layout.has-sidebar .cars-search{ grid-template-columns:repeat(3,1fr); }
.cars-layout.has-sidebar .cars-search__name{ grid-column:span 2; }

.cars-cats{ padding:26px 26px 22px; background:#f5f6f8; }
.cars-cats__title{ margin:0 0 18px; padding-bottom:14px; border-bottom:2px solid var(--c-primary); font-size:16px; font-weight:700; }
.cars-cats__list, .cars-cats__list ul{ margin:0; padding:0; list-style:none; }
.cars-cats__list a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; font-size:14px; color:var(--c-text); border-bottom:1px solid #e3e6e8; }
.cars-cats__list a small{ font-size:13px; color:var(--c-muted); }
.cars-cats__list a:hover, .cars-cats__list .is-current > a{ color:var(--c-primary); }
.cars-cats__list ul{ padding-right:16px; }

/* فیلترهای فعال */
.cars-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:-24px 0 34px; }
.cars-chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; background:#eef0f3;
  border-radius:30px; font-size:13px; color:var(--c-text); transition:background .2s;
}
.cars-chip i{ font-style:normal; font-size:17px; line-height:1; color:var(--c-muted); }
.cars-chip:hover{ background:#e2e5e9; color:var(--c-text); }
.cars-chip:hover i{ color:var(--c-primary); }
.cars-chips__clear{ margin-inline-start:6px; font-size:13px; color:var(--c-primary); border-bottom:1px dashed currentColor; }

/* نوار نتیجه + مرتب‌سازی */
.cars-tools{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; padding-bottom:18px; border-bottom:1px solid #e3e6e8; }
.cars-tools__count{ margin:0; font-size:13px; color:#6b7075; }
.cars-tools__sort{ display:flex; align-items:center; gap:10px; margin:0; font-size:13px; color:#6b7075; }
.cars-tools__sort select{ height:42px; padding:0 14px; border:1px solid #dde0e3; background:#fff; font-size:13px; color:var(--c-text); font-family:inherit; }

.cars-empty .btn-site{ margin-top:14px; }

@media (max-width:1199px){
  .cars-layout.has-sidebar{ grid-template-columns:220px minmax(0,1fr); gap:30px; }
  .cars-layout.has-sidebar .cars-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:991px){
  .cars-search, .cars-layout.has-sidebar .cars-search{ grid-template-columns:repeat(2,1fr); }
  .cars-search__name, .cars-layout.has-sidebar .cars-search__name{ grid-column:1 / -1; }
  .cars-layout.has-sidebar{ grid-template-columns:1fr; }
  .cars-layout.has-sidebar .cars-grid{ grid-template-columns:repeat(2,1fr); }
  .cars-chips{ margin-top:-10px; }
}
@media (max-width:575px){
  .cars-tools{ flex-direction:column; align-items:flex-start; gap:12px; }
  .cars-layout.has-sidebar .cars-grid{ grid-template-columns:1fr; }
}