/* =========================================================
   КАТАЛОГИ МАРКЕТУ — спільний вигляд пошуку
   (Нові авто, Б/в авто, Нові / Вживані запчастини, Авто на розбір)
   Сторінка: <section class="nc" id="ncCatalog"> + body class "nc-body".

   Власний простір імен .nc-* замість #catalog: під #catalog у theme-lilac.css
   ~200 правил з !important, і кожна правка тут перетворювалась на нову
   «надбудову». Тепер стилі сторінки живуть лише в цьому файлі.
   Єдині свідомі !important — фон / рамка / тінь полів: theme-lilac.css задає їх
   ВСІМ input/select маркету з !important (:is(input, select, textarea) та
   select:not([multiple])), тож без цього поля фарбуються в бежевий.

   Ієрархія: намір пошуку → компактні фільтри → результати → другорядні дії.
========================================================= */

body.nc-body main.page{
  max-width:1380px;
  padding-left:24px;
  padding-right:24px;
}

.nc{
  --nc-accent:#d67940;
  --nc-accent-hover:#c0652f;
  --nc-accent-ink:#9a4a1d;
  --nc-accent-soft:#fbefe4;
  --nc-accent-soft-2:#f6e1cf;
  --nc-text:#201d1a;
  --nc-muted:#6c635b;
  --nc-muted-2:#8f857b;
  --nc-surface:#ffffff;
  --nc-line:#e6ddd2;
  --nc-line-soft:#efe8df;
  --nc-field-disabled:#f5f1eb;
  --nc-hover:#f6efe7;
  --nc-ring:0 0 0 3px rgba(214,121,64,.22);
  --nc-field-h:50px;

  width:100%;
  min-width:0;
  margin:0 0 64px;
  color:var(--nc-text);
}

.nc *,
.nc *::before,
.nc *::after{ box-sizing:border-box; }

.nc .nc-mode i,
.nc .nc-btn i,
.nc .nc-toggle__chev i,
.nc .nc-empty__icon i{ flex:none; line-height:1; }

/* ---------- Шапка сторінки ---------- */
.nc-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin:0 0 18px;
}

.nc-crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--nc-muted-2);
}
.nc-crumbs a{ color:var(--nc-muted); text-decoration:none; }
.nc-crumbs a:hover{ color:var(--nc-accent-ink); text-decoration:underline; }
.nc-crumbs [aria-current]{ color:var(--nc-text); font-weight:600; }

.nc .nc-title{ margin:0; line-height:1.1; }

/* Перемикач дій: «Пошук авто» — поточний (м'яко-помаранчевий), «Додати» — тихий */
.nc-modes{
  display:inline-flex;
  gap:4px;
  padding:4px;
  background:var(--nc-surface);
  border:1px solid var(--nc-line);
  border-radius:14px;
}
.nc-mode{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 14px;
  border-radius:10px;
  color:var(--nc-muted);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.nc-mode i{ font-size:15px; }
.nc-mode.is-active{ background:var(--nc-accent-soft); color:var(--nc-accent-ink); }
a.nc-mode:hover{ background:var(--nc-hover); color:var(--nc-text); }
a.nc-mode:focus-visible{ outline:none; box-shadow:var(--nc-ring); }

/* ---------- Панель фільтрів (одна біла поверхня) ---------- */
.nc-panel{
  background:var(--nc-surface);
  border:1px solid var(--nc-line);
  border-radius:22px;
  padding:24px;
}

.nc-form{ margin:0; }

.nc-primary{
  display:grid;
  grid-template-columns:1.2fr 1.2fr .8fr .8fr auto;
  gap:16px;
  align-items:end;
}

.nc-field{ min-width:0; }
.nc-field > label{
  display:block;
  margin:0 0 6px;
  color:#4a423b;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
}

.nc-field input:not([type="hidden"]),
.nc-field select{
  display:block;
  width:100%;
  height:var(--nc-field-h);
  margin:0;
  padding:0 14px;
  border-radius:12px;
  color:var(--nc-text);
  font:inherit;
  font-size:16px;
  font-weight:500;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* #ncCatalog — бо правило теми select:not([multiple]):not([size]) специфічніше
   за класи й вантажиться пізніше */
#ncCatalog .nc-field input:not([type="hidden"]),
#ncCatalog .nc-field select,
#ncCatalog .nc-sort select{
  background-color:var(--nc-surface) !important;
  border:1px solid var(--nc-line) !important;
  box-shadow:none !important;
}
.nc-field select,
.nc-sort select{ cursor:pointer; }

.nc-field input::placeholder{ color:#a0968c !important; opacity:1; }
#ncCatalog .nc-field input:hover:not(:disabled),
#ncCatalog .nc-field select:hover,
#ncCatalog .nc-sort select:hover{ border-color:#d8cbbd !important; }
#ncCatalog .nc-field input:focus,
#ncCatalog .nc-field select:focus,
#ncCatalog .nc-sort select:focus{
  outline:none;
  border-color:var(--nc-accent) !important;
  box-shadow:var(--nc-ring) !important;
}

/* Модель / населений пункт до вибору бренду / області — вимкнено свідомо, але читабельно */
#ncCatalog .nc-field input:disabled{
  background-color:var(--nc-field-disabled) !important;
  border-color:var(--nc-line-soft) !important;
  color:var(--nc-muted-2);
  cursor:not-allowed;
}
.nc-field input:disabled::placeholder{ color:#aaa196 !important; }

.nc-field input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.nc-field input[type="number"]::-webkit-outer-spin-button,
.nc-field input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Автопідказки */
.nc-ac{ position:relative; }
.nc .nc-suggest{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:60;
  max-height:280px;
  overflow:auto;
  margin:0;
  padding:6px;
  list-style:none;
  border-radius:12px;
}
.nc .nc-suggest[hidden]{ display:none; }
.nc .nc-suggest li{
  padding:10px 12px;
  border-radius:8px;
  font-size:15px;
  cursor:pointer;
}
.nc .nc-suggest li.nope{ cursor:default; color:var(--nc-muted-2); }

/* Рядок марки з логотипом. Розмітка буває двох видів: li.brand-option (new.js/used.js)
   і li > div.brand-option (add_part.js). theme-lilac.css задає .brand-option__logo
   рамку/фон з !important — тут лише розмір, щоб лого не розтягувалось на весь список. */
.nc .nc-suggest .brand-option{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.nc .nc-suggest li:has(> .brand-option){ padding:7px 10px; }
.nc .nc-suggest li.brand-option{ padding:7px 10px; }
.nc .nc-suggest .brand-option__logo{
  flex:0 0 44px;
  display:grid;
  place-items:center;
  width:44px;
  height:32px;
  padding:2px 3px;
  border:1px solid var(--nc-line-soft) !important;
  border-radius:8px;
  background:#fff !important;
  overflow:hidden;
}
.nc .nc-suggest .brand-option__logo img{
  display:block;
  width:100%;
  height:100%;
  /* Повністю, без обрізання (у логотипів буває напис — BUICK, BAIC) */
  object-fit:contain;
  filter:none !important;
}
.nc .nc-suggest .brand-option__name{
  min-width:0;
  overflow:hidden;
  color:var(--nc-text);
  font-size:15px;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Лого бренду в полі — лише коли бренд обрано (.is-visible ставить new.js) */
.nc-brand-preview{
  position:absolute;
  left:9px;
  top:50%;
  z-index:2;
  display:none;
  place-items:center;
  width:44px;
  height:32px;
  transform:translateY(-50%);
  border:1px solid var(--nc-line-soft);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  pointer-events:none;
}
.nc-brand-preview.is-visible{ display:grid; }
.nc-brand-preview::before{
  content:attr(data-initials);
  color:var(--nc-accent-ink);
  font-size:13px;
  font-weight:700;
}
.nc-brand-preview:has(img)::before{ content:none; }
.nc-brand-preview img{ display:block; width:100%; height:100%; padding:2px 3px; object-fit:contain; }
/* Тема задає img{height:auto} з вищою вагою — без явного розміру логотип ставав 41px
   у рамці 32px і обрізався знизу (особливо помітно на телефоні) */
#ncCatalog .nc-brand-preview img{ width:42px !important; height:30px !important; max-width:none !important; }
.nc-ac--brand:has(.nc-brand-preview.is-visible) input:not([type="hidden"]){ padding-left:62px !important; }

/* Головна дія */
.nc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0;
  border:1px solid transparent;
  border-radius:12px;
  font:inherit;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nc-btn:focus-visible,
.nc-toggle:focus-visible{ outline:none; box-shadow:var(--nc-ring); }
.nc-btn i{ font-size:15px; }

.nc-btn--primary{
  height:var(--nc-field-h);
  min-width:148px;
  padding:0 26px;
  background:var(--nc-accent);
  color:#fff;
  font-size:16px;
  font-weight:700;
}
.nc-btn--primary:hover{ background:var(--nc-accent-hover); }
.nc-submit{ gap:0; }
.nc-submit__more{ display:none; }

/* Другорядна: «Зберегти пошук» — м'яка, не конкурує з «Показати» */
.nc-btn--soft{
  height:40px;
  padding:0 14px;
  background:var(--nc-accent-soft);
  border-color:var(--nc-accent-soft-2);
  color:var(--nc-accent-ink);
  font-size:15px;
}
.nc-btn--soft:hover{ background:var(--nc-accent-soft-2); }
.nc-btn--soft:disabled{ opacity:.7; cursor:progress; }

/* Третинна: «Скинути» */
.nc-btn--quiet{
  height:40px;
  padding:0 14px;
  background:transparent;
  color:var(--nc-muted);
  font-size:15px;
}
.nc-btn--quiet:hover{ background:var(--nc-hover); color:var(--nc-text); }

/* Рядок дій під основними фільтрами */
.nc-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  margin-top:14px;
}
.nc-bar__end{ display:flex; align-items:center; gap:6px; margin-left:auto; }

.nc-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  margin:0 0 0 -10px;
  padding:0 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--nc-text);
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.nc-toggle:hover{ background:var(--nc-hover); }
.nc-toggle__count{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:var(--nc-accent);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  line-height:1;
}
.nc-toggle__count[hidden]{ display:none; }
.nc-toggle__chev{ display:inline-flex; color:var(--nc-accent); font-size:13px; transition:transform .18s ease; }
.nc-toggle.is-open .nc-toggle__chev{ transform:rotate(180deg); }

/* ---------- Розширені фільтри ---------- */
.nc-extra{
  display:grid;
  gap:18px;
  margin-top:14px;
  padding-top:20px;
  border-top:1px solid var(--nc-line-soft);
}
.nc-extra[hidden]{ display:none; }

.nc-extra__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px 18px;
}

/* «Лише з фото» — компактний перемикач унизу ліворуч */
.nc-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  min-height:40px;
  color:var(--nc-text);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  user-select:none;
}
.nc-switch__input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
}
.nc-switch__track{
  position:relative;
  flex:none;
  width:40px;
  height:24px;
  border-radius:999px;
  background:#e2d8cb;
  transition:background-color .18s ease;
}
.nc-switch__track::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(32,29,26,.22);
  transition:transform .18s ease;
}
.nc-switch__input:checked + .nc-switch__track{ background:var(--nc-accent); }
.nc-switch__input:checked + .nc-switch__track::after{ transform:translateX(16px); }
.nc-switch__input:focus-visible + .nc-switch__track{ box-shadow:var(--nc-ring); }

/* ---------- Результати ---------- */
.nc-results{ margin-top:28px; }
.nc-results[hidden]{ display:none; }

.nc-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
}
.nc-count{ margin:0; color:var(--nc-muted); font-size:16px; }
.nc-count strong{ color:var(--nc-text); font-weight:700; }

.nc-sort{ display:flex; align-items:center; gap:10px; }
.nc-sort label{ color:var(--nc-muted); font-size:14px; white-space:nowrap; }
.nc-sort select{
  width:auto;
  min-width:210px;
  height:42px;
  margin:0;
  padding:0 14px;
  border-radius:12px;
  color:var(--nc-text);
  font:inherit;
  font-size:15px;
  font-weight:500;
}

.nc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap:20px;
}

/* Картка: фото — головне; назва, характеристики, місто, ціна */
.nc .car-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:var(--nc-surface);
  border:1px solid var(--nc-line);
  border-radius:18px;
  cursor:pointer;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.nc .car-card:hover{ border-color:#dacdbf; box-shadow:0 10px 28px rgba(32,29,26,.08); }
.nc .car-card:focus-within{ border-color:#dacdbf; }
/* theme-lilac: :is(.car-card, …){ градієнт + велика тінь !important } → біла картка */
#ncCatalog .car-card{
  background:var(--nc-surface) !important;
  border:1px solid var(--nc-line) !important;
  box-shadow:none !important;
}
#ncCatalog .car-card:hover{
  border-color:#dacdbf !important;
  box-shadow:0 10px 28px rgba(32,29,26,.08) !important;
}

.nc .car-card__img{
  position:relative;
  aspect-ratio:4 / 3;
  background:#f1ebe3;
  overflow:hidden;
}
.nc .car-card__track{
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.nc .car-card__track::-webkit-scrollbar{ display:none; }
.nc .car-card__slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:cover;
  scroll-snap-align:start;
}

/* Стрілки галереї: шрифт іконок може не завантажитись → шеврон фоном-SVG */
.nc .car-card__nav{
  position:absolute;
  top:50%;
  z-index:2;
  width:34px;
  height:34px;
  margin-top:-17px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94) center / 16px no-repeat;
  box-shadow:0 2px 8px rgba(32,29,26,.16);
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease;
}
.nc .car-card__nav i{ display:none; }
.nc .car-card__nav--prev{ left:10px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201d1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.nc .car-card__nav--next{ right:10px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201d1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.nc .car-card:hover .car-card__nav,
.nc .car-card__nav:focus-visible{ opacity:1; }
@media (hover:none){ .nc .car-card__nav{ opacity:1; } }

.nc .car-card__dots{
  position:absolute;
  left:50%;
  bottom:10px;
  z-index:2;
  display:flex;
  gap:5px;
  transform:translateX(-50%);
  pointer-events:none;
}
.nc .car-card__dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); }
.nc .car-card__dot.is-active{ background:#fff; }

/* Обране: favorites.js перемикає .active та i.bi-heart ↔ i.bi-heart-fill */
.nc .car-card__fav{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(32,29,26,.14);
  cursor:pointer;
}
.nc .car-card__fav:focus-visible{ outline:none; box-shadow:var(--nc-ring); }
/* theme-lilac: .car-card__fav / .fav-btn — 44px, рамка, велика тінь з !important */
#ncCatalog .car-card__fav{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border:0 !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 2px 8px rgba(32,29,26,.14) !important;
}
#ncCatalog .car-card__fav:focus-visible{ box-shadow:var(--nc-ring) !important; }
/* Сердечко — 22px (theme-lilac фіксує «.car-card__fav i» на 18px з !important) */
#ncCatalog .car-card__fav i.bi{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  background-size:22px 22px !important;
}
.nc .car-card__fav i.bi{
  display:block;
  width:20px;
  height:20px;
  font-size:0;
  background:center / contain no-repeat;
}
.nc .car-card__fav i.bi::before{ content:none; }
/* Сердечко — помаранчеве, як «Обране» в шапці: контур → заповнене, коли додано */
.nc .car-card__fav i.bi-heart{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d67940' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.nc .car-card__fav i.bi-heart-fill{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d67940' stroke='%23d67940' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }

.nc .car-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:5px;
  padding:14px 16px 16px;
  min-width:0;
}
.nc .car-title{
  margin:0;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:0;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.nc .car-title a{ color:var(--nc-text); text-decoration:none; }
.nc .car-title a:focus-visible{ outline:none; text-decoration:underline; }
.nc .car-card__specs{ margin:0; color:var(--nc-muted); font-size:14px; line-height:1.4; }
.nc .car-card__loc{
  margin:0;
  padding-left:18px;
  color:var(--nc-muted-2);
  font-size:13.5px;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f857b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") left center / 14px no-repeat;
}
.nc .car-card__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:10px;
}
/* Ціна — помаранчевим акцентом, як ціни в картках поїздок головного сайту.
   #ncCatalog + !important: theme-lilac фарбує .price-big у сірий (.72) з !important */
#ncCatalog .price-big{ color:var(--nc-accent) !important; font-size:21px; font-weight:800; line-height:1.1; white-space:nowrap; }
#ncCatalog .price-big--muted{ color:var(--nc-muted) !important; font-size:15px; font-weight:600; }
#ncCatalog .car-card__specs{ color:var(--nc-muted) !important; }
#ncCatalog .car-card__loc{ color:var(--nc-muted-2) !important; }

/* «Немає фото» — акуратний значок камери з підписом по центру.
   no-image.svg має власну бежеву «плашку» з дрібним текстом — ховаємо його й
   малюємо заглушку псевдоелементом (однаково в усіх каталогах). */
.nc .car-card__img img[src*="no-image"]{ visibility:hidden; }
.nc .car-card__img:has(img[src*="no-image"])::after{
  content:"Немає фото";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:64px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9a99a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3l2-3h8l2 3h3v12H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center calc(50% - 14px) / 44px no-repeat;
  color:#a8998a;
  font-size:13.5px;
  font-weight:600;
  pointer-events:none;
}
.nc .car-card:has(img[src*="no-image"]) .car-card__nav,
.nc .car-card:has(img[src*="no-image"]) .car-card__dots{ display:none; }
.nc .car-card__date{ color:var(--nc-muted-2); font-size:12.5px; white-space:nowrap; }

/* Скелетон під час завантаження */
.nc .car-card.is-skeleton{ cursor:default; pointer-events:none; }
.nc .car-card.is-skeleton .car-card__img,
.nc .car-card.is-skeleton .line{
  background:linear-gradient(90deg, #f1ebe3 25%, #f8f4ef 50%, #f1ebe3 75%) 0 0 / 200% 100%;
  animation:nc-shimmer 1.2s linear infinite;
}
.nc .car-card.is-skeleton .line{ height:14px; border-radius:6px; }
.nc .car-card.is-skeleton .line.short{ width:60%; }
.nc .car-card.is-skeleton .line.price{ width:35%; height:20px; margin-top:12px; }
@keyframes nc-shimmer{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){
  .nc .car-card.is-skeleton .car-card__img,
  .nc .car-card.is-skeleton .line{ animation:none; }
}

.nc .nc-pagination{ margin-top:24px; }
.nc .nc-pagination:empty{ display:none; }

/* ---------- Порожній стан (компактний) ---------- */
.nc-empty{
  margin-top:20px;
  padding:40px 24px;
  background:var(--nc-surface);
  border:1px solid var(--nc-line);
  border-radius:22px;
  text-align:center;
}
.nc-empty[hidden]{ display:none; }
.nc-empty__icon{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--nc-accent-soft);
  color:var(--nc-accent);
}
.nc-empty__icon i{ font-size:21px; }
.nc .nc-empty__title{
  margin:12px 0 4px;
  color:var(--nc-text);
  font-weight:700 !important; /* dg-site-align: main.page h2{font-weight:800!important} */
  font-size:20px;
  line-height:1.3;
}
.nc-empty__text{ margin:0 auto; max-width:460px; color:var(--nc-muted); font-size:15px; line-height:1.5; }

/* Статус оголошення на фото (розбірка: «Є в наявності» / «Розбирається» / «Продано») */
.nc .car-card__status{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#2f7d4f;
  font-size:12.5px;
  font-weight:700;
  line-height:1.2;
  box-shadow:0 2px 8px rgba(32,29,26,.14);
}
.nc .car-card__status--process{ color:#9a4a1d; }
.nc .car-card__status--sold{ color:var(--nc-muted); }
.nc .car-card__img > img{ width:100%; height:100%; object-fit:cover; display:block; }
a.car-card,
a.car-card:hover{ color:inherit; text-decoration:none; }
/* Картка-посилання без JS (розбірка): заголовок розтягується на всю картку,
   кнопка «Обране» (z-index:3) лишається клікабельною поверх. */
.nc .car-card--link .car-title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.nc .car-card--link .car-card__status{ z-index:2; }

/* Лічильник, у який JS пише готовий текст («Знайдено: 12») */
.nc-count:empty{ display:none; }

/* ---------- Планшет ---------- */
@media (max-width:1180px){
  .nc-extra__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:1024px){
  .nc-primary{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nc-primary .nc-submit{ grid-column:1 / -1; width:100%; }
  .nc-extra__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---------- Мобільний ---------- */
@media (max-width:640px){
  body.nc-body main.page{ padding-left:16px; padding-right:16px; }

  .nc{ --nc-field-h:48px; margin-bottom:48px; }
  .nc-head{ gap:8px; margin-bottom:14px; }
  .nc-crumbs{ font-size:13px; }

  .nc-modes{ display:flex; width:100%; }
  .nc-mode{ flex:1 1 0; justify-content:center; height:44px; padding:0 10px; }

  .nc-panel{ padding:16px; border-radius:18px; }

  /* Бренд і модель — на всю ширину; ціна «від–до» — парою */
  .nc-primary{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .nc-primary > .nc-field:nth-child(-n+2){ grid-column:1 / -1; }
  .nc-submit__more{ display:inline; }

  .nc-bar{ margin-top:10px; }
  .nc-toggle{ height:44px; }
  .nc-bar__end .nc-btn{ height:44px; }

  .nc-extra{ gap:14px; padding-top:16px; }
  .nc-extra__grid{ grid-template-columns:1fr; gap:12px; }
  .nc-switch{ min-height:44px; }

  .nc-results{ margin-top:22px; }
  .nc-toolbar{ flex-direction:column; align-items:stretch; gap:10px; }
  .nc-sort select{ flex:1; min-width:0; height:44px; }

  .nc-grid{ grid-template-columns:minmax(0, 1fr); gap:12px; }

  /* Картка на телефоні — рядком (фото ліворуч, дані праворуч), як у звичних
     маркетплейсах: на екран вміщається 4–5 оголошень, а не одне велике фото. */
  .nc .car-card{ flex-direction:row; align-items:stretch; border-radius:16px; }
  .nc .car-card__img{
    flex:0 0 40%;
    max-width:168px;
    aspect-ratio:auto;
    min-height:128px;
  }
  .nc .car-card__body{ gap:3px; padding:10px 12px 11px; }
  .nc .car-title{ font-size:15px; line-height:1.25; }
  .nc .car-card__specs{ font-size:12.5px; line-height:1.35; }
  .nc .car-card__loc{ padding-left:16px; font-size:12.5px; background-size:12px; }
  .nc .car-card__foot{ flex-wrap:wrap; gap:2px 8px; padding-top:6px; }
  #ncCatalog .price-big{ font-size:17px; }
  #ncCatalog .price-big--muted{ font-size:13.5px; }
  .nc .car-card__date{ font-size:11.5px; }
  .nc .car-card__status{ top:6px; left:6px; padding:3px 7px; font-size:11px; }
  .nc .car-card__nav{ display:none; }
  .nc .car-card__dots{ bottom:6px; }

  #ncCatalog .car-card__fav{
    top:6px;
    right:6px;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }
  #ncCatalog .car-card__fav i.bi{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    background-size:18px 18px !important;
  }

  .nc .car-card__img:has(img[src*="no-image"])::after{
    padding-top:40px;
    background-size:30px;
    background-position:center calc(50% - 10px);
    font-size:11.5px;
  }
  .nc-empty{ padding:32px 18px; }
}

/* Дуже вузькі (320–400): дії під фільтрами — у два рядки, рівними кнопками */
@media (max-width:420px){
  .nc-bar__end{ width:100%; margin-left:0; }
  .nc-bar__end .nc-btn--quiet{ flex:0 0 auto; padding:0 10px; }
  .nc-bar__end .nc-btn--soft{ flex:1 1 auto; min-width:0; padding:0 10px; }
  /* 320–360: довгі підписи («Додати запчастину», «Зберегти пошук») переносяться,
     а не обрізаються */
  .nc-mode,
  .nc-bar__end .nc-btn{ white-space:normal; text-align:center; line-height:1.2; }
  .nc-mode{ gap:6px; padding:0 8px; font-size:14px; }
}

/* Підказка під полями «Ціна від/до, $» у режимі гривні: «≈ 45 200 ₴» (js/mkt-currency.js) */
.nc .nc-fx-hint{ display:block; margin-top:5px; color:var(--nc-muted-2); font-size:12.5px; line-height:1.2; }
.nc .nc-fx-hint[hidden]{ display:none; }

/* ---------- Фільтри «Уточнити» на телефоні — панель знизу екрана (js/nc-extra-count.js) ---------- */
.nc-sheet__head,
.nc-sheet__foot{ display:none; }
.nc-sheet__body{ display:grid; gap:18px; }
.nc-extra:not(.is-sheet) .nc-sheet__body{ display:contents; }
.nc-sheet-backdrop{ display:none; }

@media (max-width:640px){
  /* Кнопка «Уточнити» — на всю ширину, «Скинути» / «Зберегти пошук» рядком нижче */
  .nc-bar{ flex-wrap:wrap; gap:8px; }
  .nc-toggle{
    flex:1 1 100%;
    justify-content:center;
    margin-left:0 !important; /* на ПК кнопка «текстова» з -10px — тут вона на всю ширину */
    border:1px solid var(--nc-line) !important;
    background:var(--nc-surface) !important;
  }
  .nc-bar__end{ width:100%; margin-left:0; }
  .nc-bar__end .nc-btn--soft{ flex:1 1 auto; }

  .nc-extra.is-sheet{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:10050;
    display:flex;
    flex-direction:column;
    gap:0;
    max-height:88dvh;
    margin:0;
    padding:0;
    border:0;
    border-radius:20px 20px 0 0;
    background:var(--nc-surface);
    box-shadow:0 -12px 40px rgba(32,29,26,.18);
    animation:nc-sheet-in .22s ease-out;
  }
  .nc-extra.is-sheet[hidden]{ display:none; }
  @keyframes nc-sheet-in{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }

  .nc-extra.is-sheet .nc-sheet__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px 12px;
    border-bottom:1px solid var(--nc-line-soft);
  }
  .nc-extra.is-sheet .nc-sheet__head::before{
    content:"";
    position:absolute;
    left:50%;
    top:6px;
    width:40px;
    height:4px;
    margin-left:-20px;
    border-radius:999px;
    background:#e3d9ce;
  }
  .nc-sheet__title{ color:var(--nc-text); font-size:18px; font-weight:700; }
  .nc-sheet__close{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:0 !important;
    border-radius:50% !important;
    background:#f3eee8 !important;
    color:var(--nc-text);
    font-size:16px;
    cursor:pointer;
  }

  .nc-extra.is-sheet .nc-sheet__body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:16px;
  }
  /* Поля по два в ряд: рік від/до, об'єм від/до, паливо/коробка… */
  .nc-extra.is-sheet .nc-extra__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 12px; align-items:end; }
  .nc-extra.is-sheet .nc-field--wide{ grid-column:1 / -1; }
  .nc-extra.is-sheet .nc-field > label{ font-size:13px; }

  .nc-extra.is-sheet .nc-sheet__foot{
    display:flex;
    gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--nc-line-soft);
    background:var(--nc-surface);
  }
  .nc-sheet__foot .nc-sheet__reset{ flex:0 0 auto; height:48px; padding:0 16px; }
  .nc-sheet__foot .nc-sheet__apply{ flex:1 1 auto; height:48px; }

  .nc-sheet-backdrop{
    position:fixed;
    inset:0;
    z-index:10040;
    display:block;
    background:rgba(20,16,12,.45);
  }
  .nc-sheet-backdrop[hidden]{ display:none; }
  html.nc-sheet-open,
  html.nc-sheet-open body{ overflow:hidden !important; }
  /* main.page має isolation:isolate — поки панель відкрита, знімаємо, щоб вона була
     над шапкою сайту й затемненням (інакше z-index лишався «всередині» main) */
  html.nc-sheet-open main.page{ isolation:auto !important; }
}

/* Логотип марки в полі на телефоні — без рамки, по центру висоти поля */
@media (max-width:640px){
  .nc-brand-preview{ left:10px; width:40px; height:30px; border-color:transparent; background:transparent; }
  #ncCatalog .nc-brand-preview img{ width:40px !important; height:30px !important; padding:1px 2px; }
  .nc-ac--brand:has(.nc-brand-preview.is-visible) input:not([type="hidden"]){ padding-left:56px !important; }
}