/* =====================================================================
   PORTAL ZIP — стили. Дизайн повторяет старый сайт (1С-Битрикс, Intec Universe):
   корпоративный синий #074d90, шрифт Ubuntu, три ряда шапки, синее меню,
   сайдбар категорий, карточки-строки в листинге, синяя форма «Обратная связь».
   Токены — в :root, компоненты ниже. Без сборки, без препроцессоров.
   ===================================================================== */

/* -------------------- 1. Reset ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

/* -------------------- 2. Tokens --------------------------------------- */
:root {
    /* Бренд: синий portal-zip (снят с живого сайта) */
    --primary-900: #02192f;
    --primary-800: #05335f;   /* тёмный: подвал, active */
    --primary-700: #074d90;   /* ОСНОВНОЙ */
    --primary-600: #0967c1;   /* hover */
    --primary-500: #3d8ad6;
    --primary-300: #6bb3f8;   /* светлый акцент */
    --primary-100: #e3eef9;
    --primary-50:  #f2f7fc;

    /* CTA = тот же синий (решение: «цвета как было») */
    --accent-700: var(--primary-700);
    --accent-600: var(--primary-600);
    --accent-500: var(--primary-500);
    --accent-300: var(--primary-300);
    --accent-100: var(--primary-100);

    /* Нейтральные */
    --bg-page:        #ffffff;
    --bg-card:        #ffffff;
    --bg-subtle:      #f8f9fb;
    --bg-muted:       #f2f3f5;
    --bg-stripe:      #f5f6f8;

    --text-primary:   #1d1d1f;
    --text-secondary: #555c66;
    --text-tertiary:  #808080;
    --text-inverse:   #ffffff;
    --text-link:      var(--primary-700);

    --border-default: #dcdcdc;
    --border-light:   #e9ebee;
    --border-strong:  #b0b0b0;

    --status-success: #27a844;
    --status-error:   #d9342b;
    --status-warning: #e8a317;

    /* Радиусы: Intec — почти прямоугольные, пилюли только у hero-кнопки */
    --r-pill: 999px;
    --r-lg:   4px;
    --r-md:   3px;
    --r-sm:   2px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 6px 20px rgba(0,0,0,.10);
    --shadow-lg: 0 14px 40px rgba(0,0,0,.14);

    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

    --container-max: 1400px;
    --container-pad: 32px;
    --sidebar-w: 256px;

    --t-fast: .12s ease;
    --t-base: .2s ease;
}

/* -------------------- 3. Типографика ---------------------------------- */
body {
    font-family: 'Ubuntu', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px; line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}
h1 { font-size: 28px; font-weight: 400; line-height: 1.2; }
h2 { font-size: 24px; font-weight: 400; line-height: 1.25; }
h3 { font-size: 18px; font-weight: 500; line-height: 1.3; }
h4 { font-size: 15px; font-weight: 500; }
p  { line-height: 1.6; }
a:hover { color: var(--primary-600); }
.text-link { color: var(--primary-700); }
.text-link:hover { color: var(--primary-600); text-decoration: underline; }
.text-muted { color: var(--text-tertiary); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--status-success); }
.text-center { text-align: center; }
.small { font-size: 12px; }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* -------------------- 4. Layout --------------------------------------- */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: var(--sp-12) 0; }
.section--subtle { background: var(--bg-subtle); }
.section-title { text-align: center; font-size: 24px; font-weight: 400; margin-bottom: var(--sp-8); }
.row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.row--center { align-items: center; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.flex-1 { flex: 1; }

/* Каталожная раскладка: сайдбар + контент */
.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.layout__main { min-width: 0; }

/* -------------------- 5. Шапка ---------------------------------------- */
/* 5a. Верхняя серая строка: почта · телефон · кнопка звонка */
.topline { background: var(--bg-subtle); border-bottom: 1px solid var(--border-light); font-size: 12px; color: var(--text-secondary); }
.topline__row { display: flex; align-items: center; gap: var(--sp-6); height: 36px; }
.topline__item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); white-space: nowrap; min-width: 0; }
.topline__item svg { width: 14px; height: 14px; stroke: var(--primary-700); flex-shrink: 0; }
.topline__item:hover { color: var(--primary-700); }
.topline__item--phone { font-weight: 700; color: var(--text-primary); }
.topline__cta {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
    background: var(--primary-700); color: #fff; border-radius: var(--r-md);
    font-size: 12px; font-weight: 500; white-space: nowrap;
    transition: background var(--t-fast);
}
.topline__cta:hover { background: var(--primary-600); color: #fff; }

/* 5b. Основной ряд: логотип · слоган · поиск · телефоны */
.header { background: var(--bg-card); }
.header__row { display: flex; align-items: center; gap: var(--sp-6); height: 88px; }
.header__logo { flex-shrink: 0; display: block; }
.header__logo img { height: 40px; width: auto; }
.header__tagline { font-size: 12px; line-height: 1.35; color: var(--text-tertiary); max-width: 110px; padding-left: var(--sp-5); border-left: 1px solid var(--border-light); }
.header__search { flex: 1; display: flex; align-items: center; background: var(--bg-muted); border-radius: var(--r-md); border: 1px solid transparent; position: relative; }
.header__search:focus-within { background: #fff; border-color: var(--primary-300); }
.header__search-input { flex: 1; border: 0; background: transparent; padding: 11px 14px; font-size: 13px; outline: none; min-width: 0; }
.header__search-btn { width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary-700); }
.header__search-btn svg { width: 16px; height: 16px; }
.header__search-btn:hover { color: var(--primary-600); }
.header__phones { flex-shrink: 0; text-align: right; }
.header__phone { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.header__phone svg { width: 14px; height: 14px; stroke: var(--primary-700); }
.header__phone + .header__phone { margin-left: var(--sp-4); }
.header__callback { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px dotted var(--text-secondary); line-height: 1.2; }
.header__callback:hover { color: var(--primary-700); border-color: var(--primary-700); }
.header__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--primary-700); flex-shrink: 0; }
.header__icon-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--primary-700); flex-shrink: 0; }
.header__icon-btn svg { width: 18px; height: 18px; }

/* 5c. Синее меню */
.mainnav { background: var(--primary-700); color: #fff; position: relative; z-index: 40; }
.mainnav__list { display: flex; list-style: none; }
.mainnav__item { flex: 1; position: relative; }
.mainnav__item + .mainnav__item { border-left: 1px solid rgba(255,255,255,.18); }
.mainnav__link {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; padding: 0 var(--sp-4);
    font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #fff;
    transition: background var(--t-fast);
}
.mainnav__link:hover, .mainnav__item.is-active > .mainnav__link, .mainnav__item.is-open > .mainnav__link { background: var(--primary-600); color: #fff; }
.mainnav__link svg { width: 16px; height: 16px; stroke: #fff; }
.mainnav__link--catalog { justify-content: space-between; }
.mainnav__link--catalog .mainnav__caret { width: 12px; height: 12px; transition: transform var(--t-base); }
.mainnav__item.is-open .mainnav__caret { transform: rotate(180deg); }

/* Выпадающий каталог */
.catalog-menu {
    display: none; position: absolute; top: 100%; left: 0; width: 100%; min-width: 760px;
    background: #fff; color: var(--text-primary);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); border-top: 0;
    padding: var(--sp-4); z-index: 50;
}
.mainnav__item.is-open .catalog-menu { display: block; }
.catalog-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.catalog-menu__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; border-radius: var(--r-md); }
.catalog-menu__link:hover { background: var(--primary-50); color: var(--primary-700); }
.catalog-menu__link img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; opacity: .8; }

/* -------------------- 6. Кнопки --------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 22px; height: 40px;
    font-size: 13px; font-weight: 500; white-space: nowrap; text-align: center;
    border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn--primary { background: var(--primary-700); color: #fff; border-color: var(--primary-700); }
.btn--primary:hover { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.btn--outline { background: #fff; color: var(--primary-700); border-color: var(--primary-700); }
.btn--outline:hover { background: var(--primary-700); color: #fff; }
.btn--white { background: #fff; color: var(--primary-700); border-color: #fff; }
.btn--white:hover { background: var(--primary-50); color: var(--primary-700); }
.btn--ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.btn--ghost-white:hover { background: #fff; color: var(--primary-700); }
.btn--pill { border-radius: var(--r-pill); padding: 0 30px; height: 48px; font-size: 14px; }
.btn--lg { height: 48px; padding: 0 28px; font-size: 14px; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 12px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }

/* -------------------- 7. Формы ---------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12px; color: var(--text-secondary); }
.field__label .req { color: var(--status-error); }
.input, .textarea, .select {
    width: 100%; padding: 10px 12px; height: 40px;
    background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--r-md);
    font-size: 13px; color: var(--text-primary); outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.textarea { height: auto; min-height: 120px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { background: #fff; border-color: var(--primary-500); }
.field--error .input, .field--error .textarea { border-color: var(--status-error); }
.field__error { font-size: 12px; color: var(--status-error); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; }
.checkbox input { margin: 3px 0 0; accent-color: var(--primary-700); }
.checkbox a { color: var(--primary-700); text-decoration: underline; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.form-note { font-size: 12px; color: var(--text-tertiary); }

/* Синяя форма (главная): подчёркнутые поля на синем */
.form--dark .input, .form--dark .textarea {
    background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); border-radius: 0;
    color: #fff; padding-left: 0; padding-right: 0; height: 44px;
}
.form--dark .textarea { min-height: 70px; }
.form--dark .input::placeholder, .form--dark .textarea::placeholder { color: rgba(255,255,255,.75); font-size: 15px; }
.form--dark .input:focus, .form--dark .textarea:focus { border-bottom-color: #fff; }
.form--dark .checkbox { color: #fff; }
.form--dark .checkbox a { color: #fff; }
.form--dark .checkbox input { accent-color: #fff; }

/* -------------------- 8. Хлебные крошки ------------------------------- */
.breadcrumb { padding: var(--sp-4) 0 var(--sp-3); font-size: 12px; color: var(--text-tertiary); }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.breadcrumb__item { display: inline-flex; gap: 6px; }
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--primary-700); }
.breadcrumb__current { color: var(--primary-700); }
.page-title { margin: var(--sp-2) 0 var(--sp-6); }

/* -------------------- 9. Сайдбар категорий ---------------------------- */
.sidebar-cats { list-style: none; border: 1px solid var(--border-light); background: #fff; }
.sidebar-cats__item + .sidebar-cats__item { border-top: 1px solid var(--border-light); }
.sidebar-cats__link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 13px; color: var(--text-secondary); min-height: 46px; }
.sidebar-cats__link img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; opacity: .7; }
.sidebar-cats__link:hover { background: var(--primary-50); color: var(--primary-700); }
.sidebar-cats__item.is-active .sidebar-cats__link { color: var(--text-primary); font-weight: 500; background: var(--bg-subtle); box-shadow: inset 3px 0 0 var(--primary-700); }
.sidebar-box { border: 1px solid var(--border-light); background: #fff; padding: var(--sp-4); margin-bottom: var(--sp-4); }
.sidebar-box__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.sidebar-box__list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; max-height: 260px; overflow: auto; }
.sidebar-box__list a { display: flex; justify-content: space-between; gap: 8px; color: var(--text-secondary); }
.sidebar-box__list a:hover { color: var(--primary-700); }
.sidebar-box__list .n { color: var(--text-tertiary); font-size: 12px; }
.sidebar-nav { list-style: none; border: 1px solid var(--border-light); background: #fff; }
.sidebar-nav li + li { border-top: 1px solid var(--border-light); }
.sidebar-nav a { display: block; padding: 13px 16px; font-size: 13px; color: var(--text-secondary); }
.sidebar-nav a:hover, .sidebar-nav .is-active a { color: var(--primary-700); background: var(--bg-subtle); }

/* -------------------- 10. Тулбар листинга + пагинация ----------------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); font-size: 13px; color: var(--text-secondary); }
.toolbar__views { display: flex; gap: 4px; }
.toolbar__view { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); border-radius: var(--r-sm); }
.toolbar__view.is-active, .toolbar__view:hover { color: var(--primary-700); background: var(--primary-50); }
.toolbar__view svg { width: 16px; height: 16px; }
.toolbar__sort { display: inline-flex; align-items: center; gap: 8px; }
.toolbar__sort select { border: 0; background: transparent; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font-size: 13px; background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); color: var(--text-secondary); }
.chip:hover { border-color: var(--primary-500); color: var(--primary-700); }
.chip.is-active { border-color: var(--primary-700); color: var(--primary-700); }

.pager { display: flex; align-items: center; gap: 6px; justify-content: center; margin: var(--sp-8) 0; flex-wrap: wrap; }
.pager a, .pager span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: var(--r-md); font-size: 13px; color: var(--text-secondary); background: #fff; }
.pager a:hover { border-color: var(--primary-500); color: var(--primary-700); }
.pager .is-active { background: var(--primary-700); color: #fff; border-color: var(--primary-700); }
.pager .is-dots { border: 0; background: none; }
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* -------------------- 11. Карточки товара ----------------------------- */
/* 11a. Строка (список — вид по умолчанию, как на старом сайте) */
.product-list { display: flex; flex-direction: column; gap: var(--sp-4); }
/* minmax(0,…) обязателен: обычный 1fr не сжимается ниже содержимого — длинные названия
   товаров распирали сетку и на узких экранах страница ехала вбок (найдено 24.09.2026). */
.product-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--sp-6); align-items: center; padding: var(--sp-5); border: 1px solid var(--border-light); background: #fff; transition: box-shadow var(--t-base); }
.product-row > * { min-width: 0; }
.product-row__title, .product-row__props li { overflow-wrap: anywhere; }
.product-row:hover { box-shadow: var(--shadow-sm); }
.product-row__media { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; background: #fff; }
.product-row__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-row__title { font-size: 15px; font-weight: 500; color: var(--text-primary); display: block; margin-bottom: 8px; }
.product-row__title:hover { color: var(--primary-700); }
.product-row__avail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.product-row__avail svg { width: 14px; height: 14px; stroke: var(--status-success); }
.product-row__props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--sp-6); list-style: none; font-size: 12px; color: var(--text-secondary); }
.product-row__props li::before { content: '•'; color: var(--primary-700); margin-right: 8px; }
.product-row__props a { color: var(--primary-700); }
.product-row__price { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.product-row__cta { text-align: right; }

/* 11b. Плитка (сетка на странице бренда / похожие) */
.grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border: 1px solid var(--border-light); background: var(--border-light); grid-auto-rows: 1fr; }
.grid-products--gap { gap: var(--sp-4); border: 0; background: none; }
.product-card { display: flex; flex-direction: column; background: #fff; padding: var(--sp-4); outline: 1px solid var(--border-light); }
.grid-products--gap .product-card { outline: 0; border: 1px solid var(--border-light); }
.product-card__media { height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.product-card__media img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform var(--t-base); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__title { font-size: 14px; font-weight: 400; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.product-card__title:hover { color: var(--primary-700); }
.product-card__avail { font-size: 12px; color: var(--status-success); display: inline-flex; align-items: center; gap: 6px; }
.product-card__avail::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--status-success); }
.product-card__brand { font-size: 12px; color: var(--text-tertiary); margin-top: auto; padding-top: 8px; }
.product-card__cta { margin-top: var(--sp-3); }

/* -------------------- 12. Страница товара ----------------------------- */
.product { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--sp-10); align-items: start; margin-bottom: var(--sp-10); }
.product__gallery { display: flex; align-items: center; justify-content: center; min-height: 360px; border: 1px solid var(--border-light); background: #fff; padding: var(--sp-6); }
.product__gallery img { max-height: 380px; object-fit: contain; }
.product__gallery--empty img { width: 120px; opacity: .3; }
.product__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-5); }
.product__brand-logo { max-height: 56px; max-width: 160px; object-fit: contain; }
.product__avail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-bottom: var(--sp-4); }
.product__avail svg { width: 14px; height: 14px; stroke: var(--status-success); }
.product__price { font-size: 26px; font-weight: 700; margin-bottom: var(--sp-4); }
.product__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.product__props { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--sp-6); font-size: 13px; }
.product__props li::before { content: '•'; color: var(--primary-700); margin-right: 8px; }
.product__props a { color: var(--primary-700); }
.product__sku { font-size: 12px; color: var(--text-tertiary); margin-bottom: var(--sp-3); }
.product__all-props { display: inline-block; margin-top: var(--sp-3); font-size: 13px; color: var(--primary-700); border-bottom: 1px dotted var(--primary-700); }

.spec-table { border: 1px solid var(--border-light); }
.spec-table th, .spec-table td { text-align: left; padding: 12px 16px; font-size: 13px; vertical-align: top; }
.spec-table th { font-weight: 400; color: var(--text-secondary); width: 40%; }
.spec-table tr:nth-child(odd) { background: var(--bg-stripe); }
.spec-table a { color: var(--primary-700); }
.product__desc { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin-top: var(--sp-6); }
.product__desc p + p { margin-top: 10px; }

/* Серый блок «Обратная связь» с большим «?» */
.consult { position: relative; display: grid; grid-template-columns: 220px 1fr auto; gap: var(--sp-6); align-items: center; padding: var(--sp-8) var(--sp-8); background: var(--bg-subtle); overflow: hidden; margin: var(--sp-8) 0; }
.consult__q { position: absolute; left: 60px; top: -30px; font-size: 180px; font-weight: 700; color: rgba(0,0,0,.05); line-height: 1; pointer-events: none; }
.consult__title { font-size: 22px; font-weight: 400; position: relative; }
.consult__text { font-size: 13px; color: var(--text-secondary); border-left: 2px solid var(--primary-700); padding-left: var(--sp-5); }

/* -------------------- 13. Главная ------------------------------------- */
.hero { position: relative; padding: 90px 0 100px; overflow: hidden; background: #f3f5f7; }
.hero__bg { position: absolute; inset: 0; background: url('/img/hero-bg.jpg') center/cover no-repeat, #f3f5f7; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 100%); }
.hero__inner { position: relative; max-width: 1080px; }
.hero__title { font-size: 42px; font-weight: 700; line-height: 1.15; color: #111; margin-bottom: var(--sp-6); }
.hero__text { font-size: 15px; line-height: 1.6; color: #222; max-width: 1080px; margin-bottom: var(--sp-8); }

.advantages { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-8); text-align: center; }
.advantage__icon { width: 48px; height: 48px; margin: 0 auto var(--sp-4); }
.advantage__icon svg { width: 48px; height: 48px; stroke: var(--primary-700); fill: none; stroke-width: 1.4; }
.advantage__title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.advantage__text { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }

.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border-light); background: var(--border-light); gap: 1px; }
.cat-tile { background: #fff; padding: var(--sp-8) var(--sp-4) var(--sp-6); text-align: center; color: var(--text-primary); transition: box-shadow var(--t-base); position: relative; }
.cat-tile:hover { box-shadow: var(--shadow-md); z-index: 1; color: var(--primary-700); }
.cat-tile__img { height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.cat-tile__img img { max-height: 100%; max-width: 70%; object-fit: contain; }
.cat-tile__name { font-size: 14px; font-weight: 500; }
.cat-tile__count { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

.feedback { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.feedback__photo { background: url('/img/feedback-picture.png') center bottom / auto 100% no-repeat, url('/img/feedback-bg.jpg') center / cover no-repeat, var(--primary-100); }
.feedback__panel { background: var(--primary-700); color: #fff; padding: var(--sp-16) 10% var(--sp-12); display: flex; flex-direction: column; justify-content: center; }
.feedback__title { font-size: 40px; font-weight: 700; margin-bottom: var(--sp-8); }

.map-block { position: relative; min-height: 460px; background: var(--bg-muted); }
.map-block iframe { width: 100%; height: 460px; border: 0; display: block; }
.map-card { position: absolute; left: 80px; top: 60px; width: 300px; background: #fff; padding: var(--sp-8); box-shadow: var(--shadow-md); }
.map-card h3 { font-size: 22px; font-weight: 400; margin-bottom: var(--sp-5); }
.map-card dl { margin: 0; }
.map-card dt { font-size: 11px; color: var(--text-tertiary); margin-top: var(--sp-3); }
.map-card dd { margin: 2px 0 0; font-size: 14px; }

/* Синяя полоса «Нужна консультация?» */
.cta-band { background: var(--primary-700); color: #fff; padding: var(--sp-6) 0; position: relative; overflow: hidden; margin-top: var(--sp-16); }
.cta-band__row { display: grid; grid-template-columns: 240px 1fr auto; gap: var(--sp-8); align-items: center; position: relative; }
.cta-band__title { font-size: 22px; font-weight: 700; line-height: 1.2; position: relative; }
.cta-band__q { position: absolute; left: 90px; top: -55px; font-size: 150px; font-weight: 700; color: rgba(255,255,255,.08); line-height: 1; pointer-events: none; }
.cta-band__text { font-size: 15px; font-weight: 500; }

/* -------------------- 14. Бренды -------------------------------------- */
.brand-head { display: grid; grid-template-columns: 1fr 160px; gap: var(--sp-8); align-items: start; margin-bottom: var(--sp-8); }
.brand-head__text { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.brand-head__logo { border: 1px solid var(--border-light); padding: var(--sp-3); display: flex; align-items: center; justify-content: center; height: 90px; background: #fff; }
.brand-head__logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.section-h2 { font-size: 22px; font-weight: 400; margin: var(--sp-8) 0 var(--sp-4); }
.brand-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--border-light); background: var(--border-light); }
.brand-cats a { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: #fff; font-size: 15px; outline: 1px solid var(--border-light); }
.brand-cats a:hover { color: var(--primary-700); background: var(--primary-50); }
.brand-cats img { width: 40px; height: 40px; object-fit: contain; opacity: .8; }
.brand-cats .n { margin-left: auto; font-size: 12px; color: var(--text-tertiary); }

.alphabet { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-6); }
.alphabet a, .alphabet span { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: var(--r-sm); font-size: 12px; color: var(--text-secondary); }
.alphabet a:hover, .alphabet .is-active { background: var(--primary-700); color: #fff; border-color: var(--primary-700); }
.grid-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; border: 1px solid var(--border-light); background: var(--border-light); }
.brand-card { background: #fff; padding: var(--sp-5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); color: var(--text-primary); }
.brand-card:hover { box-shadow: var(--shadow-md); position: relative; z-index: 1; color: var(--primary-700); }
.brand-card__logo { height: 64px; display: flex; align-items: center; justify-content: center; }
.brand-card__logo img { max-height: 100%; max-width: 140px; object-fit: contain; }
.brand-card__fallback { font-size: 26px; font-weight: 700; color: var(--primary-700); }
.brand-card__name { font-size: 14px; font-weight: 500; }
.brand-card__count { font-size: 12px; color: var(--text-tertiary); }

/* -------------------- 15. Контент-страницы ---------------------------- */
.prose { font-size: 14px; line-height: 1.75; color: var(--text-primary); max-width: 900px; }
.prose h2 { font-size: 22px; font-weight: 400; margin: var(--sp-8) 0 var(--sp-4); }
.prose h3 { font-size: 17px; margin: var(--sp-6) 0 var(--sp-3); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { padding-left: 20px; margin-bottom: var(--sp-4); }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--primary-700); }
.prose a { color: var(--primary-700); text-decoration: underline; }
.prose table td, .prose table th { padding: 8px 12px; border: 1px solid var(--border-light); font-size: 13px; }
.prose hr { border: 0; border-top: 1px solid var(--border-light); margin: var(--sp-8) 0; }
.prose--legal { max-width: 960px; }
.prose--legal h2 { font-size: 18px; font-weight: 500; }
.banner-img { width: 100%; height: 300px; object-fit: cover; margin-bottom: var(--sp-8); }
.requisites { display: grid; grid-template-columns: 220px 1fr; gap: 8px var(--sp-6); font-size: 14px; }
.requisites dt { color: var(--text-tertiary); }
.requisites dd { margin: 0; }

/* Контакты */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; box-shadow: var(--shadow-md); padding: var(--sp-6) var(--sp-8); gap: var(--sp-6); margin: -60px var(--sp-8) var(--sp-12); position: relative; }
.contact-card { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-card svg { width: 28px; height: 28px; stroke: var(--text-tertiary); stroke-width: 1.4; flex-shrink: 0; margin-top: 4px; }
.contact-card__label { font-size: 12px; color: var(--text-tertiary); }
.contact-card__value { font-size: 15px; font-weight: 500; }
.office { display: grid; grid-template-columns: 200px repeat(3, 1fr); border: 1px solid var(--border-light); }
.office > div { padding: var(--sp-5); font-size: 13px; }
.office__photo { padding: 0 !important; background: var(--bg-muted) url('/img/office.jpg') center/cover; min-height: 130px; }
.office__label { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }

/* Новости */
.news-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.news-item { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-6); padding: var(--sp-5); border: 1px solid var(--border-light); background: #fff; }
.news-item--noimg { grid-template-columns: 1fr; }
.news-item__img { height: 130px; object-fit: cover; width: 100%; }
.news-item__date { font-size: 12px; color: var(--text-tertiary); margin-bottom: 6px; }
.news-item__title { font-size: 16px; font-weight: 500; }
.news-item__title:hover { color: var(--primary-700); }
.news-item__announce { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }

/* Заглушка для пустых/404 */
.empty { text-align: center; padding: var(--sp-16) var(--sp-4); border: 1px solid var(--border-light); background: #fff; }
.empty h2 { margin-bottom: var(--sp-3); }
.empty p { color: var(--text-secondary); margin-bottom: var(--sp-6); }

/* -------------------- 16. Подвал -------------------------------------- */
.footer { background: var(--bg-subtle); border-top: 1px solid var(--border-light); padding: var(--sp-12) 0 var(--sp-6); font-size: 13px; }
.footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--sp-10); margin-bottom: var(--sp-10); }
.footer h5 { font-size: 14px; font-weight: 700; color: var(--primary-700); margin-bottom: var(--sp-4); }
.footer__list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer__list a { color: var(--text-secondary); }
.footer__list a:hover { color: var(--primary-700); }
.footer__contact { display: flex; flex-direction: column; gap: 8px; color: var(--text-secondary); }
.footer__contact strong { color: var(--text-primary); font-weight: 500; }
.footer__search { display: flex; background: #fff; border: 1px solid var(--border-light); border-radius: var(--r-md); }
.footer__search input { flex: 1; border: 0; background: transparent; padding: 10px 12px; font-size: 13px; outline: none; min-width: 0; }
.footer__search button { width: 40px; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; }
.footer__search button svg { width: 15px; height: 15px; }
.footer__bottom { border-top: 1px solid var(--border-light); padding-top: var(--sp-5); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; color: var(--text-tertiary); font-size: 12px; }
.footer__logo img { height: 28px; }
.footer__legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer__legal a { color: var(--text-secondary); }
.footer__legal a:hover { color: var(--primary-700); }
.footer__requisites { width: 100%; font-size: 12px; color: var(--text-tertiary); line-height: 1.6; }

/* -------------------- 16b. Нижняя панель поиска (только мобильный) ---- */
.bottombar { display: none; }
@media (max-width: 880px) {
    .bottombar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        background: #fff; border-top: 1px solid var(--border-default);
        padding: 8px var(--container-pad);
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    }
    .bottombar__form { display: flex; align-items: center; gap: 8px; position: relative; }
    .bottombar__input {
        flex: 1; min-width: 0; height: 40px; padding: 0 12px;
        background: var(--bg-muted); border: 1px solid var(--border-light);
        border-radius: var(--r-md); font-size: 14px; outline: none;
    }
    .bottombar__input:focus { background: #fff; border-color: var(--primary-500); }
    .bottombar__btn {
        width: 44px; height: 40px; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--primary-700); color: #fff; border-radius: var(--r-md);
    }
    .bottombar__btn svg { width: 17px; height: 17px; }
    /* подсказки раскрываются ВВЕРХ — панель внизу экрана */
    .suggest--up { top: auto; bottom: 100%; margin-bottom: 8px; border-radius: var(--r-md); max-height: 50vh; }
    /* чтобы панель не перекрывала подвал и cookie-бар */
    body { padding-bottom: 58px; }
    .cookie { bottom: calc(58px + 12px); }
}

/* -------------------- 17. Cookie-бар и модалки ------------------------ */
.cookie { position: fixed; left: 24px; bottom: 24px; width: 520px; max-width: calc(100vw - 48px); background: #fff; box-shadow: var(--shadow-lg); padding: var(--sp-6); z-index: 90; }
.cookie h4 { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-3); }
.cookie p { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--sp-4); }
.cookie p a { color: var(--primary-700); }
.cookie__row { display: flex; gap: var(--sp-3); }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-4); }
.modal.is-open { display: flex; }
.modal__box { background: #fff; width: 100%; max-width: 480px; padding: var(--sp-8); position: relative; }
.modal__close { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.modal__close:hover { color: var(--text-primary); }
.modal__title { font-size: 22px; font-weight: 400; margin-bottom: var(--sp-5); }
.form-success { padding: var(--sp-6); background: #e9f7ec; color: #1f6b34; font-size: 14px; }

/* Поисковые подсказки */
.suggest { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border-light); box-shadow: var(--shadow-md); z-index: 60; display: none; max-height: 420px; overflow: auto; }
.suggest.is-open { display: block; }
.suggest__group { padding: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.suggest a { display: block; padding: 8px 14px; font-size: 13px; }
.suggest a:hover { background: var(--primary-50); color: var(--primary-700); }
.suggest small { display: block; color: var(--text-tertiary); font-size: 11px; }

/* -------------------- 18. Адаптив ------------------------------------- */
@media (max-width: 1100px) {
    .advantages { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-cards { grid-template-columns: repeat(2, 1fr); }
    .footer__cols { grid-template-columns: 1fr 1fr; }
    .hero__title { font-size: 34px; }
}
@media (max-width: 880px) {
    :root { --container-pad: 16px; }

    /* Верхняя строка в одну линию: телефон + кнопка звонка.
       Почта скрыта — втроём не помещаются даже на 412px (решение Ксении: «лучше телефон и кнопку»). */
    .topline__row { gap: var(--sp-3); height: 40px; flex-wrap: nowrap; }
    .topline__item:not(.topline__item--phone) { display: none; }
    .topline__item--phone { font-size: 13px; }
    .topline__cta { height: 28px; padding: 0 14px; }

    /* Шапка как на старом сайте: [бургер] [логотип] [лупа].
       Поиск не втиснут в строку (из-за него вёрстка уезжала на 16px),
       а раскрывается строкой под шапкой по кнопке. */
    .header { position: relative; }
    .header__row { height: 56px; gap: var(--sp-2); }
    .header__tagline, .header__phones { display: none; }
    .header__burger { display: inline-flex; order: -1; }
    .header__icon-btn { display: inline-flex; }
    .header__logo { margin-right: auto; }
    .header__logo img { height: 28px; width: auto; }

    .header__search {
        position: absolute; left: 0; right: 0; top: 100%;
        display: none; z-index: 45;
        margin: 0; padding: var(--sp-2) var(--container-pad);
        background: var(--bg-card); border-radius: 0;
        border-top: 1px solid var(--border-light);
        box-shadow: var(--shadow-sm);
    }
    .header__search.is-open { display: flex; }
    .header__search-input { background: var(--bg-muted); border-radius: var(--r-md); }
    .header__search-btn { background: var(--primary-700); color: #fff; border-radius: var(--r-md); margin-left: var(--sp-2); }
    .header__search-btn:hover { color: #fff; }
    .mainnav__list { display: none; flex-direction: column; }
    .mainnav.is-open .mainnav__list { display: flex; }
    .mainnav__item + .mainnav__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
    .mainnav__link { justify-content: flex-start; }
    .catalog-menu { position: static; min-width: 0; box-shadow: none; border: 0; padding: var(--sp-2) 0; background: var(--primary-800); color: #fff; }
    .catalog-menu__grid { grid-template-columns: 1fr; }
    .catalog-menu__link:hover { background: var(--primary-600); color: #fff; }
    .catalog-menu__link img { filter: brightness(0) invert(1); }
    .layout { grid-template-columns: 1fr; }
    .sidebar-cats { display: none; }
    .product { grid-template-columns: 1fr; gap: var(--sp-6); }
    .product-row { grid-template-columns: 100px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); }
    .product-row__media { width: 100px; height: 100px; }
    .product-row__cta { grid-column: 1 / -1; text-align: left; }
    .product-row__props, .product__props { grid-template-columns: 1fr; }
    .hero { padding: 48px 0 56px; }
    .hero__title { font-size: 26px; }
    .advantages { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-tile__img { height: 100px; }
    .feedback { grid-template-columns: 1fr; }
    .feedback__photo { min-height: 260px; }
    .feedback__panel { padding: var(--sp-10) var(--sp-5); }
    .feedback__title { font-size: 28px; }
    .map-card { position: static; width: auto; margin: 0; }
    .map-block iframe { height: 300px; }
    .cta-band__row { grid-template-columns: 1fr; gap: var(--sp-4); }
    .cta-band__q { display: none; }
    .consult { grid-template-columns: 1fr; padding: var(--sp-6); }
    .consult__q { display: none; }
    .brand-head { grid-template-columns: 1fr; }
    .brand-cats { grid-template-columns: 1fr; }
    .contact-cards { grid-template-columns: 1fr; margin: 0 0 var(--sp-8); box-shadow: none; padding: var(--sp-4); border: 1px solid var(--border-light); }
    .office { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .footer__cols { grid-template-columns: 1fr; gap: var(--sp-6); }
    .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; padding: var(--sp-4); }
    .news-item { grid-template-columns: 1fr; }
    .requisites { grid-template-columns: 1fr; gap: 2px; }
    .requisites dd { margin-bottom: 10px; }
    .grid-products { grid-template-columns: repeat(2, 1fr); }
    .product-card__media { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }