/* Montserrat у нас (16.09.2026): переменный шрифт, один файл на все
   начертания 400–800, делится на наборы знаков. ₽ лежит в latin-ext. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/montserrat-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Значения сняты с текущего сайта: цвет #2196e0, Montserrat, скругления 3px.
   Колонка 1408px с отступом 30px — внутри те же 1348px, что и на образце.
   Базовый кегль 15/25: раньше стоял 14/1.5, и весь сайт выглядел мельче
   образца. Вёрстка своя — код шаблона Aspro не переносится. */
:root{
  --blue:#2196e0; --blue-hover:#3ca3e4; --blue-active:#1e94de;
  --ink:#333; --ink-strong:#222; --muted:#999; --muted-2:#777;
  --rule:#ececec; --rule-2:#eee; --bg:#fafafa; --bg-2:#f8f8f8;
  --dark:#333; --page:1408px; --pad:30px; --gap:32px; --r:3px;
}
*{box-sizing:border-box}
/* Скрытый атрибутом элемент обязан прятаться: у .fld-line и подобных задан
   свой display, и он перебивал hidden — поле «Километров от КАД» оставалось
   на виду при доставке по городу. */
[hidden]{display:none !important}
/* Заголовок страницы, скрытый от глаз, но не от поисковиков: на контентных
   страницах он повторяет хлебные крошки и только отодвигает текст вниз. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
         overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{margin:0;font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-size:15px;
     line-height:25px;color:var(--ink);background:#fff}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover)}
h1,h2,h3{color:var(--ink-strong);font-weight:700;line-height:1.2;margin:0 0 16px}
h1{font-size:32px;margin:6px 0 10px}
h2{font-size:28px;line-height:36px;margin:0 0 22px}
h3{font-size:18px}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--pad)}
.stage-bar{background:#dc130d;color:#fff;text-align:center;font-size:13px;padding:7px 20px}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
     stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- шапка */
.head-top{padding:20px 0 16px}
.head-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.head-left{display:flex;align-items:center;gap:18px;min-width:0}
.head-right{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.city{font-size:13px;color:var(--ink);white-space:nowrap;cursor:pointer;position:relative}
.city>b{font-weight:400}
/* Стрелка у города нужна только без переключателя: у переключателя
   своя, и раньше их было видно две (владелец заметил 20.09.2026). */
.city--plain::after{content:"▾";margin-left:5px;color:var(--muted)}
.city .drop{left:auto;right:auto;min-width:180px}
.city:hover .drop{display:block}
.search{position:relative;flex:1;min-width:150px;max-width:340px}
.search input{width:100%;border:1px solid var(--rule);border-radius:var(--r);
              padding:12px 42px 12px 15px;font:inherit;font-size:13px}
.search input:focus{outline:none;border-color:#cfe4f5}
.search button{position:absolute;right:2px;top:2px;bottom:2px;width:38px;border:0;
               background:none;color:var(--muted);cursor:pointer;display:flex;
               align-items:center;justify-content:center}
.logo{display:block;flex:none;position:relative}
/* На тёмных снимках синий логотип и тёмные надписи пропадают, поэтому у таких
   слайдов шапка переключается на белый вариант. Какой слайд тёмный — считает
   команда fit_slide_theme по яркости самой картинки, а не на глаз. */
/* Специфичность важна: правило .logo img задаёт display:block, поэтому
   прятать вариант логотипа нужно селектором не слабее. */
.logo img.logo-white{display:none}
.head-light .logo img.logo-color{display:none}
.head-light .logo img.logo-white{display:block}
.head-light .phone,.head-light .city,.head-light .city>b,.head-light .enter{color:#fff}
.head-light .city::after,.head-light .phone::after{color:rgba(255,255,255,.75)}
.head-light .enter .ico{color:#fff}
.logo img{height:51px;width:auto;display:block}
.phone-box{position:relative}
.phone{font-size:16px;font-weight:700;color:var(--ink-strong);white-space:nowrap;cursor:pointer}
.phone-box.has-more .phone::after{content:"▾";margin-left:7px;color:var(--muted);font-size:13px;font-weight:400}
.phone-box:hover .drop{display:block}
/* Список номеров узкий: ширина общего выпадающего меню оставляла
   пустое место справа, а мелкий шрифт читался как подпись. */

.enter{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
       color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
.enter .ico{color:var(--muted);width:20px;height:20px}

/* ----------------------------------------------------------------- меню */
.nav{background:var(--blue);position:relative;z-index:60}
.nav-in{display:flex;align-items:stretch}
.nav-in>a,.nav-item>a{color:#fff;text-transform:uppercase;font-size:14px;
    font-weight:700;padding:17px 18px;letter-spacing:.03em;white-space:nowrap;
    display:flex;align-items:center;gap:10px}
.nav-in>a:first-child,.nav-item:first-child>a{padding-left:0}
.nav-in>a:hover,.nav-item:hover>a{background:var(--blue-active);color:#fff}
.nav-item{position:relative}
/* Мега-меню тянется на всю ширину полосы, поэтому его пункт не должен
   создавать систему координат — иначе выпадающий блок вылезает за экран. */
.nav-item.wide{position:static}
.nav-more>a{cursor:pointer}
.nav-more .drop{left:auto;right:0}
.nav-more .drop>a,.nav-more .drop>.nav-item>a{display:block;padding:10px 22px;
    color:var(--ink);font-size:13.5px;text-transform:none;font-weight:400;
    letter-spacing:0;white-space:nowrap}
.nav-more .drop>.nav-item .drop{display:none !important}
.nav-more:hover .drop{display:block}
.burger{display:grid;grid-template-columns:repeat(3,3px);gap:2.5px}
.burger span{width:3px;height:3px;background:#fff;border-radius:1px}
.nav-icons{margin-left:auto;display:flex;align-items:center}
.nav-icons a{color:#fff;padding:17px 12px;display:flex;align-items:center;gap:7px}
.nav-icons a:hover{background:var(--blue-active)}
.nav-icons .cnt{background:#fff;color:var(--blue);border-radius:10px;min-width:20px;
                height:20px;line-height:20px;text-align:center;font-size:11px;
                font-weight:700;padding:0 6px}

.drop{position:absolute;top:100%;left:0;background:#fff;border-radius:0 0 var(--r) var(--r);
      box-shadow:0 8px 26px rgba(0,0,0,.14);min-width:215px;padding:10px 0;display:none;
      z-index:70}
.nav-item:hover .drop{display:block}
.drop a{display:block;padding:10px 22px;color:var(--ink);font-size:13.5px;white-space:nowrap}
.drop a:hover{color:var(--blue);background:var(--bg)}

.mega{position:absolute;top:100%;left:0;right:0;background:#fff;
      box-shadow:0 12px 30px rgba(0,0,0,.16);padding:26px 0 30px;display:none;z-index:70}
.nav-item.wide:hover .mega{display:block}
.mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px}
.mega-in a{display:flex;gap:13px;align-items:center;color:var(--ink);font-size:13.5px;
           line-height:1.35;padding:6px 0}
.mega-in a:hover{color:var(--blue)}
.mega-in img{width:52px;height:44px;object-fit:contain;flex:none}

/* ------------------------------------------------------- липкая шапка */
.sticky{position:fixed;top:0;left:0;right:0;background:#fff;z-index:80;
        box-shadow:0 2px 10px rgba(0,0,0,.10);transform:translateY(-100%);
        transition:transform .18s ease}
.sticky.on{transform:none}
.sticky-in{display:flex;align-items:center;gap:20px;
           padding:11px var(--pad)}
.sticky .logo img{height:30px;width:auto}
.sticky .search{max-width:none}
.sticky .phone{font-size:16px}
.sticky-icons{display:flex;align-items:center;gap:4px;margin-left:auto}
.sticky-icons a{display:flex;align-items:center;gap:6px;color:var(--muted-2);padding:6px 8px}
.sticky-icons a:hover{color:var(--blue)}
.sticky-icons .cnt{background:var(--blue);color:#fff;border-radius:10px;min-width:19px;
                   height:19px;line-height:19px;text-align:center;font-size:11px;
                   font-weight:700;padding:0 6px}
.hamb{display:grid;gap:4px;cursor:pointer;flex:none;
      align-content:center;padding:4px 2px}
.hamb:hover i{background:var(--blue)}
.hamb i{width:19px;height:2px;background:var(--ink);border-radius:1px;display:block}
.hamb i:nth-child(2){width:14px}

/* -------------------------------------------------------------- крошки */
.crumbs{font-size:15px;line-height:25px;color:#555;padding:0 0 18px}
.crumbs a{color:#555}
.crumbs>*+*::before{content:"—";margin:0 9px;color:var(--rule)}
.page-head{padding-top:26px}

/* --------------------------------------------------------------- макет */
.layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:44px;
        padding-bottom:56px}
.layout--full{grid-template-columns:minmax(0,1fr)}
/* Меню разделов остаётся на месте, пока листаешь страницу. Оно длиннее
   экрана, поэтому ограничиваем высоту и прокручиваем внутри — иначе
   нижние разделы было бы не достать. */
.side{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 94px);
      overflow-y:auto;overscroll-behavior:contain;
      scrollbar-width:none;-ms-overflow-style:none}
.side::-webkit-scrollbar{width:0;height:0;display:none}
.side-menu a{display:flex;gap:13px;align-items:center;padding:11px 0;font-size:15px;line-height:20px;
             color:var(--ink);line-height:1.3}
.side-menu a:hover{color:var(--blue)}
.side-menu a.on{color:var(--blue);font-weight:600}
.side-menu img{width:48px;height:48px;object-fit:contain;flex:none}

/* ------------------------------------------------ заголовок секции */
.home-h1{font-size:21px;line-height:29px;font-weight:700;
         color:var(--ink-strong);margin:0 0 22px}
@media (max-width:640px){.home-h1{font-size:18px;line-height:25px}}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
          margin:52px 0 22px}
.sec-head h2{margin:0}
.sec-head .more{display:flex;gap:26px;align-items:center}
.sec-head .more a{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
                  font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.sec-head .more a:hover{color:var(--blue)}
.sec-head .more .ico{width:15px;height:15px}

/* ------------------------------------------------------- преимущества */
.advantages{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
            padding:34px 0 38px;border-bottom:1px solid var(--rule)}
.adv{display:flex;gap:18px;align-items:center}
.adv img{width:86px;height:66px;object-fit:contain;flex:none}
.adv b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
       color:var(--muted);font-weight:600;margin-bottom:6px}
.adv span{font-size:14px;font-weight:700;color:#555;line-height:23px}

/* -------------------------------------------- популярные категории */
.pop{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 32px}
.pop a{display:block;text-align:center;color:var(--ink-strong)}
.pop .ph{height:250px;display:flex;align-items:center;justify-content:center;
         overflow:hidden}
.pop img{max-height:100%;width:auto;object-fit:contain;transition:transform .25s ease}
.pop a:hover img{transform:scale(1.05)}
.pop b{display:block;margin-top:14px;font-size:18px;line-height:26px;font-weight:700;
       text-transform:uppercase;line-height:1.35;letter-spacing:.01em}
.pop a:hover b{color:var(--blue)}

/* ------------------------------------------------- сетка категорий */
.sec-cats{display:grid;grid-template-columns:repeat(5,1fr);
          border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.sec-cats a{display:flex;flex-direction:column;align-items:center;text-align:center;
            /* Без min-width колонка 1fr не может стать уже длинного слова
               в названии раздела, и сетка раздвигает страницу. */
            min-width:0;
            padding:30px 18px 26px;border-right:1px solid var(--rule);
            border-bottom:1px solid var(--rule);color:var(--ink-strong);min-height:210px;
            position:relative;background:#fff;
            transition:transform .18s ease, box-shadow .18s ease}
.sec-cats .ph{height:120px;display:flex;align-items:center;justify-content:center;
              margin-bottom:16px}
.sec-cats img{max-width:120px;max-height:120px;width:auto;height:auto;object-fit:contain}
.sec-cats b{font-size:15px;font-weight:700;line-height:23.4px;
            /* «электромонтажных» не помещается в плитку ни при каком
               разумном кегле: переносим, а не выпускаем за край. */
            hyphens:auto;overflow-wrap:break-word}
.sec-cats a:hover{transform:translateY(-6px);z-index:2;
                  box-shadow:0 14px 30px rgba(23,43,77,.13)}
.sec-cats a:hover b{color:var(--blue)}
.sec-cats .n{display:block;margin-top:8px;font-size:13px;color:var(--muted);font-weight:400}

/* --------------------------------------------------- вопросы и ответы */
.faq2{border-top:1px solid var(--rule)}
.sv-faq-head{margin-top:48px}
.faq2 details{border-bottom:1px solid var(--rule)}
.faq2 summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:flex-start;
              padding:20px 0;font-size:16px;font-weight:700;color:var(--ink-strong);
              line-height:1.45}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::before{content:"+";color:var(--muted);font-weight:400;font-size:20px;
                      line-height:1.15;width:16px;flex:none;text-align:center}
.faq2 details[open] summary::before{content:"\00d7"}
.faq2 summary:hover{color:var(--blue)}
.faq2 .faq-a{padding:0 0 22px 30px;color:var(--muted-2);font-size:15px;line-height:1.65;max-width:900px}
.faq2 .faq-a p{margin:0 0 10px}
.faq2 .faq-a ol,.faq2 .faq-a ul{margin:0 0 10px;padding-left:20px}

/* --------------------------------------------------------- отзывы */
.rev-cards{display:grid;grid-template-columns:repeat(3,1fr);
           border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rev-card{padding:28px 30px 32px;border-right:1px solid var(--rule)}
.rev-card:last-child{border-right:0}
.rev-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.rev-top img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.rev-ava{width:46px;height:46px;border-radius:50%;flex:none;background:var(--bg);
         display:flex;align-items:center;justify-content:center;color:var(--muted);
         font-weight:700;font-size:15px}
.rev-date{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rev-name{font-weight:700;font-size:14px;color:var(--ink-strong);margin-top:5px;line-height:1.3}
.rev-body{color:var(--muted-2);font-size:13px;line-height:1.6}
.btn-ghost{display:inline-block;margin-top:20px;border:1px solid #cfe4f5;border-radius:var(--r);
           padding:12px 24px;font-size:11px;font-weight:700;text-transform:uppercase;
           letter-spacing:.06em;color:var(--blue)}
.btn-ghost:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* --------------------------------------------------------- офис */
.office{display:grid;grid-template-columns:29fr 71fr;border:1px solid var(--rule)}
.office-info{padding:30px 28px 32px;border-right:1px solid var(--rule);position:relative}
/* Ссылка накрывает плашку целиком, а то, что должно нажиматься и
   выделяться само — кнопка, телефоны, почта — лежит слоем выше. */
.office-link{position:absolute;inset:0;z-index:1}
.office-info .btn-ghost,.office-info dd a,.office-info .mail{position:relative;z-index:2}
.office-info .btn-ghost{background:none;font-family:inherit;cursor:pointer}
.office-info .btn-ghost:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.office-info h3{font-size:17px;line-height:1.4;margin:0 0 22px}
.office-info dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
                color:var(--muted);margin-bottom:6px}
.office-info dd{margin:0 0 18px;font-size:13.5px;font-weight:600;color:var(--ink-strong)}
.office-info dd a{color:var(--ink-strong);display:block}
.office-info dd a:hover{color:var(--blue)}
.office-map{min-height:370px;border:0;display:block;width:100%;height:100%}

/* --------------------------------------------------------- видео */
.videos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.video-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
             background:var(--bg-2)}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-play{position:absolute;left:14px;bottom:14px;width:30px;height:30px;border-radius:50%;
            background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.video-play::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;
                   border-bottom:6px solid transparent;margin-left:3px}
.video-time{position:absolute;right:12px;bottom:14px;background:rgba(0,0,0,.72);color:#fff;
            font-size:11px;font-weight:600;border-radius:2px;padding:3px 7px}
.video-title{display:block;margin-top:14px;font-size:13px;line-height:1.45;color:var(--ink-strong)}
a.video-card:hover .video-title{color:var(--blue)}
.video-date{display:block;margin-top:9px;font-size:12px;color:var(--muted)}

/* --------------------------------------------------------------- подвал */
.foot{background:var(--dark);color:#fff;margin-top:60px;padding:44px 0 34px}
/* Доли колонок сняты с образца: 604/348/396 от 1348 контентной ширины.
   Средний столбец сдвинут влево — 544/408/396. Адрес занимает 309 px и в
   исходной доле подходил к юридическим ссылкам вплотную, оставляя 10 px.
   Ссылкам подвала хватает 450 px из 604, слева было чем поделиться. */
.foot-in{display:grid;grid-template-columns:544fr 408fr 396fr;gap:0}
/* Поле справа держит просвет, даже если адрес станет длиннее. */
.foot-contacts{padding-right:24px}
.foot-nav{display:flex;flex-wrap:wrap;gap:16px 24px;max-width:604px}
.foot-nav a{color:#fff;font-size:13px;line-height:20px;font-weight:700;
            text-transform:uppercase;letter-spacing:.8px}
.foot-nav a:hover{color:var(--blue-hover)}
.foot-soc{display:flex;gap:8px;margin-top:34px}
/* На образце значки в подвале белые на прозрачном круге. Цвет площадки
   показываем только при наведении: ВК, Telegram и Rutube — свои фирменные,
   сняты пипеткой с образца. */
.foot-soc a{width:43px;height:43px;border-radius:50%;background:none;
            border:1px solid rgba(255,255,255,.2);
            display:flex;align-items:center;justify-content:center;color:#fff;
            transition:background .15s,border-color .15s}
.foot-soc a:hover{border-color:transparent;color:#fff}
.foot-soc a.vk:hover{background:#2787f5}
.foot-soc a.tg:hover{background:#2aa1da}
.foot-soc a.max:hover{background:#8b00ff}  /* цвет MAX из виджета Битрикс24 */
.foot-soc a.rtb:hover{background:#100943}
.foot-soc svg{width:17px;height:17px;fill:currentColor;stroke:none}
.foot-soc a.max svg{width:19px;height:19px}
.foot-contacts div{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;
                   font-size:15px;line-height:20px}
.foot-contacts div:first-child{font-size:16px}
.foot-contacts .ico{color:rgba(255,255,255,.45);margin-top:2px;width:16px;height:16px}
.foot-contacts a{color:#fff}
/* Адрес почты выводится текстом, а не ссылкой: mailto собирают спам-боты.
   Выделяется и копируется как обычный текст. */
.mail{white-space:nowrap}
.foot-contacts a:hover{color:var(--blue-hover)}
.foot-legal a{display:block;color:var(--muted);font-size:11.5px;line-height:24px;
              text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;
              font-weight:400}
.foot-legal a{display:flex;align-items:center;gap:9px}
.foot-legal-ico{width:15px;height:14px;flex:none;fill:currentColor;
                stroke:none;opacity:.75}
.foot-legal a:hover{color:#fff}
.copy{margin-top:40px;font-size:13px;line-height:22px;color:var(--muted)}
/* Короткое подтверждение действия: цвет значка человек может
   и не заметить, особенно если значок за пределами взгляда. */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
       background:#333;color:#fff;font-size:14px;line-height:20px;
       padding:12px 20px;border-radius:26px;z-index:200;
       box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;
       transition:opacity .18s}
.toast.on{opacity:1}

/* -------------------------------------------------------------- баннер */
/* Баннер тянется во всю ширину окна, а шапка и синяя полоса лежат поверх
   него — так на прежнем сайте. Высота задана пропорцией картинки 1920x634. */
.top{position:relative}
/* Высота баннера у образца постоянная — 631px и на 1905, и на 1265. Пока
   она считалась от ширины (33vw), на узком экране баннер сжимался, а фигура,
   прижатая к его низу, залезала под шапку и синюю полосу. */
.top--hero{height:631px}
/* Шапка обязана лежать выше синей полосы: она создаёт свой контекст
   наложения, и при общем z-index выпадающие списки телефона и города
   уходили под полосу целиком — своё z-index:70 у них не помогало. */
.top--hero .head-top{position:relative;z-index:70}
.top--hero .nav{position:relative;z-index:60}
.top--hero .head-top{background:none}
/* На тёмных слайдах шапка переключается на светлый логотип, но он не белый,
   а голубой, и на светлых местах снимка (стена с инструментом) терялся —
   владелец 12.09.2026. Мягкое затемнение сверху выручает и логотип, и телефон.
   Ниже 901 px шапка стоит отдельно от баннера, там оно не нужно. */
@media (min-width:901px){
  .top--hero.head-light::before{content:"";position:absolute;left:0;right:0;top:0;
      height:170px;z-index:1;pointer-events:none;
      background:linear-gradient(180deg,rgba(8,14,22,.55),rgba(8,14,22,0))}
}
/* Над баннером синяя полоса не растягивается на весь экран, а идёт по
   ширине колонки — в отличие от внутренних страниц. */
.top--hero .nav{background:none;padding:0 var(--pad)}
.top--hero .nav-in{background:var(--blue);padding-left:22px;padding-right:6px}

.hero{position:absolute;inset:0;overflow:hidden;z-index:0}
.slider-track{display:flex;height:100%;transition:transform .45s ease}
/* Обрезаем по краю слайда: предмет стоит в натуральную величину и на узком
   экране выходит за свою границу, а слайды лежат в ряд — без обрезки он
   заезжает на соседний баннер. */
.slide{min-width:100%;height:100%;background-size:cover;background-position:center;
       background-color:var(--bg);overflow:hidden}
.slide-in{height:100%;display:flex;align-items:center;justify-content:space-between;
          gap:30px;padding-top:130px}
.slide-text{max-width:52%;min-width:0;position:relative;z-index:2;padding-left:clamp(0px,4vw,56px)}
.slide-text h2{font-size:38px;line-height:1.16;margin:0 0 18px;
               text-shadow:0 1px 12px rgba(255,255,255,.55)}
.slide--light .slide-text h2,.slide--light .slide-text p{
               text-shadow:0 2px 6px rgba(0,0,0,.75),0 0 26px rgba(0,0,0,.55)}
/* Насыщенность 700, а не 600: на светлом фоне баннера текст под заголовком
   читался слабо (владелец 12.09.2026). Montserrat 700 в шапке подключён. */
.slide-text p{font-size:15px;font-weight:700;line-height:1.6;margin:0 0 28px;
              max-width:520px}
.slide--light .slide-text h2,.slide--light .slide-text p{color:#fff}
/* Предмет на баннере вынут из потока: так он занимает всю высоту баннера
   и заходит за синюю полосу, как на прежнем сайте. */
.slide-in{position:relative}
/* Правило снято с образца: предмет стоит в натуральную величину от середины
   колонки, прижат к низу баннера и ограничен только высотой самого баннера.
   Ни вписывания в коробку (мельчило картинку), ни привязки к низу шапки
   (оставляла дыру снизу) на образце нет. */
/* Высота — ровно баннер, без прежнего зазора в 20 px: у картинок, обрезанных
   сверху (лестница), этот зазор показывал линию обреза в воздухе, а должно
   резать краем баннера (владелец 12.09.2026). Картинок ниже баннера правило
   не касается — они стоят в натуральную величину. */
.slide-fg{position:absolute;left:50%;bottom:0;width:auto;height:auto;
          max-width:none;max-height:100%;pointer-events:none}
.slider-arrow{position:absolute;top:56%;transform:translateY(-50%);z-index:2;
   background:rgba(255,255,255,.82);border:0;width:44px;height:44px;border-radius:50%;
   font-size:24px;color:var(--ink);cursor:pointer;line-height:1}
.slider-arrow:hover{background:#fff}
.slider-arrow.prev{left:22px}
.slider-arrow.next{right:22px}
.slider-dots{position:absolute;bottom:20px;left:0;right:0;display:flex;gap:9px;
             justify-content:center;z-index:2}
.slider-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;
                    background:rgba(0,0,0,.22);cursor:pointer}
.slider-dots button.on{background:var(--blue)}

/* ------------------------------------------------------------- каталог */
/* Плитка карточек сомкнута в сетку тонкими линиями, как на прежнем сайте.
   Наведение поднимает карточку над соседями и выдвигает покупку вниз. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
      border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.card{position:relative;background:#fff;padding:22px 20px 24px;
      border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
      display:flex;flex-direction:column;transition:box-shadow .15s}
.card:hover{box-shadow:0 8px 28px rgba(0,0,0,.13);z-index:5}
.card-photo{display:flex;align-items:center;justify-content:center;height:215px;
            margin-bottom:18px}
.card-photo img{max-width:100%;max-height:215px;width:auto;object-fit:contain}
.card .noimg{width:100%;height:215px;background:var(--bg);border-radius:var(--r)}
.card .nm{font-size:14px;line-height:21px;font-weight:700;color:var(--ink-strong);min-height:42px}
/* Ссылка растянута на всю карточку: нажать можно в любом месте. */
.card .nm::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover .nm{color:var(--blue)}
.avail{display:block;width:7px;height:7px;border-radius:50%;background:#5cb85c;
       margin:12px 0 10px}
.avail--no{background:#d8d8d8}
/* Единица измерения на образце не мельче и не бледнее цены: одна строка
   17px bold #555 в списке и 26px на карточке товара. */
.card .pr{font-size:17px;line-height:24.7px;font-weight:700;color:#555;margin-top:auto}
.card .pr span{font-size:inherit;font-weight:inherit;color:inherit}

.card-tools{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;
            gap:9px;z-index:3;opacity:0;transition:opacity .15s}
.card:hover .card-tools,.card-tools:focus-within{opacity:1}
.card-tools:has(.on){opacity:1}
/* Стили значков избранного и сравнения собраны ниже, в разделе
   «избранное и сравнение». Прежний набор правил стоял здесь и
   перебивался тем, что ниже: фон брался отсюда, цвет значка —
   оттуда, и значок сливался с синим кружком. */

.card-buy{display:none;position:absolute;top:100%;left:-1px;right:-1px;z-index:4;
          background:#fff;padding:0 20px 22px;gap:10px;align-items:center;
          box-shadow:0 18px 28px -10px rgba(0,0,0,.16)}
.card:hover .card-buy{display:flex}
.card-buy .btn{flex:1;padding:13px 10px;font-size:11.5px}
.qty{display:flex;align-items:center;border:1px solid var(--rule);
     border-radius:var(--r);height:42px;flex:none}
.qty input{width:34px;border:0;text-align:center;font:inherit;font-size:13px;
           padding:0;background:none;color:var(--ink)}
.qty input:focus{outline:none}
.qty-step{width:28px;height:40px;border:0;background:none;cursor:pointer;
          color:var(--muted);font-size:15px;line-height:1;padding:0}
.qty-step:hover{color:var(--blue)}

.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cats a{border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;display:flex;
        gap:14px;align-items:center;color:var(--ink);font-size:13.5px}
.cats a:hover{border-color:var(--blue);color:var(--blue)}
.cats img{width:48px;height:42px;object-fit:contain;flex:none}
.cats .n{margin-left:auto;color:var(--muted);font-size:12px}

/* -------------------------------------------------------------- кнопки */
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:var(--r);
     padding:14px 30px;font:inherit;font-size:12.5px;font-weight:700;text-transform:uppercase;
     letter-spacing:.04em;cursor:pointer;text-align:center}
.btn:hover{background:var(--blue-hover);color:#fff}
.btn-outline{display:inline-block;background:#fff;color:var(--blue);border:1px solid var(--blue);
     border-radius:var(--r);padding:12px 22px;font:inherit;font-size:12px;font-weight:700;
     text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-outline.sm{padding:9px 12px;font-size:11px;width:100%}
.lnk{background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline;
     font:inherit;font-size:12px;padding:0}

/* ---------------------------------------------------- карточка товара */
/* Размеры сняты с образца: рамка с галереей 1003px, липкая колонка 305px,
   промежуток 40px. Снимок и миниатюры увеличены по просьбе владельца
   08.09.2026: было 450 и 48x48, стало 560 и 64x64 — под галерею в
   колонке остаётся около 700 точек ширины, и снимок упирался в потолок
   высоты, а не в неё. */
.pd{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:40px;
    align-items:start;margin-bottom:40px}
.pd-box{position:relative;border:1px solid var(--rule);border-radius:var(--r);
        padding:27px 39px 39px;background:#fff}
.pd-gallery{display:flex;gap:32px;align-items:flex-start;padding-top:20px}
.pd-thumbs{display:flex;flex-direction:column;gap:12px;flex:none;width:64px}
.pd-thumb{width:64px;height:64px;padding:3px;border:1px solid var(--rule);
          border-radius:var(--r);background:#fff;cursor:pointer;display:flex;
          align-items:center;justify-content:center}
.pd-thumb.on{border-color:var(--blue)}
.pd-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.pd-big{flex:1;min-width:0;height:560px;display:flex;align-items:center;
        justify-content:center}
.pd-big img{max-width:100%;max-height:560px;width:auto;height:auto;object-fit:contain}
.pd-tools{position:absolute;top:22px;right:24px;display:flex;gap:10px;z-index:2}
.pd-tool{width:36px;height:36px;border:0;border-radius:50%;background:var(--bg-2);
         color:var(--muted-2);cursor:pointer;display:flex;align-items:center;
         justify-content:center}
.pd-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
             stroke-linecap:round;stroke-linejoin:round}
/* Наведение и включённое состояние должны различаться: иначе
   после нажатия не понять, добавлено или просто курсор рядом. */
.pd-tool:hover{background:var(--bg);color:var(--blue)}
.pd-tool.on{background:var(--blue);color:#fff}
.pd-tool.on svg{fill:currentColor;stroke:currentColor}
.pd-sec{font-size:20px;line-height:28px;font-weight:700;margin:38px 0 18px}

.pd-side{position:sticky;top:20px}
.price{font-size:26px;font-weight:700;color:#555;line-height:37.8px}
.price span{font-size:inherit;font-weight:inherit;color:inherit}
.pd-cheaper{margin:6px 0 0;font-size:12px;line-height:22px;color:#666;background:none;
            border:0;padding:0;font-family:inherit;cursor:pointer;
            border-bottom:1px dashed rgba(102,102,102,.5)}
.pd-cheaper{display:inline-flex;align-items:center;gap:7px;
            border-bottom:0 !important}
.pd-cheaper>span{border-bottom:1px dashed rgba(102,102,102,.5)}
.pd-cheaper-ico{width:14px;height:13px;flex:none;fill:currentColor;
                stroke:none;opacity:.75}
.pd-cheaper:hover{color:var(--blue)}
.pd-cheaper:hover>span{border-bottom-color:var(--blue)}
.pd-cheaper:hover .pd-cheaper-ico{opacity:1}
.pd-stock{margin:8px 0 20px;font-size:12px;line-height:22px;color:#666;
          display:flex;align-items:center;gap:9px}
.pd-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#5fa800}
.pd-stock.off::before{background:#d9a400}
.pd-buy{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pd-qty{display:inline-flex;align-items:center;height:48px;border:1px solid var(--rule);
        border-radius:22px;overflow:hidden;flex:none}
.pd-qty input{width:47px;height:46px;border:0;text-align:center;font:inherit;
              font-size:14px;-moz-appearance:textfield}
.pd-qty input::-webkit-outer-spin-button,.pd-qty input::-webkit-inner-spin-button{
              -webkit-appearance:none;margin:0}
.pd-qty-btn{width:44px;height:46px;border:0;background:none;color:var(--muted-2);
            font-size:17px;cursor:pointer;line-height:1}
.pd-qty-btn:hover{color:var(--blue)}
.pd-cart{flex:1;height:48px;border:0;border-radius:26px;background:var(--blue);
         color:#fff;font:inherit;font-size:10px;text-transform:uppercase;
         letter-spacing:.8px;cursor:pointer}
.pd-cart:hover{background:var(--blue-hover)}
.pd-oneclick{display:block;width:100%;height:41px;border:1px solid rgba(32,150,223,.35);
             border-radius:26px;background:none;color:var(--blue);font:inherit;
             font-size:11px;text-transform:uppercase;letter-spacing:.8px;cursor:pointer}
.pd-oneclick:hover{background:var(--blue);border-color:var(--blue);color:#fff}

.pd-chars{margin-top:30px}
.pd-chars-t{font-size:14px;line-height:21px;color:var(--ink-strong);margin-bottom:10px}
/* Строка характеристики течёт как обычный текст: при колоночной раскладке
   длинное название переносилось само по себе, а тире со значением зависали
   справа от первой строки. */
.pd-props{margin:0;font-size:13px;line-height:22px}
.pd-props dt,.pd-props i,.pd-props dd{display:inline}
.pd-props dt{color:var(--muted)}
.pd-props i{color:#555;font-style:normal;margin:0 4px}
.pd-props dd{margin:0;color:var(--ink-strong)}

.pd-consult{margin-top:30px;border:1px solid var(--rule);border-radius:var(--r);
            padding:26px 16px 0;text-align:center}
.pd-consult-ico{width:48px;height:40px;fill:none;stroke:var(--blue);stroke-width:2;
                stroke-linecap:round;stroke-linejoin:round}
.pd-consult b{display:block;font-size:17px;font-weight:400;line-height:22px;
              color:var(--ink-strong);margin:14px 0 10px}
.pd-consult p{margin:0;font-size:13px;line-height:20px;color:var(--muted-2)}
.pd-ask{display:block;width:calc(100% + 32px);margin:22px -16px 0;height:56px;
        border:0;border-top:1px solid var(--rule);background:none;color:var(--ink-strong);
        font:inherit;font-size:10px;text-transform:uppercase;letter-spacing:.8px;
        cursor:pointer;border-radius:0 0 var(--r) var(--r)}
.pd-ask:hover{color:var(--blue)}
/* Размер снят с образца: там описание идёт базовым шрифтом сайта,
   15px/25px, а не уменьшенным. */
.doc a{border-bottom:1px solid rgba(33,150,224,.4)}
.doc a:hover{border-bottom-color:currentColor}
.doc{font-size:15px;line-height:25px;max-width:900px;padding-bottom:20px}
.doc--wide{max-width:none}
/* Первая строка правового текста — его название: тот же размер, что
   у заголовков разделов внутри документа. */
.doc--wide>p:first-child b,.doc>p:first-child>b{font-size:17px;
        line-height:26px;display:inline-block;margin-bottom:10px}
.doc h2,.doc h3{margin:26px 0 12px}
.doc h2{font-size:20px}
.doc p{margin:0 0 12px}
.note{background:var(--bg);border-left:3px solid var(--blue);border-radius:var(--r);
      padding:13px 17px;font-size:13px;margin:14px 0}
.muted{color:var(--muted);font-size:13px}

/* ------------------------------------------------------- вопросы и ответы */
.faq details{border-bottom:1px solid var(--rule);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--ink-strong);
             list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--blue);font-size:20px;line-height:1;flex:none}
.faq details[open] summary::before{content:"–"}
.faq-a{padding:12px 0 0 26px;font-size:14px;line-height:1.65;color:var(--ink)}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.reviews-grid blockquote{margin:0;border:1px solid var(--rule);border-radius:var(--r);
                         padding:20px 22px;font-size:13.5px;line-height:1.6}
.reviews-grid footer{margin-top:12px;display:flex;gap:12px;color:var(--muted);font-size:12.5px}

/* --------------------------------------------------------------- формы */
.fld{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.fld label,.lead-row label,.cart-grid label{font-size:12px;color:var(--muted);
     display:flex;flex-direction:column;gap:6px}
.fld i{color:#dc130d;font-style:normal}
.fld input,.fld select,.fld textarea,.lead-row input,
.cart-grid input[type=text],.cart-grid input[type=date],.cart-grid input[type=number]{
     border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px;font:inherit;
     font-size:14px;color:var(--ink);width:100%}
.fld--err input,.fld--err select{border-color:#dc130d}
.err{color:#dc130d;font-size:12px;margin:0}
.hint{color:var(--muted);font-size:12px;margin:0}
.lead-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.lead-row label{flex:1;min-width:170px}
.lead-check{display:flex;align-items:center;gap:9px;margin:10px 0;font-size:13px;color:var(--ink)}
.lead-check input{width:auto}
.lead-result{margin-top:14px;padding:12px 16px;border-radius:var(--r);font-size:13px}
.lead-result.ok{background:#e8f5ee;color:#00885f}
.lead-result.err{background:#fdeceb;color:#dc130d}
.narrow{max-width:430px}

/* ----------------------------------------- доставка и самовывоз */
.dl-lead{font-size:15px;line-height:1.65;color:var(--muted-2);max-width:760px;
         margin:0 0 30px}
.dl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
          gap:20px;margin-bottom:44px}
.dl-card{border:1px solid var(--rule);border-radius:var(--r);padding:26px 22px 24px;
         background:#fff;display:flex;flex-direction:column}
.dl-card:hover{border-color:#cfe4f5;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.dl-ico{width:44px;height:44px;border-radius:50%;background:var(--bg-2);
        display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.dl-ico svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.6;
            stroke-linecap:round;stroke-linejoin:round}
.dl-card b{font-size:15px;line-height:1.35;color:var(--ink-strong);margin-bottom:10px}
.dl-price{display:block;font-style:normal;font-size:20px;font-weight:700;
          color:var(--ink-strong);margin:0 0 12px}
.dl-price.dl-free{color:#00885f}
.dl-card p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--muted-2)}
.dl-time{margin-top:auto;font-size:12.5px;color:var(--muted)}
.dl-h2{font-size:20px;line-height:1.35;margin:0 0 14px}
.dl-steps{list-style:none;counter-reset:step;padding:0;margin:0 0 34px;
          display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.dl-steps li{counter-increment:step;position:relative;padding-left:46px;
             font-size:13.5px;line-height:1.6;color:var(--muted-2)}
.dl-steps li::before{content:counter(step);position:absolute;left:0;top:-2px;
    width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
    font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dl-steps b{display:block;font-size:14.5px;color:var(--ink-strong);margin-bottom:5px}
.dl-text{font-size:14.5px;line-height:1.7;color:var(--ink);max-width:860px;
         margin:0 0 14px}
.dl-h2+.dl-text{margin-top:0}
.dl-text+.dl-h2{margin-top:30px}
.dl-note{background:#eaf3fb;border-left:3px solid var(--blue);border-radius:0 4px 4px 0;
         padding:16px 22px;font-size:14px;line-height:1.6;color:var(--ink-strong);
         margin-bottom:40px}

/* ------------------------------------------------------ о компании */
.cm-lead{font-size:16px;line-height:1.7;color:var(--ink);max-width:820px;margin:0 0 30px}
.cm-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
         gap:1px;background:var(--rule);border:1px solid var(--rule);
         border-radius:var(--r);overflow:hidden;margin-bottom:44px}
.cm-nums>div{background:#fff;padding:26px 22px;text-align:center}
.cm-nums b{display:block;font-size:28px;line-height:1.2;color:var(--blue);
           margin-bottom:6px}
.cm-nums span{font-size:13px;color:var(--muted-2);line-height:1.45}
.cm-h2{font-size:22px;margin:0 0 22px}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
         gap:20px;margin-bottom:40px}
.cm-item{border:1px solid var(--rule);border-radius:var(--r);padding:22px 22px 20px;
         background:#fff}
.cm-item b{display:block;font-size:15px;color:var(--ink-strong);margin-bottom:9px}
.cm-item p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted-2)}
.cm-quote{background:var(--bg-2);border-radius:var(--r);padding:28px 30px;
          margin-bottom:36px}
.cm-quote b{display:block;font-size:17px;color:var(--ink-strong);margin-bottom:10px}
.cm-quote p{margin:0;font-size:14px;line-height:1.7;color:var(--muted-2);max-width:780px}
.cm-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
        flex-wrap:wrap;border:1px solid var(--rule);border-radius:var(--r);
        padding:24px 28px;margin-bottom:44px}
.cm-cta span{font-size:15px;color:var(--ink-strong)}
.cm-cta .btn-pill{width:auto;margin-top:0;padding:13px 28px;white-space:nowrap}
@media (max-width:700px){
  .cm-cta{flex-direction:column;align-items:flex-start}
  .cm-cta .btn-pill{width:100%;text-align:center}
}

/* ------------------------------------------------------- регистрация */
.tfa{display:flex;justify-content:center;padding:10px 0 40px}
.tfa-box{width:100%;max-width:460px;border:1px solid var(--rule);
         border-radius:var(--r);padding:34px 38px 30px;background:#fff}
.tfa-wide{max-width:720px}
.tfa-steps{margin:0 0 26px;padding-left:20px;font-size:14px;line-height:23px;
           color:var(--muted-2)}
.tfa-steps li{margin-bottom:8px}
.tfa-steps b{color:var(--ink-strong)}
.tfa-qr{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
        border:1px solid var(--rule);border-radius:var(--r);
        padding:22px 24px;margin-bottom:26px;background:#fbfcfd}
.tfa-qr-img{flex:none;width:190px;height:190px}
.tfa-qr-img svg{width:100%;height:100%;display:block}
.tfa-manual{flex:1;min-width:220px;font-size:13px;line-height:20px;
            color:var(--muted-2)}
.tfa-manual b{display:block;color:var(--ink-strong);margin-bottom:6px}
.tfa-manual p{margin:0 0 8px}
.tfa-secret{display:block;font-family:Consolas,monospace;font-size:14px;
            letter-spacing:1.4px;word-break:break-all;color:var(--ink-strong);
            background:#fff;border:1px solid var(--rule);border-radius:6px;
            padding:9px 11px;-webkit-user-select:all;user-select:all}
.tfa-small{font-size:12px;line-height:18px;color:var(--muted-2);margin:8px 0 0}
.tfa-code{display:block;width:100%;height:56px;margin-bottom:10px;
          text-align:center;font-size:26px;letter-spacing:8px;
          font-weight:700;color:var(--ink-strong);
          border:1px solid var(--rule);border-radius:var(--r)}
.tfa-code:focus{outline:0;border-color:var(--blue)}
.tfa-err{margin:0 0 16px;padding:11px 14px;border-radius:var(--r);
         background:#fdecec;color:#a02020;font-size:13px;line-height:19px}
.tfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;
           list-style:none;margin:0 0 20px;padding:20px 22px;
           border:1px dashed var(--rule);border-radius:var(--r);
           background:#fbfcfd}
.tfa-codes li{font-family:Consolas,monospace;font-size:17px;letter-spacing:1px;
              color:var(--ink-strong)}
@media (max-width:640px){
  .tfa-box{padding:24px 20px}
  .tfa-codes{grid-template-columns:1fr}
}
.reg{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;
     align-items:start;padding-bottom:50px}
.reg-form{border:1px solid var(--rule);border-radius:var(--r);padding:34px 38px 30px;
          background:#fff}
.reg-title{font-size:24px;line-height:32px;margin:0 0 8px}
.reg-sub{margin:0 0 24px;font-size:13px;line-height:20px;color:var(--muted-2)}
.reg-fields{max-width:420px}
.reg-send{display:block;width:100%;height:48px;margin-top:6px;border:0;
          border-radius:26px;background:var(--blue);color:#fff;font:inherit;
          font-size:11px;text-transform:uppercase;letter-spacing:.8px;cursor:pointer}
.reg-send:hover{background:var(--blue-hover)}
.reg-foot{margin:18px 0 0;font-size:13px;color:var(--muted-2)}

.reg-why{border:1px solid var(--rule);border-radius:var(--r);padding:30px 26px;
         background:var(--bg-2)}
.reg-why>b{display:block;font-size:15px;color:var(--ink-strong);margin-bottom:20px}
.reg-why ul{list-style:none;margin:0;padding:0}
.reg-why li{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.reg-why svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--blue);
             stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.reg-why span{font-size:13px;line-height:19px;color:var(--muted-2)}
.reg-why i{display:block;font-style:normal;font-weight:700;font-size:13.5px;
           color:var(--ink-strong);margin-bottom:3px}
.reg-lead{margin:0 0 18px;font-size:13px;line-height:19px;color:var(--muted-2)}
.reg-alt{display:block;text-align:center;height:44px;line-height:42px;margin-bottom:24px;
         border:1px solid rgba(32,150,223,.35);border-radius:26px;color:var(--blue);
         font-size:11px;text-transform:uppercase;letter-spacing:.8px}
.reg-alt:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.reg-foot b{color:var(--ink-strong);white-space:nowrap}
.reg-call{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--rule);
          font-size:12.5px;line-height:19px;color:var(--muted-2)}
.reg-call b{color:var(--ink-strong);white-space:nowrap}
@media (max-width:900px){
  .reg{grid-template-columns:minmax(0,1fr)}
  .reg-form{padding:24px 20px}
}
.ok-box{background:#e8f5ee;color:#00885f;border-radius:var(--r);padding:16px 20px;
        font-weight:600;font-size:14px}

/* -------------------------------------------------------------- корзина */
table.cart{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:26px}
table.cart th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;
    text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;
    border-bottom:1px solid var(--rule)}
table.cart td{padding:15px 12px;border-bottom:1px solid var(--rule-2);vertical-align:middle}
table.cart td.n,table.cart th.n{text-align:right;white-space:nowrap}
table.cart td.pic{width:76px}
table.cart td.pic img{width:64px;height:64px;object-fit:contain}
table.cart tr.big td{border-top:2px solid var(--rule);font-size:16px}
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--gap);
           align-items:start;padding-bottom:40px}
.total{border:1px solid var(--rule);border-radius:var(--r);padding:22px;position:sticky;
       top:20px;background:var(--bg-2)}
.total .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
            border-bottom:1px solid var(--rule-2);font-size:13.5px}
.total .row.big{border-bottom:0;border-top:2px solid var(--rule);font-size:19px;
                font-weight:700;margin-top:6px;padding-top:14px}
.total .btn{width:100%;margin-top:16px}
.order-card{border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;
            margin-bottom:16px}
.order-card .row{display:flex;justify-content:space-between;gap:12px}
.order-card ul{margin:10px 0;padding-left:20px;font-size:13.5px}
.news-list article{display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--rule-2)}
.news-list time{color:var(--muted);font-size:12.5px;white-space:nowrap;min-width:92px}
.reviews blockquote{margin:0 0 18px;padding:18px 22px;border:1px solid var(--rule);
                    border-radius:var(--r)}
.reviews footer{margin-top:10px;color:var(--muted);font-size:12.5px;display:flex;gap:12px}
.scroll{overflow-x:auto}

/* ------------------------------------------------------------- модалка */
/* Кнопка «наверх»: на образце синий круг 44x44, прижат к правому краю
   колонки и появляется, когда страницу пролистали. */
.to-top{position:fixed;bottom:92px;right:24px;
        width:44px;height:44px;border:0;border-radius:50%;background:var(--blue);
        color:#fff;cursor:pointer;z-index:70;display:flex;align-items:center;
        justify-content:center;opacity:0;visibility:hidden;
        transition:opacity .2s,visibility .2s,background .15s;
        box-shadow:0 4px 14px rgba(0,0,0,.18)}
.to-top.on{opacity:1;visibility:visible}
.to-top:hover{background:var(--blue-hover)}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
            stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){ .to-top{bottom:86px;right:16px} }

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;
       justify-content:center;padding:20px;z-index:60}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:var(--r);padding:30px;max-width:520px;width:100%;
           max-height:90vh;overflow:auto;position:relative}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:28px;
             line-height:1;color:var(--muted);cursor:pointer}

/* Окно «Задать вопрос»: размеры сняты с образца — 580px, поля 460x48,
   отступ 60px по бокам. */
.modal-box--ask{max-width:580px;padding:55px 60px 60px}
.modal-box--ask h2{font-size:24px;line-height:32px;margin:0 0 24px}
.ask .fld{margin-bottom:25px}
.ask .fld label{display:block;font-size:13px;line-height:18.6px;color:#888;
                margin-bottom:5px}
.ask .fld label i{color:#dc130d;font-style:normal}
.ask .fld input,.ask .fld textarea{display:block;width:100%;height:48px;
     background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r);
     padding:8px 13px 7px;font:inherit;font-size:14px;color:var(--ink)}
.ask .fld textarea{height:193px;resize:vertical}
.ask .fld input:focus,.ask .fld textarea:focus{background:#fff;border-color:#cfe4f5;outline:none}
.ask .ask-consent{display:flex;gap:14px;align-items:flex-start;margin:0 0 24px;
                  font-size:13px;line-height:20px;color:var(--muted)}
.ask .ask-consent i{color:#dc130d;font-style:normal}
.ask-foot{display:flex;align-items:center;gap:18px}
.ask-send{background:var(--blue);color:#fff;border:0;border-radius:26px;
          padding:16px 26px 14px;font:inherit;font-size:11px;text-transform:uppercase;
          letter-spacing:.8px;cursor:pointer}
.ask-send:hover{background:var(--blue-hover)}
.ask-send:disabled{opacity:.6;cursor:default}
.ask-note{font-size:13px;line-height:22px;color:#888}
.ask-note i{color:#dc130d;font-style:normal}

/* Кегль пунктов подняли до образцовых 14px, и на средних экранах полоса
   перестала помещаться: при ширине окна 1250 содержимое было 1307 против
   колонки 1190, поэтому значки справа обрезались, а фон уезжал за край.
   Ужимаем отступы, а ниже 1150 — ещё и кегль. */
@media (max-width:1400px){
  .nav-in{padding-left:10px;padding-right:4px}
  .nav-in>a,.nav-item>a{padding-left:9px;padding-right:9px}
  .nav-icons a{padding-left:7px;padding-right:7px}
}
@media (max-width:1100px){
  /* Колонки сложились в одну, и правая с ценой и кнопками оказалась под
     описанием и подборкой «может потребоваться» — до покупки надо было
     листать три экрана. Переставляем порядок: галерея, покупка,
     описание, характеристики, подборка, консультация.
     display:contents убирает промежуточные обёртки из потока, иначе
     переставить их содержимое между собой нельзя. */
  /* align-items:stretch обязателен: у карточки на широком экране
     выравнивание по верхнему краю, и в колонке оно сжимало строку
     покупки по содержимому — кнопке «В корзину» доставался 81 px. */
  .pd{display:flex;flex-direction:column;gap:26px;align-items:stretch}
  .pd-main,.pd-side,.pd-side-in{display:contents}
  .pd-box{order:1}
  .price,.pd-cheaper,.pd-stock,.pd-buy,.pd-oneclick{order:2}
  .pd-sec--desc,.pd-doc{order:3}
  .pd-chars{order:4}
  /* Порядок держит обёртка: сетка внутри неё, и order на самой
     сетке уже ни на что не влияет. */
  .pd-sec--acc,.pd-acc-box{order:5}
  .pd-consult{order:6}
  .pd-side{position:static}
  .pd-box{padding:20px}
  .pd-gallery{gap:16px}
  .pd-big{height:auto}
}
@media (max-width:1100px){
  .mega-in{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  .side{display:none}
  .head-in{grid-template-columns:1fr auto;gap:14px}
  .head-left .search{display:none}
  .slide{height:320px}
  .slide-text{padding:0 30px}
  .slide-text h2{font-size:26px}
  .advantages{grid-template-columns:1fr;gap:20px}
}
@media (max-width:860px){
  .product,.cart-grid{grid-template-columns:1fr;gap:24px}
  .total{position:static}
  h1{font-size:24px}
  h2{font-size:20px}
  .price{font-size:22px}
  .nav-in{overflow-x:auto}
  .nav-in>a,.nav-item>a{padding:13px 13px;font-size:11.5px}
  .mega,.drop{display:none !important}
}

/* ------------------------------------------- избранное и сравнение */
.card{position:relative}
/* --------------------------------- «Может потребоваться» и «Совместим с»

   Одной строкой с прокруткой, а не сеткой: у окрасочного аппарата
   оснастки восемь позиций, и сетка растягивает карточку на два экрана.
   Соседняя карточка выглядывает краем — это и есть подсказка, что
   блок можно листать. */
.pd-acc-box{position:relative}
/* Стрелки внутри блока, а не снаружи: в ленте «Ранее вы смотрели» вокруг
   есть поля и вынос на 14 точек уместен, а здесь блок прижат к краю
   колонки — стрелка уезжала под соседний элемент и не нажималась. */
.pd-acc-box .viewed-arrow{width:46px;height:46px;font-size:26px;z-index:6;
                          box-shadow:0 4px 16px rgba(0,0,0,.18)}
.pd-acc-box .viewed-arrow.prev{left:10px}
.pd-acc-box .viewed-arrow.next{right:10px}
/* overflow-y:hidden обязателен: при overflow-x:auto браузер подставляет
   по вертикали auto вместо visible, и сбоку появляется вторая полоса
   прокрутки от одного лишнего пикселя. */
.pd-acc-grid{display:flex;grid-template-columns:none;overflow-x:auto;
             overflow-y:hidden;overscroll-behavior-x:contain;
             scroll-snap-type:x proximity;scroll-behavior:smooth;
             scroll-padding-left:1px;scrollbar-width:none}
/* Полосу прячем: листают стрелками, а на телефоне — пальцем. */
.pd-acc-grid::-webkit-scrollbar{display:none}
/* Ширина карточки фиксирована, иначе флекс сожмёт восемь штук в полоски.
   На телефоне 78vw: карточка занимает почти экран, а край следующей
   виден. */
.pd-acc-grid .card{flex:0 0 min(252px,78vw);scroll-snap-align:start}

/* ------------------------------------------ условие аренды, страница

   Снимок обтекается текстом, а не стоит колонкой справа: колонкой он
   короче текста, под ним оставалась пустота и связи с текстом не
   читалось. Полосой во всю ширину его не поставить — исходники 490
   точек, растягивание даст мыло. */
.sv-page{margin-top:24px;overflow:hidden}
.sv-shot{float:right;width:380px;max-width:44%;margin:4px 0 24px 32px;
         border-radius:var(--r);overflow:hidden;background:var(--bg-2);
         box-shadow:0 8px 26px rgba(15,23,42,.10)}
.sv-shot img{display:block;width:100%;height:auto}
.sv-text{font-size:17px;line-height:1.72}
.sv-text p{margin:0 0 18px}
/* Первый абзац вводит в тему — он крупнее остальных. */
.sv-text p:first-child{font-size:19px;line-height:1.6}
.sv-text a{color:var(--blue);text-decoration:underline}
.sv-text b{font-weight:600}

.sv-more-head{clear:both;margin:44px 0 20px;font-size:22px;font-weight:700}
.sv-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
         gap:18px}
.sv-card{display:block;border:1px solid var(--rule);border-radius:var(--r);
         overflow:hidden;background:#fff;color:var(--ink);
         transition:border-color .15s,box-shadow .15s}
.sv-card:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(15,23,42,.10)}
.sv-card-shot{display:block;height:146px;background:var(--bg-2)}
.sv-card-shot img{display:block;width:100%;height:100%;object-fit:cover}
.sv-card-name{display:block;padding:14px 16px;font-weight:600;line-height:1.4}

@media (max-width:760px){
  .sv-page{margin-top:14px}
  /* Обтекание на узком экране оставляет строки в три слова — снимок
     встаёт над текстом во всю ширину. */
  .sv-shot{float:none;width:100%;max-width:none;margin:0 0 20px}
  .sv-text{font-size:16px;line-height:1.68}
  .sv-text p:first-child{font-size:17px}
  .sv-more-head{margin:34px 0 16px;font-size:20px}
  .sv-more{grid-template-columns:1fr 1fr;gap:12px}
  .sv-card-shot{height:104px}
  .sv-card-name{padding:11px 12px;font-size:14px}
}

/* ------------------------------------------- сортировка раздела */
/* ------------------------------------------------ выбор города */
.city-pick{display:inline-block;position:relative}
.city-pick summary{list-style:none;cursor:pointer;display:inline-flex;
        align-items:center;gap:6px}
.city-pick summary::-webkit-details-marker{display:none}
.city-pick summary::after{content:"";width:5px;height:5px;flex:none;
        border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
        transform:rotate(45deg) translate(-1px,-1px)}
.city-pick[open] summary::after{transform:rotate(-135deg)}
.city-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:90;
        min-width:200px;background:#fff;border:1px solid var(--rule);
        border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.14);
        padding:6px 0;display:flex;flex-direction:column}
.city-menu a{padding:9px 18px;font-size:14px;color:var(--ink);white-space:nowrap}
.city-menu a:hover{background:var(--bg-2);color:var(--blue)}
.city-menu a.on{font-weight:700;color:var(--blue)}
/* Подсказку по местоположению показываем один раз и не навязчиво:
   человек может смотреть аренду в другом городе намеренно. */
.city-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;
        z-index:150;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
        background:#fff;border:1px solid var(--rule);border-radius:var(--r);
        box-shadow:0 8px 28px rgba(0,0,0,.16);padding:14px 20px;
        font-size:14px;line-height:20px;max-width:92vw}
.city-hint-yes{height:34px;line-height:34px;padding:0 16px;border-radius:18px;
        background:var(--blue);color:#fff;font-size:13px;white-space:nowrap}
.city-hint-yes:hover{background:var(--blue-hover);color:#fff}
.city-hint-no{border:0;background:none;color:var(--muted-2);cursor:pointer;
        font:inherit;font-size:13px;text-decoration:underline}
.city-hint-no:hover{color:var(--ink)}
@media (max-width:560px){.city-hint{flex-direction:column;align-items:flex-start;
        gap:10px;bottom:14px}}

.vat-field{margin:4px 0 18px}
/* Выбор НДС — два равноправных варианта без готового ответа: клиент
   должен ответить сам, иначе «без НДС» не отличить от «не заметил». */
.vat-q{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink-strong)}
.vat-q .req{color:#dc130d;font-style:normal}
/* Селекторы с .vat-field нарочно: блок стоит внутри общего .fld, а его
   правила растягивали кружок на всю ширину (.fld input) и ставили подпись
   под ним серым 12px (.fld label) — владелец: «выглядит некрасиво». */
.vat-field .vat-choice{display:flex;gap:12px;flex-wrap:wrap}
.vat-field .vat-opt{display:flex;flex-direction:row;align-items:center;gap:11px;
                    min-width:200px;margin:0;padding:14px 20px;cursor:pointer;
                    border:1px solid var(--rule);border-radius:var(--r);
                    background:#fff;font-size:14.5px;line-height:1.3;
                    color:var(--ink-strong);transition:border-color .15s,background .15s}
.vat-field .vat-opt input{width:18px;height:18px;margin:0;padding:0;border:0;
                          flex:none;accent-color:var(--blue);cursor:pointer}
.vat-field .vat-opt:hover{border-color:var(--blue)}
.vat-field .vat-opt:has(input:checked){border-color:var(--blue);background:#eef4fb;
                                       font-weight:600}
.vat-field.fld--err .vat-opt{border-color:#dc130d}
@media (max-width:560px){.vat-field .vat-opt{flex:1 1 100%;min-width:0}}
.vat-note{margin:8px 0 0;font-size:12.5px;line-height:18px;
          color:var(--muted-2)}
/* --------------------------------------------- сводка по филиалам */
.fr-link{margin:0 0 26px;padding:14px 18px;background:var(--bg-2);
         border-radius:var(--r);font-size:14px}
.fr-dash-head{display:flex;align-items:baseline;justify-content:space-between;
              gap:20px;flex-wrap:wrap;margin-bottom:22px}
.fr-dash-title{font-size:22px;line-height:30px;margin:0}
.fr-dash-note{font-size:13px;color:var(--muted-2)}
.fr-card{border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px;
         margin-bottom:18px;background:#fff}
.fr-card--main{border-left:3px solid var(--blue)}
.fr-card-top{display:flex;align-items:baseline;justify-content:space-between;
             gap:16px;flex-wrap:wrap;margin-bottom:18px}
.fr-city{font-size:17px;color:var(--ink-strong)}
.fr-kind{font-size:12.5px;color:var(--muted-2);margin-left:10px}
.fr-off{font-size:12px;color:#c33;margin-left:10px}
.fr-site{font-size:13px}
.fr-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
         margin-bottom:16px}
.fr-num b{display:block;font-size:20px;line-height:28px;color:var(--ink-strong)}
.fr-num b span{font-size:13px;font-weight:400;color:var(--muted-2)}
.fr-num i{display:block;font-style:normal;font-size:12.5px;color:var(--muted-2)}
.fr-bar{height:4px;border-radius:2px;background:var(--bg-2);margin-top:8px;
        overflow:hidden}
.fr-bar span{display:block;height:100%;background:var(--blue)}
.fr-meta{font-size:13px;color:var(--muted-2);margin-bottom:14px}
.fr-gaps{background:#fff8e6;border-left:3px solid #e8a33d;border-radius:var(--r);
         padding:12px 16px;margin-bottom:14px;font-size:13px;line-height:20px}
.fr-gaps ul{margin:6px 0 0;padding-left:18px}
.fr-actions{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;
            padding-top:14px;border-top:1px solid var(--rule)}
.fr-orphan{font-size:13px;color:var(--muted-2);margin-top:18px}
@media (max-width:760px){.fr-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cat-tools{display:flex;justify-content:flex-end;margin:0 0 20px}
.cat-sort{position:relative}
.cat-sort summary{display:inline-flex;align-items:center;gap:10px;
        height:38px;padding:0 16px;border:1px solid var(--rule);
        border-radius:var(--r);background:#fff;cursor:pointer;
        font-size:13px;color:var(--ink);list-style:none;white-space:nowrap}
.cat-sort summary::-webkit-details-marker{display:none}
.cat-sort summary::after{content:"";width:7px;height:7px;flex:none;
        border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
        transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.cat-sort[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.cat-sort summary:hover{border-color:var(--blue);color:var(--blue)}
.cat-sort-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;
        min-width:262px;background:#fff;border:1px solid var(--rule);
        border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.12);
        padding:6px 0;display:flex;flex-direction:column}
.cat-sort-menu a{padding:9px 18px;font-size:13px;line-height:19px;
        color:var(--ink);white-space:nowrap}
.cat-sort-menu a:hover{background:var(--bg-2);color:var(--blue)}
.cat-sort-menu a.on{font-weight:700;color:var(--blue)}
.cat-sort-reset{border-top:1px solid var(--rule);margin-top:6px;
        padding-top:12px !important;color:var(--muted-2) !important;
        font-size:12.5px !important}
@media (max-width:520px){
  .cat-tools{justify-content:stretch}
  .cat-sort,.cat-sort summary{width:100%}
  .cat-sort summary{justify-content:space-between}
  .cat-sort-menu{left:0;right:0;min-width:0}
}

.tool{width:30px;height:30px;border:0;padding:0;cursor:pointer;
      color:#8a949c;display:flex;align-items:center;justify-content:center;
      /* Кружок нужен, чтобы значок читался поверх любой фотографии. */
      background:rgba(255,255,255,.94);border-radius:50%;
      box-shadow:0 1px 5px rgba(23,43,77,.16);
      transition:color .15s, background .15s}
.tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
          stroke-linecap:round;stroke-linejoin:round}
.tool:hover{color:var(--blue);background:#fff}
.tool.on{color:var(--blue)}
.tool.on[data-kind=favorites] svg{fill:currentColor}
.list-actions{display:flex;gap:24px;align-items:center;margin-bottom:22px}
.list-actions form{margin:0}
.empty-note{color:var(--muted-2);max-width:660px;margin:0 0 22px;font-size:14px}
table.cmp{border-collapse:collapse;font-size:13px}
table.cmp td{border:1px solid var(--rule);padding:13px 15px;vertical-align:top;
             min-width:200px}
table.cmp tr:nth-child(even) td{background:var(--bg-2)}
.cmp-label{color:var(--muted);width:240px;font-size:12.5px}
.cmp-head td{position:relative;text-align:center}
.cmp-head img{height:150px;width:auto;object-fit:contain;display:block;
              margin:0 auto 12px}
.cmp-head .nm{display:block;margin-bottom:8px}
.cmp-head form{margin-top:12px}
.cmp-drop{position:absolute;top:8px;right:10px;border:0;background:none;
          font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.cmp-drop:hover{color:#dc130d}

/* .prod-tools остался от прежней карточки, теперь значки лежат в .pd-tools */
.tool-line{border:0;background:none;padding:0;cursor:pointer;font:inherit;
           font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;gap:9px}
.tool-line svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
               stroke-linecap:round;stroke-linejoin:round}
.tool-line:hover,.tool-line.on{color:var(--blue)}
.tool-line.on[data-kind=favorites] svg{fill:currentColor}

/* ------------------------------------------------------------ франшиза */
.fr-grid{display:grid;grid-template-columns:388px minmax(0,1fr);gap:36px;
         background:#f7f9fb;border-radius:6px;padding:30px;align-items:stretch}
.fr-body{display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.fr-body .fr-list{flex:1;align-content:space-evenly;margin-bottom:8px}
.fr-body .fr-cta{margin-top:0}
.fr-form{background:#fff;border-radius:6px;box-shadow:0 2px 18px rgba(0,0,0,.07);
         padding:26px 28px 22px}
.fr-form .lead{color:var(--blue);font-size:17px;font-weight:700;text-align:center;
               margin-bottom:10px}
.fr-form .sub{color:var(--muted);font-size:12.5px;text-align:center;margin:0 0 20px}
.fr-form h2{font-size:22px;line-height:1.25;margin:0 0 22px}
.fr-fld{margin-bottom:13px}
.fr-fld label{display:block;font-size:12px;color:var(--muted-2);margin-bottom:7px}
.fr-fld i{color:#dc130d;font-style:normal}
.fr-fld input,.fr-fld textarea{width:100%;border:1px solid transparent;
    background:#f4f6f8;border-radius:4px;padding:13px 14px;font:inherit;font-size:14px;
    color:var(--ink)}
.fr-fld input:focus,.fr-fld textarea:focus{outline:none;border-color:#cfe4f5;
    background:#fff}
.fr-fld textarea{resize:vertical;min-height:88px}
.fr-fld--err input,.fr-fld--err textarea{border-color:#dc130d}
.fr-consent{display:flex;gap:14px;align-items:flex-start;margin:18px 0 20px;
            font-size:11.5px;color:var(--muted-2);line-height:1.5}
.fr-consent input{position:absolute;opacity:0;width:0;height:0}
.fr-switch{width:36px;height:20px;border-radius:10px;background:#dfe4e8;flex:none;
           position:relative;cursor:pointer;transition:background .15s;margin-top:2px}
.fr-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
                  border-radius:50%;background:#fff;transition:transform .15s;
                  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.fr-consent input:checked+.fr-switch{background:var(--blue)}
.fr-consent input:checked+.fr-switch::after{transform:translateX(16px)}
.fr-consent input:focus-visible+.fr-switch{outline:2px solid var(--blue);
                                           outline-offset:2px}
.fr-send{display:flex;align-items:center;gap:18px}
.fr-send .btn{border-radius:24px;padding:15px 34px}
.fr-send .req{font-size:11.5px;color:var(--muted);line-height:1.4;white-space:nowrap}
.fr-send .req i{color:#dc130d;font-style:normal}
.fr-safe{background:#eef4fb;border-radius:4px;padding:13px 14px;margin-top:24px;
         font-size:12px;line-height:1.3;color:var(--muted-2);white-space:nowrap;
         overflow:hidden;text-overflow:ellipsis}
.fr-safe b{color:var(--ink-strong)}
.fr-result{margin-top:16px;padding:13px 16px;border-radius:4px;font-size:13px}
.fr-result.ok{background:#e8f5ee;color:#00885f}
.fr-result.err{background:#fdeceb;color:#dc130d}

.fr-title{font-size:30px;line-height:1.25;margin:-6px 0 24px;font-weight:700;
          color:var(--ink-strong)}
.fr-note{background:#eaf3fb;border-left:3px solid var(--blue);border-radius:0 4px 4px 0;
         padding:18px 24px;font-size:14.5px;font-weight:600;line-height:1.6;
         color:var(--ink-strong);margin-bottom:34px}
.fr-body h2{font-size:23px;margin:0 0 24px;position:relative;padding-bottom:12px}
.fr-body h2::after{content:"";position:absolute;left:0;bottom:0;width:96px;height:2px;
                   background:var(--blue)}
.fr-list{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;list-style:none;
         padding:0;margin:0 0 34px;align-content:start}
.fr-list li{position:relative;padding-left:28px;font-size:13.5px;line-height:1.55;
            color:var(--ink)}
.fr-list li::before{content:"";position:absolute;left:2px;top:4px;width:11px;height:6px;
                    border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
                    transform:rotate(-45deg)}
.fr-cta{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:28px;
        text-align:center;font-size:15px;font-weight:600;line-height:1.7;
        color:var(--ink-strong)}

@media (max-width:1000px){
  /* minmax(0,1fr), а не 1fr: у 1fr нижняя граница — ширина содержимого, и
     строка «Конфиденциально…» без переноса распирала колонку шире экрана
     телефона — страница уезжала вправо (владелец 15.09.2026). */
  .fr-grid{grid-template-columns:minmax(0,1fr);padding:18px}
  .fr-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  /* На телефоне серая подложка с отступами съедала по 18 px с каждой
     стороны у и так узкой колонки. */
  .fr-grid{padding:0;background:none;gap:30px}
  .fr-form{padding:22px 18px 20px}
  .fr-send{flex-wrap:wrap;gap:12px 18px}
  .fr-safe{white-space:normal}
  .fr-title{font-size:24px;overflow-wrap:break-word}
  .fr-note{padding:14px 16px}
  .fr-cta{padding:22px 18px}
}

/* -------------------------------------------------------------- поиск */
.ac{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;
    border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.17);z-index:90;
    overflow-y:auto;max-height:60vh;min-width:340px}
.ac[hidden]{display:none}
.ac a{display:flex;gap:13px;align-items:center;padding:10px 14px;color:var(--ink);
      font-size:13px;border-bottom:1px solid var(--rule-2);line-height:1.35}
.ac a:last-child{border-bottom:0}
.ac a:hover,.ac a.on{background:var(--bg);color:var(--ink)}
.ac img{width:42px;height:42px;object-fit:contain;flex:none}
.ac .noimg{width:42px;height:42px;background:var(--bg);border-radius:var(--r);flex:none}
.ac .nm{flex:1;min-width:0}
.ac .art{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.ac .pr{color:var(--ink-strong);white-space:nowrap;font-weight:600;font-size:12.5px}
.ac .all{justify-content:center;color:var(--blue);font-weight:700;font-size:11px;
         text-transform:uppercase;letter-spacing:.05em;padding:13px}
.ac .none{padding:14px;color:var(--muted);font-size:13px}
.ac a.ac-cat{background:var(--bg-2)}
.ac a.ac-cat .nm{font-weight:700}
.found-cats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.found-cats a{display:flex;gap:14px;align-items:center;border:1px solid var(--rule);
              border-radius:var(--r);padding:13px 20px 13px 14px;color:var(--ink-strong)}
.found-cats a:hover{border-color:var(--blue)}
.found-cats img{width:44px;height:38px;object-fit:contain;flex:none}
.found-cats b{display:block;font-size:14px}
.found-cats i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);
              margin-top:3px}
.search-count{margin:0 0 20px}
.search-pages{display:flex;flex-direction:column;gap:2px}
.search-pages a{padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:14px}

/* ------------------------------------------------------------ контакты */
/* Карта уходит вправо до края окна. Отрицательный отступ считается от
   ширины колонки; на узком экране он обнуляется, иначе карта уедет. */
/* На образце страница поделена ровно пополам по окну: карта начинается на
   середине (953 из 1905). Колонка отцентрована, поэтому середина контейнера
   и есть середина окна — отсюда 1fr 1fr без промежутка. */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:0;
          align-items:stretch;padding-bottom:20px}
/* Порядок блоков задаётся здесь, а не в тексте страницы: тело приходит
   из базы одним куском, а на образце значки соцсетей стоят между блоком
   «режим работы / телефон / почта» и реквизитами. */
.ct-info{padding-right:118px;display:flex;flex-direction:column}
.ct-soc{order:1}
.req-head,.req{order:2}
.ct-info .btn-pill{order:3;align-self:flex-start;margin-top:34px}
/* Карта поднята под самое меню и тянется до низа колонки с текстом. */
.ct-map{border:0;min-height:760px;
        width:calc(100% + var(--bleed, 0px));
        height:calc(100% + var(--drop, 0px));
        margin-top:calc(-1 * var(--pad));
        margin-bottom:calc(-1 * var(--drop, 0px))}
.ct-info>.crumbs{padding-top:0}
.ct-info>h1{margin:0 0 22px}
.ct-label{font-size:10px;line-height:13px;text-transform:uppercase;
          letter-spacing:.8px;color:#555;margin-bottom:16px}
.ct-info>.ct-label{color:var(--muted)}
.ct-address{font-size:28px;line-height:37.8px;margin:0 0 26px;font-weight:400}
.ct-photo{display:block;width:100%;border-radius:var(--r);
          margin-bottom:28px}
.ct-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin-bottom:26px}
.ct-value{margin:0 0 18px;font-size:15px;font-weight:700;color:var(--ink);
          line-height:25px}
.ct-value a{color:var(--ink-strong)}
.ct-value a:hover{color:var(--blue)}
/* Кружки 43x43 с шагом 53, цвета сняты с образца пипеткой. */
.ct-soc{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.ct-soc a{width:43px;height:43px;flex:none;border-radius:50%;background:var(--blue);
          display:flex;align-items:center;justify-content:center;color:#fff}
.ct-soc a.vk{background:#2787f5}
.ct-soc a.tg{background:#2aa1da}
.ct-soc a.max{background:#8b00ff}
.ct-soc a.rtb{background:#100943}
.ct-soc a:hover{opacity:.85}
.ct-soc svg{width:20px;height:20px;fill:currentColor}
/* Тонкая линия вправо от значков — как на образце. */
.ct-soc::after{content:"";flex:1;height:1px;background:var(--rule);margin-left:14px}
.req-head{font-weight:700;color:#666;margin:26px 0 0;font-size:15px;line-height:25px}
.req{margin:0;color:#666;font-size:15px;line-height:25px}
/* Кнопка на контактах — контурная пилюля, как на образце. */
.btn-pill{display:inline-block;border:1px solid rgba(32,150,223,.35);background:none;
          border-radius:26px;color:var(--blue);font:inherit;font-size:11px;
          text-transform:uppercase;letter-spacing:.8px;padding:12px 21px 11px;
          cursor:pointer}
.btn-pill:hover{border-color:var(--blue);background:var(--blue);color:#fff}
@media (max-width:1000px){
  .contacts{grid-template-columns:1fr;gap:26px}
  /* Отступ справа держал место под карту, а карта уехала вниз. На узком
     экране он остаётся требованием к ширине и раздвигает страницу. */
  .ct-info{padding-right:0;min-width:0}
  .ct-map{width:100%;height:auto;margin-top:0;margin-bottom:0;
          min-width:0;min-height:380px}
}

/* --------------------------------------------------------- условия аренды */
.sv-intro{max-width:900px;margin-bottom:34px}
.sv-lead{font-size:16px;font-weight:700;color:var(--ink-strong);line-height:1.55;
         margin:0 0 18px}
.sv-note{font-size:13.5px;color:var(--muted-2);line-height:1.7;margin:0}
.sv-list{border:1px solid var(--rule);border-radius:var(--r)}
.sv-item{display:grid;grid-template-columns:250px minmax(0,1fr) 60px;gap:34px;
         align-items:center;padding:26px 24px 26px 26px;
         border-bottom:1px solid var(--rule)}
.sv-item:last-child{border-bottom:0}
/* Блоки услуг тоже приподнимаются: список длинный, и под курсором
   должно быть видно, какая строка сейчас выбрана. */
.sv-item{position:relative;background:#fff;border-radius:var(--r);
         transition:transform .18s ease, box-shadow .18s ease}
.sv-item:hover{transform:translateY(-4px);z-index:2;
               box-shadow:0 14px 30px rgba(23,43,77,.12)}
.sv-photo{display:block;line-height:0;overflow:hidden;border-radius:var(--r)}
.sv-photo img{width:100%;height:auto;border-radius:var(--r);
              transition:transform .35s ease}
.sv-item:hover .sv-photo img{transform:scale(1.06)}
.sv-title{display:block;font-size:19px;font-weight:700;color:var(--ink-strong);
          margin-bottom:14px;line-height:1.3}
.sv-item:hover .sv-title{color:var(--blue)}
.sv-body p{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted-2)}
.sv-arrow{width:38px;height:38px;border:1px solid var(--rule);border-radius:50%;
          display:flex;align-items:center;justify-content:center;color:var(--muted);
          justify-self:end}
.sv-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
              stroke-linecap:round;stroke-linejoin:round}
.sv-arrow:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.sv-detail-photo{display:block;max-width:490px;width:100%;height:auto;
                 border-radius:var(--r);margin-bottom:22px}
@media (max-width:800px){
  .sv-item{grid-template-columns:1fr;gap:16px}
  .sv-arrow{justify-self:start}
}

/* ------------------------------------------------- ранее вы смотрели */
.viewed-strip{background:var(--bg-2);border-top:1px solid var(--rule);
              padding:34px 0 40px;margin-top:50px}
/* Когда полоса есть, подвал прижимается к ней без разрыва. */
.viewed-strip + .foot{margin-top:0}
.viewed-strip h2{font-size:21px;margin:0 0 22px}
/* Просмотренное идёт одной строкой: лента прокручивается колесом, пальцем
   или кнопками по краям. Полосу прокрутки прячем — вместо неё кнопки. */
.viewed-box{position:relative}
.viewed-row{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;
            scroll-behavior:smooth;scroll-snap-type:x proximity;
            scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.viewed-row::-webkit-scrollbar{display:none}
.viewed-row>.viewed-card{scroll-snap-align:start}
.viewed-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
              width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);
              background:#fff;color:var(--ink);font-size:22px;line-height:1;
              cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.10);
              display:flex;align-items:center;justify-content:center;
              transition:opacity .15s,background .15s}
.viewed-arrow[hidden]{display:none}
.viewed-arrow:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.viewed-arrow.prev{left:-14px}
.viewed-arrow.next{right:-14px}
.viewed-card{display:flex;gap:14px;align-items:center;background:#fff;
             border:1px solid var(--rule);border-radius:var(--r);padding:14px 20px 14px 14px;
             width:280px;flex:none;color:var(--ink)}
.viewed-card:hover{border-color:var(--blue)}
.viewed-card img{width:64px;height:64px;object-fit:contain;flex:none}
.viewed-card .noimg{width:64px;height:64px;background:var(--bg);flex:none;
                    border-radius:var(--r)}
.viewed-card b{display:block;font-size:12.5px;font-weight:400;line-height:1.4}
.viewed-card i{display:block;font-style:normal;font-weight:700;font-size:14px;
               color:var(--ink-strong);margin-top:8px}
.viewed-card:hover b{color:var(--blue)}
@media (max-width:700px){
  .viewed-card{width:calc(100vw - 90px)}
  .viewed-arrow{display:none}
}

/* --------------------------------------------------------------- новости */
.news-years{display:flex;flex-wrap:wrap;margin-bottom:34px;
            border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.news-years a{padding:15px 26px;font-size:13px;color:var(--ink);
              border-right:1px solid var(--rule)}
.news-years a:last-child{border-right:0}
.news-years a:hover{color:var(--blue)}
.news-years a.on{background:var(--bg-2);font-weight:600;color:var(--ink-strong)}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
           gap:34px 30px}
.news-card{display:block;color:var(--ink-strong)}
.news-photo{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);
            /* Рамка нужна подборкам: их обложка собрана из снимков
               товара на светлом, и без неё плитка выглядит пустой. */
            background:var(--bg);border:1px solid var(--rule)}
.news-photo img{width:100%;height:100%;object-fit:cover;display:block;
                transition:transform .3s ease}
.news-card:hover .news-photo img{transform:scale(1.04)}
.news-photo .noimg{display:block;width:100%;height:100%}
.news-card time{display:block;margin:16px 0 10px;font-size:12.5px;color:var(--muted)}
.news-card b{display:block;font-size:14px;line-height:1.45;font-weight:700}
.news-card:hover b{color:var(--blue)}
/* Фотография в самой новости. Ширина как у текста: во всю колонку
   она перетягивает на себя внимание с первого абзаца. */
.news-lead{display:block;width:100%;max-width:900px;aspect-ratio:16/9;
           object-fit:cover;border-radius:var(--r);margin:4px 0 26px;
           /* Подборки собраны из снимков товара на белом. Без рамки
              такая обложка на белой странице читается как пустое место. */
           border:1px solid var(--rule)}

/* ------------------------------------------------- корзина и оформление */
.back-link{margin:-4px 0 26px;font-size:13px}
.back-link a{color:var(--muted)}
.back-link a:hover{color:var(--blue)}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;
             align-items:start}
.cart-main{min-width:0}
.cart-box{border:1px solid var(--rule);border-radius:var(--r);background:#fff;
          margin-bottom:22px}
.cart-box.pad{padding:26px 28px 28px}
.cart-box.pad h2,.cart-terms h2{font-size:17px;margin:0 0 18px}
.cart-terms{padding:26px 28px 28px}
.cart-terms h2+*{margin-top:0}
.cart-box-head{display:flex;align-items:center;justify-content:space-between;
               padding:20px 26px 0;border-bottom:1px solid var(--rule)}
.cart-tab{display:inline-block;padding-bottom:14px;font-size:14px;
          border-bottom:2px solid var(--blue);color:var(--ink-strong)}
.cart-clear{border:0;background:none;cursor:pointer;font:inherit;font-size:11.5px;
            text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
            padding:0 0 14px}
.cart-clear:hover{color:#dc130d}
.cart-row{display:grid;grid-template-columns:96px minmax(0,1fr) 118px 110px 30px;
          gap:20px;align-items:center;padding:22px 26px;
          border-bottom:1px solid var(--rule-2)}
.cart-row:last-child{border-bottom:0}
.cart-pic{display:flex;align-items:center;justify-content:center;height:78px}
.cart-pic img{max-width:96px;max-height:78px;object-fit:contain}
.cart-name a{color:var(--ink-strong);font-size:14px;line-height:1.45}
.cart-name a:hover{color:var(--blue)}
.cart-name i{display:block;font-style:normal;color:var(--muted);font-size:12.5px;
             margin-top:8px}
.cart-cost{font-size:16px;font-weight:700;text-align:right;white-space:nowrap}
.cart-del{border:0;background:none;cursor:pointer;color:var(--muted);font-size:22px;
          line-height:1;padding:0}
.cart-del:hover{color:#dc130d}
/* На широком экране крестик стоит в своей колонке рядом со стоимостью,
   и подпись туда не влезает — она появляется только на узком. */
.cart-del-t{display:none}

.term-dates{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;
            margin-bottom:26px}
.term-dates label{display:flex;flex-direction:column;gap:7px;font-size:12px;
                  color:var(--muted-2)}
.term-dates input{border:1px solid var(--rule);border-radius:var(--r);
                  padding:11px 13px;font:inherit;font-size:13.5px}
.term-days{font-size:13.5px;font-weight:700;color:var(--ink-strong);
           padding-bottom:11px}

.dlv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
           gap:16px;margin-bottom:22px}
.dlv-card{position:relative;display:flex;gap:14px;border:1px solid var(--rule);
          border-radius:var(--r);padding:18px 18px 18px 16px;cursor:pointer}
.dlv-card:hover{border-color:#cfe4f5}
.dlv-card.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.dlv-card input{position:absolute;opacity:0;width:0;height:0}
.dlv-mark{width:18px;height:18px;border:1px solid var(--rule);border-radius:50%;
          flex:none;margin-top:2px;position:relative}
.dlv-card.on .dlv-mark{border-color:var(--blue)}
.dlv-card.on .dlv-mark::after{content:"";position:absolute;inset:4px;
                              border-radius:50%;background:var(--blue)}
.dlv-body b{display:block;font-size:13.5px;color:var(--ink-strong);line-height:1.4}
.dlv-body i{display:block;font-style:normal;font-weight:700;font-size:14px;
            color:var(--ink-strong);margin:9px 0}
.dlv-body p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted-2)}

.fld-line{display:flex;flex-direction:column;gap:7px;font-size:12px;
          color:var(--muted-2);margin-bottom:16px;max-width:520px}
.fld-line input{border:1px solid var(--rule);border-radius:var(--r);
                padding:12px 14px;font:inherit;font-size:14px;color:var(--ink)}
.fld-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
          gap:0 22px}
/* Реквизиты юрлица идут парами: название и ИНН, КПП и адрес, БИК и счёт. */
.fld-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Кнопка подстановки стоит над полем ИНН: так видно, что вводить руками
   всё остальное не нужно. */
.inn-cell{position:relative}
.inn-cell .fld>label{padding-right:160px}
.inn-fill{position:absolute;top:-6px;right:0;display:inline-flex;align-items:center;
          gap:6px;border:1px solid #cfe4f6;border-radius:20px;background:#f2f8fd;
          color:var(--blue);padding:6px 13px 6px 10px;font:inherit;font-size:12px;
          cursor:pointer;line-height:1;transition:background .15s,border-color .15s,color .15s}
.inn-fill svg{width:14px;height:14px;flex:none}
.inn-fill:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.inn-fill:active{transform:translateY(1px)}
.inn-fill:disabled{background:#f4f6f8;border-color:#e6eaee;color:var(--muted);
          cursor:default;transform:none}
.inn-msg{margin:-10px 0 14px;font-size:11.5px;line-height:1.4;color:#00885f}
.inn-msg.bad{color:#dc130d}
/* Три поля, которые клиент вписывает сам: ИНН, БИК, расчётный счёт. */
.fld--key>label{font-size:13px;font-weight:600;color:var(--ink-strong)}
.fld-tip{font-style:normal;font-weight:600;color:var(--blue)}
/* Вкладка ИП: подписи свои, КПП нет, адрес регистрации — во всю ширину
   и выделен, как поля, которые вписывают сами. */
.dlya-ip{display:none}
#company-fields.is-ip .dlya-ip{display:inline}
#company-fields.is-ip .dlya-org,#company-fields.is-ip .kpp-cell{display:none}
#company-fields.is-ip .adres-cell{grid-column:1/-1}
#company-fields.is-ip .adres-cell>label{font-size:13px;font-weight:600;color:var(--ink-strong)}
.inn-switch{border:0;background:none;padding:0;font:inherit;font-weight:600;
            color:var(--blue);text-decoration:underline;cursor:pointer}
/* Под БИК — нашёлся ли банк; до ввода строки нет. */
.bik-msg{margin:-10px 0 14px;font-size:11.5px;line-height:1.4;color:var(--muted)}
.bik-msg.ok{color:#00885f}
.bik-msg.bad{color:#dc130d}
/* «Заполнится по БИК» светлее обычного, чтобы не читалось как вписанное. */
#company-fields input::placeholder{color:#b4bcc4;opacity:1}
@media (max-width:700px){ .fld-grid--2{grid-template-columns:minmax(0,1fr)} }

.cart-total{border:1px solid var(--rule);border-radius:var(--r);padding:24px 22px;
            position:sticky;top:20px;background:#fff}
.ct-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
        margin-bottom:18px}
.ct-sum span{font-size:17px;font-weight:700;color:var(--ink-strong)}
.ct-sum b{font-size:21px;font-weight:700;white-space:nowrap}
.ct-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;
        color:var(--muted-2);padding:6px 0}
.ct-row b{color:var(--ink-strong);font-weight:600;white-space:nowrap}
.ct-items{border-top:1px solid var(--rule-2);margin-top:14px;padding-top:14px}
.ct-item{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
         padding:7px 0;color:var(--ink)}
.ct-item i{display:block;font-style:normal;color:var(--muted);font-size:11.5px;
           margin-top:4px}
.ct-item b{white-space:nowrap}
.btn-pill{border-radius:26px;width:100%;margin-top:18px;padding:15px 20px}
/* «Перейти к оформлению» и «Оформить заказ» — главное действие на странице,
   поэтому они залиты синим. Контурной пилюлей остаётся только «Написать
   сообщение» на контактах, там так на образце. */
.btn.btn-pill{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.btn.btn-pill:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:#fff}
.btn-pill-ghost{display:block;width:100%;margin-top:18px;border:1px solid #cfe4f5;
                border-radius:26px;background:#fff;padding:14px 20px;cursor:pointer;
                font:inherit;font-size:11.5px;font-weight:700;text-transform:uppercase;
                letter-spacing:.05em;color:var(--blue);text-align:center}
.btn-pill-ghost:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.ct-consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;
            font-size:11.5px;color:var(--muted-2);line-height:1.5;cursor:pointer}
.ct-consent input{position:absolute;opacity:0;width:0;height:0}
.ct-consent input:checked+.fr-switch{background:var(--blue)}
.ct-consent input:checked+.fr-switch::after{transform:translateX(16px)}
.ct-consent i{color:#dc130d;font-style:normal}
.ct-note{margin:16px 0 0;font-size:11.5px;color:var(--muted)}

/* Покупатель: физлицо или компания */
.buyer-head{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-bottom:22px}
.buyer-head h2{margin:0}
.buyer-tabs{display:flex;flex-wrap:wrap;gap:8px 26px}
.buyer-tab{position:relative;cursor:pointer;font-size:14px;color:var(--muted-2);
           padding-bottom:8px;border-bottom:2px solid transparent}
.buyer-tab input{position:absolute;opacity:0;width:0;height:0}
.buyer-tab:hover{color:var(--blue)}
.buyer-tab.on{color:var(--ink-strong);border-bottom-color:var(--blue)}
/* Подсказка про согласие висела всё время и читалась как упрёк заранее.
   Показываем её только когда заказ отправляют без включённого переключателя. */
.ct-hint{display:none;margin:10px 0 0;font-size:11.5px;line-height:1.5}
.ct-hint.on{display:block;color:#dc130d}
.ct-consent.fld--err .fr-switch{box-shadow:0 0 0 2px #dc130d}
.free{color:#00885f}

@media (max-width:900px){
  .cart-layout{grid-template-columns:1fr}
  .cart-total{position:static}
  .cart-row{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .cart-row .qty-cell,.cart-row .cart-cost,.cart-row .cart-del{grid-column:2}
  /* Кнопка встаёт отдельной строкой: без подписи непонятно, что она
     делает, а нажимать в один крестик неудобно. */
  .cart-del{justify-self:start;display:inline-flex;align-items:center;gap:7px;
            font:inherit;font-size:11.5px;text-transform:uppercase;
            letter-spacing:.05em;padding:10px 2px}
  .cart-del-t{display:inline}
  .cart-del span[aria-hidden]{font-size:17px;line-height:1}
}

/* Выделенный перечень на контентных страницах: полоса слева, как в оригинале. */
.lead-box{border-left:2px solid var(--blue);padding:4px 0 4px 30px;margin:26px 0 34px}
.lead-box ul{list-style:none;margin:0;padding:0}
.lead-box li{position:relative;padding-left:16px;margin-bottom:14px;font-size:14.5px;
             font-weight:700;line-height:1.65;color:var(--ink-strong)}
.lead-box li:last-child{margin-bottom:0}
.lead-box li::before{content:"—";position:absolute;left:0;color:var(--ink-strong)}
.doc h3{font-size:24px;margin:36px 0 18px}
.doc h2{font-size:26px;margin:36px 0 18px}

/* --------------------------------------------------------------- отзывы */
.rv-top{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:30px}
.rv-score{display:flex;align-items:baseline;gap:10px}
.rv-score b{font-size:34px;font-weight:800;color:var(--ink-strong);line-height:1}
.rv-score span{font-size:13px;color:var(--muted)}
.rv-sources{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.rv-src-link{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);
             border-radius:24px;padding:9px 18px 9px 10px;font-size:12.5px;
             color:var(--ink)}
.rv-src-link:hover{border-color:var(--blue);color:var(--blue)}

.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
         gap:22px}
.rv-grid--home{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* На главной отзывы идут одной строкой с прокруткой: так их видно
   все, а высота блока не зависит от длины самого болтливого. */
.rv-box{position:relative}
.rv-row{display:flex;flex-wrap:nowrap;gap:22px;overflow-x:auto;
        scroll-behavior:smooth;scroll-snap-type:x proximity;
        scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.rv-row::-webkit-scrollbar{display:none}
.rv-row>.rv-card{width:360px;flex:none;scroll-snap-align:start}
@media (max-width:520px){.rv-row>.rv-card{width:86vw}}

/* ------------------------------------------------- форма отзыва */
/* Кнопка стоит на месте прежней средней оценки — слева, первой
   в строке. Размер скромный: это не главное действие страницы. */
.rv-add-btn{display:inline-flex;align-items:center;height:36px;
            padding:0 18px;border-radius:20px;background:var(--blue);
            color:#fff;font-size:12.5px;font-weight:700;
            text-transform:uppercase;letter-spacing:.04em;
            white-space:nowrap;order:0}
.rv-add-btn:hover{background:var(--blue-hover);color:#fff}
.rv-add{margin-top:44px;padding-top:38px;border-top:1px solid var(--rule)}
.rv-add-title{font-size:22px;line-height:30px;margin:0 0 18px}
.rv-form{max-width:720px}
.rv-done{background:#eaf7ec;border-left:3px solid #4caf50;
         padding:13px 17px;border-radius:var(--r);margin:0 0 20px;
         font-size:14px;line-height:21px}
.rv-err{background:#fdecec;border-left:3px solid #d05252;
        padding:13px 17px;border-radius:var(--r);margin:0 0 20px;
        font-size:14px;line-height:21px;color:#a02020}
.fld-err{display:block;margin-top:5px;font-size:12.5px;color:#c33}
/* Звёзды: обратный порядок в разметке позволяет подсветить
   выбранную и все младшие одним правилом, без скриптов. */
.ask .fld .rv-rate{display:inline-flex;flex-direction:row-reverse;
        justify-content:flex-end;gap:10px;margin-top:6px;width:max-content}
.ask .fld .rv-rate input{position:absolute;opacity:0;width:0;height:0}
.ask .fld .rv-rate label{display:inline-block;width:auto;margin:0;
        font-size:40px;line-height:44px;color:#dcdcdc;cursor:pointer;
        transition:color .1s;user-select:none}
/* Горят ровно те звёзды, которые пометил скрипт: при наведении — будущая
   оценка, без мыши — выбранная. */
.ask .fld .rv-rate label.lit{color:#ffb400}
/* Пока скрипт не отработал, выбранное всё равно видно. */
.ask .fld .rv-rate:not(.js) input:checked ~ label{color:#ffb400}
.ask .fld .rv-rate input:focus-visible + label{outline:2px solid var(--blue);
        outline-offset:2px}
.rv-card{border:1px solid var(--rule);border-radius:var(--r);padding:24px 24px 20px;
         display:flex;flex-direction:column;background:#fff}
.rv-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.rv-head img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.rv-ava{width:46px;height:46px;border-radius:50%;flex:none;background:var(--bg);
        display:flex;align-items:center;justify-content:center;color:var(--muted);
        font-weight:700;font-size:16px}
.rv-who{flex:1;min-width:0}
.rv-name{font-weight:700;font-size:14px;color:var(--ink-strong);line-height:1.3}
.rv-date{font-size:11.5px;color:var(--muted);text-transform:uppercase;
         letter-spacing:.04em;margin-top:5px}
.rv-stars{color:#ffb800;font-size:14px;letter-spacing:2px;margin-bottom:12px}
.rv-body{font-size:13.5px;line-height:1.65;color:var(--muted-2);flex:1}
.rv-foot{display:flex;align-items:center;gap:10px;margin-top:18px;
         border-top:1px solid var(--rule-2);padding-top:16px}
.rv-foot a{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
.rv-foot a:hover{color:var(--blue)}

.rv-answer{margin-top:14px}
.rv-answer summary{display:inline-flex;align-items:center;gap:7px;
        cursor:pointer;font-size:13px;color:var(--muted-2);
        list-style:none;padding:2px 0;
        border-bottom:1px dashed rgba(102,102,102,.45)}
.rv-answer summary::-webkit-details-marker{display:none}
.rv-answer summary::after{content:"";width:7px;height:7px;flex:none;
        border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
        transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s}
.rv-answer[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.rv-answer summary:hover{color:var(--blue);border-bottom-color:var(--blue)}
.rv-answer-less{display:none}
.rv-answer[open] .rv-answer-more{display:none}
.rv-answer[open] .rv-answer-less{display:inline}
.rv-answer-in{margin-top:12px;padding:14px 16px;background:var(--bg-2);

           border-radius:var(--r);font-size:12.5px;line-height:1.6;
           color:var(--muted-2)}
.rv-answer-in b{display:flex;align-items:center;gap:8px;color:var(--ink-strong);
             font-size:12.5px;margin-bottom:8px}
.rv-answer-in b img{width:20px;height:20px;object-fit:contain}
.rv-answer-in time{color:var(--muted);font-weight:400;font-size:11.5px}

/* Значок площадки — её собственная иконка, рядом со ссылкой на источник. */
img.src-mark{width:20px;height:20px;flex:none;object-fit:contain;
             border-radius:4px;display:block}
.rv-head img.src-mark{margin-top:3px}
.rv-src-link img.src-mark{width:22px;height:22px}

/* --------------------------------------------------------- адаптив */
@media (max-width:1100px){
  .mega-in{grid-template-columns:repeat(3,1fr)}
  .sec-cats{grid-template-columns:repeat(3,1fr)}
  .videos{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout .side{display:none}
}
@media (max-width:900px){
  .top--hero{height:auto;min-height:0;max-height:none}
  .top--hero .hero{position:relative;height:300px}
  .slide-in{padding-top:0}
  .slide-fg{display:none}
  .slide-text h2{font-size:24px}
  .head-in{grid-template-columns:1fr auto}
  .head-left{order:2}
  .foot-in{grid-template-columns:1fr}
  .office{grid-template-columns:1fr}
  .office-info{border-right:0;border-bottom:1px solid var(--rule)}
  .pop,.advantages,.rev-cards{grid-template-columns:1fr}
  .rev-card{border-right:0;border-bottom:1px solid var(--rule)}
  .sec-cats{grid-template-columns:repeat(2,1fr)}
  /* На двух колонках каждый пиксель поля отнят у названия. */
  .sec-cats a{padding:22px 10px 20px}
  .nav-in{overflow-x:auto}
}

.consent-hint{display:none;margin:-8px 0 16px;font-size:11.5px;line-height:1.5}
.consent-hint.on{display:block;color:#dc130d}
.consent-err .fr-switch{box-shadow:0 0 0 2px #dc130d}
.term-hint{margin:0 0 0 auto;align-self:center;max-width:390px;
           font-size:13.5px;line-height:1.55;color:#6b7681;
           border-left:3px solid #dbe7f2;padding-left:14px}
@media (max-width:900px){.term-hint{margin:14px 0 0;max-width:none;
           align-self:flex-start}}
.chosen-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.chosen-head h2{margin:0}
.chosen-edit{font-size:13px;color:var(--blue);border-bottom:1px dashed currentColor}
.chosen-edit:hover{border-bottom-style:solid}
.chosen-list{margin:18px 0 0;display:grid;grid-template-columns:180px 1fr;
             gap:14px 30px;align-items:baseline}
.chosen-list dt{color:#8a949c;font-size:13px;line-height:1.5}
.chosen-list dd{margin:0;font-size:16px;line-height:1.5}
.chosen-note{color:#8a949c;font-size:14px;padding-left:6px}
@media(max-width:640px){.chosen-list{grid-template-columns:1fr;gap:4px 0}
  .chosen-list dd{margin-bottom:10px;font-size:15px}}
.pd-mm{align-self:center;font-size:13px;color:#8a949c;white-space:nowrap}
/* Окошко «товар в корзине». Выезжает справа и само уезжает через шесть
   секунд: оно подтверждает добавление, а не требует решения. */
.cart-pop{position:fixed;right:18px;top:96px;z-index:60;width:min(340px,calc(100vw - 32px));
          background:#fff;border:1px solid var(--rule);border-radius:var(--r);
          box-shadow:0 24px 48px -18px rgba(0,0,0,.28);padding:18px 18px 16px;
          display:flex;flex-direction:column;gap:12px;
          transform:translateX(calc(100% + 26px));transition:transform .22s ease}
.cart-pop.on{transform:translateX(0)}
.cart-pop-t{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
            color:var(--muted)}
.cart-pop-x{position:absolute;top:8px;right:10px;border:0;background:none;
            font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.cart-pop-x:hover{color:var(--ink-strong)}
.cart-pop-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;
              align-items:center;color:var(--ink-strong)}
.cart-pop-row img{width:72px;height:64px;object-fit:contain}
.cart-pop-row b{display:block;font-size:13.5px;line-height:1.4;font-weight:600}
.cart-pop-row i{display:block;margin-top:5px;font-style:normal;font-size:12.5px;
                color:var(--muted)}
.cart-pop-row:hover b{color:var(--blue)}
.cart-pop-go{justify-content:center;text-align:center}
.cart-pop-more{border:0;background:none;cursor:pointer;font:inherit;font-size:13px;
               color:var(--muted);padding:0}
.cart-pop-more:hover{color:var(--blue)}
@media (max-width:700px){
  /* На телефоне окошко встаёт снизу во всю ширину: справа ему негде выехать. */
  .cart-pop{right:12px;left:12px;top:auto;bottom:14px;width:auto;
            transform:translateY(calc(100% + 22px))}
  .cart-pop.on{transform:translateY(0)}
}
/* Кнопка помнит, что товар уже в корзине. */
.js-cart.on{background:#eef4fb;color:var(--blue);border-color:#cfe0f2}
.pd-cart.js-cart.on{background:#eef4fb;color:var(--blue)}

/* Сообщения сайта. Цветом различаем только беду: остальное — спокойная
   плашка, чтобы «корзина пуста» не выглядела как ошибка. */
.soobshcheniya{max-width:var(--page);margin:0 auto 18px;padding:0 var(--pad);
               display:flex;flex-direction:column;gap:10px}
.soob{margin:0;padding:13px 16px;border-radius:var(--r);font-size:14.5px;
      line-height:1.5;background:#eef4fb;color:#2b3a46;
      border-left:3px solid var(--blue)}
.soob--error{background:#fdecec;color:#7d1c19;border-left-color:#dc130d}
.soob--success{background:#e9f6ee;color:#1c5b34;border-left-color:#1f9d55}
.cart-explain{display:block;margin-top:2px;font-size:12.5px;color:#6b7681}
/* Подпись у счётчика: без неё три кнопки и число не объясняли,
   что именно выбирают — срок или количество единиц. */
/* Подпись висит над значением и не сдвигает его: иначе «2 смены» и
   счётчик стояли на полстроки ниже цены, с которой они в паре. */
.qty-cell{position:relative;display:flex;align-items:center}
.qty-cap{position:absolute;left:0;bottom:calc(100% + 6px);white-space:nowrap;
         font-size:11.5px;line-height:1.3;color:#8a949c}
@media (max-width:900px){
  /* На узком экране строка перестраивается столбиком, и висящая подпись
     наехала бы на название товара — там она обычным потоком. */
  .qty-cell{flex-direction:column;align-items:flex-start;gap:6px}
  .qty-cap{position:static;white-space:normal}
}
/* Число смен стоит на месте счётчика: той же высоты, чтобы строки
   с услугой и с инструментом не прыгали. */
.qty-smeny{display:flex;align-items:center;height:42px;font-size:14px;
           font-weight:700;color:var(--ink-strong)}
/* Пояснение стоит в строке заголовка: справа от него пусто, а среди
   дат оно читалось как сноска именно к датам. */
.term-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 18px}
.term-head h2{margin:0}
/* Без ограничения ширины: с ним пояснение переносилось на вторую строку,
   хотя справа от заголовка места хватает. На узком экране оно само
   уходит под заголовок — у строки стоит перенос. */
.term-note{font-size:13px;line-height:1.5;color:#8a949c}
/* Вывоз после аренды — переключатель под адресом доставки: вывоз почти
   всегда нужен тем, кому везли, и адрес тот же. */
.vyvoz{display:flex;gap:12px;align-items:flex-start;margin:6px 0 14px;
       padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);
       cursor:pointer}
.vyvoz:hover{border-color:var(--blue)}
.vyvoz.on,.vyvoz:has(input:checked){border-color:var(--blue);background:#f3f8fd}
.vyvoz input{margin:3px 0 0;width:17px;height:17px;flex:none;accent-color:var(--blue)}
.vyvoz-mark{display:none}
.vyvoz-body{display:flex;flex-direction:column;gap:4px}
.vyvoz-body b{font-size:14.5px;color:var(--ink-strong)}
.vyvoz-body i{font-style:normal;font-size:13px;line-height:1.5;color:#6b7681}
.dlv-hint{display:none;margin:-6px 0 14px;font-size:12px;color:#dc130d}
.dlv-hint.on{display:block}
.fld-line .req{color:#dc130d;font-style:normal}
.fld-line.fld--err input{border-color:#dc130d}
.phone-box .drop--phones{min-width:0;padding:6px 0;left:auto;right:0}
.phone-box .drop--phones a{font-size:15px;font-weight:600;padding:9px 20px}
/* Кому анимации мешают — тем только тень, без движения. */
@media (prefers-reduced-motion: reduce){
  .sec-cats a,.sv-item{transition:box-shadow .18s ease}
  .sec-cats a:hover,.sv-item:hover{transform:none}
  .sv-photo img,.sv-item:hover .sv-photo img{transition:none;transform:none}
}

/* ------------------------------------------------- телефон: шапка и баннер */
@media (max-width:700px){
  /* Шапка идёт над баннером: наложение работает только на широком экране. */
  .top--hero .head-top{position:static;background:#fff}
  .top--hero{display:flex;flex-direction:column}
  /* Сверху строка поиска, под ней баннер, ниже полоса разделов. */
  .top--hero .head-top{order:1}
  .top--hero .hero{order:2}
  .top--hero .nav{order:3}

  /* Верхняя строка: только поиск и переход в каталог. */
  .head-in{grid-template-columns:auto minmax(0,1fr);align-items:center;
           gap:12px;padding:10px 0}
  .head-left{order:0;display:contents}
  .head-left .city,.logo,.head-right{display:none}
  .head-left .search{display:flex;width:100%;order:2}
  .head-light .search input{background:#fff}

  /* Баннер: текст во всю ширину и по центру, как на образце. */
  .hero{height:auto}
  .top--hero .hero{height:auto}
  .slide{height:auto;min-height:300px;padding:28px 0 34px}
  .slide-in{flex-direction:column;justify-content:center;padding:0}
  .slide-text{max-width:none;width:100%;text-align:center;padding:0 18px}
  .slide-text h2{font-size:22px;line-height:1.25;margin-bottom:12px}
  .slide-text p{font-size:14px;line-height:1.55;margin-bottom:20px}
  .slide-text .btn{display:inline-flex}
  /* Стрелки на узком экране только мешают — листают пальцем, как на образце. */
  .slider-arrow{display:none}
  .slider-dots{bottom:12px}

  /* Прилипшая шапка: знак, поиск и значки — остальное не помещается. */
  .sticky-in{gap:10px;padding:8px 0}
  .sticky .city,.sticky .phone-box,.sticky .phone{display:none}
  .sticky .logo img{height:24px}
  .sticky-icons{gap:0}
  .sticky-icons a{padding:6px}
  .sticky-icons a[title="Личный кабинет"]{display:none}

  /* Значки есть в прилипшей шапке — в полосе разделов они не помещаются. */
  .nav-icons{display:none}
  /* Тень кнопки чата шире экрана: боковой прокрутке взяться неоткуда. */
  body{overflow-x:hidden}
}

/* ------------------------------------ разделы под кнопкой: планшет и телефон */
/* Полоса меню ниже 1020 px не помещается даже мелким кеглем: крайние разделы
   уезжали в «+ ещё», а на телефоне полоса и вовсе стояла под баннером.
   Поэтому на узких экранах разделы уходят в выдвижное меню — как на образце. */
.menu-btn{display:none;order:-1;flex:none;border:0;background:none;cursor:pointer;
          padding:6px 4px;color:var(--ink-strong)}
.menu-btn i{display:block;width:22px;height:2px;margin:5px 0;border-radius:2px;
            background:currentColor}
.head-light .menu-btn{color:#fff}

.mmenu{position:fixed;inset:0;z-index:200;visibility:hidden}
.mmenu.on{visibility:visible}
.mmenu-back{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;
            transition:opacity .25s ease}
.mmenu.on .mmenu-back{opacity:1}
.mmenu-in{position:absolute;left:0;top:0;bottom:0;width:min(330px,86vw);background:#fff;
          overflow-y:auto;padding:50px 0 26px;box-shadow:0 0 30px rgba(0,0,0,.28);
          transform:translateX(-100%);transition:transform .25s ease}
.mmenu.on .mmenu-in{transform:none}
.mmenu-in a{display:block;padding:13px 22px;font-size:14px;font-weight:700;
            text-transform:uppercase;letter-spacing:.03em;color:var(--ink-strong)}
.mmenu-in a:hover{background:var(--bg)}
.mmenu-sub a{padding:10px 22px 10px 38px;font-size:14px;font-weight:500;
             text-transform:none;color:var(--ink)}
.mmenu-close{position:absolute;top:6px;right:10px;border:0;background:none;
             font-size:30px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 10px}
/* Значки идут строками с подписью: в ряд они не помещаются, а одна цифра
   рядом с картинкой ничего не говорит. */
.mmenu-icons{display:block;margin:12px 0 0;padding-top:10px;
             border-top:1px solid var(--rule)}
.mmenu-icons a{display:flex;align-items:center;gap:11px;color:var(--ink);
               padding:11px 22px;text-transform:none;font-weight:600;font-size:14px}
.mmenu-icons .ico{width:20px;height:20px}
.mmenu-icons .cnt{margin-left:auto;background:var(--blue);color:#fff;
                  border-radius:10px;min-width:20px;text-align:center;
                  font-size:12px;padding:1px 6px}
.mmenu-foot{margin-top:12px;padding:12px 22px 0;border-top:1px solid var(--rule)}
.mmenu-foot a{padding:8px 0;text-transform:none}
.mmenu-foot .mmenu-phone{font-size:18px}
body.menu-open{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .mmenu-in,.mmenu-back{transition:none}
}

/* Полоса разделов возвращена на ноутбуки (владелец 10.09.2026: «без
   горизонтального меню на маленьких экранах смотрится очень пусто»).
   Под кнопку она уходит только там, где шести пунктам со значками уже
   не поместиться даже мелким кеглем, — планшет стоя и телефон. */
@media (max-width:1019px){
  .nav{display:none}
  .menu-btn{display:block}
}
/* Чтобы все пункты влезали в одну строку, кегль и отступы ужимаются
   ступенями. Замер 10.09.2026 — сколько места нужно всем пунктам вместе
   со значками: 14px — 1156 точек, 13px — 1073, 12px — 988, 11px — 919.
   Пороги взяты с запасом на поля полосы и страницы. */
@media (max-width:1259px){
  .nav-in>a,.nav-item>a{font-size:13px;padding-left:7px;padding-right:7px}
}
@media (max-width:1174px){
  .nav-in>a,.nav-item>a{font-size:12px;padding-left:6px;padding-right:6px;
                        letter-spacing:.2px}
}
@media (max-width:1089px){
  .nav-in>a,.nav-item>a{font-size:11px;padding-left:5px;padding-right:5px}
}

/* Отступ сверху нужен только там, где шапка лежит на баннере: она занимает
   его верх. Ниже 900 px шапка стоит отдельным блоком над баннером, и этот
   отступ оставлял бы пустое место над заголовком. */
/* Ниже 1300 предмет не шире правой половины экрана: широкие снимки (садовая
   техника, инженеры) уходили за правый край — на 1024 срезало до 282 px, от
   женщины с кусторезом оставалась рука (владелец 12.09.2026). Узкие снимки
   правило не трогает. */
@media (max-width:1300px){
  .slide-fg{max-width:calc(50% - 16px)}
}
/* На 1020–1200 телефон в шапке ближе к середине, и высокий предмет (лестница)
   проходил за номером. Держим предмет ниже строки с телефоном. */
@media (min-width:1020px) and (max-width:1200px){
  .slide-fg{max-height:calc(100% - 80px)}
}
/* 1201–1590 (ноутбуки): широкий предмет не ужимаем до половины экрана,
   а сдвигаем левее, пока он не упрётся в 40 % ширины. На 14-дюймовом
   ноутбуке (1280) девушка с кусторезом и маляр выходили мелкими
   (владелец 14.09.2026). --w и --h — размер картинки, их ставит шаблон;
   ширина считается при высоте баннера 631, как у лестницы, которую
   ограничивает высота. Где предмет и так влезает, он стоит на 50 %.
   Высокий (выше 560, достаёт до шапки — маляр с удочкой) не двигаем:
   сдвинутый влево, он заходил на логотип; второе слагаемое в max()
   для него больше 50 %. Проценты тут — от ширины .wrap (не больше 1408),
   а срезает предмет край окна: (100vw + 100%) / 2 — правый край окна
   в координатах .wrap, минус 16 на полосу прокрутки. Иначе на больших
   экранах, где всё и так влезало, предмет тоже уезжал влево. */
@media (min-width:1201px){
  .slide-fg{max-width:60%;
    left:clamp(40%, max(calc((100vw + 100%) / 2 - 16px - min(var(--w) * 1px, var(--w) / var(--h) * 631px)),
                        calc((var(--h) - 560) * 50%)), 50%)}
}

@media (min-width:901px) and (max-width:1019px){
  /* Полосы разделов над баннером больше нет — текст поднимается на её место. */
  .slide-in{padding-top:90px}
  /* Слайд — во всю высоту баннера, как на широких экранах. Правило
     «слайд 320 px» из блока до 1000 px осталось с тех пор, когда высота
     баннера считалась от ширины: на 901–1000 слайд занимал половину
     баннера, ниже шла белая полоса, а заголовок уезжал под телефон
     в шапке (найдено 11.09.2026). */
  .slide{height:100%}
  /* Синей полосы тут нет, шапка лежит прямо на баннере (до 127 px
     в две строки) — высокий предмет заходил за логотип и «Войти». */
  .slide-fg{max-height:calc(100% - 140px)}
}

@media (max-width:700px){
  /* На телефоне шапка стоит над баннером на белом фоне: знак меню должен
     быть тёмным, даже когда слайд тёмный и остальная шапка светлая. */
  .head-light .menu-btn{color:var(--ink-strong)}
  /* Строка шапки прижималась к самым краям экрана — отступ как на образце. */
  .head-in{padding-left:16px;padding-right:16px}
}

@media (max-width:900px){
  /* Столбцы подвала встают друг под друга. Без отступа телефоны липли
     к кружкам соцсетей, а ссылки на оферту — к адресу. */
  .foot-contacts{margin-top:28px}
  .foot-legal{margin-top:22px}
}

/* Планшет в книжной ориентации (701–900 px).

   На широком экране баннер лежит подложкой под шапкой, а ниже 900 px он
   становится обычным блоком — и раньше вставал первым, накрывая логотип
   и кнопку своего же слайда. Ставим шапку над баннером, как на телефоне,
   но логотип и телефон оставляем: место для них есть.

   Диапазон закрыт снизу нарочно: ниже 700 px работает свой набор правил,
   и без нижней границы этот блок его перебивал бы. */
@media (min-width:701px) and (max-width:900px){
  .top--hero{display:flex;flex-direction:column}
  .top--hero .head-top{order:1;position:static;background:#fff}
  .top--hero .hero{order:2}
  .head-in{grid-template-columns:auto auto 1fr;gap:16px}
  .head-left{order:0}

  /* Шапка больше не лежит на снимке, поэтому светлый вариант ей не нужен:
     на белом фоне белые надписи и белый логотип пропадали. */
  .head-light .phone,.head-light .city,.head-light .city>b,
  .head-light .enter{color:var(--ink)}
  .head-light .phone{color:var(--ink-strong)}
  .head-light .enter .ico{color:var(--muted)}
  .head-light .menu-btn{color:var(--ink-strong)}
  .head-light .logo img.logo-color{display:block}
  .head-light .logo img.logo-white{display:none}
}


/* Полоса прокрутки убрана по просьбе владельца: на длинных страницах
   каталога она делит экран пополам вместе с картой и боковым меню.
   Прокрутка работает как обычно — колесом, клавишами и жестом. */
html{scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0}


/* ------------------------------------------------- текст раздела каталога */
/* Шёл вплотную за карточками и во всю ширину — читался как оборванный кусок
   страницы. Отделяем чертой и заголовком, строку ограничиваем по ширине. */
.cat-about{margin:44px 0 0;padding-top:30px;border-top:1px solid var(--rule)}
.cat-about>h2{font-size:20px;line-height:1.3;margin:0 0 14px}
.cat-about .doc{max-width:820px;color:var(--ink);padding-bottom:0}
.cat-about .doc p{margin:0 0 14px}
.cat-about .doc p:last-child{margin-bottom:0}
@media (max-width:700px){
  .cat-about{margin-top:32px;padding-top:22px}
  .cat-about>h2{font-size:18px}
}

/* ------------------------------------------ телефон: отчёт по рекламе 16.09.2026 */
.mbar{display:none}
@media (max-width:700px){
  /* Нижняя панель: позвонить, написать, корзина. */
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
        background:#fff;border-top:1px solid var(--rule);
        box-shadow:0 -4px 16px rgba(0,0,0,.06);
        padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
          justify-content:center;gap:3px;height:58px;font-size:11px;line-height:1;
          color:var(--ink);text-decoration:none}
  .mbar a+a{border-left:1px solid var(--rule)}
  .mbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
            stroke-linecap:round;stroke-linejoin:round}
  .mbar .mbar-call{background:var(--blue);color:#fff;font-weight:600}
  .mbar a.wait{opacity:.55}  /* чат ещё грузится */
  .mbar-cnt{position:absolute;top:7px;left:calc(50% + 6px);min-width:17px;height:17px;
            padding:0 4px;border-radius:9px;background:var(--blue);color:#fff;
            font-size:10px;line-height:17px;font-style:normal;text-align:center}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  /* Кнопка наверх — над панелью. Кружок онлайн-чата лежал поверх цены
     и кнопок «В корзину»: закрытым его не показываем, меню открывает
     «Написать» на панели, и тогда оно встаёт над панелью целиком. */
  .to-top{bottom:74px}
  .b24-widget-button-position-bottom-left{bottom:66px!important}
  .b24-widget-button-wrapper:not(.b24-widget-button-bottom){visibility:hidden!important}
  .b24-widget-button-shadow{display:none!important}

  /* Карточка: цена и кнопки сразу под фото, «Нашли дешевле» и наличие —
     после них. У КИТ А30 «В корзину» стояла на 855 px при экране 812. */
  .pd{gap:14px}
  .price{order:2}
  .pd-buy,.pd-oneclick{order:3}
  .pd-cheaper,.pd-stock{order:4}
  .pd-sec--desc,.pd-doc{order:5}
  .pd-chars{order:6}
  .pd-sec--acc,.pd-acc-box{order:7}
  .pd-consult{order:8}
  .pd-buy,.pd-stock,.pd-cheaper{margin:0}
  .pd-sec{margin-top:14px}
  /* Миниатюры — лентой под фото, а не столбиком слева: у газонокосилки
     столбик из семи снимков опускал кнопки до 1 219 px. */
  .pd-gallery{flex-direction:column-reverse;gap:12px;padding-top:0}
  /* min-width:0 обязателен: без него лента из семи миниатюр растягивала
     карточку до 478 px, и страница уезжала вбок. */
  .pd-box,.pd-gallery{min-width:0;max-width:100%}
  .pd-thumbs{flex-direction:row;width:auto;min-width:0;max-width:100%;overflow-x:auto;
             gap:8px;scrollbar-width:none;padding-bottom:2px}
  .pd-thumbs::-webkit-scrollbar{display:none}
  .pd-thumb{flex:none;width:54px;height:54px}
  .pd-big{width:100%}
  /* «Заказать в 1 клик» наполовину пряталась под панелью: фото ниже
     и поле карточки уже — кнопки поднимаются на ~35 px. */
  .pd-box{padding:14px}
  .pd-big img{max-height:230px}
}

/* «Полезно знать» в разделах и карточках (владелец 19.09.2026). */
.rel-articles{margin:48px 0 8px}
.rel-articles h2{font-size:24px;margin:0 0 22px}
.rel-articles .news-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* «Полезно знать» в правой колонке карточки (владелец 19.09.2026). */
.pd-articles{margin-top:22px;border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px 8px}
.pd-articles-t{font-size:15px;font-weight:700;color:var(--ink-strong);margin-bottom:12px}
.pd-article{display:flex;gap:12px;align-items:flex-start;padding:10px 0;
            border-top:1px solid var(--rule);color:var(--ink-strong)}
.pd-article:first-of-type{border-top:0;padding-top:0}
.pd-article-img{flex:none;width:72px;height:54px;border-radius:4px;overflow:hidden;background:var(--bg-2)}
.pd-article-img img{width:100%;height:100%;object-fit:cover;display:block}
.pd-article-txt b{display:block;font-size:13px;line-height:18px;font-weight:600}
.pd-article-txt time{display:block;margin-top:4px;font-size:12px;color:var(--muted-2)}
.pd-article:hover b{color:var(--blue)}
@media (max-width:1100px){ .pd-articles{order:9} }

/* Область рядом с городом в переключателе: Кировсков в стране два. */
.city-menu .city-reg{display:block;font-size:11px;color:var(--muted-2)}