/* app.css — публичный контур stilist.ru, язык «MESH».
 *
 * ИСТОЧНИК. Файл переписан 28.08.2026 целиком по эталону макетов:
 * C:\1\stilist\readme\front\new\assets\app.css (дизайн-система MESH), правила
 * палитры — из шапки _tw-build.cjs, состав секций — из p01-homepage.html.
 * Значения токенов ниже совпадают с эталоном побайтово; всё, что расходится,
 * помечено причиной прямо в строке.
 *
 * ЧТО БЫЛО НЕ ТАК В ПРЕДЫДУЩЕЙ РЕДАКЦИИ. Токены она взяла верные, а ПРАВИЛО их
 * применения — нет, и от этого страница отдавала чужие тона. Эталон говорит
 * прямо: «весь текст и главные кнопки — чернила (ink), не розовый; hot-розовый
 * #FF2E93 — только заливка/искра (точка, столбик, ".ru")». Старый файл делал
 * розовый цветом КАЖДОЙ ссылки и приглушал его до #E5187C ради контраста
 * текста — то есть лечил симптом правила, которое нарушал. Теперь розовый не
 * красит текст нигде, и приглушать его незачем: #FF2E93 стоит в заливках.
 *
 * ПРАВИЛА ФАЙЛА, действующие с первой редакции:
 *   1) ни одного внешнего ресурса — ни шрифта, ни картинки, ни импорта
 *      (CSP: font-src 'self', style-src 'self'); зерно — data:-URI, img-src его
 *      разрешает;
 *   2) ни одного !important;
 *   3) единицы относительные;
 *   4) один вид, светлый: тёмной темы у эталона нет — см. врезку ниже.
 *
 * ЧЕГО ИЗ ЭТАЛОНА НЕТ И ПОЧЕМУ: гарнитуры Plus Jakarta Sans и Inter — они
 * приходят с Google Fonts, а font-src 'self' их запрещает; их место держит
 * системный стек, а характер начертания — вес 800 и плотный трекинг у .display.
 * Утилитных классов Tailwind нет: разметка семантическая, шага сборки нет.
 */

:root{
  /* Чернила и поверхности — эталон, раздел :root. */
  --ink:#0D1015; --ink-2:#1A1F28; --muted:#6B7280; --faint:#9BA1AB;
  --paper:#FFFFFF; --shell:#F7F7F5; --line:#E9E8E4; --line-soft:#F1F0EC;

  /* Розовый и пастель. hot — ТОЛЬКО заливка и искра, текстом не бывает. */
  --hot:#FF2E93; --pink:#FFB6D2; --peach:#FFD2A8; --cream:#FFF4E8;
  --lav:#C7C4E2; --but:#F0DEA2; --blush:#E5AFBB; --sky:#ACD1E8; --mint:#A9CBBF;
  --star:#E9A23B;

  /* Состояния, которых у эталона нет: он статичен и форм не показывает. */
  --ok:#047857; --warn:#B45309; --err:#B91C1C;

  --r-card:24px; --r-tile:20px; --r-s:14px; --r-pill:999px;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
  --wrap:80rem;
  --sh-card:0 18px 40px -22px rgba(13,16,21,.28);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ТЁМНОЙ ТЕМЫ НЕТ, И ЭТО РЕШЕНИЕ, А НЕ ПРОПУСК (28.08.2026).
 *
 * У эталона её нет вовсе: все 117 макетов светлые, и язык MESH построен на
 * кремовой бумаге с малиново-абрикосовым mesh — на чернилах он перестаёт быть
 * собой. Пока тема здесь была, браузер с системной тёмной темой показывал сайт
 * почти чёрным: замер 28.08.2026 на этой странице — `body` = rgb(13,16,21),
 * градиент героя приглушён до .42, и владелец видел серо-чёрную страницу вместо
 * малиновой. Ни одного макета, описывающего ночной вид, не существует, поэтому
 * «тёмная тема» была не переносом эталона, а сочинением на его тему.
 *
 * Вернуть — это макет ночного вида, а не набор переменных. */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--shell); color:var(--ink);
      font:1rem/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      font-feature-settings:"cv11","ss01"; }
img{ max-width:100%; height:auto; }
::selection{ background:rgba(255,46,147,.22); color:var(--ink); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

/* Ссылка чернильная, а не розовая, — это и есть главное правило языка.
 * Различима подчёркиванием, а не цветом: в списках сужений сотня розовых строк
 * превращала страницу в шум. Розовый приходит на наведение искрой. */
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--hot); }
.seo a,.lead a{ text-decoration:underline; text-underline-offset:2px; }

/* Ссылка «к содержимому» нужна тем, кто не пользуется мышью. */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--s4); top:var(--s2); z-index:70; background:var(--ink);
             color:var(--paper); padding:var(--s2) var(--s4); border-radius:var(--r-pill); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--s4); }
@media (min-width:48rem){ .wrap{ padding:0 var(--s5); } }
main{ padding-bottom:var(--s8); min-height:60vh; }

/* ─── типографика ───────────────────────────────────────────────────────── */
/* .display эталона — вес 800 и трекинг −.035em. Кегль растёт от 28 к 44 px,
 * как в p01: clamp вместо медиа-строк. */
h1{ font-size:clamp(1.75rem,1.15rem + 2.6vw,2.75rem); line-height:1.04;
    letter-spacing:-.035em; font-weight:800; margin:0 0 var(--s3); }
h2{ font-size:clamp(1.375rem,1.1rem + 1.1vw,1.9rem); line-height:1.1;
    letter-spacing:-.03em; font-weight:800; margin:0 0 var(--s4); }
h3{ font-size:1.0625rem; line-height:1.3; letter-spacing:-.01em; font-weight:700; margin:0 0 var(--s1); }
p{ margin:0 0 var(--s3); }

.lead{ color:var(--ink-2); font-size:1.0625rem; line-height:1.6; max-width:56ch; }
.muted,.meta,.place,.cat{ color:var(--muted); font-size:.875rem; line-height:1.45; }
.total{ color:var(--muted); margin:0 0 var(--s4); }
.empty{ color:var(--muted); padding:var(--s7) 0; }
.price{ font-weight:700; font-variant-numeric:tabular-nums; margin:var(--s1) 0 0; }
.more{ font-weight:700; font-size:.9375rem; white-space:nowrap; }
.more::after{ content:" →"; color:var(--hot); }

/* Надзаголовок-«бровь»: прописные, разрядка .18em — из эталона. */
.eyebrow{ display:inline-flex; align-items:center; gap:var(--s2);
          font-size:.75rem; font-weight:700; text-transform:uppercase;
          letter-spacing:.18em; color:var(--ink); }
.eyebrow::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--hot); }

/* ─── шапка и подвал ────────────────────────────────────────────────────── */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); padding:var(--s3) 0; }
.site-header .wrap{ display:flex; align-items:center; gap:var(--s4); }
/* Логотип. Розовой «.ru» из макета здесь НЕТ намеренно: в эталоне это часть
 * слова «stilist.ru», а у нас в разметку приходит название сайта из настроек
 * («Стилист»), и дописывать к нему домен средствами CSS значило бы печатать
 * содержимое, которого нет в HTML: его не найдёт ни поиск по странице, ни
 * краулер, ни программа чтения с экрана. Искру держит точка «брови». */
.logo{ font-weight:800; font-size:1.1875rem; letter-spacing:-.03em; }
.logo:hover{ color:var(--ink); }
.city{ margin-left:auto; max-width:12rem; white-space:nowrap; overflow:hidden;
       text-overflow:ellipsis; font-weight:600; font-size:.9375rem; color:var(--muted); }

.crumbs{ background:var(--paper); border-bottom:1px solid var(--line-soft); font-size:.8125rem; }
.crumbs ol{ list-style:none; display:flex; gap:var(--s2); margin:0 auto; max-width:var(--wrap);
            padding:var(--s2) var(--s4); overflow-x:auto; scrollbar-width:none; }
.crumbs ol::-webkit-scrollbar{ display:none; }
.crumbs li{ white-space:nowrap; color:var(--muted); }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--ink); }
.crumbs li + li::before{ content:"/"; color:var(--faint); margin-right:var(--s2); }
.crumbs [aria-current]{ color:var(--ink); font-weight:600; }
@media (min-width:40rem){ .crumbs ol{ flex-wrap:wrap; overflow:visible; } }

.site-footer{ background:var(--paper); border-top:1px solid var(--line);
              padding:var(--s7) 0 var(--s8); font-size:.9375rem; }
.site-footer .wrap{ display:grid; gap:var(--s5);
                    grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
.site-footer h2{ font-size:.8125rem; text-transform:uppercase; letter-spacing:.12em;
                 color:var(--muted); margin:0 0 var(--s3); font-weight:700; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.site-footer a{ color:var(--ink-2); }
.site-footer .copy{ grid-column:1/-1; color:var(--muted); margin:0;
                    border-top:1px solid var(--line-soft); padding-top:var(--s4); }

/* ─── герой: mesh-градиент эталона ──────────────────────────────────────── */
/* Стек радиальных заливок скопирован из .mesh эталона без изменения координат.
 * Белое ядро в центре — обязательный слой: без него тёмный заголовок ложится
 * на #FF2E93 и даёт ~2.6:1, то есть проваливает AA. */
.hero{ position:relative; overflow:hidden; background-color:var(--cream); }
.hero-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(115% 85% at 6% 112%,  #FF2E93 0%, rgba(255,46,147,0)  56%),
    radial-gradient(95%  70% at -4% 74%,  #FF7FB8 0%, rgba(255,127,184,0) 62%),
    radial-gradient(100% 80% at 104% 26%, #FFD2A8 0%, rgba(255,210,168,0) 62%),
    radial-gradient(85%  72% at 98% 96%,  #FFB0C8 0%, rgba(255,176,200,0) 58%),
    radial-gradient(72%  58% at 50% 20%,  #FFFFFF 0%, rgba(255,255,255,0) 72%); }
/* Зерно снимает «пластиковость» большой заливки. Шум — data:-URI, внешних
 * ресурсов файл по-прежнему не тянет. */
.hero-mesh::after{ content:""; position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-body{ position:relative; z-index:1; padding:var(--s7) 0 var(--s8); }
@media (min-width:48rem){ .hero-body{ padding:var(--s8) 0; } }
.hero h1{ max-width:16ch; margin-top:var(--s4); }
.hero .lead{ color:var(--ink-2); }

/* Подсветка последнего слова заголовка — розовая полоса из p01. */
.hero h1 b{ font-weight:inherit; box-shadow:inset 0 -.32em 0 rgba(255,46,147,.55); }

/* ─── пилюли городов ────────────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); padding:0; list-style:none; }
.chip{ display:inline-flex; align-items:center; gap:var(--s2); height:2.75rem;
       padding:0 1.125rem; border-radius:var(--r-pill); font-weight:700; font-size:.9375rem;
       background:rgba(255,255,255,.72); border:1px solid rgba(13,16,21,.10);
       backdrop-filter:blur(8px);
       transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.chip:hover{ background:var(--paper); border-color:rgba(13,16,21,.22);
             transform:translateY(-1px); color:var(--ink); }
.chip-n{ color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
/* Последний чип полосы городов — вход в справочник `/goroda`. Заливкой, а не
 * обводкой: он не город, а действие, и в ряду одинаковых чипов его иначе не
 * найти. Стрелка — псевдоэлементом: в разметке её нет, как и у `.more`. */
.chip-all{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip-all:hover{ background:var(--ink-2); border-color:var(--ink-2); color:var(--paper); }
.chip-all::after{ content:"→"; }

/* ─── секции ────────────────────────────────────────────────────────────── */
.sec{ padding:var(--s7) 0 0; }
.sec-head{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4);
           align-items:baseline; justify-content:space-between; }
.sec-head h2{ margin:0; }

/* Фон секций-сеток — «переплетение» эталона: полоса под 115° и мягкое ядро. */
.weave{ background-color:var(--shell);
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(13,16,21,.035) 0%, rgba(13,16,21,0) 42%),
    repeating-linear-gradient(115deg, rgba(13,16,21,.022) 0 1px, transparent 1px 74px); }

/* ─── плитки категорий ──────────────────────────────────────────────────── */
.tiles{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3);
        grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); }
.tile{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); height:100%;
       background:var(--paper); border:1px solid var(--line); border-radius:var(--r-tile);
       padding:var(--s4); font-weight:700;
       transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.tile:hover{ color:var(--ink); transform:translateY(-4px);
             border-color:rgba(13,16,21,.14); box-shadow:var(--sh-card); }
/* Значок сидит в пастельном круге — как круглые кнопки категорий в p01.
 * Цвет круга чередуется по пяти пастелям эталона, чтобы полоса не была серой. */
.tile-i{ display:grid; place-items:center; width:2.75rem; height:2.75rem;
         border-radius:var(--r-pill); background:var(--lav); font-size:1.375rem; line-height:1;
         margin-bottom:var(--s1); }
.tiles li:nth-child(5n+2) .tile-i{ background:var(--but); }
.tiles li:nth-child(5n+3) .tile-i{ background:var(--blush); }
.tiles li:nth-child(5n+4) .tile-i{ background:var(--sky); }
.tiles li:nth-child(5n+5) .tile-i{ background:var(--mint); }
.tile-t{ font-weight:700; }
.tile-n{ color:var(--muted); font-size:.8125rem; font-weight:500; font-variant-numeric:tabular-nums; }

/* ─── карточки ──────────────────────────────────────────────────────────── */
.cards{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
        margin:var(--s5) 0 0; padding:0; list-style:none; }
@media (min-width:64rem){ .cards{ gap:var(--s5); } }

.card{ display:flex; flex-direction:column; background:var(--paper);
       border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
       transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover{ transform:translateY(-4px); border-color:rgba(13,16,21,.14); box-shadow:var(--sh-card); }
.card .body{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s1); }

/* Обложка 4:3 — пропорция принята в РЕШЕНИЯ §3-бис по замеру макетов. */
.thumb{ display:block; aspect-ratio:4/3; background:var(--line-soft); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Фотографий нет ни одной (Д-16), и плашка — не заглушка «на потом», а приём
 * эталона: .img-ph заливается пастелью по кругу из пяти цветов. Буква названия
 * держит место снимка и отличает карточки друг от друга. */
.thumb.is-empty{ display:grid; place-items:center; font-size:2.5rem; font-weight:800;
                 letter-spacing:-.04em; color:rgba(13,16,21,.42); background:var(--lav); }
.cards > *:nth-child(5n+2) .thumb.is-empty{ background:var(--but); }
.cards > *:nth-child(5n+3) .thumb.is-empty{ background:var(--blush); }
.cards > *:nth-child(5n+4) .thumb.is-empty{ background:var(--sky); }
.cards > *:nth-child(5n+5) .thumb.is-empty{ background:var(--mint); }

.card--master{ flex-direction:row; align-items:flex-start; gap:var(--s3); padding:var(--s4); }
.card--master .body{ padding:0; }
.avatar{ flex:0 0 auto; width:4.5rem; height:4.5rem; border-radius:var(--r-tile); object-fit:cover; }
.avatar.is-empty{ display:grid; place-items:center; background:var(--lav);
                  font-size:1.5rem; font-weight:800; color:rgba(13,16,21,.42); }

.meta{ display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); margin:0; }
.tags{ display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s2) 0 0; }
/* Бейдж — чернила на пастели либо чернильная заливка; розовым текст не бывает. */
.badge{ display:inline-flex; align-items:center; height:1.75rem; padding:0 .75rem;
        border-radius:var(--r-pill); background:var(--shell); color:var(--ink);
        font-size:.75rem; font-weight:700; letter-spacing:.01em; }
.amenities{ color:var(--muted); font-size:.8125rem; margin:var(--s1) 0 0; }

/* ─── оценка ────────────────────────────────────────────────────────────── */
.rating{ display:flex; align-items:center; gap:var(--s2); margin:0; }
.rating b{ font-variant-numeric:tabular-nums; }
.stars{ position:relative; display:inline-block; width:5.25rem; height:1rem;
        background:var(--line); border-radius:var(--r-pill); overflow:hidden; }
.stars i{ position:absolute; inset:0 auto 0 0; display:block; background:var(--star);
          border-radius:var(--r-pill); }
.stars[data-r="0"] i{ width:0; }
.stars[data-r="5"] i{ width:25%; }
.stars[data-r="10"] i{ width:50%; }
.stars[data-r="11"] i{ width:55%; }
.stars[data-r="12"] i{ width:60%; }
.stars[data-r="13"] i{ width:65%; }
.stars[data-r="14"] i{ width:70%; }
.stars[data-r="15"] i{ width:75%; }
.stars[data-r="16"] i{ width:80%; }
.stars[data-r="17"] i{ width:85%; }
.stars[data-r="18"] i{ width:90%; }
.stars[data-r="19"] i{ width:95%; }
.stars[data-r="20"] i{ width:100%; }

/* ─── числа каталога ────────────────────────────────────────────────────── */
/* Чернильная плашка — приём эталона (тёмная секция social proof в p01).
 * Числа приходят из count(*), поэтому «+» после них не печатается. */
.stats{ background:var(--ink); color:var(--paper); border-radius:var(--r-card);
        padding:var(--s6) var(--s4); margin:var(--s7) 0 0; }
.stats ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5);
           grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); text-align:center; }
.stats b{ display:block; font-weight:800; letter-spacing:-.035em;
          font-size:clamp(1.75rem,1.2rem + 1.8vw,2.75rem); font-variant-numeric:tabular-nums; }
.stats span{ color:rgba(255,255,255,.62); font-size:.875rem; }

/* ─── шаги ──────────────────────────────────────────────────────────────── */
.steps{ list-style:none; counter-reset:step; margin:var(--s5) 0 0; padding:0; display:grid;
        gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
.steps li{ counter-increment:step; display:grid; gap:var(--s1); align-content:start;
           background:var(--paper); border:1px solid var(--line);
           border-radius:var(--r-tile); padding:var(--s5) var(--s4); }
.steps b::before{ content:counter(step); display:inline-grid; place-items:center;
                  width:1.5rem; height:1.5rem; margin-right:var(--s2); border-radius:var(--r-pill);
                  background:var(--ink); color:var(--paper); font-size:.8125rem; }
.steps span{ color:var(--muted); font-size:.9375rem; }
.step-i{ font-size:1.5rem; line-height:1; margin-bottom:var(--s1); }

/* ─── сужения, листание, текст ──────────────────────────────────────────── */
.facet{ margin:var(--s6) 0 0; }
.facet h2{ font-size:1.0625rem; letter-spacing:-.01em; margin:0 0 var(--s3); }
.facet ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2); }
.facet li{ display:inline-flex; align-items:center; gap:var(--s1);
           background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill);
           padding:.4375rem .875rem; font-size:.875rem; }
.facet li:hover{ border-color:rgba(13,16,21,.22); }
.facet .muted{ font-size:.8125rem; }

.pager{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin:var(--s6) 0 0; }
.pager a,.pager span{ display:inline-grid; place-items:center; min-width:2.5rem; height:2.5rem;
                      padding:0 var(--s3); border-radius:var(--r-pill); font-weight:600;
                      font-variant-numeric:tabular-nums; }
.pager a{ background:var(--paper); border:1px solid var(--line); }
.pager a:hover{ border-color:rgba(13,16,21,.22); color:var(--ink); }
.pager [aria-current]{ background:var(--ink); color:var(--paper); }
.pager .gap{ color:var(--faint); }

.seo{ margin:var(--s7) 0 0; padding:var(--s6); background:var(--paper);
      border:1px solid var(--line); border-radius:var(--r-card); color:var(--ink-2); }
.seo p{ max-width:74ch; }
.seo p:last-child{ margin-bottom:0; }

/* ─── профиль салона и мастера ──────────────────────────────────────────── */
.profile{ margin-top:var(--s6); }
.profile .big{ font-size:clamp(1.125rem,1rem + .6vw,1.375rem); font-weight:700; }
.contacts,.links{ list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:var(--s2); }
.anchors{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s4) 0 0; padding:0; list-style:none; }
.prices,.pricelist{ margin:var(--s5) 0 0; }
.pricelist{ list-style:none; padding:0; display:grid; gap:var(--s2); }
.pricelist li{ display:flex; justify-content:space-between; gap:var(--s4);
               padding:var(--s3) var(--s4); background:var(--paper);
               border:1px solid var(--line); border-radius:var(--r-s); }
.salon-ref{ color:var(--muted); }

/* ─── отзывы ────────────────────────────────────────────────────────────── */
.reviews{ margin:var(--s7) 0 0; }
.review-list{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s4); }
.review{ background:var(--paper); border:1px solid var(--line);
         border-radius:var(--r-card); padding:var(--s5); }
.review-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); }
.review-author{ font-weight:700; }
.review-body{ margin:var(--s3) 0 0; color:var(--ink-2); }
.review-form{ margin:var(--s5) 0 0; background:var(--paper); border:1px solid var(--line);
              border-radius:var(--r-card); padding:var(--s5); display:grid; gap:var(--s4); }
.field{ display:grid; gap:var(--s2); }
.field input,.field textarea,.field select{ font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-s); padding:.75rem var(--s4); width:100%; }
.field input:focus,.field textarea:focus{ border-color:var(--ink); outline:none;
  box-shadow:0 0 0 3px rgba(13,16,21,.10); }
button,.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:3rem; padding:0 1.5rem; border:0; border-radius:var(--r-pill); font:inherit;
  font-weight:700; background:var(--ink); color:var(--paper); cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease); }
button:hover,.btn:hover{ background:var(--ink-2); color:var(--paper); transform:translateY(-1px); }

.notice{ border-radius:var(--r-s); padding:var(--s3) var(--s4); margin:0 0 var(--s4);
         border:1px solid var(--line); background:var(--paper); }
.notice--ok{ border-color:var(--ok); color:var(--ok); }
.notice--err{ border-color:var(--err); color:var(--err); }

/* ─── отказы ────────────────────────────────────────────────────────────── */
.fail{ text-align:center; padding:var(--s8) 0; }
.fail .code{ font-size:clamp(3rem,2rem + 5vw,5rem); font-weight:800; letter-spacing:-.05em;
             color:var(--faint); margin:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms; animation-iteration-count:1;
                        transition-duration:.01ms; scroll-behavior:auto; }
  .card:hover,.tile:hover,.chip:hover,button:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* Печать: краулеру и человеку с принтером не нужны шапка, подвал и сужения. */
@media print{
  .site-header,.site-footer,.pager,.facet,.skip,.anchors,.hero-mesh{ display:none; }
  body{ color:#000; background:#fff; }
  .card,.seo,.review{ break-inside:avoid; }
}

/* ─── страница выбора города /goroda ────────────────────────────────────── */
/* Расположение блоков — с эталона sauna.ru/goroda: шапка по центру с выбором
 * списком, полосы чипами, полоса букв, алфавит колонками. Тона и радиусы —
 * наши: у эталона золото по кремовому, здесь чернила по бумаге. */
.pick{ max-width:44rem; margin:0 auto; text-align:center; padding:var(--s6) 0 0; }
.pick h1{ margin:var(--s3) 0 0; }
.pick .lead{ margin:var(--s3) auto 0; }
.pick-f{ margin:var(--s5) auto 0; max-width:28rem; }
/* appearance:none снимает системный вид вместе со стрелкой, поэтому стрелка
 * рисуется фоном. Это data:-URI, а не файл: img-src разрешает схему data:,
 * а лишний запрос ради треугольника 12×8 не окупается ничем. */
.pick-f select{ width:100%; height:3.25rem; padding:0 2.75rem 0 var(--s4);
                font:inherit; font-size:1rem; color:var(--ink); cursor:pointer;
                background:var(--paper) no-repeat right var(--s4) center/.75rem;
                background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
                border:1px solid var(--line); border-radius:var(--r-pill);
                box-shadow:var(--sh-card); appearance:none; }
.pick-f select:focus-visible{ outline:2px solid var(--hot); outline-offset:2px; }

.pick-g{ padding-top:var(--s6); }
.label{ font-size:.8125rem; text-transform:uppercase; letter-spacing:.12em;
        color:var(--muted); font-weight:700; margin:0 0 var(--s3); }
.pick-g .chips{ margin-top:0; }

/* Полоса букв. Кнопки ведут на якоря блоков ниже — отдельных страниц под букву
 * у нас нет, и потому активной буквы не бывает: активна всегда «Все». */
.abc-h{ padding-top:var(--s7); margin-top:var(--s6); border-top:1px solid var(--line); }
.letters{ display:flex; flex-wrap:wrap; gap:var(--s1); }
.letter{ display:inline-grid; place-items:center; min-width:2.25rem; height:2.25rem;
         padding:0 var(--s2); border:1px solid var(--line); border-radius:var(--r-s);
         font-size:.875rem; font-weight:700; background:var(--paper); }
.letter:hover{ border-color:rgba(13,16,21,.22); color:var(--ink); }
.letter[aria-current]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* Алфавит колонками. columns, а не grid: колонки заполняются сверху вниз и
 * перетекают сами, поэтому «А» не растягивает соседние буквы под свою высоту.
 * break-inside держит группу целиком в одной колонке. */
.abc{ margin-top:var(--s5); columns:4 14rem; column-gap:var(--s6); }
.abc-g{ break-inside:avoid; margin:0 0 var(--s5); }
.abc-g h3{ font-size:1.125rem; margin:0 0 var(--s2); padding-bottom:var(--s1);
           border-bottom:1px solid var(--line); }
.abc-g ul{ list-style:none; margin:0; padding:0; }
.abc-g a{ display:flex; align-items:baseline; justify-content:space-between;
          gap:var(--s2); padding:.1875rem 0; color:var(--ink-2); }
.abc-g a:hover{ color:var(--ink); }
.abc-g b{ color:var(--muted); font-size:.8125rem; font-weight:600;
          font-variant-numeric:tabular-nums; }
/* Якорь буквы: полоса букв — сверху, и без отступа заголовок группы уезжает
 * ей под низ. scroll-margin, а не пустой элемент над якорем. */
.abc-g[id]{ scroll-margin-top:var(--s5); }

@media (max-width:40rem){
  .abc{ columns:2 9rem; column-gap:var(--s4); }
}