/* ═══ Страница услуги (/service/<slug>/, шаблон style) ═══════════════════
   Поверх v2.css и v2-pages.css. Значения — только токены .v2 (DESIGN.md);
   токены страницы объявлены ниже с пометкой. Написано от 375 px вверх:
   @media (min-width) только добавляет.

   Сигнатура — шторка «снимок → портрет» первого экрана. Интерактив —
   таблица цен с мини-расчётом (#cena). Остальные блоки — блоки главной. */

.v2{
  /* токен страницы: высота кадра первого экрана от 900 px (кадр 4:5, до 432×540) — холст техник --canvas-max,
     но не выше потолка --style-frame-sm (64svh): 460 px оставляли пустую полосу между текстом и кадром,
     а с H1 в две строки 540 px на окне 1440×800 уходили за нижний край */
  --style-frame:min(var(--canvas-max),var(--style-frame-sm));
  /* токен страницы: потолок высоты кадра первого экрана на телефоне, чтобы под шторкой была видна подпись */
  --style-frame-sm:64svh;
  /* токен страницы: H1 услуги на телефоне. Живые SEO-заголовки до 65 знаков с длинными словами
     («“Фантазийная обработка”») в --t-h1 (32 px) занимали 4–5 строк на 375; 7.75vw = 29 px на 375 держит ≤ 3 */
  --style-h1-sm:min(var(--t-h1), 7.75vw);
}

/* ── 01 первый экран ───────────────────────────────────────────────── */
@media (max-width:599px){
  .v2 .shero .phead__t{font-size:var(--style-h1-sm)}
  /* Телефон: первый экран плотнее на --s-1 в каждом промежутке — главная кнопка целиком в окне и на 320×568,
     и на 375×548 (SE с панелями Safari). Крошки: цель 44 px, видимая строка — 1,5 × --t-s; поле цели заходит
     в промежуток до H1 (отрицательный отступ), сам заголовок не прижимается к тексту крошек. */
  .v2 .shero .crumbs{margin-bottom:calc((var(--t-s) * 1.5 - var(--tap)) / 2)}
  .v2 .shero .phead__in,.v2 .shero .phead__say{row-gap:var(--s-2)}
  /* Срок — под кнопками: у живых H1 в три строки и лида в пять на 320–375 кнопка уходила под край окна.
     Фокусируемых элементов в сроке нет — порядок Tab не расходится с видимым. */
  .v2 .shero .shero__when{order:1}
}
/* Крошки: последнее звено (повтор H1) на телефоне скрывает общее правило .crumbs (v2-pages.css, 3+ уровня). */
.v2 .shero__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2)}
.v2 .shero__price b{font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .shero__price s,.v2 .shero__what{font-size:var(--t-s);color:var(--ink-2)}
.v2 .shero__price .chip{align-self:center}
/* Без цены: ориентир «Цену назовём по снимку» тем же кеглем, что цена, пояснение строкой ниже. */
.v2 .shero__price--ask{display:grid;gap:var(--s-0)}
.v2 .shero__when{display:grid;gap:var(--s-0);max-width:var(--measure)}
.v2 .shero__when b{font:600 var(--t-ui)/1.4 var(--f-d)}
.v2 .shero__when span{font-size:var(--t-s);color:var(--ink-2)}

/* Кадр всегда 4:5: на низком экране он уже, а не шире пропорции (потолок высоты --style-frame-sm). */
.v2 .shero__frame{position:relative;aspect-ratio:4/5;width:min(100%,calc(var(--style-frame-sm) * var(--canvas-ratio)));margin-inline:auto}
.v2 .shero__frame img{display:block;width:100%;height:100%;object-fit:cover}
/* Кадры шторки — в пропорции кадра: второй слот компонент кладёт в блок без высоты, там height:100%
   не работает, и портрет выходил выше кадра (обрезан снизу, половинки со сдвигом). */
.v2 .shero__cmp [slot="first"],.v2 .shero__cmp [slot="second"]{height:auto;aspect-ratio:var(--canvas-ratio)}
.v2 .shero__cmp{--divider-width:var(--line);--divider-color:var(--card);display:block;width:100%;height:100%}
.v2 .shero__cmp:focus-visible{outline:none}
.v2 .shero__frame:has(.shero__cmp:focus-visible){outline:var(--focus-w) solid var(--acc);outline-offset:var(--focus-off)}
.v2 .shero__handle{display:grid;place-items:center;width:var(--handle);height:var(--handle);border-radius:var(--r-chip);
  background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.v2 .shero__handle svg{width:var(--ico-l);height:var(--ico-l)}
/* До загрузки компонента шторку рисует CSS, как её рисует сам компонент: портрет (slot second, LCP)
   в потоке во весь кадр, снимок поверх и обрезан до левой половины, линия и ручка посередине.
   Портрет виден с первой отрисовки и после загрузки скрипта не перерисовывается другим размером.
   Прежние правила vendor/img-comparison-slider.css (компонент скрыт до регистрации) больше не нужны:
   файл не подключается (inc/assets.php). */
.v2 .shero__cmp{position:relative}
.v2 .shero__cmp:not(.rendered) [slot="first"]{position:absolute;inset:0;z-index:1;clip-path:inset(0 50% 0 0)}
.v2 .shero__cmp:not(.rendered)::after{content:"";position:absolute;inset:0 auto 0 50%;z-index:1;width:var(--line);transform:translateX(-50%);background:var(--card)}
.v2 .shero__cmp:not(.rendered) .shero__handle{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%)}

@media (min-width:900px){
  .v2 .shero__media{justify-self:end;width:calc(var(--style-frame) * var(--canvas-ratio))}
  .v2 .shero__frame{width:auto;height:var(--style-frame)}
}

/* ── 03 цена и мини-расчёт ─────────────────────────────────────────── */
.v2 .sprice{background:var(--linen);padding-block:var(--band)}
.v2 .sprice__grid{display:grid;gap:var(--s-4);align-items:start}
@media (min-width:600px){.v2 .sprice__grid{gap:var(--s-5)}}
.v2 .ptab{width:100%;border-collapse:separate;border-spacing:0 var(--s-1);margin-block:calc(var(--s-1) * -1)}
.v2 .ptab th{text-align:left;vertical-align:middle}
.v2 .ptab thead th{padding:0 var(--s-1) var(--s-1) 0;font:600 var(--t-s)/1.3 var(--f-b);color:var(--ink-2)}
/* Подпись уровня — над текстом цены: ячейка + поля кнопки. До 375 px (320–374) поля уже:
   три колонки «размер · базовый · подробный» без сжатия шрифта влезают в 320 − 2 × --gut. */
.v2 .ptab thead th:not(:first-child){padding:0 0 var(--s-1) calc(var(--s-0) + var(--s-2))}
.v2 .ptab thead th small{display:block;font-weight:400;font-size:var(--t-s)}
.v2 .ptab tbody th{padding-right:var(--s-0);font:600 var(--t-ui)/1.2 var(--f-d);white-space:nowrap}
/* Между кнопками-ценами соседних колонок — --s-1 и на 320 px (правило 8 px между целями). */
.v2 .ptab td{padding:0 0 0 var(--s-1)}
.v2 .ptab__b{width:100%;min-height:var(--row);padding:0 var(--s-1);border-radius:var(--r-btn);background:var(--card);color:var(--ink);
  font:600 var(--t-ui)/1.2 var(--f-d);text-align:left;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
@media (min-width:375px){
  .v2 .ptab thead th:not(:first-child){padding:0 var(--s-1) var(--s-1) calc(var(--s-1) + var(--s-3))}
  .v2 .ptab tbody th{padding-right:var(--s-2)}
  .v2 .ptab td{padding-left:var(--s-1)}
  .v2 .ptab__b{padding:0 var(--s-3)}
}
.v2 .ptab__b:hover{background:color-mix(in srgb,var(--ink) 8%,var(--card))}
.v2 .ptab__b[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.v2 .sprice__note{margin-top:var(--s-3);font-size:var(--t-s);color:var(--ink-2);max-width:var(--measure)}

.v2 .sprice__calc{display:grid;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-img);background:var(--card)}
@media (min-width:600px){.v2 .sprice__calc{gap:var(--s-4)}}
.v2 .sprice__t{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .sprice__row{display:grid;gap:var(--s-1)}
.v2 .sprice__lab{font:600 var(--t-s)/1.3 var(--f-b);color:var(--ink-2)}
.v2 .sprice__out{display:grid;gap:var(--s-1)}
.v2 .sprice__pick{font-size:var(--t-s);color:var(--ink-2)}
.v2 .sprice__sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2)}
.v2 .sprice__sum span{font-size:var(--t-s);color:var(--ink-2)}
.v2 .sprice__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.v2 .sprice__calc .pill{min-width:var(--tap);justify-content:center;background:var(--linen)}
.v2 .sprice__calc .pill:hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .sprice__calc .pill[aria-pressed="true"]{background:var(--ink);color:var(--card)}
@media (max-width:599px){.v2 .sprice__go .btn{flex:1 1 100%}}

/* Без цены: честное «назовём по фото» */
.v2 .sprice__ask{display:grid;gap:var(--s-5);align-items:center}
.v2 .sprice__say{display:grid;gap:var(--s-3)}
.v2 .sprice__say .lead{max-width:var(--measure)}
.v2 .sprice__card{display:grid;gap:var(--s-4);padding:var(--s-4);border-radius:var(--r-img);background:var(--card)}
.v2 .sprice__facts{display:grid;gap:var(--s-3);margin:0}
.v2 .sprice__facts dt{font-size:var(--t-s);color:var(--ink-2)}
.v2 .sprice__facts dd{margin:0;font:600 var(--t-ui)/1.4 var(--f-d)}

@media (min-width:900px){
  .v2 .sprice__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--col-gap)}
  .v2 .sprice__calc,.v2 .sprice__card{padding:var(--s-5)}
  .v2 .sprice__ask{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--col-gap)}
  .v2 .ptab thead th{font-size:var(--t-ui)}
  .v2 .ptab tbody th{padding-right:var(--s-4)}
}

/* ── 04 чем отличается: строки техник ──────────────────────────────── */
/* Сравнение раскрыто на всех ширинах (27.10, заказчик: не прятать в «+»): строки-сводки .fold__sum нет. */
.v2 .scmp__fold>.fold__sum{display:none}
.v2 .scmp__list{display:grid;gap:var(--s-1);margin:0;padding:0;list-style:none}
/* Строки сравнения не раскладываются, пока до них далеко (content-visibility): их миниатюры (≈ 40 КБ) не
   делят канал с кадром первого экрана; до 900 px строки ещё и свёрнуты (.fold). Размер после первой
   отрисовки запоминается (auto), прокрутка не прыгает. */
.v2 .scmp__list>li{content-visibility:auto;contain-intrinsic-block-size:auto 112px}
.v2 .scmp__row{display:grid;grid-template-columns:var(--read-thumb) minmax(0,1fr);grid-template-areas:"img say" "img price";
  align-items:start;gap:var(--s-1) var(--s-3);padding:var(--s-2);border-radius:var(--r-btn);background:var(--linen);color:var(--ink);
  transition:background var(--dur) var(--ease)}
.v2 a.scmp__row:hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .scmp__row.is-now{background:var(--ink);color:var(--card)}
.v2 .scmp__img{grid-area:img;display:block;aspect-ratio:4/5;border-radius:var(--r-btn);overflow:hidden;background:var(--card)}
.v2 .scmp__img img{display:block;width:100%;height:100%;object-fit:cover}
.v2 .scmp__say{grid-area:say;display:grid;gap:var(--s-0);align-content:start}
.v2 .scmp__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1)}
.v2 .scmp__name b{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .scmp__here{font-size:var(--t-s);color:var(--on-ink-2)}
.v2 .scmp__about{font-size:var(--t-s);line-height:1.5;color:var(--ink-2);max-width:var(--measure)}
.v2 .scmp__made{font-size:var(--t-s);color:var(--ink-2)}
.v2 .scmp__row.is-now .scmp__about,.v2 .scmp__row.is-now .scmp__made,.v2 .scmp__row.is-now s{color:var(--on-ink-2)}
.v2 .scmp__row.is-now .chip{background:color-mix(in srgb,var(--card) 16%,transparent);color:var(--card)}
.v2 .scmp__price{grid-area:price;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1);align-self:end}
.v2 .scmp__price b{font:600 var(--t-ui)/1.2 var(--f-d);white-space:nowrap}
.v2 .scmp__price s{font-size:var(--t-s);color:var(--ink-2)}
.v2 .scmp__ask{font-size:var(--t-s);font-weight:600;color:var(--ink-2);white-space:nowrap}
.v2 .scmp__row.is-now .scmp__ask{color:var(--on-ink-2)}
.v2 .scmp__go{display:none}
.v2 .scmp__all{margin-top:var(--s-4)}
@media (min-width:600px){
  .v2 .scmp__row{grid-template-columns:var(--read-thumb) minmax(0,1fr) auto var(--ico);grid-template-areas:"img say price go";align-items:center;column-gap:var(--s-4)}
  .v2 .scmp__about{font-size:var(--t-body);line-height:1.5}
  .v2 .scmp__price{align-self:center;justify-content:flex-end}
  .v2 .scmp__go{grid-area:go;display:block;color:var(--acc)}
}
@media (min-width:900px){
  .v2 .scmp__row{background:transparent}
  .v2 a.scmp__row:hover{background:var(--linen)}
  .v2 .scmp__row.is-now{background:var(--ink)}
}

/* ── к портрету можно добавить: снимок упаковки студии и две фразы ──── */
/* Отступ как у соседних секций на одном фоне (--sec-near, DESIGN §5 «Ритм»; .psec--tight теперь такой же). */
.v2 .sadd.psec--tight{padding-block:var(--sec-near)}
.v2 .sadd__in{display:grid;gap:var(--s-4)}
.v2 .sadd__img{margin:0;aspect-ratio:16/9;border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
@media (min-width:600px){.v2 .sadd__img{aspect-ratio:3/2}}
/* кадр 1277×760 со скруглёнными белыми углами: обрезка до 3:2 по бокам убирает их */
.v2 .sadd__img img{display:block;width:100%;height:100%;object-fit:cover}
.v2 .sadd__say{display:grid;gap:var(--s-3);justify-items:start}
.v2 .sadd__t{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .sadd__lead{max-width:var(--measure);color:var(--ink-2)}
.v2 .sadd__facts{display:grid;gap:var(--s-1);margin:0;padding:0;list-style:none;max-width:var(--measure)}
.v2 .sadd__facts li{padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);background:var(--linen);font-size:var(--t-s);line-height:1.5}
@media (min-width:900px){.v2 .sadd--img .sadd__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col-gap);align-items:center}}

/* Блоки главной на услуге — общими правилами: кадр шага на лимонной полосе плоский (v2.css
   .band--butter .hstep__img), вопросы одной колонкой со ссылкой после списка (faq layout 'solo',
   template-parts/v2/style/faq.php). */

/* ── 09 другие техники и SEO-текст ─────────────────────────────────── */
.v2 .slinks{padding-block:var(--sec-near)}
.v2 .slinks__in{display:grid;gap:var(--s-4)}
/* Пилюли-ссылки переносом на всех ширинах (заказчик 27.10: горизонтальный скролл на телефоне — зло; до 27.10
   на телефоне была лента вбок в одну строку). 12 техник + 6 сюжетов переносом — около полуэкрана на 390. */
.v2 .slinks .plinks__list,.v2 .sadd .plinks__list{flex-wrap:wrap}
.v2 .sadd .plinks{justify-self:stretch;min-width:0}
.v2 .sseo{padding-block:var(--sec-near) var(--sec)}
/* Заголовки текста под H2 раздела сдвинуты на уровень (H2 → H3), вид прежний (DESIGN §9б, .prose). */
.v2 .sseo--sub .prose h3{font:500 var(--t-phrase)/1.2 var(--f-d);letter-spacing:-.01em}
.v2 .sseo--sub .prose h4{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .sseo--sub .prose>h3,.v2 .sseo--sub .prose .wp-block-group>h3{margin-top:var(--s-6)}
.v2 .sseo--sub .prose>h4,.v2 .sseo--sub .prose .wp-block-group>h4{margin-top:var(--s-5)}
.v2 .sseo--sub .prose>:first-child{margin-top:0}
/* Телефон: после первого абзаца остаток в hidden="until-found" — поиск по странице его находит.
   Общее .v2 [hidden] until-found не трогает (v2.css): такой остаток прячет сам браузер. */
.v2 .sseo__rest:not([hidden]){margin-top:var(--s-3)}
.v2 .sseo__rest--h:not([hidden]){margin-top:var(--s-6)}
.v2 .sseo__go{margin-top:var(--s-4)}
.v2 .sseo__more{background:var(--linen)}
.v2 .sseo__more:hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .sseo__top{margin-top:var(--s-5)}
.v2 .sseo__rest[hidden]~.sseo__top{display:none}
/* Без скрипта и от 900 px текст развёрнут целиком, кнопки нет. */
.v2:not(.js) .sseo__rest[hidden]{display:block !important;content-visibility:visible;margin-top:var(--s-3)}
.v2:not(.js) .sseo__rest--h[hidden]{margin-top:var(--s-6)}
.v2:not(.js) .sseo__go{display:none}
.v2:not(.js) .sseo__top{display:inline-flex}
@media (min-width:900px){
  .v2 .sseo__rest[hidden]{display:block !important;content-visibility:visible;margin-top:var(--s-3)}
  .v2 .sseo__rest--h[hidden]{margin-top:var(--s-6)}
  .v2 .sseo__go{display:none}
  .v2 .sseo__rest[hidden]~.sseo__top{display:inline-flex}
}

@media (prefers-reduced-motion:reduce){
  .v2 .ptab__b,.v2 .scmp__row{transition:none}
}
@media (forced-colors:active){
  .v2 .ptab__b[aria-pressed="true"],.v2 .scmp__row.is-now{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .v2 .ptab__b{border:1px solid ButtonText}
}

/* #cena: цена «от» этой техники под заголовком (правило заказчика 30.09 — сетки размеров
   на услуге нет, она на /ceny/). Цифра — --t-num, подпись — текст второго ряда. */
.v2 .sprice__from{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2)}
.v2 .sprice__from span{color:var(--ink-2)}
.v2 .sprice__note a{color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:.2em;padding-block:var(--s-1)}