/* === css/style.css — вайрфрейм «Центр паркета» (только ахроматика, mobile-first) === */
:root{
  --b:#000; --d:#333;
  --g1:#f7f7f7; --g2:#eee; --g3:#e0e0e0; --g4:#c9c9c9; --g5:#9e9e9e;
  --ann:#999;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.45 Arial,Helvetica,sans-serif;color:#1a1a1a;background:#fff}
html,body{overflow-x:clip}
a{color:#000}
.container{max-width:1240px;margin:0 auto;padding:0 12px}
h1{font-size:24px;margin:16px 0 10px;line-height:1.2}
h2{font-size:20px;margin:24px 0 12px}
h3{font-size:15px;line-height:1.3}
.sec{margin-top:26px}
@media(min-width:768px){h1{font-size:28px}h2{font-size:22px}}

/* === Заглушки фото/видео: серый прямоугольник с диагональным крестом === */
.ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  border:1px solid var(--g5);
  background:
    linear-gradient(to top right,transparent calc(50% - .5px),var(--g5) calc(50% - .5px),var(--g5) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to bottom right,transparent calc(50% - .5px),var(--g5) calc(50% - .5px),var(--g5) calc(50% + .5px),transparent calc(50% + .5px)),
    var(--g3);}
.ph>span{background:rgba(255,255,255,.9);border:1px dashed var(--g5);color:#666;font-size:12px;line-height:1.35;padding:3px 8px;max-width:82%;min-width:0;overflow-wrap:break-word}
.ph-11{aspect-ratio:1/1}.ph-43{aspect-ratio:4/3}.ph-169{aspect-ratio:16/9}.ph-1610{aspect-ratio:16/10}

/* === Скелетоны текста (серые полосы вместо абзацев) === */
.sk{height:10px;background:var(--g3);margin:7px 0}
.sk.h14{height:14px}
.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}

/* === Аннотации проектировщика === */
.ann{display:inline-block;font-size:11px;line-height:1.3;color:var(--ann);border:1px dashed #bbb;background:#fff;padding:1px 6px;margin:4px 0}
.ann-b{display:block;max-width:100%;overflow-wrap:break-word}

/* === Кнопки, поля, чекбоксы (touch-зоны ≥44px на мобильной) === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;
  border:1px solid var(--b);background:var(--d);color:#fff;font-size:14px;text-decoration:none;cursor:pointer;border-radius:3px;text-align:center}
.btn-o{background:#fff;color:#000}
.btn-b{display:flex;width:100%}
.inp{width:100%;min-height:44px;border:1px solid var(--d);padding:9px 10px;font:14px Arial;border-radius:2px;background:#fff}
textarea.inp{min-height:96px;resize:vertical}
select.inp{width:auto}
.fl{display:block;font-size:12px;color:#666;margin:10px 0 4px}
.w-a{width:auto!important}

/* === Шапка === */
.chk{position:absolute;left:-9999px;top:-9999px}
/* .hdr содержит ТОЛЬКО ряд 1 → sticky прилипает бессрочно (ряд 2-поиск — отдельный sibling .hdr-search в потоке) */
.hdr{background:#fff;position:sticky;top:0;z-index:60;border-bottom:2px solid var(--b)}
.hdr-top{display:flex;align-items:center;gap:8px;padding-top:6px;padding-bottom:6px;flex-wrap:nowrap}
.burger{width:44px;height:44px;flex:none;border:1px solid var(--d);background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
.logo{border:2px solid var(--b);font-weight:800;font-size:14px;line-height:1.05;padding:6px 9px;text-decoration:none;letter-spacing:.5px;flex:none;text-align:center}
.city{position:relative;flex:none}
.city summary{list-style:none;cursor:pointer;font-size:12px;min-height:44px;display:flex;align-items:center;background:#fff;gap:4px;padding:0 4px}
.city summary::-webkit-details-marker{display:none}
.city-dd{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--d);min-width:190px;z-index:70;padding:6px}
.city-dd a{display:block;padding:9px;text-decoration:none;font-size:14px}
.city-dd a:hover{background:var(--g2)}
/* ряд 2: поиск — только мобильная; в потоке, при скролле уходит вместе с контентом */
.hdr-search{padding-top:8px;padding-bottom:8px;background:#fff;border-bottom:2px solid var(--b)}
.search{display:flex}
.search input{flex:1;min-width:0;min-height:44px;border:1px solid var(--d);border-right:0;padding:9px 10px;font-size:14px}
.search button{width:52px;flex:none;border:1px solid var(--d);background:var(--g2);font-size:17px;cursor:pointer}
/* дубль формы поиска внутри ряда 1 — только десктоп */
.d-search{display:none}
.hicons{display:flex;gap:6px;margin-left:auto;flex:none}
.hicons a{width:44px;height:44px;border:1px solid var(--d);display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none;position:relative;background:#fff}
.badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;background:var(--d);color:#fff;border-radius:9px;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 3px}
@media(max-width:767px){
  /* мобильная: в ряду 1 только 🔍-якорь и 🛒; профиль/избранное/сравнение — в off-canvas меню */
  .hicons a[title="Профиль"],.hicons a[title="Избранное"],.hicons a[title="Сравнение"]{display:none}
}
@media(min-width:768px){
  /* десктоп: одна липкая строка — логотип · город · поле поиска · все иконки */
  .hdr{border-bottom:0}
  .hdr-top{padding-top:10px;padding-bottom:10px}
  .city summary{border:1px solid var(--d);padding:8px 10px;font-size:13px;gap:5px}
  .d-search{display:flex;flex:1 1 auto;min-width:0}
  .hdr-search{display:none}/* ряд 2 на десктопе не нужен */
  .hicons .s-go{display:none}/* якорь-лупа нужна только на мобильной */
}

/* === Главное меню: мобильная — off-canvas, десктоп — полоса в потоке === */
.mainnav{position:fixed;top:0;left:0;bottom:0;width:min(320px,88vw);background:#fff;z-index:96;
  display:flex;flex-direction:column;padding:14px;transform:translateX(-106%);transition:transform .2s ease;overflow:auto;box-shadow:4px 0 16px rgba(0,0,0,.2)}
.mainnav a{display:block;padding:12px 8px;border-bottom:1px solid var(--g3);text-decoration:none;font-size:16px}
.navx{width:44px;height:44px;border:1px solid var(--d);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:8px;align-self:flex-end}
#navchk:checked~.mainnav{transform:none}
#navchk:checked~.scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:95}
.scrim{display:none}
.ann-nav{margin-top:10px}
@media(min-width:768px){
  .burger,.navx,.ann-nav{display:none}
  /* полоса меню в потоке: всегда сразу под шапкой, слайдер под ней — наезд невозможен */
  .mainnav{position:relative;z-index:59;transform:none;box-shadow:none;overflow:visible;
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;
    max-width:1240px;margin:0 auto;padding:0 12px;width:auto;background:#fff;
    border-top:2px solid var(--b);border-bottom:2px solid var(--b)}
  /* все пункты верхнего уровня — единая строка по центру */
  .mainnav>a,.mainnav>.has-mega,.mainnav>.has-drop{display:flex;align-items:center}
  .mainnav>a,.mainnav>.has-mega>a,.mainnav>.has-drop>a{display:flex;align-items:center;gap:5px;
    padding:9px 13px;border:1px solid transparent;font-size:14px;min-height:44px;text-decoration:none}
  .mainnav>a:hover,.mainnav>.has-mega:hover>a,.mainnav>.has-drop:hover>a{border-color:var(--d);background:var(--g2)}
}

/* === Хлебные крошки === */
.crumbs{font-size:12px;color:#777;padding:10px 0 0;overflow-wrap:break-word}
.crumbs a{color:#666}

/* === Главная: широкий слайдер === */
.hero{position:relative;margin-top:12px}
.hero .ph{aspect-ratio:4/3}
/* подложка с оффером: заголовок + подзаголовок + текст + 2 CTA */
.h-cap{position:absolute;left:10px;right:10px;bottom:36px;background:rgba(255,255,255,.92);border:1px solid var(--d);padding:12px 14px}
.h-t{font-size:18px;line-height:1.2;margin-bottom:4px}
.h-sub{font-size:13px;font-weight:700;margin-bottom:4px}
.h-txt{font-size:12px;line-height:1.4;color:#444;margin-bottom:10px}
.h-btns{display:flex;gap:8px;flex-wrap:wrap}
.h-btns .btn{flex:1 1 150px;padding:8px 10px;font-size:13px}
.h-arr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:#fff;border:1px solid var(--d);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px}
.h-arr.l{left:10px}.h-arr.r{right:10px}
.h-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:7px}
.h-dots i{width:11px;height:11px;border:1px solid var(--d);background:#fff;border-radius:50%}
.h-dots i.on{background:var(--d)}
.hero-ann{position:absolute;right:10px;top:10px}
@media(min-width:768px){
  .hero .ph{aspect-ratio:21/9}
  /* привязка к левому краю контента: (ширина hero − 1240px)/2 + паддинг контейнера; на экранах ≤1264px = 12px как раньше */
  .h-cap{left:max(12px,calc((100% - 1240px)/2 + 12px));right:auto;bottom:56px;max-width:480px;padding:14px 16px}
  .h-t{font-size:24px;margin-bottom:6px}
  .h-sub{font-size:15px;margin-bottom:6px}
  .h-txt{font-size:13px;margin-bottom:12px}
  .h-btns .btn{flex:0 1 auto;font-size:14px;padding:10px 18px}
}
@media(max-width:767px){
  .h-arr{display:none}/* на мобильной — свайп, стрелки не перекрывают подложку */
}
@media(min-width:1200px){.hero .ph{aspect-ratio:32/10;max-height:600px}}

/* === Главная: 4 УТП === */
.usp{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.u{border:1px solid var(--d);background:var(--g1);padding:14px;display:flex;gap:12px;align-items:flex-start}
.u .ic{width:46px;height:46px;flex:none;border:1px solid var(--d);background:#fff;display:flex;align-items:center;justify-content:center;font-size:21px}
.u h3{margin-bottom:2px}
@media(min-width:768px){.usp{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.usp{grid-template-columns:repeat(4,1fr)}.u{flex-direction:column}}

/* === Чипы разделов === */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{border:1px solid var(--d);background:#fff;padding:8px 12px;text-decoration:none;font-size:13px;min-height:36px;display:inline-flex;align-items:center}
.chip:hover{background:var(--g2)}

/* === Сетки и карточки === */
.grid{display:grid;gap:12px}
.g2,.g3,.g4{grid-template-columns:1fr 1fr}
@media(min-width:768px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.g4{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--d);background:#fff;display:flex;flex-direction:column}
.card .ph{aspect-ratio:1/1}
.card .bd{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.nm{font-weight:600;font-size:13px;text-decoration:none;line-height:1.3}
.nm:hover{text-decoration:underline}
.artln{font-size:11px;color:#777}
.prc{font-size:16px;font-weight:700}
.prc small{font-weight:400;color:#777;font-size:11px;display:block}
.card .btn{margin-top:auto;font-size:13px;padding:8px 10px}
.mini-acts{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:4px}
.mini-acts a{width:32px;height:32px;border:1px solid var(--d);background:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px}
.dt{font-size:11px;color:#888}
.tag{position:absolute;top:6px;left:6px;background:var(--d);color:#fff;font-size:11px;padding:3px 7px;font-weight:700}
.lnk{font-size:13px}

/* === Каталог: раскладка фильтры+листинг === */
.cat{display:block}
@media(min-width:1024px){.cat{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start}}

/* === Фильтры (десктоп — колонка; мобильная — off-canvas) === */
.filters{border:1px solid var(--d);background:var(--g1);padding:12px;margin:10px 0 14px}
.f-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.f-x{display:none;width:44px;height:44px;border:1px solid var(--d);background:#fff;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
.f-group{border-top:1px solid var(--g4);padding:9px 0}
.f-group h3{font-size:13px;margin-bottom:5px}
.f-c{display:flex;align-items:center;gap:8px;font-size:13px;min-height:32px;cursor:pointer}
.f-c input{width:18px;height:18px;accent-color:#333}
.f-range{display:flex;gap:8px;align-items:center}
.f-range .inp{width:50%}
.f-slider{height:5px;background:var(--g4);position:relative;margin:14px 6px 6px}
.f-slider b{position:absolute;left:15%;right:20%;top:0;height:5px;background:var(--g5)}
.f-slider i{position:absolute;top:-4px;width:13px;height:13px;background:#fff;border:2px solid var(--d);border-radius:50%}
.f-slider i.l{left:15%}.f-slider i.r{right:20%}
.f-acts{display:flex;gap:8px;margin-top:10px}
.f-acts .btn{flex:1;padding:8px 6px;font-size:13px}
.fscrim{display:none}
@media(max-width:1023px){
  .filters{position:fixed;top:0;left:0;bottom:0;width:min(320px,88vw);z-index:90;overflow:auto;transform:translateX(-106%);transition:transform .2s;background:#fff;border:0;border-right:2px solid var(--b);margin:0}
  #fchk:checked~.page .filters{transform:none}
  #fchk:checked~.page .fscrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:80}
  .f-x{display:flex}
}

/* === Тулбар каталога === */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.toolbar .cnt{font-size:12px;color:#777}
.sortsel{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:#777}

/* === Гибридная пагинация === */
.pgn{display:flex;flex-direction:column;gap:10px;align-items:center;margin:20px 0}
.pgn .nums{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pgn a,.pgn b{min-width:44px;height:44px;border:1px solid var(--d);display:flex;align-items:center;justify-content:center;text-decoration:none;padding:0 10px;background:#fff}
.pgn b{background:var(--d);color:#fff}

/* === Sticky-панель снизу (мобильная): фильтры/корзина, покупка === */
.stbar{display:none}
@media(max-width:1023px){
  .stbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--b);display:flex;z-index:58;box-shadow:0 -2px 8px rgba(0,0,0,.08)}
  .stbar>*{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;text-decoration:none;font-size:15px;border:0;background:#fff;cursor:pointer;font-weight:600;border-radius:0}
  .stbar .pricep{flex-direction:column;gap:0;font-size:12px;font-weight:400}
  .stbar .pricep b{font-size:16px}
  .has-stbar{padding-bottom:74px}
}

/* === Карточка товара === */
.p-top{display:grid;gap:18px;margin-top:12px}
@media(min-width:768px){.p-top{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.p-top{grid-template-columns:1.05fr 1fr}}
.gal-t{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.gal-t .ph{aspect-ratio:1/1}
.fs-ic{position:absolute;right:8px;bottom:8px;width:36px;height:36px;background:#fff;border:1px solid var(--d);display:flex;align-items:center;justify-content:center;font-size:16px}
.pricebox{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:8px 0}
.p-m2{font-size:26px;font-weight:800}
.p-up{font-size:14px;color:#555}
.artline{font-size:12px;color:#777;display:flex;align-items:center;gap:4px;margin-bottom:2px}
.artline b{color:#333;font-weight:700}
.copybtn{width:32px;height:32px;flex:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:#555;cursor:pointer;border-radius:2px}
.copybtn:hover{background:var(--g2);color:#000}
.copytip{position:relative}
.tip{position:absolute;bottom:110%;left:0;background:var(--d);color:#fff;font-size:11px;padding:4px 8px;display:none;white-space:nowrap}
.tip.show{display:block}
.calc{border:1px solid var(--d);background:var(--g1);padding:12px;margin:10px 0}
.calc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.calc-row .inp{width:auto;min-width:0;flex:1 1 90px}
.swap{font-size:18px}
.trim{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.trim label{border:1px solid var(--d);background:#fff;min-height:44px;padding:7px 10px;display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}
.trim input{width:18px;height:18px;accent-color:#333}
.trim .man{display:flex;align-items:center;gap:6px;font-size:12px}
.trim .man .inp{width:74px}
.total{font-size:16px;font-weight:700}
.p-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.p-acts .btn{flex:1 1 140px;min-width:0}
.p-acts .lnk{width:44px;height:44px;border:1px solid var(--d);display:flex;align-items:center;justify-content:center;text-decoration:none;background:#fff;flex:none}
.p-miniutp{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.p-miniutp span{border:1px solid var(--g4);background:#fff;font-size:11px;color:#555;padding:4px 8px}
.calc-sub{font-size:12px;color:#666;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;margin-top:6px}
.trim-open{font-size:12px;color:#000;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.trim-open b{font-weight:700}
.p-specs{margin-top:14px}
.p-specs h3{font-size:14px;margin-bottom:4px}
.p-specs .rows{padding:0}
.p-specs .r{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--g3);font-size:13px}
.p-specs .r b{font-weight:400;color:#666}
.p-specs .r span{text-align:right;font-weight:600}
.p-specs .lnk{display:inline-block;margin-top:8px}

/* === Модальное окно «Запас на подрезку» (без JS, checkbox) === */
.tmodal{display:none;position:fixed;inset:0;z-index:97}
#trimchk:checked~.page .tmodal{display:block}
.tmodal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.25);cursor:pointer}
.tmodal-box{position:relative;z-index:1;width:min(440px,92vw);margin:12vh auto 0;background:#fff;border:2px solid var(--b);padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.tmodal-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.tmodal-x{width:44px;height:44px;flex:none;border:1px solid var(--d);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
#specs{scroll-margin-top:80px}/* отступ якоря от липкой шапки */

/* === Характеристики: 3 группы-аккордеона (details/summary — работают без JS) === */
.spec{margin:10px 0}
.spec details{border:1px solid var(--d);margin-bottom:8px;background:#fff}
.spec summary{list-style:none;cursor:pointer;padding:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center;background:var(--g2);min-height:44px}
.spec summary::-webkit-details-marker{display:none}
.spec summary::after{content:"+";font-size:18px}
.spec details[open] summary::after{content:"–"}
.spec .rows{padding:4px 12px 8px}
.spec .r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--g3);font-size:13px}
.spec .r:last-child{border:0}
.spec .r b{font-weight:400;color:#666}
.spec .r span{text-align:right;font-weight:600}

/* === Отзывы === */
.rev{border:1px solid var(--g4);padding:12px;margin-bottom:10px;background:#fff}
.rev .rh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.stars{font-size:15px;letter-spacing:2px;color:#333}
.rev .meta{font-size:11px;color:#888;margin-bottom:4px}
.revform{border:1px solid var(--d);padding:14px;background:var(--g1);margin-top:12px}
.revform .row2{display:grid;gap:0 12px}
@media(min-width:768px){.revform .row2{grid-template-columns:1fr 1fr}}
/* — раскладка «карточки слева / форма справа» — */
.rev-l{display:grid;gap:16px}
.rev-l .revform{margin-top:0}
.rev-list .rev:last-of-type{margin-bottom:0}
.rev-list .lnk{display:inline-block;margin-top:4px}
@media(min-width:768px){.rev-l{grid-template-columns:1fr 1fr;align-items:start}}
@media(min-width:1200px){.rev-l{grid-template-columns:1.35fr 1fr}}

/* === Услуги: сетка 2 колонки с крупными фото === */
.svc .card .ph{aspect-ratio:16/10}
.svc-price{font-weight:700;font-size:16px}
.steps{counter-reset:s;display:grid;gap:10px}
.step{border:1px solid var(--d);padding:12px;display:flex;gap:12px;background:#fff;align-items:flex-start}
.step::before{counter-increment:s;content:counter(s);width:34px;height:34px;flex:none;border:1px solid var(--d);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
@media(min-width:768px){.steps{grid-template-columns:1fr 1fr}}
.sd-price{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--b);padding:12px 14px;background:var(--g1);flex-wrap:wrap;gap:10px;margin:12px 0}
.sd-price .big{font-size:22px;font-weight:800}

/* === Портфолио: Объект — Задача — Результат === */
.obj{display:grid;gap:14px}
@media(min-width:768px){.obj{grid-template-columns:1.15fr 1fr}}
.obj-block{border:1px solid var(--d);padding:12px;background:#fff;margin-bottom:10px}
.obj-block h3{margin-bottom:6px;background:var(--g2);display:inline-block;padding:2px 8px;border:1px solid var(--d)}

/* === Статьи: текстоцентричная вёрстка === */
.article{max-width:780px;margin:0 auto}
.author{display:flex;gap:14px;align-items:center;border:1px solid var(--d);background:var(--g1);padding:12px;margin:14px 0}
.author .ph{width:72px;height:72px;flex:none}
.vrezka{border:2px solid var(--b);padding:12px;margin:18px 0;background:#fff}
.vrezka h3{margin-bottom:10px}
.art-meta{font-size:12px;color:#888;margin:6px 0 12px}

/* === Корзина: таблица → карточки на мобильной === */
.cart-l{display:grid;gap:14px;margin-top:12px}
@media(min-width:1024px){.cart-l{grid-template-columns:1fr 300px;align-items:start}}
.cart-t{width:100%;border-collapse:collapse}
.cart-t th,.cart-t td{border:1px solid var(--d);padding:8px;font-size:13px;text-align:left;vertical-align:middle}
.cart-t th{background:var(--g2)}
.cart-t .ph{width:84px;height:84px}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty .inp{width:64px;text-align:center}
.cart-side{border:1px solid var(--d);padding:14px;background:var(--g1)}
.cart-side .tot{display:flex;justify-content:space-between;font-size:17px;font-weight:700;margin:10px 0}
.cart-side .row{display:flex;justify-content:space-between;font-size:13px;color:#555;padding:4px 0}
@media(max-width:767px){
  .cart-t thead{display:none}
  .cart-t,.cart-t tbody,.cart-t tr,.cart-t td{display:block;width:100%}
  .cart-t tr{border:1px solid var(--d);margin-bottom:12px;padding:10px}
  .cart-t td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:10px;align-items:center}
  .cart-t td::before{content:attr(data-th);font-size:11px;color:#888}
  .cart-t td.c-img::before{display:none}
}

/* === Контакты === */
.cont{display:grid;gap:16px;margin-top:12px}
@media(min-width:768px){.cont{grid-template-columns:1.15fr 1fr}}
.map{aspect-ratio:4/3}
@media(min-width:768px){.map{aspect-ratio:16/10}}
.req .r{padding:7px 0;border-bottom:1px solid var(--g3);font-size:13px;display:flex;justify-content:space-between;gap:10px}
.req .r b{font-weight:400;color:#666}

/* === Карта прототипа (index) === */
.map-tbl{width:100%;border-collapse:collapse;margin:12px 0}
.map-tbl th,.map-tbl td{border:1px solid var(--d);padding:9px 10px;font-size:13px;text-align:left;vertical-align:top}
.map-tbl th{background:var(--g2)}
.map-tbl .fn{font-weight:700;white-space:nowrap}
.legend li{margin:6px 0 6px 18px;font-size:13px}
.tbl-scroll{overflow-x:auto}

/* === Футер === */
.ftr{border-top:2px solid var(--b);background:var(--g1);margin-top:34px}
.ftr-cols{display:grid;gap:18px;padding:22px 0}
.ftr h3{margin-bottom:8px}
.ftr-cols a{display:block;text-decoration:none;padding:4px 0;font-size:13px}
.ftr-cols a:hover{text-decoration:underline}
.ftr-p{font-size:13px;color:#444;margin-bottom:8px}
.soc{display:flex;gap:6px}
.soc a{width:36px;height:36px;border:1px solid var(--d);background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;text-decoration:none}
.ftr-bot{border-top:1px solid var(--g4);padding:14px 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:12px;color:#777}
.pays{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pay{border:1px solid var(--g5);background:#fff;font-size:10px;color:#666;padding:4px 8px;font-weight:700}
.counters{display:flex;gap:6px;align-items:center;margin-top:14px;flex-wrap:wrap}
.cnt{width:31px;height:31px;background:var(--g3);border:1px solid var(--g5);font-size:9px;color:#888;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}
@media(min-width:768px){.ftr-cols{grid-template-columns:repeat(4,1fr)}}

/* === Плавающая ссылка на карту прототипа (только десктоп) === */
.maplink{position:fixed;right:12px;bottom:12px;z-index:95;border:1px solid var(--d);background:#fff;padding:8px 12px;font-size:12px;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.15)}
@media(max-width:1023px){.maplink{display:none}}

/* — дополнение: сетка услуг на мобильной в 1 колонку — */
@media(max-width:767px){.svc{grid-template-columns:1fr}}

/* — статья вариант 2: цитата, подписи фото, содержание, чек-лист — */
.quote{border-left:3px solid #000;background:var(--g1);padding:14px 16px;margin:18px 0;position:relative}
.quote::before{content:"«";font-size:44px;line-height:1;color:#bbb;position:absolute;top:8px;left:10px}
.quote p{margin-left:38px;font-size:16px;font-weight:600;line-height:1.4}
.quote .who{display:block;margin:8px 0 0 38px;font-size:12px;color:#777;font-weight:400}
.ph-cap{display:block;font-size:11px;color:var(--ann);margin:4px 0 14px}
.toc{border:1px solid var(--d);background:#fff;padding:12px 14px;margin:16px 0}
.toc h3{margin-bottom:6px}
.toc a{display:block;padding:7px 0;font-size:14px;text-decoration:none;border-bottom:1px solid var(--g3);min-height:32px}
.toc a:last-child{border:0}
.toc a:hover{text-decoration:underline}
.chkl{list-style:none;margin:10px 0}
.chkl li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--g3);font-size:14px}
.chkl li:last-child{border:0}
.chkl .box{width:20px;height:20px;flex:none;border:2px solid var(--d);background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}

/* === Мега-меню «Каталог» и выпадающее «Услуги» === */
.d-only{display:none}
@media(min-width:768px){
  .d-only{display:flex}
  .m-only{display:none}
  .has-mega>a::after,.has-drop>a::after{content:"▾";font-size:11px;line-height:1;flex:none}
  /* супер-меню каталога: на всю ширину полосы меню, 3 колонки */
  .mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--d);border-top:2px solid var(--b);padding:16px 18px;z-index:65;box-shadow:0 6px 14px rgba(0,0,0,.10)}
  .has-mega:hover .mega,.has-mega:focus-within .mega{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .mm-h{display:block;font-weight:700;font-size:13px;padding:4px 0 7px;border-bottom:2px solid var(--b);margin-bottom:6px}
  .mega a.sub{display:block;padding:5px 0;font-size:13px;border:0;min-height:28px;text-decoration:none}
  .mega a.sub:hover{text-decoration:underline;background:none}
  /* простое выпадающее меню «Услуги» */
  .has-drop{position:relative}
  .drop{display:none;position:absolute;top:100%;left:0;min-width:300px;background:#fff;border:1px solid var(--d);border-top:2px solid var(--b);z-index:65;box-shadow:0 6px 14px rgba(0,0,0,.10);padding:6px 0}
  .has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
  .drop a{display:block;padding:10px 14px;font-size:14px;border:0;text-decoration:none}
  .drop a:hover{background:var(--g2)}
}

/* === Мобильное меню: аккордеоны в off-canvas === */
@media(max-width:767px){
  .mainnav details{border-bottom:1px solid var(--g3)}
  .mainnav summary{list-style:none;cursor:pointer;padding:12px 8px;font-size:16px;display:flex;justify-content:space-between;align-items:center;min-height:44px}
  .mainnav summary::-webkit-details-marker{display:none}
  .mainnav summary::after{content:"+";font-size:18px;flex:none}
  .mainnav details[open]>summary::after{content:"–"}
  .mainnav .mm-grp{border-bottom:0}
  .mainnav .mm-grp summary{padding-left:16px;font-size:14px;font-weight:700;min-height:40px}
  .mainnav .mm-grp a{display:block;padding:8px 8px 8px 28px;font-size:14px;border-bottom:0;min-height:36px}
  .mainnav .drop-m{display:flex;flex-direction:column}
  .mainnav .drop-m a{display:block;padding:10px 8px 10px 20px;font-size:14px;border-bottom:0;min-height:40px}
}

/* === Карточка товара: мобильная версия === */
@media(max-width:767px){
  .p-specs{display:none}/* дубль характеристик скрыт — смотрим полный список ниже */
  h1{overflow-wrap:break-word}
  /* калькулятор: первая строка полей — лейбл на всю ширину */
  .calc .calc-row:first-child .fl{flex:1 1 100%}
  .calc .calc-row:first-child .swap{display:none}
  .calc .calc-row:first-child #in-up{flex:0 1 80px}
  /* кнопки покупки: каждая на своей строке во всю ширину, иконки ♡ ⚖ — в одну строку пополам */
  .p-acts{flex-direction:row;flex-wrap:wrap}
  .p-acts .btn{flex:1 1 100%}
  .p-acts .lnk{flex:1 1 0;width:auto;min-width:0}
  .fs-ic{width:32px;height:32px}
}

/* === Мобильная шапка: якорь поиска и ссылки с бейджами в off-canvas === */
#search{scroll-margin-top:70px}/* цель якоря не прячется под липкий ряд 1 */
.navlinks{margin-top:12px}
.navlinks a{display:flex;align-items:center;gap:8px}
.navlinks .badge{position:static;margin-left:auto}