/* ============================================================
   Я зову — база: сброс, типографика, шапка, подвал, общие блоки
   ============================================================ */

*{box-sizing:border-box}

/* ============================================================
   Выделение текста и системные акценты
   ------------------------------------------------------------
   Оформлений у нас не одно, а три слоя: хром сайта (Бумага или
   Праздник, светлая или тёмная), палитра самого приглашения
   и палитра страницы гостя. Выделение должно брать цвет того
   слоя, в котором стоит курсор, — иначе на тёмной космической
   карточке всплывёт розовая подсветка от хрома.

   color-mix вместо отдельных токенов: коэффициент один, а цвет
   считается от текущего --brand и потому верен во всех четырёх
   сочетаниях темы и оформления сразу.
   ============================================================ */
::selection{background:color-mix(in srgb, var(--brand) 26%, transparent);color:var(--ink)}
/* приглашение — свой слой: акцент шаблона, а не бренда сайта */
.yz-inv::selection,.yz-inv ::selection{background:color-mix(in srgb, var(--c-acc) 32%, transparent);color:var(--c-ink)}
/* страница гостя целиком надевает палитру шаблона */
.g ::selection{background:color-mix(in srgb, var(--g-acc) 32%, transparent);color:var(--g-ink)}
/* Исключения для полосы призыва здесь больше нет: оно было
   нужно, пока полоса была залита брендом и подсветка на ней
   обязана была быть светлой. Полоса светлая — работает общее
   правило, и второго определения не требуется. */

/* Чекбоксы, радио, ползунки и — в Chrome — подсветка в календаре
   нативного input[type=date] берут цвет отсюда. */
:root{accent-color:var(--brand)}
/* Атрибут hidden должен побеждать display:flex/grid у компонентов,
   иначе скрытые панели остаются видимыми. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-underline-offset:.18em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.shell{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* СПРЯТАТЬ ОТ ГЛАЗ, ОСТАВИТЬ ЧИТАЛКЕ — ОДНО ОПРЕДЕЛЕНИЕ НА ВСЁ

   Этих шести строк на сайте было четыре копии под четырьмя
   именами: .visually-hidden здесь, .vh в pages.css, .seg-t
   у полосы прототипа и .bm-hidden в shop.css. Все четыре
   делали одно и то же, и три из четырёх уже успели
   разойтись — где clip, где clip-path, где есть border:0,
   где нет.

   Имена оставляем: они стоят в разметке темы и плагинов,
   и переименовывать их значит трогать десяток файлов ради
   косметики. Общее у них теперь определение. Ушло только
   .seg-t: полосы прототипа, ради которой оно было заведено,
   на сайте больше нет.

   display:none тут нельзя: спрятанное так выпадает и из
   чтения, и из последовательности фокуса — а прячем мы как
   раз то, что читалка обязана прочесть. */
.visually-hidden,.vh,.bm-hidden,.yz-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- шапка ---------- */
/* ============================================================
   ПОЛОСА ОБЪЯВЛЕНИЯ
   ------------------------------------------------------------
   Самая первая строка страницы. Владелец вписывает в неё то, что
   срочно и временно; пусто — полосы нет вовсе (Yzt_Setup::polosa).

   НЕ ЛИПКАЯ, В ОТЛИЧИЕ ОТ ШАПКИ

   Шапка прилипает: в ней корзина и меню, они нужны всё время.
   Объявление нужно один раз — его прочли и поехали дальше.
   Липкая полоса поверх липкой шапки съела бы у телефона две
   строки экрана навсегда.

   ЗАКРЫТУЮ ГАСИТ АТРИБУТ НА <html>, А НЕ КЛАСС НА САМОЙ ПОЛОСЕ

   Атрибут ставит инлайн в <head> — до того, как полоса
   отрисуется. Класс пришлось бы вешать скриптом внизу страницы,
   и человек, закрывший полосу вчера, сегодня увидел бы, как она
   мигает и исчезает.
   ============================================================ */
/* ИМЯ КЛАССА — .anons, А НЕ .promo
   Первым именем было .promo, и оно уже занято: так называется
   блок ввода промокода в корзине (shop.css). Одно имя на две
   разные вещи — и полоса покрасила промокод в брендовый
   красный, оставив на нём серые буквы: контраст 1,04 при норме
   4,5 во всех четырёх палитрах. Поймала это проверка tokeny,
   которая перебирает цвета всех элементов.

   Ровно тот же дефект, что был у .cart-bump, описанного дважды
   в двух файлах. Разница только в том, что здесь второе
   описание завёл я сам, в тот же день. */
/* ПОЧЕМУ ПОЛОСА НЕ ЗАЛИТА АКЦЕНТОМ

   Была залита: фирменный цвет во всю ширину, первой строкой
   страницы. Получалось, что самое яркое пятно сайта — не кнопка
   «В корзину» и не цена, а объявление про сроки доставки. Внимание
   ограничено: то, что забрала полоса, забрано у покупки.

   Тон берём у полосы доверия («Готово за 3–5 минут»): тот же
   тёплый фон, тот же волосок снизу, тот же акцент — но только
   на значке и ссылке, то есть ровно там, куда можно нажать.
   Полоса при этом остаётся заметной — она отделена от белого
   фоном и линией, — но перестаёт спорить с товаром. */
.anons{
  background:var(--paper-2);color:var(--ink);
  border-bottom:1px solid var(--rule);
  font-size:.9rem;line-height:1.35;
}
:root[data-promo-off] .anons{display:none}
.anons-in{
  display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;
  padding-block:.55rem;padding-right:2.6rem;position:relative;min-height:44px;
}
.anons-t{flex:1 1 auto;min-width:0}
.anons-go{
  /* Акцент живёт тут — на том единственном, по чему кликают. */
  color:var(--brand);text-decoration:underline;text-underline-offset:.2em;
  font-weight:600;white-space:nowrap;
  /* 44 точки под палец: полоса узкая, а промах уводит по ссылке. */
  display:inline-flex;align-items:center;min-height:44px;
}
.anons-go:hover{text-decoration-thickness:2px}
.anons-x{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:inherit;cursor:pointer;opacity:.8;
}
.anons-x:hover{opacity:1}
.anons-x svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.anons-x:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:2px}

.top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;gap:1.5rem;min-height:60px;position:relative}
.top-menu{display:flex;align-items:center;gap:1.5rem;flex:1;min-width:0}
.burger{display:none}
/* ЦЕЛИ ПОД ПАЛЕЦ: 44 ТОЧКИ

   Обход раньше ругался с порога в 30 точек, и всё, что попадало
   в 31–43, проходило молча. Порог поднят до 44 — столько
   накрывает подушечка пальца, и столько просит ТЗ.

   Логотип: 97×35. Ширины хватало с запасом, высоты — нет.
   Растим невидимую область, а не сам знак: padding-block
   вместо размера. */
.logo{display:flex;align-items:center;gap:.45rem;text-decoration:none;flex:none;
  min-height:44px}
.logo .mark{
  font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1;
  color:var(--paper);background:var(--brand);
  width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:50%;
}
.logo .word{font-family:var(--serif);font-weight:600;font-size:1.42rem}
/* сердечко у логотипа: приподнято, как надстрочный знак */
.logo::after{
  content:"♥";color:var(--brand);font-size:.72rem;line-height:1;
  align-self:flex-start;margin:.2rem 0 0 -.28rem;
}
/* min-width:0 и перенос — защита от длинного пункта меню.

   Пункты меню пишет редактор, и рано или поздно там окажется
   «Приглашения по возрасту» вместо «По возрасту». Без этих двух
   свойств флекс-элемент не может сжаться меньше содержимого,
   ряд вылезает за пределы окна, и горизонтально едет вся
   страница — включая карточки, к меню отношения не имеющие.

   С ними шапка в худшем случае становится двухрядной. Это видно
   и это чинится текстом пункта; горизонтальная прокрутка всего
   сайта не видна и не чинится ничем. */
nav.main{display:flex;flex-wrap:wrap;gap:.75rem 1.35rem;font-size:.94rem;flex:1;min-width:0}
nav.main a{text-decoration:none;color:var(--ink-2);white-space:nowrap}
nav.main a:hover{color:var(--brand)}
.top-act{display:flex;gap:.9rem;align-items:center;font-size:.9rem;color:var(--ink-2)}
/* Ссылки в шапке — цель под палец на любой ширине, а не только
   до 720 точек: упрощённая шапка оформления показывает их и на
   планшете, где палец такой же. «Поддержка» выходила 43.6 —
   меньше сорока четырёх на четыре десятых, и проверка была
   права, что придралась. */
.top-act a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.top-act a:hover{color:var(--brand)}

/* ============================================================
   Корзина в шапке
   ------------------------------------------------------------
   Пустая — обычная строка в ряду ссылок. Непустая — залитая
   плашка со значком, счётчиком и суммой: это единственный
   следующий шаг, и он должен отличаться от соседей не оттенком,
   а весом. Строку взглядом пропускают, плашку нет.
   ============================================================ */
.cart-link{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;text-decoration:none;
  padding:.3rem .1rem;border-radius:100px;
  transition:background .2s ease,color .2s ease,padding .2s ease,box-shadow .2s ease;
}
.cart-ic{width:1.05rem;height:1.05rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cart-link.is-full{
  background:var(--brand);color:var(--paper);font-weight:600;
  padding:.36rem .8rem .36rem .62rem;box-shadow:var(--shadow-m);
}
.cart-link.is-full:hover{background:var(--brand-2);color:var(--paper);box-shadow:var(--shadow-l)}

/* Мягкое кольцо вокруг непустой корзины. Не мигает и не двигается:
   в правом верхнем углу теперь только одно яркое пятно, и ему
   достаточно быть единственным. */
.cart-link.is-full{box-shadow:var(--shadow-m), 0 0 0 4px color-mix(in srgb, var(--brand) 13%, transparent)}
.cart-link.is-full:hover{box-shadow:var(--shadow-l), 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent)}

/* На страницах покупки заливки нет вовсе: класс is-full туда не
   ставится (cart-state.js). Счётчик при этом остаётся, и вот он
   без заливки нуждается в своём цвете. */
body.p-cart .cart-n,
body.p-checkout .cart-n{background:var(--brand-soft);color:var(--brand)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cart-link.is-full,
  :root:not([data-theme="light"]) .cart-link.is-full:hover{color:#141112}
}
:root[data-theme="dark"] .cart-link.is-full,
:root[data-theme="dark"] .cart-link.is-full:hover{color:#141112}
/* счётчик — белый кружок на заливке: цифра важнее суммы,
   она отвечает на вопрос «я точно положил?» */
.cart-n{
  min-width:1.25rem;height:1.25rem;padding:0 .3rem;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--brand);border-radius:100px;
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.cart-link.is-full .cart-t{font-variant-numeric:tabular-nums}

/* Всплеск после добавления: отскок и три кольца, потом тихо.
   Постоянно мигающий элемент через десять секунд перестают
   замечать, а через тридцать он начинает раздражать. */
/* Плашка, которая ждёт прилёта карточки.

   Она уже в разметке и уже занимает своё место — иначе вставка
   двигала бы шапку ровно в момент прилёта. Но её не видно, и
   нажатия она не ловит: для человека её пока нет.

   visibility, а не display:none: скрытый display вынимает
   элемент из потока, и вся затея с «вёрстка встала заранее»
   рассыпается. */
.top-cart.cart-wait{
  visibility:hidden;pointer-events:none;
  transform:scale(.25);opacity:0;
}
.cart-bump{animation:cart-pop .55s ease, cart-ring 1s ease 3}
@keyframes cart-pop{
  0%{transform:none} 28%{transform:scale(1.18)} 62%{transform:scale(.97)} 100%{transform:none}
}
/* Разворот плашки из точки прилёта.

   Отдельная раскадровка, а не тот же cart-pop: у него старт
   в натуральную величину, потому что он отмечает изменение уже
   видимой плашки. Здесь же плашки только что не было, и начинать
   надо из масштаба, в котором закончила карточка, — иначе
   получается два разных движения подряд вместо одного.

   Чуть разное время у прозрачности и масштаба не случайно: так
   плашка успевает проявиться раньше, чем закончит расти, и
   движение читается как «прилетело», а не как «моргнуло». */
.top-cart.cart-bump{animation:cart-land .42s cubic-bezier(.2,1.25,.4,1), cart-ring 1s ease 3}
@keyframes cart-land{
  0%  {transform:scale(.25);opacity:0}
  45% {opacity:1}
  70% {transform:scale(1.1)}
  100%{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  /* Кому движение мешает, тот всё равно должен увидеть, что
     в корзине прибавилось: гасим движение, оставляем появление. */
  .top-cart.cart-bump{animation:none}
  .top-cart.cart-wait{transform:none}
}
@keyframes cart-ring{
  0%  {box-shadow:var(--shadow-m), 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent)}
  70% {box-shadow:var(--shadow-m), 0 0 0 .7rem color-mix(in srgb, var(--brand) 0%, transparent)}
  100%{box-shadow:var(--shadow-m), 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent)}
}

/* Дубль в самой шапке: на телефоне ряд .top-act уезжает в гармошку,
   и непустой корзины не видно вовсе. Появляется только когда
   в ней что-то есть — пустая не стоит места рядом с логотипом. */
.top-cart{display:none}
/* тот же порог, на котором .top-act уезжает в гармошку */
@media (max-width:880px){
  .top-cart{display:inline-flex;order:2;margin-left:auto;margin-right:.55rem;font-size:.85rem}
  /* когда плашка есть, второй auto-отступ у бургера разорвал бы строку */
  .top-in > .top-cart + .burger{margin-left:0}
}
/* ---------- мобильное меню-гармошка ----------
   Пункты раскрываются полосой под шапкой и видны целиком.
   Кнопка стоит в DOM до меню, поэтому табом идёшь логотип →
   кнопка → пункты, а не мимо свёрнутого списка. */
@media (max-width:880px){
  .burger{
    display:flex;order:3;margin-left:auto;flex:none;
    width:2.4rem;height:2.4rem;padding:0;cursor:pointer;
    flex-direction:column;justify-content:center;align-items:center;gap:.28rem;
    background:var(--card);border:1px solid var(--rule-2);border-radius:6px;
  }
  .burger span{display:block;width:1.1rem;height:2px;border-radius:2px;background:var(--ink-2);transition:transform .15s, opacity .15s}
  .top[data-open] .burger{border-color:var(--brand)}
  .top[data-open] .burger span{background:var(--brand)}
  .top[data-open] .burger span:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
  .top[data-open] .burger span:nth-child(2){opacity:0}
  .top[data-open] .burger span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}

  .top-menu{
    display:none;position:absolute;top:60px;left:0;right:0;z-index:41;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:var(--shadow-m);padding:.2rem 1.25rem .9rem;
  }
  .top[data-open] .top-menu{display:flex}
  nav.main{display:flex;flex-direction:column;gap:0}
  nav.main a,.top-act a{display:block;padding:.72rem 0;border-bottom:1px solid var(--rule);font-size:1rem}
  .top-act{flex-direction:column;align-items:stretch;gap:0;font-size:1rem}
  .top-act a:last-child{border-bottom:0}
}

/* ============================================================
   Выбор времени
   ------------------------------------------------------------
   Свой список вместо нативного: до выпадашки input[type=time]
   CSS не дотягивается, и в Chrome она подсвечивает выбранный час
   системным синим. Здесь всё на токенах, поэтому в «Празднике»
   подсветка малиновая, в «Бумаге» еловая, в тёмной — своя.
   ============================================================ */
.tp{position:relative}
.tp-btn{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;
  font-family:var(--sans);font-size:.95rem;padding:.5rem .6rem;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);
  /* Кнопка выборщика — по сути поле ввода, и рядом стоят
     настоящие поля высотой в 44 точки. 42 против 44 у соседа
     видно глазом, а мимо промахиваются пальцем.
     Правило одно на три выборщика: дату, время и свой список —
     они выглядят одинаково и обязаны вести себя так же. */
  min-height:44px;
}
.tp-btn svg{width:1rem;height:1rem;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tp-btn:hover{border-color:var(--brand)}
.tp-btn[aria-expanded="true"]{border-color:var(--brand)}
.tp-list{
  position:absolute;z-index:30;top:calc(100% + .25rem);left:0;right:0;max-height:13rem;overflow-y:auto;
  display:flex;flex-direction:column;padding:.25rem;
  background:var(--card);border:1px solid var(--rule-2);border-radius:6px;box-shadow:var(--shadow-l);
}
.tp-list button{
  text-align:left;border:0;background:transparent;border-radius:4px;cursor:pointer;
  padding:.36rem .6rem;font-size:.92rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.tp-list button:hover{background:var(--brand-soft);color:var(--brand)}
.tp-list button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tp-list button[aria-selected="true"]{background:var(--brand);color:var(--paper);font-weight:600}

/* ============================================================
   Выбор даты
   ------------------------------------------------------------
   Календарь нативного input[type=date] рисует сам браузер: он
   лежит вне страницы, и до него не дотягивается ни CSS, ни
   accent-color настолько, чтобы получилось «в стиль» — выбранный
   день и наведение оставались системно-синими, а в тёмной теме
   календарь оставался светлым. Здесь это обычная сетка кнопок,
   поэтому она подчиняется тем же токенам, что и весь сайт.
   ============================================================ */
.dp{position:relative}
.dp-btn{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;
  font-family:var(--sans);font-size:.95rem;padding:.5rem .6rem;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);
  /* Кнопка выборщика — по сути поле ввода, и рядом стоят
     настоящие поля высотой в 44 точки. 42 против 44 у соседа
     видно глазом, а мимо промахиваются пальцем.
     Правило одно на три выборщика: дату, время и свой список —
     они выглядят одинаково и обязаны вести себя так же. */
  min-height:44px;
}
/* ДАТА ИЗ ШАБЛОНА — ОБРАЗЕЦ, А НЕ ВЫБОР

   На странице товара в поле стоит дата дизайнера — «2 июня», —
   и набрана она была тем же цветом, что и выбранная. То есть
   поле выглядело заполненным, а покупка без настоящего выбора
   не проходила: человек нажимал «В корзину» и получал красную
   обводку вокруг поля, в котором всё написано.

   Требование выбрать дату верное: приглашение с числом, которое
   никто не назначал, обнаруживается в типографии. Но сказать об
   этом надо ДО нажатия, а не после. Приглушённый цвет — тот же
   приём, которым все поля на свете показывают подсказку вместо
   значения, и человеку его объяснять не нужно.

   Снимается вместе с data-keep-label — в тот момент, когда
   человек ткнул в число. */
.dp[data-keep-label] .dp-val{color:var(--ink-3)}

.dp-btn svg{width:1rem;height:1rem;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dp-btn:hover,.dp-btn[aria-expanded="true"]{border-color:var(--brand)}
.dp-btn:hover svg,.dp-btn[aria-expanded="true"] svg{stroke:var(--brand)}
.dp-pop{
  position:absolute;z-index:31;top:calc(100% + .25rem);left:0;width:17.5rem;max-width:min(17.5rem,92vw);
  background:var(--card);border:1px solid var(--rule-2);border-radius:8px;
  box-shadow:var(--shadow-l);padding:.6rem;
}
/* ============================================================
   Выпадающий список
   ------------------------------------------------------------
   Тот же случай, что с часами и календарём: список нативного
   <select> рисует операционная система, CSS до него не дотягивается.
   Здесь это обычные кнопки на токенах сайта — и в «Празднике»,
   и в «Бумаге», и в тёмной теме.
   ============================================================ */
.sel{position:relative}
/* настоящий select остаётся в разметке источником правды */
.sel-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sel-btn{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;
  font-family:var(--sans);font-size:.95rem;padding:.5rem .6rem;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);
  /* Кнопка выборщика — по сути поле ввода, и рядом стоят
     настоящие поля высотой в 44 точки. 42 против 44 у соседа
     видно глазом, а мимо промахиваются пальцем.
     Правило одно на три выборщика: дату, время и свой список —
     они выглядят одинаково и обязаны вести себя так же. */
  min-height:44px;
}
.sel-btn > svg{width:1rem;height:1rem;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.sel-btn:hover,.sel-btn[aria-expanded="true"]{border-color:var(--brand)}
.sel-btn:hover > svg,.sel-btn[aria-expanded="true"] > svg{stroke:var(--brand)}
.sel-btn[aria-expanded="true"] > svg{transform:rotate(180deg)}
.sel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* свой повод и на кнопке виден как свой, а не как пункт из списка */
.sel-btn.is-own .sel-val{color:var(--brand)}
.sel-list{
  position:absolute;z-index:30;top:calc(100% + .25rem);left:0;right:0;max-height:15rem;overflow-y:auto;
  display:flex;flex-direction:column;padding:.25rem;
  background:var(--card);border:1px solid var(--rule-2);border-radius:6px;box-shadow:var(--shadow-l);
}
.sel-list [role="option"]{
  display:flex;align-items:center;gap:.45rem;text-align:left;
  border:0;background:transparent;border-radius:4px;cursor:pointer;
  padding:.42rem .55rem;font-family:var(--sans);font-size:.92rem;color:var(--ink-2);
}
.sel-list [role="option"] span{flex:1;min-width:0}
.sel-ok{width:.9rem;height:.9rem;flex:none;opacity:0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sel-list [role="option"][aria-selected="true"]{background:var(--brand-soft);color:var(--brand);font-weight:500}
.sel-list [role="option"][aria-selected="true"] .sel-ok{opacity:1}
.sel-list [role="option"]:hover{background:var(--paper-2);color:var(--ink)}
.sel-list [role="option"][aria-selected="true"]:hover{background:var(--brand-soft);color:var(--brand)}
.sel-list [role="option"]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* «Свой вариант…» — не пункт в ряду, а выход из списка: поэтому
   он наверху, набран цветом бренда и отбит чертой от готовых */
.sel-own{color:var(--brand)!important;font-weight:500}
.sel-ic{width:.9rem;height:.9rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sel-own:hover{background:var(--brand-soft)!important}
.sel-sep{height:1px;background:var(--rule);margin:.25rem .3rem}

/* если вниз не влезает — раскрываем вверх (класс ставит скрипт) */
.dp.dp-up .dp-pop{top:auto;bottom:calc(100% + .25rem)}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.45rem}
.dp-title{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--ink)}
.dp-nav{
  width:1.9rem;height:1.9rem;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;border-radius:6px;cursor:pointer;color:var(--ink-2);
}
.dp-nav svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dp-nav.next svg{transform:rotate(180deg)}
.dp-nav:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.dp-nav:disabled{opacity:.3;cursor:default;background:transparent;border-color:transparent;color:var(--ink-3)}
.dp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:.2rem}
.dp-wd span{text-align:center;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.dp-grid .d{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;border-radius:6px;cursor:pointer;
  font-family:var(--sans);font-size:.86rem;color:var(--ink);font-variant-numeric:tabular-nums;
  transition:background .12s ease,color .12s ease;
}
.dp-grid .d.out{color:var(--ink-3);opacity:.55}
/* сегодня помечено обводкой, а не заливкой: заливка — это выбор */
.dp-grid .d.today{border-color:var(--rule-2);font-weight:600}
.dp-grid .d:hover:not(:disabled){background:var(--brand-soft);color:var(--brand)}
.dp-grid .d:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.dp-grid .d[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--paper);font-weight:600}
.dp-grid .d:disabled{color:var(--ink-3);opacity:.28;cursor:default}
/* Четыре кнопки в одну строку не помещаются: «Через неделю» и
   «Через месяц» ломались бы пополам. Сетка два на два — та же
   высота, что была у двух кнопок в строку, и ни одного переноса. */
.dp-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:.35rem;
  margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--rule);
}
.dp-quick{
  border:1px solid var(--rule-2);background:transparent;border-radius:100px;cursor:pointer;
  padding:.3rem .5rem;font-family:var(--sans);font-size:.78rem;color:var(--ink-2);
  white-space:nowrap;
}
.dp-quick:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dp-grid .d[aria-selected="true"]{color:#141112}
}
:root[data-theme="dark"] .dp-grid .d[aria-selected="true"]{color:#141112}

/* ============================================================
   Форма заявки на счёт
   ------------------------------------------------------------
   Одна и та же форма стоит в блоке «Тираж» на главной и в разделе
   «Счёт для организации» на странице тиража. Раньше её стили лежали
   в home.css, а страница тиража его не подключает — поля там
   оставались нативными и выпадали из оформления. Место формы —
   в общем файле.
   ============================================================ */
.b2b-form{display:flex;flex-direction:column;gap:.55rem;background:var(--card);border:1px solid var(--rule);padding:1.1rem}
.b2b-form .fr{display:flex;flex-direction:column;gap:.24rem}
.b2b-form label{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.b2b-form input{
  font-family:var(--sans);font-size:.93rem;padding:.55rem .65rem;width:100%;
  border:1px solid var(--rule-2);background:var(--paper);border-radius:2px;color:var(--ink);
}
.b2b-form input::placeholder{color:var(--ink-3)}
.b2b-form input:hover{border-color:var(--rule-2)}
.b2b-form input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.b2b-form .btn{margin-top:.15rem}
.b2b-form small{color:var(--ink-3);font-size:.75rem;line-height:1.45}

/* Разделитель между главным действием и запасным.
   Без него кнопка «Собрать тираж самому» и поля формы читаются
   как одно целое: будто перед сбором тиража надо ещё и вписать
   почту. Черта сверху говорит, что это два разных пути.

   Не «линия — текст — линия»: колонка формы узкая, текст занимает
   её целиком, и на линии не остаётся ни точки. Проверено — они
   там были и не были видны. */
.b2b-or{
  margin:.7rem 0 .1rem;padding-top:.75rem;border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--ink-3);text-align:center;
}

/* Кнопки формы во всю её ширину и по центру: «Собрать тираж
   самому» в узкой колонке переносится, и текст, прижатый влево,
   висит в пилюле криво. */
.b2b-form .btn{
  width:100%;justify-content:center;text-align:center;
  padding-left:.9rem;padding-right:.9rem;line-height:1.25;
}

/* ссылка-кнопка внутри текста подсказки */
.linky{border:0;background:transparent;padding:0;font:inherit;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linky:hover{text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:.05em .35em}

/* ============================================================
   Хлебные крошки
   ------------------------------------------------------------
   Лежат здесь, а не в category.css. Крошки есть на восьми
   страницах, а category.css подключают четыре — и на
   остальных они выводились обычным нумерованным списком.
   Та же ошибка, что была у формы счёта: общий компонент
   в постраничном файле работает ровно до второй страницы.
   ============================================================ */
.crumbs{font-size:.84rem;color:var(--ink-3);padding:1rem 0 0}
/*
   ПОЧЕМУ ЗДЕСЬ ВЕЗДЕ align-items:center

   Крошки разъезжались по вертикали: «Главная →» стояла по низу
   строки, а «Что написать в приглашении» — по верху, на восемь
   точек выше. Выглядело это как сломанная вёрстка, и ею и было.

   Причина в том, что крошки разного устройства. Ссылка — это
   тап-цель в 44 точки (см. ниже), то есть высокий блок, который
   центрирует свой текст внутри себя. Последняя крошка ссылкой
   не является: это просто текст, и в растянутом до тех же 44
   точек пункте он ложится по верху. Две крошки в одной строке
   оказывались на разных базовых линиях.

   Стрелка страдала отдельно: она рисуется через ::after, то есть
   это строчный текст внутри пункта, и к 44-точечной ссылке рядом
   она никак не привязана.

   Лечится не подпорками, а тем, что и пункт, и список становятся
   рядами с выравниванием по центру: тогда высокая ссылка, низкий
   текст и стрелка встают на одну ось независимо от того, из чего
   каждый из них сделан.
*/
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;
}
.crumbs li{display:inline-flex;align-items:center;gap:.5rem}
/* Крошки стояли по 38 точек. Они идут строкой одна за другой,
   и промах по «Главная» уводит на соседний раздел — то есть
   цена промаха здесь выше обычной ссылки в тексте. */
.crumbs a{text-decoration:none;color:var(--ink-3);
  display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--brand)}
.crumbs li:not(:last-child)::after{content:"→";opacity:.55;line-height:1}
.crumbs li[aria-current]{color:var(--ink-2)}

/* ---------- заголовки и секции ---------- */
section{padding:3.2rem 0;border-bottom:1px solid var(--rule)}
.sec-head{margin:0 0 1.6rem}
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0 0 .85rem;text-wrap:balance}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.15;margin:0 0 .4rem}
.sec-head p{margin:0;color:var(--ink-2);max-width:38rem}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;cursor:pointer;padding:.72rem 1.35rem;border-radius:2px;
  font-size:.97rem;font-weight:500;border:1px solid transparent;
}
/* Цвет букв — переменная, а не три правила с разной
   специфичностью. Почему именно так и что из-за прежней записи
   сломалось — в tokens.css, у объявления --on-brand. */
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-ghost{background:transparent;border-color:var(--rule-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-sm{padding:.44rem .9rem;font-size:.88rem}

/* ============================================================
   ЕЩЁ ТРИ РОЛИ КНОПКИ
   ------------------------------------------------------------
   Красная заливка и обводка были единственными двумя видами, и
   поэтому красным красилось всё, что «надо нажать»: и покупка,
   и переход в каталог, и доплата за старший тариф. Роли, их
   цвета и замеры — в tokens.css, у объявления --extra-soft.
   ============================================================ */

/* Дополнительная функция: посмотреть, примерить, настроить.
   Ничего не покупает и ни к чему не обязывает. */
.btn-extra{background:var(--extra-soft);border-color:transparent;color:var(--extra-ink)}
.btn-extra:hover{background:var(--extra-soft);border-color:var(--extra-ink);color:var(--extra-ink)}

/* Допродажа: нажатие стоит денег.
   Обводка обязательна — см. tokens.css о том, почему одного
   цвета здесь мало. */
.btn-up{background:var(--up-soft);border-color:var(--up-ink);color:var(--up-ink)}
.btn-up:hover{background:var(--up-soft);border-color:var(--up-ink);color:var(--up-ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--up-ink) 18%, transparent)}

/* РОЛЬ «СДЕЛАНО» ОТСЮДА УБРАНА — ВМЕСТЕ С ЦВЕТОМ

   Была .btn-ok: зелёная заливка, «уже сделано». Её не носила ни
   одна кнопка на сайте — роль существовала только здесь, в виде
   правила.

   А зелёный теперь занят допродажей (см. --up-soft в tokens.css).
   Оставить рядом неиспользуемую .btn-ok значило бы оставить
   заряженную ловушку: первый, кто ею воспользуется, поставит
   рядом с зелёной кнопкой «Добавить „Праздник“» такую же зелёную
   кнопку «Готово», и различить их будет нельзя.

   Зелёный как ОТМЕТКА никуда не делся и остаётся правильным:
   галочка перед «Разовый платёж», «придут» в списке гостей,
   обведённая зелёным «В корзине». Отметка — не кнопка, и заливки
   у неё нет. */

/* Удаление: буквы цветом отказа, но без заливки. Залитая красная
   кнопка «удалить» соревнуется по заметности с «оплатить» — то
   есть самое опасное действие на странице выглядит самым
   желанным. */
.btn-del{background:transparent;border-color:transparent;color:var(--brick);
  text-decoration:underline;text-underline-offset:.22em;padding-inline:.4rem}
.btn-del:hover{color:var(--brick);text-decoration-thickness:2px}

/* ---------- чипы и плитки (общие для главной и категории) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips a,.chips button{
  text-decoration:none;font-size:.89rem;padding:.32rem .68rem;
  border:1px solid var(--rule-2);border-radius:100px;
  color:var(--ink-2);background:var(--card);cursor:pointer;
}
.chips a:hover,.chips button:hover{border-color:var(--brand);color:var(--brand)}
.chips button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--paper);font-weight:500}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.7rem}
.tile{
  text-decoration:none;border:1px solid var(--rule);background:var(--card);
  padding:.75rem .85rem;display:flex;flex-direction:column;gap:.2rem;
  position:relative;overflow:hidden;
}
.tile:hover{border-color:var(--brand)}
.tile b{font-size:.94rem;font-weight:500}
.tile span{font-size:.78rem;color:var(--ink-3)}
.tile i{position:absolute;right:-14px;bottom:-14px;width:52px;height:52px;border-radius:50%;opacity:.5}

/* ============================================================
   ЧАСТЫЕ ВОПРОСЫ
   ------------------------------------------------------------
   ОТКРЫТЫЙ ПУНКТ — СОСТОЯНИЕ, А НЕ ДЕЙСТВИЕ

   Было так: раскрытый вопрос ничем не отличался от закрытых,
   а все плюсы справа горели фирменным красным. То есть шесть
   красных отметок подряд в блоке, где нажимать не на что, и ни
   одного признака у того единственного пункта, который сейчас
   открыт.

   Обе половины — один и тот же недосмотр при разведении кнопок
   по ролям: красная заливка и красный знак означают «вот
   следующий шаг», а «плюс» у вопроса ничего не продаёт и никуда
   не ведёт. Здесь до этого места руки не дошли.

   Теперь наоборот: знаки нейтральные, а открытый пункт получает
   нейтральную подложку — ту же, что у врезок. Видно сразу, где
   ты находишься, и ни одно из шести мест не притворяется
   кнопкой «купить».

   ПОЧЕМУ ПОДЛОЖКА ВЫХОДИТ ЗА ТЕКСТ ОТРИЦАТЕЛЬНЫМ ПОЛЕМ

   Вопросы выровнены по краю колонки вместе с заголовком блока.
   Если дать открытому пункту фон и внутреннее поле, текст
   сдвинется вправо — и при каждом раскрытии строка будет
   прыгать. Поле компенсируется таким же отрицательным внешним:
   подложка шире текста, а сам текст стоит там же, где стоял.
   Три четверти em — и в запасе остаётся половина em от поля
   .shell даже на 320 точках.
   ============================================================ */
.faq{border-top:1px solid var(--rule)}
.faq details{
  border-bottom:1px solid var(--rule);
  border-radius:12px;
  padding-inline:.75rem;margin-inline:-.75rem;
  transition:background-color .2s ease;
}
.faq summary{
  cursor:pointer;padding:.95rem 0;font-size:1rem;font-weight:500;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";color:var(--ink-3);font-size:1.2rem;line-height:1;
  transition:color .2s ease;
}
.faq summary:hover::after{color:var(--ink)}
.faq details[open]{background:var(--paper-2);border-bottom-color:transparent}
.faq details[open] summary::after{content:"–";color:var(--ink)}
/* На самых узких экранах поле .shell само ужимается, и три
   четверти em съедали от него почти всё: подложка подходила к
   краю экрана на две точки. Замерено на 320. */
@media (max-width:420px){
  .faq details{padding-inline:.5rem;margin-inline:-.5rem}
}
.faq details p{margin:0 0 1rem;color:var(--ink-2);font-size:.94rem;max-width:44rem}

/* ---------- SEO-текст ---------- */
.seo{font-size:.93rem;color:var(--ink-2);columns:2;column-gap:2.5rem}
.seo p{margin:0 0 .8rem}
@media (max-width:720px){.seo{columns:1}}

/* ---------- подвал ---------- */
footer{padding:2.6rem 0 3.5rem;font-size:.88rem;color:var(--ink-2)}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.6rem}
.f-col h4{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .55rem;font-weight:500;
}
.f-col a{display:block;text-decoration:none;padding:.13rem 0}
.f-col a:hover{color:var(--brand)}
/* ---------- соцсети ----------
   Плоский ряд без кружков и рамок: подпись сверху, под ней знаки
   в одну строку с широкими промежутками. Цвет один — текстовый,
   поэтому ряд не спорит с подвалом; цветным становится только тот,
   на который навели.

   Внутри сейчас короткие названия площадок, а не логотипы: чужие
   знаки нельзя перерисовывать по памяти, их берут из официальных
   брендбуков. Когда файлы будут, SVG кладётся внутрь ссылки вместо
   <span> — размер и цвет уже заданы через currentColor, больше
   ничего менять не придётся. */
/* Снизу отступ обязателен, а не «для красоты».

   Дальше идёт .f-tema со своей верхней линией, и без этого
   отступа линия проходила вплотную под кружками значков —
   на глаз казалось, что значки на неё наехали. Своего
   пространства у кружка нет: он ровно 2.75rem и заканчивается
   там же, где рисуется. */
.f-soc{margin-top:1.9rem;padding-bottom:1.5rem}
.f-soc-t{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 .85rem}
/* ------------------------------------------------------------
   Значки площадок — круглые кнопки

   Были просто буквы в ряд: «TG VK Pin Дзен YT». Читается как
   список сокращений, а не как ссылки, и попасть по ним пальцем
   тяжело — область нажатия равна высоте строчки.

   Круг решает оба: он виден как кнопка и держит 2,6 rem — это
   больше минимальных 44 точек на телефоне. Внутри либо значок,
   подставленный владельцем, либо короткое имя площадки; кружок
   при этом один и тот же, поэтому ряд не разъезжается, пока
   значки подставлены не все.
   ------------------------------------------------------------ */
.soc{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.soc-i{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  /* 2.6rem — это 41.6 точки при базовом кегле: до 44 не хватало
     двух с половиной. Кружок значка соцсети маленький и стоит
     в ряду таких же. */
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--rule-2);background:transparent;
  color:var(--ink-2);text-decoration:none;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
/* Кегль подобран по самой длинной подписи — «Дзен». На .78rem
   она вылезала за круг: четыре буквы шире, чем две. */
.soc-i span{font-size:.7rem;font-weight:600;letter-spacing:0;line-height:1;white-space:nowrap}
/* Значок площадки. Размер и цвет задаёт кнопка вокруг него —
   сам знак не трогается: он приходит с fill="currentColor" из
   официального файла, и перекрашивание кнопкой предусмотрено
   правилами бренда наравне с монохромной версией. */
.soc-i svg{width:1.3rem;height:1.3rem;fill:currentColor;display:block;
           transition:transform .18s cubic-bezier(.2,.7,.3,1)}
/* Запасной знак — наш собственный, и рисуется он иначе: обводкой,
   а не заливкой. Правило выше заливает currentColor всё подряд,
   и лист со строчками превратился бы в чёрный прямоугольник. */
.soc-i .soc-gen{
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.soc-i:hover svg{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.soc-i svg{transition:none}.soc-i:hover svg{transform:none}}
/* Значок владельца: одноцветный на прозрачном фоне, поэтому
   красим его самой ссылкой — так он живёт по тем же правилам
   наведения, что и буквы, и не выпадает из тёмной темы. */
.soc-i img{
  width:1.25rem;height:1.25rem;object-fit:contain;
  filter:none;
}
.soc-i:hover{
  color:var(--brand);border-color:var(--brand);background:var(--brand-soft);
  transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(0,0,0,.4);
}
.soc-i:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.f-legal{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  font-size:.82rem;color:var(--ink-3);display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:space-between;
}

.f-legal .ver{font-variant-numeric:tabular-nums;opacity:.75;white-space:nowrap}

/* Способы оплаты. Сейчас это текстовые заглушки: официальные знаки
   «Мира», Visa, Mastercard и ЮKassa нужно взять из их брендбуков
   и положить сюда файлами — рисовать их от руки нельзя. */
.pay{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pay span{
  font-size:.7rem;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap;
  border:1px solid var(--rule-2);border-radius:4px;padding:.24rem .52rem;background:var(--card);
}

/* компактный ряд ссылок в коротких подвалах воронки */
.f-mini{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.86rem;margin:0 0 1.2rem}
.f-mini a{text-decoration:none}
.f-mini a:hover{color:var(--brand)}

/* ============================================================
   Тема сайта — переключатель в подвале
   ------------------------------------------------------------
   ЗДЕСЬ БЫЛА ПОЛОСА ПРОТОТИПА

   Четыре кнопки над шапкой: «Бумага · Праздник · Светлая ·
   Тёмная», пунктирная граница снизу, приглушённые значки.
   Полоса делала своё дело, пока сайт показывали заказчику:
   переключить оформление на живой странице и увидеть оба
   варианта. В магазине она осталась просто потому, что её
   никто не убрал, и стоила дороже, чем давала.

   Оформление («Бумага» / «Праздник») теперь выбирает владелец
   в настройщике, и печатает его сервер в теге <html>. Кнопок
   для этого на сайте нет вовсе — см. Yzt_Setup::html_skin.

   Осталась тема: светлее или темнее. Это настоящая настройка
   читателя, и живёт она там, где ищут настройки, — в подвале.

   ПОЧЕМУ НЕ КРУЖОК СО ЗНАЧКОМ

   Значок солнца и месяца отвечает на вопрос «светло или темно»,
   но не на вопрос «а как было до того, как я сюда нажал».
   Положений три, и третье — «как в системе» — значком не
   рисуется никак: это не яркость, это отказ выбирать яркость.
   Три подписи словами занимают одну строку подвала и не требуют
   догадываться.
   ============================================================ */
.f-tema{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;
  padding-block:.9rem;border-top:1px solid var(--rule);
}
.f-tema-t{font-size:.8rem;color:var(--ink-3)}
.f-tema-b{display:flex;flex-wrap:wrap;gap:.3rem;border:1px solid var(--rule);border-radius:100px;padding:2px;background:var(--card)}
.f-tema-b button{
  border:0;background:transparent;border-radius:100px;cursor:pointer;
  /* 44 точки — подушечка пальца; в подвале кнопки стоят вплотную,
     и промах здесь попадает по соседнему положению, а не мимо.
     Ширина тоже 44: на кнопке теперь значок, а не слово, и без
     заданной ширины она сжалась бы до размера рисунка. */
  min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 .55rem;font-size:.8rem;color:var(--ink-3);white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
/* Значок — обводкой, без заливки: так он остаётся читаемым и на
   светлом, и на тёмном, и цвет берёт у кнопки, а не хранит свой.
   vector-effect не нужен — мы не масштабируем сам svg. */
.f-tema-b .tema-ic{
  width:1.15rem;height:1.15rem;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Искры у «праздничного» — единственный знак с заливкой: контур
   у четырёхлучевой звезды на таком размере превращается в кашу. */
.f-tema-b button[data-yz-vid="prazdnik"] .tema-ic{fill:currentColor;stroke:none}
.f-tema-b button:hover{color:var(--ink)}
/* Выбранное положение отмечено подложкой и плотностью, а не
   акцентом: малиновая заливка в подвале читалась бы как действие
   («нажми сюда»), тогда как это отметка «сейчас вот так». */
.f-tema-b button[aria-pressed="true"]{background:var(--paper-2);color:var(--ink);font-weight:500}

/* ============================================================
   Уведомление о куки — как в прототипе
   ------------------------------------------------------------
   Карточка в левом нижнем углу. Здесь была полоса во всю ширину:
   её завели потому, что карточка накрывает собой кнопку
   «В корзину» под конструктором на главной. Владелец сайта
   посмотрел оба варианта и выбрал карточку — она и стоит.

   Что важно помнить, если кнопку снова начнут терять: дело не
   в «где-то съехало», а в том, что угол внизу слева на главной
   занят кнопкой конструктора. Лечится либо полосой, либо сдвигом
   карточки, либо переносом кнопки.
   ============================================================ */
.cookie{
  position:fixed;left:1rem;bottom:1rem;z-index:60;max-width:23rem;
  display:flex;gap:.85rem;align-items:center;
  background:var(--card);border:1px solid var(--rule-2);border-radius:10px;
  padding:.8rem .9rem;box-shadow:var(--shadow-l);
}

/* ============================================================
   Кнопка «наверх»
   ------------------------------------------------------------
   Появляется после полутора экранов прокрутки и не занимает места
   до этого: пока шапка видна, подниматься некуда. Справа — слева
   стоит уведомление о куки, а на телефоне снизу липкая полоса
   действия, поэтому там кнопка поднимается над ней.
   ============================================================ */
.to-top{
  position:fixed;right:1rem;bottom:1rem;z-index:55;
  width:2.7rem;height:2.7rem;display:grid;place-items:center;
  border:1px solid var(--rule-2);border-radius:50%;background:var(--card);
  color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow-m);
  opacity:0;visibility:hidden;transform:translateY(.6rem);
  transition:opacity .2s ease,transform .2s ease,visibility .2s,background .18s ease,color .18s ease,border-color .18s ease;
}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.to-top:hover{background:var(--brand);border-color:var(--brand);color:var(--paper)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .to-top:hover{color:#141112}}
:root[data-theme="dark"] .to-top:hover{color:#141112}
@media (max-width:720px){
  /* поднимаем над липкой полосой действия — но только там, где она есть */
  body:has(.mcta) .to-top{bottom:5.2rem}
  /* уведомление о куки на узком экране занимает весь низ: пока оно
     не закрыто, кнопке там места нет. Закроют — кнопка появится */
  body:has(.cookie) .to-top{display:none}
}

.cookie p{margin:0;font-size:.8rem;color:var(--ink-2);line-height:1.4}
.cookie a{color:var(--brand)}
.cookie .btn{flex:none}

/* Кнопка «Ок»: тихая во всех оформлениях и обеих темах.
   ------------------------------------------------------------
   Здесь стояла btn-primary — та же малиновая кнопка, что
   «Перейти к оплате». В углу экрана она читалась как главное
   действие страницы, хотя закрывает уведомление, которое ничего
   не требует и никого не держит.

   Обводка и наследуемый цвет вместо заливки: кнопку видно,
   нажать легко, а взгляд она не забирает. Всё, кроме фона под
   курсором, берётся из токенов темы, поэтому в тёмной она
   работает без отдельного правила, а «Праздник» и остальные
   оформления получают свой цвет автоматически.

   44 пикселя по высоте на телефоне — минимум для пальца:
   тихая не значит мелкая. */
.cookie-ok{
  flex:none;font:inherit;font-size:.8rem;font-weight:500;cursor:pointer;
  padding:.4rem .85rem;border-radius:8px;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--rule-2);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cookie-ok:hover{background:var(--paper-2);border-color:var(--ink-3);color:var(--ink)}
.cookie-ok:active{background:var(--rule)}
.cookie-ok:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:720px){
  .cookie-ok{min-height:44px;padding-inline:1rem}
}
@media (max-width:720px){
  .cookie{justify-content:flex-start}
  .cookie p{flex:1 1 12rem}
}

/* ============================================================
   Финальный призыв перед подвалом
   ------------------------------------------------------------
   Последняя точка, где человек ещё на странице. Пара
   --brand / --paper самосогласована во всех четырёх сочетаниях
   темы и оформления, поэтому полосу не нужно перекрашивать руками.
   ============================================================ */
/* ПОЛОСА СТАЛА СВЕТЛОЙ, А КРАСНОЙ НА НЕЙ ОСТАЛАСЬ КНОПКА

   Было: фирменный красный во всю ширину и белая кнопка на нём.
   Это единственное место сайта, где бренд работал ФОНОМ, а не
   кнопкой, — седьмая роль сверх четырёх заведённых, и притом
   самая громкая на странице. Заодно и белая кнопка была
   единственной такой: больше нигде на сайте белым по красному
   не пишут.

   Стало: мягкий тёплый градиент, тонкие волоски сверху и снизу,
   и ровно один красный предмет — кнопка. Полоса при этом
   заметнее прежнего, потому что отделена от белого подвала
   границей, а не только цветом.

   Все цвета — переменные (см. tokens.css, «полоса призыва»):
   присланные в макете числа верны для светлого «Праздника» и
   стоят там как есть, а тёмная тема называет свои. Написать
   числа прямо здесь значило бы получить тёмно-синий заголовок
   на почти чёрном фоне у всякого, кто включил тёмную. */
.final{
  position:relative;overflow:hidden;
  border-top:1px solid var(--final-edge);
  border-bottom:1px solid var(--final-edge);
  background:linear-gradient(105deg, var(--final-a) 0%, var(--final-b) 48%, var(--final-c) 100%);
  color:var(--final-ink);text-align:center;
  padding:3.2rem 0 3.4rem;
}
/* ОДНА ФОРМУЛА КЕГЛЯ НА ВСЕ ШИРИНЫ

   Нижняя граница поднята с 24 до 30 точек — так просит макет,
   и так правильно: это последний экран страницы, здесь решают,
   возвращаться ли наверх, и двадцать четыре точки для такого
   решения мелко.

   Но граница поднята в ТОЙ ЖЕ формуле, а не второй строкой в
   медиазапросе. Отдельный кегль «для телефона» дал бы разрыв
   на самой границе: тридцать пять точек на 767 и двадцать
   четыре на 768. Так clamp и работает: до 1050 точек ширины
   держится нижняя граница, выше — растёт до прежнего потолка.
   На широком экране заголовок остался тем же, что был. */
.final h2{color:var(--final-ink);max-width:41rem;margin:0 auto .5rem;font-size:clamp(1.875rem,3.2vw,2.1rem);line-height:1.15;text-wrap:balance}
/* Прозрачность заменена цветом: .86 от тёмно-синего по светлому
   даёт тот же серо-сиреневый, что назван в макете, но зависит от
   фона и ломается на тёмной теме. Цвет назван прямо. */
.final > .shell > p{margin:0 0 1.5rem;font-size:1rem;color:var(--final-ink-2)}
/* ------------------------------------------------------------
   ПОСЛЕДНЯЯ КНОПКА

   ПЕРЕЛИВА БОЛЬШЕ НЕТ

   По кнопке раз в четыре секунды проходил блик. Он имел смысл,
   пока кнопка была белой на красном: контраст у неё был
   максимальный, добавить ей веса было нечем, и единственным
   способом оживить третий подряд ровный прямоугольник оставалось
   движение.

   Теперь кнопка красная на светлом, то есть самое яркое пятно
   полосы и без всякого движения. Блик на ней превратился бы в
   глянец — а глянцевая кнопка читается как реклама, а не как
   следующий шаг. Убран вместе с ключевыми кадрами: правило,
   которое ничего не красит, всё равно однажды кто-нибудь
   включит обратно.

   ЧТО ДВИЖЕТСЯ ВМЕСТО НЕГО: ничего, пока на кнопку не навели.
   Под курсором она поднимается на две точки и берёт тень
   погуще — движение по запросу, а не по таймеру.
   ------------------------------------------------------------ */
.final-btn{
  /* Градиент задан от --brand, а не тремя числами: в светлом
     «Празднике» он даёт ровно присланные #d92a52 → #d12149 →
     #c91843, а в остальных палитрах — те же три ступени от
     своего бренда. */
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 93%, white) 0%,
    var(--brand) 55%,
    color-mix(in srgb, var(--brand) 93%, black) 100%);
  color:var(--on-brand);
  border:1px solid color-mix(in srgb, var(--brand) 82%, black);
  border-radius:999px;
  font-weight:600;padding:.85rem 2.2rem;
  box-shadow:0 8px 24px color-mix(in srgb, var(--brand) 18%, transparent);
  transition:background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
/* Наведение берёт --brand-2 — ту самую переменную, которой на
   сайте наводятся все главные кнопки. В светлом «Празднике» она
   темнее бренда, как и просит макет; в тёмной теме, где бренд
   светлый, она светлее — и это правильно там, а макет про тёмную
   не знает. Второго определения «цвета наведения» не заводим. */
.final-btn:hover{
  background-image:none;background-color:var(--brand-2);
  border-color:var(--brand-2);
  box-shadow:0 11px 28px color-mix(in srgb, var(--brand-2) 25%, transparent);
  transform:translateY(-2px);
}
.final-btn:active{
  transform:translateY(0);
  box-shadow:0 5px 14px color-mix(in srgb, var(--brand-2) 20%, transparent);
}
.final-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset:3px;
}
/* Просили не двигать — не двигаем. Цвет и тень под курсором
   остаются: отклик нужен, подпрыгивание — нет. */
@media (prefers-reduced-motion: reduce){
  .final-btn{transition:box-shadow 180ms ease}
  .final-btn:hover,.final-btn:active{transform:none}
}
.final-note{margin:1.1rem 0 0;font-size:.83rem;color:var(--final-ink-2)}
/* Сердце, завиток и золотое конфетти собраны в одну группу на сторону,
   правая — та же группа зеркально. Так фигуры держат общий масштаб и
   не разъезжаются при смене высоты полосы. */
.final-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* ДЕКОР ЗАНИМАЕТ РОВНО ТО, ЧТО СВОБОДНО

   Рисунок высотой во всю полосу шириной выходит около 266 точек.
   Заголовок ограничен 41rem и стоит по центру, значит свободного
   места по краям ровно (100% − 41rem) / 2. На широком экране его
   вдвое больше, чем нужно, а на ноутбучных 1024 — сто шестьдесят
   восемь точек: замерено, что сердце залезало под первую строку
   заголовка на полсотни точек, а на 868 — на сто двадцать.

   Раньше это лечилось порогом «уже 860 — прячем», и порог был
   подобран на глаз под один заголовок. Достаточно удлинить
   заголовок на одно слово, и подбор молча перестаёт быть верным.

   Теперь ширина считается от свободного места: рисунок сам
   уменьшается, пока место есть, и сам исчезает, когда его не
   остаётся. Порог ниже оставлен для телефонов — там декор не
   нужен в любом случае. */
.d-side{
  position:absolute;top:50%;height:100%;width:auto;transform:translateY(-50%);
  max-width:calc((100% - 41rem) / 2 - 1rem);
}
.d-side{left:0}
.d-side.flip{left:auto;right:0;transform:translateY(-50%) scaleX(-1)}
/* Сердца и ленты были белыми в четыре десятых прозрачности —
   на красном фоне это тихий, но видимый след. На светлом белое
   исчезает совсем, поэтому у декора теперь свой цвет и своя
   плотность: заметнее прежнего примерно на треть, но всё ещё
   тише заголовка. */
.final-deco .ln{fill:none;stroke:var(--final-line);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.final-deco .cf{fill:var(--final-gold);opacity:.9}
@media (max-width:860px){.final-deco{display:none}}

/* ------------------------------------------------------------
   УЗКИЕ ЭКРАНЫ

   Заголовок на телефоне был 24 точки — нижняя граница clamp'а,
   потому что 3.2vw от 390 точек это двенадцать. Для последнего
   экрана страницы мелко: именно здесь решают, возвращаться ли
   наверх. Ставим 9vw с потолком 40 — на 320 выходит 30 точек,
   на 430 — 38.

   Кнопка на телефоне во всю ширину, но не шире 320: кнопка в
   пол-экрана шириной читается как баннер, а не как действие.
   Пятьдесят две точки высоты — это подушечка пальца.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .final{padding:2.9rem 0 3.1rem}
  .final h2{line-height:1.08}
  .final > .shell > p{font-size:1rem}
  .final-btn{display:flex;width:100%;max-width:320px;margin:0 auto;min-height:52px}
}

/* ============================================================
   Текстовые страницы: документы, помощь, печать
   ============================================================ */
.doc{max-width:44rem}
.doc h2{font-family:var(--serif);font-size:1.4rem;margin:2.1rem 0 .6rem}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.02rem;font-weight:600;margin:1.4rem 0 .4rem}
.doc p{font-size:.95rem;color:var(--ink-2);margin:0 0 .75rem}
.doc ul,.doc ol{padding-left:1.15rem;margin:0 0 1rem;font-size:.95rem;color:var(--ink-2)}
.doc li{margin:0 0 .35rem}
.doc b{color:var(--ink)}
.doc .upd{font-size:.85rem;color:var(--ink-3);margin:0 0 1.6rem}
/* Черновик документа. Видимая плашка, потому что подсунуть
   непроверённый юридический текст в продакшен — дороже всего,
   что можно сэкономить на прототипе.

   Правится в редакторе как обычный абзац с классом, поэтому
   правило работает и на <p class="draft">, и на блоке с абзацем
   внутри: в контенте встречаются оба, и требовать от редактора
   помнить, какой из них «правильный», значит однажды получить
   плашку без плашки. */
.doc .draft{
  margin:0 0 1.8rem;
  background:var(--amber-soft);border:1px solid var(--amber);border-radius:8px;padding:.85rem 1rem;
  font-size:.88rem;color:var(--ink-2);
}
.doc .draft p{margin:0;font-size:.88rem;color:var(--ink-2)}

/* Незаполненная дыра в документе.
   ------------------------------------------------------------
   Реквизиты продавца, подрядчики, порядок выдачи чека — то, чего
   разработчик знать не может, а без чего документ недействителен.
   Написать это серым мелким шрифтом значит спрятать: серое мелкое
   в юридическом тексте пролистывают по определению.
   Поэтому красная плашка, которую нельзя не заметить ни в
   редакторе, ни на сайте. Её видно и постороннему — и это тоже
   часть замысла: чужой глаз спросит «а почему тут пусто?»
   раньше, чем спросит Роскомнадзор. */
.doc .yz-todo{
  margin:1.1rem 0 1.4rem;
  /* 4%, а не 7%: на семи процентах кирпич по своей же
     подложке давал 4.47 при норме 4.5 — промах на три сотых,
     но промах. Подложка светлеет, заголовок читается. */
  background:color-mix(in srgb, var(--brick) 4%, var(--paper));
  border:1px solid var(--brick);border-left-width:4px;border-radius:6px;
  padding:.85rem 1rem;font-size:.9rem;color:var(--ink-2);
}
.doc .yz-todo b{color:var(--brick)}

/* ============================================================
   Страница контактов
   ------------------------------------------------------------
   Здесь же живут реквизиты продавца: в подвале их нет сознательно,
   они нужны только там, где обязаны быть.
   ============================================================ */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.ct{
  background:var(--card);border:1px solid var(--rule);padding:1.2rem 1.3rem;
  display:flex;flex-direction:column;gap:.4rem;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* Значок сверху. Он здесь не украшение: четыре карточки подряд с
   одинаковой типографикой сливаются в список, и глаз не цепляется
   ни за одну. Значок даёт каждой отдельную примету, по которой
   карточку находят со второго раза, не перечитывая заголовки. */
.ct-ic{
  width:2.4rem;height:2.4rem;padding:.55rem;box-sizing:border-box;margin:0 0 .35rem;
  background:var(--brand-soft);border-radius:8px;
  fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:background .2s ease,stroke .2s ease,transform .25s ease;
}
.ct h3{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.ct b{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.25;transition:color .2s ease}
.ct b a{text-decoration:none}
.ct b a:hover{color:var(--brand)}
.ct p{margin:0;font-size:.9rem;color:var(--ink-2)}
/* Стрелка появляется только на карточках-ссылках: она обещает переход,
   и на справочной карточке контактов была бы обманом. */
.ct-go{
  margin-top:auto;padding-top:.7rem;font-size:.85rem;color:var(--brand);font-weight:500;
  display:inline-flex;align-items:center;gap:.3rem;opacity:.55;
  transition:opacity .2s ease,gap .2s ease;
}
a.ct:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--rule-2)}
a.ct:hover .ct-ic{background:var(--brand);stroke:var(--paper)}
a.ct:hover b{color:var(--brand)}
a.ct:hover .ct-go{opacity:1;gap:.55rem}
a.ct:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) a.ct:hover .ct-ic{stroke:#141112}}
:root[data-theme="dark"] a.ct:hover .ct-ic{stroke:#141112}
/* карточка-справка не кликается целиком — только подсветка рамки */
div.ct:hover{border-color:var(--rule-2)}
.req{background:var(--paper-2);border:1px solid var(--rule);padding:1.2rem 1.3rem}
.req dl{display:grid;grid-template-columns:11rem 1fr;gap:.45rem 1rem;margin:0;font-size:.92rem}
.req dt{color:var(--ink-3)}
.req dd{margin:0}
@media (max-width:560px){.req dl{grid-template-columns:1fr;gap:.1rem .5rem}.req dd{margin:0 0 .6rem}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   Сноска про Meta
   ------------------------------------------------------------
   Упоминание WhatsApp в России требует указания, что Meta признана
   экстремистской организацией и запрещена. Ставим звёздочкой,
   а не врезкой в текст: закон требует упоминания, а не того,
   чтобы дисклеймер перебивал предложение. Текст сноски —
   в подвале, один раз на страницу.
   ============================================================ */
.ft{font-size:.62em;line-height:0}
.ft a{color:var(--brand);text-decoration:none}
.ft a:hover{text-decoration:underline}
.ft-note{
  margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  font-size:.74rem;line-height:1.45;color:var(--ink-3);
}
.ft-note:target{color:var(--ink-2)}

/* ------------------------------------------------------------
   Звёздочка с подсказкой на месте

   Была ссылкой в подвал: нажатие уносило на восемь экранов вниз,
   и назад человек не возвращался. Теперь ответ приходит туда,
   где возник вопрос.

   Звёздочка остаётся мелкой и приглушённой — она не должна
   перебивать предложение, в котором стоит. Но у неё есть своя
   область нажатия в 24 точки: попасть в один символ пальцем
   нельзя, а сноска, в которую нельзя попасть, не существует.
   ------------------------------------------------------------ */
.ft-w{position:relative;display:inline}
.ft-star{
  background:none;border:0;padding:0 .1rem;margin:0;cursor:help;
  font-size:.72em;line-height:1;vertical-align:super;
  color:var(--brand);opacity:.75;
}
.ft-star:hover{opacity:1}
/* Область нажатия больше самого знака: сам знак остаётся мелким. */
.ft-star::after{content:"";position:absolute;inset:-.6rem -.5rem;}
.ft-tip{
  position:absolute;left:0;top:calc(100% + .5rem);z-index:60;
  width:max-content;max-width:min(20rem, calc(100vw - 2.5rem));
  padding:.6rem .75rem;border-radius:10px;
  background:var(--ink);color:var(--paper);
  font-size:.8rem;line-height:1.45;font-weight:400;
  box-shadow:var(--shadow-m);
  /* display:none, а не visibility:hidden.
     Скрытый через visibility блок остаётся в раскладке и своей
     шириной растягивает страницу: звёздочка стоит в конце строки,
     подсказка уходит вправо на полтораста точек — и весь сайт
     на широком экране получал горизонтальную прокрутку, которой
     никто не видит, пока не потянет вбок.
     Плавное появление ради этого не жаль: подсказка и так
     возникает по наведению, то есть по воле человека. */
  display:none;
}
/* Наведение, фокус с клавиатуры и нажатие пальцем — три разных
   способа спросить об одном и том же. */
.ft-w:hover .ft-tip,
.ft-w:focus-within .ft-tip,
.ft-star[aria-expanded="true"] + .ft-tip{display:block}
/* Подсказка не должна вылезать за правый край: если звёздочка
   стоит в конце строки, прижимаем всплывающее к правому краю
   своего абзаца. */
@media (max-width:520px){
  .ft-tip{left:auto;right:0}
}

/* Та же оговорка строкой под блоком — для тех, кто не наводил,
   и для печати. Мелкая и приглушённая: это сноска, а не мысль. */
.sec-note{
  margin:.9rem 0 0;font-size:.78rem;line-height:1.45;color:var(--ink-3);
}

/* ============================================================
   Шапка на 320 пикселях
   ------------------------------------------------------------
   Логотип, корзина, переключатели тем и бургер стоят в ряд
   с зазором 1.5 rem. На узком экране этот зазор и есть та самая
   лишняя тридцатка пикселей, из-за которой ехала вся страница.
   Уменьшаем зазоры и поля, ничего не пряча: спрятанная на
   узком экране корзина — это потерянный заказ.
   ============================================================ */
@media (max-width:360px){
  .shell{padding:0 .85rem}
  .top-in{gap:.7rem}
  .top-in .logo span{font-size:.98rem}
}

/* ============================================================
   Форма счёта: подсказки и ошибки
   ------------------------------------------------------------
   Эту форму заполняют один раз в жизни, и заполняет её не тот,
   кто выбирал дизайн, а бухгалтер. Подсказка под полем отвечает
   на вопрос до того, как он возник; ошибка стоит там же, где
   поле, а не общей строкой внизу, — иначе её ищут.

   Красное и серое различаются не только цветом: у ошибки своя
   рамка у поля. Восемь процентов мужчин не отличат одну серую
   подпись от одной красной.
   ============================================================ */
.b2b-form .fh{color:var(--ink-3);font-size:.75rem;line-height:1.45}
.b2b-form .fe{color:var(--brick);font-size:.78rem;line-height:1.4;font-weight:500}
.b2b-form .fr.is-bad input{border-color:var(--brick);background:color-mix(in srgb, var(--brick) 5%, var(--card))}
.b2b-form .fr.is-bad input:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--brick) 18%, transparent)}
.b2b-form .fr.is-bad .fh{display:none}
.b2b-form #tOk.is-ok{color:var(--good-ink);font-weight:500}
.b2b-form #tOk.is-bad{color:var(--brick);font-weight:500}
.b2b-form button[disabled]{opacity:.6;cursor:default}

/* ============================================================
   ФОРМА ОБРАТНОЙ СВЯЗИ
   ------------------------------------------------------------
   Панель та же, что у заявки на счёт (.b2b-form), а строки свои:
   здесь есть выпадающий список и текстовое поле, которых там
   нет.

   Подсказка стоит ПОД полем, а не над ним: над полем её читают
   до того, как поняли, о чём речь, и она не помогает. Ошибка
   встаёт на её место — две серо-красные строки подряд под одним
   полем читаются как одна длинная.
   ============================================================ */
.svyaz{max-width:34rem;border-radius:14px;gap:.9rem}
.svyaz .fld{display:flex;flex-direction:column;gap:.25rem}
.svyaz .fld > label{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.svyaz .opt{text-transform:none;letter-spacing:0;color:var(--ink-3);font-weight:400}
.svyaz input,.svyaz select,.svyaz textarea{
  font-family:var(--sans);font-size:.95rem;padding:.6rem .7rem;background:var(--card);
  border:1px solid var(--rule-2);border-radius:8px;color:var(--ink);width:100%;
}
.svyaz textarea{resize:vertical;min-height:6.5rem;line-height:1.5}
.svyaz input:focus,.svyaz select:focus,.svyaz textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.svyaz .hint{color:var(--ink-3);font-size:.78rem;line-height:1.45}
.svyaz .err{color:var(--brick);font-size:.8rem;line-height:1.4;font-weight:500}
.svyaz [aria-invalid="true"]{border-color:var(--brick);background:color-mix(in srgb, var(--brick) 5%, var(--card))}
.svyaz [aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--brick) 18%, transparent)}
/* Согласие — строка «галочка, потом текст», а не заголовок поля.
   Правило .b2b-form label делает КАПС из любой подписи внутри
   панели, и согласие превращалось в крик по центру. */
.svyaz .chk{
  display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;
  font-size:.88rem;line-height:1.5;color:var(--ink-2);
  text-transform:none;letter-spacing:0;text-align:left;
}
.svyaz .chk input{width:1.05rem;height:1.05rem;flex:none;margin:.22rem 0 0;accent-color:var(--brand)}
.svyaz .chk a{color:var(--brand)}
.svyaz .btn{min-height:44px}
.svyaz .b2b-ok{margin:0;font-size:.9rem}
.svyaz .b2b-ok.is-ok{color:var(--good-ink);font-weight:500}
.svyaz .b2b-ok.is-bad{color:var(--brick);font-weight:500}

/* Вопрос вместо картинки с искажёнными буквами. Обычное поле,
   обычная подпись — его читает и скринридер, и человек, у
   которого в сети не грузятся чужие домены. */
.svyaz .kap input{max-width:14rem}
/* Вопрос — предложение, а не имя поля: КАПСОМ он читается как
   крик и хуже разбирается по слогам. Регистр возвращаем. */
.svyaz .kap > label{text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink)}

/* Поле-приманка.
   Не display:none и не hidden: и то и другое заполняльщики форм
   давно распознают и такие поля пропускают. Уводим за край —
   поле остаётся настоящим, но человеку не попадается ни глазом,
   ни табом, ни скринридером. */
.kap-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Рамка загрузки принимает файл — значит, должна показывать,
   что готова его принять. Без отклика перетаскивание выглядит
   так, будто файл не туда несут. */
.drop{cursor:pointer;transition:border-color .15s ease,background .15s ease}
.drop:hover,.drop:focus-visible{border-color:var(--brand);background:var(--brand-soft)}
.drop.is-over{border-color:var(--brand);background:var(--brand-soft);border-style:solid}

/* Тонкая шапка оформления: две ссылки вправо, без бургера
   и без гармошки — прятать там нечего. */
.top-thin{margin-left:auto}
.top-thin .top-act{display:flex;gap:1.2rem;align-items:center;font-size:.9rem}
@media (max-width:760px){
  .top-thin{display:block;margin-left:auto}
  .top-thin .top-act{flex-direction:row;gap:.9rem;font-size:.85rem;align-items:center}
  /* Общее мобильное правило (см. выше) превращает ссылки шапки
     в строки меню во всю ширину; тонкой шапке оформления это не
     нужно — там их две и они идут в строку. Но padding:0 отнимал
     и область нажатия: «Поддержка» была 89×25 при норме 24 и
     удобстве 44. Возвращаем высоту, не трогая строку. */
  .top-thin .top-act a{border-bottom:0;padding:.6rem 0;margin-block:-.6rem}
}

/* ============================================================
   СЧЁТЧИК ЗНАКОВ
   ------------------------------------------------------------
   Лежит здесь, а не в стилях карточки шаблона: поля с
   ограничением есть на карточке, в форме обратной связи и в окне
   правки текста в корзине. Раньше и стиль, и скрипт жили в
   product.css / product.js — то есть счётчик работал в одном
   месте из трёх.

   Стоит у правого края строки с подписью, а не внутри поля:
   внутри он наезжает на набранный текст ровно тогда, когда текст
   стал длинным, — то есть в тот момент, ради которого и нужен.
   ============================================================ */
.fld,.ed-f,.svyaz .fld{position:relative}
.fld-n{
  position:absolute;right:0;top:0;
  font-size:.72rem;line-height:1.2;color:var(--ink-3);
  font-variant-numeric:tabular-nums;pointer-events:none;
}
/* Упёрлись в предел — цвет и вес меняются оба: одного цвета
   недостаточно, восемь процентов мужчин его не отличат. */
.fld-n.is-full{color:var(--brick);font-weight:600}
/* Ещё не набрали минимум — это не ошибка, а подсказка. */
.fld-n.is-low{color:var(--ink-3);font-weight:500}



/* ============================================================
   ЦЕЛИ ДЛЯ ПАЛЬЦА НА ТЕЛЕФОНЕ
   ------------------------------------------------------------
   Обход сайта показал ряд ссылок высотой 15–25 точек: хлебные
   крошки («Главная» — 51×17), заголовки блоков каталога на
   главной («По возрасту» — 97×15), действия в шапке оформления
   («Поддержка» — 89×25), чипы фильтра (24 ровно).

   WCAG 2.2 AA просит 24×24 как минимум, и это именно минимум:
   палец взрослого человека накрывает около 45 точек. Промах по
   хлебной крошке — это уход на страницу, с которой человек
   только что пришёл, и он не всегда понимает, что случилось.

   Растёт область нажатия, а не буквы: padding увеличивает
   коробку, отрицательный margin возвращает строку на место.
   Внешне не меняется ничего.

   Внутри текста статей не трогаем: там ссылки идут в строке,
   и раздутая коробка ломала бы межстрочный интервал.
   ============================================================ */
@media (max-width:720px){
  /* Отступ вверх-вниз и такой же отрицательный внешний: цель
     растёт, строка не разъезжается. .55rem давало 36 точек при
     норме в 44 — добавляем ещё по четыре с каждой стороны. */
  .crumbs a,
  .crumbs span,
  .cat-block h3 a,
  .fl-head h3 a,
  .cookie p a,
  .top-act a{
    display:inline-block;
    padding-block:.85rem;
    margin-block:-.85rem;
  }

  /* Чипы фильтра были ровно 24 — по нижней границе нормы,
     потом 32. Теперь 44: столько накрывает подушечка пальца,
     и столько просит ТЗ. Чипов в ряду по восемь, промах уводит
     в соседний раздел. */
  .chips a,.chips button{min-height:44px;display:inline-flex;align-items:center}
}

/* Заголовок блока каталога наследует цвет от h3: раньше это
   стояло атрибутом style прямо в PHP — то есть оформление жило
   вне файлов оформления и не менялось вместе с темой. */
.cat-block h3 a{color:inherit}

/* Здесь лежала полоса оформления, переехавшая в меню-гармошку:
   на узком экране она уходила из-под логотипа в бургер, чтобы
   не занимать верх первого экрана.

   Переезд решал следствие. Причина была в том, что покупателю
   вообще незачем переключать оформление магазина, — и когда
   переключатель оформления убрали совсем, вместе с ним стал не
   нужен и его запасной адрес. Тема сайта живёт теперь в подвале
   и на первый экран не претендует ни на какой ширине. */