:root{
 --bg:#ffffff; --surface:#f4efe7; --surface-alt:#e9e1d5; --line:#ded5c8;
 --ink:#1b1a17; --muted:#5c574f; --accent:#b8400f; --accent-strong:#9a350c;
 --accent-ink:#8f3009; --on-accent:#ffffff; --dark:#24221e; --dark-alt:#332f29;
 --on-dark:#f6f2ec; --on-dark-muted:#bdb5a8; --frost:#3d6b86; --frost-dark:#8fb4c9;
 --display:"Sora",system-ui,sans-serif; --sans:"Wix Madefor Text",system-ui,sans-serif;
 --mono:"JetBrains Mono",ui-monospace,monospace;
 --wrap:1280px;
}

@font-face{font-family:"Sora";src:url("/wp-content/themes/storefront-child/assets/sora-latin.811e1196.woff2?ver=9.9.4") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Wix Madefor Text";src:url("/wp-content/themes/storefront-child/assets/wix-madefor-text-latin.cbd90a79.woff2?ver=9.9.4") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/wp-content/themes/storefront-child/assets/jetbrains-mono-latin.83c005d4.woff2?ver=9.9.4") format("woff2");font-weight:400 600;font-display:swap}
*{box-sizing:border-box}
/* МИКРОДВИЖЕНИЕ: 160-220 мс на всё, что откликается. Без него страница
   ощущается статичной картинкой — это ровно то, что отличает «аккуратный
   каталог» от живого магазина. Уважаем prefers-reduced-motion. */
a,button,.th-card,.th-bandcard,.th-buy,.th-chip,.th-sw,.th-guide{transition:
 background-color .18s ease, border-color .18s ease, color .18s ease, transform .22s ease, box-shadow .22s ease}
.th-card-shot img,.th-storyshapes img{transition:transform .35s ease}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
 -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* ТИПОГРАФИЧЕСКАЯ ШКАЛА (возврат №1). Было 40/27/18 при тексте 16 — контраст
   2.5x, и страница читалась ровным техническим каталогом. Стало 46/34/19:
   межстрочный у дисплея прижат к единице, трекинг
   отрицательный. Это первый из приёмов, снятых с живых сайтов (крупная
   уверенная типографика у BlackStrap и Ciele), и он один меняет ощущение
   страницы сильнее, чем любая смена цвета. */
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0 0 14px}
h1{font-size:46px;line-height:1.05;letter-spacing:-.018em}
h2{font-size:34px;line-height:1.08;letter-spacing:-.015em}
h3{font-size:19px;line-height:1.2;letter-spacing:-.01em}
@media(max-width:860px){h2{font-size:28px}}
@media(max-width:480px){h1{font-size:38px;letter-spacing:-.015em}h2{font-size:25px}}
p{margin:0 0 14px}
.th-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
/* РИТМ И ВОЗДУХ. Было 46px у всех секций подряд — страница шла одинаковыми
   полосами. Стало 86px у обычной секции и 104px у полос со сменой фона:
   у всех трёх референсов современность держится на щедром вертикальном
   воздухе между блоками, а не на плотности. */
.th-sec{padding-block:86px}
.th-hero + .th-sec{padding-block:34px 86px}
.th-sec--sand,.th-sec--dark{padding-block:104px}
@media(max-width:900px){.th-sec{padding-block:56px}.th-sec--sand,.th-sec--dark{padding-block:64px}}
.th-sec--sand{background:var(--surface)}
.th-sec--dark{background:var(--dark);color:var(--on-dark)}
.th-sec--dark h2{color:var(--on-dark)}
.th-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.th-lede{color:var(--muted);max-width:none;margin-bottom:20px}
.th-sec--dark .th-lede{color:var(--on-dark-muted)}
.th-more{font-family:var(--mono);font-size:12.5px;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;white-space:nowrap}
.th-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 8px}
.th-sec--dark .th-kicker{color:var(--frost-dark)}
.th-skip{position:absolute;left:-9999px}
.th-skip:focus{left:12px;top:12px;position:fixed;z-index:9;background:var(--accent);color:var(--on-accent);padding:10px 14px}

/* ---------- шапка: знак по центру, одна строка отделов ---------- */
.th-head{background:var(--bg);border-bottom:1px solid var(--line)}
.th-head-in{display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:18px 14px}
.th-mark{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:.16em;text-transform:uppercase;
 text-decoration:none;color:var(--ink)}
.th-mark b{color:var(--accent-ink);font-weight:700}
.th-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 20px;min-width:0}
.th-nav a{min-width:0;font-size:14px;text-decoration:none;padding:5px 0;border-bottom:2px solid transparent;white-space:nowrap}
.th-nav a:hover,.th-nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent-ink)}
@media(max-width:620px){.th-mark{font-size:21px;letter-spacing:.12em}.th-nav{gap:0 13px}.th-nav a{font-size:13px;padding:3px 0}}

/* ---------- герой: слева слово, справа шкала условий ---------- */
/* ПЕРВЫЙ ЭКРАН (возврат №1). Было: светлая песчаная плашка, заголовок 40px и
   четыре ровные плитки — по сути оглавление. Стало: ТЁМНАЯ полоса во всю
   ширину, крупная типографика белым и КОЛЛАЖ из пяти кадров разного размера
   со сдвигом. Приём снят с BlackStrap (тёмный герой + высокий контраст) и
   Ciele (фотография ведёт композицию), но сделан в наших рамках §4.0: ни один
   кадр не растянут, каждый живёт в боксе не шире исходника при DPR 2, а
   «крупность» даёт не размер одного кадра, а их сборка и воздух вокруг.
   ЭТО НЕ ТЁМНЫЙ САЙТ: тёмных полос ровно две, всё остальное светлое — приём
   в чередовании, а не в перекраске (сознательно расхожусь со своим stickon,
   где тёмным сделан весь сайт). */
.th-hero{background:var(--dark);color:var(--on-dark);overflow:hidden}
/* ВЫСОТА ГЕРОЯ — ГРАНИЦА, А НЕ ВКУС. Первый прогон переделки дал герой в 71%
   экрана и первую карточку товара на 1520px при потолке 900 (страж продающей
   композиции). Стиль не отменяет торговую задачу: воздух ужат, дисплей на
   десять пунктов мельче, шкала условий переехала В ТУ ЖЕ тёмную полосу
   компактной строкой. */
.th-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:center;padding-block:28px 20px}
.th-hero h1{margin-bottom:20px;color:var(--on-dark)}
.th-hero p{color:var(--on-dark-muted);margin-bottom:0;font-size:17px;max-width:36em}
.th-herolede{display:block}
.th-hero .th-kicker{color:var(--frost-dark)}
@media(max-width:860px){.th-hero-in{grid-template-columns:1fr;gap:26px;padding-block:36px 28px}}

/* Коллаж кадров: пять штук, сетка со сдвигом, один крупнее прочих. */
/* ШИРИНА КОЛЛАЖА ОГРАНИЧЕНА, ВЫСОТА РЯДА ПОСТОЯННА. Клетка держит пропорцию
   только пока обе стороны меняются вместе. На планшете коллаж уходил во всю
   полосу, ряд оставался 44px — кадр с object-fit:contain вставал посередине
   широкой клетки, и половина коллажа читалась пустыми тёмными прямоугольниками
   (видно глазом на 768 при зелёном emptyFrame: бокс-то не пуст, в нём кадр).
   Лечится потолком ширины, а не растяжкой кадра: §4.0 старше красоты. */
.th-collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:44px;gap:8px}
.th-collage figure{margin:0;background:var(--dark-alt);overflow:hidden}
/* Кадр в ячейке рисуется НЕ ШИРЕ своего честного потолка (--cap ставит
   parts.shot по настоящей ширине файла): ячейка 380px при исходнике 500
   растягивала бы кадр. Центрируем на белом поле. */
.th-collage img{width:100%;max-width:var(--cap,100%);height:100%;object-fit:contain;background:#fff;margin:0 auto}
.th-collage figure:nth-child(1){grid-column:span 4;grid-row:span 3}
.th-collage figure:nth-child(2){grid-column:span 2;grid-row:span 2}
.th-collage figure:nth-child(3){grid-column:span 2;grid-row:span 1}
.th-collage figure:nth-child(4){grid-column:span 3;grid-row:span 2}
.th-collage figure:nth-child(5){grid-column:span 3;grid-row:span 2}
@media(max-width:860px){.th-collage{max-width:520px;margin-inline:auto}}
@media(max-width:620px){.th-collage{grid-auto-rows:56px;gap:8px}}

/* Шкала условий живёт В ТОЙ ЖЕ тёмной полосе, компактной строкой под
   коллажем: так товар виден до 900px, а «начни с условия» остаётся первым
   шагом (страж продающей композиции, §5). */
.th-herobands{padding-bottom:24px}
.th-herobands .th-kicker{margin-bottom:10px}

/* Плитки условий — равные ширины и ЦЕНТРИРОВАННЫЙ НЕПОЛНЫЙ ПОСЛЕДНИЙ РЯД (§5).
   Была сетка: ширины она держит, но полоса работ идёт шестью плитками, и две
   оставшиеся прилипали к левому краю (поймано глазом на приёмке 14.09) —
   justify-content у сетки центрирует ДОРОЖКИ, а не элементы. Флекс с
   фиксированной базой даёт и равные ширины, и центр последнего ряда; ширина
   задана вычислением, а не содержимым, поэтому прежняя рваность не вернётся. */
.th-bands{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0;padding:0;list-style:none}
.th-bands>li{flex:0 1 calc(25% - 10.5px);min-width:0}
@media(max-width:860px){.th-bands>li{flex-basis:calc(50% - 7px)}}
/* На 390 четыре плитки в столбик давали 429px первого экрана и уводили
   первую карточку товара на 1416px. Две колонки читаются (подпись в две
   строки при 165px), высота полосы падает вдвое. */
@media(max-width:480px){.th-bandcard{padding:12px 12px 10px}.th-bandcard span{font-size:12px}}
/* СВЕТЛАЯ КАРТОЧКА ВНУТРИ ТЁМНОЙ ПОЛОСЫ КРАСИТ СВОЙ ТЕКСТ САМА. Полоса ставит
   color:var(--on-dark) на потомков, и заголовок плитки наследовал светлый по
   белому: буквы едва видно. Тот же класс, что цена светло-серым по белому на
   eytino 13.09 (цвет наследуется, специфичность до своего не дотягивается). */
.th-bandcard{height:100%;min-width:0;background:var(--bg);border:1px solid var(--line);padding:16px 16px 14px;
 text-decoration:none;display:block;color:var(--ink)}
.th-bandcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 28px rgba(27,26,23,.10)}
.th-bandcard b{display:block;font-family:var(--display);font-size:17px;line-height:1.1;letter-spacing:-.02em;margin-bottom:5px;color:var(--ink)}
.th-bandcard span{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.th-bandcard u{display:block;font-family:var(--mono);font-size:12px;color:var(--accent-ink);text-decoration:none;margin-top:10px}

.th-bandcard--coldest{border-top:4px solid var(--frost)}
.th-bandcard--cold{border-top:4px solid var(--frost-dark)}
.th-bandcard--season{border-top:4px solid var(--line)}
.th-bandcard--sun{border-top:4px solid var(--accent)}

/* ---------- витрина ---------- */
/* КАРТОЧКА (возврат №1). Было: 250px, тонкая рамка, ноль движения — ряд
   читался таблицей. Стало: бокс шире, кадр в собственном поле с подъёмом на
   наведении, имя крупнее, кнопка появляется сплошной полосой. Кадр при этом
   НЕ вырос: §4.0 держит его на 250 CSS px, растёт поле вокруг — это ровно
   приём Ciele, где воздух вокруг кадра делает карточку дорогой. */
.th-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;list-style:none;margin:0;padding:0}
.th-card{flex:0 1 288px;min-width:0;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line)}
.th-card:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 14px 34px rgba(27,26,23,.12)}
.th-card-shot{display:block;background:#fff;border-bottom:1px solid var(--line);padding:14px 14px 10px;overflow:hidden}
.th-card-shot img{width:100%;max-width:var(--cap,100%);height:auto;margin:0 auto}
.th-card:hover .th-card-shot img{transform:scale(1.04)}
.th-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto;min-width:0}
.th-card-body h3{margin:0;font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.28;letter-spacing:-.01em}
.th-card-body h3 a{text-decoration:none}
.th-card-body h3 a:hover{color:var(--accent-ink)}
.th-band{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
 padding:3px 8px;border-radius:11px;background:var(--surface-alt);color:var(--muted)}
.th-band--coldest{background:#e4edf3;color:#2d5670}
.th-band--cold{background:#eaf1f5;color:#33607b}
.th-band--season{background:var(--surface-alt);color:var(--muted)}
.th-band--sun{background:#f7e7de;color:var(--accent-ink)}
.th-cond{font-size:13.5px;color:var(--muted)}
/* ЧИСЛА КАРТОЧКИ ПРИЖАТЫ К НИЗУ. Имя товара занимает то одну строку, то две,
   и цена в соседних карточках одного ряда вставала с разбросом 21-43px — ряд
   читается поехавшим (поймано стражем rowBaseline, которого здесь не звали
   вовсе до приёмки 14.09). Карточки в ряду равной высоты, поэтому достаточно
   прижать вниз ПЕРВЫЙ элемент числового блока: цена, расцветки и кнопка
   встают на одну линию у всех соседей при любой длине имени. */
.th-stars{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.th-stars b{font-weight:400}
.th-price{margin-top:auto;font-family:var(--mono);font-weight:600;font-size:17px}
.th-price b{font-weight:600}
.th-from{font-weight:400;font-size:13px;color:var(--muted)}
.th-colours{font-family:var(--mono);font-size:12px;color:var(--accent-ink)}
/* Пустой слот обязан занимать РОВНО СТРОКУ, а не кегль: при min-height:1em
   строка расцветок схлопывалась с 19px до 12px, и в прижатом к низу блоке
   цена соседа уезжала на 7px выше. Та же схлопнувшаяся строка фактов, что на
   kalidi 13.09, только на семь пикселей — глазом это «поехавший ряд». */
.th-slot-empty{display:block;min-height:1.6em}
.th-card-foot{padding-top:10px}

/* ---------- кнопка покупки: НАСТОЯЩИЙ ТЕКСТ ---------- */
/* КНОПКИ. Было: тонкая рамка и мелкая надпись — призыв не читался призывом.
   Стало: сплошная заливка акцентом, крупнее кегль и поля. У всех трёх
   референсов главный призыв — плотный контрастный прямоугольник. */
.th-buy{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;background:var(--accent);
 border:2px solid var(--accent);padding:13px 16px;text-decoration:none;cursor:pointer}
.th-buy:hover{background:var(--accent-strong);border-color:var(--accent-strong);transform:translateY(-1px)}
.th-buy--solid{padding:17px 22px}
.th-buy-t{font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.25;color:var(--on-accent);text-align:center;letter-spacing:.01em}
.th-buy--solid .th-buy-t{font-size:16px}
/* В карточке сетки надпись призыва переносилась на две строки (288px минус
   поля): кегль на пункт мельче держит её в одну строку. */
.th-card .th-buy{padding:12px 10px}
.th-card .th-buy-t{font-size:13.5px}
.th-table .th-buy{padding:9px 11px}
.th-table .th-buy-t{font-size:13px}

/* ---------- крошки ---------- */
.th-crumbwrap{padding-block:12px}
.th-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.th-crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.th-crumbs a:hover{border-bottom-color:var(--accent)}

/* ---------- страница отдела и товара ---------- */
.th-pagehead{background:var(--surface);border-bottom:1px solid var(--line);padding-block:26px 30px}
.th-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.th-chip{font-family:var(--mono);font-size:12.5px;padding:6px 12px;border:1px solid var(--line);background:var(--bg);
 text-decoration:none;color:var(--ink);border-radius:14px}
.th-chip:hover,.th-chip[aria-current="true"]{border-color:var(--accent);color:var(--accent-ink)}
.th-count{font-family:var(--mono);font-size:13px;color:var(--muted);margin:0 0 14px}

.th-prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start;padding-block:30px}
/* ТЁМНАЯ ПОЛОСА В СЕРЕДИНЕ (возврат №1). Вторая и последняя тёмная
   поверхность сайта: чередование светлого и тёмного — третий приём, снятый с
   живых референсов, и он же держит ритм длинной главной. Кадр в ней лежит на
   белом поле, чтобы пакшот не тонул. */
.th-sec--dark .th-prod>div{min-width:0}
.th-sec--dark .th-card-shot{background:#fff;padding:12px;display:block}
.th-sec--dark h2{font-size:30px;margin-top:18px}
.th-sec--dark p{color:var(--on-dark-muted)}
.th-sec--dark .th-more{color:var(--on-dark);border-bottom-color:var(--accent)}
@media(max-width:860px){.th-prod{grid-template-columns:1fr;gap:22px}}
.th-gal-main{background:#fff;border:1px solid var(--line)}
.th-gal-main img{width:100%;max-width:var(--cap,100%);height:auto;margin:0 auto}
.th-gal-strip{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.th-gal-strip a{flex:0 0 calc(20% - 6px);min-width:0;background:#fff;border:1px solid var(--line)}
.th-gal-strip a[aria-current="true"],.th-gal-strip a.is-active{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}
.th-gal-strip img{width:100%;max-width:var(--cap,100%);height:auto;margin:0 auto}
/* ГЛАВНОЕ ЧИСЛО СТРАНИЦЫ НАБИРАЕТСЯ ДИСПЛЕЕМ, А НЕ МОНОШИРИННЫМ. В моно
   точка занимает целую клетку, и на 29px «$8.99» читается как «$8 . 99» —
   поймано глазом на приёмке 14.09. Моноширинный остаётся там, где он и
   нужен: мелкие метки, счётчики и цены в карточках, где числа стоят в
   столбик и их сравнивают. */
.th-prodprice{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.015em;
 font-variant-numeric:tabular-nums;margin:8px 0 4px}
.th-prodprice small{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--muted);margin-left:8px}
.th-prodrating{font-size:14px;color:var(--muted);margin:0 0 14px}
.th-note{font-size:12.5px;color:var(--muted);margin-top:8px}
.th-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.th-sw{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg);padding:5px 10px 5px 5px;
 text-decoration:none;font-size:13px;min-width:0}
.th-sw:hover,.th-sw[aria-current="true"]{border-color:var(--accent)}
.th-sw img{width:38px;max-width:var(--cap,38px);height:auto}
.th-facts{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 16px}
.th-facts th,.th-facts td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.th-facts th{width:38%;font-weight:600;color:var(--muted);font-size:13px}
.th-facts td{font-variant-numeric:tabular-nums}
.th-tablewrap{min-width:0;overflow-x:auto}
.th-table{width:100%;min-width:340px;border-collapse:collapse;font-size:14.5px}
.th-table th,.th-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.th-table th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}
.th-table caption{caption-side:top;text-align:left;font-family:var(--display);font-size:17px;padding-bottom:9px}
.th-table .th-buy{padding:7px 9px}
@media(max-width:520px){.th-table{min-width:0}.th-table th,.th-table td{padding:7px 5px}.th-table .th-buy-t{font-size:12px}}
.th-limits{border-left:4px solid var(--accent);padding:2px 0 2px 14px;margin:0 0 16px}
.th-limits b{display:block;font-family:var(--display);font-size:15px;margin-bottom:4px}
.th-limits p{margin:0;font-size:14px;color:var(--muted)}
.th-traits{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px;padding:0;list-style:none}
.th-trait{font-family:var(--mono);font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:13px;color:var(--muted)}

/* ---------- проза и её визуальные разрывы (§5) ---------- */
.th-storytext p{max-width:none}
.th-storytext p:last-child{margin-bottom:0}
.th-storyshapes{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:24px 0}
.th-storyshapes a{flex:0 1 160px;min-width:0;text-decoration:none;text-align:center}
.th-storyshapes img{width:100%;max-width:var(--cap,100%);height:auto;background:#fff;border:1px solid var(--line);margin:0 auto}
.th-storyshapes b{display:block;font-family:var(--display);font-size:15px;margin-top:8px}
.th-storyshapes span{display:block;font-size:13px;color:var(--muted)}
.th-storyshapes a:hover b{color:var(--accent-ink)}
.th-scale{margin:24px 0;padding-top:14px;border-top:2px solid var(--ink)}
.th-scale figcaption b{display:block;font-family:var(--display);font-size:16px;margin-bottom:4px}
.th-scale figcaption span{display:block;font-size:13.5px;color:var(--muted)}
.th-scalerow{display:flex;align-items:center;gap:12px;margin-top:9px}
.th-scalelab{flex:0 0 170px;font-size:13.5px;text-decoration:none;border-bottom:1px solid var(--line)}
.th-scalelab:hover{border-bottom-color:var(--accent)}
.th-scalerow svg{flex:1 1 auto;min-width:0;height:12px;display:block}
.th-scalerow svg rect{fill:var(--accent)}
.th-scalenum{flex:0 0 auto;font-family:var(--mono);font-size:13px;color:var(--muted)}
@media(max-width:620px){.th-scalerow{flex-wrap:wrap;gap:4px 10px}.th-scalelab{flex:0 0 auto}.th-scalerow svg{flex:1 1 100%;order:3}}
.th-steps{list-style:none;margin:24px 0;padding:0;display:flex;flex-wrap:wrap;gap:20px}
.th-steps li{flex:1 1 220px;min-width:0;border-top:2px solid var(--ink);padding-top:12px}
.th-steps svg{width:34px;height:34px;fill:var(--accent);display:block;margin-bottom:8px}
.th-steps b{display:block;font-family:var(--display);font-size:16px;margin-bottom:4px}
.th-steps span{display:block;font-size:13.5px;color:var(--muted)}
.th-steps a{color:var(--accent-ink)}

/* Схема покрытия: рисунок SVG, подписи обычным текстом рядом (внутри <text>
   кегль на 360px нечитаем, урок kalidi). */
.th-cover{display:flex;align-items:center;gap:18px;margin:20px 0;padding-top:14px;border-top:2px solid var(--ink)}
.th-cover svg{flex:0 0 92px;width:92px;height:auto}
.th-cover-head{fill:var(--surface-alt)}
.th-cover-on{fill:var(--accent)}
.th-cover figcaption b{display:block;font-family:var(--display);font-size:16px;margin-bottom:4px}
.th-cover figcaption span{display:block;font-size:13.5px;color:var(--muted)}
@media(max-width:520px){.th-cover{flex-direction:column;align-items:flex-start;gap:10px}}
.th-covers{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0}
.th-covers a{flex:1 1 150px;min-width:0;text-decoration:none;text-align:center;border:1px solid var(--line);padding:12px}
.th-covers a:hover{border-color:var(--accent)}
.th-covers svg{width:64px;height:auto;margin:0 auto 8px}
.th-covers b{display:block;font-family:var(--display);font-size:15px}
.th-covers span{display:block;font-size:12.5px;color:var(--muted)}

/* ---------- гиды ---------- */
.th-guides{display:flex;flex-wrap:wrap;gap:18px}
.th-guide{flex:1 1 260px;min-width:0;background:var(--bg);border:1px solid var(--line);padding:20px;text-decoration:none}
.th-guide:hover{border-color:var(--accent)}
.th-guide b{display:block;font-family:var(--display);font-size:18px;line-height:1.2;margin-bottom:8px}
.th-guide span{display:block;font-size:14px;color:var(--muted)}
.th-toc{background:var(--surface);border-left:4px solid var(--accent);padding:14px 18px;margin:0 0 22px}
.th-toc b{font-family:var(--display);font-size:14px}
.th-toc ol{margin:8px 0 0;padding-left:20px}
.th-toc li{font-size:14px;margin-bottom:3px}
.th-art blockquote{margin:18px 0;padding:14px 18px;background:var(--surface);border-left:4px solid var(--frost)}
.th-art blockquote p{margin:0 0 8px;font-size:15.5px}
.th-art cite{font-size:12.5px;color:var(--muted);font-style:normal}
.th-care{background:var(--surface-alt);padding:16px 18px;margin-top:24px}
.th-care b{display:block;font-family:var(--display);font-size:15px;margin-bottom:6px}
.th-care p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- подвал ---------- */
/* ПОДВАЛ. Было: тёмная плашка с четырьмя колонками мелких ссылок вплотную.
   Стало: акцентная линия сверху, больше воздуха, колонки дышат. */
.th-foot{background:var(--dark);color:var(--on-dark);margin-top:0;padding-block:64px 34px;
 border-top:6px solid var(--accent)}
.th-footcols{display:flex;flex-wrap:wrap;gap:38px}
.th-footcols>div{flex:1 1 200px;min-width:0}
.th-footcols b{display:block;font-family:var(--display);font-size:15px;letter-spacing:-.01em;margin-bottom:14px}
.th-footcols a{display:block;font-size:14.5px;color:var(--on-dark-muted);text-decoration:none;padding:5px 0}
.th-footcols a:hover{color:var(--on-dark)}
.th-footbar{border-top:1px solid var(--dark-alt);margin-top:40px;padding-top:22px;font-size:13px;color:var(--on-dark-muted)}
.th-footbar a{color:var(--on-dark)}
@media(max-width:1000px){
 h1{font-size:40px}
 .th-collage{grid-auto-rows:30px;gap:6px}
 /* Лид прячется ТОЛЬКО в вилке 861-1000px: там колонка около 416px, и его
    пять строк съедают ровно тот запас, из-за которого первая карточка
    товара уезжает за 900px. Текст не теряется: он есть в описании
    страницы и на /about, на всех прочих ширинах лид на месте. */
 /* см. отдельный медиа-запрос ниже: прячется ТОЛЬКО вилка 861-1000 */
 .th-hero-in{padding-block:22px 14px;gap:26px}
 .th-herobands{padding-bottom:18px}
 .th-bandcard{padding:12px 12px 10px}
 .th-bandcard b{font-size:15px}
 .th-bandcard span{font-size:12px}
 .th-bandcard u{margin-top:8px}
}
/* Лид прячется ровно в вилке 861-1000px и больше нигде. Там колонка около
   416px, и его пять строк съедают тот самый запас, из-за которого первая
   карточка товара уезжала за 900px. На телефоне лид НУЖЕН: там он первое,
   что объясняет устройство каталога, и прятать его нельзя. */
@media(min-width:861px) and (max-width:1000px){.th-herolede{display:none}}
[hidden]{display:none!important}