/*
  Дизайн-система Чудотеки.
  Все значения сняты измерением с их сайта, не на глаз:

    меню          #A8C07E, 18px, вес 700, капс, разрядка .5px
    розовая полоса #FDB2DB, высота ~214px
    название товара #6D6E71, 22px, вес 600
    подпись/баллы  #808285, 18px, вес 300
    фильтры слева  #6D6E71, 24px, вес 600
    фон страницы   #F7EBBE, содержимое на белом
    скругления     0px везде, теней нет ни одной

  Отсюда правила: белые полотна, крупный мягкий серый текст,
  зелёное капсовое меню, розовые акценты, работает фотография.
  Тёмной темы нет намеренно.
*/

:root{
  --cream:#F7EBBE;
  --paper:#FFFFFF;
  --wash:#FBFAF7;

  --ink:#4A4B4E;
  --title:#6D6E71;
  --muted:#808285;
  --faint:#A7A9AC;
  --line:#E8E8E6;

  --sage:#A8C07E;
  --sage-deep:#8FA968;
  --pink:#FDB2DB;
  --pink-deep:#E47CCD;
  /* Темнее на наведении. Взят затемнением их же розового,
     а не подобран: цвет действия должен оставаться тем же цветом. */
  --pink-dark:#C95FB2;
  /* Коралловый — ТОЛЬКО для беды: «занято», «просрочено», «ошибка»,
     «удалить». Цвет действия у нас розовый, как и был у них на прежнем сайте;
     оранжевого там нет вовсе.

     Это не про вкус. Пока коралловым были и кнопка «в набор», и надпись
     «сейчас занята», человек не мог отличить по цвету приглашение
     от отказа — оба звали одинаково тревожно. */
  --coral:#FF8562;
  --coral-deep:#F95D51;
  --purple:#A854A5;
  --blue:#8FC7E8;
  --yellow:#F7D774;
  /* Полосы во всю ширину — сняты с их страницы «О нас» */
  --band-lilac:#BA96C1;
  --band-sky:#B8D6EB;
  --ok:#7FAE64;

  /* СОСТОЯНИЕ «ЧЕЛОВЕК ОСТАВЛЯЕТ ВЕЩЬ У СЕБЯ» — клетка календаря дат.
     Значение то же, что у --band-lilac, а переменная своя НАРОЧНО:
     та снята с полос страницы «О нас» и живёт по законам оформления,
     эта отвечает за смысл на рабочем экране. Подкрутите полосу —
     календарь не поедет. Нашла вычитка. */
  --kept:#BA96C1;

  --gap:clamp(30px,4vw,56px);
}

/* --- шрифт ---

   Tilda Sans — та самая гарнитура, которой набран их прежний сайт.
   Пока у нас стоял системный, буквы на каждом компьютере выглядели
   по-своему, и это было самое крупное расхождение с их оформлением:
   шрифт виден в каждой строке, в отличие от цвета полосы.

   Файл лежит у нас, а не подгружается с чужого сервера. Правило простое:
   чужой запрос — это чужая скорость и чужая слежка за нашими
   посетителями. Лицензия и происхождение — в static/brand/fonts/.

   Один файл на все начертания: гарнитура переменная, ось веса 250–900.
   Поэтому font-weight работает плавно, а не выбирает из готовых файлов,
   и грузить приходится 83 килобайта вместо семи файлов подряд.

   swap: пока шрифт едет, текст показывается запасным. Иначе на плохой
   связи страница стоит пустой — а к нам приходят с телефона, часто
   с улицы. */
@font-face{
  font-family:"Tilda Sans";
  /* Адрес собирает Django, а не мы строкой. В бою у файлов статики
     к имени приписан отпечаток содержимого, и жёсткий путь просто
     не нашёлся бы — страница осталась бы на запасном шрифте, причём
     молча. Заодно так браузер получает право держать файл в кэше
     годами: сменится шрифт — сменится имя.

     Служебные вставки Django в этом файле НЕ прячутся в скобках
     косой черты и звёздочки: для него это не комментарий, а обычный
     текст, и вставку внутри него он честно выполняет. Я упомянул
     её здесь по имени — и все страницы разом перестали собираться. */
  src:url("/static/brand/fonts/TildaSans-VF.b2f3b3aa203b.woff2") format("woff2-variations");
  font-weight:250 900;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}

/* СПРЯТАННОЕ СПРЯТАНО. Одно правило на весь сайт.

   Браузер прячет hidden своим правилом, а оно слабее любого нашего.
   Достаточно задать кнопке свой display — и кнопка, помеченная в коде
   как скрытая, всё равно видна. Ловушка тихая: код читается правильно,
   а на экране обратное.

   Пример правила здесь не пишу нарочно: проверка цвета кнопки вырезает
   её правило из этого файла по началу строки, и пример в примечании
   вырезался вместо настоящего правила. Проверка честно упала.

   Наступали четыре раза — заплатки «.install[hidden]», «.pushbar[hidden]»
   и подобные разбросаны ниже. Пятый раз случился на телефонной
   заглушке: там кнопка «Установить» показывалась и на айфоне, где
   установить по кнопке нельзя вовсе, — то есть ровно на том экране,
   вся работа которого объяснить, куда нажимать. Нашлось проверкой
   в настоящем браузере. */
[hidden]{display:none !important}

html{color-scheme:light;
     /* МЕСТО ПОД ПОЛОСУ ПРОКРУТКИ ДЕРЖИМ ВСЕГДА.

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

        Место под полосу, отведённое заранее, убирает прыжок целиком.
        На телефоне полосы нет вовсе, и правило там ничего не делает.
        Старые браузеры его просто не знают — станет как было. */
     scrollbar-gutter:stable}
body{
  background:var(--paper);
  color:var(--ink);
  /* Запасные — на случай, если шрифт не доехал: сперва системный,
     потом что угодно без засечек. Пустой страницы не будет. */
  font-family:"Tilda Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* --- шапка: логотип по центру, под ним зелёное меню --- */

.header{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:100}
.header .container{display:flex;flex-direction:column;align-items:center;gap:10px;
                   padding-top:14px;padding-bottom:12px;position:relative}

/* Кнопки и учётная запись — ОДНОЙ строкой.
   Раньше каждая занимала свой этаж, и до начала страницы набиралось
   шесть рядов. Переносится только если не помещается. */
.header-actions{display:flex;align-items:center;justify-content:center;
                gap:12px;flex-wrap:wrap}

/* МЕНЮ РАБОЧИХ ЭКРАНОВ НА ТЕЛЕФОНЕ — одной строкой с прокруткой вбок.
   Разделов десять, и в перенос они занимали пять рядов: заголовок
   страницы начинался в пятистах пятидесяти точках от верха, то есть
   Наталия пролистывала шапку, чтобы увидеть, куда попала. Кнопки-меню
   у рабочих экранов нет — она есть только у витрины.
   Полосу прокрутки прячем: она тут только мешает, а то, что список
   тянется вбок, видно по обрезанному краю. */
@media (max-width:760px){
  .rabota .nav-links{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
                     width:100%;gap:18px;padding-bottom:4px;
                     scrollbar-width:none;-ms-overflow-style:none}
  .rabota .nav-links::-webkit-scrollbar{display:none}
  .rabota .nav-links a{white-space:nowrap;font-size:14px}
  .rabota .header .container{gap:8px;padding-top:10px;padding-bottom:8px}
  .rabota .logo img{height:44px}
}
/* --- КНОПКА-МЕНЮ НА РАБОЧИХ ЭКРАНАХ ---------------------------------

   ОСТОРОЖНО: правила витрины отсюда НЕ ОТКЛЮЧЕНЫ. Они написаны
   как «.has-burger …», без привязки к разделу, и на рабочих экранах
   тоже работают — отсюда логотип по центру и высота строки. Здешние
   правила лишь перекрывают их там, где расходятся. Ограничите те
   правила витриной — и рабочая шапка молча поедет. Нашла вычитка.

   Своё нужно потому, что шапки разные: там язык и корзина, здесь
   «Оборудование» и «Выдать комплект». Общее у них только поведение,
   и оно в общем куске _burger.js.html.

   Раньше на телефоне меню было полосой с прокруткой вбок: одиннадцать
   пунктов, из которых видно три с половиной. До «Клиентов» надо было
   догадаться доехать. */
@media (max-width:760px){
  .rabota.has-burger .header .container{flex-direction:row;flex-wrap:wrap;
      align-items:center;gap:10px}
  .rabota.has-burger .burger{display:flex;flex:none;order:1}
  .rabota.has-burger .logo{order:2;margin-left:auto;margin-right:auto}
  .rabota.has-burger .header-actions{order:3;width:100%;justify-content:center}
  /* Меню закрыто — его нет вовсе; раскрыто — столбиком во всю ширину,
     крупными строками: палец толще курсора. */
  .rabota.has-burger .nav-links{order:4;display:none}
  .rabota.has-burger.nav-open .nav-links{display:flex;flex-direction:column;
      width:100%;gap:0;overflow:visible;padding:6px 0 2px;
      border-top:1px solid var(--line)}
  .rabota.has-burger.nav-open .nav-links a{padding:14px 2px;font-size:17px;
      border-bottom:1px solid var(--line)}
  .rabota.has-burger.nav-open .nav-links a:last-child{border-bottom:none}
}

.container{max-width:1400px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}

/* Логотип — настоящий, забран с сайта Чудотеки: полка с игрушками и надпись. */
.logo{display:inline-block;line-height:0}
.logo img{height:96px;width:auto;max-width:100%}
.rabota .logo img,.header .logo img.small{height:56px}

.nav-links{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center;flex-wrap:wrap;justify-content:center}
.nav-links a{font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--sage)}
.nav-links a:hover{color:var(--sage-deep)}
.nav-links a.on{color:var(--pink-deep)}
.grow,.spacer{flex:1}
.badge-proto{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.header-right{position:absolute;right:clamp(16px,3vw,32px);top:22px;display:flex;align-items:center;gap:14px}
.consent{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--muted);
         cursor:pointer;line-height:1.45;max-width:56ch}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--sage)}
.consent a{color:var(--pink-deep);text-decoration:underline;text-underline-offset:3px}

/* Переключатель языка — заметная группа кнопок.
   Раньше это были три серые буквы без рамки: их принимали за подпись
   и не нажимали, из-за чего казалось, что языки вообще не работают. */
.langs{display:inline-flex;align-items:center;border:2px solid var(--line);
       border-radius:99px;overflow:hidden;background:var(--paper)}
.lang{background:none;border:0;padding:9px 13px;font-family:inherit;font-size:13px;
      font-weight:700;letter-spacing:.05em;color:var(--muted);cursor:pointer;
      transition:background .15s,color .15s;min-width:44px}
.lang + .lang{border-left:2px solid var(--line)}
.lang:hover{background:var(--wash);color:var(--title)}
.lang.on{background:var(--pink);color:#fff}
.lang.on:hover{background:var(--pink-deep);color:#fff}
.lang:focus-visible{outline:3px solid var(--sage);outline-offset:2px}

.whobox{display:inline-flex;align-items:center;gap:8px}
.signout{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
         color:var(--faint);border:2px solid var(--line);border-radius:99px;padding:7px 12px}
.signout:hover{border-color:var(--coral);color:var(--coral-deep)}

.whoami{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
        color:var(--sage);padding:13px 6px}
.whoami:hover{color:var(--sage-deep)}
/* Вход в верхней строке ТЕЛЕФОНА. На широком экране его не видно:
   там справа стоит имя человека и «Выйти», и второй двери в то же
   место не нужно. Показывается ниже, в правилах гамбургера. */
.toplogin{display:none}
.basketlink{display:inline-flex;align-items:center;gap:9px;width:auto;height:auto;padding:13px 22px;
            border:2px solid var(--line);background:var(--paper);color:var(--title);
            font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:99px}
/* На телефоне счётчик набора мельче: в одной строке с логотипом
   он перетягивал на себя внимание, а нужен реже, чем каталог.
   Просьба Наталии. */
@media (max-width:900px){
  .basketlink{padding:9px 15px;font-size:11.5px;gap:7px}
  .basketlink .n{min-width:19px;height:19px;font-size:11px;padding:0 5px}
}
.basketlink:hover{border-color:var(--pink);color:var(--pink-deep)}
.basketlink .n{background:var(--pink-deep);color:#fff;min-width:22px;height:22px;border-radius:99px;
               display:inline-grid;place-items:center;font-size:12px;font-weight:700;padding:0 6px}

/* Набор, догоняющий прокрутку.

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

   Тень и белый фон обязательны: она висит поверх фотографий каталога,
   и на светлом снимке кнопка без тени пропадает. */
.basketfloat{position:fixed;z-index:200;top:clamp(12px,2vw,20px);right:clamp(12px,3vw,32px);
             box-shadow:0 6px 20px rgba(74,75,78,.16);border-color:var(--line);
             opacity:0;visibility:hidden;transform:translateY(-14px) scale(.96);
             transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.3,1),visibility .22s}
.basketfloat.on{opacity:1;visibility:visible;transform:none}

@media (prefers-reduced-motion:reduce){
  .basketfloat{transition:opacity .01s;transform:none}
}

/* --- розовая полоса --- */

.band{background:var(--pink);padding:clamp(38px,6vw,62px) clamp(16px,3vw,32px);text-align:center}
/* Надпись на розовой полосе. Значения сняты измерением с их сайта
   (их прежний сайт, окно 1280): 30px, вес 300, межстрочный 1.45,
   разрядки нет. У нас было 38px весом 700 — отсюда ощущение «слишком
   крупно и жирно». На узком экране уменьшаем, но выше 30px не поднимаем. */
.band h1,.band .band-title{color:#fff;font-size:clamp(21px,2.6vw,30px);font-weight:300;
                           letter-spacing:normal;line-height:1.45;text-transform:uppercase}
.band p{color:#fff;font-size:clamp(16px,1.7vw,20px);font-weight:300;margin-top:10px}

/* --- страницы разделов: полосы во всю ширину, как у них --- */

.strip{padding:clamp(46px,7vw,90px) 0;margin:0}
.strip > .inner{max-width:1000px;margin:0 auto;padding:0 clamp(16px,3vw,32px);
                display:flex;flex-direction:column;gap:20px}
/* Заголовки полос БЕЗ принудительных заглавных.

   У них капсом набраны только те, что автор так и написал — MEMBERSHIPS,
   CONTACTS. «What is Čudoteka?» и «Why Čudoteka?» стоят обычными буквами:
   text-transform у них none.

   Мы же переводили в капс всё подряд, и русские заголовки начинали
   кричать: «ЧТО ТАКОЕ ЧУДОТЕКА», «УСТАЛИ ОТ БЕСПОРЯДКА». По-русски это
   читается хуже, чем по-английски: слова длиннее, а прописные все
   одинаковой высоты, и глазу не за что зацепиться.

   Кегль тоже подтянут к их числам: 42px на широком экране вместо 38. */
.strip h2{font-size:clamp(25px,3.4vw,42px);font-weight:600;letter-spacing:normal}
.strip p{font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.strip ul{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:10px;
          font-size:clamp(17px,1.6vw,20px)}
.strip.white{background:var(--paper)}
.strip.cream{background:var(--cream)}
.strip.lilac{background:var(--band-lilac);color:#fff}
.strip.sky{background:var(--band-sky);color:#2B3A44}
.strip.pink{background:var(--pink);color:#fff}
.strip.lilac h2,.strip.pink h2{color:#fff}
.strip.sky h2{color:#2B3A44}
.strip.lilac p,.strip.pink p,.strip.lilac li,.strip.pink li{color:#fff}
.strip.sky p,.strip.sky li{color:#2B3A44}

.hero-photo{position:relative;min-height:clamp(280px,42vw,520px);display:grid;place-items:center;
            text-align:center;background-size:cover;background-position:center;padding:40px 24px}
.hero-photo::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.hero-photo .inner{position:relative;max-width:760px}
/* Заголовок обложки — их значения: 52px, вес 600, без капса. */
.hero-photo h1{color:#fff;font-size:clamp(30px,4.4vw,52px);font-weight:600;
               letter-spacing:normal;line-height:1.23;
               text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-photo p{color:#fff;font-size:clamp(17px,1.8vw,21px);margin-top:14px;
              text-shadow:0 2px 14px rgba(0,0,0,.35)}

.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
         gap:clamp(28px,4vw,56px);max-width:1150px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.reason{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.reason .ico{width:60px;height:60px;color:var(--pink-deep)}
.reason .ico img,.reason .ico svg{width:100%;height:100%;display:block}
.reason h3{font-size:20px;font-weight:600;letter-spacing:normal;color:var(--title)}
.reason p{font-size:16px;color:var(--muted);line-height:1.6}
.strip.lilac .reason h3,.strip.pink .reason h3{color:#fff}
.strip.lilac .reason p,.strip.pink .reason p{color:rgba(255,255,255,.92)}
.strip.lilac .reason .ico,.strip.pink .reason .ico{color:#fff}

/* --- шаги со стрелками ---

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

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

   Стрелку экранная читалка произносит — «стрелка вправо». Значок
   из ::after попадает в дерево доступности, вопреки расхожему мнению.
   Поэтому content пишем дважды: во втором варианте после косой черты
   стоит пустая замена, она глушит озвучку. Браузеры, которые второй
   строки не понимают, остаются на первой, и стрелка видна всегда.
   Порядок шагов слепой человек в любом случае берёт из номера —
   он стоит текстом. */

.steps{display:grid;grid-template-columns:repeat(3,1fr);
       gap:clamp(18px,2.5vw,30px);max-width:1100px;margin:0 auto;
       padding:0 clamp(16px,3vw,32px);align-items:start}
.step{display:flex;flex-direction:column;gap:10px;position:relative;text-align:center;
      align-items:center}
.step .num{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
           background:var(--pink);color:#fff;font-size:22px;font-weight:700;flex:0 0 auto}
.step h3{font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.step p{font-size:16px;color:var(--muted);line-height:1.6}

/* Стрелка между шагами. Ставим её после каждого шага, кроме последнего. */
.step:not(:last-child)::after{content:"→";content:"→" / "";position:absolute;top:14px;right:calc(-1 * clamp(18px,2.5vw,30px) / 2);
                              transform:translateX(50%);font-size:26px;color:var(--pink-deep);
                              line-height:1;pointer-events:none}

.strip.lilac .step h3,.strip.pink .step h3,.strip.lilac .step p,.strip.pink .step p{color:#fff}
.strip.lilac .step .num,.strip.pink .step .num{background:#fff;color:var(--band-lilac)}
.strip.lilac .step:not(:last-child)::after,.strip.pink .step:not(:last-child)::after{color:#fff}
.strip.sky .step h3{color:#2B3A44}
.strip.sky .step p{color:#41545F}

/* Один столбик — стрелка смотрит вниз, между шагами, а не сбоку.

   И текст с середины уезжает к левому краю. В три столбика строка
   короткая, и середина читается; в один она во всю ширину телефона,
   и у абзаца рвутся ОБА края разом — глазу не за что зацепиться,
   каждая следующая строка начинается в новом месте. Наталия про это
   и написала: «выравнивание тарифов по центру, надо по левому краю».
   Кружок с номером оставляем на месте: он метка, а не текст.

   Потом Наталия 18-10 (4157), обведя кружки и заголовки шагов на
   скриншоте: «здесь тоже сделай выравнивание по центру». Кружок и
   заголовок — по центру, абзац под ними — по левому краю, как она
   просила раньше: обвела она только эти два. Стрелка вниз стоит
   под кружком, поэтому уехала в середину вместе с ним. */
@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:34px}
  .step{text-align:left;align-items:flex-start}
  .step .num{align-self:center}
  .step h3{align-self:stretch;text-align:center}
  .step:not(:last-child)::after{content:"↓";content:"↓" / "";top:auto;bottom:-30px;right:auto;left:50%;transform:translateX(-50%)}
}

/* --- итоговая цифра ---
   Крупное число, ради которого человек и читал полосу. */
.bignum{font-size:clamp(38px,7vw,74px);font-weight:800;line-height:1;color:var(--pink-deep);
        letter-spacing:-.02em}
.strip.lilac .bignum,.strip.pink .bignum{color:#fff}

/* Страницы разделов идут полосами во всю ширину, поэтому обычные поля main мешают */
body.stripped main{max-width:none;padding:0;gap:0}

main{max-width:1400px;margin:0 auto;padding:var(--gap) clamp(16px,3vw,32px) 96px;
     display:flex;flex-direction:column;gap:var(--gap)}

/* --- типографика --- */

h1,.title{font-size:clamp(28px,3.6vw,44px);font-weight:600;color:var(--title);
          letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
h2,.subtitle{font-size:clamp(21px,2.2vw,28px);font-weight:600;color:var(--title);line-height:1.25}
h3{font-size:19px;font-weight:600;color:var(--title);line-height:1.3}
p{margin:0}
.lede{font-size:clamp(17px,1.5vw,20px);font-weight:300;color:var(--muted);max-width:62ch;line-height:1.55}
.sub{color:var(--muted);font-size:15px}
/* СПИСОК ТАРИФОВ — ОДНОЙ СЕТКОЙ.

   Имена слева, цены одной колонкой слева же. Раньше каждая строка
   растягивалась по краям, цены прижимались вправо и начинались
   у каждого тарифа со своего места: рваный левый край на трёх
   строках подряд.

   align-items:baseline, а не center: у цен две строки, и по центру
   название уезжало бы в середину между ними. */
.tiers{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;
  align-items:baseline;margin-top:12px}
.tiers .sub{text-align:left}

.klabel,.k{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
           text-transform:uppercase;color:var(--faint)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
b,strong{font-weight:600;color:var(--title)}

/* --- поверхности --- */

.card{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,2.4vw,32px);
      display:flex;flex-direction:column;gap:15px}
.empty{text-align:center;color:var(--muted);padding:70px 24px}

/* Карточки тарифов. Кнопка прижата к низу, чтобы её не двигало
   описание разной длины.

   Колонка не шире 440: тариф теперь один, и растянутая на всю полосу
   карточка читалась бы строкой в тысячу пикселей. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,440px));
       justify-content:center;gap:18px;margin-top:8px}
.plan{align-items:flex-start;gap:14px}

/* --- тарифы коробками, блок «О нас» ---

   Перенесено с их прежнего сайта. Значения сняты измерением с их блока
   (их прежняя страница «О нас», окно 1280):

     карточка                  360×400
     картинка                  ФОН карточки, cover, по центру
     подписи                   поверх картинки сверху, поля 20px 40px
     название                  #8D6594
     цена                      #BA96C1
     кнопка                    126×45, фон #8D6594, белая, 14px,
                               скругление 30px, поля 12.7px 30px
     кнопка до наведения       сдвинута на 40px вниз, прозрачная
     увеличение картинки       1.05, плавность 0.25s ease-in-out

   ГЛАВНОЕ, что я в первый раз понял неверно: картинка у них не стоит
   под текстом отдельным блоком, а лежит ФОНОМ всей карточки, и подписи
   написаны поверх неё. Поэтому между ценой и коробкой нет никакого
   зазора — его физически неоткуда взять. У меня же картинка была
   отдельным блоком под текстом, и между ними зияла пустота, которую
   Юрий и заметил первым делом.

   Отсюда же и вертолёт у SUPER, стоящий слева от названия: он часть
   картинки, а название лежит поверх. Совпадение не случайное — так
   и задумано.

   object-fit:contain, а не cover, при точном соотношении сторон
   карточки: у них cover обрезает коробку снизу, а Наталия просила
   картинки не резать. Соотношение карточки взято равным соотношению
   наших картинок — тогда contain заполняет её целиком и обрезать
   нечего вовсе. */

.boxes{display:grid;grid-template-columns:repeat(3,1fr);
       gap:clamp(16px,2.4vw,32px);margin-top:10px}

.box{position:relative;display:block;color:inherit;text-decoration:none;
     aspect-ratio:640 / 841;overflow:hidden;background:#FAF8F3}

/* Картинка заполняет карточку целиком и лежит под подписями.

   Растёт она НЕ вверх от натуральной величины, а от чуть уменьшенной
   до натуральной: покой 0.95, наведение 1.

   Так и было сперва — покой 1, наведение 1.05, — и коробка при
   наведении упиралась в нижний край карточки и подрезалась. У них
   это незаметно, потому что картинка и без того обрезана по краям,
   а у нас она вписана целиком, и упереться ей есть куда.

   Разница на глаз та же самая: пять процентов роста. Разница на деле —
   резать больше нечего никогда. */
.box-shot{position:absolute;inset:0}
.box-shot img{width:100%;height:100%;object-fit:contain;display:block;
              transform:scale(.95);
              transition:transform .25s ease-in-out}
.box:hover .box-shot img,
.box:focus-visible .box-shot img{transform:scale(1)}

/* Подписи поверх картинки, прижаты к верху — как у них. */
.box-text{position:absolute;left:0;right:0;top:0;text-align:center;
          padding:clamp(14px,2.4vw,26px) clamp(12px,3vw,34px) 0}
.box-name{display:block;font-size:clamp(22px,2.6vw,32px);font-weight:700;
          line-height:1.1;color:#8D6594;letter-spacing:.01em;text-transform:uppercase}
.box-price{display:block;margin-top:4px;font-size:clamp(14px,1.5vw,19px);
           font-weight:500;color:var(--band-lilac)}

/* Кнопка выезжает снизу при наведении. До того сдвинута вниз
   и прозрачна — ровно как у них. */
.box-more{position:absolute;left:50%;bottom:clamp(14px,3vw,30px);
          background:#8D6594;color:#fff;border-radius:30px;
          padding:13px 30px;font-size:14px;font-weight:600;white-space:nowrap;
          transform:translate(-50%,40px);opacity:0;
          transition:transform .2s ease-in-out,opacity .2s ease-in-out}
.box:hover .box-more,.box:focus-visible .box-more{transform:translate(-50%,0);opacity:1}

/* На телефоне наведения нет вовсе, и кнопка не появилась бы никогда.
   Показываем сразу: пусть будет видно, что карточка куда-то ведёт.
   На прежнем сайте на телефоне её тоже не видно, но там и аудитория была
   другая — у нас почти все приходят с телефона. */
@media (hover:none){
  .box-more{transform:translate(-50%,0);opacity:1}
}

/* Увеличение НЕ отключается при системной настройке «меньше движения».

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

   В Windows «эффекты анимации» выключены у множества людей, часто
   не по своему выбору. Юрий на своей машине увидел ровно это: на прежнем сайте
   картинка растёт, у нас нет, — и решил, что мы недоделали. Тот сайт эту
   настройку не слушает вовсе.

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

   Плавность оставляем и в этом случае: мгновенный скачок резче
   и неприятнее, чем спокойный переход. */

/* На телефоне три коробки в ряд превращаются в три марки — столбик.
   Ширину придерживаем, иначе одна коробка занимает весь экран.

   width:100% обязателен, и это не перестраховка. Внутри карточки ВСЁ
   лежит слоями поверх друг друга, то есть в потоке нет ничего, что
   задавало бы ей ширину. В ряду её растягивала сетка; стоило прижать
   её полями (margin:0 auto), растягивание отключалось — и карточка
   схлопывалась в ноль. На широком экране всё выглядело правильно,
   на телефоне блок пропадал целиком. */
@media (max-width:620px){
  .boxes{grid-template-columns:1fr;gap:26px;justify-items:center}
  .box{width:100%;max-width:340px}
}

/* Акварельный рисунок в карточке тарифа.

   Высота задана, ширина свободна: слоник, самолёт и кубики разной
   ширины, и по ширине ряд бы перекосило. contain, а не cover —
   у Наталии это главное условие: рисунки не обрезать и не тянуть.

   Фон рисунка — бумага её слайдов, почти белый. Отдельно не красим:
   карточка и так белая, и стык не виден. */
.plan-art{width:100%;max-width:250px;height:clamp(104px,14vw,150px);object-fit:contain;
          margin:0 auto 4px;mix-blend-mode:multiply}

.plan .price-main{font-size:1.15rem;font-weight:800;color:#8D6594;margin-top:2px}
.plan .price-main .per{font-size:.9rem;color:var(--muted);font-weight:600}
/* Три крупных преимущества внутри карточки — раскладка Наталии 25-09:
   «самая привлекательная часть новой системы — две свободные замены —
   вообще не видна». Цвет цифр — тот же, что у цены. */
.plan .perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.plan .perk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
            padding:12px 6px;background:var(--wash);border:1px solid var(--line);text-align:center}
.plan .perk b{font-size:1rem;font-weight:800;color:#8D6594;line-height:1.15}
.plan .perk span{font-size:.8rem;color:var(--muted);line-height:1.2}
.plan .flag{white-space:normal;letter-spacing:.04em}
.plan .btn{margin-top:auto}
/* По центру карточки: название с ценой и кнопка (Наталия 18-10, 4152:
   «поместить по центру выделенный текст»). Карточка — колонка с
   align-items:flex-start, поэтому центрирует сам элемент, а не его
   содержимое: align-self плюс text-align. */
.plan .plan-head{align-self:center;text-align:center}
.plan .btn{align-self:center}
.plan .plan-road{width:100%;text-align:center;font-size:.92rem;color:var(--muted)}
.plan .plan-road b{font-weight:700;color:var(--title)}

/* --- кнопки: скруглённые пилюли, как корзина у них --- */

/* Кнопка — их. Значения сняты с кнопки «book» в карточке товара
   на прежнем сайте, а не подобраны:

     фон           #E47CCD (наш pink-deep, совпал точно)
     скругление    6px — прямоугольник со скруглёнными углами
     кегль         14px, вес 600, обычными буквами
     поля          12.7px 30px
     переход       0.2s ease-in-out по цвету фона

   Было у нас: коралловая таблетка (скругление 99px), капсом,
   с разрядкой. То есть другая форма, другой цвет и другой набор —
   отсюда и ощущение, что кнопки «не те».

   Розовый вместо кораллового: коралл остался для опасного и для
   предупреждений, розовый стал цветом действия. Так у них. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     padding:13px 30px;border:2px solid var(--pink-deep);background:var(--pink-deep);color:#fff;
     font-family:inherit;font-size:14px;font-weight:600;letter-spacing:normal;
     border-radius:6px;cursor:pointer;transition:background .2s ease-in-out,
     border-color .2s ease-in-out,color .2s ease-in-out}
.btn:hover{background:var(--pink-dark);border-color:var(--pink-dark);color:#fff}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn-primary{background:var(--pink-deep);color:#fff}
.btn-outline,.btn.ghost{background:transparent;color:var(--title);border-color:var(--line)}
.btn-outline:hover,.btn.ghost:hover{background:transparent;border-color:var(--sage);color:var(--sage-deep)}
/* «Поделиться подборкой». Сперва она была .ghost — то есть серым
   текстом в бледной рамке, самым тихим, что есть на странице.
   Юрий зашёл на сайт, ЗНАЯ, что кнопка там, и не нашёл её.
   Значит тихая кнопка равна отсутствующей.

   Шалфейный, а не розовый: розовый у нас цвет главного действия,
   и рядом с «Найти» две розовые кнопки спорили бы за глаз. */
.btn.share{background:transparent;color:var(--sage-deep);border-color:var(--sage)}
.btn.share:hover{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.btn.share svg{width:16px;height:16px;flex:none}
.btn.danger{background:transparent;color:var(--coral-deep);border-color:var(--coral-deep)}
.btn.danger:hover{background:var(--coral-deep);color:#fff}
.btn-block{width:100%}

/* Кнопка «Поделиться» со значком. Значок ровняем по слову рядом:
   без этого он садится на базовую линию текста и проваливается вниз.
   Стоит здесь, у остальных кнопок, а не в разделе заглушки: этот файл
   правит Наталия, и искать кнопку среди заглушек она не станет. */
.share-go{gap:8px}
.share-icon{flex:none;display:block}

/* Полоса с остатком баллов — липнет к верху, пока листают каталог.
   Наша палитра: тёмный текст на кремовом, розовое действие,
   коралловый ТОЛЬКО на перебор — он у нас отведён под беду. */
.pointsbar{position:sticky;top:0;z-index:8;display:flex;align-items:center;
           gap:18px;flex-wrap:wrap;margin:0 0 4px;padding:11px 18px;
           border:1px solid var(--line);border-radius:10px;
           background:var(--cream);color:var(--ink);
           box-shadow:0 1px 0 rgba(74,75,78,.04)}
.pointsbar.перебор{border-color:var(--coral-deep);background:#FFF3EF}
.pb-подпись{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
            color:var(--muted);font-weight:500}
.pb-тариф{display:flex;align-items:center;gap:9px;margin:0}
.pb-тариф select{font-family:inherit;font-size:14px;font-weight:600;
                 color:var(--title);background:var(--paper);
                 border:1px solid var(--line);border-radius:7px;padding:6px 10px}
.pb-числа{display:flex;align-items:center;gap:20px}
.pb-пара{display:flex;align-items:baseline;gap:7px}
.pb-пара b{font-size:17px;font-weight:600;color:var(--title);
           font-variant-numeric:tabular-nums}
.pointsbar.перебор .pb-пара b{color:var(--coral-deep)}
.pb-совет{flex:1 1 180px;font-size:13.5px;color:var(--coral-deep);
          line-height:1.35}
.pb-совет:empty{display:none}
.pb-набор{margin-left:auto;padding:9px 20px;font-size:14px}
/* На телефоне полоса не липнет: там она съедала бы треть экрана,
   а каталог и так листается коротко. */
@media (max-width:640px){
  .pointsbar{position:static;gap:12px;padding:10px 13px}
  .pb-числа{gap:14px}
  .pb-набор{margin-left:0;width:100%;text-align:center}
}

/* Полоска помощника по подбору — над сеткой каталога.
   Мягкая, не кричит: это предложение, а не призыв. Сама полоска —
   ссылка целиком, чтобы попадать по ней пальцем, а не по кнопке. */
/* ВЫДЕЛЕНА — Наталия 29-09, со скриншотом: «выдели эти 2 окна
   визуально» (помощник и кнопка «Фильтры»). Бледно-серая полоска
   сливалась с фоном страницы, и её пролистывали, не заметив. */
.helper{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
        padding:16px 22px;border:2px solid var(--pink);border-radius:10px;
        background:#FFF3FA;color:var(--ink);text-decoration:none;
        transition:border-color .2s ease-in-out}
.helper:hover{border-color:var(--pink-deep)}
.helper-words{flex:1 1 260px;font-size:14px;line-height:1.5;color:var(--muted)}
.helper-words b{display:block;color:var(--title);font-size:15px;margin-bottom:2px}
/* На телефоне кнопка уезжает под текст и растягивается: тыкать
   в узкую кнопку у края экрана неудобно. */
@media (max-width:560px){
  .helper{gap:12px}
  .helper .btn{width:100%}
}

/* Строка со списком экземпляров: раскрывается под игрушкой, во всю
   ширину таблицы. Внутри узкой ячейки список переносился по словам
   и был нечитаем. */
.copies-row > td{border-top:0}
.copies-toggle.on{border-color:var(--sage);color:var(--sage-deep)}

/* «3/5» в кнопке набора: сколько баллов занято из тарифа. Отдельно
   от числа игрушек — это разные вещи, и путать их нельзя. */
.pts-of{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0}
.basketlink.over .n{background:var(--coral-deep)}
.basketlink.over .pts-of{color:var(--coral-deep)}

/* Строка-ссылка: вся строка ведёт внутрь. Курсор и подсветка нужны,
   иначе не догадаться, что по ней можно нажать. */
/* Палец над всем, что ведёт внутрь, — и над строкой таблицы,
   и над печатной карточкой клиента. Подсветка только у строк:
   у карточки своя рамка (линия реза), и красить её фоном нельзя. */
.clickable{cursor:pointer}
tr.clickable:hover{background:var(--wash)}

/* Ссылка внутри таблицы. В оформлении сайта все ссылки без цвета
   и подчёркивания — это верно для полос и меню, но в таблице имя
   клиента выглядело обычным текстом, и на него никто не нажимал. */
.rowlink{color:var(--sage-deep);text-decoration:underline;
         text-decoration-color:var(--line);text-underline-offset:4px}
.rowlink:hover{color:var(--pink-deep);text-decoration-color:currentColor}

/* Крестик «убрать из заявки» в строке таблицы. Приглушённый:
   он не должен спорить с галочкой «выдать», ради которой в эту
   таблицу и смотрят. Краснеет только под курсором. */
.убрать-строку{border:0;background:none;cursor:pointer;line-height:1;
  font-size:19px;color:var(--faint);padding:4px 8px;border-radius:8px}
.убрать-строку:hover{color:var(--coral-deep);background:var(--wash)}

/* РАКУРСЫ ИГРУШКИ. Снимков у вещи бывает несколько, а видно было
   только один: 39 дополнительных лежали в базе непоказанными. */
.rakursy{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rakursy button{padding:0;border:2px solid transparent;border-radius:9px;
  background:none;cursor:pointer;line-height:0;transition:border-color .15s}
.rakursy button:hover{border-color:var(--line)}
.rakursy button[aria-current="true"]{border-color:var(--pink)}
.rakursy img{width:64px;height:64px;object-fit:cover;border-radius:7px;
  display:block}
@media (max-width:520px){ .rakursy img{width:56px;height:56px} }

/* Карусель снимков — как на их прежнем сайте.

   Размеры сняты измерением с их страницы, не на глаз: слайд 860×550,
   круглые стрелки 40px цвета #E8E8E8, белое полотно, точки снизу.

   Без JavaScript это обычная полоса с прокруткой: снимки видны все,
   листаются пальцем. Скрипт только добавляет стрелки и точки. */
.slider{position:relative;max-width:1200px;margin:0 auto;
        padding:0 clamp(16px,3vw,32px)}
.slider-window{overflow:hidden}
.slider-track{display:flex;gap:0;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.slide{flex:0 0 100%;display:flex;justify-content:center;align-items:center}
/* height:auto, а не жёсткая высота с обрезкой. Переведённые слайды
   квадратные, английские — 5:4, и обрезка по общей высоте срезала бы
   текст сверху или снизу. Полоса подстраивается под самый высокий. */
.slide > img{width:100%;max-width:860px;height:auto;border-radius:2px}

/* Подпись под снимком: словами то, что на картинке написано
   по-английски. Только для русской и сербской страниц. */
.slider-captions{max-width:860px;margin:16px auto 0;text-align:center;
                 color:var(--muted);font-size:clamp(15px,1.7vw,18px);
                 padding:0 clamp(16px,3vw,32px)}

/* Слайд-пример: как считаются баллы. Цвета взяты с их картинок —
   сиреневый заголовок, розовая сумма. */
.example{width:100%;max-width:860px;min-height:clamp(300px,44vw,520px);
         display:flex;flex-direction:column;align-items:center;
         justify-content:center;gap:14px;text-align:center;padding:10px}
.example-lead{color:var(--band-lilac);font-size:clamp(22px,3.4vw,40px);
              font-weight:700;line-height:1.15}
.example-sub{color:var(--pink-deep);font-size:clamp(16px,2.1vw,26px);
             font-weight:700;line-height:1.3;max-width:22ch}
.example-arrow{color:var(--pink);font-size:clamp(34px,5vw,62px);line-height:1}
.example-total{color:var(--pink-deep);font-size:clamp(24px,3.6vw,44px);
               font-weight:700}
.example-toys{display:flex;align-items:center;justify-content:center;
              gap:clamp(6px,1.4vw,18px);flex-wrap:wrap}
.example-plus{color:var(--pink);font-size:clamp(20px,2.6vw,32px);font-weight:700}
.example-toy{display:flex;flex-direction:column;align-items:center;gap:4px;
             width:clamp(88px,17vw,190px)}
.example-toy img{width:100%;height:clamp(88px,17vw,190px);object-fit:contain}
.example-toy .ph{width:100%;height:clamp(88px,17vw,190px);background:var(--wash)}
.example-points{color:var(--pink-deep);font-size:clamp(15px,1.9vw,24px);font-weight:700}
.example-name{color:var(--muted);font-size:clamp(11px,1.2vw,14px);line-height:1.25}

/* Пока скрипт не отработал — обычная прокрутка, чтобы снимки
   не оказались недоступны вовсе. */
.slider:not(.ready) .slider-window{overflow-x:auto;scroll-snap-type:x mandatory}
.slider:not(.ready) .slide{scroll-snap-align:center}
.slider:not(.ready) .slider-arrow,
.slider:not(.ready) .slider-dots{display:none}

.slider-arrow{position:absolute;top:calc(50% - 20px);z-index:5;
              width:40px;height:40px;border:0;border-radius:100px;
              background:#E8E8E8;color:#000;cursor:pointer;
              display:flex;align-items:center;justify-content:center;
              transition:background .15s}
.slider-arrow:hover{background:#D8D8D8}
.slider-arrow:disabled{opacity:.35;cursor:default}
.slider-prev{left:0}
.slider-next{right:0}

.slider-dots{display:flex;gap:9px;justify-content:center;margin-top:18px}
.slider-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;
                    background:#D8D8D8;cursor:pointer;transition:background .15s}
.slider-dots button[aria-selected="true"]{background:var(--muted)}

@media (max-width:760px){
  .slider{padding:0 8px}
  .slider-arrow{background:rgba(232,232,232,.9)}
}
@media (prefers-reduced-motion:reduce){
  .slider-track{transition:none}
}

/* Появление при прокрутке.

   Наталия сказала точно: «не как в PowerPoint, чтобы отсюда вылетало
   и сюда залетало — но какой-то минимум хочется, не просто сухой текст».

   Отсюда правила: только вверх и только чуть-чуть, 14 пикселей.
   Ничего не летает поперёк, ничего не крутится, ничего не появляется
   дважды. Человек, который просто листает, не должен ничего заметить —
   он должен только почувствовать, что страница живая.

   Кто выключил анимации в системе, не увидит ничего: для него всё
   на месте с самого начала. */
.reveal{opacity:0;transform:translateY(14px);
        transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.reveal.seen{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.07s}
.reveal:nth-child(3){transition-delay:.14s}
.reveal:nth-child(4){transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Без скриптов появления не происходит вовсе: содержимое видно сразу.
   Иначе страница без JavaScript осталась бы пустой. */
html:not(.js) .reveal{opacity:1;transform:none}
/* На печать выводим всё: до непролистанных полос печать не «долистывает»,
   и на бумаге они вышли бы пустыми цветными прямоугольниками. */
@media print{.reveal{opacity:1;transform:none}}

/* --- метки --- */

.badge,.pill{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.07em;
             text-transform:uppercase;white-space:nowrap}
.pill.free,.pill.ok,.badge-free{color:var(--ok)}
.pill.busy,.pill.late,.badge-busy{color:var(--coral-deep)}
.pill.soon{color:var(--purple)}
.pts,.badge-points{display:inline-block;font-size:17px;font-weight:300;color:var(--muted);
                   letter-spacing:.02em;text-transform:uppercase}

/* --- каталог: фильтры слева, сетка справа --- */

.catalog{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(26px,3.4vw,56px);align-items:start}
.sidebar{display:flex;flex-direction:column;gap:11px}
.sidebar > a{font-size:23px;font-weight:600;color:var(--title);line-height:1.3}
.sidebar > a:hover{color:var(--pink-deep)}
.sidebar > a.on{color:var(--pink-deep)}
.sidebar .group{font-size:13px;font-weight:700;color:var(--faint);margin-top:22px;margin-bottom:2px}
.sidebar .checks{display:flex;flex-direction:column;gap:9px}
.sidebar .check{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:300;
                color:var(--muted);cursor:pointer;line-height:1.3}
.sidebar .check:hover{color:var(--title)}
.sidebar .check input{width:16px;height:16px;flex:none;accent-color:var(--sage);margin:0}
.sidebar .check .cnt{margin-left:auto;font-size:13px;color:var(--faint)}
.sidebar .showall{align-self:flex-start;margin-top:4px;background:none;border:0;padding:0;
                  font-family:inherit;font-size:14px;font-weight:600;color:var(--sage);cursor:pointer}
.sidebar .showall:hover{color:var(--sage-deep)}

.searchbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.searchbar input[type=text]{flex:1;min-width:200px;max-width:340px}

/* «Поделиться подборкой» НА ТЕЛЕФОНЕ — во всю ширину.

   Юрий: «кнопку поделиться ещё надо в мобильной версии сделать».
   Она там БЫЛА, и в этом вся беда: строка поиска на 375 пикселях
   разваливается на четыре ряда — поле с «Найти», «Сбросить»,
   «Найдено: 7», и только потом кнопка. Двести пикселей бледного
   шалфея в самом низу стопки читаются как подпись, а не как кнопка.
   
   Во всю ширину — потому что на телефоне это единственный способ
   сказать «сюда можно нажать». Заодно убираем распорку: она пустая
   и на узком экране только ломает ряды. */
@media (max-width:900px){
  .searchbar .grow{display:none}
  /* ОБЁРТКА ИСЧЕЗАЕТ ИЗ РАСКЛАДКИ: кнопку обернули в span,
     чтобы обновлять вместе со списком, и обёртка стала флекс-элементом
     вместо самой кнопки — на телефоне кнопка снова вышла короткой,
     хвостом за «Найдено: N». Нашла вычитка Fable. */
  #подборка-место{display:contents}
  .searchbar #поделиться-подборкой{flex:1 0 100%;margin-top:2px}
  .searchbar #поделиться-подборкой .btn{width:100%}
}

.tile .longterm{font-size:15px;font-weight:300;color:var(--muted);line-height:1.5;margin-top:6px}
/* Подпись «сейчас занята · вернут 20.09» над кнопкой в плитке.
   Коралловый здесь по правилу: он у нас ТОЛЬКО для беды — занято,
   просрочено, ошибка. Цвет действия розовый, и путать их нельзя. */
.tile .oos{font-size:14px;font-weight:300;color:var(--coral-deep);
           line-height:1.4;text-align:center;margin-top:6px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(22px,2.6vw,42px)}
.tile{display:flex;flex-direction:column;background:transparent;border:0;color:inherit}
/* СВОЯ РАМКА ВЫДЕЛЕНИЯ, а не браузерная.

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

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

   focus-visible, а не focus: по щелчку мышью рамки не будет,
   она нужна только тому, кто пришёл клавишей. */
.tile a:focus-visible{outline:3px solid var(--sage);outline-offset:3px;
    border-radius:4px}
/* Фотография показывается целиком, а не обрезается по квадрату.

   Наталия сказала прямо: «он косячит, то убирает какие-то детали» —
   это и есть обрезка. Снимки у нас разной формы: часть студийная
   квадратная, часть снята дома в полный рост. При обрезке по квадрату
   у высокой коляски пропадали колёса, а у длинного комплекса — половина
   дуги, и по плитке было не понять, что берёшь.

   contain вместо cover: картинка вписывается целиком, пропорции
   не трогаются. Поля добираются белым — тем же, что фон страницы,
   поэтому их не видно. Это и был её довод за белый фон: тогда новую
   игрушку можно просто сфотографировать и залить, ничего не подгоняя. */
.tile .ph{aspect-ratio:1;width:100%;object-fit:contain;background:var(--paper);transition:opacity .2s}

/* Вторая фотография при наведении — как на их прежнем сайте. Обе картинки лежат
   в одном месте друг на друге, меняется только прозрачность: так нет
   ни подгрузки в момент наведения, ни прыжка вёрстки. */
.tile .shot{display:block;position:relative;aspect-ratio:1;overflow:hidden}
.tile .shot .ph{position:absolute;inset:0;height:100%}
.tile .shot .ph.alt{opacity:0}
.tile:hover .shot .ph.alt{opacity:1}
.tile:hover .shot .ph{opacity:1}
.tile:hover .ph{opacity:.88}
/* НАВЕДЕНИЕ БЕЗ ДВИЖЕНИЯ МЫШИ — НЕ НАВЕДЕНИЕ.

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

   Держим наведение выключенным, пока человек в самом деле
   не пошевелит курсором (см. _lightbox.html). */
html.no-hover .tile:hover .shot .ph.alt{opacity:0}
html.no-hover .tile:hover .shot .ph{opacity:1}
html.no-hover .tile:hover .ph{opacity:1}
/* На телефоне наведения нет — вторая картинка там только мешала бы. */
@media (hover:none){.tile .shot .ph.alt{display:none}}
@media (prefers-reduced-motion:reduce){.tile .ph{transition:none}}
.tile .body{padding:16px 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
/* Кнопка прижата к низу плитки (.under), а не идёт следом за текстом —
   так кнопки в ряду стоят ровно при описаниях разной длины.
   Под название отведено ровно три строки: и не меньше (иначе короткое имя
   поднимает баллы выше соседей), и не больше (иначе одно длинное имя
   роняет весь ряд). Пара названий в каталоге длиннее — они обрезаются
   многоточием, полное видно при наведении и на странице игрушки. */
.tile .name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
            overflow:hidden;height:3.75em;font-size:21px;font-weight:600;
            color:var(--title);line-height:1.25}
.tile .under{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.tile .under .addbtn{margin-top:8px}
.tile .meta{font-size:14px;font-weight:300;color:var(--faint)}
.tile .foot{margin-top:auto;padding-top:4px;display:flex;align-items:baseline;
            justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Примеры наборов на странице «Баллы».
   Сетка с одинаковой высотой строк: у названий игрушек длина разная,
   и без этого подписи и баллы в ряду разъезжались по вертикали. */
.example{margin-top:26px}
.example:first-of-type{margin-top:18px}
.example-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
.example-head b{font-size:15px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
/* auto-fit, а не auto-fill: пустые колонки схлопываются, и четыре
   игрушки растягиваются на всю ширину. С auto-fill они жались
   к левому краю широкой карточки крошечными квадратиками.
   Потолок ширины — чтобы на большом мониторе плитки не разъехались
   до размера, при котором набор перестаёт читаться как набор. */
.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
              gap:20px;max-width:820px}
.example-toy{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;height:100%}
.example-toy img,.example-toy .ph{width:100%;aspect-ratio:1;object-fit:contain;border-radius:12px;
                                  border:1px solid var(--line);background:var(--paper)}
.example-toy .name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
                   overflow:hidden;font-size:14px;line-height:1.35;height:2.7em;color:var(--muted)}
.example-toy .cost{margin-top:auto;font-size:14px;font-weight:600;color:var(--sage-deep)}
.example-toy:hover .name{color:var(--ink)}

.img-placeholder{aspect-ratio:1;background:var(--wash);display:flex;align-items:center;
                 justify-content:center;color:var(--faint);font-size:44px}
/* Кнопка в плитке каталога — той же формы, что и главная: скругление
   шесть пикселей, обычные буквы. Пока она была таблеткой с капсом,
   а главная стала прямоугольником, на одной странице стояли кнопки
   двух разных семейств. */
.addbtn{width:100%;margin-top:14px;padding:12px;border:2px solid var(--line);background:transparent;
        color:var(--title);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:normal;
        border-radius:6px;cursor:pointer;transition:all .2s ease-in-out}
/* Ссылка, которая выглядит и ведёт себя как кнопка. Раньше это
   дописывали стилями по месту в двух шаблонах, и одна из двух
   ссылок в итоге кнопкой не выглядела вовсе. */
a.addbtn{display:block;text-align:center;text-decoration:none}
.addbtn:hover{border-color:var(--pink-deep);color:var(--pink-deep)}
.addbtn.in{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.addbtn:disabled{opacity:.3;cursor:not-allowed;background:transparent;color:var(--muted);border-color:var(--line)}

/* --- всплывающая карточка игрушки ---

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

   Значения сняты с их окна:

     полотно      белое, во весь экран, проявляется
     содержимое   начинается уменьшенным (0.9) и выше центра,
                  встаёт на место за 0.3s ease-in-out

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

   Без скриптов ничего этого нет и не нужно: плитка остаётся обычной
   ссылкой на страницу игрушки, и она работает. */

.lightbox{position:fixed;inset:0;z-index:300;background:var(--paper);
          overflow-y:auto;overscroll-behavior:contain;
          opacity:0;visibility:hidden;transition:opacity .25s ease-in-out,visibility .25s}
.lightbox.on{opacity:1;visibility:visible}
/* ЗАКРЫВАЕТСЯ МГНОВЕННО, а открывается плавно — и это не прихоть.

   Пока непрозрачный слой уходит от единицы к нулю, он работает белой
   вуалью поверх каталога: тот показывается выцветшим и через долю
   секунды наливается цветом. Юрий увидел это на телефоне и назвал
   «фото моргают»; замер по кадрам записи подтвердил — контраст падает
   с 50 до 27 и возвращается.

   Появление вуалью не мешает: под ним ещё нет каталога, к которому
   можно приглядываться. */
.lightbox:not(.on),.lightbox:not(.on) .lightbox-inner{transition:none}

.lightbox-inner{max-width:1100px;margin:0 auto;
                padding:clamp(56px,7vw,84px) clamp(16px,3vw,32px) clamp(40px,6vw,72px);
                transform:translateY(-6%) scale(.9);
                transition:transform .3s ease-in-out}
.lightbox.on .lightbox-inner{transform:none}

/* Крестик держится в углу при прокрутке: карточка бывает длиннее экрана,
   и уехавшая наверх кнопка закрытия — это тупик для того, кто не знает
   про клавишу выхода. */
.lightbox-close{position:fixed;top:clamp(10px,2vw,20px);right:clamp(10px,3vw,28px);
                z-index:2;display:inline-flex;align-items:center;gap:9px;
                border:2px solid var(--line);background:var(--paper);color:var(--title);
                font-family:inherit;font-size:14px;font-weight:600;
                padding:10px 18px;border-radius:6px;cursor:pointer;
                transition:border-color .2s ease-in-out,color .2s ease-in-out}
.lightbox-close:hover{border-color:var(--pink-deep);color:var(--pink-deep)}

/* Пока карточка едет — на её месте бледная надпись, а не пустота. */
.lightbox-wait{padding:60px 0;text-align:center;color:var(--faint);font-size:16px}

/* Страница под окном не должна прокручиваться: иначе палец на телефоне
   листает каталог позади карточки. */
body.lightbox-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .lightbox,.lightbox-inner{transition:none}
  .lightbox-inner{transform:none}
}

/* --- рабочие экраны в два столбца ---

   Экраны выдачи собраны сеткой «содержимое и боковая колонка». Ширины
   были заданы жёстко: minmax(0,1fr) и minmax(260px,320px) — и на телефоне
   боковая колонка забирала свои 260 точек, а содержимому оставалось
   около сотни. Текст сыпался по одному слову в строку: «Членств /
   не / действу / Продлит / его / в / справочн».

   На широком экране мы этого не видели никогда, а Наталия работает
   с телефона — и увидела в первый же заход.

   Ниже 760px — один столбец. Класс, а не правка в каждом шаблоне:
   таких экранов уже два, и следующий должен получить это даром. */
.worktwo{display:grid;gap:22px;align-items:start;
         grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
.worktwo > *{min-width:0}

@media (max-width:760px){
  .worktwo{grid-template-columns:1fr;gap:16px}
}

/* --- заглушка «откройте в браузере» ---

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

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

   Класс вешается на корень страницы ДО отрисовки — иначе видно, как
   сайт появляется и тут же исчезает под заглушкой. */

/* --- напоминание про второй ключ (рабочие экраны) --------------------
   Полоска, а не окно. Наталия приходит сюда работать, и заслон посреди
   дела она закроет не читая — заодно решив, что мы ей мешаем. */
.keynote{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--cream);border-radius:10px;
  padding:14px clamp(14px,2vw,20px);
  margin:0 auto clamp(18px,2.5vw,26px);max-width:1180px}
.keynote[hidden]{display:none}
.keynote-text{flex:1;min-width:220px;font-size:14.5px;line-height:1.5;
  color:var(--ink)}
.keynote-text b{font-weight:600;color:var(--title)}
.keynote .btn{flex:none;padding:9px 20px;font-size:13.5px}
.keynote-no{flex:none;background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;color:var(--muted);padding:0 4px}
.keynote-no:hover{color:var(--ink)}

/* --- полоска «напоминать о возврате?» --------------------------------
   Внизу, как и полоска про домашний экран, и по той же причине:
   сверху она перекрывала бы корзину, а корзина человеку нужна.

   Обе разом не показываются: про экран спрашиваем со второго захода,
   про уведомления — при запуске приложения или после заявки. */
.pushbar{position:fixed;left:0;right:0;bottom:0;z-index:310;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(0,0,0,.07);
  padding:12px clamp(12px,3vw,20px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.pushbar[hidden]{display:none}
body.lightbox-open .pushbar{display:none}
/* И пока открыты фильтры — как и полоску про установку. Слой у неё
   310, у панели фильтров 250: она ложилась ровно на «Показать»,
   и палец, целившийся в «Показать», попадал бы в «Включить» —
   с системным запросом разрешений в придачу. Показывается она при
   первом запуске установленного приложения, то есть ровно тем,
   кого мы зовём в проверку. */
body.filters-open .pushbar{display:none}
.pushbar-in{max-width:760px;margin:0 auto;display:flex;align-items:center;
  gap:12px}
.pushbar-icon{flex:none;font-size:26px;line-height:1}
.pushbar-text{flex:1;min-width:0;font-size:13.5px;line-height:1.4;
  color:var(--muted)}
.pushbar-text b{display:block;font-size:15px;font-weight:600;
  color:var(--title);margin-bottom:2px}
.pushbar .pushbar-yes{flex:none;padding:10px 20px;font-size:13.5px}
.pushbar-no{flex:none;background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--faint);padding:0 4px;
  align-self:flex-start}
.pushbar-no:hover{color:var(--muted)}
@media (max-width:520px){
  .pushbar{padding:10px 12px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .pushbar-in{gap:10px}
  .pushbar-icon{font-size:22px}
  .pushbar-text{font-size:12.5px;line-height:1.35}
  .pushbar-text b{font-size:14px}
  .pushbar .pushbar-yes{padding:9px 14px;font-size:13px}
  .pushbar-no{font-size:22px;padding:0 2px}
}

/* --- полоска «сохраните на домашний экран» ---------------------------
   Внизу, а не вверху. Сверху она перекрывала бы шапку с корзиной —
   а корзина человеку нужна, полоска нет.

   Отступ снизу считается с env(safe-area-inset-bottom): на айфонах
   без кнопки там живёт полоса-указатель жеста, и всё, что положено
   вплотную к низу, попадает под неё. */
/* ГАЛОЧКА СОГЛАСИЯ В ОКНЕ TELEGRAM.

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

   Слой выше всех полосок внизу (300, 310): это не предложение,
   а вопрос, без ответа на который дальше не идём. */
.tgapp-consent{position:fixed;inset:0;z-index:400;display:grid;
  place-items:center;padding:20px;
  background:rgba(20,18,22,.55)}
.tgapp-consent-in{background:var(--paper);border-radius:18px;
  padding:24px;max-width:400px;width:100%;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.tgapp-consent-in b{font-size:19px;font-weight:600;color:var(--title)}
.tgapp-consent-in .btn{width:100%}
.tgapp-consent-in .btn[disabled]{opacity:.5;cursor:default}
/* «Просто посмотреть» — тихой строкой под кнопкой, а не второй
   кнопкой: это запасной ход, а не равный выбор. */
.tgapp-consent-skip{background:none;border:0;padding:4px;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.tgapp-consent-skip:hover{color:var(--title)}

.install{position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(0,0,0,.07);
  padding:12px clamp(12px,3vw,20px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.install[hidden]{display:none}
/* Пока открыта увеличенная игрушка — полоски нет.
   У неё и у окна с игрушкой был один и тот же слой, а полоска стоит
   в разметке ниже — и потому выигрывала. Человек открывал фотографию
   на телефоне и получал поперёк неё просьбу сохранить сайт на экран.
   Нашла проверка Fable. */
body.lightbox-open .install{display:none}
/* И пока открыты фильтры — по той же причине. Полоска стоит слоем
   выше панели и ложилась ровно на кнопку «Показать»: человек целился
   в неё, а попадал в «Не сейчас». */
body.filters-open .install{display:none}
.install-in{max-width:760px;margin:0 auto;display:flex;align-items:center;
  gap:12px}
.install-icon{flex:none;border-radius:9px;width:44px;height:44px}
.install-text{flex:1;min-width:0;font-size:13.5px;line-height:1.4;
  color:var(--muted)}
.install-text b{display:block;font-size:15px;font-weight:600;
  color:var(--title);margin-bottom:2px}
.install .install-go{flex:none;padding:10px 20px;font-size:13.5px}
.install .install-go[hidden]{display:none}
.install-no{flex:none;background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--faint);padding:0 4px;
  align-self:flex-start}
.install-no:hover{color:var(--muted)}
/* На телефоне ужимаем, а не переносим.
   Кнопка во всю ширину под текстом давала полоску в 137 пикселей —
   шестую часть экрана, и это поверх каталога, за которым человек
   пришёл. Оставляем всё в одну строку: значок мельче, кнопка теснее,
   объяснение в две строчки. Выходит около 70 пикселей. */
@media (max-width:520px){
  .install{padding:10px 12px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .install-in{gap:10px}
  .install-icon{width:36px;height:36px}
  .install-text{font-size:12.5px;line-height:1.35}
  .install-text b{font-size:14px}
  .install .install-go{padding:9px 14px;font-size:13px}
  .install-no{font-size:22px;padding:0 2px}
}

.inapp-block{display:none}

/* ДВЕ РАЗНЫЕ ЗАГЛУШКИ, и показывать надо ровно одну.

   Карточки у них общие по виду, поэтому и класс общий. Но открывать
   их по классу нельзя: внутри окошка Telegram под правило попали бы
   обе, и человек увидел бы две карточки друг под другом с разными
   указаниями. Поэтому открываем по НОМЕРУ — он у каждой свой. */
html.inapp,html.inapp body{overflow:hidden;height:100%}
html.inapp body > *{display:none !important}
html.inapp body > #inapp{display:flex !important}

html.mobonly,html.mobonly body{overflow:hidden;height:100%}
html.mobonly body > *{display:none !important}
html.mobonly body > #mobonly{display:flex !important}

.inapp-block{position:fixed;inset:0;z-index:9999;background:var(--cream);
             align-items:center;justify-content:center;
             padding:clamp(20px,5vw,48px);overflow-y:auto}

.inapp-card{background:var(--paper);max-width:460px;width:100%;
            padding:clamp(26px,6vw,44px);text-align:center;
            display:flex;flex-direction:column;align-items:center;gap:16px}

.inapp-logo{height:64px;width:auto;margin-bottom:4px}

/* Переключатель языка на заглушке. Он прячет всю страницу вместе
   с шапкой, а значит и с обычным переключателем: без этого сербка
   упиралась бы в объяснение по-русски и ничего не могла сделать. */
.inapp-langs{margin-bottom:4px}
.inapp-head{font-size:clamp(24px,5vw,32px);font-weight:600;color:var(--title);
            line-height:1.2}
.inapp-why{font-size:16px;line-height:1.6;color:var(--muted)}

/* Само указание — самое крупное после заголовка: за ним человек сюда
   и смотрит. Остальное он читать не станет. */
.inapp-how{background:var(--cream);padding:16px 20px;border-radius:6px;
           font-size:17px;line-height:1.55;color:var(--title)}


/* Выход на случай, если мы ошиблись в определении. Нарочно мелкий
   и скучный: тот, кому заглушка адресована, пройдёт мимо. */
.inapp-anyway{background:none;border:0;padding:6px;cursor:pointer;
              font-family:inherit;font-size:13px;color:var(--faint);
              text-decoration:underline;text-underline-offset:3px}
.inapp-anyway:hover{color:var(--muted)}

/* Кнопка установки — только на Android и только когда браузер сам
   сказал, что установка возможна. На айфоне её нет и быть не может. */
.mobonly-install{width:100%;max-width:280px}
.mobonly-note{font-size:14px;color:var(--faint)}

/* --- поля --- */

/* password и email добавлены, когда появилась своя страница входа:
   до этого полей такого рода на сайте не было вовсе, и поле пароля
   вышло в стандартном браузерном виде — серой вдавленной рамкой
   посреди наших. */
/* Шрифт в поля и кнопки НЕ наследуется — это надо задавать руками.
   Браузер рисует их системным шрифтом, что бы ни стояло на body:
   так решили когда-то, чтобы поля выглядели «как в системе».

   На клиентском сайте это почти незаметно: полей там три. А рабочие
   экраны из полей и состоят, и Наталия смотрит на них весь день —
   там половина надписей шла Arial'ом посреди нашего шрифта. Юрий
   заметил глазом, я нашёл только замером.

   Правило нарочно широкое: перечислять типы полей поимённо мы уже
   пробовали ниже, и новый тип каждый раз забывается. Здесь ловится
   всё, включая то, чего ещё нет. */
input,select,textarea,button,optgroup,option{font-family:inherit}

/* input[type=time] стоял рядом с оформленной датой ГОЛЫМ: браузер
   рисовал его по-своему, и два поля времени в форме Играоницы
   выглядели чужими рядом с полем дня. Нашла вычитка. */
.input,input[type=text],input[type=password],input[type=email],
input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;padding:12px 18px;border:2px solid var(--line);background:var(--paper);
  color:var(--ink);font-family:inherit;font-size:16px;font-weight:300;border-radius:99px}
textarea{border-radius:16px}

/* АЙФОН ПЕРЕПИСЫВАЕТ ПОЛЕ ДАТЫ ПОСЛЕ НАС, И ИМЕННО ПОЭТОМУ ОНИ
   НАЛЕЗАЛИ ДРУГ НА ДРУГА.

   18-09 Юрий прислал снимок: в форме «приду» поля «Когда» и «Во
   сколько» стоят впритык и заезжают одно на другое. Я починила
   раскладку обёрток — и была неправа: обёртки тут ни при чём.

   На iOS (и только на нём) WebKit считает date и time «кнопкой-меню»
   и уже ПОСЛЕ нашего оформления ставит им свой padding, свою
   min-height и, главное, box-sizing:content-box. У нас всюду
   border-box и width:100% — при content-box то же width:100%
   означает «обёртка плюс padding плюс рамка», то есть поле на два
   десятка пикселей ШИРЕ своей обёртки. Зазор между полями 12 —
   вот и наложение. Отключить этот путь можно одним: appearance:none.
   Наше оформление (рамка, фон, скругление) его не отключает.

   ПРОВЕРИТЬ ЭТО СВОИМИ ГЛАЗАМИ Я НЕ МОГУ: Safari на маке ведёт себя
   иначе, а в браузере проверок такого нет вовсе. Правило взято
   из исходников WebKit по вычитке и совпадает с тем, что делает
   у себя Tailwind. Подтверждение — снимок с айфона ПОСЛЕ выкладки,
   и обязательно с ВЫБРАННОЙ датой: у пустого поля беды не видно.

   Второе правило держит высоту: без appearance её держал
   навязанный min-height, а пустое поле даты на iOS схлопывается.
   Держим 1.2em, а не 1lh, как у Tailwind: 1lh считается
   от межстрочного интервала, а он у нас крупнее обычного,
   и на iOS поле вышло бы выше соседних. Это рассуждение,
   а не замер: в браузере проверок разницы нет вовсе — там date
   и time и так на 2-4 пикселя выше простого поля, собственной
   отрисовкой, и были такими до нас. Проверено снятием правила. */
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none}
input::-webkit-date-and-time-value{min-height:1.2em;text-align:inherit}

/* ПАРА «ДЕНЬ + ВРЕМЯ» — ОДНИМ КЛАССОМ, А НЕ СТИЛЕМ В ШАБЛОНЕ.
   На телефоне поля встают стопкой: русская дата на iOS пишется
   как «18 сент. 2026 г.», и в половину строки она не влезает —
   а поле обрезает лишнее молча, без всякого знака. С 560 пикселей
   места хватает, и там они снова в строку, с потолком в 260:
   без потолка поле даты растягивалось на пол-экрана. */
.datetime-pair{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.datetime-pair>*{flex:1 1 200px;min-width:0}
@media (min-width:560px){.datetime-pair>*{max-width:260px}}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sage)}
.filters,.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.filters input[type=text],.toolbar input[type=text]{flex:1;min-width:210px}
.filters select,.toolbar select{width:auto;min-width:175px}
label.check{display:flex;align-items:center;gap:9px;font-size:16px;cursor:pointer;color:var(--muted)}
label.check input{width:18px;height:18px;accent-color:var(--sage);border-radius:0}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.form-label{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.field .help{font-size:14px;color:var(--faint)}
.field .err{font-size:15px;color:var(--coral-deep);font-weight:600}
.form-group{margin-bottom:18px}
form.stacked{display:flex;flex-direction:column;gap:22px;max-width:660px}
ul.radio{list-style:none;display:flex;gap:20px}
ul.radio li{display:flex;align-items:center;gap:8px}

/* --- сообщения --- */

.msgs{display:flex;flex-direction:column;gap:10px}
.msg{padding:16px 24px;border:2px solid;font-size:16px;border-radius:99px;text-align:center}
.msg.success{border-color:var(--sage);color:var(--sage-deep)}
.msg.error{border-color:var(--coral-deep);color:var(--coral-deep)}
.msg.info{border-color:var(--pink);color:var(--pink-deep)}
/* ПРЕДУПРЕЖДЕНИЕ БЫЛО НЕОПИСАНО ВОВСЕ и выглядело как нейтральная
   плашка — а messages.warning стоит в десятке мест, и на экране
   Играоницы это ЕДИНСТВЕННЫЙ сигнал двойной брони. Цвет коралловый,
   как у ошибки, но рамка светлее: это «посмотрите», а не «не вышло».
   Нашла вычитка. */
.msg.warning{border-color:var(--coral);color:var(--coral-deep)}
.note{background:#FEF6FB;border:2px solid var(--pink);padding:20px 26px;font-size:16px;border-radius:20px}
.note.warn{background:#FFF3F0;border-color:var(--coral)}
.note.ok{background:#F4F9EE;border-color:var(--sage)}

/* --- цифры --- */

.stat-grid,.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat-card,.tiles .tile{background:var(--paper);border:2px solid var(--line);padding:24px;
                        display:flex;flex-direction:column;gap:4px;border-radius:20px}
.stat-num,.tiles .tile .v{font-size:clamp(32px,3.6vw,46px);font-weight:700;color:var(--title);
                          letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.tiles .tile.bad{border-color:var(--coral)}
.tiles .tile.bad .v{color:var(--coral-deep)}
.tiles .tile.warn{border-color:var(--pink)}
.tiles .tile.warn .v{color:var(--pink-deep)}
.tiles .tile:hover .ph{opacity:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.big{font-size:clamp(30px,3.2vw,42px);font-weight:700;color:var(--title);letter-spacing:-.02em;line-height:1.05}
.bar-track{height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:var(--pink);border-radius:99px}

/* --- таблицы --- */

.table-wrap,.scroller{background:var(--paper);border:2px solid var(--line);overflow-x:auto;border-radius:20px}
table{width:100%;border-collapse:collapse;min-width:660px}
th{text-align:left;padding:16px 20px;font-size:11px;font-weight:700;letter-spacing:.14em;
   text-transform:uppercase;color:var(--faint);border-bottom:2px solid var(--line)}
td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:16px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--wash)}
/* min-width — чтобы миниатюра НИКОГДА не становилась полоской.
   img{max-width:100%} стоит на весь сайт, и в узкой ячейке таблицы
   оно ужимало снимок по ширине, оставляя высоту: выходило 10×56.
   Ширину таблице мы дали, но полагаться на это одно нельзя —
   колонок в ней может стать больше. */
.thumb{width:56px;min-width:56px;height:56px;object-fit:cover;
       background:var(--wash);border-radius:12px}

/* Шапка, заведённая РАДИ ТЕЛЕФОНА. У трёх таблиц её не было вовсе —
   и на телефоне они оставались лентами, потому что подписи полей
   берутся именно из шапки. Добавили; но на широком экране показывать
   её не надо: там их не было, а в календаре она повторялась бы
   у каждого из двадцати восьми дней. Нашла вычитка. */
@media (min-width:761px){
  .rabota table thead.ради-телефона{display:none}
}
/* --- ТАБЛИЦЫ НА ТЕЛЕФОНЕ: строка становится карточкой ---------------

   ЗАЧЕМ. Замер на айфоне (375 точек, под содержимое остаётся 339):

       Сегодня           таблицы 969 и 892 точек
       Карточка клиента  660
       Игрушки           1017
       Даты              1502

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

   ПОЧЕМУ КЛАССОМ ОТ СКРИПТА, А НЕ ПРОСТО ПО @media. Подписи столбцов
   берутся из шапки самой таблицы — руками их пришлось бы вписать
   в пятнадцать шаблонов и в каждую будущую таблицу, и где-нибудь
   забыть. Скрипт раздаёт их сам; выключены скрипты — таблица остаётся
   таблицей с прокруткой, то есть ровно как сегодня. Хуже, чем сегодня,
   не станет. */
@media (max-width:760px){
  .rabota table.карточками{min-width:0;width:100%}
  .rabota table.карточками thead{display:none}
  .rabota table.карточками tbody,
  .rabota table.карточками tr,
  .rabota table.карточками td{display:block;width:auto}
  .rabota table.карточками tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .rabota table.карточками tr:last-child{border-bottom:none}
  .rabota table.карточками td{padding:5px 0;border:none;font-size:16px}
  /* Мелкое остаётся мелким: правило выше по весу перебивало .sub,
     и пояснения набирались наравне с данными. Нашла вычитка. */
  .rabota table.карточками td.sub,
  .rabota table.карточками td .sub{font-size:13px}
  /* Пустая ячейка на широком экране держит столбец, а в карточке
     превращается в пустую строку. Убираем — вместе с её подписью. */
  .rabota table.карточками td.пусто{display:none}
  .rabota table.карточками td[data-label]::before{
      content:attr(data-label);display:block;margin-bottom:2px;
      font-size:11px;font-weight:700;letter-spacing:.12em;
      text-transform:uppercase;color:var(--faint)}
  /* Первая ячейка — заголовок карточки: обычно это имя или название,
     ради которого строку и открывают. Подпись ей не нужна. */
  .rabota table.карточками td:first-child{font-size:18px;font-weight:600;
      padding-top:0}
  .rabota table.карточками td:first-child::before{content:none}
  /* Прокрутку у обёртки НЕ ТРОГАЕМ. Соблазн был: возить вроде нечего.
     Но карточка всё-таки может однажды не влезть — скажем, ряд кнопок
     в одну строку на узком экране, — и тогда с overflow-x:visible она
     полезла бы за скруглённый край и растянула всю страницу вбок.
     А так её просто можно будет подвинуть внутри рамки. Нашла
     вычитка. */
}


/* --- постранично --- */

.pager{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding-top:16px}
.pager a,.pager span{padding:12px 24px;border:2px solid var(--line);color:var(--muted);border-radius:99px;
                     font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pager a:hover{border-color:var(--sage);color:var(--sage-deep)}
.pager .cur{background:var(--pink);border-color:var(--pink);color:#fff}

footer.site{margin-top:var(--gap);padding:44px clamp(16px,3vw,32px);text-align:center;
            color:var(--faint);font-size:14px;border-top:1px solid var(--line)}
footer.site a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .catalog{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap;gap:12px 20px}
  .sidebar a,.sidebar button{font-size:17px}
  .sidebar .group{width:100%;margin-top:6px}

  /* Фильтры свёрнуты за кнопкой — с той же ширины, с которой каталог
     становится одной колонкой. Развёрнутыми они занимают тысячу пикселей
     НАД каталогом — человек листает полтора экрана, прежде чем увидит
     первую игрушку; на планшете (iPad — 810) это болело так же, как
     на телефоне. Галочки внутри продолжают отправляться, даже когда
     список скрыт: они привязаны к форме атрибутом form. */
  /* РОЗОВАЯ РАМКА — «выдели эти 2 окна визуально», Наталия 29-09.
     Серая кнопка на белом читалась как подпись, а не как кнопка. */
  .has-filter-toggle .filters-toggle{display:inline-flex;align-items:center;gap:9px;
      justify-self:start;padding:13px 24px;border:2px solid var(--pink-deep);
      background:#FFF3FA;color:var(--pink-dark);font-family:inherit;font-size:13px;
      font-weight:700;letter-spacing:.07em;text-transform:uppercase;
      border-radius:99px;cursor:pointer}
  .has-filter-toggle .filters-toggle .dot{width:9px;height:9px;border-radius:99px;
      background:var(--pink-deep)}
  /* ПАНЕЛЬ ФИЛЬТРОВ — ОТДЕЛЬНЫЙ ЭКРАН, а не кусок потока.

     Раньше она просто разворачивалась на месте: 970 пикселей списка
     на экране в 812, каталог уезжал вниз, выхода не было. Юрий назвал
     это «сайт криво отображается», и по сути был прав — это выглядело
     поломкой вёрстки, а не фильтрами. */
  .has-filter-toggle .sidebar{display:none}
  .has-filter-toggle .sidebar.open{display:flex;position:fixed;inset:0;
      z-index:250;background:var(--paper);overflow-y:auto;
      overscroll-behavior:contain;
      /* Снизу — место под полосу «Показать». Поправка на айфон
         с чёрточкой та же, что у полосы: без неё полоса вырастает
         на высоту чёрточки, а запас остаётся прежним, и последний
         пункт списка прячется под кнопку. */
      padding:0 clamp(16px,4vw,24px)
              calc(104px + env(safe-area-inset-bottom, 0px));
      gap:11px}
  /* Заголовок липнет к верху: список длинный, и «закрыть» не должно
     уезжать за край вместе с прокруткой. */
  .has-filter-toggle .sidebar.open .sidebar-head{display:flex;
      position:sticky;top:0;z-index:2;background:var(--paper);
      align-items:center;justify-content:space-between;
      padding:18px 0 14px;margin-bottom:4px;
      border-bottom:1px solid var(--line)}
  .has-filter-toggle .sidebar.open .sidebar-head b{font-size:20px;
      font-weight:600;color:var(--title)}
  .sidebar-close{background:none;border:0;padding:4px 10px;cursor:pointer;
      font-size:30px;line-height:1;color:var(--faint);font-family:inherit}
  .sidebar-close:hover{color:var(--title)}
  /* «Показать» — ПОЛОСОЙ ВО ВСЮ ШИРИНУ, прижатой к низу экрана.

     Было: липкая кнопка внутри отступов панели. Отступы по бокам —
     два десятка пикселей, и в эти щели проходили плитки фильтров.
     Выходило, что кнопка висит НАД списком, а мягкая тень это ещё
     и подчёркивала. Юрий: «некрасиво висит, сквозь неё проходит
     страница».

     Стало: полка от края до края, с чертой сверху. Ничего не
     просвечивает, потому что просвечивать негде.

     position:fixed, а не sticky: панель сама прокручивается, и полоса
     должна стоять на экране, а не в её потоке. Считается от окна —
     превращений (transform) над ней нет, проверено.

     env(safe-area-inset-bottom) — про айфон с чёрточкой внизу: без
     него кнопка ложится ровно под неё. */
  .has-filter-toggle .sidebar.open .sidebar-foot{display:block;
      position:fixed;left:0;right:0;bottom:0;z-index:3;margin:0;
      padding:12px clamp(16px,4vw,24px)
              calc(14px + env(safe-area-inset-bottom, 0px));
      background:var(--paper);border-top:1px solid var(--line)}
  /* Число рядом с надписью: сколько игрушек за панелью. Приглушено —
     это ответ, а не вторая надпись. */
  .has-filter-toggle .sidebar.open .sidebar-foot .foot-count{
      opacity:.72;font-variant-numeric:tabular-nums}
  .has-filter-toggle .sidebar.open .sidebar-foot .btn{width:100%}
  body.filters-open{overflow:hidden}

  /* РАЗДЕЛЫ — ПЛИТКАМИ, а не столбиком крупных ссылок.

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

     Плитками они видны все разом. Выбранный залит, остальные обведены:
     так понятно, что это выбор, а не оглавление. */
  .has-filter-toggle .sidebar.open{gap:0}
  .has-filter-toggle .sidebar.open > a{
      display:inline-flex;align-items:center;
      font-size:15px;font-weight:600;line-height:1.2;
      padding:10px 15px;border:1.5px solid var(--line);border-radius:99px;
      color:var(--muted);background:var(--paper)}
  .has-filter-toggle .sidebar.open > a.on{
      background:var(--pink);border-color:var(--pink);color:#fff}
  /* Оборачиваем ряд плиток: соседние ссылки идут подряд в разметке,
     и обёртки под них нет — раскладываем саму панель сеткой,
     а неплиточные части растягиваем на всю ширину. */
  .has-filter-toggle .sidebar.open{display:flex;flex-wrap:wrap;
      align-content:flex-start;gap:9px}
  .has-filter-toggle .sidebar.open .sidebar-head,
  .has-filter-toggle .sidebar.open .sidebar-foot,
  .has-filter-toggle .sidebar.open .group,
  .has-filter-toggle .sidebar.open .checks,
  .has-filter-toggle .sidebar.open .showall{flex:0 0 100%}
  /* Заголовок группы отделяем от плиток воздухом, а не размером. */
  .has-filter-toggle .sidebar.open .group{margin-top:20px}
}
/* --- кнопка фильтров: только на телефоне --- */
.filters-toggle{display:none}
/* Заголовок и «Показать» — принадлежность отдельного экрана,
   а на широком экране панель стоит сбоку и никуда не открывается. */
.sidebar-head,.sidebar-foot{display:none}

/* --- кнопка меню: на широком экране её нет --- */
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;
        width:46px;height:46px;flex-direction:column;justify-content:center;
        align-items:stretch;gap:5px}
/* Ширина полосок задана явно, и это не перестраховка. У кнопок свой,
   встроенный в браузер, способ выравнивать содержимое: в Safari на айфоне
   он центрирует, полоски без ширины схлопываются в ноль, и на месте значка
   остаётся пустота. Кнопка при этом нажимается — меню открывается «из
   ничего». Именно так это и выглядело у владельца на телефоне.

   Цвет отдельный, темнее меню. Фирменный светло-зелёный на белом даёт
   контраст 2 : 1 — для крупных капсовых надписей достаточно, для трёх
   тонких линий нет: значок сливается с фоном. Здесь 4 : 1, значок видно
   и на солнце, и на плохом экране. */
.burger span{display:block;width:100%;height:3px;border-radius:3px;
             background:#6E8842;transition:transform .2s,opacity .2s}
.burger:focus-visible{outline:3px solid var(--sage);outline-offset:2px}

@media (max-width:768px){
  body{font-size:16px}
  .header .container{padding-top:14px;padding-bottom:12px}
  .header-right{position:static;justify-content:center;flex-wrap:wrap;gap:10px}
  /* Логотип поменьше: на телефоне он съедал треть первого экрана. */
  .logo img{height:62px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
  .tile .name{font-size:17px}
  .btn{padding:13px 24px;font-size:13px}
  th,td{padding:13px 15px}

  /* Шапка на телефоне — одна строка: кнопка меню, логотип, набор.
     Всё остальное (языки, вход, пункты меню) появляется под ней,
     когда меню раскрыто. Раньше это стояло тремя этажами и занимало
     треть экрана до первой игрушки. */
  .has-burger .header .container{flex-direction:row;flex-wrap:wrap;
                                 align-items:center;justify-content:space-between;gap:8px}
  /* Логотип по центру СТРАНИЦЫ, а не по центру остатка.

     Было так: гамбургер слева занимает 46 пикселей, «SET» справа — 103,
     а логотип растягивался в промежутке между ними. Промежуток смещён
     вправо, значит его середина — не середина экрана, и логотип уезжал
     влево ровно на половину разницы, 29 пикселей. Наталия заметила
     глазом, я подтвердил замером.

     Решение: боковым зонам одинаковую ширину (flex:1 1 0 обеим),
     логотипу — свою собственную. Тогда он всегда посередине, что бы
     ни лежало по краям: появится «Войти», исчезнет счётчик набора —
     логотип не сдвинется. */
  /* 88 = 62 картинка + 14 сверху + 12 снизу.
     
     Картинка на самом деле 62 пикселя, а не 56 из правила выше: там
     задана высота тега, а рисуется она по своим пропорциям. И отступы
     сюда входят: у нас всюду box-sizing:border-box, то есть min-height
     считает вместе с ними. Поставил сперва 62 — логотип по-прежнему
     вылезал на три пикселя, потому что на содержимое оставалось 36.
     Обе цифры сняты с готовой страницы. */
  .has-burger .header .container{position:relative;min-height:88px}
  /* Логотип выведен из потока и посажен строго на середину.

     Сперва я попробовал проще — дать боковым зонам одинаковую долю
     (flex:1 1 0 обеим). Не сошлось: вышло 127 против 107 пикселей,
     и логотип уехал уже вправо. Разбираться, почему поток распределил
     их неровно, — это подгонка, которая развалится от первой же новой
     кнопки в шапке.

     Здесь середина не вычисляется из соседей, а задана. Логотип
     не сдвинется, что бы ни лежало по краям: сменится счётчик с «0/5»
     на «12/5», появится «Войти», исчезнет гамбургер — всё равно центр.
     min-height держит высоту строки, потому что из потока логотип
     вышел и больше её не задаёт. */
  .has-burger .logo{position:absolute;left:50%;top:14px;
                    transform:translateX(-50%);margin:0}
  .has-burger .burger{display:flex;order:1;flex:none}
  .has-burger .header-right{order:3;flex:none;width:auto;
                            margin-left:auto;justify-content:flex-end}
  .has-burger .nav-links{order:4}

  /* ВХОД — ВТОРЫМ, СРАЗУ ЗА КНОПКОЙ МЕНЮ, И ЭТО ЛЕВАЯ ЗОНА.
     Просьба Юрия 18-09: «хорошо бы сверху сделать кнопку войти
     в личный кабинет, она появляется только если нажать на меню».
     Справа места нет — набор занимает его до края; слева было
     79 пустых пикселей (замер на 375). Логотип посажен на середину
     экрана правилом ниже и от этой ссылки не сдвинется. */
  /* МЕЛЬЧЕ, ЧЕМ СПРАВА, И ЭТО ЗАМЕР, А НЕ ВКУС. Между кнопкой
     меню и логотипом ровно 79 пикселей, а «КАБИНЕТ» обычным
     размером занимает 75 и вместе с отступом упирается
     в логотип — на 4 пикселя. Самое длинное из шести слов
     (три языка × вошёл/не вошёл) должно влезать с запасом.
     Замерены все шесть: самое длинное — английское Account,
     и при 11 пикселях до логотипа ему остаётся 7. Тот же размер,
     что у «Выйти» в меню, — они одного рода. */
  /* «margin-right:auto» ЗДЕСЬ НЕСУЩИЙ, А НЕ УКРАШЕНИЕ. Пока меню
     закрыто, свободное место съедает «margin-left:auto» у соседней
     .header-right, и ссылка стоит у кнопки меню. Открыли меню —
     .header-right становится во всю ширину и уходит на свою строку,
     в первой остаются только кнопка и ссылка, и «space-between»
     разводит их по краям: ссылка ПРЫГАЕТ на 246 пикселей вправо
     и возвращается при закрытии. Замерено; нашла вычитка. Свой
     упор держит её на месте в обоих случаях. */
  /* В РАМКЕ, КАК «НАБОР» — Наталия 29-09: «обведи КАБИНЕТ так же,
     как НАБОР». Та же рамка и скругление, что у .basketlink
     на телефоне; поля ужаты — места в строке с логотипом мало. */
  .has-burger .toplogin{display:inline-flex;order:2;flex:none;
                        margin-right:auto;
                        font-size:11px;letter-spacing:normal;
                        padding:6px 8px;border:2px solid var(--line);
                        border-radius:99px;background:var(--paper)}
  /* Уже 380 — рамка ужимается ещё: на 360 она заходила на логотип
     на 6 точек (замер 29-09). */
  @media (max-width:380px){.has-burger .toplogin{padding:5px 6px;font-size:10px}}
  /* УЖЕ 360 — МЕСТА НЕТ ВОВСЕ, И СКАЗАТЬ ЭТО ЧЕСТНЕЕ,
     ЧЕМ ПОДОГНАТЬ. На 320 логотип начинается на 113-м пикселе,
     и под слово остаётся 43 при нужных 48 даже для самого
     короткого «Войти» — замерено. Там ссылка возвращается
     в меню, как было до 18-09: хуже, чем на широком телефоне,
     но лучше, чем слово поверх логотипа. */
  @media (max-width:359px){.has-burger .toplogin{display:none}}

  /* Языки и ИМЯ с «Выйти» остаются внутри меню: в верхней строке
     для них нет места, а нужны они реже, чем набор. Сам вход
     из меню не убран нарочно — человек, открывший меню, ищет
     его именно там. */
  .has-burger .header-right .langs,
  .has-burger .header-right .whobox,
  .has-burger .header-right > .whoami{display:none}
  /* СТРОКА ЯЗЫКОВ — НИЖЕ ЛОГОТИПА. Наталия 29-09, со скриншотом:
     «при нажатии на 3 полоски логотип наезжает на выбор языка,
     опусти строку ниже». Логотип выведен из потока (см. выше) и выше
     первой строки на добрых двадцать точек; строка языков вставала
     сразу под кнопкой меню — то есть под логотип. Отступ — ОТ ВЕРХА
     ШАПКИ ДО НИЗА ЛОГОТИПА, замер ниже в браузере. */
  .has-burger.nav-open .header-right{width:100%;justify-content:center;
                                     flex-wrap:wrap;padding-top:4px;
                                     margin-top:30px}
  .has-burger.nav-open .header-right .langs{display:inline-flex}
  .has-burger.nav-open .header-right .whobox{display:inline-flex}
  .has-burger.nav-open .header-right > .whoami{display:inline-flex}
  .has-burger .nav-links{display:none;width:100%;flex-direction:column;gap:0;
                         border-top:1px solid var(--line);margin-top:10px}
  .has-burger.nav-open .nav-links{display:flex}
  .has-burger .nav-links a{display:block;width:100%;text-align:center;
                           padding:15px 8px;font-size:16px;
                           border-bottom:1px solid var(--line)}
  .has-burger.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .has-burger.nav-open .burger span:nth-child(2){opacity:0}
  .has-burger.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* Полосы разделов: содержимое обязано сжиматься до ширины телефона.
     Без min-width:0 блок внутри flex не сжимается меньше своего
     «естественного» размера — три колонки по 280 пикселей просто вылезали
     за экран, и страница ездила вбок. */
  .strip > .inner > *{min-width:0}
  .reasons{grid-template-columns:1fr;gap:30px;min-width:0}
  .strip{padding:38px 0}
}

@media (max-width:768px){
  /* Две плитки в ряд — как у них на прежнем сайте с телефона (проверено
     измерением: карточка 173 пикселя, две в строке). Один столбец
     смотрится крупнее, но за экран влезает полторы игрушки вместо
     четырёх, а каталог на 288 позиций так не листают.

     Под названием на телефоне отводим две строки вместо трёх: шрифт
     мельче, и три строки — это уже заметная пустота под короткими
     названиями. Ряд всё равно остаётся ровным. */
  .tile .name{height:2.5em;-webkit-line-clamp:2}
}

/* Артикул — техническая строка, моноширинный читается однозначно:
   ноль не спутать с буквой O. */
.mono{font-family:"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
      font-size:.92em;letter-spacing:.02em}
/* Столбец артикулов в списке игрушек. Цифры ровные и строка не рвётся:
   ищут по нему с коробкой в руках, ведя глазом сверху вниз, и «SKU 081»
   на двух строках сбивает счёт. */
.sku{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}