@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;font-family:var(--font-body);  }
/* Холст страницы. Было `background:#fff; color:#555; background:#f5f5f5` — два
   объявления background подряд и три значения мимо палитры. Цвет текста #555
   наследовался вообще всем, что не переопределило его само (шапка, .pdp,
   .order-notice), из-за чего «основной» цвет текста на сайте был не один.
   --color-bg-alt (#F7F6F4) вместо #f5f5f5: разница незаметна, но это токен, и
   белые карточки (--color-bg + рамка) на нём читаются как карточки. */
body { background:var(--color-bg-alt); color:var(--color-ink);}

/* Футер прижат к низу вьюпорта, когда контента между шапкой и футером мало
   (жалоба 2026-08-09: "футер подтягивается вверх"), но НЕ перекрывает
   контент, когда его много - обычный document flow, футер просто идёт
   после контента. Flex - на .page-wrap (templates/top.tpl/footer.tpl), а НЕ
   на body: body - родитель ещё и для кука-баннера/масок-оверлеев, и когда
   flex стоял прямо на body, это остановило float у ВСЕХ его прямых детей
   (шапка и т.п. используют .fl/.fr) и вдобавок схлопнуло ширину .goods
   (max-width:1200, но реально рендерилось ~916px) - поймано 2026-08-09 на
   /products/ ("почему эта страница не по ширине хэдера"). .page-wrap уже
   обычный вложенный блок, а не прямой ребёнок body - его собственные дети
   (шапка/контент/футер) ничего не теряют.
   .newFooter margin-top:auto - в footer.css, рядом с остальными его
   отступами (.newFooter грузится последним и там и должен побеждать): на
   flex-контейнере это забирает всё свободное место ПЕРЕД последним
   элементом, независимо от того, сколько у него соседей.
   ВАЖНО: height:100% (а не min-height) здесь один раз уже ловилась как баг -
   элемент получает фиксированную высоту ровно во вьюпорт, и когда контент
   выше вьюпорта, скролл всей страницы переставал работать
   (window.scrollTo переставал что-либо двигать - поймано 2026-08-09 на
   мобильной ширине). min-height растягивает, но никогда не обрезает. */
.page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
/* align-items:stretch (дефолт) ДОЛЖЕН растягивать детей на всю ширину
   по спеке, но на практике для width:auto блоков, содержащих внутри grid
   (.icon-grid) или flex с flex-wrap (.service-cta), браузер вместо stretch
   иногда считает ширину по контенту - .goods (max-width:1200; margin:auto)
   схлопывался до ~916px вместо 1200 (жалоба 2026-08-09: "/products/ не по
   ширине хэдера"). width:100% на каждого прямого ребёнка .page-wrap решает
   надёжно для всех них разом (шапка/#cart/панели/футер), не только для
   .goods - сам max-width/margin:auto по-прежнему кадрирует и центрирует
   поверх этих 100%, ничего не меняя в остальной вёрстке. */
.page-wrap > * { width: 100%; }
td,th,caption {}
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
a { color:var(--color-ink); text-decoration:none;}
a:hover { text-decoration:none; }
img { border:none; }
ol,ul,li { list-style:none;}
input, textarea, select, button { }
table { border-collapse:collapse;}
html {overflow-y: scroll;}
.fl{float: left;}
.fr{float: right;}
select{border-radius:0 ;cursor:pointer;} //beeled
label input{cursor:pointer;}
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { 
zoom:1; 
padding: 0 0px;
}
/* css common end */
/* before login */
//.wrap{width:1280px;margin:0 auto;}
.wrap{
width: 100%; 
display: block; 

}

/*------------------home-header-----------------------*/
.home-header{background:#fff;border-bottom:1px solid var(--color-border);}
/* Верхней служебной полосы (.home-header-link) больше нет: она давала лишнюю
   горизонтальную линию и держала две ссылки, которым там было не место.
   «Рассчитать печатную плату» переехало блоком на страницу /prod/,
   «Нужна помощь?» — в подвал. Телефон живёт в подвале и на /cont/:
   в строке шапки он спорил с логотипом и корзиной. */
.home-header-cont{
    display:flex;
    align-items:center;
    /* Единый шаг между всеми элементами строки: логотип, меню, правый блок.
       Раньше здесь было 16px, в меню 24px, в правом блоке 24px - шаг «плавал». */
    gap:var(--space-6);
    min-height:84px;
    /* 1200, а не 1280: контент (.goods/.pdp/.contact) и подвал (.newFooter .m)
       ограничены 1200, и при 1280 строка шапки шла по своей сетке — логотип
       начинался на 40px левее заголовка страницы под ним. Минимальная ширина
       строки после удаления «Продукции» — 1025px, запас остаётся. */
    max-width:1200px;
    /* без нижнего margin: он оставлял 32px пустоты между строкой шапки и её
       собственной нижней рамкой. Отбивку контента задаёт padding у .goods */
    margin:0 auto;
    padding:0 var(--space-5);
}
/* these containers still carry .clearfix from the float era; inside a flex
   container its :before/:after become real flex items and add phantom gaps */
.home-header-cont::before,.home-header-cont::after,
.homeheader-r > ul::before,.homeheader-r > ul::after,
.homeheader-r #frameLogin::before,.homeheader-r #frameLogin::after,
.home-header-cont .menu::before,.home-header-cont .menu::after{
    display:none;
}
/* flex, а не block: inline-flex внутри блока садится на текстовый baseline и
   добавляет снизу ~6px под выносные элементы — из-за этого знак с названием
   уезжали выше центра гамбургера */
/* Визуальный порядок строки — логотип, каталог+ссылки как одна группа
   плоских текстовых пунктов, затем поиск+корзина+вход прижаты к правому краю
   отдельной группой (см. референсы: логотип слева, весь nav одним рядом без
   рамок, иконки действия справа отдельным кластером). Порядок задаётся через
   order, а не переписыванием шаблона. */
.home-header-cont .logo{order:1;flex:0 0 auto;display:flex;align-items:center;}
.home-header-cont .navHead{order:3;}
.home-header-cont #sb-search{order:4;margin-left:auto;}
.home-header-cont .homeheader-r{order:5;}
.home-header-cont .logo-link{
    display:inline-flex;
    align-items:center;
    gap:var(--space-3);
    text-decoration:none;
}
/* Знак — в один размер с кнопкой-гамбургером. 40px, а не 32: внутри SVG сверху
   оставлено место под усики, поэтому тело коровки занимает ~80% высоты бокса и
   при 32px читалось заметно мельче красного квадрата. */
.home-header-cont .logo-mark{
    flex:0 0 auto;
    width:40px;
    height:40px;
    display:block;
    /* Оптическая центровка. В viewBox сверху зарезервировано место под усики:
       при размере 40px центр тела коровки лежит на 3.85px ниже центра бокса,
       поэтому поднимаем знак на 4px — тогда тело совпадает по центру с
       гамбургером и с заглавными в названии. */
    transform:translateY(-4px);
}
.home-header-cont .logo-word{
    font-family:var(--font-heading);
    /* 30px даёт высоту заглавных примерно в размер знака (32px) */
    font-size:30px;
    font-weight:700;
    line-height:1;
    letter-spacing:.03em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--color-ink);
}
.home-header-cont .logo-link:hover .logo-word{color:var(--color-brand-red);}
.home-header-cont .logo-link:focus-visible{outline:2px solid var(--color-ink);outline-offset:4px;border-radius:2px;}
/* must not shrink: the menu links are nowrap, so shrinking .navHead would let
   them spill out from under it and collide with the search box */
.home-header-cont .navHead{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    /* "Каталог" с 2026-08-08 - обычный <li> внутри .menu (был подписью
       гамбургера, удалён вместе со шторкой), поэтому зазоры в ряду теперь
       задаёт один и тот же gap у .menu - подгонять два значения не нужно. */
    gap:var(--space-6);
    position:relative;
}
.home-header-cont .navHead .menu{display:flex;align-items:center;gap:var(--space-6);flex:0 0 auto;}
.home-header-cont .navHead li{position:relative;}
.home-header-cont .navHead li.active a,.home-header-cont .navHead li a:focus{text-decoration:none;}
.home-header-cont .navHead li a{
    display:block;
    color:var(--color-ink);
    font-family:var(--font-heading);
    font-size:15px;
    font-weight:600;
    letter-spacing:.02em;
    white-space:nowrap;
    transition:color var(--transition-fast);
}
.home-header-cont .navHead li a:hover{color:var(--color-brand-red);}
/* Поиск лежит в строке шапки, но вне .navHead — иначе при росте поля он
   перекрывал пункт «КОНТАКТЫ» */
.home-header-cont #sb-search{
    flex:0 0 auto;
}

/* Search/cart/account each sit in their own 40px box (comfortable click
   target, matches what search already had), so a chunk of that box is
   invisible padding around the 20px glyph inside it. The row's general
   --space-6 gap is meant for the nav rhythm (logo/Каталог/О компании/...)
   - stacked on top of two 40px boxes it read as a much bigger gap than
   intended once the boxes' own padding is added in. Pull this cluster in
   to its own tighter --space-3 rhythm instead; #sb-search still has
   margin-left:auto (below) pushing the whole cluster to the right, that
   part is unaffected. */
.homeheader-r{
    flex:0 0 auto;
    margin-left:calc(var(--space-3) - var(--space-6));
}
.homeheader-r > ul{display:flex;align-items:center;gap:var(--space-3);}
.homeheader-r li{display:flex;align-items:center;}
.homeheader-r li a{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    font-family:var(--font-body);
    font-size:13px;
    line-height:1.4;
    color:var(--color-ink-soft);
    white-space:nowrap;
    transition:color var(--transition-fast);
}
.homeheader-r li a:hover{color:var(--color-brand-red);}
.homeheader-r li a:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px;border-radius:2px;}
/* login/logout state renders its label inside an <i>, which would come out italic */
.homeheader-r i{font-style:normal;display:inline-flex;align-items:center;gap:var(--space-2);}
.homeheader-r .customer_login{gap:var(--space-3);}
.homeheader-r .exitlogin{cursor:pointer;}
.homeheader-r li em{display:inline-block;margin:0 var(--space-3);}
.homeheader-r li.active{position: relative;}

/* Иконки в правом блоке: обводка, а не заливка — один стиль на телефон,
   корзину и вход */
.homeheader-r svg{
    flex:0 0 auto;
    /* Cart's inline width/height is 20, login's is 18 (top.tpl) - CSS
       width/height wins over the HTML attribute, so this is the one place
       that actually decides the rendered size; force both to match. */
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Корзина и вход — один визуальный вес: обе иконки-действия в правом блоке.
   Раньше корзина была Rubik'ом основным цветом, а вход Nunito'м приглушённым. */
.header-cart .header-cart-link,
.homeheader-r .customer_name{
    color:var(--color-ink);
    font-family:var(--font-heading);
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
}
.header-cart .header-cart-link:hover,
.homeheader-r .customer_name:hover{color:var(--color-brand-red);}
/* Заглавные только у гостевого «Вход»: имя залогиненного покупателя капсом не пишем */
.homeheader-r .pe-7s-lock{text-transform:uppercase;}
/* «Выход» остаётся второстепенным действием */
.homeheader-r .exitlogin{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:400;
    letter-spacing:0;
    color:var(--color-ink-soft);
}

/* Cart and guest-login read as plain icons now, no visible text label next
   to either (aria-label carries the accessible name) - every reference site
   (ORBITA/RBW/minim/Binford) keeps this cluster icon-only, ours still had
   bold "КОРЗИНА"/"ВХОД" text reading as two more nav items. Logged-in
   customer's name and "Выход" stay as real text - that's meaningful state,
   not a redundant label. */
.header-cart-text,
.homeheader-r .pe-7s-lock span{
    display:none;
}
/* Same 40x40 centered box as the search button (style.css .sb-search-submit)
   so all three glyphs (search/cart/account) sit the same distance from the
   header's gap on every side - a plain bare 20px glyph next to a 40px
   padded button lines up the BOXES evenly but not the glyphs themselves.
   Only the guest-state icon (.pe-7s-lock), not .customer_name as a whole -
   the logged-in state shows the customer's actual name there and needs to
   stay content-sized, not pinned to an icon-sized box. */
.header-cart-link,
.homeheader-r .pe-7s-lock{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    box-sizing:border-box;
}
.header-cart{position:relative;gap:0;}
.homeheader-r #cartNumber{
    position:absolute;
    /* These were tuned for .header-cart-link as a bare 20px icon (no
       padding, box == glyph). It's now a 40px box with the glyph centered
       inside (10px inset every side) - anchoring to the same top/right
       values anchors to the much bigger invisible box instead of the
       actual glyph, so the badge visibly drifted away from the icon.
       +10px on each to land back on the glyph's own corner, same as before. */
    top:4px;
    right:1px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    margin:0;
    padding:0 4px;
    font-family:var(--font-heading);
    font-size:11px;
    font-weight:500;
    line-height:1;
    color:#fff;
    background:var(--color-brand-red);
    border-radius:999px;
    box-shadow:0 0 0 2px #fff;
}
.homeheader-r #cartNumber:hover{color:#fff;}

/* Боковая шторка каталога удалена 2026-08-08 (решение заказчицы: плохо с точки
   зрения UX). Раньше ниже 1024px .navHead скрывался целиком и ВСЯ навигация
   уходила в шторку - теперь её нет, поэтому меню обязано остаться на экране:
   ниже 1024px оно переезжает на свою строку под логотипом и переносится по
   словам, если не помещается. Пункты остаются обычными ссылками - никаких
   скрытых уровней, всё видно сразу (для четырёх коротких пунктов гамбургер и
   не нужен).
   .nav - старый JS-дубль тех же ссылок (responsive-menu.js), по-прежнему скрыт:
   показывать оба списка сразу нельзя, а удалять дубль - отдельная задача. */
@media (max-width:1024px){
    .home-header-cont{flex-wrap:wrap;}
    .home-header-cont .navHead{
        order:6;              /* последней строкой, под логотипом и поиском */
        flex:1 1 100%;
        /* nowrap на ссылках оставляем (не рвём слова внутри пункта), а сам
           список переносим целиком */
        flex-wrap:wrap;
    }
    /* flex:1 1 auto + min-width:0 обязательны: в базовом правиле у .menu стоит
       flex:0 0 auto (список сайзится по контенту и не сжимается) - только с
       flex-wrap он не переносится, а вылезает за экран, обрезая последний
       пункт. Проверено на 375px: без этих двух строк горизонтальный скролл. */
    .home-header-cont .navHead .menu{
        flex:1 1 auto;
        min-width:0;
        flex-wrap:wrap;
        gap:var(--space-3) var(--space-5);
    }
    .home-header-cont .navHead .nav{display:none;}
}
/* narrow screens: the row splits into bands -
   [burger + logo] / [поиск] / [корзина + вход] */
@media (max-width:620px){
    .home-header-cont{
        flex-wrap:wrap;
        gap:var(--space-3);
        min-height:0;
        padding:var(--space-3) var(--space-4);
    }
    .home-header-cont .logo{margin-right:auto;}
    .home-header-cont .logo-mark{width:34px;height:34px;}
    .home-header-cont .logo-word{font-size:22px;}
    /* Первая строка: каталог + логотип + корзина и вход. Поиск уходит на вторую —
       ему нужна вся ширина, а корзина и вход должны оставаться на уровне логотипа. */
    /* Специфичность .home-header-cont .homeheader-r (order:5, базовое правило)
       выше одиночного .homeheader-r - без префикса order:1 тут молча проигрывал
       и блок уезжал под поиск/меню несмотря на комментарий выше. */
    .home-header-cont .homeheader-r{order:1;width:auto;margin-left:0;}
    .homeheader-r > ul{justify-content:flex-end;gap:var(--space-4);}
    .home-header-cont #sb-search{order:2;flex:1 1 100%;min-width:0;max-width:none;margin-left:0;}
    /* No hover on touch, so the hover-to-expand trick from the desktop rule
       (style.css) would leave the field permanently collapsed here - force it
       open instead, same as before this change. */
    .home-header-cont #sb-search form{width:100%;background:var(--color-bg-alt);border-color:var(--color-border);padding:0 var(--space-1) 0 var(--space-4);}
    .home-header-cont #sb-search .sb-search-input{width:auto;opacity:1;}
}
/* Совсем узкие экраны: в первой строке остаются только иконки и логотип */
@media (max-width:480px){
    .home-header-cont .logo-word{font-size:20px;}
    .home-header-cont .logo-mark{width:30px;height:30px;}
}@media (prefers-reduced-motion: reduce){
    .homeheader-r li a,.home-header-cont .navHead li a{transition:none;}}
//.bannerbox, .home-header, .footerWidth {  min-width: 1280px;  }
.bannerbox, .home-header, .footerWidth { 
width: 100%; 
display: block; 

}
/* .nav_home (фон-иконка + красное подчёркивание) удалён: в разметке это
   id="nav_home" (templates/top.tpl), а селектор был по классу — правило не
   срабатывало никогда, а картинки ../images/home-navicon...png в проекте нет.
   .icon{vertical-align:middle} удалён: он конфликтовал с плиткой каталога
   .icon из style.css (см. ниже про иконочный шрифт).
   .red{color:red!important} удалён: чистый red мимо палитры, нигде не
   используется, а !important мешал бы перекрыть его токеном. */
.relative{position: relative;}
.newFooter{
margin-bottom: 0px;
float:left;
width:100%;
}

/*------------------footer-----------------------*/
.footer{margin-top:40px;background:var(--color-bg);padding:20px 0;}
.footer h2{font-size:14px;color:var(--color-ink);font-weight:bold;line-height:40px;}

/* Общая подложка-затемнение выезжающих панелей. Собственные подложки у панелей
   свои (.mask-menu / .mask-login / .mask-consultant, см. panel-*.css). */
.mask{width:100%;height: 100%;position:fixed;top:0;left:0;right: 0;bottom:0;background:#000;opacity: 0.2;
    filter:alpha(opacity=0.2);display: none;  z-index:999;}

/* Ниже удалён мёртвый код из чужого шаблона (проверено grep -a по проекту):
   - .submit / .submit .save — кнопка снятого блока выбора страны и валюты
     (TZ.md, раздел 8), несла оранжевый #ec7612 мимо палитры;
   - @font-face 'iconfont' — файлов ../fonts/iconfont.* в проекте нет;
   - .icon{width:1em;...;font-size:24px} того же иконочного шрифта — этот
     селектор совпадал с плиткой каталога .icon из style.css и подмешивал ей
     overflow:hidden и fill:currentColor;
   - .submenu — разметки с таким классом нет, правила несли свои #2b2b2b и
     голубой #e9f3ff мимо палитры;
   - селектор из битых байтов с NUL внутри — из-за него `file` считал
     layout.css бинарным («data»), а не текстом. */
::-webkit-scrollbar {
    height:15px;
    background-color: rgba(255,255,255,.3);
}
.nav > li > a{color:var(--color-ink);}

.nav li a span.fr{padding-top:2px;}

.page{text-align:center;}
.clearfix-li{
    position: relative;
}
.clearfix-li .clearfix-a1{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-brand-red);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    margin-right: var(--space-2);
}
/*pcb*/
.ver{vertical-align: middle;}

a:link,a:hover,a:visited,a:active{text-decoration: none;}
/* Плашка о cookie (templates/footer.tpl). Была из чужого шаблона: голубые
   #069BFF / #04B3FF / #00ECFF мимо палитры, 12px текст, фиксированная ширина
   750px и float — на узких экранах она рвалась. Теперь: поверхность и рамка
   те же, что у карточек сайта, кнопка — тех же правил, что остальные кнопки
   (44px, Rubik 600, --radius-sm). */
.cookieNote {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    display: none;
}

.cookieNote .w1280 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}

.cookieNote p {
    flex: 1 1 420px;
    min-width: 0;
    width: auto;
    margin: 0;
    color: var(--color-ink-soft);
}

.cookieNote p a {
    color: var(--color-brand-red);
    border-bottom: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookieNote p a:hover,
.cookieNote p a:focus-visible {
    color: var(--color-brand-red-dark);
}

.cookieNote p a:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
    border-radius: 2px;
}

.cookieNote .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--color-brand-red);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.cookieNote .btn:hover {
    background: var(--color-brand-red-dark);
}

.cookieNote .btn:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cookieNote .btn { transition: none; }
}

.relative{position: relative;}