/* ==========================================================================
   Автостэлс29 — тема редизайна 2026 «Технологичный»
   Накладывается ПОВЕРХ Bootstrap 3 + Font Awesome 4.
   Подключать после bootstrap.css. Палитра и типографика — в :root ниже.
   ========================================================================== */

:root{
  /* бренд / акцент */
  --brand:        #1b6ec2;   /* основной синий */
  --brand-dark:   #145aa4;   /* синий: наведение / активное */
  --brand-navy:   #0e1f38;   /* тёмная строка, глубокий фон */
  --brand-050:    #eaf2fb;   /* подложка */
  --brand-100:    #d4e6f8;   /* рамки/подсветка */
  --accent:       #ea580c;   /* оранжевый — действия («В корзину», «Найти») */
  --accent-dark:  #c2410c;

  /* нейтральные */
  --bg:           #f3f6f9;   /* фон страницы */
  --surface:      #ffffff;   /* карточки, шапка */
  --surface-2:    #f5f8fb;   /* зебра, подложки */
  --ink:          #0e1b2e;   /* заголовки */
  --text:         #25313f;   /* основной текст */
  --muted:        #64707f;   /* второстепенный текст */
  --line:         #e2e7ee;   /* границы */

  /* статусы */
  --ok:       #15803d;  --ok-bg:     #dcfce7;  --ok-line:   #a7e8bf;
  --danger:   #dc2626;  --danger-bg: #fdecec;  --danger-line:#f3caca;
  --warn:     #b45309;  --warn-bg:   #fef3c7;

  /* форма */
  --radius:   8px;
  --radius-sm:6px;
  --shadow:   0 1px 3px rgba(14,27,46,.06), 0 8px 24px rgba(14,27,46,.07);
  --shadow-sm:0 1px 2px rgba(14,27,46,.08);
  --ff:   'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---------- база ---------- */
*{box-sizing:border-box}
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{font-family:var(--ff);color:var(--ink);font-weight:800;letter-spacing:-.01em;margin-top:0}
a{color:var(--brand);text-decoration:none}
a:hover,a:focus{color:var(--brand-dark);text-decoration:none}
.text-muted{color:var(--muted)!important}
.mono{font-family:var(--mono)}
:focus{outline:none}
.container{width:100%;max-width:1220px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
/* На больших дисплеях используем ширину экрана: длинные наименования деталей в выдаче
   помещаются в одну строку. Применяется ко всему сайту (шапка/подвал/контент — единый край). */
@media (min-width:1500px){ .container{max-width:1440px} }
@media (min-width:1800px){ .container{max-width:1640px} }

/* удобные отступы секций */
.section{padding:26px 0}
.section-tight{padding:16px 0}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.section-h h2{font-size:22px;margin:0}
.section-h .more{font-size:13px;font-weight:700;color:var(--brand)}

/* ============================ КНОПКИ ============================ */
.btn{
  font-family:var(--ff);font-weight:700;font-size:14px;line-height:1;
  border-radius:var(--radius-sm);border:1px solid transparent;
  padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.btn:focus{outline:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover,.btn-accent:focus,.btn-accent:active{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-success:hover,.btn-success:focus{background:#0f6a31;border-color:#0f6a31;color:#fff}
.btn-default{background:var(--surface);border-color:var(--line);color:var(--text)}
.btn-default:hover,.btn-default:focus{background:var(--surface-2);border-color:var(--brand);color:var(--brand)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--brand)}
.btn-ghost:hover{border-color:var(--brand);background:var(--brand-050)}
.btn-lg{padding:14px 24px;font-size:15px}
.btn-sm{padding:8px 12px;font-size:13px}
.btn-xs{padding:5px 9px;font-size:12px}
.btn-block{width:100%}

/* ============================ ШАПКА ============================ */
.site-header{position:sticky;top:0;z-index:1000;background:var(--surface);box-shadow:0 1px 0 var(--line)}
/* тонкая тёмная строка контактов */
.topstrip{background:var(--brand-navy);color:#aebfd4;font-size:12.5px}
.topstrip .container{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.topstrip a{color:#dfe8f4;display:inline-flex;align-items:center;gap:6px}
.topstrip a:hover{color:#fff}
.topstrip .ts-loc{color:#aebfd4}
.topstrip .ts-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topstrip .ts-cart{background:rgba(255,255,255,.10);padding:4px 11px;border-radius:6px}
.topstrip .ts-cart .cart-count{background:var(--accent);color:#fff;border-radius:20px;padding:1px 7px;font-size:11px;font-weight:800;margin-left:3px}
/* основная строка: логотип + каталог + поиск + vin.
   Все контролы одной высоты (--ctl=40px) → ровное выравнивание по центру,
   компактная (невысокая) шапка. */
:root{--ctl:40px}
.headbar{border-bottom:2px solid var(--brand)}
/* flex-wrap:wrap + min-width поиска: на узких экранах (ландшафт телефона, узкий планшет)
   поле поиска переносится на свою строку целиком, а не сжимается в полоску. */
.headbar .container{display:flex;align-items:center;gap:14px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
/* высоту 40px задаём ТОЛЬКО отдельным кнопкам; кнопки внутри поля поиска
   растягиваются по рамке-группе (align-items:stretch), их высоту не трогаем */
.headbar .cat-btn,.headbar .vin-link{height:var(--ctl)}
.brand-logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink);flex:none}
.brand-logo:hover{color:var(--ink)}
.brand-logo .mark{width:34px;height:34px;border-radius:50%;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:0 3px 8px rgba(27,110,194,.35)}
.brand-logo .mark .fa{transform:rotate(-8deg)}
.brand-logo b{color:var(--brand)}
.brand-logo img{height:var(--ctl);width:auto;display:block}
.cat-btn{flex:none;background:var(--brand);border-color:var(--brand);color:#fff}
.cat-btn:hover,.cat-btn:focus{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}

/* поиск в шапке — ЕДИНАЯ рамка-группа (поле + история + «Найти»).
   Рамка живёт на .search-wrap и подсвечивается ЦЕЛИКОМ на :focus-within,
   поэтому правый край всегда очерчен (раньше фокус-обводка поля перекрывалась
   кнопкой «Найти»/историей справа — правая граница «пропадала»). */
/* ВАЖНО: /custom.css (стили из админки, грузятся ПОСЛЕ темы) содержит
   `.searchpanel{margin-top:33px}` и `.searchpanel form{margin:5px}` под старый дизайн —
   они опускали поле поиска и ломали выравнивание шапки. Перебиваем повышенной
   специфичностью (через .headbar), чтобы порядок загрузки не имел значения. */
.headbar .searchpanel{flex:1 1 320px;min-width:260px;margin:0}
.headbar .searchpanel form,.headbar .searchpanel #search,.headbar #search{margin:0}
.search-wrap{
  height:var(--ctl);box-sizing:border-box;
  position:relative;display:flex;align-items:stretch;
  border:1.5px solid var(--brand-100);border-radius:var(--radius);background:var(--surface);overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.search-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050)}
.search-wrap .s-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none;z-index:1}
/* поле, история и «Найти» БЕЗ собственной высоты — тянутся по рамке (stretch) */
.search-wrap .searchform,
.search-wrap input[name="pattern"]{
  flex:1;width:100%;height:100%;align-self:stretch;border:0;background:transparent;
  padding:0 12px 0 36px;font-family:var(--mono);font-size:14.5px;letter-spacing:.02em;color:var(--ink);
}
.search-wrap input::placeholder{color:#9aa4b2;font-family:var(--ff);letter-spacing:0}
.search-wrap input:focus{outline:none;box-shadow:none}
.search-wrap .btn-find{height:auto;border:0;border-radius:0;padding:0 20px}
.vin-link{flex:none;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;white-space:nowrap}
/* история поиска — между полем и «Найти»; левая граница = разделитель */
.hist-btn{height:auto;border:0;border-left:1px solid var(--brand-100);border-radius:0;color:var(--muted);background:transparent;padding:0 13px}
.hist-btn:hover{color:var(--brand);background:var(--brand-050)}

/* выпадашки шапки (каталог/вход) — на базе bootstrap .dropdown-menu */
.dropdown-menu{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;margin-top:10px;min-width:304px}
.dropdown-menu>li>a{display:flex;align-items:center;gap:11px;white-space:nowrap;border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font-weight:600;font-size:13.5px;line-height:1.25}
.dropdown-menu>li>a>.fa{width:18px;text-align:center;color:var(--muted);font-size:14px;flex:none}
.dropdown-menu>li>a:hover{background:var(--brand-050);color:var(--brand)}
.dropdown-menu>li>a:hover>.fa{color:var(--brand)}
.dropdown-menu>li>a.dd-all{color:var(--brand);font-weight:800}
.dropdown-menu>li>a.dd-all>.fa{color:var(--brand)}
.dropdown-menu>li>a.dd-all>.chev{margin-left:auto;font-size:12px}
.dropdown-menu .divider{height:1px;margin:6px;background:var(--line)}

/* ============================ ГЛАВНАЯ ============================ */
/* полоса ценностей (без «числа поставщиков») */
.valuestrip{background:var(--surface);border-bottom:1px solid var(--line)}
.valuestrip .container{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:16px;padding-bottom:16px}
/* Bootstrap-`.container` добавляет клирфикс-псевдоэлементы ::before/::after
   (display:table). В flex/grid они становятся лишними элементами и ломают раскладку
   (полоса ценностей уезжала во 2-ю колонку). Убираем их на наших flex/grid-контейнерах. */
.topstrip .container::before,.topstrip .container::after,
.headbar .container::before,.headbar .container::after,
.valuestrip .container::before,.valuestrip .container::after{content:none;display:none}
.value{display:flex;gap:12px;align-items:flex-start}
.value .vi{width:40px;height:40px;border-radius:10px;background:var(--brand-050);color:var(--brand);display:grid;place-items:center;font-size:17px;flex:none}
.value b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.value span{font-size:12.5px;color:var(--muted);line-height:1.4}

/* баннер (управляется из админки) */
.promo{background:linear-gradient(100deg,var(--brand-navy),#173463);color:#fff;border-radius:var(--radius);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.promo h3{color:#fff;font-size:22px;margin:0 0 6px}
.promo p{color:#c4d3e8;margin:0;font-size:14px;max-width:560px}
.promo .btn{flex:none}

/* каталоги по маркам */
.mark-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.mark-tile{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 10px;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.mark-tile:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(27,110,194,.12);transform:translateY(-1px)}
.mark-tile .ml{width:46px;height:46px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--brand)}
.mark-tile b{font-size:13px;color:var(--ink)}
.mark-tile span{font-size:11px;color:var(--muted)}

/* новости */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.news-card .nc-img{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#eef2f7,#eef2f7 10px,#e7edf4 10px,#e7edf4 20px);display:grid;place-items:center;color:#9aa8b8;font-family:var(--mono);font-size:11px}
.news-card .nc-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.news-card .nc-date{font-size:11.5px;color:var(--muted);font-weight:600}
.news-card h4{font-size:15px;margin:0}
.news-card p{font-size:13px;color:var(--muted);margin:0}

/* о компании */
.about-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.about-box h3{font-size:18px;margin:0 0 8px}
.about-box p{margin:0 0 12px;color:var(--text);line-height:1.6}
.about-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:6px}
.about-stats b{display:block;font-size:24px;color:var(--brand);line-height:1}
.about-stats span{font-size:12px;color:var(--muted)}

/* ============================ ВЫДАЧА ПОИСКА ============================ */
.result-head{padding-top:20px}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--brand)}
.q-title{font-size:22px;margin:0 0 4px}
.q-title .q-art{font-family:var(--mono);color:var(--brand);font-weight:800}
.q-sub{font-size:13.5px;color:var(--muted);margin:0}

/* карточки-лидеры */
.best-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 4px}
.best{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.best.is-hot{border-color:var(--accent)}
.best .b-tag{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--brand);margin-bottom:9px}
.best.is-hot .b-tag{color:var(--accent)}
.best .b-brand{font-weight:800;font-size:15px;color:var(--ink)}
.best .b-brand .art{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-weight:600}
.best .b-name{font-size:12px;color:var(--muted);margin:2px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.best .b-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.best .b-price{font-weight:800;font-size:22px;color:var(--ink)}
.best .b-price small{font-size:13px;color:var(--muted);font-weight:700;margin-left:3px}
.best .b-days{font-size:12.5px;color:var(--muted);font-weight:600}

/* фильтры / сортировка */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0}
.toolbar .tb-lbl{font-size:12.5px;color:var(--muted);font-weight:700}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;user-select:none}
.chip:hover{border-color:var(--brand)}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.is-on.is-acc{background:var(--accent);border-color:var(--accent)}
.chip .box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--muted);display:inline-grid;place-items:center;font-size:9px;color:transparent}
.chip.is-on .box{background:#fff;border-color:#fff;color:var(--brand)}

/* таблица предложений — плотная, зебра, подсветка цены */
.table.search{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:hidden;margin:6px 0 0;font-size:13.5px}
.table.search thead th{
  background:var(--surface);text-align:left;font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:11px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;
}
.table.search thead th.ta-c{text-align:center}
.table.search thead th.ta-r{text-align:right}
.table.search tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;background:var(--surface)}
.table.search tbody tr:nth-child(odd) td{background:var(--surface-2)}
.table.search tbody tr:hover td{background:var(--brand-050)}
.table.search tbody tr:last-child td{border-bottom:0}
/* заголовок группы (точное совпадение / аналоги) */
.brandhead td,.table.search tr.brandhead td{
  background:var(--brand-050)!important;color:var(--brand-navy);font-weight:800;font-size:12.5px;
  padding:9px 12px;border-bottom:1px solid var(--brand-100);text-transform:none;letter-spacing:.01em;
}
.brandhead .muted{font-weight:600;color:var(--muted);margin-left:6px}
.brandhead.is-alt td{color:var(--ink)}

.c-brand{font-weight:800;color:var(--ink);white-space:nowrap}
.c-brand .bdot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:9px;font-weight:800;color:var(--brand);margin-right:8px;vertical-align:middle}
.c-art,.art{font-family:var(--mono);font-size:13px;color:var(--text);white-space:nowrap}
.c-name{color:var(--text);max-width:250px}
.c-name .rowtools{display:flex;gap:4px;margin-top:5px}
.rowtools a,.rowtools button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--muted);font-size:11px;cursor:pointer;padding:0}
.rowtools a:hover,.rowtools button:hover{color:var(--brand);border-color:var(--brand)}
.c-stock{font-weight:800;font-size:13px;text-align:center;white-space:nowrap}
.c-stock.ok{color:var(--ok)}
.c-stock.low{color:var(--warn)}
.c-stock .u{font-weight:600;color:var(--muted);font-size:12px}
.c-days{white-space:nowrap;font-weight:700;text-align:center}
.c-days .qdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;vertical-align:middle}
.qdot.q-ok{background:#12a150}.qdot.q-mid{background:#e0a416}.qdot.q-bad{background:#e5484d}
.c-ret{text-align:center}
.c-price{text-align:right}
.table.search tbody tr td.c-price{background:var(--brand-050)}
.table.search tbody tr:hover td.c-price{background:var(--brand-100)}
.price{font-weight:800;font-size:20px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{font-size:12px;color:var(--muted);font-weight:700}
.c-buy{text-align:right;white-space:nowrap}
.buy{display:inline-flex;align-items:stretch}
.buy .quantity-search,.buy input[type=number]{width:52px;height:38px;border:1px solid var(--line);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);text-align:center;font:inherit;font-size:14px;color:var(--ink);-moz-appearance:textfield}
.buy .quantity-search::-webkit-outer-spin-button,.buy .quantity-search::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy .btn{height:38px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:0 14px}

/* ---- бейджи возврата / статусов ---- */
.badge-ret{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap}
.badge-ret.yes{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.badge-ret.no{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line)}
.label{border-radius:5px;font-weight:700;padding:.28em .55em}
.label-success{background:var(--ok)}
.label-danger{background:var(--danger)}
.label-default{background:#8494a6}
.label-primary{background:var(--brand)}

/* ============================ ВЫБОР БРЕНДА ============================ */
.brand-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.brand-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text)}
.brand-item:last-child{border-bottom:0}
.brand-item:hover{background:var(--brand-050);color:var(--text)}
.brand-item .bi-logo{width:34px;height:34px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:11px;color:var(--brand);flex:none;background-size:cover;background-position:center}
.brand-item .bi-name{font-weight:800;font-size:14.5px;color:var(--ink);width:170px;flex:none}
.brand-item .bi-art{font-family:var(--mono);font-size:12.5px;color:var(--muted);width:120px;flex:none}
.brand-item .bi-part{font-size:13px;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-item .bi-go{color:var(--brand);font-weight:700;font-size:12.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}

/* межстраничная адаптивная таблица (03 «найдено в каталогах» / кросс-номера) */
.table.adaptive{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:hidden}
.table.adaptive thead th{background:var(--surface);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:11px 12px;border-bottom:1.5px solid var(--line);text-align:left}
.table.adaptive tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table.adaptive tbody tr:last-child td{border-bottom:0}
.table.adaptive tbody tr.pointer{cursor:pointer}
.table.adaptive tbody tr:hover td{background:var(--brand-050)}
.table.adaptive .g_img{width:52px;height:44px;border-radius:6px;background-size:contain;background-position:center;background-repeat:no-repeat;border:1px solid var(--line);background-color:#fff}
.table.adaptive .g_brand{font-weight:800;color:var(--ink);white-space:nowrap}
.table.adaptive .g_article{font-family:var(--mono);color:var(--text)}
.table.adaptive .g_name{color:var(--muted)}
.table.adaptive .g_name .clip{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================ ПОДВАЛ ============================ */
.site-footer{background:var(--brand-navy);color:#9fb2c9;margin-top:34px;padding:30px 0 22px}
.site-footer a{color:#cdd9e9}
.site-footer a:hover{color:#fff}
.site-footer .f-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.site-footer h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px}
.site-footer .f-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.site-footer .f-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:18px;margin-bottom:10px}
.site-footer .f-brand .mark{width:34px;height:34px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
.site-footer .f-contacts{font-size:13px;line-height:1.7}
.site-footer .f-legal{border-top:1px solid rgba(255,255,255,.10);margin-top:22px;padding-top:16px;font-size:12px;color:#7f92a9;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ============================ КУКИ / МОДАЛКА ============================ */
.cookies_oferta{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;max-width:760px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(14,27,46,.22);padding:16px 20px;font-size:13.5px;color:var(--text);text-align:left;
}
.cookies_oferta .ck-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.modal-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px rgba(14,27,46,.28);overflow:hidden}
.modal-header{border-bottom:1px solid var(--line);padding:16px 20px}
.modal-title{font-size:17px}
.modal-body{padding:18px 20px}
/* Модалка «Офисы и точки выдачи» — под новый дизайн. Убираем унаследованный фон-карту
   России (client.css/custom.css старой темы) — !important, т.к. custom.css грузится ПОСЛЕ.
   Офисы — выбираемые карточки, текущий подсвечен. */
.offices{background:none !important;padding:0 !important;min-height:0 !important}
.offices ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.offices li{border:0 !important;background:none !important}
.offices a{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border:1.5px solid var(--line) !important;
  border-radius:var(--radius);color:var(--text);font-weight:600;cursor:pointer;background:var(--surface) !important;
  transition:border-color .15s,background .15s;line-height:1.4}
.offices a:hover{border-color:var(--brand-200) !important;background:var(--brand-050) !important}
.offices a.selected{border-color:var(--brand) !important;background:var(--brand-050) !important;color:var(--ink) !important;
  font-weight:800;padding:13px 15px !important;border-radius:var(--radius) !important}
.offices a b{color:var(--ink);font-weight:800}
.offices a .fa-check{color:var(--ok);margin-top:2px}
.offices a .fa-info-circle{color:var(--muted);margin-left:4px}

/* ============================ BOOTSTRAP-ПРИМИТИВЫ (автономность) ============================ */
/* Чтобы страница корректно отображалась и без внешнего Bootstrap CSS.
   В движке, где Bootstrap уже подключён, эти правила не мешают. */
.pull-right{float:right!important}
.pull-left{float:left!important}
.text-center{text-align:center}
.text-right{text-align:right}
.hidden{display:none}   /* без !important: движок показывает #filters через jQuery .show() (inline display) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.close{float:right;font-size:22px;font-weight:700;line-height:1;color:var(--muted);background:transparent;border:0;cursor:pointer;opacity:.6;padding:0}
.close:hover{opacity:1;color:var(--ink)}
.divider{height:1px;margin:6px 4px;background:var(--line);overflow:hidden;list-style:none}
.fade{opacity:1}
/* формы (базовые классы Bootstrap) */
.form-group{margin-bottom:14px}
.form-control{display:block;width:100%;height:42px;padding:9px 12px;font-family:var(--ff);font-size:14px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050);outline:none}
.form-control::placeholder{color:#9aa4b2}
textarea.form-control{height:auto}
/* выпадающие меню */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;z-index:1000;min-width:304px;list-style:none}
.dropdown.open>.dropdown-menu,.dropdown-menu.is-open{display:block}
.dropdown-menu>li{display:block}
/* модальные окна */
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1050;overflow:auto;-webkit-overflow-scrolling:touch;background:rgba(14,27,46,.5)}
.modal.is-open,.modal.in{display:block}
.modal-dialog{margin:44px auto;width:calc(100% - 32px);max-width:600px}
.modal-dialog.modal-sm{max-width:400px}

/* ============================ АДАПТИВ ============================ */
@media (max-width:991px){
  .mark-grid{grid-template-columns:repeat(4,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer .f-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  /* Защита от горизонтального скролла на телефоне.
     overflow-x:clip на корне ловит и обычный контент, и position:fixed-элементы (МАКС-QR,
     старые виджеты), НЕ создаёт scroll-контейнер → sticky-шапка продолжает работать.
     overflow-x:hidden — фолбэк для старых Safari (<16). */
  html{overflow-x:hidden;overflow-x:clip}
  /* МАКС-QR виджет и подобные fixed-плашки — прижать в экран */
  #maxqr-w{left:8px!important;right:8px!important;width:auto!important;max-width:calc(100vw - 16px)!important}
  /* ШАПКА на телефоне: строка 1 — лого + Каталог; строка 2 — ПОИСК на всю ширину;
     строка 3 — VIN. order задаём на flex-ЭЛЕМЕНТАХ (.dropdown, а не .cat-btn внутри). */
  .headbar .container{flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:10px}
  .brand-logo{order:1;font-size:16px;gap:8px;flex:0 1 auto;min-width:0}
  .brand-logo .mark{width:30px;height:30px;font-size:14px;flex:none}
  .headbar .dropdown{order:2;margin-left:auto;flex:none}
  .headbar .cat-btn{margin-left:0;padding:8px 12px;font-size:13px;height:auto}
  .headbar .searchpanel{order:3;flex:0 0 100%;width:100%;margin:0}
  .headbar .vin-link{order:4;flex:1 1 100%;justify-content:center}
  .search-wrap{height:44px}   /* крупнее под палец */
  .valuestrip .container{grid-template-columns:1fr}
  .best-row{grid-template-columns:1fr}
  .mark-grid{grid-template-columns:repeat(3,1fr)}
  .news-grid{grid-template-columns:1fr}
  .site-footer .f-cols{grid-template-columns:1fr}
  .brand-item .bi-part{display:none}
  .brand-item .bi-name{width:auto;flex:1}

  /* ВЫДАЧА НА ТЕЛЕФОНЕ — НАСТОЯЩАЯ ТАБЛИЦА с горизонтальной прокруткой (НЕ карточки).
     Таблицу оборачивает JS в .tbl-scroll (footer.php); обёртка скроллится вбок, сама
     таблица — естественной ширины (table-layout:fixed/colgroup-% только для десктопа,
     тут авто). Компактнее шрифты/паддинги, чтобы больше влезало без скролла. */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px;
    border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .tbl-scroll .table.search{min-width:660px;margin:0;border:0;border-radius:0;font-size:12.5px}
  .table.search thead th{padding:8px 7px;font-size:10px;letter-spacing:.02em}
  .table.search tbody td{padding:7px 7px}
  /* компактная ячейка покупки в строке таблицы */
  .table.search tbody td.c-buy .quantity-search{width:44px}
  .table.search tbody td.c-buy .btn{padding:0 8px}
  .table.search tbody td.name_s .pn{white-space:normal}
  /* тулбар над выдачей: на телефоне кнопки в столбик, на всю ширину (иначе «Показать все» вылезает).
     !important — десктопные правила #fastnav в файле идут ПОЗЖЕ этой медиазапроса и перебивают её. */
  #fastnav .row{flex-wrap:wrap!important}
  #fastnav .row>.col-md-2,#fastnav .row>.col-md-10{flex:1 1 100%!important;text-align:left!important;max-width:100%}
  #fastnav .row>.col-md-10{margin-top:8px}
  #fastnav .btn,#fastnav .btn-group,#fastnav .btn-group>.btn{width:100%}
  /* тулбар сортировки/фильтров (чипы) — перенос */
  .toolbar{gap:8px}
  /* куки-баннер не шире экрана (жёстко через 100vw — перебивает старый left/right) */
  .cookies_oferta{left:8px!important;right:auto!important;width:calc(100vw - 16px)!important;max-width:none!important;box-sizing:border-box}
  .cookies_oferta .ck-actions{flex-wrap:wrap}
  /* ФИЛЬТРЫ ВЫДАЧИ на телефоне — off-canvas слева по кнопке-воронке (освобождает
     основной экран под таблицы). Открытие — body.filters-open (JS в footer.php). */
  #filters.filter-menu{
    position:fixed;top:0;left:0;bottom:0;height:100%;
    width:86%;max-width:340px;margin:0;border:0;border-radius:0;
    z-index:1300;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:0 0 40px rgba(14,27,46,.35)}
  body.filters-open #filters.filter-menu{transform:none}
  body.filters-open{overflow:hidden}
  body.filters-open .filters-backdrop{display:block}
  .filters-toggle{display:inline-flex;align-items:center;gap:8px;margin:10px 0 6px;
    padding:9px 15px;border-radius:999px;border:1px solid var(--line);
    background:var(--surface);color:var(--brand);font-weight:800;font-size:13.5px;
    box-shadow:var(--shadow-sm);cursor:pointer}
  .filters-toggle .fa{color:var(--brand);font-size:14px}
  .filters-head{display:flex;align-items:center;justify-content:space-between;
    padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface);
    position:sticky;top:0;z-index:2}
  .filters-head b{font-size:15px;color:var(--ink)}
  .filters-close{background:transparent;border:0;font-size:26px;line-height:1;
    color:var(--muted);padding:0 6px;cursor:pointer}
  .filters-close:hover{color:var(--ink)}
  /* телефон в шапке — только трубка (номер по тапу tel:) */
  .topstrip .ts-phone{padding:4px 9px;background:rgba(255,255,255,.10);border-radius:6px;font-size:15px}
  .topstrip .ts-phone .ph-num{display:none}
  /* кнопка «наверх» на телефоне: client.css уводит её за правый край (left:550px из-за
     трансформ-предка) → горизонтальный скролл. Некритична — прячем на мобильном. */
  #back-top{display:none!important}

  /* тот же приём, что и для .table.search: сам <table> в block+width:100%,
     иначе display:table сжимается по содержимому и карточки-строки не на всю ширину */
  .table.adaptive{display:block;width:100%}
  .table.adaptive tbody,.table.adaptive tbody tr,.table.adaptive tbody td{display:block}
  .table.adaptive thead{display:none}
  .table.adaptive tbody tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;padding:10px 12px}
  .table.adaptive .g_img{grid-row:1 / span 2}
  .table.adaptive td{border:0;padding:2px 0}
  .table.adaptive tbody tr{border-bottom:1px solid var(--line)}

  /* КОРЗИНА (.table.cart): 9 столбцов (галка/бренд/артикул/имя/срок/наличие/цена/сумма/коммент).
     Generic-грид auto 1fr auto давал колонки 220/100/100=420px → вылет и обрезание справа.
     Делаем полноценную блок-карточку: заголовок = бренд+артикул, галка в углу,
     имя строкой, срок/цена/сумма — подписанными строками. */
  .table.cart tbody tr{display:block!important;position:relative;padding:14px 40px 14px 14px;
    border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;
    background:var(--surface)!important;box-shadow:var(--shadow-sm)}
  .table.cart tbody td{display:block;border:0;padding:0;width:auto;background:transparent!important}
  .table.cart td.check{position:absolute;top:12px;right:12px;width:auto}
  .table.cart td.brand{display:inline-block;font-weight:800;font-size:16px;color:var(--ink)}
  .table.cart td.article{display:inline-block;margin-left:8px;color:var(--muted)}
  .table.cart td.name{display:block;margin:6px 0 10px;color:var(--text)}
  .table.cart td.deliverytime_c,.table.cart td.stock_c{display:inline-flex;align-items:center;gap:6px;margin:0 16px 6px 0}
  .table.cart td.deliverytime_c::before{content:"Срок: ";color:var(--muted);font-size:12px;font-weight:700}
  .table.cart td.price_c{display:inline-block;margin:0 18px 6px 0;font-weight:700}
  .table.cart td.price_c::before{content:"Цена: ";color:var(--muted);font-size:12px;font-weight:700}
  .table.cart td.price_c.subtotal{font-size:18px;color:var(--brand)}
  .table.cart td.price_c.subtotal::before{content:"Сумма: "}
  .table.cart td.button_c{display:block;margin-top:10px}
  /* попап-комментарий: textarea жёстко 468px → на телефоне не шире экрана */
  .popover{max-width:calc(100vw - 24px)!important}
  .popover textarea{width:100%!important;max-width:100%!important;box-sizing:border-box}
}
@media (max-width:480px){
  .mark-grid{grid-template-columns:repeat(2,1fr)}
  .topstrip .ts-loc{display:none}
}
/* Короткий экран (ландшафт телефона): промо-виджет МАКС высокий (QR+текст+кнопка)
   и вылезает по высоте. QR со своего же экрана сканировать бессмысленно — прячем его,
   оставляя компактную карточку с текстом и кнопкой «Открыть бота». */
@media (max-height:520px){
  #maxqr-code{display:none}
  #maxqr-w{width:240px;max-width:calc(100vw - 16px)}
}

/* ==========================================================================
   ПРИВЯЗКА К РЕАЛЬНОЙ РАЗМЕТКЕ ДВИЖКА (views/default/client/parts.php и др.)
   Дизайн-макет использовал свои классы (.best, .buy…); движок рендерит другие
   (.bestpart, .bin-group, #filters…). Ниже — стилизация реальных классов
   под тот же вид. Правок PHP не требуется.
   ========================================================================== */

/* ----- ЛИДЕР-КАРТОЧКИ (print_best -> .bestpart в col-md-4) ----- */
.bestpart{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm);height:calc(100% - 12px);
}
.bestpart>a:first-child{
  display:inline-block;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--brand);margin-bottom:2px;
}
.bestpart>a:first-child:hover{color:var(--brand-dark)}
.bestpart .label.label-default.pull-right{
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line);
  font-weight:700;font-size:11px;border-radius:5px;padding:.3em .6em;
}
.bestpart b{font-size:15px;color:var(--ink)}
.bestpart>small{display:block;color:var(--muted);font-size:12px;margin:3px 0 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bestpart .bin-group{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.bestpart .bin-group .btn.btn-default{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-weight:800;padding:8px 12px;border-radius:var(--radius-sm);flex:0 0 auto;
}
.bestpart .bin-group .btn.btn-default b{font-size:15px;color:var(--ink)}
.bestpart .bin-group .btn.btn-danger{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;
  margin-left:auto;border-radius:var(--radius-sm);
}
.bestpart .bin-group .btn.btn-danger:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

/* «Выбрать другую группу» / «Показать все предложения» (#fastnav) */
#fastnav{margin:16px 0 4px}
#fastnav .btn-success{background:var(--brand);border-color:var(--brand)}
#fastnav .btn-success:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

/* ----- ТАБЛИЦА ВЫДАЧИ (.table.search) — заголовки/группы/строки ----- */
.table.search thead th{background:var(--surface);color:var(--muted);font-size:11px;
  font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-bottom:1.5px solid var(--line);padding:11px 10px}
.table.search thead th[align="center"]{text-align:center}
.table.search thead th[align="right"]{text-align:right}
/* заголовок группы «Запрошенный артикул / Аналоги» — <th class="brandhead"> */
th.brandhead,.table.search th.brandhead{
  background:var(--brand-050);color:var(--brand-navy);font-weight:800;font-size:12.5px;
  text-transform:none;letter-spacing:.01em;padding:9px 12px;border-bottom:1px solid var(--brand-100);text-align:left;
}
th.brandhead strong{font-weight:800}
.table.search tbody td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table.search td.price{text-align:right;background:var(--brand-050);font-weight:800;font-size:17px;color:var(--ink);white-space:nowrap}
.table.search tbody tr:hover td.price{background:var(--brand-100)}
.table.search td.stock{text-align:center;font-weight:800;white-space:nowrap}
.table.search td.deliverytime{text-align:center;white-space:nowrap;font-weight:600}
.table.search td.basket .input-group{width:auto}
.table.search td.basket .quantity-search{
  width:52px;height:36px;text-align:center;border:1px solid var(--line);border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  -moz-appearance:textfield;font-weight:700;color:var(--ink)
}
.table.search td.basket .quantity-search::-webkit-outer-spin-button,
.table.search td.basket .quantity-search::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.table.search td.basket .btn{height:36px;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.table.search td.basket .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
/* иконки-инструменты в строке (фото/инфо/google) */
.table.search td .btn.btn-sm.btn-default,.table.search td .btn.btn-xs{
  border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:6px}
.table.search td .btn.btn-sm.btn-default:hover,.table.search td .btn.btn-xs:hover{color:var(--brand);border-color:var(--brand)}
.table.search .recommended_brands,.text-danger{color:var(--accent)!important}

/* ----- ФИЛЬТР-ПАНЕЛЬ (#filters в левой колонке) ----- */
#filters.filter-menu{list-style:none;padding:0;margin:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
#filters.filter-menu>li{border-bottom:1px solid var(--line)}
#filters.filter-menu>li:last-child{border-bottom:0}
#filters.filter-menu>li>a{display:block;padding:11px 14px;font-weight:800;font-size:13px;
  color:var(--ink);background:var(--surface-2)}
#filters.filter-menu>li>a:hover{color:var(--brand)}
#filters .submenu{list-style:none;margin:0;padding:8px 14px}
#filters .fake-link{display:block;padding:5px 0;font-size:13px;color:var(--text);cursor:pointer}
#filters .fake-link:hover{color:var(--brand)}
#filters .fake-link.pressed{color:var(--brand);font-weight:800}
#filters .fake-link .pull-right{color:var(--muted);font-weight:600}
#filters input[type=number]{height:34px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 8px}
#filters .padd{padding:0}

/* ----- ОБЩИЕ КОМПОНЕНТЫ (единый стиль на всех страницах) ----- */
.breadcrumb{background:transparent;padding:14px 0 6px;margin:0;font-size:12.5px;color:var(--muted)}
.breadcrumb>li+li:before{content:"/";color:var(--line);padding:0 8px}
.breadcrumb>.active{color:var(--text)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.panel-heading{background:var(--surface-2);border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;font-weight:800;color:var(--ink)}
.panel-default>.panel-heading{background:var(--surface-2);color:var(--ink)}
.well{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.alert{border-radius:var(--radius);border:1px solid transparent;font-size:13.5px}
.alert-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.alert-danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.alert-warning{background:var(--warn-bg);border-color:#f3d99a;color:var(--warn)}
.alert-info{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-dark)}
.pagination>li>a,.pagination>li>span{color:var(--brand);border-color:var(--line)}
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs>li>a{border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--muted);font-weight:700}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover{color:var(--brand);border-color:var(--line) var(--line) transparent;background:var(--surface)}
blockquote{border-left:3px solid var(--brand);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;padding:12px 18px;font-size:14px}
blockquote .label.news{background:var(--brand);border-radius:5px}
.input-group-btn>.btn{border-color:var(--line)}
table.table>thead>tr>th{border-bottom:1.5px solid var(--line)}
table.table>tbody>tr>td{border-top:1px solid var(--line)}
.table-hover>tbody>tr:hover{background:var(--brand-050)}
/* кнопки Bootstrap-цветов → фирменная гамма (единообразие на всех страницах) */
.btn-danger{background:var(--accent);border-color:var(--accent)}
.btn-danger:hover,.btn-danger:focus{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-info{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-info:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-warning{background:var(--warn);border-color:var(--warn);color:#fff}
/* Кнопка «Архив заказов» (страница заказов клиента): была btn-warning (мутный тёмно-оранжевый)
   + красная иконка text-danger на нём = резало глаз. Спокойный янтарный вторичный вид:
   бледный фон, тёмно-янтарный читаемый текст, бейдж-счётчик тёмный с белым числом. */
.btn.btn-warning.link[data-target="/account/order/archived"]{
  background:var(--warn-bg);border:1px solid #ecd08a;color:var(--warn);font-weight:700}
.btn.btn-warning.link[data-target="/account/order/archived"]:hover,
.btn.btn-warning.link[data-target="/account/order/archived"]:focus,
.btn.btn-warning.link[data-target="/account/order/archived"]:active{
  background:#fbe6ac;border-color:#e0be6a;color:var(--warn)}
.btn.btn-warning.link[data-target="/account/order/archived"] .badge{
  background:var(--warn);color:#fff;border-radius:9px;padding:3px 8px}
.btn.btn-warning.link[data-target="/account/order/archived"] .badge .fa-archive,
.btn.btn-warning.link[data-target="/account/order/archived"] .fa-archive.text-danger{
  color:#fff!important}
.text-primary{color:var(--brand)!important}
.text-success{color:var(--ok)!important}

/* «Показать ещё» / спойлеры */
.pullme,.btn.closed{background:var(--surface);border:1px solid var(--line);color:var(--brand);font-weight:700}
.pullme:hover{border-color:var(--brand);background:var(--brand-050)}

/* адаптив таблицы выдачи движка на мобильном — не ломаем колонки, просто скролл */
@media (max-width:767px){
  #parts-container{overflow-x:auto}
  .bestpart .bin-group .btn.btn-danger{margin-left:0}
}

/* ==========================================================================
   КЛИЕНТСКИЕ СТРАНИЦЫ — единый стиль (формы, кабинет, каталог, карточка детали,
   корзина, статические страницы). Только визуал поверх существующей вёрстки.
   ========================================================================== */

/* ----- контент-область: воздух вокруг страниц ----- */
.center-block{padding-bottom:20px}
.bodytop .container>.col-md-12.center-block>h1,
.center-block h1{font-size:24px;margin:6px 0 10px}
.center-block h2{font-size:20px;margin:18px 0 10px}
.center-block h3{font-size:17px;margin:16px 0 8px}

/* ----- ФОРМЫ ----- */
.control-label{font-weight:700;color:var(--ink);font-size:13.5px;padding-top:9px}
.form-horizontal .form-group{margin-bottom:14px}
select.form-control{height:42px;background:var(--surface);cursor:pointer}
textarea.form-control{min-height:90px}
.input-group-addon{background:var(--surface-2);border:1.5px solid var(--line);color:var(--muted);border-radius:var(--radius-sm)}
.checkbox label,.radio label{font-size:13.5px;color:var(--text);padding-left:24px}
.checkbox input[type=checkbox],.radio input[type=radio]{margin-top:3px;width:16px;height:16px;accent-color:var(--brand)}
.help-block{font-size:12px;color:var(--muted)}
.has-error .form-control{border-color:var(--danger)}
.has-error .control-label,.error{color:var(--danger)}
label.error{font-size:12px;font-weight:600}
.g-recaptcha{margin:8px 0}
input.phone{letter-spacing:.02em}
.form-1,.regbox,.accountbox{max-width:100%}

/* ----- ВКЛАДКИ ----- */
.tab-content{padding:16px 0}
.tab-content>.tab-pane{animation:fadein .2s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.nav-tabs>li>a{padding:9px 16px}

/* ----- КАРТОЧКИ-БОКСЫ (кабинет, каталог, деталь, регистрация) ----- */
.accountbox,.regbox,.boxdetail,.profile,.pcard,.card,.lblck,.order-history{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.accountbox h3,.profile h3,.boxdetail h3,.pcard h3,.card h3{margin-top:0;font-size:16px}
.padding20{padding:20px}
.padd{padding:10px}

/* Личный кабинет: сетка/меню */
.order-history{padding:0;overflow:hidden}
.order-history .table{margin:0}
.accountbox .list-group,.profile .list-group{margin:0}
.accountbox a,.profile a{color:var(--brand)}

/* Каталоги по маркам (главная/каталог): .card / lampsTitle */
.lampsTitle{font-weight:800;color:var(--ink);font-size:15px;margin-bottom:8px}
.card b,.card strong{color:var(--ink)}
.card a{color:var(--brand);font-weight:600}

/* Карточка детали (pcard) */
.pcard .flex{display:flex;gap:14px;flex-wrap:wrap}
.pcard .flex-center{align-items:center}
.pcard .flex-column{flex-direction:column}
.pcard .flex-grow{flex:1 1 auto;min-width:0}
.pcard .flex-static{flex:0 0 auto}
.infoart{font-family:var(--mono);color:var(--brand);font-weight:800}
.pn{font-family:var(--mono);color:var(--text)}

/* ----- КОРЗИНА / КНОПКИ «В КОРЗИНУ» ----- */
.to_cart_compact,.tocart{white-space:nowrap}
.to_cart_compact .btn,.btn .tocart{border-radius:var(--radius-sm)}
.price_c{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
input.quantity,.quantity{width:56px;height:36px;text-align:center;border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:700;color:var(--ink)}

/* ----- ОФИСЫ / КОНТАКТЫ ----- */
.photouser{border-radius:var(--radius);border:1px solid var(--line);max-width:100%}
.offices .selected{color:var(--brand);font-weight:800}

/* ----- СТАТИЧЕСКИЕ СТРАНИЦЫ (политика/куки/оферта) ----- */
.center-block p{line-height:1.6}
.center-block ul,.center-block ol{line-height:1.7}
.textAgreement{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--surface-2);font-size:13px;line-height:1.55}

/* ----- УТИЛИТЫ темы движка ----- */
.pointer{cursor:pointer}
.highlight{background:var(--brand-050)}
.half-transparent{opacity:.55}
.marker{color:var(--accent)}
.divider{background:var(--line)}
.fake-link{cursor:pointer;color:var(--brand)}
.fake-link:hover{color:var(--brand-dark)}
.caret{opacity:.6}

/* ----- модалки: единые отступы/типографика ----- */
.modal-title{font-weight:800;color:var(--ink)}
.modal-footer{border-top:1px solid var(--line);padding:14px 20px}
.bs-component{max-width:100%}

/* ----- «наверх» ----- */
#back-top a{background:var(--surface);border:1px solid var(--line);color:var(--brand);border-radius:10px;box-shadow:var(--shadow-sm)}
#back-top a:hover{border-color:var(--brand);background:var(--brand-050)}

/* ==========================================================================
   ВЫДАЧА ПОИСКА 1:1 ПО МАКЕТУ (тематическая parts.php)
   ========================================================================== */
/* лидер-карточки в колонках движка (.row > .col-md-4/.best-col) */
.best-col{margin-bottom:12px}
.best{height:calc(100% - 12px);display:flex;flex-direction:column}
.best .b-tag{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.best .b-tag .b-orig{margin-left:auto;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font-size:10.5px;font-weight:700;text-transform:none;letter-spacing:0;border-radius:5px;padding:2px 7px}
.best .b-name{flex:1}
.best .b-buy{margin-top:12px}
.best .b-foot{margin-top:2px}

/* колонка «Возврат» (переиспользованная .information): бейдж сверху, инструменты мельче снизу */
.table.search td.c-ret{text-align:center;white-space:nowrap;min-width:120px}
.table.search td.c-ret .badge-ret{margin:0 auto 6px;display:inline-flex}
.table.search td.c-ret>.btn-group{display:inline-flex;gap:3px;flex-wrap:wrap;justify-content:center}
.table.search td.c-ret .btn-group .btn{width:26px;height:26px;padding:0;display:inline-grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:6px}
.table.search td.c-ret .btn-group .btn:hover{color:var(--brand);border-color:var(--brand)}
.table.search td.c-ret .btn-group .fa-retweet{display:none}   /* старую иконку возврата прячем — есть бейдж */

/* тулбар сортировки/фильтров */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0 4px}
.toolbar .tb-lbl{font-size:12.5px;color:var(--muted);font-weight:700}
.flt-hide{display:none!important}

/* качество отгрузки — точка рядом со сроком (в дополнение к popover) */
.table.search td.c-days .qdot{margin-right:6px}

/* срок: сам fa-info поповер оставляем, но делаем неброским */
.table.search td.c-days .excellent,.table.search td.c-days .good,.table.search td.c-days .bad{
  cursor:pointer;color:var(--muted);font-size:11px}

/* ==========================================================================
   КОРЗИНА
   ========================================================================== */
/* баннер «цены актуальны 24ч» — из растянутого label-danger в аккуратную плашку */
.col-lg-12>.label.label-danger.pull-right,
.label.label-danger[style*="white-space"]{
  display:block;float:none!important;background:var(--warn-bg);color:var(--warn);
  border:1px solid #f3d99a;border-radius:var(--radius);padding:10px 14px;font-size:13px;
  font-weight:600;white-space:normal!important;margin-bottom:12px;text-align:left;letter-spacing:0;
}
.table.cart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:4px}
.table.cart thead th{background:var(--surface);color:var(--muted);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;border-bottom:1.5px solid var(--line);padding:11px 10px}
.table.cart tbody td{padding:11px 10px;vertical-align:middle;border-top:1px solid var(--line)}
.table.cart tbody tr:hover td{background:var(--brand-050)}
.table.cart td.brand{font-weight:800;color:var(--ink);white-space:nowrap}
.table.cart td.article{font-family:var(--mono);color:var(--muted);white-space:nowrap}
.table.cart td.name{color:var(--text);min-width:220px}
.table.cart td.deliverytime_c,.table.cart td.stock_c,.table.cart td.price_c{text-align:center;white-space:nowrap}
.table.cart td.price_c{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.table.cart td.price_c.subtotal{color:var(--brand);font-size:16px}
.table.cart input.quantity,.table.cart .form-control{height:34px}
.table.cart td.check{white-space:nowrap}
.table.cart td.check .remove{color:var(--danger);border-color:var(--line);margin-left:6px}
.table.cart td.check .remove:hover{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.table.cart td.button_c{white-space:nowrap;text-align:center}
.table.cart td.button_c .btn{border-color:var(--line);color:var(--muted)}
.table.cart td.button_c .btn:hover{border-color:var(--brand);color:var(--brand)}
.color-red{color:var(--danger)!important}
/* итоговая строка корзины / кнопки под таблицей */
.button_c .btn-success,.cart-total{font-weight:800}

/* ==========================================================================
   ЛИЧНЫЙ КАБИНЕТ (заказы / баланс / профиль) — добивка специфики
   ========================================================================== */
.icon-large{font-size:15px;color:var(--muted)}
.link{color:var(--brand);cursor:pointer}
.link:hover{color:var(--brand-dark)}
.profilefoto,.photouser{border-radius:50%;border:2px solid var(--line);object-fit:cover}
.ccolcontent{padding:4px 0}
.total_o,.warehouse_o{font-weight:800;color:var(--ink)}
.no-sort{cursor:default}
/* таблицы заказов/баланса */
.table.no-sort thead th,table.table thead th{background:var(--surface);color:var(--muted);font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.table-striped>tbody>tr:nth-of-type(odd)>td{background:var(--surface-2)}
/* кабинет-навигация (summary боксы) */
.accountbox .icon-large{color:var(--brand)}
.panel-success>.panel-heading{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
/* «перезаказать» и мелкие действия в таблицах */
.no-sort .btn-default,.button_c .btn-default{border-color:var(--line)}
/* поповер-подсказки */
.popover{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);font-family:var(--ff)}
.popover-title{background:var(--surface-2);font-weight:800;color:var(--ink);border-bottom:1px solid var(--line)}
.tooltip-inner{background:var(--brand-navy);border-radius:var(--radius-sm);font-size:12px;padding:7px 10px}

/* ==========================================================================
   Тулбар над выдачей (#fastnav): «Выбрать другую группу» слева и
   «Показать все предложения» справа — в ОДНУ строку, без переносов.
   Пояснение про скрытые результаты — в подсказке (title) кнопки, не в вёрстке.
   ========================================================================== */
#fastnav{margin:6px 0 4px}
#fastnav .row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin:0}
#fastnav .row>[class^="col-md-"],#fastnav .row>[class*=" col-md-"]{width:auto;float:none;padding:0;min-width:0}
#fastnav .row>.col-md-2{flex:0 0 auto}
#fastnav .row>.col-md-10{flex:1 1 auto;text-align:right}
#fastnav .btn-group,#fastnav .btn{white-space:nowrap}

/* ==========================================================================
   КОНТАКТЫ / ОФИС — карточки (тематическая office.php)
   ========================================================================== */
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 16px}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm);margin-bottom:16px}
.contact-card h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 14px;color:var(--ink)}
.contact-card h3 .fa{color:var(--brand)}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.contact-list>li{display:flex;align-items:flex-start;gap:12px}
.contact-list .ci{width:34px;height:34px;flex:none;border-radius:9px;background:var(--brand-050);color:var(--brand);
  display:grid;place-items:center;font-size:15px}
.contact-list .ci-viber{background:#f0eafc;color:#7360f2}
.contact-list .ci-wa{background:#e6f7ec;color:#25d366}
.contact-list .ct{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--text);min-width:0}
.contact-list .ct>b{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.contact-list.req>li{padding-bottom:10px;border-bottom:1px dashed var(--line)}
.contact-list.req>li:last-child{border-bottom:0;padding-bottom:0}
.contact-list .mono{font-family:var(--mono);font-size:13px;color:var(--ink);line-height:1.5}
.contact-photo .photoffice{width:100%;border-radius:var(--radius-sm);border:1px solid var(--line)}
.contact-map #map{width:100%;height:340px;border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden}
/* сотрудники */
.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.staff-item{text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 10px}
.staff-item .staff-photo{width:84px;height:84px;margin:0 auto 8px;border-radius:50%;background-size:cover;background-position:center;
  background-color:var(--surface);border:2px solid var(--line)}
.staff-item .staff-name{font-weight:800;color:var(--ink);margin:6px 0 4px;font-size:13.5px}
.staff-item p{margin:2px 0;font-size:12.5px;color:var(--muted)}
.staff-item .label-default{background:var(--brand);color:#fff}
@media (max-width:767px){
  .contacts-grid{grid-template-columns:1fr}
  .staff-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==================================================================
   ДОРАБОТКИ redesign-2026 — СТРАНИЦА ВЫДАЧИ (parts.php)
   Всё десктопное — в @media(min-width:768px), чтобы НЕ трогать
   мобильные карточки (блок @media max-width:767px выше).
   ================================================================== */

/* ── Проблема 1: единая ширина всех таблиц выдачи (десктоп) ──
   Причина бага: каждая print_head() открывает ОТДЕЛЬНУЮ <table.search>
   с table-layout:auto → у каждой свои ширины колонок → рассинхрон и
   вылет широкой таблицы за .center-block(col-md-9) → скролл вправо.
   Фикс: table-layout:fixed + <colgroup> с %-ширинами → все таблицы
   строго по контейнеру и выровнены. (footable на выдаче НЕ активен —
   .footable() зовётся только в panel/order-views — конфликта нет.) */
@media (min-width:768px){
  .table.search{table-layout:fixed}
  /* «Наименование» — самый нагруженный столбец (длинные имена в 2 строки) → шире;
     «Купить» — только поле кол-ва + иконка-корзина → уже; часть места также снята
     с «Возврат»(иконки) и «Цена». */
  .table.search > colgroup > col.sc-brand{width:9%}
  .table.search > colgroup > col.sc-art  {width:12%}
  .table.search > colgroup > col.sc-name {width:25%}
  .table.search > colgroup > col.sc-ret  {width:10%}
  .table.search > colgroup > col.sc-wh   {width:7%}
  .table.search > colgroup > col.sc-stock{width:7%}
  .table.search > colgroup > col.sc-days {width:11%}
  .table.search > colgroup > col.sc-price{width:10%}
  .table.search > colgroup > col.sc-buy  {width:9%}

  /* Заголовки: перенос вместо nowrap (иначе «НАЛИЧИЕ» наезжает на «СРОК ПОСТАВЩИК»),
     компактный паддинг. Многословные («Срок Поставщик») переносятся штатно. */
  .table.search thead th{white-space:normal;padding-left:6px;padding-right:6px;word-break:normal}

  /* Столбец инструментов (бывш. «Возврат», заголовок пуст): компактный ряд пиктограмм
     с тултипами. ВОЗВРАТ — иконка (текст скрыт), зелёная/красная, рядом с фото/инфо/google. */
  .table.search tbody td.information,.table.search tbody td.c-ret{text-align:center;padding:6px 4px;vertical-align:middle}
  .table.search td.c-ret > .btn-group{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center}
  .table.search td.c-ret .btn.btn-xs{padding:3px 7px}
  .table.search td.c-ret .badge-ret{padding:3px 7px;border-radius:6px;font-size:0;gap:0;line-height:1;margin:0;height:24px;display:inline-flex;align-items:center}
  .table.search td.c-ret .badge-ret i{font-size:15px}

  /* НАИМЕНОВАНИЕ — 2 строки с многоточием (видимый .pn — первая строка группы) */
  .table.search tbody td.name_s{overflow:hidden}
  .table.search tbody td.name_s .pn{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.35;max-height:2.7em;word-break:break-word}
  /* АРТИКУЛ/БРЕНД — ключевые идентификаторы: переносим, НЕ режем ellipsis'ом
     (перебивает .c-art/.c-brand{white-space:nowrap}) */
  .table.search tbody td.article_s,.table.search tbody td.article_s.c-art{white-space:normal;word-break:break-all}
  .table.search tbody td.article_s a{display:inline;white-space:normal;word-break:break-all}
  .table.search tbody td.brand_s,.table.search tbody td.brand_s.c-brand{white-space:normal;word-break:break-word}
  /* СРОК/ПОСТАВЩИК (employee): имя поставщика и лейбл переносим, иначе .c-days{nowrap} режет */
  .table.search tbody td.c-days,.table.search tbody td.deliverytime{white-space:normal}
  .table.search tbody td.c-days b,.table.search tbody td.c-days .label{white-space:normal;word-break:break-word}
  /* КУПИТЬ — влезает в узкую фикс-колонку */
  .table.search tbody td.basket .input-group{max-width:100%}
  .table.search tbody td.basket .quantity-search{width:44px}
  .table.search tbody td.basket .btn{padding:0 9px}
}

/* ── Проблема 2: сворачивание панели фильтров ОДНИМ согласованным переключателем (десктоп ≥992) ──
   Развёрнуто: горизонтальная шапка-гамбургер СВЕРХУ фильтров (.flt-rail-head) → тап сворачивает.
   Свёрнуто: та же кнопка ВЕРТИКАЛЬНО в тонкой полоске 46px (.flt-rail-tab) → тап разворачивает.
   Оба — один визуальный элемент (гамбургер + «Фильтры»), меняется лишь ориентация. */
.flt-rail-head{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 12px;
  padding:11px 14px;background:var(--brand-050);border:1px solid var(--brand-100);
  border-radius:var(--radius);color:var(--brand);font-weight:800;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;box-sizing:border-box}
.flt-rail-head .fa{font-size:16px}
.flt-rail-head .flt-rail-x{margin-left:auto;font-size:16px;opacity:.75}
.flt-rail-head:hover{background:var(--brand-100)}
.flt-rail-tab{display:none;flex-direction:column;align-items:center;gap:12px;width:100%;
  padding:14px 0;background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--radius);
  color:var(--brand);cursor:pointer;position:sticky;top:106px}   /* ниже липкой шапки (~97px), чтобы не перекрывала */
.flt-rail-tab .fa{font-size:18px}
.flt-rail-tab .rt-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.flt-rail-tab:hover{background:var(--brand-100)}
@media (min-width:992px){
  /* РАЗВЁРНУТО: панель фильтров липкая — едет со скроллом (blockleft получает min-height =
     высоте результатов через JS, поэтому #filters проходит всю длину выдачи). top:106 — под шапкой. */
  #filters.filter-menu{position:sticky;top:106px}
  /* Длинный список брендов — свой скролл (~9 позиций), чтобы панель фильтров не была слишком
     высокой и дольше оставалась рядом с выдачей при прокрутке (аналоги). */
  #filters #brand{max-height:250px;overflow-y:auto}
  /* СВЁРНУТО: левая колонка → тонкая полоска 46px, контент скрыт, видна только полоска */
  [class*="col-md-"].flt-rail-mini{width:46px !important;padding-left:0 !important;padding-right:0 !important}
  [class*="col-md-"].flt-rail-mini > .blockleft,
  [class*="col-md-"].flt-rail-mini #filters{display:none !important}
  [class*="col-md-"].flt-rail-mini .flt-rail-tab{display:flex}
  .center-block.flt-wide{width:calc(100% - 46px) !important}
}
@media (max-width:991px){
  .flt-rail-head,.flt-rail-tab{display:none !important}   /* <992: рельса нет, переключатель не нужен */
}

/* ── Проблема 3: базовые правила off-canvas фильтров ──
   Десктоп-скрытие воронки/шапки — ТОЛЬКО через min-width:768, НЕ голым правилом:
   иначе оно (равная специфичность, но позже в файле) перебило бы мобильный показ
   внутри @media(max-width:767) — классический каскадный баг. */
.filters-backdrop{display:none;position:fixed;inset:0;background:rgba(14,27,46,.5);z-index:1290}
@media (min-width:768px){
  .filters-toggle,.filters-head{display:none}
}

/* Popover информации о бренде (по наведению/фокусу на бренде в выдаче) — аккуратная карточка */
.popover{max-width:360px}
.brand-pop-logo{max-width:120px;max-height:64px;float:right;margin:0 0 6px 12px;object-fit:contain}
.brand-pop-text{max-height:180px;overflow:auto;font-size:12.5px;line-height:1.45;color:var(--text)}
.popover h4{font-size:15px;margin:0 0 8px}