/*
Theme Name: Sablezoob Portfolio
Theme URI: http://sablezoob.com
Author: Sablezoob
Description: Кастомная тема-портфолио маркетолога-технолога: услуги, кейсы, экосистема продуктов, блог, отзывы и приём заявок. Перенесена из Claude Design.
Version: 2.7.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sablezoob
Tags: portfolio, one-column, custom-colors, custom-menu, dark-mode, translation-ready
*/

/*
   Весь дизайн живёт в assets/css/design.css – это выгрузка из Claude Design
   один в один. Правьте её только пересинхронизацией проекта, иначе следующая
   выгрузка затрёт изменения.

   Этот файл – тонкий слой поверх: локальные шрифты, то, чего в макете нет
   (пагинация, поиск, пустые состояния, доступность), и точечные исправления.
*/

/* ============ Шрифты (локально, без Google CDN) ============ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/Manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/Manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/Manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/Manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Исправления дефектов макета ============ */
/* ============ Контраст самого светлого текстового токена ============ */
/*
   --ink-4 в макете – #8d938f: на белом это 3.13, на фоне секции #f6f6f3 –
   2.89, тогда как AA для обычного текста требует 4.5. Токеном покрашены
   71 правило: крошки, номера шагов, подписи осей, мета-строки, роли под
   отзывами – то есть почти все мелкие моноширинные подписи сайта. Править
   их по одной бессмысленно: дефект в самом значении.

   Берём самый светлый серый того же оттенка, который держит 4.5 на всех
   трёх фонах, и остаётся светлее --ink-3 – четыре ступени серого,
   задуманные в макете, сохраняются.
   В тёмной теме та же история: #5a605a на #0c0e0d даёт 3.00.
*/
:root { --ink-4: #6c726e; }
[data-theme="dark"] { --ink-4: #7a807a; }


/* Бейдж «Рекомендую» в тёмной теме: и фон, и текст брали светлые токены –
   получался светло-зелёный по ярко-зелёному, контраст 1.33. */
[data-theme="dark"] .plan-badge,
[data-theme="dark"] .cta-btn { color: var(--bg); }

/* Мета-строка той же карточки: color-mix на 55% по светлому фону даёт 4.07. */
[data-theme="dark"] .thought-card.feat .thought-meta,
[data-theme="dark"] .thought-card.feat .thought-foot { color: color-mix(in oklab, var(--bg) 75%, transparent); }

/* Заголовок кейса – ссылка, то есть строчный элемент: на ширине ≤980px он
   склеивался с меткой CASE_01 в одну строку и боксы налезали друг на друга. */
.case-left .case-title { display: block; }

/* Шапка не сжимается ниже 390px: 32px паддинга, бренд и четыре контрола
   (язык, тема, «Обсудить проект», бургер) не влезают в строку, и вся страница
   получает горизонтальную прокрутку. Макет останавливает адаптацию шапки
   на 560px, дальше ничего не предусмотрено. */
@media (max-width: 420px) {
  .nav-inner { padding: 18px 20px; }
  .nav-right { gap: 8px; }
}
/* Ниже 360px не хватает и этого. Оставляем логотип-знак – ссылка на главную
   сохраняется, а кнопка «Обсудить проект» остаётся на месте: в мобильной
   панели её нет, убирать нельзя. */
@media (max-width: 360px) { .brand-name { display: none; } }

/* .process-grid в макете спускается с четырёх колонок до двух и на этом
   останавливается. На телефоне min-content слова «Декомпозиция» (134px) плюс
   48px паддинга распирает колонку до 184px – две таких шире контейнера.
   Остальные сетки макета на этой ширине уже одноколоночные. */
@media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; } }

/* Вторая колонка шапки – портрет, обложка чек-листа – появляется только
   вместе с изображением. Пока картинок нет, сетка обязана свернуться
   в одну колонку, иначе текст жмётся в 60% ширины, а справа мёртвое поле.
   Правило самоустранится, когда изображения зальют. */
.page-hero-grid:not(:has(> * + *)),
.about-hero-grid:not(:has(> * + *)),
.lm-hero-grid:not(:has(> * + *)),
.hero-grid:not(:has(> * + *)) { grid-template-columns: minmax(0, 1fr); }

/* Макет считан на латинице и переносов в заголовках не задаёт. Длинное
   русское слово («конфиденциальности», 18 знаков) в h1 на телефоне шире
   колонки и вытягивает горизонтальную прокрутку всей страницы. Переносим
   только по необходимости: hyphens здесь не нужен, на десктопе вид не меняется. */
/* Заголовок кейса выводится голым <h1> без класса, поэтому в список
   его пришлось добавить отдельно: «программирования:» на телефоне
   шире колонки и вытягивает прокрутку всей страницы. */
.page-h1, .art-h1, .lg-h1, .case-h1, .lm-h1, .pd-h1, .about-h1, .sr-h1, .th-h1,
.page-hero h1, .section-title, .art-h2, .art-h3 { overflow-wrap: break-word; }

/* Анимация потока в схеме hero: в макете её рисовал React, в CSS правил не было. */
.diagram-edge-flow { opacity: 0; }
.diagram-edge-flow.on { animation: szEdgeFlow 1.6s ease-in-out 1 forwards; }
@keyframes szEdgeFlow { 0% { opacity: 0 } 45% { opacity: 1 } 100% { opacity: 0 } }

/* Компактная кнопка в боковой колонке кейса. */
.btn.sm { padding: 11px 18px; font-size: 14px; }

/* Штамп «UPDATED … / N ENTITIES» справа от заголовка секции. */
.section-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: right;
}
@media (max-width: 720px) { .section-stamp { text-align: left; } }

/* ============ Переключатель темы: две иконки вместо условного рендера ============ */
.theme-switch .icon-moon { display: block; }
.theme-switch .icon-sun { display: none; }
[data-theme="dark"] .theme-switch .icon-moon { display: none; }
[data-theme="dark"] .theme-switch .icon-sun { display: block; }

/* ============ Работа без JavaScript ============ */
/* Класс js вешает инлайн-скрипт в <head>. Пока его нет, интерфейс не должен
   прятать контент за состояниями, которые может включить только скрипт. */
html:not(.js) .faq-a-wrap { grid-template-rows: 1fr; }
html:not(.js) .faq-toggle { display: none; }
html:not(.js) .nav-burger { display: none; }
@media (max-width: 1080px) {
  /* Десктопное меню на этой ширине скрыто, а мобильную панель открывает
     только скрипт – без него оставался один логотип. */
  html:not(.js) .nav-mobile {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-top: 1px solid var(--hair);
  }
}
html:not(.js) .cases-view,
html:not(.js) .filters button.filter { display: none; }
/* Панель над списком кейсов без скриптов остаётся пустой полосой,
   если в ней нет ссылок-фильтров (они есть только на странице направления). */
html:not(.js) .cases-bar:not(:has(a.filter)) { display: none; }

/* Пузырёк валидации подскроллит к полю, а фиксированная шапка его перекрывает. */
.contact-form :is(input, textarea, select) { scroll-margin-top: 96px; }
body.admin-bar .contact-form :is(input, textarea, select) { scroll-margin-top: 128px; }

/* ============ Доступность ============ */
.screen-reader-text {
  border: 0; clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0;
  overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
  clip-path: none; height: auto; width: auto;
  background: var(--bg-elev); color: var(--ink);
  padding: 12px 20px; border-radius: 8px;
  left: 12px; top: 12px; z-index: 100000;
  border: 1px solid var(--ink);
}
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============ Админ-бар не должен ломать фиксированные слои ============ */
body.admin-bar .nav { top: 32px; }
body.admin-bar .nav-mobile { top: 102px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
  body.admin-bar .nav-mobile { top: 116px; }
}

/* ============ Форма: согласие и ошибки ============ */
/* Ловушка для ботов. Правило общее для всех форм темы: привязка к
   .contact-form оставляла поле видимым на лендинге лид-магнита. */
.hp { position: absolute; left: -9999px; opacity: 0; }
.contact-form .consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  color: color-mix(in oklab, var(--bg) 60%, transparent);
  margin: 0 0 18px;
}
.contact-form .consent input {
  width: 16px; height: 16px; margin: 2px 0 0; flex: none;
  accent-color: var(--accent);
}
/* Та же перевёрнутая карточка, что и у лид-магнита: в тёмной теме
   .contact-card светлая, и светло-зелёный акцент даёт на ней 2.93.
   Для текста на светлом фоне есть --accent-ink. */
.contact-form .consent a { text-decoration: underline; color: var(--accent); }
[data-theme="dark"] .contact-card .consent a { color: var(--accent-ink); }
/* Та же строка согласия на светлом фоне лендинга: там нет тёмной карточки. */
.lm-form .consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; line-height: 1.45;
  text-transform: none; letter-spacing: normal;
  color: var(--ink-3);
  margin: 0;
}
.lm-form .consent input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
/* Ссылка на политику внутри согласия. Форма лид-магнита стоит на полосе
   .cta-bar, а она перевёрнута: в светлой теме полоса тёмная, в тёмной –
   светлая. Тёмно-зелёный --accent-ink на тёмной полосе давал 1.54 – ссылку
   было не видно. Берём тот акцент, который подходит фону полосы. */
.lm-form .consent a { text-decoration: underline; color: var(--accent-ink); }
.lm-repeat-form .lm-form .consent a { color: var(--accent); }
[data-theme="dark"] .lm-repeat-form .lm-form .consent a { color: var(--accent-ink); }

/* ============ Блоки редактора WordPress внутри статьи ============ */
.art-body .alignwide,
.art-body .alignfull { max-width: none; }
.art-body .aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.art-body .alignleft { float: left; margin: .4em 1.6em 1em 0; max-width: 50%; }
.art-body .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: 50%; }
.art-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.art-body .wp-block-image { margin: 32px 0; }
.art-body .wp-block-embed iframe { max-width: 100%; border-radius: var(--radius); }
.art-body .wp-block-separator { border: 0; border-top: 1px solid var(--hair); margin: 48px 0; }
.art-body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.art-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .88em;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 2px 6px;
}
/* Оформление строчного кода не должно доставать до блоков внутри pre –
   ни до дефолтных из редактора, ни до .art-code из макета. */
.art-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* ============ Утилиты, которых нет в макете ============ */

/* Заголовок и лид внутренних страниц, собранных не из макета */
.page-hero h1 {
  font-size: clamp(32px, 4.8vw, 60px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 18px 0 0;
  max-width: 26ch;
  text-wrap: balance;
}
.page-hero .lead {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 58ch;
}

.entry-cover {
  margin: 48px 0 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--bg-elev);
}
.entry-cover img { display: block; width: 100%; }
.art-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lm-mockup img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* В макете у .gchart-svg задана только высота, а ширина – нет. На широком
   экране это незаметно, но на телефоне SVG остаётся 900px по viewBox и
   уносит страницу за правый край. У соседнего .chart-svg width есть. */
.gchart-svg { width: 100%; display: block; }
/* В макете тут фотография; пока её нет – центрируем инициалы в том же круге. */
.lm-author-photo {
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: var(--ink-3);
}

/* Прогресс чтения. В макете полосы нет – она нужна только живой странице,
   поэтому живёт в слое адаптации, а не в design.css. */
.art-progress {
  position: sticky;
  top: 66px; /* высота .nav-inner: 18px паддинга сверху и снизу + строка */
  z-index: 40;
  height: 2px;
  background: transparent;
}
.art-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

@media (max-width: 980px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-cards { grid-template-columns: 1fr; } }

/* minmax(0, …) обязателен: 1fr это minmax(auto, 1fr), и широкий график
   внутри колонки распирает её по min-content, а вместе с ней и страницу. */
.case-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}
@media (max-width: 980px) { .case-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.case-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.aside-card {
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 22px;
}
.aside-card .aside-h {
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-4);
  font-weight: 500;
}
.aside-card .aside-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hair-2);
  font-size: 13px;
}
.aside-card .aside-row:last-child { border-bottom: 0; padding-bottom: 0; }
.aside-card .aside-row .k {
  color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.aside-card .aside-row .v { text-align: right; font-weight: 500; }

@media (max-width: 720px) { .post-nav { grid-template-columns: 1fr; } }

.cta-strip {
  margin-top: 80px;
  border: 1px solid var(--hair);
  background: var(--bg-elev);
  border-radius: 20px;
  padding: 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-strip h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
  max-width: 30ch;
  text-wrap: balance;
}
.cta-strip p { margin: 12px 0 0; color: var(--ink-3); font-size: 15px; max-width: 46ch; }

/* Текст WordPress без классов макета: даём ему типографику статьи */
.art-body > h2 {
  margin: 52px 0 18px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  scroll-margin-top: 100px;
}
.art-body > h3 { margin: 34px 0 12px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.art-body > h4 { margin: 28px 0 10px; font-size: 18px; font-weight: 600; }
.art-body > p { margin: 0 0 18px; font-size: 18px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.art-body > ul,
.art-body > ol { margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; list-style: none; }
.art-body > ul > li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.art-body > ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: var(--accent); }
.art-body > ol { counter-reset: szol; }
.art-body > ol > li {
  position: relative; padding-left: 34px; font-size: 17px; line-height: 1.6; color: var(--ink-2);
  counter-increment: szol;
}
.art-body > ol > li::before {
  content: counter(szol, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--accent-ink);
}
.art-body > blockquote {
  margin: 36px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
  font-size: 21px; line-height: 1.5; letter-spacing: -0.018em; color: var(--ink);
}
.art-body > pre {
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius);
  padding: 22px; overflow-x: auto;
  font-size: 13px; line-height: 1.6;
}
.art-body > pre code { color: inherit; }
/* Таблицы из редактора. Готовую .art-table из макета не трогаем: у неё
   свои отбивки, а display:block сломал бы ширину колонок. */
.art-body table:not(.art-table) { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.art-body table:not(.art-table) th,
.art-body table:not(.art-table) td { border: 1px solid var(--hair); padding: 12px 14px; text-align: left; }
.art-body table:not(.art-table) th { background: var(--bg-elev); font-weight: 600; }

/* ============ Комментарии ============ */
.sz-comments { max-width: 74ch; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hair); }
.sz-comment-list, .sz-comment-list .children { list-style: none; padding: 0; margin: 0; }
.sz-comment-list .children { padding-left: 28px; border-left: 1px solid var(--hair); margin-top: 16px; }
.sz-comment-list li { margin-top: 18px; }
.sz-comments .comment-body {
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.sz-comments .comment-author {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600;
}
.sz-comments .comment-author img { border-radius: 50%; }
.sz-comments .comment-author .says { display: none; }
.sz-comments .comment-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-4);
}
.sz-comments .comment-meta a { color: inherit; }
.sz-comments .comment-content { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.sz-comments .comment-content p { margin: 0 0 12px; }
.sz-comments .comment-content p:last-child { margin-bottom: 0; }
.sz-comments .reply { margin-top: 12px; }
.sz-comments .comment-reply-link,
.sz-comments .comment-edit-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-ink);
}
.sz-comments .comment-awaiting-moderation {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--warn);
}

.sz-comments .comment-respond { margin-top: 40px; }
.sz-comments .comment-reply-title {
  font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 18px;
}
.sz-comments .comment-reply-title small { font-size: 13px; font-weight: 400; margin-left: 10px; }
.sz-comments .comment-form p { margin: 0 0 16px; }
.sz-comments .comment-form label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.sz-comments .comment-form input[type=text],
.sz-comments .comment-form input[type=email],
.sz-comments .comment-form input[type=url],
.sz-comments .comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--hair);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease;
}
.sz-comments .comment-form textarea { min-height: 130px; resize: vertical; }
.sz-comments .comment-form :is(input, textarea):focus { border-color: var(--accent); }
.sz-comments .comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.sz-comments .comment-form .comment-form-cookies-consent label {
  font-family: 'Manrope', sans-serif;
  font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink-3);
  margin: 0;
}
.sz-comments .comment-form .form-submit input[type=submit] {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  border: 0; border-radius: 100px;
  background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: transform .15s ease;
}
.sz-comments .comment-form .form-submit input[type=submit]:hover { transform: translateY(-1px); }

/* ============ Прочее ============ */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
select, input, textarea { font-family: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .nav, .nav-mobile, .contact, .footer, .cta-bar, .filters, .theme-switch, .lang-switch { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Портрет на «Обо мне»: рамка 4:5, фото обрезаем по ней, а не растягиваем. */
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Сетка тарифов в макете жёстко на три карточки. У Acme Pulse их четыре, и
   четвёртая падала в отдельный ряд одна во всю ширину. Раскладку задаём по
   фактическому числу: один тариф – по центру, четыре – в один ряд. */
.plans[data-count="1"] { grid-template-columns: minmax(0, 460px); justify-content: center; }
.plans[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.plans[data-count="4"] { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plans[data-count="4"] .plan { padding: 24px 20px; }
@media (max-width: 1200px) {
  /* Четыре колонки на планшете сжимаются до нечитаемых – переходим на две. */
  .plans[data-count="4"] { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 980px) {
  .plans[data-count="1"],
  .plans[data-count="2"],
  .plans[data-count="4"] { grid-template-columns: 1fr; }
}

/* ============ «Бриф за 15 минут» ============ */
/* Шаблон page-templates/brief.php. Вёрстка собрана из макета: раскладка
   .art-layout, липкое оглавление .toc (шаги вместо разделов), вопрос в
   регистре .ch-n/.ch-d/.ch-badge, поле .lm-field, варианты ответа
   .filters/.filter. Здесь только то, чего в макете нет: показ одного шага,
   textarea по образцу input'а и состояния ошибки на палитровом --warn. */

/* Своя обёртка вместо .art-aside: подсветку .art-aside .toc a в app.js ведёт
   скролл по заголовкам, а здесь шаг переключается кликом – селектор не должен
   совпасть. Две строки поведения из макета повторены осознанно. */
.brief-aside { display: block; }
.brief-aside .toc-h { display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 1200px) { .brief-aside .toc { display: none; } }

/* Тот же 2px и var(--accent), что у .progress в макете, только в потоке. */
.brief-bar { height: 2px; margin-top: 14px; border-radius: 100px; background: var(--hair); overflow: hidden; }
.brief-bar span { display: block; height: 100%; background: var(--accent); transition: width .35s ease; }

.brief-step { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.brief-step.is-active { display: block; }
.brief-step-head { display: block; padding: 0; margin: 0 0 8px; }
.brief-step-head .art-h2 { display: block; margin: 12px 0 14px; }
.brief-step-head .art-p { display: block; margin: 0; }

/* Ряды вопросов – ритм .ch-list/.ch-row: волосяная линия и воздух, без карточек. */
.brief-field { padding: 26px 0; border-bottom: 1px solid var(--hair); }
.brief-field:first-of-type { border-top: 1px solid var(--hair); }
/* .lm-field label в макете – короткое имя поля мелким моно; вопрос брифа
   это фраза, поэтому регистр сбрасываем и берём .ch-n/.ch-d. */
.brief-field label { font-family: inherit; font-size: inherit; text-transform: none; letter-spacing: normal; color: var(--ink); cursor: pointer; }
.brief-field .ch-n { flex-wrap: wrap; }
.brief-field .ch-d { margin: 0; }
.brief-field .ch-main { margin-bottom: 16px; }

/* Макет описывает только input; textarea повторяет его, но без скругления
   в пилюлю – на трёх строках оно выглядит сломанным. */
.brief-field textarea {
  padding: 15px 18px; border: 1px solid var(--hair-2);
  border-radius: var(--radius); background: var(--bg-elev);
  font-family: inherit; font-size: 15px; line-height: 1.6;
  color: var(--ink); min-height: 96px; resize: vertical;
  outline: none; transition: border-color .2s ease;
}
.brief-field textarea:focus { border-color: var(--accent); }
.brief-field input::placeholder, .brief-field textarea::placeholder { color: var(--ink-4); }

/* .filter в макете – кнопка фильтра; здесь та же пилюля работает
   переключателем ответа: нативный радио скрыт, состояние берётся из :checked. */
.brief-options { margin: 0; }
.brief-options .filter { cursor: pointer; }
.brief-options .filter input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.brief-options .filter:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.brief-options .filter:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.brief .consent { display: flex; align-items: flex-start; gap: 10px; margin: 26px 2px 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.brief .consent input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.brief .consent a { text-decoration: underline; color: var(--accent-ink); }

/* Ошибка – на палитровом --warn, как .fs-alert в макете, но плашка светлая:
   .fs-alert-error рассчитан на инвертированный блок контактов. */
.brief-alert {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 24px; padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--warn) 55%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--warn) 16%, var(--bg));
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.brief-alert .fs-alert-i { flex: none; margin-top: 2px; color: color-mix(in oklab, var(--warn) 70%, var(--ink)); }
.brief-field.has-error input, .brief-field.has-error textarea { border-color: var(--warn); }
.brief-field.has-error .filter { border-color: color-mix(in oklab, var(--warn) 55%, var(--hair)); }

.brief-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--hair); }
/* display: inline-flex/flex перебивает браузерное [hidden] – без этого правила
   кнопки «Назад» и «Собрать бриф» видны на первом шаге, а плашка ошибки
   висит пустой рамкой. */
.brief-nav [hidden], .brief[hidden], .brief-done[hidden], .brief-alert[hidden] { display: none !important; }
.brief-reset { margin-left: auto; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 11px; color: var(--ink-4); text-decoration: underline; }
.brief-reset:hover { color: var(--ink-2); }

.brief-done { padding: 40px; background: var(--bg-elev); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.brief-done .lm-check { margin: 0 auto 22px; }

@media (max-width: 720px) {
  .brief-done { padding: 26px 20px; }
  .brief-nav .btn { flex: 1 1 auto; justify-content: center; }
  .brief-reset { margin-left: 0; width: 100%; text-align: center; padding-top: 6px; }
}

/* ============ «Кодекс маркетолога» ============ */
/* Шаблон page-templates/codex.php: нумерация сквозная по всем разделам,
   номер вынесен в левую колонку – принципы читаются как свод, а не как статья. */
.codex-list { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.codex-item {
  display: grid; grid-template-columns: 54px 1fr; gap: 8px;
  padding: 22px 0; border-top: 1px solid var(--hair);
}
.codex-item:first-child { border-top: 0; padding-top: 4px; }
.codex-num { font-size: 15px; color: var(--accent-ink); opacity: .85; padding-top: 2px; }
.codex-body { min-width: 0; }
.codex-t { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.codex-p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 72ch; }

.codex-navlink { color: var(--ink); text-decoration: none; }
.codex-navlink:hover { color: var(--accent-ink); text-decoration: underline; }

.codex-closing {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 30px 34px; border-radius: var(--radius);
  background: var(--accent-soft);
}
.codex-closing-t { margin: 0; font-size: 17px; line-height: 1.6; color: var(--accent-ink); max-width: 68ch; }

@media (max-width: 720px) {
  .codex-item { grid-template-columns: 38px 1fr; padding: 18px 0; }
  .codex-num { font-size: 13px; }
  .codex-t { font-size: 16px; }
  .codex-closing { padding: 22px; }
}

/* Обложка материала – вертикальная картинка 4:5 в рамке 3:4: заполняем рамку
   целиком, иначе WordPress отдаёт её в горизонтальном кропе и режет заголовок. */
.lm-mockup img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ============ Графики в кейсах (inc/charts.php) ============ */
/* Отступы, рамка и типографика взяты с .chart из макета: график должен
   читаться как часть той же системы, а не как вставка из библиотеки. */
.sz-chart {
  margin: 40px 0;
  padding: 22px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.sz-chart-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin-bottom: 14px;
}
.sz-chart-unit { color: var(--ink-4); text-transform: none; letter-spacing: .04em; }

.sz-chart-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
}
.sz-chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sz-chart-legend span::before { content: ''; width: 16px; height: 2px; }
.sz-chart-k1::before { background: var(--accent); }
.sz-chart-k2::before { background: repeating-linear-gradient(90deg, var(--ink-4) 0 5px, transparent 5px 9px); }
/* В столбцах акцентом выделен второй ряд – «стало». Легенда повторяет
   заливку столбцов, иначе она называет цвета наоборот. */
.sz-chart-legend.is-bars span::before { width: 12px; height: 12px; border-radius: 2px; }
.is-bars .sz-chart-k1::before { background: var(--ink-4); }
.is-bars .sz-chart-k2::before { background: var(--accent); }

/* На телефоне сжимать три десятка точек в 360px бессмысленно – линия
   превращается в шум. Даём горизонтальную прокрутку самому графику,
   страница при этом по горизонтали не едет. */
.sz-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.sz-chart-svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .sz-chart-svg { min-width: 640px; } }

.sz-chart-ax {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  fill: var(--ink-3);
}
.sz-chart-val {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  fill: var(--ink-2);
}
.sz-chart-note {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  fill: var(--accent-ink);
}

.sz-chart-source {
  margin-top: 14px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-4);
}

.sz-chart-data { margin-top: 14px; }
.sz-chart-data summary {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); cursor: pointer;
}
.sz-chart-data summary:hover { color: var(--ink); }
.sz-chart-data table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.sz-chart-data th, .sz-chart-data td {
  padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--hair);
}
.sz-chart-data th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-3); }
.sz-chart-data thead th {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); font-weight: 500;
}

/* Печать: рамка съедает поля, а прокрутка на бумаге не работает. */
@media print {
  .sz-chart { border: 0; padding: 0; background: none; break-inside: avoid; }
  .sz-chart-scroll { overflow: visible; }
  .sz-chart-svg { min-width: 0; }
  .sz-chart-data { display: none; }
}

/* Оглавление в боковой колонке кейса. Липкость даёт сама .case-aside,
   вложенная второй раз только мешает. */
.case-toc { margin-bottom: 4px; }
.case-toc .toc { position: static; }

/* Карточка услуги в боковой колонке кейса: путь от «понравился кейс»
   к «что именно заказать». Оформлена как ссылка целиком – в узкой
   колонке отдельная кнопка съедает место и хуже нажимается. */
.case-service-link { display: block; }
.case-service-name {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); transition: color .2s ease;
}
.case-service-link:hover .case-service-name { color: var(--accent-ink); }
.case-service-desc {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.45;
  color: var(--ink-3);
}
.case-service-price {
  display: inline-block; margin-top: 12px; padding: 5px 10px;
  border: 1px solid var(--hair-2); border-radius: 100px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-ink); background: var(--accent-soft);
}

/* Липкая колонка кейса выше экрана: оглавление, результат, услуга, факты
   и кнопка вместе дают больше 1000px, и нижние блоки — в том числе ссылка
   на услугу — становились недостижимы при любой прокрутке. Ограничиваем
   высоту видимой областью и даём колонке собственную прокрутку. */
@media (min-width: 981px) {
  .case-aside {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hair-2) transparent;
    padding-right: 4px;
  }
  .case-aside::-webkit-scrollbar { width: 6px; }
  .case-aside::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 100px; }
  .case-aside::-webkit-scrollbar-track { background: transparent; }
  /* Колонка – flex-контейнер: с ограниченной высотой её дети начинают
     сжиматься, и карточка результата схлопывается в полоску вместе
     с крупной цифрой. Запрещаем сжатие, пусть лучше прокручивается. */
  .case-aside > * { flex-shrink: 0; }
}

/* Шапка карточки результата рассчитана на короткую подпись вроде «+ MRR 3.1×».
   Развёрнутая («договорённости о тестовых партиях», 33 знака) переносится
   на вторую строку и наезжает на слово «Результат». Разрешаем перенос
   с отступом и прижимаем строки по верху. */
.case-result .result-head {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 14px;
  line-height: 1.4;
}
.case-result .result-head .delta { align-items: flex-start; text-align: right; }
.case-result .result-head .delta svg { flex: none; margin-top: 3px; }

/* Подпись перехода между этапами воронки. Считается от предыдущего этапа –
   именно она показывает, где теряются люди, поэтому набрана акцентом. */
.sz-chart-step {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  fill: var(--accent-ink);
}

/* Оглавление правовой страницы. Компонент тот же, что в статьях, но там
   он вспомогательный и скрыт на широких экранах — здесь боковой колонки
   нет вовсе, поэтому показываем всегда. */
.lg-toc.toc-mobile { display: block; margin-bottom: 36px; }

/* Неактивная стрелка пагинации: раньше была ссылкой в решётку с инлайновым
   отключением, стала span — и оформление переехало сюда. */
.pager-arrow.is-off { opacity: .35; cursor: default; }


/* Шаг подхода в макете размечен h4, хотя стоит сразу после h2 секции: для
   читалки это разрыв структуры. В разметке уровень поправлен на h3, здесь
   возвращаем тот же вид – правило макета привязано к h4. */
.process-step h3 {
  margin: 14px 0 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
}

/* Названия клиентов под шапкой: ink-3 под opacity .85 светлеет до 4.43 –
   на волосок ниже нормы для 17px. Приглушение оставляем, но слабее. */
.logo-item { opacity: 0.9; }

/* ============ Инвертированная полоса под лид-магнитом ============ */
/*
   Форма в полосе .cta-bar стоит на перевёрнутом фоне: в светлой теме он
   тёмный, в тёмной – светлый. Подписи там задаются долей от --bg, и доли
   из макета (55% у подписи поля, 50% у примечания) в тёмной теме дают
   4.12 и 3.52 – ниже нормы AA. Поднимаем доли: в тёмной теме выходит
   5.75 и 4.85, в светлой контраст и так был с запасом, разница на глаз
   почти незаметна, а порядок «подпись темнее примечания» сохраняется.
*/
.lm-repeat-form .lm-field label { color: color-mix(in oklab, var(--bg) 65%, transparent); }
.lm-repeat-form .lm-note { color: color-mix(in oklab, var(--bg) 60%, transparent); }

/* Согласие на обработку данных внутри той же полосы красилось в --ink-3 –
   токен обычного, не перевёрнутого фона: в тёмной теме получалось 2.77.
   Текст юридический, поэтому берём долю с запасом. */
.lm-repeat-form .lm-form .consent { color: color-mix(in oklab, var(--bg) 75%, transparent); }

/* ============ Тёмная тема: карточка результата и акцент на светлых блоках ============ */
/*
   Макет сам себе противоречит на .case-result: строкой 635 он задаёт
   в тёмной теме почти чёрный фон #06080a, а строкой 2167 относит блок
   к «инвертированным», то есть светлым. В итоге фон остался тёмным,
   а текст (color: var(--bg)) и акцент внутри стали тёмными – контраст
   1.02, цифра результата на карточке кейса просто не видна.

   Блок в тёмной теме тёмный, поэтому возвращаем ему светлый текст
   и обычный акцент этой темы – значения те же, что в :root макета.
*/
[data-theme="dark"] .case-result {
  color: var(--ink);
  --accent: oklch(0.82 0.18 152);
  --accent-ink: oklch(0.92 0.08 152);
  --accent-soft: oklch(0.24 0.06 152);
}
[data-theme="dark"] .case-result .result-head,
[data-theme="dark"] .case-result .big-l { color: color-mix(in oklab, var(--ink) 68%, transparent); }

/*
   А эти блоки в тёмной теме наоборот становятся светлыми, и мелкие
   подписи в них покрашены в --accent – зелёный средней светлоты, на
   светлом фоне это 2.93. Для текста на светлом есть отдельный токен
   --accent-ink, он для этого и заведён.
*/
[data-theme="dark"] .thought-card.feat .thought-foot .read,
[data-theme="dark"] .rv-card.dark .rv-meta span:first-child,
[data-theme="dark"] .tp-feat-meta span:first-child { color: var(--accent-ink); }

/* ============ Тёмная тема: блок кода остаётся тёмным ============ */
/*
   Та же ошибка, что была на .case-result: строкой 1558 макет оставляет
   блоку кода почти чёрный фон, а текст внутри красится долей от --bg,
   который в тёмной теме сам тёмный. Итог – SQL-запрос в статье про
   воронки в тёмной теме не читался вовсе: тёмное по чёрному.
   Меняем источник цвета на --ink, доли из макета сохраняем.
*/
[data-theme="dark"] .art-code code { color: color-mix(in oklab, var(--ink) 88%, transparent); }
[data-theme="dark"] .art-code-h {
  color: color-mix(in oklab, var(--ink) 62%, transparent);
  border-bottom-color: color-mix(in oklab, var(--ink) 14%, transparent);
}

/* ============ Тёмная тема: подписи на светлых карточках ============ */
/*
   Карточки .rv-card.dark, .tp-feat и .contact-card в тёмной теме
   становятся светлыми, а мелкие подписи в них заданы долей от --bg –
   0.5–0.55 от почти чёрного по светлому даёт 3.5–4.1 вместо 4.5.
   Поднимаем доли только в тёмной теме: в светлой контраст был с запасом,
   а порядок «текст темнее подписи» сохраняется.
*/
[data-theme="dark"] .rv-card.dark .rv-meta,
[data-theme="dark"] .rv-card.dark .rv-role,
[data-theme="dark"] .tp-feat-meta,
[data-theme="dark"] .tp-feat-f,
[data-theme="dark"] .social-row .handle,
[data-theme="dark"] .contact-form label,
[data-theme="dark"] .result-rows dt { color: color-mix(in oklab, var(--bg) 64%, transparent); }

/* Подсказка в поле формы на светлой полосе: 40% – это 2.6. */
[data-theme="dark"] .lm-repeat-form .lm-field input::placeholder { color: color-mix(in oklab, var(--bg) 60%, transparent); }

/* Номер шага в предупреждающем списке на «Как устроена работа»: макет мешает
   янтарный --warn с самым светлым --ink-4, и в светлой теме выходит #a98f65 –
   2.85. Мешаем с --ink-2: тон остаётся тёплым, контраст 4.70. В тёмной теме
   тот же замес даёт 6.46, поэтому там оставляем как в макете. */
.lb.warn .lb-n { color: color-mix(in oklab, var(--warn) 50%, var(--ink-2)); }
[data-theme="dark"] .lb.warn .lb-n { color: color-mix(in oklab, var(--warn) 50%, var(--ink-4)); }

/* Мелкая строка «не входит» в рекомендованном тарифе. Карточка подкрашена
   акцентом (5% поверх фона), и на этом чуть более светлом фоне --ink-4 даёт
   4.40 вместо 4.5 — на обычных карточках он проходит, на подсвеченной нет.
   Вылезло на странице ботов: там у рекомендованного тарифа есть эта строка. */
.plan.recommended .plan-excl { color: var(--ink-3); }

/*
   Направлений кейсов стало больше сорока – по одному на каждую услугу.
   Полным списком они занимают шесть строк над самими кейсами, поэтому
   в разметке хвост убран в <details>. Здесь только вид: раскрытие
   работает и без скриптов, поэтому список остаётся доступным, если
   JS не загрузился.
*/
.filters-more {
	/* Родитель – flex-строка. Полная ширина и последний порядок кладут
	   раскрывающийся блок на отдельную строку: иначе раскрытый список
	   пытался бы встать в ту же строку рядом с кнопкой. */
	width: 100%;
	order: 99;
	margin-top: 4px;
}
.filters-more > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.filters-more > summary::-webkit-details-marker {
	display: none;
}
.filters-more > summary::after {
	content: "＋";
	font-size: 11px;
	opacity: 0.7;
}
.filters-more[open] > summary::after {
	content: "−";
}
.filters-more-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--hair);
	width: 100%;
}