/* ═══ Внутренние страницы v2 ═══════════════════════════════════════════
   Поверх системы главной (v2.css, DESIGN.md): общие компоненты внутренних
   страниц. Справочник аргументов и классов — _state/specs/components-api.md.
   Все значения — токены .v2; новые токены страниц объявлены ниже.
   Написано от 375 px вверх: @media (min-width) только добавляет. */

.v2{
  /* токен страницы: ширина диалога просмотра на десктопе */
  --dlg-max:1120px;
  /* токен страницы: колонка кадра во врезке-предложении внутри статьи */
  --offer-img:200px;
  /* токен страницы: ширина H1 внутренней страницы — 65 знаков в две строки на 1440 */
  --h1-max:32ch;
  /* токен страницы: высота кадра в диалоге на телефоне — под кадром видны заголовок и стрелки */
  --dlg-img-h:58svh;
  /* токен страниц: длинный H1 — статьи длиннее 44 знаков (article.css) и документы (legal.css).
     На 390 — 28 px: до 70 знаков в три строки; на 320 «конфиденциальности» влезает в строку
     (при --t-h1 32 px выходит за край); от 1412 px — 48 px, как --t-h2. */
  --t-h1-long:clamp(1.75rem, 3.4vw, 3rem);
}

/* ── Секция внутренней страницы ─────────────────────────────────────── */
.v2 .psec{padding-block:var(--sec)}
/* Плотная секция (дополнения, «Добавить к портрету») — --sec-near: было --s-6, на телефоне это больше обычного --sec. */
.v2 .psec--tight{padding-block:var(--sec-near)}
/* Первая светлая секция сразу под шапкой страницы — стык одного фона: верх --sec-near, у шапки своё нижнее поле
   (DESIGN §5 «Ритм»; было --sec: на 1440 между шапкой и заголовком 200 px). Услуга (.shero + .works), сертификат, доп. услуги. */
.v2 .phead+:is(.psec,.works){padding-top:var(--sec-near)}
.v2 .psec__head{display:grid;gap:var(--s-3);justify-items:start;margin-bottom:var(--s-5)}
.v2 .psec__head .lead{max-width:var(--measure)}

/* ── Крошки ─────────────────────────────────────────────────────────── */
.v2 .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-1);font-size:var(--t-s);color:var(--ink-2)}
.v2 .crumbs li{display:inline-flex;align-items:center;gap:var(--s-1)}
.v2 .crumbs li+li::before{content:'›';color:var(--ink-2)}
.v2 .crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:var(--ul-off)}
.v2 .crumbs a:hover{color:var(--acc);text-decoration-color:currentColor}
.v2 .crumbs [aria-current]{color:var(--ink)}
/* Телефон (до 600 px): при трёх уровнях и больше последнее звено (повтор H1)
   скрыто — иначе оно переносится с висящим «›». В BreadcrumbList остаётся.
   При двух уровнях видно: без него осталась бы одна «Главная». Для всех крошек
   (monro_v2_crumbs(): .phead, шапки услуги, статьи, доп. услуг, СДЭК). */
.v2 .crumbs li:nth-child(n+3):last-child:has(>[aria-current]){display:none}
@media (min-width:600px){.v2 .crumbs li:nth-child(n+3):last-child:has(>[aria-current]){display:inline-flex}}

/* ── Шапка страницы .phead ──────────────────────────────────────────── */
.v2 .phead{padding-block:var(--s-3) var(--s-5)}
.v2 .phead__in{display:grid;gap:var(--s-3);justify-items:start}
.v2 .phead__in>*{min-width:0}
.v2 .phead__t{font:500 var(--t-h1)/1.08 var(--f-d);letter-spacing:-.02em;text-wrap:balance;max-width:var(--h1-max)}
.v2 .phead__meta{margin-top:calc(var(--s-1) * -1);font-size:var(--t-s);color:var(--ink-2)}
.v2 .phead__say{display:grid;gap:var(--s-3);justify-items:start}
.v2 .phead__lead{max-width:var(--measure-l)}
.v2 .phead__note{max-width:var(--measure);font-size:var(--t-s);color:var(--ink-2);text-wrap:pretty}
.v2 .phead__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-0) var(--s-1)}
.v2 .phead__price b{font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .phead__price span{font-size:var(--t-s);color:var(--ink-2)}
.v2 .phead__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.v2 .phead__media{justify-self:stretch;display:grid;gap:var(--s-1);margin:0}
.v2 .phead__frame{border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
.v2 .phead__frame img{width:100%;height:auto}
.v2 .phead__media--crop .phead__frame{aspect-ratio:var(--ratio)}
.v2 .phead__media--crop .phead__frame img{height:100%;object-fit:cover}
.v2 .phead__cap{font-size:var(--t-s);color:var(--ink-2)}
/* Врезка «Коротко» / «Условия»: строки на белой карточке с тенью. */
.v2 .phead__aside{justify-self:stretch;display:grid;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-img);background:var(--card);box-shadow:var(--shadow)}
.v2 .phead__aside-t{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .facts{display:grid;gap:var(--s-3);margin:0}
.v2 .facts__row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-0)}
.v2 .facts dt{font-size:var(--t-s);color:var(--ink-2)}
.v2 .facts dd{margin:0;font:600 var(--t-ui)/1.35 var(--f-d)}
.v2 .facts small{display:block;margin-top:var(--s-0);font:400 var(--t-s)/1.5 var(--f-b);color:var(--ink-2)}
/* Слот врезки (aside_html): телефон, мессенджеры, строка пояснения. Ссылки
   без класса — строчные --acc с целью 44 px; .pill и .btn — как везде. */
.v2 .phead__aside-x{display:grid;gap:var(--s-2);justify-items:start}
.v2 .phead__aside-x p{font-size:var(--t-s);color:var(--ink-2)}
.v2 .phead__aside-x b{font:600 var(--t-ui)/1.35 var(--f-d);color:var(--ink)}
.v2 .phead__aside-x a:not([class]){display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;color:var(--acc);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:var(--ul-off)}
.v2 .phead__aside-x a:not([class]):hover{color:var(--acc-ink)}
/* Телефон — значением, как строки врезки (Jost 600 --t-ui). */
.v2 .phead__aside-x a[href^="tel:"]:not([class]){font:600 var(--t-ui)/1.35 var(--f-d)}
.v2 .phead__aside-x ul{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:0;padding:0;list-style:none}
@media (max-width:599px){.v2 .phead__cta{justify-self:stretch}.v2 .phead__cta .btn{flex:1 1 100%}}
/* Планшет: кадр не шире холста техник на планшете — не растягивается на весь экран. */
@media (min-width:600px) and (max-width:899px){.v2 .phead__media,.v2 .phead__aside{max-width:var(--canvas-md)}}
@media (min-width:600px){
  .v2 .facts__row{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--s-3);align-items:baseline}
}
@media (min-width:900px){
  .v2 .phead{padding-block:var(--s-4) var(--s-6)}
  /* Кадр или врезка справа. С врезкой H1 над колонками на всю ширину; с кадром — см. ниже. */
  .v2 .phead--media .phead__in,.v2 .phead--aside .phead__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--col-gap);row-gap:var(--s-4)}
  .v2 .phead--media .phead__in>*,.v2 .phead--aside .phead__in>*{grid-column:1 / -1}
  .v2 .phead--media .phead__in>.phead__t,.v2 .phead--aside .phead__in>.phead__t{margin-bottom:calc(var(--s-1) * -1)}
  /* Текст сверху; кадр и врезка рядом с кадром — по центру высоты (аудит 13.10, CLAUDE.md §4). Врезка без кадра
     («Как заказать»: врезка от уровня H1, текст сразу под H1) — сверху. */
  .v2 .phead--media .phead__say,.v2 .phead--aside .phead__say{grid-column:1;align-self:start}
  .v2 .phead--media .phead__media{grid-column:2;align-self:center}
  .v2 .phead--aside:not(.phead--media) .phead__aside{grid-column:2;align-self:start}
  .v2 .phead--media.phead--aside .phead__aside{grid-column:2;align-self:center}
  /* С кадром без врезки (услуги, доп. услуги, хабы, работа галереи): H1 в левой колонке вместе с текстом, вся группа
     (H1, лид, цена, кнопки) по центру высоты кадра — пустые строки 1fr сверху и снизу, как у короткой шапки статьи
     (pages/article.css). Ревью 13.10: при H1 над обеими колонками и центрированном тексте между H1 и лидом было
     до 170 px пустоты; при тексте сверху — пустая половина кадра под кнопками (CLAUDE.md §4). Промежутки прежние:
     крошки → H1 и кадр --s-4, H1 → текст --s-3. Если текст выше кадра (доп. услуги на 1024), по центру
     встаёт кадр. Шапку статьи раскладывает pages/article.css. Врезка без кадра
     («Как заказать») — как была, сверху. */
  .v2 .phead--media:not(.phead--aside):not(.art-head) .phead__in{grid-template-rows:auto minmax(0,1fr) auto auto auto minmax(0,1fr);row-gap:0}
  .v2 .phead--media:not(.phead--aside):not(.art-head) .phead__in>.crumbs{grid-row:1}
  .v2 .phead--media:not(.phead--aside):not(.art-head) .phead__in>.phead__t{grid-column:1;grid-row:3;margin:var(--s-4) 0 0}
  .v2 .phead--media:not(.phead--aside):not(.art-head) .phead__in>.phead__meta{grid-column:1;grid-row:4;margin-top:var(--s-3)}
  .v2 .phead--media:not(.phead--aside):not(.art-head) .phead__in>.phead__say{grid-row:5;margin-top:var(--s-3)}
  .v2 .phead--media:not(.phead--aside):not(.art-head) .phead__in>.phead__media{grid-row:2 / -1;margin-top:var(--s-4);align-self:center}
  .v2 .phead__aside{padding:var(--s-5)}
}

/* ── Раскладка «оглавление + текст» .pgrid ──────────────────────────── */
.v2 .pbody{padding-bottom:var(--sec)}
.v2 .pgrid{display:grid;gap:var(--s-4);align-items:start}
.v2 .pgrid>*{min-width:0}
.v2 .pgrid__side{display:grid;gap:var(--s-4);align-content:start}
.v2 .pgrid__side>*,.v2 .toc{min-width:0}
.v2 .pgrid__after{margin-top:var(--s-5)}
@media (min-width:900px){
  .v2 .pgrid--toc{grid-template-columns:minmax(0,3fr) minmax(0,8fr);column-gap:var(--col-gap)}
  .v2 .pgrid__side{position:sticky;top:calc(var(--hdr) + var(--s-5));max-height:calc(100svh - var(--hdr) - var(--s-5) * 2);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* ── Оглавление .toc ────────────────────────────────────────────────── */
.v2 .toc__d{display:none}
.v2 .toc__list{display:grid;margin:0;padding:0;list-style:none}
.v2 .toc__a{display:flex;align-items:center;min-height:var(--tap);padding:var(--s-1) var(--s-2);border-radius:var(--r-btn);
  font:500 var(--t-s)/1.4 var(--f-b);color:var(--ink-2);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .toc__a:hover{color:var(--ink)}
.v2 .toc__a[aria-current]{background:var(--linen);color:var(--ink);font-weight:600}
/* Телефон: свёрнутый «Содержание» на льне, как вопрос в «Частых вопросах». */
.v2 .toc__m{border-radius:var(--r-btn);background:var(--linen)}
.v2 .toc__sum{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-height:var(--row);padding:var(--s-2) var(--s-3);
  font:600 var(--t-ui)/1.3 var(--f-d);list-style:none;cursor:pointer;border-radius:var(--r-btn)}
.v2 .toc__sum::-webkit-details-marker{display:none}
.v2 .toc__m[open] .qa__pm::after{transform:rotate(0)}
.v2 .toc__m .toc__list{padding:0 var(--s-1) var(--s-2)}
.v2 .toc__m .toc__a:hover,.v2 .toc__m .toc__a[aria-current]{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
/* Телефон, вариант pills: ряд якорей с прокруткой вбок. Правое поле — распоркой
   ::after (WebKit не считает padding-inline-end у прокручиваемого flex-ряда:
   последняя пилюля упиралась в край экрана). */
.v2 .toc__pills{display:flex;gap:var(--s-1);margin:calc(var(--s-1) * -1) calc(var(--gut) * -1);padding:var(--s-1) 0 var(--s-1) var(--gut);scroll-padding-inline:var(--gut);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;list-style:none}
.v2 .toc__pills::after{content:'';flex:0 0 calc(var(--gut) - var(--s-1))}
.v2 .toc__pills::-webkit-scrollbar{display:none}
.v2 .toc__pill[aria-current]{background:var(--ink);color:var(--card)}
/* «К содержанию» (режим details, до 900 px): пилюля --ink внизу окна, когда
   оглавление ушло под шапку; прячется, когда текст кончился (v2-pages.js,
   по прокрутке). Без скрипта — hidden. Появление — opacity и transform. */
.v2 .toc__up{position:fixed;right:var(--gut);bottom:calc(var(--s-3) + env(safe-area-inset-bottom));z-index:35;
  display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-chip);
  background:var(--ink);color:var(--card);font:600 var(--t-ui)/1 var(--f-d);box-shadow:var(--shadow);
  opacity:0;transform:translateY(var(--s-2));visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
.v2 .toc__up[hidden]{display:none}
.v2 .toc__up.is-on{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.v2 .toc__up:hover{background:color-mix(in srgb,var(--card) 16%,var(--ink))}
.v2 .toc__up-i{transform:rotate(-90deg)}
/* Над нижней панелью действия (.dock, footer-v2.php), если шаблон включил обе. */
.v2:has(.dock.is-on) .toc__up{bottom:calc(var(--dock-h) + var(--s-2) + env(safe-area-inset-bottom))}
@media (min-width:900px){
  .v2 .toc__m,.v2 .toc__pills,.v2 .toc__up{display:none}
  .v2 .toc__d{display:grid;gap:var(--s-1)}
  .v2 .toc__t{padding-inline:var(--s-2);font:600 var(--t-ui)/1.3 var(--f-d)}
  .v2 .toc__d .toc__a:hover{background:var(--linen)}
}

/* ── Длинный текст .prose ───────────────────────────────────────────── */
/* Ритм: отступ между соседями внутри текста и внутри групп Gutenberg;
   заголовки перебивают его своим отступом (специфичность выше на один тег). */
.v2 .prose{max-width:var(--measure-art);font-size:var(--t-body);line-height:1.6;color:var(--ink)}
.v2 .prose :where(h4,blockquote,table,figure,.wp-block-group,.wp-block-columns,.prose__scroll){margin:0}
.v2 .prose>*+*,.v2 .prose .wp-block-group>*+*,.v2 .prose .wp-block-column>*+*{margin-top:var(--s-3)}
.v2 .prose>.prose__lead,.v2 .prose .prose__lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2)}
.v2 .prose h2{font:500 var(--t-phrase)/1.2 var(--f-d);letter-spacing:-.01em;text-wrap:balance}
.v2 .prose h3{font:600 var(--t-h3)/1.25 var(--f-d);text-wrap:balance}
.v2 .prose h4{font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .prose>h2,.v2 .prose .wp-block-group>h2{margin-top:var(--s-6)}
.v2 .prose>h3,.v2 .prose .wp-block-group>h3{margin-top:var(--s-5)}
.v2 .prose>h4,.v2 .prose .wp-block-group>h4{margin-top:var(--s-4)}
.v2 .prose>:is(h2,h3,h4)+*,.v2 .prose .wp-block-group>:is(h2,h3,h4)+*{margin-top:var(--s-2)}
.v2 .prose>:first-child,.v2 .prose>.wp-block-group:first-child>:first-child{margin-top:0}
.v2 .prose :is(h2,h3,h4) strong{font-weight:inherit}
/* Мелкий кегль блоков Gutenberg (has-small-font-size и мельче) — не меньше
   --t-s: мельче на сайте не бывает (DESIGN §3). Глобальные стили WordPress
   ставят пресету 13 px с !important, поэтому и здесь !important. */
.v2 .prose :is(.has-small-font-size,.has-tiny-font-size,.has-x-small-font-size){font-size:var(--t-s) !important;line-height:1.5}
/* Сноска о Meta в конце статей с «Instagram*» (27.10, _state/tools/meta-note-r1027.php) — тихо, как подпись. */
.v2 .prose .meta-note{color:var(--ink-2);text-wrap:pretty}
/* Засечек и курсива нет (DESIGN §3): выделение — насыщенностью. */
.v2 .prose :is(em,i,cite){font-style:normal;font-weight:600}
.v2 .prose ul,.v2 .prose ol{display:grid;gap:var(--s-1);padding-left:var(--s-4)}
.v2 .prose ul{list-style:disc}
.v2 .prose ol{list-style:decimal}
.v2 .prose li::marker{color:var(--ink-2)}
.v2 .prose li>:is(ul,ol){margin-top:var(--s-1)}
/* Ссылка в тексте: строчная, переносится внутри абзаца. Поля по вертикали
   расширяют область касания до 44 px и не меняют высоту строки. */
.v2 .prose a:not([class]){padding-block:calc((var(--tap) - 1em) / 2);
  color:var(--acc);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:var(--ul-off)}
.v2 .prose a:not([class]):hover{color:var(--acc-ink)}
/* Картинки старых записей: без обтекания, не крупнее своих width/height (WordPress пишет в них настоящий размер файла).
   Ширина — из атрибута, а не width:auto (аудит скорости 13.10): с auto у ленивой картинки до загрузки был блок 0×0,
   и при загрузке текст ниже прыгал на её высоту (CLS 0,115 при прокрутке статьи). Пропорцию до загрузки держат
   атрибуты (aspect-ratio браузера), height:auto — по ширине колонки. */
.v2 .prose img{max-width:100%;height:auto;border-radius:var(--r-img)}
.v2 .prose :is(.alignleft,.alignright,.aligncenter){float:none;margin-inline:0}
.v2 .prose figure{display:grid;gap:var(--s-1);justify-items:start}
.v2 .prose :is(figcaption,.wp-element-caption){font-size:var(--t-s);color:var(--ink-2)}
/* Цитата и таблица — на льне, без линий (служебных линий нет, DESIGN §4). */
.v2 .prose blockquote{padding:var(--s-4);border-radius:var(--r-img);background:var(--linen)}
.v2 .prose blockquote>*+*{margin-top:var(--s-2)}
.v2 .prose blockquote cite{display:block;font-size:var(--t-s);font-weight:600;color:var(--ink-2)}
.v2 .prose__scroll{overflow-x:auto;border-radius:var(--r-btn)}
.v2 .prose table{width:100%;border-collapse:separate;border-spacing:0 var(--s-0);font-size:var(--t-s);line-height:1.5}
.v2 .prose :is(th,td){padding:var(--s-2) var(--s-3);background:var(--linen);text-align:left;vertical-align:top}
.v2 .prose th{font:600 var(--t-s)/1.4 var(--f-d);background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .prose tr>:first-child{border-radius:var(--r-btn) 0 0 var(--r-btn)}
.v2 .prose tr>:last-child{border-radius:0 var(--r-btn) var(--r-btn) 0}
.v2 .prose tr>:only-child{border-radius:var(--r-btn)}
/* [features] старой темы — список без иконок; [social_list] — мессенджеры ссылками. */
.v2 .prose .prose__feats{list-style:none;padding:0;gap:var(--s-1)}
.v2 .prose .prose__feats li{padding:var(--s-3);border-radius:var(--r-btn);background:var(--linen)}
.v2 .prose .prose__feats b{font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .prose .prose__soc{display:flex;flex-wrap:wrap;gap:0 var(--s-3);list-style:none;padding:0}
/* «Читать полностью» (prose.php fold, monro_v2_fold_html()): на телефоне первый
   абзац и строка-ссылка, остальное в details; от 600 px раскрыто (v2-pages.js),
   строки нет. Без скрипта строка видна на любой ширине. Ритм внутри details —
   как у .prose: текст не прямой потомок .prose. */
.v2 .prose__more>summary{list-style:none;cursor:pointer}
.v2 .prose__more>summary::-webkit-details-marker{display:none}
.v2 .prose__more[open]>summary{display:none}
.v2 .prose__more>*+*{margin-top:var(--s-3)}
.v2 .prose__more>summary+*{margin-top:0}
.v2 .prose__more>h2{margin-top:var(--s-6)}
.v2 .prose__more>h3{margin-top:var(--s-5)}
.v2 .prose__more>h4{margin-top:var(--s-4)}
.v2 .prose__more>:is(h2,h3,h4)+*{margin-top:var(--s-2)}
@media (min-width:600px){.v2.js .prose__more>summary{display:none}}
/* Документы: заголовки разделов на ступень меньше, капс оферты остаётся текстом документа. */
.v2 .prose--doc h2{font:600 var(--t-h3)/1.3 var(--f-d);letter-spacing:0}
.v2 .prose--doc h3{font:600 var(--t-ui)/1.35 var(--f-d)}
.v2 .prose--doc>h2,.v2 .prose--doc .wp-block-group>h2{margin-top:var(--s-5)}
.v2 .prose--doc>h3,.v2 .prose--doc .wp-block-group>h3{margin-top:var(--s-4)}
.v2 .prose--doc>:first-child{margin-top:0}
/* Длинные цепочки с неразрывными пробелами в тексте документов не выходят за колонку и вне страниц документов (витрина /v2-kit/, 320 px). */
.v2 .prose--doc{overflow-wrap:break-word}

/* ── Строки фактов .rows ────────────────────────────────────────────── */
.v2 .rows__title{margin-bottom:var(--s-2);font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .rows{display:grid;gap:var(--s-1);margin:0}
.v2 .rows__row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "n n";align-items:baseline;align-content:center;gap:var(--s-0) var(--s-3);
  min-height:var(--row);padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);background:var(--linen)}
.v2 .rows__label{grid-area:l;font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .rows__label a{display:inline-block;min-height:var(--tap);padding-block:calc((var(--tap) - 1lh) / 2);margin-block:calc((1lh - var(--tap)) / 2);color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:var(--ul-off)}
.v2 .rows__label a:hover{color:var(--acc);text-decoration-color:currentColor}
.v2 .rows__val{grid-area:v;margin:0;font:600 var(--t-ui)/1.3 var(--f-d);text-align:right;white-space:nowrap}
.v2 .rows__val s{margin-left:var(--s-1);font:400 var(--t-s)/1.3 var(--f-b);color:var(--ink-2)}
.v2 .rows__note{grid-area:n;margin:0;font-size:var(--t-s);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* Фраза вместо цены — под названием. */
.v2 .rows__row--long{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "v" "n"}
.v2 .rows__row--long .rows__val{text-align:left;white-space:normal;font:500 var(--t-ui)/1.4 var(--f-b)}
.v2 .rows__row--icon{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i l" "i v" "i n";column-gap:var(--s-3)}
/* Строка с иконкой на телефоне: значение под названием — рядом с иконкой в
   узкой колонке «Самовывоз · бесплатно» не помещалось в строку. От 600 px — в линию. */
.v2 .rows__row--icon .rows__val{text-align:left;white-space:normal}
.v2 .rows__icon{grid-area:i;align-self:start;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);background:var(--card);color:var(--acc-ink)}
.v2 .rows__icon svg{width:var(--ico-l);height:var(--ico-l)}
.v2 .rows--num .rows__val{font-size:var(--t-num);line-height:1.1}
/* Воздух без подложки — внутри карточек, врезок и диалога. */
.v2 .rows--plain{gap:var(--s-2)}
.v2 .rows--plain .rows__row{min-height:0;padding:0;background:none;border-radius:0}
.v2 .rows--plain .rows__icon{background:var(--linen)}
/* Тонкие линии --rule — только доставка и оплата (DESIGN §4, §8.13). */
.v2 .rows--ruled{gap:0;border-bottom:1px solid var(--rule)}
.v2 .rows--ruled .rows__row{padding:var(--s-3) 0;border-radius:0;background:none;border-top:1px solid var(--rule)}
.v2 .rows--ruled .rows__icon{width:var(--ico-l);height:var(--ico-l);background:none}
@media (min-width:600px){
  .v2 .rows__row--long{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-areas:"l v" "n n"}
  .v2 .rows__row--long .rows__val{text-align:right}
  .v2 .rows__row--icon{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i l v" "i n n"}
  .v2 .rows__row--icon .rows__val{text-align:right;white-space:nowrap}
  .v2 .rows__row--icon.rows__row--long{grid-template-columns:auto minmax(0,2fr) minmax(0,3fr)}
  .v2 .rows__row--icon.rows__row--long .rows__val{white-space:normal}
}

/* ── Карточки услуг .cards ──────────────────────────────────────────── */
.v2 .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-2);margin:0;padding:0;list-style:none}
.v2 .card{position:relative;display:grid;min-width:0}
/* Кадр и текст; текст забирает остаток высоты карточки, цена — по его низу:
   в ряду цены стоят на одной линии при названиях в одну и две строки.
   position:relative у .card — контейнер скрытых .vh («старая цена», «скидка»):
   иначе в ленте они позиционируются от окна и растягивают документ вбок. */
.v2 .card__a{display:grid;grid-template-rows:auto 1fr;gap:var(--s-2);align-content:start;border-radius:var(--r-img)}
.v2 .card__a:not(:has(>.card__img)){grid-template-rows:1fr}
.v2 .card__img{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
.v2 .card__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-img) var(--ease)}
.v2 .card__a:hover .card__img img{transform:scale(1.03)}
/* Скидка — чип в правом верхнем углу кадра: в разметке он после цены, на кадр его ставит сетка ссылки.
   Подпись кадра карточки (аргумент note, cards.php; метки «Пример» нет — решение 01.10) — .card__note:
   тихая пилюля в левом нижнем углу, не на лице. Раньше она шла классом .ex-tag и была невидима. */
.v2 .card__a>.card__img{grid-row:1;grid-column:1}
.v2 .card__note{position:absolute;left:var(--s-2);bottom:var(--s-2);z-index:1;display:inline-flex;align-items:center;max-width:calc(100% - var(--s-2) * 2);min-height:var(--chip-h);padding:0 var(--s-1);
  border-radius:var(--r-chip);background:var(--card);color:var(--ink-2);font:600 var(--t-s)/1.2 var(--f-b);pointer-events:none}
/* Плашка вместо кадра (tile): 4:5 на льне, заголовок сверху, цена «от» у нижнего края.
   Свой фон (купон сертификата на хабах) — классом карточки в стиле страницы. */
.v2 .card__tile{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--s-1);padding:var(--s-4) var(--s-3)}
.v2 .card__tile-t{align-self:start;font:500 var(--t-h3)/1.15 var(--f-d);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.v2 .card__tile-v{align-self:end;font:600 var(--t-num)/1.1 var(--f-d);color:var(--ink)}
.v2 .card__a>.card__off{position:relative;z-index:1;grid-row:1;grid-column:1;justify-self:end;align-self:start;margin:var(--s-2)}
.v2 .card__say{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-0);min-width:0}
.v2 .card__say>*{max-width:100%}
.v2 .card__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-0) var(--s-1);font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .card__a:hover .card__name{color:var(--acc)}
.v2 .card__line{font-size:var(--t-s);color:var(--ink-2)}
.v2 .card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-0) var(--s-1);margin-top:auto;padding-top:var(--s-0)}
.v2 .card__price b{font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .card__price s{font-size:var(--t-s);color:var(--ink-2)}
.v2 .card__more{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-1);font-weight:600;color:var(--acc);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:var(--ul-off-l)}
.v2 .card__more svg{transition:transform var(--dur) var(--ease)}
.v2 .card__a:hover .card__more svg{transform:translateX(var(--nudge))}
/* Лента шагов блока how (3D-фигурки, «Как заказать»): у края ленты свайп вбок не листает
   страницу «назад» (mobile-rules §2). В общем списке v2.css .hsteps нет — здесь для внутренних страниц. */
.v2 .hsteps{overscroll-behavior-x:contain}
/* Ряд 3–4 карточек на телефоне (до 600 px) — не лента вбок, а столбик строк (заказчик 27.10: «горизонтальный
   скролл важного контента — зло», карточки компактные): кадр 4:5 шириной --read-thumb слева, название, строка,
   цена «от» и «Подробнее» справа; чип скидки — в углу миниатюры. Сюжеты хаба — своей сеткой (pages/hub.css).
   Счётчик и стрелки (аргумент bar) скрыты. С 600 px — сетка 3 / 4 колонки, как была. */
@media (max-width:599px){
  .v2 .cards--rail{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .v2 .cards--rail:not(.hub-cards)>.card+.card{padding-top:var(--s-3);border-top:1px solid var(--rule)}
  .v2 .cards--rail:not(.hub-cards) .card__a{grid-template-columns:var(--read-thumb) minmax(0,1fr);grid-template-rows:auto;column-gap:var(--s-3);align-items:center}
  .v2 .cards--rail:not(.hub-cards) .card__a>.card__img{grid-row:1;grid-column:1}
  .v2 .cards--rail:not(.hub-cards) .card__a>.card__say{grid-row:1;grid-column:2}
  .v2 .cards--rail:not(.hub-cards) .card__a>.card__off{margin:var(--s-0)}
  .v2 .cards--rail:not(.hub-cards) .card__tile{padding:var(--s-1)}
  .v2 .cards--rail:not(.hub-cards) .card__tile-t{font-size:var(--t-s)}
  .v2 .cards--rail:not(.hub-cards) .card__tile-v{font-size:var(--t-ui)}
  .v2 .cards--rail .card__price{margin-top:var(--s-0)}
  .v2 .cards__bar{display:none}
}
/* Счётчик и стрелки ленты (аргумент bar): только пока ряд — лента. */
.v2 .cards__bar{margin-top:var(--s-3)}
@media (min-width:600px){.v2 .cards{grid-template-columns:repeat(3,minmax(0,1fr))}.v2 .cards__bar{display:none}}
@media (min-width:900px){
  .v2 .cards{gap:var(--s-5) var(--s-4)}
  .v2 .cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .v2 .card__name{font-size:var(--t-h3);line-height:1.25}
}

/* ── Сетка статей .posts ────────────────────────────────────────────── */
.v2 .posts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5) var(--s-4);margin:0;padding:0;list-style:none}
.v2 .posts .read__a{display:grid;gap:var(--s-2);align-content:start}
.v2 .posts .read__cover{aspect-ratio:3/2}
.v2 .posts .read__cover--tall img{object-position:50% 20%}
.v2 .read__say{display:grid;gap:var(--s-1);align-content:start}
.v2 .read__meta{font-size:var(--t-s);color:var(--ink-2)}
.v2 .posts .read__t{font:600 var(--t-ui)/1.35 var(--f-d);-webkit-line-clamp:3;text-wrap:pretty}
.v2 .read__ex{color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}
.v2 .read__go{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);font-weight:600;color:var(--acc);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:var(--ul-off-l)}
.v2 .read__go svg{transition:transform var(--dur) var(--ease)}
.v2 .read__a:hover .read__go svg{transform:translateX(var(--nudge))}
.v2 .read--nocover .read__a{height:100%;padding:var(--s-4);border-radius:var(--r-img);background:var(--linen)}
.v2 .posts .read--lead .read__t{display:block;font:500 var(--t-phrase)/1.2 var(--f-d);letter-spacing:-.01em;text-wrap:balance}
.v2 .posts__empty{color:var(--ink-2)}
.v2 .pfoot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-5)}
.v2 .pfoot__count{font-size:var(--t-s);color:var(--ink-2)}
@media (min-width:600px){
  .v2 .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2 .posts .read--lead{grid-column:1 / -1}
}
@media (min-width:900px){
  .v2 .posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-4)}
  /* Обложка и текст поровну: заголовок --t-phrase в колонке 5fr уходил в три-четыре строки. */
  .v2 .posts .read--lead .read__a{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:var(--col-gap);align-items:center}
  .v2 .posts .read--lead .read__say{gap:var(--s-2)}
}

/* ── Пагинация .pager ───────────────────────────────────────────────── */
.v2 .pager{margin-top:var(--s-5)}
.v2 .pager__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);margin:0;padding:0;list-style:none}
.v2 .pager__n{justify-content:center;min-width:var(--tap);padding:0 var(--s-2)}
.v2 .pager__gap{min-width:var(--s-4);text-align:center;color:var(--ink-2)}
.v2 .pager__step--prev svg{transform:rotate(180deg)}

/* ── Фильтры и выдача ───────────────────────────────────────────────── */
.v2 .filters{display:grid;gap:var(--s-3);justify-items:start}
.v2 .filters>*{min-width:0;max-width:100%}
.v2 .filters__group{display:grid;gap:var(--s-1)}
.v2 .filters__label{font-size:var(--t-s);font-weight:600;color:var(--ink-2)}
.v2 .filters__pills{display:flex;gap:var(--s-1);margin:0;padding:0;list-style:none}
.v2 .pill[aria-current="true"],.v2 .pill[aria-current="page"]{background:var(--ink);color:var(--card)}
.v2 .band--butter .pill[aria-current="true"],.v2 .band--butter .pill[aria-current="page"]{background:var(--ink);color:var(--card)}
.v2 .filters__toggle{color:var(--acc)}
.v2.js .filters__pills:not(.is-open) .filters__extra:not(.is-on){display:none}
.v2:not(.js) .filters__more{display:none}
/* Пока догружается выдача — только прозрачность. */
.v2 [data-live]{transition:opacity var(--dur) var(--ease)}
.v2 [data-live][aria-busy="true"]{opacity:.5}
@media (max-width:599px){
  /* Телефон: каждая группа — одна строка пилюль с прокруткой вбок и снапом.
     Правое поле — распоркой ::after: WebKit не считает padding-inline-end у
     прокручиваемого flex-ряда, и последняя пилюля не доезжала до края. Ряд не
     ловит вертикальный свайп и не листает страницу назад (overscroll-behavior-x). */
  .v2 .filters__group{justify-self:stretch}
  .v2 .filters__pills{margin:calc(var(--s-1) * -1) calc(var(--gut) * -1);padding:var(--s-1) 0 var(--s-1) var(--gut);scroll-padding-inline:var(--gut);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  .v2 .filters__pills::after{content:'';flex:0 0 calc(var(--gut) - var(--s-1))}
  .v2 .filters__pills>li{scroll-snap-align:start}
  /* Последняя — к правому краю: иначе снап возвращает ряд к началу длинной
     последней пилюли («Снимки у заказчиков» на 320 px) и конец недостижим. */
  .v2 .filters__pills>li:last-child{scroll-snap-align:end}
  .v2 .filters__pills::-webkit-scrollbar{display:none}
}
@media (min-width:600px){.v2 .filters__pills{flex-wrap:wrap}}
/* .filters--inline (аргумент inline): подпись группы в строку с пилюлями, колонка
   подписей по самой длинной (subgrid), подпись по центру первого ряда пилюль.
   На телефоне ряд пилюль прокручивается от колонки подписи до края экрана. */
.v2 .filters--inline{grid-template-columns:max-content minmax(0,1fr);gap:var(--s-2) var(--s-3);justify-items:stretch}
.v2 .filters--inline .filters__group{grid-column:1 / -1;grid-template-columns:subgrid;gap:var(--s-1) var(--s-3);align-items:start}
.v2 .filters--inline .filters__label{padding-block:calc((var(--tap) - 1lh) / 2)}
.v2 .filters--inline .filters__reset{grid-column:2;justify-self:start}
@media (max-width:599px){
  .v2 .filters--inline .filters__pills{margin-left:calc(var(--s-1) * -1);padding-left:var(--s-1);scroll-padding-inline:var(--s-1) var(--gut)}
}

.v2 .wres{display:grid;gap:var(--s-3)}
.v2 .wres__count{font-size:var(--t-s);color:var(--ink-2)}
.v2 .wres .pfoot__more{justify-self:start;margin-top:var(--s-2)}
.v2 .wres__empty{display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-5) var(--s-4);border-radius:var(--r-img);background:var(--linen)}
.v2 .works__grid--page{align-items:start}
.v2 .work__a{display:block;border-radius:var(--r-img);overflow:hidden}
.v2 .work__a img{transition:transform var(--dur-img) var(--ease)}
.v2 .work__a:hover img{transform:scale(1.03)}
.v2 .work__tech{display:inline-block;min-height:var(--tap);padding-block:calc((var(--tap) - 1lh) / 2);margin-block:calc((1lh - var(--tap)) / 2);
  font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:var(--ul-off)}
.v2 .work__tech:hover{color:var(--acc-ink)}
/* Телефон и планшет: ссылка техники под кадром — цель 44 px, но между ней и кадром
   (своим сверху и следующим снизу) не меньше 8 px: цель растёт только вниз от строки
   подписи (сверху её отделяет промежуток figure --s-2), ряды сетки — через --s-5,
   «Показать ещё» под последним рядом — через --s-4. Иначе касание по подписи попадало
   в кадр и наоборот. От 900 px (мышь) — как было. */
.v2 .works__grid--page{row-gap:var(--s-5)}
.v2 .works__grid--page .work figure{gap:var(--s-2)}
.v2 .works__grid--page .work__tech{padding-block:0 calc(var(--tap) - 1lh);margin-block:0 calc(1lh - var(--tap))}
.v2 .works__grid--page~.pfoot__more{margin-top:var(--s-4)}
@media (min-width:600px){.v2 .works__grid--page{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  .v2 .works__grid--page{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
  .v2 .works__grid--page .work figure{gap:var(--s-1)}
  .v2 .works__grid--page .work__tech{padding-block:calc((var(--tap) - 1lh) / 2);margin-block:calc((1lh - var(--tap)) / 2)}
  .v2 .works__grid--page~.pfoot__more{margin-top:var(--s-2)}
}

/* ── Диалог просмотра .dlg ──────────────────────────────────────────── */
/* Телефон: во весь экран, кадр сверху, текст и кнопки ниже. Десктоп: панель по центру. */
.v2 .dlg{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;overflow:hidden;
  background:var(--paper);color:var(--ink);opacity:0;transform:translateY(var(--s-2));
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .dlg.is-on{opacity:1;transform:none}
.v2 .dlg::backdrop{background:color-mix(in srgb,var(--ink) 64%,transparent)}
/* Телефон: панель .dlg__bar закреплена у нижнего края окна (под большим пальцем): «Закрыть»
   слева, стрелки справа, сливки 92 % с размытием, как нижняя панель .dock; safe-area снизу.
   Текст окна не уходит под панель — нижнее поле .dlg__in на её высоту. Кадр листается
   смахиванием вбок (touch-action: вертикальная прокрутка и масштаб остаются у браузера). */
.v2 .dlg__in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"fig" "say";align-content:start;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:calc(var(--tap) + var(--s-2) * 2 + env(safe-area-inset-bottom))}
.v2 .dlg__fig{grid-area:fig;display:grid;place-items:center;padding:calc(var(--tap) + var(--s-3)) var(--gut) var(--s-3);background:var(--linen);touch-action:pan-y pinch-zoom}
.v2 .dlg__img{width:auto;max-width:100%;height:auto;max-height:var(--dlg-img-h);border-radius:var(--r-img);object-fit:contain;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .dlg.is-step .dlg__img{opacity:0}
.v2 .dlg.is-drag .dlg__img{transition:none}
.v2 .dlg__bar{position:fixed;inset:auto 0 0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:var(--s-2) var(--gut) calc(var(--s-2) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.v2 .dlg__nav{display:flex;gap:var(--s-1);margin-left:auto}
.v2 .dlg__done{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-chip);background:var(--card);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);font:600 var(--t-ui)/1 var(--f-d);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .dlg__done:hover{background:var(--ink);color:var(--card)}
.v2 .dlg__done-x{position:relative;width:var(--ico);height:var(--ico)}
/* Кнопка действия окна («Хочу такой же») на телефоне — в этой панели: v2-pages.js переносит её сюда
   до 900 px. В первом виде окна она целиком над краем экрана и под большим пальцем, а не под панелью
   (раньше панель лежала поверх неё). Ряд «круг-крестик · кнопка · стрелки», высота — --dock-h, как у .dock;
   «Закрыть» — круг --tap, подпись остаётся для скринридера. Подпись кнопки в ряд не входит (длинная
   или узкий экран) — скрипт ставит .dlg__bar--2: кнопка первой строкой во всю ширину. */
.v2 .dlg__bar .btn{flex:1 1 auto;min-width:0;padding-inline:var(--s-3);white-space:nowrap}
.v2 .dlg__bar:has(.btn:not([hidden])){column-gap:var(--s-1)}
.v2 .dlg__bar:has(.btn:not([hidden])) .dlg__done{flex:none;justify-content:center;width:var(--tap);padding:0}
.v2 .dlg__bar .dlg__nav{flex:none}
.v2 .dlg__bar:has(.btn:not([hidden])) .dlg__done-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.v2 .dlg__bar:has(.btn:not([hidden])) .dlg__nav{margin-left:0}
.v2 .dlg__in:has(.dlg__bar .btn:not([hidden])){padding-bottom:calc(var(--btn-h) + var(--s-2) * 2 + env(safe-area-inset-bottom))}
.v2 .dlg__bar--2{flex-wrap:wrap;row-gap:var(--s-2)}
.v2 .dlg__bar--2 .btn{order:-1;flex-basis:100%;white-space:normal}
.v2 .dlg__bar--2:has(.btn:not([hidden])) .dlg__nav{margin-left:auto}
.v2 .dlg__in:has(.dlg__bar--2 .btn:not([hidden])){padding-bottom:calc(var(--btn-h) + var(--tap) + var(--s-2) * 3 + env(safe-area-inset-bottom))}
/* Панель в две строки выше на --tap + --s-2: кадр ниже на столько же, чтобы счётчик и заголовок
   окна остались над панелью и на 320×568 (поля кадра --tap + --s-3 * 2, счётчик и заголовок ≈ --s-6). */
.v2 .dlg__in:has(.dlg__bar--2 .btn:not([hidden])) .dlg__img{max-height:min(var(--dlg-img-h), calc(100svh - var(--btn-h) - var(--tap) * 2 - var(--s-2) * 3 - var(--s-3) * 3 - var(--s-6)))}
.v2 .dlg__say{grid-area:say;display:grid;gap:var(--s-2);align-content:start;padding:var(--s-2) var(--gut) var(--s-5)}
.v2 .dlg__count{min-height:1lh;font:600 var(--t-s)/1.4 var(--f-d);color:var(--ink-2)}
.v2 .dlg__t{font:500 var(--t-phrase)/1.2 var(--f-d);letter-spacing:-.01em;text-wrap:balance}
.v2 .dlg__sub{color:var(--ink-2)}
.v2 .dlg__rows{margin-top:var(--s-1)}
.v2 .dlg__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-2)}
.v2 .dlg__go:not(:has(:not([hidden]))){display:none}
.v2 .dlg__x{position:absolute;top:var(--s-2);right:var(--s-2);z-index:2;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);
  background:var(--card);color:var(--ink);box-shadow:var(--shadow);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .dlg__x:hover{background:var(--ink);color:var(--card)}
.v2 .dlg__x span{position:relative;width:var(--ico);height:var(--ico)}
.v2 .dlg__x span::before,.v2 .dlg__x span::after,.v2 .dlg__done-x::before,.v2 .dlg__done-x::after{content:'';position:absolute;left:0;top:calc(50% - var(--line) / 2);width:100%;height:var(--line);border-radius:var(--r-chip);background:currentColor;transform:rotate(45deg)}
.v2 .dlg__x span::after,.v2 .dlg__done-x::after{transform:rotate(-45deg)}
html.dlg-open{overflow:hidden}
@media (max-width:599px){.v2 .dlg__go .btn{flex:1 1 100%}}
@media (min-width:900px){
  .v2 .dlg{inset:0;width:min(calc(100% - 2 * var(--gut)),var(--dlg-max));height:fit-content;max-height:calc(100svh - 2 * var(--s-5));margin:auto;
    border-radius:var(--r-panel);background:var(--card);box-shadow:var(--shadow)}
  .v2 .dlg__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"fig say" "fig nav";grid-template-rows:1fr auto;height:auto;max-height:calc(100svh - 2 * var(--s-5));padding-bottom:0}
  /* Панель — снова строка стрелок под текстом, «Закрыть» — только крестиком вверху. */
  .v2 .dlg__bar{grid-area:nav;position:static;display:block;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .v2 .dlg__done{display:none}
  .v2 .dlg__fig{padding:var(--s-5)}
  .v2 .dlg__img{max-height:calc(100svh - 4 * var(--s-5))}
  .v2 .dlg__say{padding:var(--s-6) var(--s-5) var(--s-3)}
  .v2 .dlg__nav{justify-content:flex-start;margin-left:0;padding:0 var(--s-5) var(--s-5)}
}

/* ── Карта-фасад .mapf ──────────────────────────────────────────────── */
.v2 .mapf{display:grid;gap:var(--s-2);container-type:inline-size}
.v2 .mapf__view{position:relative;display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-4);border-radius:var(--r-img);background:var(--linen)}
.v2 .mapf__pin{display:grid;place-items:center;width:calc(var(--tap) + var(--s-3));height:calc(var(--tap) + var(--s-3));border-radius:var(--r-chip);background:var(--card);color:var(--acc-ink)}
.v2 .mapf__pin svg{width:60%;height:60%}
.v2 .mapf__say{display:grid;gap:var(--s-0)}
.v2 .mapf__t{font-size:var(--t-s);font-weight:600;color:var(--ink-2)}
.v2 .mapf__addr{font:600 var(--t-h3)/1.25 var(--f-d);text-wrap:balance}
.v2 .mapf__note{font-size:var(--t-s);color:var(--ink-2)}
.v2 .mapf--img .mapf__view{display:block;aspect-ratio:4/3;padding:0;overflow:hidden}
.v2 .mapf__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2 .mapf--img .mapf__say{position:absolute;left:var(--s-3);top:var(--s-3);max-width:calc(100% - 2 * var(--s-3));padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);background:var(--card);box-shadow:var(--shadow)}
.v2 .mapf--img .mapf__go{position:absolute;left:var(--s-3);bottom:var(--s-3);box-shadow:var(--shadow)}
.v2 .mapf__frame{aspect-ratio:4/3;border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
.v2 .mapf__frame iframe{display:block;width:100%;height:100%;border:0}
.v2 .mapf__foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-3);font-size:var(--t-s);color:var(--ink-2)}
/* Раскладка плашки — по ширине самой карты, а не окна. Телефон (mobile-rules §1): строкой —
   булавка слева, адрес и «Показать карту» справа, поля --s-3; в столбик плашка занимала полэкрана
   пустой панелью, а кнопка уходила под край первого окна (контакты, самовывоз доставки, мастерская
   «О компании»). От 420 px — поля шире, от 640 px — кнопка третьей колонкой. */
.v2 .mapf--plate .mapf__view{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-3);row-gap:var(--s-1);padding:var(--s-3)}
.v2 .mapf--plate .mapf__go{grid-column:2}
@container (min-width:420px){
  .v2 .mapf--plate .mapf__view{align-items:center;column-gap:var(--s-4);row-gap:var(--s-3);padding:var(--s-4) var(--s-5)}
}
@container (min-width:640px){
  .v2 .mapf--plate .mapf__view{grid-template-columns:auto minmax(0,1fr) auto}
  .v2 .mapf--plate .mapf__go{grid-column:auto}
}
@media (min-width:900px){.v2 .mapf__frame,.v2 .mapf--img .mapf__view{aspect-ratio:16/10}}

/* ── Блок предложения .offer ────────────────────────────────────────── */
.v2 .offer--row:not(.band){padding-block:var(--sec)}
.v2 .offer__in{display:grid;gap:var(--s-5)}
.v2 .offer__head{display:grid;gap:var(--s-3)}
.v2 .offer__head .lead{max-width:var(--measure)}
.v2 .offer__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
@media (max-width:599px){.v2 .offer--row .offer__go .btn{flex:1 1 100%}}
/* Врезка в тексте статьи: панель на льне. Одиночный портрет вертикальный, лицо
   не режется: на телефоне кадр 4:5 шириной --read-thumb справа от заголовка и
   строки, цена и кнопки под ними во всю ширину; от 600 px кадр --offer-img справа. */
.v2 .offer--inset{display:grid;grid-template-columns:minmax(0,1fr) var(--read-thumb);grid-template-areas:"t img" "text img" "price price" "go go";gap:var(--s-2) var(--s-3);align-items:start;
  padding:var(--s-3);border-radius:var(--r-img);background:var(--linen)}
.v2 .offer--inset:not(:has(>.offer__img)){grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "text" "price" "go"}
.v2 .prose>.offer--inset{margin-block:var(--s-5)}
.v2 .offer__img{aspect-ratio:3/2;border-radius:var(--r-img);overflow:hidden;background:var(--card)}
.v2 .offer--inset .offer__say{display:contents}
.v2 .offer--inset .offer__img{grid-area:img;aspect-ratio:4/5}
.v2 .offer--inset .offer__t{grid-area:t}
.v2 .offer--inset .offer__text{grid-area:text}
.v2 .offer--inset .offer__price{grid-area:price;margin-top:var(--s-1)}
.v2 .offer--inset .offer__go{grid-area:go}
.v2 .offer__img img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:0}
.v2 .offer__say{display:grid;gap:var(--s-2);align-content:start;justify-items:start}
.v2 .offer__t{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .offer__text{color:var(--ink-2)}
.v2 .offer__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-0) var(--s-1)}
.v2 .offer__price b{font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .offer__price span{font-size:var(--t-s);color:var(--ink-2)}
@media (min-width:600px){
  .v2 .offer--inset{grid-template-columns:minmax(0,1fr) var(--offer-img);grid-template-areas:none;align-items:center;gap:var(--s-3) var(--s-5);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5)}
  .v2 .offer--inset .offer__say{display:grid}
  .v2 .offer--inset :is(.offer__img,.offer__t,.offer__text,.offer__price,.offer__go){grid-area:auto}
  .v2 .offer--inset .offer__price{margin-top:0}
  .v2 .offer__img{order:2;aspect-ratio:4/5}
}

/* ── «Какое фото подойдёт» .shots ───────────────────────────────────── */
.v2 .shots__in{display:grid;gap:var(--s-5)}
.v2 .shots__head{display:grid;gap:var(--s-2)}
.v2 .shots__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-2);margin:0;padding:0;list-style:none}
.v2 .shot{display:grid;gap:var(--s-1);align-content:start}
.v2 .shot__img{position:relative;aspect-ratio:4/5;margin:0 0 var(--s-1);border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
.v2 .shot__img img{width:100%;height:100%;object-fit:cover}
/* Метка — глиф и текст, не только цвет; «не подойдёт» — тёмная, без --err. */
.v2 .shot__mark{display:inline-flex;align-items:center;gap:var(--s-0);justify-self:start;min-height:var(--chip-h);padding:0 var(--s-1);border-radius:var(--r-chip);
  background:var(--card);color:var(--ink-2);font:600 var(--t-s)/1 var(--f-b);white-space:nowrap}
.v2 .shot__mark svg{width:var(--ico);height:var(--ico)}
.v2 .shot--ok .shot__mark{background:var(--acc-soft);color:var(--acc-ink)}
.v2 .shot--no .shot__mark{background:var(--ink);color:var(--card)}
.v2 .shot__t{font:600 var(--t-ui)/1.3 var(--f-d)}
/* У совета без метки («Несколько кадров») название опускается на высоту метки
   и промежутка: ряд названий ровный на 390 и 1440 (и у карточек без кадра). */
.v2 .shot--or:not(.shot--text) .shot__t{margin-top:calc(var(--chip-h) + var(--s-1))}
.v2 .shot__text{font-size:var(--t-s);color:var(--ink-2)}
.v2 .shot--text{gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-img);background:var(--linen)}
.v2 .shot--or.shot--text .shot__t{margin-top:calc(var(--chip-h) + var(--s-2))}
.v2 .shot__glyph{display:grid;place-items:center;width:calc(var(--tap) + var(--s-3));height:calc(var(--tap) + var(--s-3));margin-bottom:var(--s-1);border-radius:var(--r-chip);background:var(--card);color:var(--ink)}
.v2 .shot__glyph svg{width:60%;height:60%}
.v2 .shot--ok .shot__glyph{color:var(--acc-ink)}
.v2 .shots__go{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
@media (max-width:599px){.v2 .shots__go .btn{flex:1 1 100%}}
@media (min-width:900px){
  .v2 .shots__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--col-gap)}
  .v2 .shots__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
  .v2 .shot__t{font-size:var(--t-h3);line-height:1.25}
  .v2 .shot--text{padding:var(--s-4)}
}

/* ── Перелинковка .plinks ───────────────────────────────────────────── */
.v2 .plinks{display:grid;gap:var(--s-2)}
.v2 .plinks__t{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .plinks__list{margin:0;padding:0;list-style:none}

/* ── Призыв .pcta ───────────────────────────────────────────────────── */
.v2 .pcta--plain{padding-block:var(--sec)}
.v2 .pcta__in{display:grid;gap:var(--s-4)}
.v2 .pcta__say{display:grid;gap:var(--s-2)}
.v2 .pcta__say .lead{max-width:var(--measure)}
.v2 .pcta__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
@media (max-width:599px){.v2 .pcta__go .btn{flex:1 1 100%}}
@media (min-width:900px){.v2 .pcta__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--col-gap);align-items:center}.v2 .pcta__go{justify-content:flex-end}}

/* ── Кнопка в ответе на вопрос .qa__go (inc/v2-pages/faq.php) ───────── */
/* Над кнопкой строчная ссылка абзаца (цель 44 px растёт на ~11 px вниз):
   ещё --s-1 к промежутку ответа, чтобы между целями было не меньше 8 px. */
.v2 .qa__go{margin-top:var(--s-1)}

/* ── Подпись под полем формы (общая: отзыв, заявки) ─────────────────── */
.v2 .field__hint{font-size:var(--t-s);color:var(--ink-2)}

/* ── Список «куда пойти» (служебные страницы) ───────────────────────── */
.v2 .golist{display:grid;max-width:var(--measure-l)}
.v2 .golist__a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--row);font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .golist__a:hover{color:var(--acc)}
.v2 .golist__a svg{flex:0 0 auto;transition:transform var(--dur) var(--ease)}
.v2 .golist__a:hover svg{transform:translateX(var(--nudge))}

/* ── Витрина компонентов (/v2-kit/, служебная) ──────────────────────── */
.v2 .kit+.kit{padding-top:0}
.v2 .kit__api{max-width:var(--measure-art);font-size:var(--t-s);color:var(--ink-2)}
.v2 .kit__api b{font-weight:600;color:var(--ink)}
.v2 .kit__sub{margin-block:var(--s-5) var(--s-3);font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .kit__two{display:grid;gap:var(--s-5)}
@media (min-width:900px){.v2 .kit__two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--col-gap);align-items:start}}

@media (prefers-reduced-motion:reduce){
  .v2 .card__a:hover .card__img img,.v2 .work__a:hover img,.v2 .card__a:hover .card__more svg,.v2 .read__a:hover .read__go svg{transform:none}
  .v2 .dlg,.v2 .dlg__img{transform:none !important}
  .v2 .toc__up{transition:none}
}
@media (forced-colors:active){
  .v2 .pill[aria-current="true"],.v2 .pill[aria-current="page"],.v2 .toc__a[aria-current]{forced-color-adjust:none;background:Highlight;color:HighlightText}
}
.v2 .kit__stack{display:grid;gap:var(--s-5)}