/* ============================================================================
   Вирівнювання стилю маркетплейсу під ОСНОВНИЙ сайт Driveandgo.
   Вантажиться ОСТАННІМ (після theme-lilac.css), тож перебиває тему без правок
   самих тем-файлів. Мета — щоб маркет виглядав як той самий продукт: той самий
   помаранчевий бренд-колір (#d67940), тепла кремова підкладка з помаранчевими
   «сяйвами» та тепліші поверхні карток/кнопок, як на app/http (dg-design.css).
   ========================================================================== */

/* ── Бренд-токени як на головному сайті ─────────────────────────────────── */
:root,
:root[data-theme],
:root:not([data-theme]) {
  --brand: #d67940 !important;
  --brand-strong: #f08f4f !important;
  --brand-dark: #a3572a !important;
  --brand-soft: rgba(214,121,64,.14) !important;
  --brand-contrast: #fff7f0 !important;
  --accent: #d67940 !important;
  --primary: #d67940 !important;
}

/* ── Кремова підкладка + помаранчеві радіальні сяйва (як body головного сайту) ─ */
body {
  background:
    radial-gradient(circle at top left, rgba(214,121,64,.08), transparent 26%),
    radial-gradient(circle at 85% 0, rgba(214,121,64,.05), transparent 24%),
    #f7f2eb !important;
  color: #17120d;
}

/* Головний контейнер сторінки — прозорий, щоб бачити кремову підкладку body
   (тема інколи фарбує .page/.container у білий). */
.page,
main.page,
.container,
.app-shell,
.content-wrap {
  background: transparent !important;
}

/* ── Хедер — 1:1 як десктопний хедер головного сайту (.desktop-header__inner):
   напівпрозора біла плашка, радіус 28px, м'яка тінь, БЕЗ рамки. ─────────── */
/* Липка обгортка хедера — суцільного кольору сторінки, а не прозора: інакше
   контент, що прокручується, видно над/навколо плашки (зазор 6px зверху та
   поля з боків) — виглядало як «шапка налазить на сторінку».
   --mp-header-h — висота липкої зони; від неї рахується scroll-padding-top, тож
   якорі / scrollIntoView зупиняються під хедером, а не за ним. */
:root { --mp-header-h: 70px; }
@media (max-width: 1160px) { :root { --mp-header-h: 76px; } }
@media (max-width: 980px) { :root { --mp-header-h: 71px; } }
html { scroll-padding-top: calc(var(--mp-header-h) + 12px); }
/* Відступ від хедера до контенту — як на головному сайті: лише margin-bottom
   хедера (24px; 12px на мобільному). theme-lilac додавав .page{padding-top:40px}
   (24px на мобільному) — разом виходило 64–88px «порожнечі» над сторінкою. */
.page { padding-top: 0 !important; }
/* …і перший (прозорий) блок сторінки теж не додає своїх 24–28px зверху. */
main.page > div.container:first-of-type,
main.page > section.section:first-of-type,
main.page > .cars-page,
main.page > .spares-page,
main.page > .profile-dashboard,
main.page > .cab > .cab__container,
body.cdx-page main.page > .cdx,
main.page > .fav-shell > .container:first-child,
/* каталоги: theme-lilac задає їм margin-top через id / [data-part-condition]
   (+ inline-стиль parts_new) — селектори нижче специфічніші */
main.page > #usedCatalog.section,
html body.parts-new main.page > .section[data-part-condition],
html body.parts-used main.page .parts-used-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
main.page > .fav-shell > .container > .fav-toolbar:first-child { margin-top: 0 !important; }
.menu {
  background: #f7f2eb !important;
  box-shadow: none !important;
}
.menu-inner {
  /* Майже непрозорий фон: blur на цьому стенді не завжди застосовується, тож
     контент, що прокручується під липким хедером, не має просвічувати. */
  background: rgba(255,255,255,.98) !important;
  border: none !important;
  box-shadow: 0 18px 40px rgba(31,24,19,.09) !important;
  border-radius: 28px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Навігація хедера — як на головному сайті: ВЕЛИКІ ЛІТЕРИ, розрядка, сірий,
   жирний. Без цього «Авто/Запчастини» одразу читались як інший сайт. */
.menu .menu-item,
.menu-left a,
.menu-right > .desktop-only .menu-item {
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  font-weight: 800 !important;
  color: #47515d !important;
}
.menu .menu-item:hover { color: #d67940 !important; }

/* Аватар у хедері — рівний КРУГ на світлому фоні (як десктопний аватар
   головного сайту), а не заокруглений квадрат. */
.menu .dropdown-toggle { background: transparent !important; }
.menu .dropdown-toggle img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #fff1e6 !important;
  border: 1px solid rgba(214,121,64,.16) !important;
}

/* ── Чистий компактний хедер: ЛИШЕ лого + дзвіночок + аватар (як на головному
   сайті). Навігацію прибираємо з верхньої смуги — вона доступна в меню аватара
   (додано в header.php) та в нижньому барі на мобільному. ────────────────── */
.menu .menu-left { display: none !important; }                              /* Авто/Запчастини + іконки авто/ключ */
.menu .menu-right > .desktop-only:not(.header-actions) { display: none !important; } /* Мої пропозиції / Довідка / Адмінка */
/* Сердечко «Обране» поруч із дзвіночком — лишається (маркет без нього незручний). */
/* Роздільник у меню аватара між навігацією та акаунтом. */
.menu .dropdown-content .dropdown-sep { height: 1px; margin: 6px 10px; background: rgba(0,0,0,.08); }

/* Кнопки-іконки в хедері (дзвіночок/аватар/навігація) — як .notifications-trigger
   основного сайту: тепла помаранчева плашка. */
.header-icon,
.icon-btn,
.mobile-icons a {
  border-color: rgba(214,121,64,.14) !important;
}
.header-icon:hover,
.icon-btn:hover { background: rgba(214,121,64,.12) !important; }

/* ── Картки/поверхні: білі на кремовому, з теплою рамкою й м'якою тінню ────
   УВАГА: сюди НЕ можна вписувати .service-card / .catalog-card тощо — це
   картки-герої з ФОНОВИМ ЗОБРАЖЕННЯМ (background:...var(--bg)) і білим текстом.
   background:#fff перебивав би картинку → біла плашка з невидимим білим текстом
   (саме так «зникали» картки на spares.php). Тут — лише прості білі поверхні. */
.card,
.panel,
.surface,
.listing-card,
.product-card,
.seller-card,
.cargo-publication-card,
.profile-overview,
.profile-command,
.box,
.section-card {
  background: #fff !important;
  border-color: rgba(214,121,64,.14) !important;
  box-shadow: 0 12px 30px rgba(120,74,36,.08) !important;
}

/* ── Нижній бар (мобільний) — тепла плашка, помаранчевий активний стан ───── */
.appbar {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(214,121,64,.14) !important;
  box-shadow: 0 10px 28px rgba(59,40,28,.14) !important;
}
.appbar__item.is-active,
.appbar a.active,
.appbar .active {
  color: #d67940 !important;
}

/* ── Кнопки дій: помаранчевий градієнт бренду головного сайту ────────────── */
.btn-primary,
.btn.primary,
button.primary,
.cta,
.bus-submit,
.book-btn,
input[type="submit"].primary {
  background: linear-gradient(135deg, #d67940, #f08f4f) !important;
  border-color: transparent !important;
  color: #fff7f0 !important;
}

/* Посилання/акценти лілового відтінку (якщо десь лишились) → помаранчевий бренд. */
a { color: #d67940; }

/* ── Порожній квадрат прев'ю бренду у фільтрах каталогу ───────────────────
   Поки бренд не обрано, зліва стирчав порожній помаранчевий квадрат — виглядало
   дивно. Ховаємо його, доки не обрано бренд (клас .is-visible ставить JS), і
   прибираємо зайвий лівий відступ інпута, щоб поле «Бренд» виглядало як решта. */
#catalog .brand-autocomplete .catalog-car-brand-preview:not(.is-visible),
#usedCatalog .brand-autocomplete .catalog-car-brand-preview:not(.is-visible){
  display:none !important;
}
#catalog .brand-autocomplete:not(:has(.catalog-car-brand-preview.is-visible)) #brandInput,
#usedCatalog .brand-autocomplete:not(:has(.catalog-car-brand-preview.is-visible)) #brandInput{
  padding-left:16px !important;
}

/* Те саме — у формах ДОДАВАННЯ авто/запчастин (там прев'ю зветься .brand-preview):
   поки бренд не обрано, зліва стирчав порожній холодно-сірий квадрат, що випадав
   із теплої палітри. Ховаємо його до вибору (клас .is-visible ставить JS) і
   прибираємо зайвий лівий відступ інпута. */
.brand-autocomplete .brand-preview:not(.is-visible){
  display:none !important;
}
.brand-autocomplete:not(:has(.brand-preview.is-visible)) #brandInput{
  padding-left:16px !important;
}

/* ── ЄДИНА ШКАЛА ЗАГОЛОВКІВ СТОРІНОК по всьому маркету (як H1 Карпулінгу) ─────
   Було: кожна сторінка мала свій розмір H1 — форма «на розбір» роздувалась до
   ~70px на широкому екрані, каталоги лишались ~40px → «всюди різний дизайн».
   Нормалізуємо до однакової шкали (як clamp H1 Карпулінгу), щоб усі сторінки
   виглядали як одна система. Детальні сторінки (назва оголошення у колонці)
   виключаємо — там свій розмір. */
body:not(.car-detail-page):not(.part-detail-page) main > h1,
body:not(.car-detail-page):not(.part-detail-page) .section > h1,
body:not(.car-detail-page):not(.part-detail-page) .container > h1,
body:not(.car-detail-page):not(.part-detail-page) .hero-copy > h1,
body:not(.car-detail-page):not(.part-detail-page) [class*="hero"] > h1{
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

/* ── Карта вибору місця (додавання авто/запчастини/розбору) ─────────────────
   Скруглена мапа, як решта карток. Зум-контроли — стандартні Leaflet, як на
   картах головного сайту (див. add_car.css, блок «Карта — як на головному сайті»). */
#addCarMapShell{ overflow:hidden; }
#addCarMapShell #pickMap,
#addCarMapShell .leaflet-container{ border-radius:12px; }

/* ── Бейдж «USED» на сторінці авто — у ТЕПЛІЙ палітрі сайту (Карпулінг) ─────
   theme-lilac.css лишив цьому бейджу БУЗКОВИЙ фон (rgba(245,243,255,…)) — єдиний
   елемент, що випадав з оранжевого бренду. Повертаємо світло-оранжевий тон, як
   у тегів Карпулінгу (світлий фон + оранжевий текст). */
:root{ --cd-used-bg: rgba(214,121,64,.12); }
body.car-detail-page .badge.used,
.car-detail .badge.used,
.section.car-detail .badge.used{
  background: rgba(214,121,64,.12) !important;
  color: #d87431 !important;
  border-color: rgba(214,121,64,.22) !important;
}

/* ── Сторінка авто — у стилі Карпулінгу (типографіка / пігулки / тіні) ──────
   Карпулінг: H1 щільний жирний (letter-spacing −.035em), теги — повністю круглі
   пігулки, картки — м'яка тепла тінь. Переносимо ту саму мову сюди, щоб маркет
   не відрізнявся від пасажирських сервісів. */
/* Селектори охоплюють ОБИДВІ детальні сторінки — авто й запчастин (однакова
   структура .cd-layout), щоб уся деталізація маркету була в одному стилі. */
body.car-detail-page .title-left h1,
body.car-detail-page .title-row h1,
body.car-detail-page h1,
body.part-detail-page .title-left h1,
body.part-detail-page .title-row h1,
body.part-detail-page h1{
  letter-spacing: -.035em !important;
}
/* Пігулки (бейдж «USED», «ID оголошення») — повністю круглі, як теги Карпулінгу. */
body.car-detail-page .badge,
body.car-detail-page .detail-id,
body.part-detail-page .badge,
body.part-detail-page .detail-id{
  border-radius: 999px !important;
}
/* Картки/панелі — рівне скруглення + м'яка тепла тінь, як картки Карпулінгу. */
body.car-detail-page .card,
body.car-detail-page .detail-panel,
body.car-detail-page .detail-panel--sidebar,
body.car-detail-page .detail-panel--description,
body.part-detail-page .card,
body.part-detail-page .detail-panel,
body.part-detail-page .detail-panel--sidebar,
body.part-detail-page .detail-panel--description{
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(31,24,19,.08) !important;
}

/* ============================================================================
   2026-10-20 — шапка й сторінки маркету 1:1 з основним сайтом.
   Значення взято з dg-design.css (.desktop-header__inner / .brand-wordmark /
   .desktop-nav / .notifications-trigger / .desktop-dropdown--user) та з нових
   сторінок сайту (крем #f7f2eb, Segoe UI, заголовки 800). Селектори .menu …
   специфічніші за правила theme-lilac.css (.menu-inner{…!important}).
   ========================================================================== */
html, body{ background:#f7f2eb !important; }
body{ font-family:'Segoe UI', Arial, sans-serif !important; color:#201d1a; }

/* Обгортка: 6px зверху (було 44px), відступи з боків як у головного сайту */
.menu{ padding:6px 18px 0 !important; margin-bottom:24px !important; box-sizing:border-box !important; }
.menu .menu-inner{
  display:flex !important; align-items:center !important; gap:16px !important;
  max-width:1380px !important; min-height:64px !important; margin:0 auto !important;
  padding:8px 18px !important; border:1px solid rgba(214,121,64,.14) !important;
  border-radius:28px !important; background:rgba(255,255,255,.96) !important;
  box-shadow:0 18px 40px rgba(31,24,19,.09) !important;
}
/* Лого + словесний знак — як .desktop-logo / .brand-wordmark */
.menu .menu-logo{ flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; }
.menu .menu-logo img{ width:auto !important; height:42px !important; border-radius:0 !important; }
.menu .menu-logo__text{
  color:#15181c !important; font-family:"Arsenal Bold", Arial, sans-serif !important;
  font-size:22px !important; font-weight:700 !important; letter-spacing:-.01em !important;
  line-height:1 !important; text-transform:none !important; /* «Driveandgo», не капс */
}
/* Центроване меню — як .desktop-nav */
.menu .mp-nav{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap; overflow:hidden; }
.menu .mp-nav a{
  padding:8px 10px; border-radius:999px; color:#47515d; font-size:15px; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; text-decoration:none;
  transition:background .24s ease, color .24s ease, transform .24s ease;
}
.menu .mp-nav a:hover, .menu .mp-nav a[aria-current="page"]{ background:rgba(214,121,64,.14); color:#1d232a; }
.menu .mp-nav a:hover{ transform:translateY(-1px); }
.menu .menu-right{ flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:8px !important; margin-left:auto !important; }
.menu .header-actions{ margin-right:0 !important; gap:8px !important; }
/* Дзвіночок — як .notifications-trigger (коло 40×40, тепла плашка) */
.menu .header-icon, .menu .icon-btn{
  width:40px !important; height:40px !important; min-height:40px !important; border-radius:50% !important; box-sizing:border-box !important;
  background:rgba(214,121,64,.12) !important; border:1px solid rgba(214,121,64,.12) !important;
  color:#d67940 !important; box-shadow:none !important;
}
.menu .header-icon i, .menu .icon-btn i{ font-size:18px !important; color:#d67940 !important; }
/* Аватар + шеврон — як .desktop-dropdown--user (коло 28px, без фону) */
.menu .dropdown-toggle{
  min-height:44px !important; height:44px !important; padding:0 10px 0 8px !important; gap:8px !important;
  border-radius:999px !important; background:transparent !important; border:1px solid transparent !important; box-shadow:none !important;
}
.menu .dropdown-toggle:hover{ background:rgba(214,121,64,.08) !important; }
.menu .dropdown-toggle img{ width:28px !important; height:28px !important; border-radius:50% !important; border:0 !important; background:#fff1e5 !important; }
.menu .dropdown-toggle i{ color:#9099a4 !important; font-size:12px !important; }

@media (max-width:1160px){
  .menu .menu-inner{ gap:12px !important; padding:12px 14px !important; border-radius:24px !important; }
  .menu .menu-logo img{ height:38px !important; }
  .menu .menu-logo__text{ font-size:20px !important; }
  .menu .mp-nav{ gap:2px; }
  .menu .mp-nav a{ padding:8px; font-size:14px; }
}
@media (max-width:1080px){
  .menu .mp-nav a{ padding:8px 7px; font-size:12px; letter-spacing:.01em; }
}
/* Перемикання desktop/mobile — на 980px, як на головному сайті (було 1024 → на
   1024px показувались мобільні іконки поруч із десктопними). */
@media (min-width:981px) and (max-width:1024px){
  .menu .desktop-only{ display:flex !important; }
  .menu .mobile-only{ display:none !important; }
}
/* Старі розкидані пункти меню замінені на .mp-nav — ховаємо їх на всіх ширинах
   (специфічніше за правило вище, тож не «спливають» на 981–1024px). */
.menu .menu-inner .menu-left,
.menu .menu-inner .menu-right > .desktop-only:not(.header-actions){ display:none !important; }
@media (max-width:980px){
  .menu .mp-nav{ display:none; }
  .menu{ padding:4px 4px 0 !important; margin-bottom:12px !important; }
  /* Телефон — та сама «пігулка», що .app-topbar головного сайту: 10px від верху, радіус 18, лого 32px, поля 24px */
  .menu{ margin-top:6px !important; }
  .menu .menu-inner{ min-height:68px !important; padding:8px clamp(18px, 6vw, 40px) !important; border-radius:18px !important; } /* = menu.php */
  .menu .menu-logo img{ height:32px !important; }
  .menu .menu-inner .menu-logo .menu-logo__text{ font-size:16px !important; } /* = .app-topbar .brand-wordmark */
}
@media (max-width:340px){
  .menu .menu-inner{ padding:8px 14px !important; } /* перемикач $/₴ + дзвіночок + аватар мусять вміститись */
}

/* Заголовки сторінок — одна вага по всьому маркету: 700. Вага 800/900 у Segoe UI —
   окреме накреслення Black, тож заголовки каталогів виглядали «іншим шрифтом»
   поруч із хабами, формами й картками (2026-10-23). Шрифт — з public/css/dg-font.css. */
main.page h1, main.page .page-title, main.page .section-title, main.page h2{
  font-weight:700 !important; letter-spacing:0 !important;
}
/* Колір — лише h1 (h2 бувають білими на фото-картках «Автомобілі/Запчастини») */
main.page h1{ font-size:30px !important; color:#201d1a !important; }
@media (max-width:600px){ main.page h1{ font-size:25px !important; } }

/* ── Єдиний кремовий фон на ВСІХ сторінках маркету ───────────────────────────
   theme-lilac.css фарбував каталоги (new/used/parts_new/parts_used/break) у БІЛИЙ
   через html:has(#catalog)… (id у :has → сильніша специфічність, ніж html,body).
   Ті самі селектори тут (файл вантажиться пізніше) → крем #f7f2eb, як на сайті.
   main.page — прозорий (раніше мав власні відтінки #f7f2eb / #fdf8f3). */
html:has(#catalog),
html:has(#usedCatalog),
body:has(#catalog),
body:has(#usedCatalog),
html:has(body.parts-new),
html:has(body.parts-used),
html:has(body.break-page),
body.parts-new,
body.parts-used,
body.break-page{
  background:#f7f2eb !important;
}
main.page:has(#catalog),
main.page:has(#usedCatalog),
body.parts-new main.page,
body.parts-used main.page,
body.break-page main.page,
html body main.page{
  background:transparent !important;
}

/* Leaflet: на екранах з масштабом 125–150% між плитками видно тонкі «шви».
   Плитка на пів пікселя більша — сусідні перекриваються, швів немає. */
.leaflet-container .leaflet-tile-container img.leaflet-tile{
  width:256.5px !important;
  height:256.5px !important;
}

/* Мітка по центру карти — як у карпулінгу (js/map-center-pin.js): без фону
   divIcon; під час руху карти трохи «підстрибує», щоб було видно, що точка під нею. */
.leaflet-marker-icon.dg-center-pin{ background:none !important; border:0 !important; box-shadow:none !important; }
.leaflet-marker-icon.dg-center-pin i{ display:block; line-height:30px; text-align:center; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); transition:transform .15s ease; }
.leaflet-container.is-pin-moving .dg-center-pin i{ transform:translateY(-6px); }

/* Перемикач валюти цін $ / ₴ у шапці (inc/header.php, js/mkt-currency.js) */
.menu .mkt-cur{
  display:inline-flex !important;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid #efe3d6;
  border-radius:12px;
  background:#fff8f2;
}
.menu .mkt-cur__btn{
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:34px;
  padding:0 8px;
  margin:0;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#8a6a55 !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.menu .mkt-cur__btn:hover{ color:#201d1a !important; }
.menu .mkt-cur__btn.is-active{ background:#d67940 !important; color:#fff !important; }
.menu .mkt-cur__btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(214,121,64,.25) !important; }
@media (max-width:640px){
  .menu .mkt-cur{ padding:2px; border-radius:10px; }
  .menu .mkt-cur__btn{ min-width:34px; height:34px; padding:0 6px; font-size:14px !important; } /* палець: не менше ~34px */
}
/* Перемикач завжди показує ОБИДВІ валюти «₴ | $» (поточна — помаранчева), щоб було
   видно, що це перемикач. На вузьких екранах місце звільняємо, ховаючи напис Driveandgo
   біля логотипа (сам логотип лишається) — інакше шапка вилазила за край екрана. */
.menu .mkt-cur{ border-color:#e6cdb6 !important; box-shadow:0 1px 0 rgba(214,121,64,.08); }
.menu .mkt-cur__btn:not(.is-active){ color:#6e4a33 !important; font-weight:800 !important; }
@media (max-width:395px){
  /* як на головному сайті (.app-topbar .brand-wordmark — 14px до ~395px): назва лишається, лише дрібніша */
  .menu .menu-inner .menu-logo .menu-logo__text{ font-size:14px !important; letter-spacing:-.04em; }
  .menu .menu-right{ gap:6px !important; }
}
@media (max-width:330px){
  .menu .menu-logo__text{ display:none !important; }
}
@media (max-width:330px){
  .menu .mkt-cur__btn{ min-width:28px; height:28px; padding:0 5px; }
  .menu .menu-right{ gap:4px !important; }
}

/* ── Маленькі екрани / збільшений шрифт Android ───────────────────────────────
   Довгі написи в кнопках переносяться, а не вилазять за край (і не дають сторінці
   горизонтальну прокрутку). */
:is(#addCarForm, #addPartForm, #addForm) .btn-submit,
body.break-add-page .btn-submit{
  white-space:normal !important;
  height:auto !important;
  min-height:56px !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:12px 18px !important;
  line-height:1.25 !important;
  text-align:center !important;
}
:is(#addCarForm, #addPartForm, #addForm) .btn-submit span,
body.break-add-page .btn-submit span{ min-width:0; overflow-wrap:anywhere; }
.cdx .cdx-btn{ min-width:0; text-align:center; line-height:1.25; }
.cdx .cdx-btn span{ min-width:0; overflow-wrap:anywhere; }
/* Текст, який вводять користувачі (назва деталі, артикул, VIN), може бути одним довгим
   «словом» — переносимо його, щоб картка не розпирала сторінку вбік. */
:where(h1, h2, h3, h4, h5, h6, p, li, dd, td, th, figcaption){ overflow-wrap:anywhere; }
@media (max-width:400px){
  .cdx .cdx-row .cdx-btn{ padding:10px 8px; gap:6px; font-size:14px; }
  .request-part-card__date{ white-space:normal; }
  .btnx{ height:auto !important; min-height:44px; line-height:1.25; white-space:normal !important; padding-inline:14px !important; }
  .request-part-card__badges{ flex:0 0 auto; max-width:none; }
  .nc-sort{ flex-wrap:wrap; max-width:100%; min-width:0; }
  .nc-sort select{ max-width:100%; min-width:0; }
  section.dl .dl-limits{ display:block; max-width:100%; overflow-x:auto; }
  section.dl .dl-limits th, section.dl .dl-limits td{ padding:8px 6px; }
  .pill, .seller-tab, .btnx{ white-space:normal; text-align:center; }
}
/* Лічильник сповіщень — з білою обвідкою, як на головному сайті */
.menu .header-icon .badge.notify-count{ border:2px solid #fff !important; box-sizing:border-box !important; }