/* =========================================================================
   NEODRIVE re-skin — foundation layer.
   Loaded AFTER css/styles.css so it overrides the legacy theme via the cascade.
   Step 0 (foundation): design tokens + self-hosted Onest + a light, safe
   global base. Layout/components are re-skinned per-page in later steps.
   Variable names mirror the NEODRIVE design system 1:1 so prototype component
   CSS (.nd-*) can be lifted verbatim later.
   ========================================================================= */

@import url('fonts/onest/onest.css');

:root {
  /* Brand red — the single accent (CTAs, sale prices, active states, logo) */
  --red: #E30613;
  --red-600: #C5050F;
  --red-700: #A1040C;
  --red-50: #FFF1F2;
  --red-100: #FFE1E3;

  /* Ink — near-navy neutral ramp (text + dark surfaces) */
  --ink: #1F2532;
  --ink-2: #3C4252;
  --ink-3: #6B7185;
  --ink-4: #9CA1B1;

  /* Surfaces — cool near-whites */
  --bg: #FFFFFF;
  --bg-2: #F6F7FA;
  --bg-3: #EFF1F5;
  --line: #E5E7EE;
  --line-2: #EEF0F5;

  /* Status */
  --green: #16A34A;  --green-50: #DCFCE7;
  --amber: #D97706;  --amber-50: #FEF3C7;
  --blue: #2563EB;   --blue-50: #DBEAFE;
  --sku: #006699;    /* колір номера запчастини у таблицях */

  /* Semantic aliases */
  --text: var(--ink);
  --text-muted: var(--ink-3);
  --surface: var(--bg);
  --surface-sunken: var(--bg-2);
  --border: var(--line);
  --accent: var(--red);
  --accent-hover: var(--red-600);

  /* Typography */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nd-font: var(--font);
  --font-mono: 'Onest', ui-monospace, monospace;
  --fs-base: 14px;
  --lh-base: 1.45;
  --fw-body: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-h4: 15px;
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-h1: 28px;
  --tracking-h1: -0.02em;
  --tracking-h2: -0.015em;
  --tracking-h3: -0.01em;
  --tracking-label: 0.06em;
  --tracking-caps: 0.12em;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Density + spacing */
  --density-y: 12px;
  --density-x: 14px;
  --sp-4: 4px;   --sp-6: 6px;   --sp-8: 8px;   --sp-10: 10px;
  --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;

  /* Elevation — cool, low-spread, near-navy tint (never pure black) */
  --sh-1: 0 1px 2px rgba(15,18,28,0.05);
  --sh-2: 0 4px 12px rgba(15,18,28,0.06), 0 1px 3px rgba(15,18,28,0.04);
  --sh-3: 0 12px 32px rgba(15,18,28,0.08), 0 2px 6px rgba(15,18,28,0.05);
  --focus-ring: 0 0 0 3px rgba(31,37,50,0.08);
}

/* ---- Global base (light + reversible; no layout/box-sizing changes yet) ---- */

html {
  background: var(--bg-3);
}

body {
  font-family: var(--nd-font);
  font-weight: var(--fw-body); /* NEODRIVE body = medium (500), not regular */
  color: var(--ink);
  background-color: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Посилання — ink за замовчуванням, червоний лише на hover (прототип:
   red — це акцент для CTA/цін-акцій/активних станів, не для всіх лінків). */
a { color: var(--ink); }
a:hover, a:focus { color: var(--red); }

::selection { background: var(--red-100); color: var(--ink); }

/* Заголовки — єдиний стиль H1–H6 у контенті. Легасі давав різнобій:
   h1/h2 = pf_l normal (світлі, сірий #333), а h3/h4 = браузерний bold —
   тому вони «якісь різні». Вирівнюємо під токени NEODRIVE: Onest, вага 800,
   колір ink, негативний трекінг, узгоджена шкала розмірів. Іконки content-h1
   (::before, 1.1em) масштабуються разом із кеглем, тож не ламаються. */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
  font-family: var(--font);
  font-weight: var(--fw-black);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .5em;
}
#content h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-h1); }
#content h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-h2); }
#content h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-h3); }
#content h4 { font-size: var(--fs-h4); }
#content h5, #content h6 { font-size: var(--fs-base); }

/* Tabular numerals for prices / SKUs / balances */
.nd-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---- Icons: NEODRIVE stroke set (24-grid, 1.6px, currentColor) ----
   Recolour via mask so any icon inherits text colour. SVGs live in css/icons/.
   Usage: <i class="nd-ico nd-ico--search"></i>  (inline-block, sized by font-size). */
.nd-ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--nd-ico) center / contain no-repeat;
  mask: var(--nd-ico) center / contain no-repeat;
}
.nd-ico--cart     { --nd-ico: url(icons/cart.svg); }
.nd-ico--search   { --nd-ico: url(icons/search.svg); }
.nd-ico--menu     { --nd-ico: url(icons/menu.svg); }
.nd-ico--grid     { --nd-ico: url(icons/grid.svg); }
.nd-ico--user     { --nd-ico: url(icons/user.svg); }
.nd-ico--phone    { --nd-ico: url(icons/phone.svg); }
.nd-ico--truck    { --nd-ico: url(icons/truck.svg); }
.nd-ico--wallet   { --nd-ico: url(icons/wallet.svg); }
.nd-ico--map      { --nd-ico: url(icons/map.svg); }
.nd-ico--clock    { --nd-ico: url(icons/clock.svg); }
.nd-ico--star     { --nd-ico: url(icons/star.svg); }
.nd-ico--shield   { --nd-ico: url(icons/shield.svg); }
.nd-ico--check    { --nd-ico: url(icons/check.svg); }
.nd-ico--info     { --nd-ico: url(icons/info.svg); }
.nd-ico--plus     { --nd-ico: url(icons/plus.svg); }
.nd-ico--filter   { --nd-ico: url(icons/filter.svg); }
.nd-ico--box      { --nd-ico: url(icons/box.svg); }
.nd-ico--heart    { --nd-ico: url(icons/heart.svg); }
.nd-ico--x        { --nd-ico: url(icons/x.svg); }
.nd-ico--chevron-l { --nd-ico: url(icons/chevron-l.svg); }
.nd-ico--chevron-r { --nd-ico: url(icons/chevron-r.svg); }
.nd-ico--chevron-u { --nd-ico: url(icons/chevron-u.svg); }
.nd-ico--chevron-d { --nd-ico: url(icons/chevron-d.svg); }
.nd-ico--bell     { --nd-ico: url(icons/bell.svg); }
.nd-ico--bell-off { --nd-ico: url(icons/bell-off.svg); }
.nd-ico--file     { --nd-ico: url(icons/file.svg); }
.nd-ico--image    { --nd-ico: url(icons/image.svg); }
.nd-ico--upload   { --nd-ico: url(icons/upload.svg); }
.nd-ico--calendar { --nd-ico: url(icons/calendar.svg); }
.nd-ico--globe    { --nd-ico: url(icons/globe.svg); }
.nd-ico--tag      { --nd-ico: url(icons/tag.svg); }
.nd-ico--refresh  { --nd-ico: url(icons/refresh.svg); }
.nd-ico--home     { --nd-ico: url(icons/home.svg); }

/* ---- Social: letter badge in a circle (NEODRIVE prototype .nd-social) ---- */
.nd-social-links { display: inline-flex; gap: var(--sp-8); align-items: center; }
.nd-social-links .social,
a.nd-social {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: var(--fw-black);
  line-height: 1;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  transition: background .15s, color .15s, border-color .15s;
}
.nd-social-links .social:hover,
a.nd-social:hover { background: var(--red); color: #fff; border-color: var(--red); }
.nd-social-l { text-transform: lowercase; pointer-events: none; }

/* ---- Rebrand: SyndiCar -> NEODRIVE logo (header background-image slot) ---- */
.front #header,
.not-front #header {
  background-image: url(/images/neodrive-logo.png);
  background-size: 260px auto;
  background-position: left 60px;
}


/* =========================================================================
   ICON RESKIN — legacy icons -> NEODRIVE stroke set (mask, currentColor).
   Generated via zone fan-out; each block verified against css/styles.css.
   ========================================================================= */

/* ============================================================
 * NEODRIVE reskin: Header search + user-nav icons
 * Zone: header-search-usernav (styles.css ~1731-1775)
 * Repaints legacy PNG icons via CSS mask; layout preserved.
 * ============================================================ */

/* Search submit button (icon-only) — legacy images/search.png -> search.svg
   Was: width:22px; height:27px; background:url(images/search.png) center center. */
#block-pt-search #user-search input[type="submit"] {
    background-image: none !important;
    background-color: var(--ink-3);
    -webkit-mask: url(/css/icons/search.svg) center / 20px 20px no-repeat;
    mask: url(/css/icons/search.svg) center / 20px 20px no-repeat;
}

/* profile-link (text + icon) — legacy images/icom-user.png -> user.svg */
#block-system-user-menu ul .profile-link a {
    background-image: none !important;
    padding-left: 0;
}
#block-system-user-menu ul .profile-link a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/user.svg) center / contain no-repeat;
    mask: url(/css/icons/user.svg) center / contain no-repeat;
}

/* olist-link (Замовлення, text + icon) -> clipboard.svg (список замовлень) */
#block-system-user-menu ul .olist-link a {
    background-image: none !important;
    padding-left: 0;
}
#block-system-user-menu ul .olist-link a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/clipboard.svg) center / contain no-repeat;
    mask: url(/css/icons/clipboard.svg) center / contain no-repeat;
}

/* order-link (Звіти/взаєморозрахунки, text + icon) -> file.svg (документ/звіт) */
#block-system-user-menu ul .order-link a {
    background-image: none !important;
    padding-left: 0;
}
#block-system-user-menu ul .order-link a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/file.svg) center / contain no-repeat;
    mask: url(/css/icons/file.svg) center / contain no-repeat;
}

/* currency-link (Курс €, text + icon) -> exchange.svg (обмін/курс) */
#block-system-user-menu ul .currency-link a {
    background-image: none !important;
    padding-left: 0;
}
#block-system-user-menu ul .currency-link a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/exchange.svg) center / contain no-repeat;
    mask: url(/css/icons/exchange.svg) center / contain no-repeat;
}

/* ballance-link (balance, text + icon) — legacy images/icom-ballans.png -> wallet.svg */
#block-system-user-menu ul .ballance-link a {
    background-image: none !important;
    padding-left: 0;
}
#block-system-user-menu ul .ballance-link a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/wallet.svg) center / contain no-repeat;
    mask: url(/css/icons/wallet.svg) center / contain no-repeat;
}

/* bascet-link (cart, text + icon) — legacy images/icom-bascet.png -> cart.svg */
#block-system-user-menu ul .bascet-link a {
    background-image: none !important;
    padding-left: 0;
}
#block-system-user-menu ul .bascet-link a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/cart.svg) center / contain no-repeat;
    mask: url(/css/icons/cart.svg) center / contain no-repeat;
}

/* logout-link (Вихід, text + icon) -> logout.svg (двері+стрілка) */
#block-system-user-menu ul .logout-link a {
    background-image: none !important;
    padding-left: 0;
}
#block-system-user-menu ul .logout-link a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: var(--red);
    -webkit-mask: url(/css/icons/logout.svg) center / contain no-repeat;
    mask: url(/css/icons/logout.svg) center / contain no-repeat;
}

/* ЗОНА: Breadcrumb стрілка-роздільник
   Заміна старої іконки: #breadcrumb li.crumb-first background url(images/breadcrumparrow-web.png)
   Стара PNG-стрілка-роздільник зліва від першої крихти -> NEODRIVE chevron-r.
   Елемент inline з текстом + фонова іконка зліва (padding-left:15px), тож
   прибираємо стару bg-іконку і малюємо chevron через ::before. */
#breadcrumb li.crumb-first {
    background-image: none !important;
    padding-left: 0;
}
#breadcrumb li.crumb-first::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-right: .3em;
    background-color: var(--ink-4);
    -webkit-mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
    mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
}
/* роздільник "/" між крихтами був синій (#069, styles.css:687) -> нейтральний */
#breadcrumb li span { color: var(--ink-4) !important; }

/* ============================================================
 * NEODRIVE reskin — ZONE: Sliders & carousels (arrows)
 * Pure-icon elements: keep existing size/position, swap PNG -> stroke icon via mask.
 * ============================================================ */

/* #block-partners .bx-prev (images/slide2.png, 32x32, left) -> chevron-l */
#block-partners .bx-prev{
    background-image: none !important;
    background-color: var(--ink-2);
    -webkit-mask: url(/css/icons/chevron-l.svg) center / contain no-repeat;
    mask: url(/css/icons/chevron-l.svg) center / contain no-repeat;
}

/* #block-partners .bx-next (images/slide2.png, 32x32, right) -> chevron-r */
#block-partners .bx-next{
    background-image: none !important;
    background-color: var(--ink-2);
    -webkit-mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
    mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
}

/* #block-slider-main .bx-prev (images/slide1.png sprite -1px, 50x50, left) -> chevron-l */
#block-slider-main .bx-prev{
    background-image: none !important;
    background-color: var(--ink-2);
    -webkit-mask: url(/css/icons/chevron-l.svg) center / contain no-repeat;
    mask: url(/css/icons/chevron-l.svg) center / contain no-repeat;
}

/* #block-slider-main .bx-next (images/slide1.png sprite -59px, 50x50, right) -> chevron-r */
#block-slider-main .bx-next{
    background-image: none !important;
    background-color: var(--ink-2);
    -webkit-mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
    mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
}

/* Gallery popup arrows sit on a dark overlay (color:#fff), 45%-wide hit area,
 * icon kept small (30px) and edge-aligned via mask-size/mask-position.
 * Legacy class names are swapped vs. their arrow images, so map by visual direction. */

/* .popup b.prev (images/arrow_next.png, center-right, right edge) -> chevron-r */
.popup b.prev{
    background-image: none !important;
    background-color: #fff;
    -webkit-mask: url(/css/icons/chevron-r.svg) center right / 30px no-repeat;
    mask: url(/css/icons/chevron-r.svg) center right / 30px no-repeat;
}

/* .popup b.next (images/arrow_prev.png, left-center, left edge) -> chevron-l */
.popup b.next{
    background-image: none !important;
    background-color: #fff;
    -webkit-mask: url(/css/icons/chevron-l.svg) center left / 30px no-repeat;
    mask: url(/css/icons/chevron-l.svg) center left / 30px no-repeat;
}

/* ============================================================
 *  NEODRIVE reskin — ZONE: Sidebar content headings
 * ============================================================ */

/* News block heading — old: images/news.png  ->  clock
   .two-columns aside #block-news h2 has inherited padding-left:30px
   (from .two-columns aside .block h2) + bg-icon at left center.
   Text + bg-icon => drop bg, draw icon in the existing 30px slot. */
.two-columns aside #block-news h2 {
    background-image: none !important;
    position: relative;
}
.two-columns aside #block-news h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/clock.svg) center / contain no-repeat;
    mask: url(/css/icons/clock.svg) center / contain no-repeat;
}

/* "All news" arrow link — old: images/enter-blue.png  ->  chevron-r (red)
   .two-columns aside #block-news .all-news .to-all-news:
   inline-block link, padding-left:30px, bg-icon left center + text.
   Keep the 30px text indent, paint arrow in that slot. */
.two-columns aside #block-news .all-news .to-all-news {
    background-image: none !important;
    position: relative;
    color: var(--red) !important;   /* текст був синій #069 -> червоний, як стрілка */
    font-weight: var(--fw-semi);
}
.two-columns aside #block-news .all-news .to-all-news:hover {
    color: var(--red-600) !important;
}
.two-columns aside #block-news .all-news .to-all-news::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--red);
    -webkit-mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
    mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
}

/* Upcoming ("Надходження") block heading — old: images/recomended.png  ->  star
   .two-columns aside #block-comings h2: padding-left:30px + bg-icon left center. */
.two-columns aside #block-comings h2 {
    background-image: none !important;
    position: relative;
}
.two-columns aside #block-comings h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/star.svg) center / contain no-repeat;
    mask: url(/css/icons/star.svg) center / contain no-repeat;
}

/* Recommended goods block heading — old: images/recomended.png  ->  star
   .two-columns aside .block-recomended-goods h2: padding-left:30px + bg-icon
   left center. currentColor lets the icon follow the .goods red variant. */
.two-columns aside .block-recomended-goods h2 {
    background-image: none !important;
    position: relative;
}
.two-columns aside .block-recomended-goods h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/star.svg) center / contain no-repeat;
    mask: url(/css/icons/star.svg) center / contain no-repeat;
}

/* --- Сайдбар/віджет-заголовки: єдиний стиль із контентними H (Onest/800/ink).
   Легасі давав 24px|16px, вагу 400, сірий #333 / бірюзовий #1c3435, pf_l/pf_med
   — звідси різнобій. Стосується і ГОСТЯ (#block-news «Новини»), і
   АВТОРИЗОВАНОГО (#block-comings «Поступлення на склад»,
   .block-recomended-goods «Акційні пропозиції», #store-right-sidebar).
   !important — бо легасі-селектори мають високу специфічність. */
.two-columns aside .block h2,
.two-columns aside #block-news h2,
.two-columns aside #block-comings h2,
.block-recomended-goods h2,
#store-right-sidebar h2,
#page .node-content .page-menu-col .block-title h2 {
  font-family: var(--font) !important;
  font-weight: var(--fw-black) !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  letter-spacing: var(--tracking-h3);
  line-height: 1.3;
}
/* червоний акцент назви товару в заголовку рекомендованих — лишаємо */
.block-recomended-goods h2.goods,
.block-recomended-goods h2 .goods { color: var(--red) !important; }
/* іконки сайдбар-заголовків під новий кегль 18px (було 24) */
.two-columns aside #block-news h2::before,
.two-columns aside #block-comings h2::before,
.two-columns aside .block-recomended-goods h2::before,
.block-recomended-goods h2::before,
#store-right-sidebar h2::before { width: 20px !important; height: 20px !important; }

/* ===== ZONE: forms-profile (NEODRIVE icon reskin) ===== */

/* replaces #profile #delivery_show .ui-icon -> images/ico-point.png (map point) => map.svg
   pure-icon element (inline-block, sits beside .ui-button-text); keep 17x22 box, recolor via mask */
#profile #delivery_show .ui-icon {
    background-image: none !important;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/map.svg) center / contain no-repeat;
    mask: url(/css/icons/map.svg) center / contain no-repeat;
}

/* ============================================================
   ZONE: Каталог/кошик (таблиця товарів) — NEODRIVE icon reskin
   Icon-only cells (fixed w/h, no adjacent text) -> mask mechanism.
   ============================================================ */

/* cart-red.png -> cart (red). Selectors: td.cart a.reg / a.red (~2249-2250) */
.table-list tr td.cart a.reg, .container .content #basket tr td.cart a.reg,
.table-list tr td.cart a.red, .container .content #basket tr td.cart a.red {
  background-image: none !important;
  background-color: var(--red);
  -webkit-mask: url(/css/icons/cart.svg) center / contain no-repeat;
          mask: url(/css/icons/cart.svg) center / contain no-repeat;
}

/* cart-red.png -> cart (red): home popular-goods buy link (.to-buy-link .red, ~2511)
   + product-page group-info add-to-cart (a.infopage-add-cart-red, ~2295) */
.view-with-goods .price-basket .to-buy-link .red,
a.infopage-add-cart-red,
div.group-info div.info-line span.info-line-right a.infopage-add-cart-red {
  background-image: none !important;
  background-color: var(--red);
  -webkit-mask: url(/css/icons/cart.svg) center / contain no-repeat;
          mask: url(/css/icons/cart.svg) center / contain no-repeat;
}

/* cart-grey.png -> cart (muted). Selector: td.cart a.grey (~2253) */
.table-list tr td.cart a.grey {
  background-image: none !important;
  background-color: var(--ink-4);
  -webkit-mask: url(/css/icons/cart.svg) center / contain no-repeat;
          mask: url(/css/icons/cart.svg) center / contain no-repeat;
}

/* info-red.png -> info (red). Selector: td .info-red (~2257) — keep 20x20 box */
.table-list tr td .info-red {
  background-image: none !important;
  background-color: var(--red);
  background-size: auto;
  -webkit-mask: url(/css/icons/info.svg) center / contain no-repeat;
          mask: url(/css/icons/info.svg) center / contain no-repeat;
}

/* info-grey.png -> info (muted). Selector: td .info-grey (~2258) — grey counterpart of info-red */
.table-list tr td .info-grey {
  background-image: none !important;
  background-color: var(--ink-4);
  background-size: auto;
  -webkit-mask: url(/css/icons/info.svg) center / contain no-repeat;
          mask: url(/css/icons/info.svg) center / contain no-repeat;
}

/* === ZONE: Кошик — заголовок і кнопки (order-cart-buttons) === */

/* #order-cart h1 (heading, text + left bg-icon images/ico-cart.png, padding-left:40px)
   -> NEODRIVE cart через ::before (mask, currentColor). Прибираємо стару bg-іконку
   і зайвий padding-left, іконку даємо інлайн перед текстом. */
#order-cart h1 { background-image: none !important; padding-left: 0 !important; }
#order-cart h1::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/cart.svg) center / contain no-repeat;
    mask: url(/css/icons/cart.svg) center / contain no-repeat;
}

/* Кнопки дій кошика — кожна має СВОЄ призначення й СВОЮ іконку:
   #btn_calc "Перерахувати" (refresh), #btn_delete "Видалити" (trash, red),
   #btn_checkout "Оформити" (cart, головний CTA). Глобальне правило
   #content input[type=submit] (специфічність 1,1,1 + !important) робило їх
   однаковими червоними колами з прихованим текстом. Перебиваємо його
   2-ID селектором (#basket_form #id = 2,0,0) і повертаємо ПІДПИСАНІ кнопки.
   Це <input>, тож ::before/mask неможливі — іконку даємо background-image
   зліва (mask обрізав би підпис). trash.svg вже червоний, cart-white білий,
   refresh стає ink-чорним у background-контексті. */
#basket_form #btn_calc,
#basket_form #btn_delete,
#basket_form #btn_checkout {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    border-radius: var(--r-md) !important;
    text-indent: 0 !important;
    overflow: visible !important;
    padding: 9px 16px 9px 38px !important;
    font: var(--fw-semi) 13px var(--font) !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px 16px !important;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, opacity .15s;
}
/* Перерахувати — secondary-outline, ink текст, refresh-іконка */
#basket_form #btn_calc {
    background-color: #fff !important;
    background-image: url(/css/icons/refresh.svg) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}
#basket_form #btn_calc:hover:not([disabled]) {
    background-color: var(--bg-2) !important;
    border-color: var(--ink-4) !important;
}
/* Видалити — outline з червоним акцентом (danger), trash-іконка (червона) */
#basket_form #btn_delete {
    background-color: #fff !important;
    background-image: url(/css/icons/trash.svg) !important;
    border: 1px solid var(--line) !important;
    color: var(--red) !important;
    font-weight: var(--fw-bold) !important;
}
#basket_form #btn_delete:hover:not([disabled]) {
    background-color: var(--bg-2) !important;
    border-color: var(--red) !important;
}
/* Оформити — головний CTA: суцільний червоний, білий текст, cart-іконка (біла) */
#basket_form #btn_checkout {
    background-color: var(--red) !important;
    background-image: url(/css/icons/cart-white.svg) !important;
    border: 1px solid var(--red) !important;
    color: #fff !important;
    padding: 10px 22px 10px 42px !important;
    font-size: 14px !important;
}
#basket_form #btn_checkout:hover:not([disabled]) {
    background-color: var(--red-600) !important;
    border-color: var(--red-600) !important;
}
/* disabled-стан (legacy disabled="on" / .ui-state-disabled) — читабельний, не 0.35 */
#basket_form #btn_calc[disabled],
#basket_form #btn_delete[disabled],
#basket_form #btn_checkout[disabled] {
    opacity: .5 !important;
    cursor: not-allowed;
}

/* extra: store right sidebar heading — images/recomended.png -> star */
#store-right-sidebar h2 {
    background-image: none !important;
    position: relative;
    padding-left: 30px;
}
#store-right-sidebar h2::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
    background-color: currentColor;
    -webkit-mask: url(/css/icons/star.svg) center / contain no-repeat;
    mask: url(/css/icons/star.svg) center / contain no-repeat;
}


/* =========================================================================
   ICON RESKIN — part 2: content page h1 headings + new NEODRIVE glyphs for gaps.
   ========================================================================= */

/* reset legacy bg-icon + left padding on all reskinned headings */
#download h1,
#rules h1,
#vin h1,
#delivery h1,
#shares h1,
#marks h1,
#cat h1,
#brand h1,
#brands h1,
#like h1,
#store h1,
#povernenya h1,
#page .node-content .page-menu-col .block-title h2,
#news h1,
.node-type-news h1,
#index h1,
#about-us h1,
#contact h1,
#register h1,
#passwd h1,
#user-profile h1,
#jobs h1,
#olist h1,
#zvitu h1,
#partner h1,
#index #pre-footer #pre-footer-content #block-partners h2,
#cooperation h1,
#autoservice h1 {
    background-image: none !important;
    padding-left: 0 !important;
}

/* -> truck (лишається для каталогу АВТОМОБІЛІВ #marks + сторінок доставки) */
#download h1::before,
#rules h1::before,
#vin h1::before,
#delivery h1::before,
#shares h1::before,
#marks h1::before,
#brand h1::before,
#brands h1::before,
#povernenya h1::before,
#page .node-content .page-menu-col .block-title h2::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/truck.svg) center / contain no-repeat; mask:url(/css/icons/truck.svg) center / contain no-repeat; }

/* -> wrench (каталог ЗАПЧАСТИН #cat: категорії/товар/деталь, магазин #store,
   результати пошуку #like). Запчастини = ключ, а не вантажівка. */
#cat h1::before,
#store h1::before,
#like h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/wrench.svg) center / contain no-repeat; mask:url(/css/icons/wrench.svg) center / contain no-repeat; }

/* -> clock */
#news h1::before,
.node-type-news h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/clock.svg) center / contain no-repeat; mask:url(/css/icons/clock.svg) center / contain no-repeat; }

/* -> info */
#index h1::before,
#about-us h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/info.svg) center / contain no-repeat; mask:url(/css/icons/info.svg) center / contain no-repeat; }

/* -> phone */
#contact h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/phone.svg) center / contain no-repeat; mask:url(/css/icons/phone.svg) center / contain no-repeat; }

/* -> user */
#register h1::before,
#passwd h1::before,
#user-profile h1::before,
#jobs h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/user.svg) center / contain no-repeat; mask:url(/css/icons/user.svg) center / contain no-repeat; }

/* -> grid */
#olist h1::before,
#zvitu h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/grid.svg) center / contain no-repeat; mask:url(/css/icons/grid.svg) center / contain no-repeat; }

/* -> globe */
#partner h1::before,
#index #pre-footer #pre-footer-content #block-partners h2::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/globe.svg) center / contain no-repeat; mask:url(/css/icons/globe.svg) center / contain no-repeat; }

/* -> check */
#cooperation h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/check.svg) center / contain no-repeat; mask:url(/css/icons/check.svg) center / contain no-repeat; }

/* -> shield */
#autoservice h1::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/shield.svg) center / contain no-repeat; mask:url(/css/icons/shield.svg) center / contain no-repeat; }

/* gaps: table cells (icon-only) — new glyphs, mask on element */
.table-list tr td.cart a.notify-on, .container .content #basket tr td.cart a.notify-on {
    background-image: none !important;
    background-size: auto;
    background-color: var(--ink-2);
    -webkit-mask: url(/css/icons/bell.svg) center / contain no-repeat;
    mask: url(/css/icons/bell.svg) center / contain no-repeat;
}
.table-list tr td.cart a.notify-off, .container .content #basket tr td.cart a.notify-off {
    background-image: none !important;
    background-size: auto;
    background-color: var(--ink-4);
    -webkit-mask: url(/css/icons/bell-off.svg) center / contain no-repeat;
    mask: url(/css/icons/bell-off.svg) center / contain no-repeat;
}
.table-list tr td a.xls, a.xls {
    background-image: none !important;
    background-size: auto;
    background-color: var(--green);
    -webkit-mask: url(/css/icons/file.svg) center / contain no-repeat;
    mask: url(/css/icons/file.svg) center / contain no-repeat;
}
.table-list tr td .photo-red {
    background-image: none !important;
    background-size: auto;
    background-color: var(--red);
    -webkit-mask: url(/css/icons/image.svg) center / contain no-repeat;
    mask: url(/css/icons/image.svg) center / contain no-repeat;
}
.table-list tr td .photo-grey {
    background-image: none !important;
    background-size: auto;
    background-color: var(--ink-4);
    -webkit-mask: url(/css/icons/image.svg) center / contain no-repeat;
    mask: url(/css/icons/image.svg) center / contain no-repeat;
}
.table-list tr td .pdf-red {
    background-image: none !important;
    background-size: auto;
    background-color: var(--red);
    -webkit-mask: url(/css/icons/file.svg) center / contain no-repeat;
    mask: url(/css/icons/file.svg) center / contain no-repeat;
}
.table-list tr td .pdf-grey {
    background-image: none !important;
    background-size: auto;
    background-color: var(--ink-4);
    -webkit-mask: url(/css/icons/file.svg) center / contain no-repeat;
    mask: url(/css/icons/file.svg) center / contain no-repeat;
}

/* upload button (text + icon) */
#jobs #jobs-form .form-item.form-item-file #upload-button {
    background-image: none !important;
    padding-left: 0 !important;
}
#jobs #jobs-form .form-item.form-item-file #upload-button::before { content:''; display:inline-block; vertical-align:middle; width:1.1em; height:1.1em; margin-right:.4em; background-color:currentColor; -webkit-mask:url(/css/icons/upload.svg) center / contain no-repeat; mask:url(/css/icons/upload.svg) center / contain no-repeat; }

/* Перерахувати button — calculator -> refresh (bg-image swap; <input>, mask hides text) */
#btn_calc {
    background-image: url(/css/icons/refresh.svg) !important;
    background-size: 18px 18px;
}


/* =========================================================================
   STEP 1 — LAYOUT: responsive header + fluid container.
   Legacy header was fixed 1000/1300px with absolute logo & search + fixed
   top bar. Here we make it fluid (grid: sticky top-bar / logo + search),
   convert absolute→flow, and add mobile breakpoints. Reversible override.
   ========================================================================= */

/* Fluid container — cap desktop at 1320, full-width below, side gutters */
#page.container { max-width: 1320px; width: 100% !important; min-width: 0 !important; margin: 0 auto; padding: 0 20px; }
.front #header, .not-front #header,
.top-header-wrapper, #columns, #branding {
  width: 100% !important; min-width: 0 !important; max-width: 100%;
}

/* Header as grid: [top-bar spans] then [logo | search] */
#header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "topbar topbar" "logo search";
  align-items: center;               /* vertically centre logo + search */
  column-gap: 28px;
  background-image: none !important;      /* drop legacy bg logo */
  padding: 68px 0 16px;              /* clears the fixed top-bar + breathing room */
}
#brandlink { align-self: center; }
/* kill legacy #branding height:105 + padding-top:53 (old fixed-topbar clearance)
   so the search sits at the block's centre, level with the logo */
#branding  { align-self: center; height: auto !important; min-height: 0 !important; padding: 0 !important; }
.top-header  { grid-area: topbar; }
#brandlink   { grid-area: logo; position: static !important; }
#branding    { grid-area: search; }

/* Logo — flowing, on the clickable link */
#brandlink a.brand-logo-link {
  position: static !important;
  padding: 0 !important;
  width: 210px; height: 54px; max-width: 46vw;
  margin: 0;
  background: url(/images/neodrive-logo.png) left center / contain no-repeat;
  display: block;
}

/* Top bar — sticky in-flow, light, fluid */
.top-header {
  position: sticky !important; top: 0; left: auto; right: auto;
  height: auto; min-height: 44px; overflow: visible;
  background: #fff !important;
  border-bottom: 1px solid var(--line);
  z-index: 60;
}
.top-header-wrapper {
  margin: 0 auto; max-width: 1320px; padding: 0 20px;
  display: flex; align-items: center; justify-content: flex-end;
}
/* user-nav (logged in): flex row, scroll on small */
#block-system-user-menu { width: 100%; }
#block-system-user-menu ul {
  display: flex !important; width: 100%; align-items: center;
  justify-content: space-between; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
#block-system-user-menu ul li {
  display: inline-flex !important; align-items: center; height: 44px;
  flex-shrink: 0; padding: 0 10px; white-space: nowrap;
}
#block-system-user-menu ul li a { line-height: 1.2; color: var(--ink-2); }
/* login form (guest): row */
/* guest login bar: form on the LEFT, Реєстрація/Забули пароль on the RIGHT (old site).
   Markup is ul > form#sign-in > li, so the FORM is the flex row. */
#block-pt-login { width: 100%; }
#block-pt-login .block-inner, #block-pt-login .block-content, #block-pt-login .block-content ul { width: 100%; }
#block-pt-login #sign-in {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; width: 100%;
}
#block-pt-login #sign-in li { list-style: none; display: flex; align-items: center; white-space: nowrap; }
#block-pt-login #sign-in li:first-child { gap: 8px; margin-right: auto; } /* fields left, push links right */

/* Search — flowing flex row (select + field + submit) */
#block-pt-search {
  position: static !important; right: auto; bottom: auto;
  padding-top: 0 !important; width: 100%;
  display: block; align-items: center;
}
/* hide the now-empty social/B2B block-inner above the search (B2B link disabled) */
#block-pt-search .block-inner:has(.social-links) { display: none; }
#block-pt-search #user-search, #block-pt-search #user-search form { width: 100%; }
#block-pt-search #user-search > div { display: flex; align-items: center; gap: 8px; width: 100%; }
#block-pt-search #user-search input[type="text"],
#block-pt-search .chosen-container { flex: 1 1 auto; }
#block-pt-search #user-search input[type="submit"] { position: static !important; flex: 0 0 auto; }

/* Primary menu — full-width horizontal bar under the header */
#primary-menu-bar {
  background: var(--ink); border-radius: var(--r-md);
  margin: 0 0 20px;
}
#primary-menu-bar ul.dropdown { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
#primary-menu-bar ul.dropdown > li.menu_item { min-width: 0; margin: 0; }
#primary-menu-bar ul.dropdown > li.menu_item > a { color: #fff; padding: 12px 16px; display: block; }
#primary-menu-bar ul.dropdown > li.menu_item:hover > a { color: #fff; background: var(--red); }

/* бургер — лише на мобільному (нижче показуємо у @media <=760px) */
.nd-burger { display: none; }

/* ---- Breakpoints ---- */
@media (max-width: 900px) {
  #header { grid-template-columns: 1fr; grid-template-areas: "topbar" "logo" "search"; }
  #brandlink a.brand-logo-link { max-width: 200px; }
  #block-pt-search { justify-content: stretch; }
  #block-pt-search #user-search > div { max-width: none; }
  #primary-menu-bar ul.dropdown { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  #primary-menu-bar ul.dropdown > li.menu_item { flex: 0 0 auto; min-width: 0; }
  #primary-menu-bar ul.dropdown > li.menu_item > a { white-space: nowrap; }
  /* keep hover-dropdown submenus from forcing width in the scroll bar */
  #primary-menu-bar ul.dropdown > li.menu_item > ul { position: absolute; }
}

/* Header layout fixes: border-box so width:100%+padding doesn't overflow.
   overflow-x: clip (NOT hidden) — clips stray horizontal overflow without
   creating a scroll container, so position:sticky keeps working. */
html { overflow-x: clip; }
#page.container, #header, .top-header, .top-header-wrapper,
#branding, #block-pt-search, #block-pt-search #user-search > div,
#primary-menu-bar, #columns { box-sizing: border-box; }

/* (прибрано старі 900px-правила пошуку, що ламали пілюлю — тепер пошук
   лишається однорядковою flex-пілюлею й на мобільному, див. <=760px нижче) */

/* ---- Мобільний хедер (<=760px): топ-бар статичний, логін і пошук стекаються ---- */
@media (max-width: 760px) {
  /* Хедер: flex-колонка замість grid — grid давав циркулярну висоту (рядок
     "search" схлопувався до 1 рядка, і 2-й ряд пошуку вилазив у меню).
     Порядок: топ-бар -> лого -> пошук (DOM: brandlink, top-header, branding). */
  #header {
    display: flex !important; flex-direction: column; align-items: stretch;
    padding: 0 0 8px !important; position: relative;   /* для абсолютного бургера */
  }
  /* Порядок: лого(1) -> пошук(2); топ-бар(3) прихований, розкривається бургером.
     #header .top-header — вища специфічність, щоб перебити .top-header{position:fixed!important}. */
  #header #brandlink { order: 1; margin: 12px 0 8px; flex: 0 0 auto; position: static !important; }
  #header #branding  { order: 2; flex: 0 0 auto; position: static !important; }
  #header .top-header {
    order: 3; position: static !important; height: auto !important; min-height: 0 !important;
    flex: 0 0 auto; display: none;                     /* топ-меню -> у бургер */
    border-top: 1px solid var(--line); margin-top: 10px;
  }
  html.nd-menu-open #header .top-header { display: block; }
  .top-header-wrapper { padding: 8px 16px !important; justify-content: flex-start; }
  /* авторизоване топ-меню у бургері -> вертикальний список (не гориз. скрол) */
  html.nd-menu-open #header #block-system-user-menu ul {
    flex-direction: column !important; overflow-x: visible !important; align-items: stretch !important; gap: 0 !important;
  }
  html.nd-menu-open #header #block-system-user-menu ul li {
    width: 100% !important; height: auto !important; justify-content: flex-start !important;
    padding: 10px 4px !important; border-bottom: 1px solid var(--line);
  }
  html.nd-menu-open #header #block-system-user-menu ul li:last-child { border-bottom: 0; }

  /* Гостьовий логін: поля логін+пароль+Вхід в один ряд (стискаються),
     "Забули пароль?/Реєстрація" переносяться нижче. Спершу прибираємо
     дефолтний padding-left списку та зайві ширини обгорток (li вилазив на 404px). */
  #block-pt-login,
  #block-pt-login .block-inner,
  #block-pt-login .block-content,
  #block-pt-login .block-content ul,
  #block-pt-login #sign-in {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
    box-sizing: border-box;
  }
  #block-pt-login #sign-in { flex-wrap: wrap; gap: 8px 12px; width: 100%; }
  #block-pt-login #sign-in > li:first-child {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    width: 100%; margin: 0 !important;
  }
  #block-pt-login #sign-in .usernameinp { display: none; }
  #block-pt-login #sign-in input[type="text"],
  #block-pt-login #sign-in input[type="password"] {
    flex: 1 1 0; min-width: 0; width: auto !important;
  }
  #block-pt-login #sign-in input[type="submit"] { flex: 0 0 auto; }
  #block-pt-login #sign-in > li:not(:first-child) { margin: 0 !important; }

  /* Пошук (<=760px): тип пошуку (селект) ховаємо зовсім — за замовчуванням
     пошук за номером (сам <select> лишається у DOM зі значенням 1, тож
     сабмітиться). Лишаємо поле + лупу одним рядком-пілюлею на всю ширину
     (десктопна пілюля #user-search > div: flex, поле flex:1, червона кнопка). */
  #header #block-pt-search { position: static !important; }
  #header #block-pt-search .form-item { float: none !important; }   /* легасі float:left схлопував контейнер */
  #header #block-pt-search .form-item.search-select { display: none !important; }

  /* --- Бургер: справа від лого, над формою пошуку (абсолютно у #header) --- */
  .nd-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 42px; padding: 0 11px; margin: 0;
    background: var(--ink) !important; border: 0; border-radius: var(--r-md); cursor: pointer;
    position: absolute; top: 8px; right: 0; z-index: 70;
  }
  .nd-burger span { display: block; height: 2px; width: 22px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
  html.nd-menu-open .nd-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.nd-menu-open .nd-burger span:nth-child(2) { opacity: 0; }
  html.nd-menu-open .nd-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Меню-бар: без темного тла / full-width ::before; це просто контейнер меню */
  #primary-menu-bar { background: transparent !important; margin: 0 0 16px !important; }
  #primary-menu-bar::before { display: none !important; }
  /* Меню приховане, розкривається бургером у вертикальний список-картку */
  #primary-menu-bar .menu { display: none; }
  html.nd-menu-open #primary-menu-bar .menu { display: block; }
  #primary-menu-bar ul.dropdown {
    display: block; overflow: visible; flex-wrap: nowrap;
    margin: 10px 0 0; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  }
  #primary-menu-bar ul.dropdown > li.menu_item {
    display: block; width: 100%; flex: none;
    border-bottom: 1px solid var(--line);
  }
  #primary-menu-bar ul.dropdown > li.menu_item:last-child { border-bottom: 0; }
  #primary-menu-bar ul.dropdown > li.menu_item > a {
    display: block; padding: 13px 16px !important; color: var(--ink) !important;
    background: none !important; border-bottom: 0 !important; font-weight: var(--fw-semi);
  }
  /* пункти з підменю — індикатор + акордеон */
  #primary-menu-bar ul.dropdown > li.menu_item:has(ul) > a::after {
    content: ''; float: right; width: 16px; height: 16px; margin-top: 3px;
    background: var(--ink-3); -webkit-mask: url(/css/icons/chevron-d.svg) center/contain no-repeat; mask: url(/css/icons/chevron-d.svg) center/contain no-repeat;
    transition: transform .2s;
  }
  #primary-menu-bar ul.dropdown > li.menu_item.nd-sub-open > a::after { transform: rotate(180deg); }
  #primary-menu-bar ul.dropdown > li.menu_item > ul {
    display: none; position: static !important; box-shadow: none !important;
    background: var(--bg-2); margin: 0; padding: 0; border: 0; width: auto; min-width: 0;
  }
  #primary-menu-bar ul.dropdown > li.menu_item.nd-sub-open > ul { display: block; }
  #primary-menu-bar ul.dropdown > li.menu_item > ul > li { border-top: 1px solid var(--line); }
  #primary-menu-bar ul.dropdown > li.menu_item > ul > li > a {
    display: block; padding: 11px 16px 11px 30px !important; color: var(--ink-2) !important; background: none !important;
  }
}


/* =========================================================================
   STEP 1 — LAYOUT: footer (NEODRIVE dark, responsive grid).
   Legacy footer: fixed 390px height, plashka bg, black text, 1000/1300 floats.
   ========================================================================= */
#footer {
  height: auto !important;
  padding: 44px 0 40px !important;
  background: var(--ink);
  color: var(--ink-4);
  clear: both;
}
#footer .region-inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* contact box — transparent, 4-up shops grid */
#block-contact-box {
  width: 100% !important; height: auto !important;
  background: none !important;
  margin-bottom: 28px; padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#block-contact-box .block-inner { width: 100% !important; max-width: 1320px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#block-contact-box .contact-slide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
#block-contact-box .lot { float: none !important; width: auto !important; padding: 0 !important; margin: 0; }
#block-contact-box a.fmed { color: #fff !important; font-weight: var(--fw-semi); }
#block-contact-box .small { color: var(--ink-4); margin-bottom: 8px; }
#block-contact-box .phones, #block-contact-box .phones a span { color: #fff; font-weight: var(--fw-bold); }

/* footer-second — 3-col grid (brand/social | menu | services) */
#block-footer-second .block-inner { width: 100% !important; max-width: 1320px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#block-footer-second .block-content { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; align-items: start; }
#block-footer-second .pits-social,
#block-footer-second .footer-menu,
#block-footer-second .pits-servises { float: none !important; width: auto !important; }
#block-footer-second .copyright { color: var(--ink-4); font-size: 13px; }
#block-footer-second .copyright span { color: var(--ink-4); }
#block-footer-second .copyright span a { color: #fff; }
#block-footer-second .nd-social-links { margin-top: 14px; }
#block-footer-second .subtitle { color: #fff; font-weight: var(--fw-bold); display: block; margin-bottom: 10px; }
#block-footer-second .footer-menu li { width: 100% !important; display: block !important; margin-bottom: 6px; }
#block-footer-second a { color: var(--ink-4) !important; }
#block-footer-second a:hover { color: var(--red) !important; }

@media (max-width: 900px) {
  #block-contact-box .contact-slide { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  #block-footer-second .block-content { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  #block-contact-box .contact-slide { grid-template-columns: 1fr; }
}


/* =========================================================================
   STEP 1 — LAYOUT: content grids / wide tables responsive.
   Two-column layouts are already %-based (fluid). The only mobile overflow
   is wide data tables (.table-list) — make their container scroll instead of
   pushing the page width.
   ========================================================================= */
#content .view-content,
#basket_form,
.nd-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 760px) {
  /* keep table columns readable; container scrolls horizontally */
  .table-list, table.table-list-status { min-width: 560px; }
}

/* contact page map — was fixed 1000/1300 */
#contact-maps { width: 100% !important; min-width: 0 !important; max-width: 100%; }

/* broaden table-scroll to any direct container of a data table */
#content .node-content,
#content div:has(> table.table-list),
#content div:has(> form > table.table-list) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* two-column layouts stack on mobile (were % floats -> squished sidebar) */
@media (max-width: 760px) {
  .two-columns.right-side #main-content,
  .two-columns.left-sidebar #main-content,
  .two-columns aside.region-right-sidebar,
  .two-columns aside.region-left-sidebar {
    width: 100% !important; float: none !important;
    margin-left: 0 !important; margin-right: 0 !important; margin-top: 20px;
  }
  .two-columns aside.region-right-sidebar { margin-top: 24px; }
}

/* P4 — OEM-каталог (модуль guayaquil): body{min-width:1280px} (guayaquil.css
   грузиться ПІСЛЯ neodrive.css) розтягував усю сторінку в 1288px на моб.
   Перебиваємо вищою специфічністю (html body б'є body при рівному !important). */
@media (max-width: 760px) {
  html body { min-width: 0 !important; margin: 0 !important; }
  /* Контакти: колонки регіональних представників / магазинів були
     <div style="width:24%; float:left"> інлайном -> стекаємо на всю ширину
     (!important б'є інлайновий стиль). Скоуп #contact. */
  #contact #content div[style*="float:left"],
  #contact #content div[style*="float: left"] {
    width: 100% !important; float: none !important; margin-bottom: 14px;
  }
  /* список марок (task=catalogs): .catalogs.flex — ряд із 3 колонок-сегментів;
     стискались і 3-я колонка обрізалась. Стекаємо у 1 колонку на всю ширину. */
  .catalogs.flex { flex-wrap: wrap !important; }
  .catalogs.flex .catalogs-search { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  .catalogs.flex .catalogs-search table.table { width: 100% !important; }

  /* дерево вузлів (task=qgroups): #qgTree(23%) | #qgDetails(74%) inline-block —
     дерево стискалось у ~80px і назви ламались по літері. Стекаємо на всю ширину:
     дерево зверху (читабельне), деталі/схема знизу. */
  #qgTree, #qgDetails { width: 100% !important; display: block !important; }
  #qgDetails { padding: 0 !important; }
  .qdetails { border-left: 0 !important; padding-left: 0 !important; }

  /* Каталог запчастин (/store): групи категорій були inline-block 30%
     (2-3 колонки) -> 1 колонка на всю ширину. */
  .store-categories .store_cat,
  .store-categories .store_cat:nth-child(3n+1) { width: 100% !important; margin: 0 0 24px !important; }

  /* Форми register/request/passwd — компонування полів на мобільному: */
  /* капча: поле вводу праворуч від картинки (було під нею) */
  #content .form-item-captcha { display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px; }
  #content .form-item-captcha label { float: none !important; width: auto !important; margin: 0 !important; flex: 0 0 auto; }
  #content .form-item-captcha input { width: auto !important; flex: 1 1 130px; min-width: 0; }
  /* радіо: підпис праворуч від кружечка (було під ним) */
  #content .form-type-radio.form-item-choice { display: flex !important; align-items: center; gap: 8px; }
  #content .form-type-radio.form-item-choice input.radio-css { flex: 0 0 auto; margin: 0 !important; }
  #content .form-type-radio.form-item-choice label { display: inline-block !important; width: auto !important; margin: 0 !important; }
  /* телефон: лейбл зверху; код (селект) ЛІВОРУЧ від номера в один ряд.
     Легасі: .phone_code position:absolute накладений на ліві 95px паддингу
     #phone. На моб. робимо селект статичним і прибираємо той паддинг -> flex. */
  #content .form-item-phone { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  #content .form-item-phone > label { flex: 0 0 100% !important; width: 100% !important; margin: 0 0 6px !important; text-align: left !important; }
  #content .form-item-phone .phone_code {
    position: static !important; left: auto !important;
    order: 1; flex: 0 0 auto; width: auto !important; margin: 0 6px 0 0 !important;
  }
  #content .register-form-wrapper .form-item-phone #phone,
  #content .form-item-phone #phone,
  #content .form-item-phone input {
    order: 2; flex: 1 1 0 !important; width: auto !important; min-width: 60px;
    margin: 0 !important; padding-left: 12px !important;
  }
}

/* P2 — картка товару (/cat/.../inf/...): фото (#cart-slider) та інфо-колонка
   (.left-part) були float:left 45% і тіснились. На мобільному стекаємо в одну
   колонку (фото зверху, інфо знизу), фото робимо адаптивним. */
@media (max-width: 760px) {
  .page-cat #cart-slider,
  .page-cat .left-part {
    float: none !important; width: 100% !important; margin: 0 0 20px 0 !important;
  }
  .page-cat #cart-slider { max-width: 420px; margin-left: auto !important; margin-right: auto !important; }
  #carousel, #carousel.inactive {
    width: 100% !important; max-width: 100% !important; height: auto !important;
    display: block !important;
  }
  #carousel.inactive img { max-width: 100%; height: auto; }
}

/* =========================================================================
   СТОРІНКА ТОВАРУ (/cat/.../inf/...) — під прототип NEODRIVE.
   Класи .left-part / .group-info / #cart-slider унікальні для info_art_page,
   тож скоуп безпечний. Було: 50/50 колонки, зебра-рядки, дрібна ціна + мікро-
   іконка. Стало: фото-картка, інфо-картки з бордером/радіусом, великий кегль
   ціни, кнопка «Купити» з іконкою, зелений індикатор наявності.
   ========================================================================= */
/* колонки лише на десктопі (мобільний стек — у @media max-width:760 вище) */
@media (min-width: 761px) {
  .page-cat #cart-slider { width: 44% !important; margin: 0 4% 32px 0 !important; }
  .page-cat .left-part   { width: 52% !important; margin: 0 0 32px 0 !important; }
}
/* фото-картка */
.page-cat #carousel-wrapper {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2); overflow: hidden;
}
.page-cat #carousel.inactive {
  width: 100% !important; height: auto !important; min-height: 320px;
  background: var(--bg-2) !important; box-sizing: border-box; padding: 16px;
}
.page-cat #thumbs-wrapper { padding: 12px 0 0 !important; }
.page-cat #thumbs a { border-radius: var(--r-md) !important; }

/* інфо-картки (titled cards) */
.page-cat .left-part .group-info {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 16px !important; background: #fff;
}
.page-cat .left-part .info-title {
  font-size: 15px !important; padding: 11px 16px !important;
  border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: visible;
}
.page-cat .left-part .info-title span { padding-left: 0 !important; font-weight: var(--fw-black) !important; color: var(--ink); }
.page-cat .left-part .info-line {
  display: flex !important; justify-content: space-between; align-items: center; gap: 14px;
  padding: 10px 16px !important; border-bottom: 1px solid var(--line-2);
  font-size: 13px; overflow: visible !important;
}
.page-cat .left-part .group-info .info-line:last-child { border-bottom: 0; }
.page-cat .left-part .info-line-grey,
.page-cat .left-part .info-line-white { background: #fff !important; }
.page-cat .left-part .info-line-grey:hover,
.page-cat .left-part .info-line-white:hover { background: var(--bg-2) !important; }
.page-cat .left-part .info-line span.info-line-left {
  float: none !important; width: auto !important; padding: 0 !important;
  color: var(--ink-3) !important; flex: 0 0 auto; max-width: 45%;
}
.page-cat .left-part .info-line span.info-line-right {
  float: none !important; width: auto !important; padding: 0 !important;
  text-align: right; font-weight: var(--fw-semi); color: var(--ink);
}
.page-cat .left-part .info-line span.info-line-line { float: none !important; padding: 0 !important; }
.page-cat .left-part .group-info a { text-decoration: none !important; color: var(--red); font-weight: var(--fw-semi); }
.page-cat .left-part .group-info a:hover { color: var(--red-600); }

/* «Номери оригіналів»: заголовок і рядки — в ОКРЕМИХ .group-info; зшиваємо їх
   в одну картку (заголовок згори, рядки знизу). */
.page-cat .left-part .group-info:not(:has(.info-line)) {
  border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; margin-bottom: 0 !important;
}
.page-cat .left-part .group-info:not(:has(.info-line)) .info-title { border-bottom: 0; }
.page-cat .left-part .group-info:not(:has(.info-line)) + .group-info {
  border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* --- Шапка інфо-колонки: бренд + індикатор наявності --- */
.page-cat .left-part .nd-prodhead {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.page-cat .left-part .nd-prodhead-stock {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: var(--fw-semi);
}
.page-cat .left-part .nd-prodhead-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.page-cat .left-part .nd-prodhead-stock.nd-instock { color: var(--green); }
.page-cat .left-part .nd-prodhead-stock.nd-instock::before { background: var(--green); }
.page-cat .left-part .nd-prodhead-stock.nd-onorder { color: var(--amber); }
.page-cat .left-part .nd-prodhead-stock.nd-onorder::before { background: var(--amber); }

/* --- Блок «Купити»: велика ціна ліворуч, степер + кнопка праворуч --- */
.page-cat .left-part .nd-buy-row .info-line-right {
  display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.page-cat .left-part .nd-buy-price {
  font-size: 20px; font-weight: var(--fw-black); color: var(--ink);
  font-variant-numeric: tabular-nums; margin-right: auto; white-space: nowrap;
}
/* степер кількості */
.page-cat .left-part .nd-qty {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; background: #fff; height: 40px; flex: 0 0 auto;
}
.page-cat .left-part .nd-qty-btn {
  width: 32px; height: 38px; border: 0; background: #fff; cursor: pointer; padding: 0;
  color: var(--ink-2); font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.page-cat .left-part .nd-qty-btn:hover { background: var(--bg-2); color: var(--ink); }
.page-cat .left-part .nd-qty-inp {
  width: 38px; height: 38px; border: 0 !important; text-align: center; background: #fff !important;
  font-weight: var(--fw-bold); font-size: 14px; color: var(--ink) !important; padding: 0 !important;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.page-cat .left-part .nd-qty-inp:focus { outline: none; box-shadow: none !important; }
/* add-cart -> повноцінна кнопка «Купити» (nd-ico + текст у розмітці) */
.page-cat .left-part .info-line-right a.infopage-add-cart-red {
  -webkit-mask: none !important; mask: none !important;
  background: var(--red) !important; background-image: none !important; color: #fff !important;
  width: auto !important; height: 40px !important; margin: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  padding: 0 18px; border-radius: var(--r-md); font-weight: var(--fw-semi); font-size: 13px;
  line-height: 1; white-space: nowrap; transition: background-color .15s; flex: 0 0 auto;
}
.page-cat .left-part .info-line-right a.infopage-add-cart-red:hover { background: var(--red-600) !important; }
.page-cat .left-part .info-line-right a.infopage-add-cart-red .nd-ico { width: 16px; height: 16px; vertical-align: 0; }

/* Промо/рекомендовані товари (.view-with-goods, авториз. головна): картки були
   float 25-32% з фіксованим inner 185-245px -> перекривались на мобільному.
   Робимо 1 колонку на всю ширину. */
@media (max-width: 760px) {
  .view-with-goods .row,
  #index .view-with-goods .row {
    width: 100% !important; height: auto !important; float: none !important;
  }
  .view-with-goods .row .row-inner-wrapper,
  #index .view-with-goods .row .row-inner-wrapper {
    width: 100% !important; float: none !important; display: block !important; box-sizing: border-box;
  }
}

/* Список новин (/news) на мобільному: фото-поле було 18% (63px), а картинка
   всередині фіксовано 168px -> текст (.right-side 78%) налазив на фото.
   Стекаємо: фото зверху, текст під ним. */
@media (max-width: 760px) {
  #news .views-row .views-field-field-news-image,
  #news .views-row .views-field-field-news-image .field-content {
    float: none !important; width: 100% !important; max-width: 240px !important;
    height: auto !important; margin: 0 0 12px !important;
  }
  #news .views-row .views-field-field-news-image .field-content img { width: 100% !important; height: auto !important; }
  #news .views-row .right-side { float: none !important; width: 100% !important; }

  /* Наші бренди (/partner) та Каталог автомобілів (/cat/marks): сітка float 20%
     (5 колонок), логотипи 168-190px -> налазили один на одного. 2 колонки,
     логотипи в межах клітинки. */
  #partner .top-partner .row, #partner .all-partner .row,
  #marks .top-cars .row, #marks .all-cars .row {
    width: 50% !important; min-height: 0 !important; box-sizing: border-box; padding: 8px 8px 4px;
  }
  #partner .top-partner .row a, #partner .all-partner .row a,
  #partner .top-partner .row img, #partner .all-partner .row img,
  #marks .top-cars .row a, #marks .all-cars .row a,
  #marks .top-cars .row img, #marks .all-cars .row img {
    max-width: 100% !important; width: auto !important; height: auto !important; display: inline-block;
  }

  /* Каталог брендів (/cat/brands): бренди у групі-літері були 1 колонкою
     (дуже довгий список) -> 2 колонки через CSS-columns (коректно для різної
     довжини назв). Літера — заголовок на всю ширину групи. */
  .auto-container { column-count: 2; column-gap: 16px; }
  .auto-container .letter { display: block !important; width: auto !important; column-span: all; }
  .auto-container ul.list {
    display: block !important; width: auto !important; margin: 0 !important;
    break-inside: avoid; -webkit-column-break-inside: avoid;
  }
  .auto-container ul.list li a { font-size: 13px; line-height: 1.35; }

  /* Каталог по моделі авто (/cat/marks/<model>): дерево-нав (float:left 30%) +
     картки autocat (float:right 65%) інлайном -> стек на всю ширину; картки
     .autocat_cat (45%) -> 1 колонка (як /store), синя рамка #069 -> червона. */
  #content .node-content > div[style*="float"] {
    float: none !important; width: 100% !important; margin: 0 0 16px !important;
  }
  .autocat-categories .autocat_cat,
  .autocat-categories .autocat_cat:nth-child(2n+1) { width: 100% !important; margin: 0 0 20px !important; }
  .autocat-categories .autocat_cat .autocat_img { border-top-color: var(--red) !important; }
  .autocat-categories .autocat_cat .autocat_img img { max-width: 110px !important; }
  .autocat-categories .autocat_cat .autocat_childrens { width: 60% !important; }
}

/* Велике фото в тексті новини (.imgpop, макс-ширина 680px) — вписуємо по
   ширині (max-width:100%) зі збереженням пропорцій, замість гориз. скролу. */
.imgpop,
.page-news .node-content img,
.page-news .node-content a { max-width: 100% !important; height: auto !important; }
.page-news .node-content { overflow-x: visible !important; }


/* =========================================================================
   STEP 1 — feedback revisions:
   • white page background (content full-width white, like the old site)
   • top-bar (grey #eee), primary nav (light), footer (dark) = full-viewport-
     width bars, content stays centred (full-bleed via transform, padding-safe)
   • primary nav: light with red underline on hover (was dark) — like old/proto
   • footer: 4 columns + small NEODRIVE logo
   ========================================================================= */
html, body { background: #fff !important; }

/* Full-width backgrounds without layout shift/overflow.
   Sticky bars (top-bar, nav) use a centred 100vw ::before (sticky-safe);
   the non-sticky footer uses box-shadow + clip-path. */
#footer { clip-path: inset(0 -100vw); }

/* top bar — like the OLD site: FIXED at the top, always pinned, full-width
   (fixed left:0/right:0 = full viewport width naturally), content centred. */
.top-header {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 60;
  height: 46px; overflow: visible;
  background: #eeeeee !important; border-bottom: 1px solid #e2e2e2;
}
.top-header-wrapper {
  max-width: 1320px !important; margin: 0 auto; padding: 0 20px; height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
}
/* clear the fixed top bar height */
#header { padding-top: 68px; }
/* user-nav scrolls within the bar on narrow screens (was pushing header wide) */
#block-system-user-menu,
#block-system-user-menu .block-inner,
#block-system-user-menu .block-content { min-width: 0; max-width: 100%; }

/* primary nav — light bar, full-width bg via ::before (NOT clip-path, which
   would clip the hover dropdown submenus). Static: scrolls with the page. */
#primary-menu-bar {
  position: relative;
  z-index: 50; /* keep the bar + its hover-flyouts above positioned page content
                  (e.g. .store_img cards sit at z-index:2 on /store.html) */
  background: transparent !important;
  border-radius: 0 !important; margin: 0 0 20px !important;
}
#primary-menu-bar::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: 50%; margin-left: -50vw; width: 100vw;
  background: #fff; border-bottom: 1px solid var(--line); z-index: 0;
}
/* OEM pages load guayaquil.css after us, which sets font-family:'pf_reg' on
   a/ul/li/span globally — pin our chrome (header, nav, footer) to Onest. */
#header, #header *, #primary-menu-bar, #primary-menu-bar *,
#footer, #footer * { font-family: var(--font); }
#primary-menu-bar ul.dropdown { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 20px; }
#primary-menu-bar ul.dropdown > li.menu_item > a {
  color: var(--ink) !important; background: none !important;
  padding: 13px 14px !important; font-size: 15px; font-weight: var(--fw-semi);
  border-bottom: 2px solid transparent;
}
#primary-menu-bar ul.dropdown > li.menu_item:hover > a,
#primary-menu-bar ul.dropdown > li.menu_item > a:hover {
  color: var(--red) !important; background: none !important; border-bottom-color: var(--red);
}
/* підменю-флайаут: той самий кегль 15px, що й основне меню (легасі
   styles.css ставив 18px на всі .dropdown a, включно з підменю), + :hover */
#primary-menu-bar ul.dropdown ul li a,
#primary-menu-bar ul.dropdown ul li a:hover { font-size: 15px; }

/* footer — full-width dark bg (box-shadow), centred inner, 4-col grid + logo */
#footer { box-shadow: 0 0 0 100vw var(--ink); }
#footer .region-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1.3fr; gap: 40px; align-items: start;
}
#block-footer-second, #block-footer-second .block-inner, #block-footer-second .block-content { display: contents; }
#block-footer-second .pits-social  { order: 1; }
#block-footer-second .footer-menu  { order: 2; }
#block-footer-second .pits-servises{ order: 3; }
#block-contact-box { order: 4; border: 0 !important; margin: 0 !important; padding: 0 !important; }
#block-contact-box .block-inner { display: block !important; padding: 0 !important; max-width: none; }
#block-contact-box .contact-slide { display: block !important; }
#block-contact-box .lot { display: block; margin-bottom: 16px; }
#block-footer-second .footer-menu li { width: 100% !important; display: block !important; }
/* small NEODRIVE logo above copyright */
#block-footer-second .pits-social::before {
  content: ''; display: block; width: 140px; height: 40px;
  background: url(/images/neodrive-logo.png) left center / contain no-repeat;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  #footer .region-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  #footer .region-inner { grid-template-columns: 1fr; }
}


/* ---- Guest top-bar (login form) icons -> NEODRIVE (were legacy PNGs) ---- */
.usernameinp {
  background-image: none !important; background-color: var(--ink-3);
  -webkit-mask: url(/css/icons/lock.svg) center / contain no-repeat;
  mask: url(/css/icons/lock.svg) center / contain no-repeat;
}
.to-register {
  background-image: none !important; padding-left: 0 !important;
}
.to-register::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 1.05em; height: 1.05em; margin-right: .4em;
  background-color: currentColor;
  -webkit-mask: url(/css/icons/user.svg) center / contain no-repeat;
  mask: url(/css/icons/user.svg) center / contain no-repeat;
}
#block-pt-login input[type="submit"] {
  background-image: none !important; background-color: var(--ink-2);
  -webkit-mask: url(/css/icons/chevron-r.svg) center / 20px no-repeat;
  mask: url(/css/icons/chevron-r.svg) center / 20px no-repeat;
}
.nd-ico--lock { --nd-ico: url(icons/lock.svg); }

/* =========================================================================
   Header search — unified bar like the NEODRIVE prototype:
   [ grey category select | magnifier + input | red "Пошук" button ]
   ========================================================================= */
#block-pt-search #user-search > div {
  display: flex !important; align-items: stretch;
  width: 100%; max-width: none; height: 46px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff;
}
/* left: category select (chosen) — grey segment */
#block-pt-search .search-select { display: flex; align-items: stretch; }
#block-pt-search .chosen-container {
  width: auto !important; height: 100%; margin: 0 !important;
  background: var(--bg-2); border-right: 1px solid var(--line);
  border-radius: var(--r-md) 0 0 var(--r-md);
  display: flex; align-items: center; font-size: 13px;
}
#block-pt-search .chosen-container .chosen-single {
  height: 44px; line-height: 44px; border: 0 !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important;
  padding: 0 34px 0 14px !important; color: var(--ink); white-space: nowrap;
}
/* chosen dropdown arrow -> centred NEODRIVE chevron-down (was top-aligned sprite) */
#block-pt-search .chosen-container .chosen-single div {
  position: absolute; top: 0; bottom: 0; right: 10px; height: auto; width: 16px;
  display: flex; align-items: center; justify-content: center;
}
#block-pt-search .chosen-container .chosen-single div b {
  background-image: none !important; background-color: var(--ink-3) !important;
  width: 12px !important; height: 12px !important; margin: 0 !important; top: auto !important;
  -webkit-mask: url(/css/icons/chevron-d.svg) center / contain no-repeat;
  mask: url(/css/icons/chevron-d.svg) center / contain no-repeat;
}
#block-pt-search .chosen-container .chosen-drop { border-radius: 0 0 var(--r-md) var(--r-md); }
/* middle: input (grows). Magnifier moved to the button. */
#block-pt-search .search-detail { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
#block-pt-search #user-search input[type="text"] {
  border: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important;
  height: 44px; width: 100% !important; padding: 0 14px !important; margin: 0 !important; font-size: 14px;
}
/* right: red search button with a white magnifier icon (icon-only) */
#block-pt-search .form-actions { display: flex; }
#block-pt-search #user-search input[type="submit"] {
  position: static !important; text-indent: -9999px !important; overflow: hidden;
  -webkit-mask: none !important; mask: none !important;
  background: var(--red) url(/css/icons/search-white.svg) center / 20px 20px no-repeat !important;
  color: transparent !important; border: 0 !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  width: 56px !important; height: auto !important; align-self: stretch; min-width: 56px; padding: 0 !important;
  cursor: pointer; transition: background-color .15s;
}
#block-pt-search #user-search input[type="submit"]:hover {
  background-color: var(--red-600) !important;
}

/* =========================================================================
   CONTENT POLISH — forms, radio/checkbox, prices (universal, all inner pages)
   ========================================================================= */
/* text inputs / selects / textarea -> NEODRIVE field style */
.register-form-wrapper .form-item input[type="text"],
.register-form-wrapper .form-item input[type="password"],
.register-form-wrapper .form-item input[type="email"],
.register-form-wrapper .form-item textarea,
.form-profile-wrapper #profile .field input[type="text"],
.form-profile-wrapper #profile .field input[type="password"],
#content input[type="text"],
#content input[type="password"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="number"],
#content textarea,
#content select {
  border: 1px solid var(--line) !important; border-radius: var(--r-md) !important;
  background: #fff; color: var(--ink); font-family: var(--nd-font); font-size: 14px;
  height: 42px; padding: 0 12px !important; box-sizing: border-box; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
#content textarea, .register-form-wrapper .form-item textarea {
  height: auto; min-height: 92px; padding: 10px 12px !important; line-height: 1.5;
}
#content input[type="text"]:focus, #content input[type="password"]:focus,
#content input[type="email"]:focus, #content input[type="tel"]:focus,
#content textarea:focus, #content select:focus,
.register-form-wrapper .form-item input:focus,
.register-form-wrapper .form-item textarea:focus {
  border-color: var(--line) !important; box-shadow: none !important;
}
/* radio / checkbox — red accent (was blue) */
#content input[type="radio"], #content input[type="checkbox"],
.register-form-wrapper input[type="radio"], .register-form-wrapper input[type="checkbox"],
.form-profile-wrapper input[type="radio"], .form-profile-wrapper input[type="checkbox"] {
  accent-color: var(--red); width: 17px; height: 17px; cursor: pointer;
}
/* prices — NEODRIVE red (were blue #006699) */
#content .price, .price-basket .price, .view-with-goods .price-basket .price { color: var(--red) !important; }

/* =========================================================================
   CONTENT POLISH 2 — kill legacy blue (#006699/#069), prices, arrows
   ========================================================================= */
/* product/table prices — BLACK + BOLD (were red/blue); out-of-stock muted */
#content .price, #content td.price, .price-basket .price, .view-with-goods .price-basket .price {
  color: var(--ink) !important; font-weight: var(--fw-bold) !important;
}
#content td.price.grey, #content .price.grey { color: var(--ink-4) !important; }

/* blue links/text -> NEODRIVE palette */
.partner { color: var(--ink) !important; }
#news .views-row .right-side .views-field-title,
#news .views-row .right-side .views-field-title a,
#shares .views-row .right-side .views-field-title,
#shares .views-row .right-side .views-field-title a { color: var(--ink) !important; }
#news .views-field-title a:hover, #shares .views-field-title a:hover { color: var(--red) !important; }

/* pagination -> NEODRIVE (.nd-page style) */
.text-center ul.pagination li a {
  color: var(--ink) !important; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 11px; display: inline-block; font-variant-numeric: tabular-nums; transition: all .15s;
}
.text-center ul.pagination li a:hover { color: var(--red) !important; border-color: var(--ink-4); }
.text-center ul.pagination li.active a, .text-center ul.pagination li a.active {
  background: var(--red) !important; border-color: var(--red) !important; color: #fff !important;
}

/* store-каталог (сторінка "Каталог запчастин" /store): роздільник-лінія
   над кожною секцією категорій була синя (#069) -> червоний акцент прототипу.
   Рамку прев'ю-картинки #dadada -> --line. */
.store-categories .store_cat .store_img {
  border-top: 2px solid var(--red) !important;
}
.store-categories .store_cat .store_img img {
  border-color: var(--line) !important;
  border-radius: var(--r-sm);
}

/* content-form submit "arrow-in-circle" (enter-sprite blue) -> red circle + white arrow.
   Scoped to #content so header search/login submits keep their own look. */
#content input[type="submit"] {
  background: var(--red) url(/css/icons/arrow-right-white.svg) center / 16px 16px no-repeat !important;
  border-radius: 50% !important; transition: background-color .15s;
  width: 40px !important; height: 40px !important; min-width: 0 !important;
  padding: 0 !important; margin-left: 0; text-indent: -9999px !important; overflow: hidden;
  border: 0 !important; color: transparent !important;
}
#content input[type="submit"]:hover { background-color: var(--red-600) !important; }

/* ФОРМИ — submit з ПІДПИСОМ + тематичною іконкою (як "Оформити" в кошику).
   Правило вище робило всі submit однаковими червоними колами з прихованим
   текстом. Тут повертаємо підписані red-primary кнопки для конкретних форм.
   Специфічність кожного селектора >= (1,2,1), тож б'ємо коло (1,1,1)+!important.
   На <input> ::before/mask неможливі — іконка через background-image (біла),
   підпис — це value кнопки. */
#profile input[type="submit"][name="save"],
#profile input[type="submit"][name="send"],
#register-form input[type="submit"].register,
#content input[type="submit"].search,
#content input[type="submit"].report {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: var(--r-md) !important;
  text-indent: 0 !important;
  overflow: visible !important;
  -webkit-mask: none !important;
          mask: none !important;
  background-color: var(--red) !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
  background-size: 16px 16px !important;
  border: 1px solid var(--red) !important;
  color: #fff !important;
  padding: 10px 20px 10px 42px !important;
  font: var(--fw-semi) 14px var(--font) !important;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
#profile input[type="submit"][name="save"]:hover,
#profile input[type="submit"][name="send"]:hover,
#register-form input[type="submit"].register:hover,
#content input[type="submit"].search:hover,
#content input[type="submit"].report:hover {
  background-color: var(--red-600) !important;
  border-color: var(--red-600) !important;
}
/* тематичні іконки (білі, бо тло червоне) */
#profile input[type="submit"][name="save"] { background-image: url(/css/icons/check-white.svg) !important; }    /* Профіль: Зберегти */
#profile input[type="submit"][name="send"] { background-image: url(/css/icons/send-white.svg) !important; }     /* Фідбек: Надіслати */
#register-form input[type="submit"].register { background-image: url(/css/icons/user-white.svg) !important; }   /* Реєстрація / Запит */
#register-form input[type="submit"].nd-ic-send { background-image: url(/css/icons/send-white.svg) !important; } /* Пароль: Надіслати (перебиває .register вище) */
#content input[type="submit"].search { background-image: url(/css/icons/search-white.svg) !important; }         /* OEM-каталог + пошук у замовленнях: Шукати */
#content input[type="submit"].report { background-image: url(/css/icons/file-white.svg) !important; }           /* Звіти: Показати */

/* Форма пошуку в замовленнях (/order/status): відступ від таблиці + рівняння
   поля й кнопки «Шукати» (input.search вже червона з лупою вище). */
#searchOrder { margin: 0 0 20px !important; }
#searchOrder .flex-container { display: flex !important; align-items: center; gap: 10px; }
#searchOrder .form-item, #searchOrder .form-actions { margin: 0 !important; }
#searchOrder #searchNumber {
  min-width: 260px; height: 40px; box-sizing: border-box;
  border: 1px solid var(--line) !important; border-radius: var(--r-md) !important;
  padding: 0 14px !important; font: 14px var(--font) !important; color: var(--ink) !important; background: #fff !important;
}
#searchOrder #searchNumber:focus { outline: none; border-color: var(--ink-4) !important; }

/* news/shares "Детальніше" readmore arrow (blue) -> red chevron */
#news .views-more-link, #shares .views-more-link {
  background-image: none !important; padding-left: 0 !important; color: var(--red) !important;
  display: inline-flex !important; align-items: center; gap: 6px; width: auto; height: auto;
}
#news .views-more-link::before, #shares .views-more-link::before {
  content: ''; width: 18px; height: 18px; flex: 0 0 auto; background-color: var(--red);
  -webkit-mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
  mask: url(/css/icons/chevron-r.svg) center / contain no-repeat;
}

/* product-detail image gallery prev/next -> NEODRIVE chevrons; thumb hover red */
#prev, #next {
  background-image: none !important; background-color: var(--ink-2) !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#prev { -webkit-mask-image: url(/css/icons/chevron-l.svg); mask-image: url(/css/icons/chevron-l.svg); }
#next { -webkit-mask-image: url(/css/icons/chevron-r.svg); mask-image: url(/css/icons/chevron-r.svg); }
#prev:hover, #next:hover { background-color: var(--red) !important; opacity: 1; }
#thumbs a:hover, #thumbs a.selected { border-color: var(--red) !important; }
/* colorbox zoom-popup arrows -> chevrons */
#cboxPrevious, #cboxNext {
  background-image: none !important; background-color: #fff !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px; mask-size: 20px;
}
#cboxPrevious { -webkit-mask-image: url(/css/icons/chevron-l.svg); mask-image: url(/css/icons/chevron-l.svg); }
#cboxNext { -webkit-mask-image: url(/css/icons/chevron-r.svg); mask-image: url(/css/icons/chevron-r.svg); }

/* product tables: price column header width 100px */
#content .table-list th[title="Ціна"], .table-list th[title="Ціна"] { width: 100px !important; }

/* top-bar balance / EUR-rate value — ink (was inline blue #069); debt stays red */
#balance { color: var(--ink) !important; }
#block-system-user-menu ul .ballance-link .red, #balance.red { color: var(--red) !important; }


/* #########################################################################
   FORMS & TABLES — comprehensive prototype pass (fan-out: forms + tables agents)
   ######################################################################### */

/* ============ FORMS ============ */
/* =========================================================================
   NEODRIVE — ЗОНА ФОРМИ (#content). Додається ПІСЛЯ базового форм-блоку в
   neodrive.css (рядки ~1128-1161), тому перекриває легасі порядком + !important.
   НЕ чіпає хедер (#block-pt-search / #block-pt-login / user-menu).
   ========================================================================= */

/* --- Поле (.nd-fld): 42px, бордер --line, радіус 10, шрифт Onest.
   Зміцнює базу і накриває легасі register(30px)/profile(27px)/jobs. #phone
   виключено з обнулення padding (потрібен лівий відступ під телефонний префікс). */
#content input[type="text"]:not(#phone),
#content input[type="password"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="search"],
#content input[type="url"],
#content input[type="date"],
.register-form-wrapper .form-item input[type="text"]:not(#phone),
.register-form-wrapper .form-item input[type="email"],
.register-form-wrapper .form-item input[type="password"],
.form-profile-wrapper #profile .field input[type="text"],
.form-profile-wrapper #profile .field input[type="password"],
#jobs #jobs-form .form-item input[type="text"] {
  height: 42px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 0 12px !important;
  font: 14px var(--font) !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-sizing: border-box;
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}

/* --- Телефонний композит: зберегти накладку префіксу (не ламати #phone). */
.register-form-wrapper .form-item #phone {
  height: 42px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 0 12px 0 118px !important;   /* місце під плаваючий .phone_code (ширший за селект, без накладання) */
  font: 14px var(--font) !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-sizing: border-box;
  outline: 0;
}
/* #phone: без зміни бордера на фокусі (перебиваємо спільне focus-правило). */
#content #phone:focus {
  border-color: var(--line) !important;
  box-shadow: none !important;
}
/* Плаваючий select-префікс коду країни — під висоту поля, ліві скруглення,
   сіріший фон, правий радіус прибрано (стик із полем). #content для перемоги
   над легасі, що давало 10px радіус на всіх кутах. */
#content .register-form-wrapper .form-item select.phone_code,
.register-form-wrapper .form-item select.phone_code {
  height: 42px !important;
  border: 1px solid var(--line) !important;
  border-right: 0 !important;
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
  background: var(--bg-2) !important;
  padding: 0 6px !important;
  font: 14px var(--font) !important;
  color: var(--ink) !important;
  box-sizing: border-box;
  outline: 0;
}

/* --- Textarea: авто-висота, min 92px, вертикальний resize. */
#content textarea,
.register-form-wrapper .form-item textarea,
#jobs #jobs-form .form-item textarea {
  height: auto !important;
  min-height: 92px !important;
  padding: 10px 12px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  font: 14px var(--font) !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-sizing: border-box;
  outline: 0;
}

/* --- Native <select> у #content: як .nd-fld + власна chevron-down стрілка.
   Виключаємо .phone_code (свій вигляд) та chosen-приховані select. */
#content select:not(.phone_code),
.register-form-wrapper .form-item select:not(.phone_code) {
  height: 42px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background-color: #fff !important;
  color: var(--ink) !important;
  font: 14px var(--font) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/css/icons/chevron-d.svg) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  padding: 0 38px 0 12px !important;
  box-sizing: border-box;
  outline: 0;
  cursor: pointer;
}

/* --- Focus: бордер --ink + м'який focus-ring (лише текстові поля/textarea/select). */
#content input[type="text"]:focus,
#content input[type="password"]:focus,
#content input[type="email"]:focus,
#content input[type="tel"]:focus,
#content input[type="number"]:focus,
#content input[type="search"]:focus,
#content textarea:focus,
#content select:focus,
.register-form-wrapper .form-item input:focus,
.register-form-wrapper .form-item textarea:focus,
.form-profile-wrapper #profile .field input:focus,
#jobs #jobs-form .form-item input:focus,
#jobs #jobs-form .form-item textarea:focus {
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* --- Кастомні sprite radio/checkbox -> нативні з accent-color.
   Легасі ховає input (clip:rect(0 0 0 0)) і малює sprite (radiobox.png/
   csscheckbox.png) на сусідньому label. Повертаємо нативний елемент. */
#content input.radio-css,
#content input.checkbox-css,
.register-form-wrapper input.radio-css,
.register-form-wrapper input.checkbox-css,
.form-profile-wrapper input.radio-css,
.form-profile-wrapper input.checkbox-css,
#content .form-type-radio input.radio-css,
#content .form-type-checkbox input.checkbox-css {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  width: 17px !important;          /* б'є інлайновий style="width:10px" у profile */
  height: 17px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: var(--red) !important;
  cursor: pointer;
  vertical-align: middle;
}

/* --- Знімаємо sprite-фон і зайві відступи з підписів чекбоксів/радіо
   (усі позиції: звичайні, .rightcheckbox, .rightradiobox). */
#content .form-type-radio label,
#content .form-type-checkbox label,
#content input.radio-css + label,
#content input.checkbox-css + label,
.register-form-wrapper input.radio-css + label,
.register-form-wrapper input.checkbox-css + label,
.form-profile-wrapper input.radio-css + label,
.form-profile-wrapper input.checkbox-css + label,
#content .rightcheckbox input.checkbox-css + label,
#content .rightradiobox input.radio-css + label {
  background-image: none !important;
  background-position: 0 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* --- File-інпути (форма зворотного зв'язку "Прикріпити фото", basket import):
   нативна кнопка "Вибрати файл" вибивалась зі стилю форми. Кнопку-селектор
   робимо secondary-outline як у прототипі, текст "файл не вибрано" — ink-3. */
#content input[type="file"] {
  font: 13px var(--font);
  color: var(--ink-3);
  border: 0 !important;
  padding: 0;
  max-width: 100%;
}
#content input[type="file"]::file-selector-button {
  font: var(--fw-semi) 13px var(--font);
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#content input[type="file"]::file-selector-button:hover {
  background: #fff;
  border-color: var(--ink-4);
}

/* --- Datepicker (фільтри "Звіти"/"Історія"): поле дати було 80px — рік
   (d.m.Y = "01.07.2026") обрізався. Розширюємо. Іконку-тригер календаря
   (легасі синій bitmap <img>) нейтралізуємо в сірий grayscale-фільтром. */
#content input.hasDatepicker {
  width: 98px !important;
  text-align: center;
}
/* Іконка-тригер датапікера: легасі calendar28.png -> охайна NEODRIVE-календар
   (content підміняє сам <img>, тож розмір/колір під контролем). */
#content img.ui-datepicker-trigger,
img.ui-datepicker-trigger {
  content: url(/css/icons/calendar-ink.svg);
  width: 22px; height: 22px;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 6px;
}
#content img.ui-datepicker-trigger:hover,
img.ui-datepicker-trigger:hover { opacity: .7; }

/* =========================================================================
   CHOSEN-СЕЛЕКТИ поза хедером (#profile, #basket_form) -> nd-fld:
   42px, радіус 10, сірий сегмент + chevron-d. Легасі: 28px, border #898989,
   radius 0. ХОВ: chosen-drop НЕ обрізаємо.
   ========================================================================= */
#profile .chosen-container,
#basket_form .chosen-container {
  overflow: visible !important;      /* щоб drop не обрізало */
  vertical-align: middle;
}
#profile .chosen-container-single .chosen-single,
#basket_form .chosen-container-single .chosen-single,
#profile .chosen-single,
#basket_form .chosen-single {
  height: 42px !important;
  line-height: 40px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 0 46px 0 12px !important;  /* правий відступ під сегмент-стрілку */
  background: #fff !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font: 14px/40px var(--font) !important;
}
#profile .chosen-single span,
#basket_form .chosen-single span {
  margin-right: 0 !important;
  line-height: 40px !important;
}
/* Сірий сегмент праворуч. */
#profile .chosen-single div,
#basket_form .chosen-single div {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px !important;
  height: 100% !important;
  background: var(--bg-2) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}
/* Стрілка chevron-d через mask (замість sprite <b>). */
#profile .chosen-single div b,
#basket_form .chosen-single div b {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: none !important;
  background-color: var(--ink-3) !important;
  -webkit-mask: url(/css/icons/chevron-d.svg) center / 14px 14px no-repeat;
  mask: url(/css/icons/chevron-d.svg) center / 14px 14px no-repeat;
}
/* Активний стан (open/focus) — як focus у полів. */
#profile .chosen-container-active .chosen-single,
#basket_form .chosen-container-active .chosen-single {
  border-color: var(--ink) !important;
  box-shadow: var(--focus-ring) !important;
}
/* Випадайка. */
#profile .chosen-container .chosen-drop,
#basket_form .chosen-container .chosen-drop {
  border: 1px solid var(--line) !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  box-shadow: 0 8px 24px rgba(31,37,50,.10) !important;
  margin-top: 2px;
}
#profile .chosen-container .chosen-results li.highlighted,
#basket_form .chosen-container .chosen-results li.highlighted {
  background: var(--red) !important;
  color: #fff !important;
}
/* Внутрішнє поле пошуку chosen — не роздувати базовим #content input[type=text]. */
#content .chosen-search input[type="text"],
#content .chosen-search-input {
  height: 30px !important;
  border-radius: var(--r-sm) !important;
  padding: 0 8px !important;
}

/* --- Кошик: компактніші контролі форми. Reskin давав усім 42px — у щільному
   контексті кошика вони зависокі; #BranchSelect ще й закороткий (місто
   обрізалось), поле кількості було майже квадратним. Робимо пропорційніше. */
/* chosen-селекти (склад, страхування, оплата) 42 -> 36px */
#content #basket_form .chosen-container-single .chosen-single,
#content #basket_form .chosen-single {
  height: 36px !important; line-height: 34px !important;
  font: 13px/34px var(--font) !important; padding: 0 40px 0 12px !important;
}
#content #basket_form .chosen-single span { line-height: 34px !important; }
#content #basket_form .chosen-single div { width: 32px !important; }
/* гілка складу / страхування / оплата — ширші + внутрішній .chosen-single на всю
   ширину контейнера (chosen лишав його вузьким -> текст обрізався «Луцьк ...»). */
#BranchSelect_chosen { width: 200px !important; }
#insurance_chosen, #paymethod_chosen { width: 150px !important; }
#BranchSelect_chosen .chosen-single,
#insurance_chosen .chosen-single,
#paymethod_chosen .chosen-single { width: 100% !important; box-sizing: border-box !important; }
/* поле кількості в рядку таблиці — менше й пропорційніше */
#content #basket_form input.bask-amount {
  height: 30px !important; width: 42px !important; padding: 0 4px !important;
  text-align: center; font-size: 13px !important; border-radius: var(--r-sm) !important;
}
/* текстові поля кошика (Отримувач, Мобільний тощо) 42 -> 36px */
#content #basket_form input[type="text"]:not(.bask-amount):not(.chosen-search-input),
#content #basket_form input[type="tel"] {
  height: 36px !important; font-size: 13px !important;
}

/* =========================================================================
   МОБІЛЬНА АДАПТАЦІЯ (<= 760px)
   ========================================================================= */
@media (max-width: 760px) {
  /* Двоколонковий layout (форма + бокова примітка .info-box/right) -> стек. */
  .register-form-wrapper,
  .info-box,
  #user-profile .form-profile-wrapper,
  #user-profile .info-box,
  #order-import .form-profile-wrapper,
  #order-import .info-box {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }

  /* Label над полем (стовпчик), не фіксована ширина. */
  .register-form-wrapper .form-item label,
  .form-profile-wrapper #profile .field label,
  #jobs #jobs-form .form-item label {
    display: block !important;
    width: auto !important;
    float: none !important;
    margin: 0 0 4px 0 !important;
  }
  .register-form-wrapper .form-item-captcha label {
    float: none !important;
    width: auto !important;
  }

  /* Поля/textarea/select на всю ширину. */
  .register-form-wrapper .form-item input[type="text"],
  .register-form-wrapper .form-item input[type="email"],
  .register-form-wrapper .form-item input[type="password"],
  .register-form-wrapper .form-item textarea,
  .register-form-wrapper .form-item select:not(.phone_code),
  .form-profile-wrapper #profile .field input[type="text"],
  .form-profile-wrapper #profile .field input[type="password"],
  #jobs #jobs-form .form-item input[type="text"],
  #jobs #jobs-form .form-item textarea,
  #content select:not(.phone_code) {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Chosen на всю ширину. */
  #profile .chosen-container,
  #basket_form .chosen-container,
  #profile .chosen-single,
  #basket_form .chosen-single {
    width: 100% !important;
  }

  /* Примітка-опис у .rightcheckbox — під підписом, без float. */
  #profile .rightcheckbox span,
  #content .rightcheckbox span {
    float: none !important;
    width: auto !important;
    display: block;
    margin-top: 4px;
  }
}

/* ============ TABLES ============ */
/* =========================================================================
   ZONE: TABLES — приведення всіх таблиць у #content до вигляду NEODRIVE (.nd-tbl).
   Легасі, що перебиваємо: styles.css thead tr {bg #898989} (1576), td/th padding
   5px 7px (1579), .table-list td padding 2px (2237), .table-list tr border (2272),
   hover #B0BEC3 (2273), delivery th color:#fff (2032). Скроли-обгортки й іконкові
   клітинки (masks у neodrive.css ~510-543) НЕ чіпаємо.
   ========================================================================= */

/* --- Каркас-картка: сама таблиця = картка прототипу.
   border-collapse:separate + border-spacing:0 дає «злитий» вигляд як collapse,
   але дозволяє border-radius + overflow:hidden клінити кути (на collapse радіус
   ігнорується). Обгортки лишаємо без рамки, щоб не було подвійної межі.
   Виключаємо .ui-datepicker-calendar (таблиця віджета календаря). */
#content table:not(.ui-datepicker-calendar) {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;                 /* клінить рядки під радіус картки */
  margin: 0 0 18px;
}

/* скидаємо легасі-рамки рядків (.table-list tr border 2272, tbody tr border-top 1581) —
   у режимі separate вони б домальовували зайві лінії */
#content table tr { border: 0 !important; }
#content table tbody tr { border-top: 0 !important; }

/* --- THEAD: світлий (був темно-сірий #898989 + білий текст) */
#content table thead tr {
  background: #fff !important;       /* прибираємо темний фон легасі */
  border: 0 !important;
}
#content table th,
#content table thead tr th {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3) !important;    /* б'є delivery th color:#fff (styles.css 2032) */
  font-weight: var(--fw-bold) !important;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  text-align: left;                  /* прототип: заголовки ліворуч */
  background: #fff !important;
  vertical-align: middle;
}
/* посилання в шапці: були білі (styles.css 1578) -> ink-3 */
#content table thead tr a,
#content table th a { color: var(--ink-3) !important; font-weight: var(--fw-bold) !important; }

/* --- TD: базові відступи/межі. Колір НЕ задаємо явно, щоб зберегти
   кольори рядків (tr.red/.green каскадять у td). Базовий текст і так --ink. */
#content table td {
  padding: 7px 12px;                /* компактніше (прототипні 11px були завеликі) */
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
/* колонка "Наявність" (td.amount) — легасі display:flex виводив клітинку з
   табличної колонки, тож у згрупованих рядках бейджі "їхали" вліво повз
   заголовок. Повертаємо display:table-cell — БЕЗ !important, бо jQuery
   group_search_toggle() ставить інлайновий display:none для згортання груп;
   інлайн б'є звичайне правило (а !important колись ламав це, показуючи
   колонку у згорнутих рядках). Бейджі .ambysk — inline-block, тож
   text-align:center їх центрує без flex. */
#content .table-list tbody tr td.amount {
  display: table-cell;
  vertical-align: middle !important;
  text-align: center;
  white-space: nowrap;
}
#content .table-list tbody tr td span.ambysk {
  display: inline-block; vertical-align: middle;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm);
  color: var(--ink);
}
/* іконкові клітинки лишаємо компактними, щоб не зсувати mask-іконки
   (cart/info/photo/pdf вже reskin-нуті у neodrive.css ~510-543) */
#content table td.icons,
#content table td.cart { padding: 7px 10px; }

/* кнопка розгортання груп (span.viewer-box, +/-) у першій колонці:
   легасі display:block у вузькому content-box клітинки (падінг 12px) робив
   її сплющеним вертикальним прямокутником + була синя (#069). Робимо
   квадратною і нейтральною. Скоуп лише на .viewer-box та її клітинку —
   інші td не чіпаємо, щоб густина решти таблиць не поповзла. */
#content .table-list td .viewer-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: 0;
  line-height: 18px;
  text-align: center;
  border: 1px solid var(--ink-4) !important;
  border-radius: var(--r-sm);
  color: var(--ink) !important;
  font-weight: var(--fw-bold);
  font-size: 14px;
}
#content .table-list td .viewer-box:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
}
/* стискаємо падінг САМЕ клітинки-кнопки (не всіх td) + центруємо квадрат.
   :has не підтримали — правило ігнорується, кнопка все одно квадратна. */
#content .table-list td:has(> .viewer-box) {
  padding-left: 7px;
  padding-right: 7px;
  text-align: center;
}


/* останній рядок tbody без нижньої межі */
#content table tbody tr:last-child td { border-bottom: 0; }

/* (row hover прибрано за фідбеком — був непотрібний) */

/* =========================================================================
   Кольорова логіка рядків/клітинок — зберігаємо семантику, узгоджуємо палітру
   ========================================================================= */
/* «в наявності» / ок -> зелений NEODRIVE (був color:green) */
#content .table-list tr.green,
#content .table-list tr.green td { color: var(--green) !important; }
/* «проблема» -> лишаємо червоне (був #9e0505) */
#content .table-list tr.red,
#content .table-list tr.red td { color: var(--red) !important; }
/* приглушені клітинки (був #747474) -> ink-4 */
#content .table-list td.grey,
#content .table-list tr td.grey { color: var(--ink-4) !important; }
/* синій легасі-рядок -> нейтральний ink-2 */
#content .table-list tr.blue,
#content .table-list tr.blue td { color: var(--ink-2) !important; }
/* клітинка-помилка: лишаємо червоне/рожеве, але у палітрі NEODRIVE (був #feb5b5) */
#content .table-list td.error {
  background: rgba(227,6,19,.08) !important;   /* світлий тон --red */
  color: var(--red-600) !important;
  font-weight: var(--fw-bold) !important;
}
/* жирні клітинки/ціна: лишаємо жирним ink (шрифт pf_bold більше не існує) */
#content .table-list td.bold,
#content #basket td.bold,
#content #orders_list td.bold { font-weight: var(--fw-bold) !important; color: var(--ink); }

/* =========================================================================
   ЄДИНИЙ стиль суміжних колонок у ВСІХ таблицях товарів (каталог, аналоги,
   пошук, кошик, рекомендовані, діалоги замовлень #doc_show):
   • номер запчастини -> звичайний (не жирний) + ЧЕРВОНИЙ
   • ціна / сума        -> ЖИРНА + ЧОРНА (ink)
   • наявність/кількість-> НЕ жирна (колір лишаємо)
   Скидаємо pf_bold-аліас на var(--font): інакше вага клемпиться у 800
   незалежно від font-weight. Однаковий кегль дає базове #content table 13px. */
#content .table-list td.number, #content .table-list td.number a,
#content .table-list td.article, #content .table-list td.article a,
#doc_show table td.number, #doc_show table td.number a {
  font-family: var(--font) !important;
  font-weight: var(--fw-body) !important;
  color: var(--sku) !important;
}
#content .table-list td.price, #content .table-list td#price,
#content .table-list td.summa, #content .table-list td.sumtotal,
#content .table-list td.bold, #content #basket td.bold, #content #orders_list td.bold,
#doc_show table td.price, #doc_show table td.summa, #doc_show table td.sumtotal {
  font-family: var(--font) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--ink) !important;
}
#content .table-list td.dday, #content .table-list td.amount,
#doc_show table td.amount {
  font-family: var(--font) !important;
  font-weight: var(--fw-body) !important;
}

/* зебра/підзаголовки -> тони NEODRIVE (були #F5F5F5 / #FFF / #DEDEDE) */
#content .table-list tr.grey { background: var(--bg-2) !important; }
#content .table-list tr.white { background: #fff !important; }
#content .table-list tr.title td {
  background: var(--bg-2) !important;
  color: var(--ink);
  font-weight: var(--fw-bold);
}

/* =========================================================================
   Мобільна адаптація (<=760px). Скрол-обгортки й min-width:560px вже є
   у neodrive.css (929-944, 935) — тут лише зменшуємо відступи клітинок.
   ========================================================================= */
@media (max-width: 760px) {
  #content table { font-size: 12px; }
  #content table th,
  #content table td { padding: 8px 10px; }        /* компактніше на моб. */
  #content table td.icons,
  #content table td.cart { padding: 6px 8px; }
}

/* =========================================================================
   Recommended / promo goods slider (#block-slider-goods, .block-recomended-goods)
   - price blue #006699 -> red (акційні); old-price muted
   - name (.preview) clamped to 2 lines so a long title never pushes the price
     out of the fixed 286px bx-viewport (overflow:hidden was hiding .prices)
   ========================================================================= */
#block-slider-goods .prices, #block-slider-goods .prices .price,
.block-recomended-goods .prices, .block-recomended-goods .prices .price,
#store-right-sidebar .prices, #store-right-sidebar .prices .price {
  color: var(--red) !important; font-weight: var(--fw-bold);
}
#block-slider-goods .old-price,
.block-recomended-goods .old-price,
#store-right-sidebar .old-price {
  color: var(--ink-4) !important; text-decoration: line-through; font-weight: 500 !important;
}
#block-slider-goods .preview,
.block-recomended-goods .preview,
#store-right-sidebar .preview {
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 2.8em;
}
/* Виняток: у блоці «Поступлення на склад» .preview містить <ul> зі списком
   дат — 2-рядковий clamp (для опису товару) обрізав його «...». Знімаємо. */
#block-slider-goods .preview:has(ul),
.block-recomended-goods .preview:has(ul),
#store-right-sidebar .preview:has(ul) {
  display: block; -webkit-line-clamp: none; overflow: visible;
  text-overflow: clip; min-height: 0;
}

/* --- Store-категорія: правий сайдбар фільтрів (store_filterbar) --- */
/* 1) довгі назви опцій переносимо БЕЗ накладання: li -> flex, чекбокс зверху,
   лейбл-текст тече в кілька рядків з нормальним line-height. */
#store-right-sidebar .filters .filters-s ul { margin: 0; padding: 0; list-style: none; }
#store-right-sidebar .filters .filters-s li.form-type-checkbox {
  display: block; margin: 0 0 6px 0;
}
/* Легасі малює чекбокс спрайтом csscheckbox.png на ФОНІ лейбла, тож його
   висота залежить від висоти тексту — при переносі назви в 2 рядки спрайт
   «пливе». Прибираємо спрайт і малюємо власний чекбокс ФІКСОВАНОГО розміру
   через ::before (не залежить від висоти лейбла). Нативний input ховаємо,
   але лишаємо клікабельним через label[for]. */
#store-right-sidebar .filters .filters-s input.checkbox-css {
  position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
  margin: 0 !important; pointer-events: none;
}
#store-right-sidebar .filters .filters-s .filters-s-l {
  position: relative; display: inline-block !important;
  background-image: none !important; height: auto !important; min-height: 0 !important;
  padding-left: 24px !important; line-height: 1.4 !important; vertical-align: top;
  color: var(--ink) !important; word-break: break-word; font-size: 13px !important; cursor: pointer;
}
#store-right-sidebar .filters .filters-s .filters-s-l::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 16px; height: 16px; box-sizing: border-box; background: #fff;
  border: 1.5px solid var(--ink-4); border-radius: 4px; transition: background .12s, border-color .12s;
}
#store-right-sidebar .filters .filters-s input.checkbox-css:checked + .filters-s-l::before {
  background: var(--red); border-color: var(--red);
}
#store-right-sidebar .filters .filters-s input.checkbox-css:checked + .filters-s-l::after {
  content: ''; position: absolute; left: 5px; top: 3px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#store-right-sidebar .filters .filters-s .filters-s-l a { color: inherit !important; text-decoration: none; }
#store-right-sidebar .filters .filters-s .filters-s-l a:hover { color: var(--red) !important; }
/* 2) відступи між блоками фільтрів (після скрол-блоку сусідній блок липнув). */
#store-right-sidebar .block-inner.filters { margin: 0 0 22px 0; }
#store-right-sidebar .block-inner.filters:last-child { margin-bottom: 0; }
#store-right-sidebar .filters .block-title { margin-bottom: 8px; }
#store-right-sidebar .filters .filters-scroll { max-height: 250px; overflow-y: auto; padding-right: 4px; }

/* Правий сайдбар товару: .block-recomended-goods.clearfix мали плаваючий вміст,
   що не очищався -> висота блоку схлопувалась (23/47px), вміст вивалювався і
   перекривав сусідні блоки («обрізало»). Контейнимо флоати через flow-root. */
aside.region-right-sidebar .block-recomended-goods,
.block-recomended-goods.block.clearfix { display: flow-root; margin-bottom: 20px; }

/* bxSlider-пейджер (крапки під слайдером рекомендованих, aside.region-right-
   sidebar): активна/hover була синьою (#069) -> червоний акцент NEODRIVE;
   неактивна #B5B5B5 -> ink-4. */
.bx-wrapper .bx-pager.bx-default-pager a { background: var(--ink-4) !important; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active { background: var(--red) !important; }

/* Профіль: fieldset[name=legal-options] мав dashed-синій бордер + жовте тло
   (styles.css 2928) — не в тему. Прибираємо. */
#user-profile fieldset[name='legal-options'] {
  border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 0 10px !important;
}

/* /cat/marks — "Показати все" (#showall): синій текст + enter-car.png -> червоний + chevron-d */
#marks .top-cars .clear #showall .ico-but {
  color: var(--red) !important; font-weight: var(--fw-semi);
  background-image: none !important; padding-left: 0 !important;
  display: inline-flex; align-items: center; gap: 6px;
}
#marks .top-cars .clear #showall .ico-but::before {
  content: ''; width: 18px; height: 18px; flex: 0 0 auto; background-color: var(--red);
  -webkit-mask: url(/css/icons/chevron-d.svg) center / contain no-repeat;
  mask: url(/css/icons/chevron-d.svg) center / contain no-repeat;
}

/* category tree (ul#red / treeview) — hover color -> NEODRIVE red (was blue) */
ul#red a, #red a { color: var(--ink) !important; }
ul#red a:hover, ul#red a:focus, #red a:hover, #red a:focus,
ul#red .hover > a, ul#red li.hover > a { color: var(--red) !important; }
ul#red li.selected > a, ul#red a.selected { color: var(--red) !important; font-weight: var(--fw-semi); }

/* treeview hover class (.treeview .hover was #069 blue) -> NEODRIVE red */
.treeview .hover, .treeview .hover a, ul#red .hover, ul#red .hover a { color: var(--red) !important; }

/* =========================================================================
   jQuery UI dialogs (ui-dialog / ui-widget / ui-corner-all ...) -> NEODRIVE
   (напр. попап додавання в кошик). Датапікер (ui-state-default дні) НЕ чіпаємо.
   ========================================================================= */
/* jquery-ui.css sets font-family:'pf_reg' on every .ui-widget (та його
   input/select/button). Цей шрифт існує лише на OEM сторінках (guayaquil) —
   деінде він падає у fallback. Пінимо всі jQuery UI віджети (діалоги,
   датапікер, автокомпліт…) до Onest. */
.ui-widget, .ui-widget-header, .ui-priority-primary, .ui-priority-secondary,
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: var(--font) !important;
}
/* --- Інфо/помилка-блоки (jQuery UI ui-state-highlight/error). Дефолтні
   жовтий/червоний віджети не пасують дизайну — перефарбовуємо під NEODRIVE
   і міняємо спрайтову .ui-icon на масковану гліфу (info/alert). Патерн —
   div з ОБОМА класами .ui-widget.ui-state-*, тож датапікер (.ui-state-highlight
   на комірці) не зачіпається. Ті ж блоки є й на інших сторінках (кошик —
   #message_balance = ui-state-error). */
#content .ui-widget.ui-state-highlight,
#content .ui-widget.ui-state-error {
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
  font-size: var(--fs-base); line-height: 1.5;
  overflow: hidden;                 /* очищаємо плаваючу іконку */
}
#content .ui-widget.ui-state-highlight {
  background: var(--blue-50) !important;
  border: 1px solid #C6DBFB !important;
}
#content .ui-widget.ui-state-error {
  background: var(--red-50) !important;
  border: 1px solid var(--red-100) !important;
}
#content .ui-widget.ui-state-highlight a { color: var(--blue) !important; }
#content .ui-widget.ui-state-error a { color: var(--red-700) !important; }
/* внутрішні таблиці/комірки — прозорі, без бордерів (щоб не сперечались із фоном) */
#content .ui-widget.ui-state-highlight table,
#content .ui-widget.ui-state-error table,
#content .ui-widget.ui-state-highlight th, #content .ui-widget.ui-state-highlight td,
#content .ui-widget.ui-state-error th, #content .ui-widget.ui-state-error td {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
/* спрайтова .ui-icon -> маскована NEODRIVE-гліфа */
#content .ui-widget.ui-state-highlight .ui-icon,
#content .ui-widget.ui-state-error .ui-icon {
  background-image: none !important;
  width: 20px !important; height: 20px !important;
  text-indent: 0 !important; margin: 1px .5em 0 0 !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#content .ui-widget.ui-state-highlight .ui-icon {
  background-color: var(--blue) !important;
  -webkit-mask-image: url(/css/icons/info.svg); mask-image: url(/css/icons/info.svg);
}
#content .ui-widget.ui-state-error .ui-icon {
  background-color: var(--red) !important;
  -webkit-mask-image: url(/css/icons/alert.svg); mask-image: url(/css/icons/alert.svg);
}

/* =========================================================================
   Решта jQuery UI віджетів під NEODRIVE: датапікер, акордеон, autocomplete/
   меню, тултіп. Дефолтна тема (сірі градієнти, помаранчевий/синій) не пасує.
   ========================================================================= */

/* --- Датапікер (#date_from/#date_to у звітах, сайдбар блогу) --- */
.ui-datepicker {
  background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important; box-shadow: var(--sh-3) !important;
  padding: 8px !important;
}
.ui-datepicker .ui-datepicker-header {
  background: #fff !important; border: 0 !important; color: var(--ink) !important;
  padding: 2px 0 6px !important; position: relative;
}
.ui-datepicker .ui-datepicker-title { color: var(--ink) !important; font-weight: var(--fw-bold) !important; line-height: 1.9; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  top: 4px !important; width: 26px !important; height: 26px !important; cursor: pointer;
  border-radius: var(--r-sm) !important; background: var(--bg-2) !important; border: 0 !important;
}
.ui-datepicker .ui-datepicker-prev { left: 4px !important; }
.ui-datepicker .ui-datepicker-next { right: 4px !important; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { background: var(--bg-3) !important; top: 4px !important; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  background-image: none !important; background-color: var(--ink) !important;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.ui-datepicker .ui-datepicker-prev span { -webkit-mask-image: url(/css/icons/chevron-l.svg); mask-image: url(/css/icons/chevron-l.svg); }
.ui-datepicker .ui-datepicker-next span { -webkit-mask-image: url(/css/icons/chevron-r.svg); mask-image: url(/css/icons/chevron-r.svg); }
.ui-datepicker table { margin: 0 !important; }
.ui-datepicker thead, .ui-datepicker tr { background: transparent !important; }
.ui-datepicker th { background: transparent !important; color: var(--ink-3) !important; font-weight: var(--fw-semi) !important; padding: 6px 0 !important; }
.ui-datepicker td { padding: 1px !important; }
.ui-datepicker td span, .ui-datepicker td a {
  text-align: center !important; padding: 6px !important; border: 0 !important;
  background: transparent !important; color: var(--ink) !important;
  border-radius: var(--r-sm) !important; font-weight: var(--fw-body);
}
.ui-datepicker td a.ui-state-hover { background: var(--bg-2) !important; }
.ui-datepicker td a.ui-state-highlight { background: var(--red-50) !important; color: var(--red) !important; font-weight: var(--fw-bold); } /* сьогодні */
.ui-datepicker td a.ui-state-active { background: var(--red) !important; color: #fff !important; }        /* обране */
.ui-datepicker .ui-datepicker-buttonpane { border-top: 1px solid var(--line) !important; margin: 6px -2px 0; padding-top: 6px; }
.ui-datepicker .ui-datepicker-buttonpane button {
  background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important; padding: 5px 10px !important; font-weight: var(--fw-semi); cursor: pointer;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { color: var(--red) !important; border-color: var(--red-100) !important; }
.ui-datepicker .ui-datepicker-buttonpane button:hover { background: var(--bg-2) !important; }

/* --- Акордеон (#accordion у кошику) --- */
.ui-accordion .ui-accordion-header {
  background: var(--bg-2) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important; color: var(--ink) !important;
  font-weight: var(--fw-bold) !important; margin: 6px 0 0 !important;
  padding: 12px 14px 12px 38px !important; position: relative; outline: none;
}
.ui-accordion .ui-accordion-header.ui-state-active {
  background: var(--red-50) !important; color: var(--red) !important; border-color: var(--red-100) !important;
  border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
.ui-accordion .ui-accordion-header .ui-icon {
  background-image: none !important; background-color: currentColor !important;
  left: 12px !important; width: 16px; height: 16px; margin-top: -8px;
  -webkit-mask: url(/css/icons/chevron-d.svg) center / contain no-repeat; mask: url(/css/icons/chevron-d.svg) center / contain no-repeat;
  transition: transform .15s;
}
.ui-accordion .ui-accordion-header.ui-state-active .ui-icon { transform: rotate(180deg); }
.ui-accordion .ui-accordion-content {
  border: 1px solid var(--line) !important; border-top: 0 !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important; color: var(--ink) !important; padding: 12px 14px !important;
}

/* --- Autocomplete / меню (#cities у формі доставки) --- */
.ui-menu, .ui-autocomplete {
  background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important; box-shadow: var(--sh-3) !important;
  padding: 6px !important; z-index: 10001 !important;
}
.ui-menu .ui-menu-item { margin: 0 !important; }
.ui-menu .ui-menu-item-wrapper, .ui-menu .ui-menu-item > a {
  border: 0 !important; border-radius: var(--r-sm) !important;
  padding: 8px 10px !important; color: var(--ink) !important; font-weight: var(--fw-body);
}
.ui-menu .ui-menu-item-wrapper.ui-state-active, .ui-menu .ui-menu-item-wrapper.ui-state-focus,
.ui-menu .ui-menu-item > a.ui-state-focus, .ui-menu .ui-menu-item > a.ui-state-active {
  background: var(--red-50) !important; color: var(--red) !important; border: 0 !important; margin: 0 !important;
}

/* --- Тултіп --- */
.ui-tooltip {
  background: var(--ink) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--r-sm) !important; box-shadow: var(--sh-2) !important;
  padding: 7px 10px !important; font-size: 12px !important; max-width: 260px !important;
  font-family: var(--font) !important;
}

.ui-widget-overlay { background: rgba(15,18,28,.5) !important; opacity: 1 !important; }
.ui-dialog.ui-widget-content, .ui-dialog {
  background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--sh-3) !important;
  padding: 0 !important; overflow: hidden !important;
  font-family: var(--nd-font) !important; color: var(--ink) !important;
  max-width: 95vw !important; box-sizing: border-box;   /* jQuery UI ставить width:600/700 інлайн — не даємо вилазити за екран */
}
/* на мобільному центруємо (інлайновий left рахувався під 600px і зʼїжджав) */
@media (max-width: 760px) {
  .ui-dialog { left: 2.5vw !important; right: auto !important; max-height: 92vh; }
  .ui-dialog .ui-dialog-content { max-height: 68vh; overflow: auto !important; }
  /* легасі layout-таблиця в діалозі доставки (#order_header.table-list з фікс.
     td) ширша за діалог -> стекаємо у вертикаль: підпис / поле / кнопка. */
  .ui-dialog .ui-dialog-content table.table-list,
  .ui-dialog .ui-dialog-content table.table-list tbody,
  .ui-dialog .ui-dialog-content table.table-list tr,
  .ui-dialog .ui-dialog-content table.table-list td { display: block !important; width: auto !important; }
  .ui-dialog .ui-dialog-content table.table-list td {
    padding: 3px 0 !important; border: 0 !important; text-align: left !important; width: auto !important;
  }
  .ui-dialog .ui-dialog-content table.table-list select,
  .ui-dialog .ui-dialog-content table.table-list input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important; max-width: 100%; box-sizing: border-box;
  }
  /* Діалог документа (#doc_show) — це СПРАВЖНЯ таблиця даних (замовлення/звіт),
     а не delivery-форма; правило-стек вище зайве. Лишаємо табличний вигляд;
     широку таблицю (7 колонок) скролимо горизонтально в межах діалогу. */
  #doc_show table { display: table !important; width: auto !important; }
  #doc_show thead { display: table-header-group !important; }
  #doc_show tbody { display: table-row-group !important; }
  #doc_show tr { display: table-row !important; }
  #doc_show th, #doc_show td { display: table-cell !important; width: auto !important; padding: 6px 8px !important; font-size: 12px !important; white-space: nowrap; }
  /* діалог тримаємо в межах екрана, скрол — на контенті */
  .ui-dialog:has(#doc_show) { max-width: 95vw !important; width: 95vw !important; }
  .ui-dialog .ui-dialog-content:has(#doc_show), #doc_show { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  #doc_show > div[style*="overflow"] { overflow: visible !important; max-height: none !important; }  /* внутрішній скрол не заважає */
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar.ui-widget-header {
  background: var(--ink) !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; color: #fff !important;
  padding: 12px 16px !important;
}
.ui-dialog .ui-dialog-title { color: #fff !important; font-weight: var(--fw-bold) !important; font-size: 15px; }
/* close button -> NEODRIVE x */
.ui-dialog .ui-dialog-titlebar-close {
  background: rgba(255,255,255,.14) !important; border: 0 !important; border-radius: var(--r-sm) !important;
  width: 26px !important; height: 26px !important; margin: -13px 0 0 0 !important; padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(255,255,255,.28) !important; }
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-primary {
  background-image: none !important; background-color: #fff !important;
  width: 14px !important; height: 14px !important; margin: -7px 0 0 -7px !important;
  -webkit-mask: url(/css/icons/x.svg) center / contain no-repeat;
  mask: url(/css/icons/x.svg) center / contain no-repeat; text-indent: 0 !important;
}
.ui-dialog .ui-dialog-content {
  background: #fff !important; color: var(--ink) !important; padding: 18px 18px !important; font-size: 14px;
}
.ui-dialog .ui-dialog-buttonpane {
  background: var(--bg-2) !important; border-top: 1px solid var(--line) !important;
  margin: 0 !important; padding: 12px 16px !important; border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-buttonpane .ui-button {
  background: var(--red) !important; background-image: none !important; color: #fff !important;
  border: 0 !important; border-radius: var(--r-md) !important;
  padding: 9px 18px !important; margin: 0 0 0 8px !important;
  font: var(--fw-semi) 14px var(--font) !important; cursor: pointer; text-shadow: none !important;
  transition: background-color .15s;
}
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:hover { background: var(--red-600) !important; }
/* лише явно-вторинні кнопки -> outline (одинока Ok/Так лишається червоною) */
.ui-dialog .ui-dialog-buttonpane button.nd-btn-secondary {
  background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
}
.ui-dialog .ui-dialog-buttonpane button.nd-btn-secondary:hover { background: var(--bg-2) !important; }
/* дефолтні ui-state fills у діалозі — прибрати градієнти */
.ui-dialog .ui-widget-content, .ui-dialog .ui-state-default { background-image: none !important; }

/* --- ФОРМА ВСЕРЕДИНІ ДІАЛОГУ (#add2cart "Додати в кошик",
   #delivery_selector "Виберіть спосіб доставки"). Діалоги виносяться в кінець
   <body>, тож наші #content-скоуплені правила полів їх не досягають — тут
   дублюємо базове поле/селект/кнопку під NEODRIVE. */
.ui-dialog .ui-dialog-content input[type="text"],
.ui-dialog .ui-dialog-content input[type="number"],
.ui-dialog .ui-dialog-content input[type="password"],
.ui-dialog .ui-dialog-content input[type="email"],
.ui-dialog .ui-dialog-content input[type="tel"],
.ui-dialog .ui-dialog-content select,
.ui-dialog .ui-dialog-content textarea {
  height: 38px; box-sizing: border-box;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: #fff !important; color: var(--ink) !important;
  font: 14px var(--font) !important;
  padding: 0 12px !important; outline: none; vertical-align: middle;
}
.ui-dialog .ui-dialog-content textarea { height: auto; padding: 10px 12px !important; }
.ui-dialog .ui-dialog-content input[type="text"]:focus,
.ui-dialog .ui-dialog-content select:focus,
.ui-dialog .ui-dialog-content textarea:focus {
  border-color: var(--ink) !important; box-shadow: var(--focus-ring) !important;
}
/* компактне поле кількості ("Додати в кошик") + дата у діалозі доставки */
.ui-dialog .ui-dialog-content input.new-cart-text { width: 56px; text-align: center; padding: 0 6px !important; }
.ui-dialog .ui-dialog-content .hasDatepicker { width: 130px !important; text-align: center; padding: 0 8px !important; }

/* кнопки в ТІЛІ діалогу -> red-primary з підписом (add2cart "Додати",
   delivery "Підтвердити спосіб доставки"). Buttonpane-кнопки стилізовані вище. */
.ui-dialog .ui-dialog-content input[type="submit"],
.ui-dialog .ui-dialog-content button,
.ui-dialog .ui-dialog-content .ui-button {
  width: auto !important; height: auto !important; min-width: 0 !important;
  background: var(--red) !important; background-image: none !important;
  color: #fff !important; border: 1px solid var(--red) !important;
  border-radius: var(--r-md) !important; text-indent: 0 !important; overflow: visible !important;
  padding: 9px 18px !important; margin: 0 !important;
  font: var(--fw-semi) 14px var(--font) !important; cursor: pointer;
  text-shadow: none !important; box-shadow: none !important;
  transition: background-color .15s, border-color .15s;
}
.ui-dialog .ui-dialog-content input[type="submit"]:hover,
.ui-dialog .ui-dialog-content button:hover,
.ui-dialog .ui-dialog-content .ui-button:hover {
  background-color: var(--red-600) !important; border-color: var(--red-600) !important; /* НЕ background-shorthand — інакше стирається іконка */
}
.ui-dialog .ui-dialog-content .ui-button-text { color: #fff !important; }
/* "Додати" (add2cart) — cart-іконка зліва */
.ui-dialog .ui-dialog-content input.new-cart-button {
  background-image: url(/css/icons/cart-white.svg) !important;
  background-repeat: no-repeat !important; background-position: 14px center !important;
  background-size: 16px 16px !important; padding-left: 40px !important;
}

/* --- Рядок форми "Додати в кошик" (#add2cart): кількість ліворуч, вибір
   складу по центру, кнопка праворуч; усі елементи однакової висоти (40px). */
.ui-dialog .ui-dialog-content .nd-cart-row {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.ui-dialog .ui-dialog-content .nd-cart-qty {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; white-space: nowrap;
}
.ui-dialog .ui-dialog-content .nd-cart-branch {
  margin: 0 auto;                     /* авто-поля центрують блок складу між кількістю і кнопкою */
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; white-space: nowrap;
}
.ui-dialog .ui-dialog-content .nd-cart-branch label { margin: 0; }
.ui-dialog .ui-dialog-content input.new-cart-text {
  width: 66px !important; height: 40px !important; text-align: center; padding: 0 8px !important;
}
.ui-dialog .ui-dialog-content #BranchList { height: 40px !important; min-width: 170px; }
.ui-dialog .ui-dialog-content input.new-cart-button { height: 40px !important; margin: 0 !important; flex: 0 0 auto; }
/* таблиця-розкладка в діалозі доставки -> нейтральні межі */
.ui-dialog .ui-dialog-content table.table-list,
.ui-dialog .ui-dialog-content table.table-list td,
.ui-dialog .ui-dialog-content table.table-list th { border-color: var(--line) !important; }

/* --- Таблиця в діалозі перегляду документа (#doc_show: статус-замовлення
   = table-list-status, звіти = table-list; діалог виноситься поза #content,
   тож загальні table-правила його не досягають). Приводимо до NEODRIVE. --- */
#doc_show table {
  width: 100%; border-collapse: separate !important; border-spacing: 0 !important;
  font-size: 13px !important; background: #fff !important; margin: 0 !important; border: 0 !important;
}
#doc_show table th, #doc_show table td {
  padding: 8px 12px !important; border: 0 !important;
  border-bottom: 1px solid var(--line) !important; vertical-align: middle !important;
}
#doc_show table thead tr, #doc_show table thead th { background: var(--bg-2) !important; }
#doc_show table thead th {
  font-size: 11px !important; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3) !important; font-weight: var(--fw-bold) !important; text-align: left; white-space: nowrap;
}
#doc_show table thead th a { color: var(--ink-3) !important; text-decoration: none !important; font-weight: var(--fw-bold) !important; }
#doc_show table td { color: var(--ink) !important; background: transparent !important; }
#doc_show table td.right, #doc_show table th.right { text-align: right !important; }
#doc_show table td a { color: var(--red) !important; text-decoration: none !important; font-weight: var(--fw-semi); }
/* групові смуги «Позиції …» / «Доставка …» (легасі inline bg #eaeaea/#DEDEDE) */
#doc_show table tr.title td {
  background: var(--bg-2) !important; color: var(--ink) !important;
  font-weight: var(--fw-semi) !important; font-size: 12px !important;
}
#doc_show table tr.title td b { font-weight: var(--fw-bold); }
#doc_show table tr.title td i { font-style: normal; color: var(--ink-2); }
/* м'які статус-тінти рядків замість насичених bootstrap-кольорів */
#doc_show table tr.table-success td { background: var(--green-50) !important; }
#doc_show table tr.table-warning td { background: var(--amber-50) !important; }
#doc_show table tr.table-primary td, #doc_show table tr.table-info td { background: var(--blue-50) !important; }
#doc_show table tr.table-danger td  { background: var(--red-50) !important; }
/* підсумок «Разом» */
#doc_show table td.sumtotal, #doc_show table td.sumtotal b { font-weight: var(--fw-black) !important; color: var(--ink) !important; }

/* --- Друкована форма замовлення (order/history_show|status_show/.../yes.html):
   окрема сторінка (base+styles+neodrive), таблиця у .container поза #content і
   #doc_show, тож загальні правила її не досягають. Шрифт бере neodrive body
   (Onest); тут доводимо таблицю до нашого вигляду. */
body.nd-print { padding: 28px 24px; background: #fff !important; }
body.nd-print .container { max-width: 900px; margin: 0 auto; }
body.nd-print h1 { font-family: var(--font); font-size: 20px; font-weight: var(--fw-black); color: var(--ink); margin: 0 0 18px; padding: 0; letter-spacing: -.01em; }
/* Bare table-селектор — покриває і table-list (звіти), і table-list-status
   (статус замовлення, 3 окремі таблиці: шапка/тіло/підсумок). Без бордер-
   картки на кожній таблиці (інакше 3 картки) — чисті рядки, як у #doc_show. */
body.nd-print table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
  background: #fff; margin: 0; border: 0;
}
body.nd-print table th, body.nd-print table td {
  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left;
}
body.nd-print table thead th {
  background: var(--bg-2) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3) !important; font-weight: var(--fw-bold); white-space: nowrap;
}
body.nd-print table thead th a { color: var(--ink-3) !important; text-decoration: none; font-weight: var(--fw-bold); }
body.nd-print table td { color: var(--ink) !important; background: transparent; }
body.nd-print table td.number, body.nd-print table td.number a {
  color: var(--sku) !important; font-weight: var(--fw-body); text-decoration: none;
}
body.nd-print table td.right, body.nd-print table th.right { text-align: right; }
body.nd-print table td.right, body.nd-print table td.price,
body.nd-print table td.summa, body.nd-print table td.sumtotal { font-weight: var(--fw-bold); color: var(--ink) !important; }
/* групові смуги «Позиції…» / «Доставка…» */
body.nd-print table tr.title td {
  background: var(--bg-2) !important; color: var(--ink) !important;
  font-weight: var(--fw-semi); font-size: 12px; text-transform: none;
}
body.nd-print table tr.title td b { font-weight: var(--fw-bold); }
body.nd-print table tr.title td i { font-style: normal; color: var(--ink-2) !important; }
/* м'які статус-тінти рядків замість насичених bootstrap-кольорів */
body.nd-print table tr.table-success td { background: var(--green-50) !important; }
body.nd-print table tr.table-warning td { background: var(--amber-50) !important; }
body.nd-print table tr.table-primary td, body.nd-print table tr.table-info td { background: var(--blue-50) !important; }
body.nd-print table tr.table-danger td  { background: var(--red-50) !important; }
body.nd-print table tr.grey td, body.nd-print table tr.white td { background: transparent !important; }
/* На мобільному (тепер є viewport-мета) широка 7-колонкова таблиця не влазить —
   скролимо її горизонтально в межах .container, а не всю сторінку. */
@media (max-width: 760px) {
  body.nd-print { padding: 14px 12px; }
  body.nd-print .container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.nd-print table { min-width: 560px; }
  body.nd-print h1 { font-size: 17px; }
}

/* =========================================================================
   BUTTONS — узгодження під прототип NEODRIVE (крім уже стилізованих:
   пошук, content-submit-кола, діалоги)
   ========================================================================= */
/* "Купити" (.button-css-red) — старий #ed0911 + еліптичний радіус -> NEODRIVE */
.button-css-red,
.to-buy-link .button-css-red,
.page-cat .left-part .price-basket .to-buy-link .button-css-red,
.view-with-goods .price-basket .to-buy-link .button-css-red {
  background-color: var(--red) !important;
  background-image: url(/css/icons/cart-white.svg) !important;
  background-size: 18px 18px !important;
  border-radius: var(--r-md) !important;
  border: 0 !important;
  font: var(--fw-semi) 14px var(--font) !important;
  transition: background-color .15s !important;
}
.button-css-red:hover,
.to-buy-link .button-css-red:hover {
  opacity: 1 !important; background-color: var(--red-600) !important;
}
/* сірі/вторинні button-css варіанти -> outline */
.button-css-grey, .button-css-gray {
  background-color: #fff !important; background-image: none !important;
  color: var(--ink) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important; font: var(--fw-semi) 14px var(--font) !important;
}
/* profile "вибрати" (.ui-button-text) — синій #006699 -> ink */
#profile #delivery_show .ui-button-text,
#profile .ui-button-text { color: var(--ink) !important; }

/* jQuery UI <button> у контенті (profile "Вибрати", кошик "Обрати спосіб
   доставки") рендерились із сірою ui-theme-градієнт-текстурою + сірою рамкою.
   Робимо secondary-outline прототипу. Скоуп #content -> діалогові кнопки
   (у body поза #content) лишаються червоними, submit-стрілки не зачеплені. */
#content button.ui-button,
#content a.ui-button {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
  font: var(--fw-semi) 13px var(--font) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: border-color .15s, background .15s;
}
#content button.ui-button:hover,
#content a.ui-button:hover {
  background: var(--bg-2) !important;
  border-color: var(--ink-4) !important;
}
#content button.ui-button .ui-button-text { color: var(--ink) !important; }

/* Іконка-піни "обрати адресу/відділення" (legacy синій images/ico-point.png)
   -> червоний map.svg через mask. Дедиковані icon-спани (17x22):
   кошик (.my-ui-point-icon), profile #delivery_show .ui-icon.
   #btn_seldeliv НЕ чіпаємо — там пін це фон усієї кнопки, не окремий спан. */
#content .my-ui-point-icon,
#content #delivery_show .ui-icon,
#profile #delivery_show .ui-icon {
  background-image: none !important;
  background-color: var(--red) !important;
  -webkit-mask: url(/css/icons/map.svg) center / contain no-repeat;
          mask: url(/css/icons/map.svg) center / contain no-repeat;
}
/* content input[type=button] -> NEODRIVE red (тільки явні input-кнопки, не <button>
   щоб не зачепити JS-керовані кнопки). ВИКЛЮЧАЄМО .btn — це кнопки самодостатнього
   OEM-каталогу (guayaquil.css: .btn.search, .btn.reset-button у #qgTree тощо),
   які мають власний стиль/розмір/іконки; наше червоне правило їх ламало (кнопки
   пошуку/ресету "з'їжджали" й губили іконки). */
#content input[type="button"]:not(.nd-btn-secondary):not(.btn) {
  background: var(--red) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--r-md) !important; padding: 9px 18px !important;
  font: var(--fw-semi) 14px var(--font) !important; cursor: pointer; transition: background-color .15s;
}
#content input[type="button"]:not(.nd-btn-secondary):not(.btn):hover { background: var(--red-600) !important; }

/* OEM #qgTree — кнопка-лупа фільтра дерева: рідний стиль синій (#006fa4) і
   26px (нижча за наше 42px поле). Робимо червоною під висоту поля. Розкладку
   не чіпаємо (кнопка .btn виключена з generic-правила вище). Ресет-"x" native. */
#qgTree .btn.search {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  height: 42px !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}
#qgTree .btn.search:hover { background-color: var(--red-600) !important; }