/* ── ОБЛИК ──
   Взят уклад ChatGPT намеренно, а не «похоже»: человек уже знает, где здесь
   что, и не тратит внимание на изучение интерфейса — оно всё уходит на товар.
   Отсюда: тёмная узкая колонка истории слева, лента диалога по центру с
   ограниченной шириной строки, поле ввода снизу «таблеткой».
   Разница ровно одна и она главная: там, где у чата абзац текста, здесь
   карточки товара и таблица сравнения. */
/* ── ЦВЕТА ──
   Каждый цвет назван ПО РОЛИ, а не по виду: «--sunk» (утопленный слой), а не
   «--серый-242424». Только так вторая тема остаётся сменой десятка значений,
   а не переписыванием всей таблицы стилей. Пока цвет вписан в правило
   числом, светлая тема — это заплатка, которая расходится с тёмной при
   первой же правке.

   Тёмная — основная: сервис так и задуман. Светлая включается либо явно
   (`data-theme="light"`), либо когда выбрано «как в системе» и система
   просит светлое. */
/* ── ЗНАЧЕНИЯ ПО УМОЛЧАНИЮ: «ГРАФИТ С СИНИМ» ──
   Это НЕ второй источник правды. Цвет выбирает человек, наборов полсотни,
   и живут они в /palettes.js — оттуда же берётся умолчание, и скрипт в
   самом верху страницы ставит роли ещё до первой отрисовки.
   Здесь лежит тот же набор ЧИСЛАМИ на два случая: пока скрипт не
   отработал (доли секунды) и если он не отработает вовсе. Страница без
   скриптов обязана выглядеть как страница, а не как чёрный текст на белом.
   Значения получены из палитры `grafit-blue`, а не подобраны: проверка
   `test_theme.py` сверяет акцент здесь с акцентом там. */
:root{
  --bg:#0f1113;          /* лента диалога */
  --side:#0a0b0d;        /* колонка истории */
  --raise:#1a1d20;       /* поднятые блоки: карточки, поле ввода */
  --raise2:#292c2f;      /* наведение */
  --sunk:#141719;        /* утопленные: поля ввода, окно товара */
  --head:#15171a;        /* шапки таблиц */
  --ph:#171a1d;          /* подложка под картинкой */
  --line:#2b3034;
  --line2:#1c1f22;       /* тонкий разделитель */
  --line-hi:#464d53;     /* рамка при наведении */
  --edge:#000000;        /* внешняя граница колонки истории */
  --txt:#eef1f3;
  --sub:#9aa4ac;
  --dim:#7c858d;
  --acc:#8ab4ff;         /* действие: отправить, купить */
  --acc2:#6ba0ff;
  --on-acc:#0b1422;      /* текст поверх акцента */
  --acc-bg:#2c3544;      /* метка «выбрано», «быстро» */
  --acc-fg:#8ab4ff;
  --acc-line:#455675;
  --sale:#dc361d;        /* скидка */
  --warn:#e2a33c;
  --bad:#e15656;
  --scroll:#404244;
  --scroll2:#56595b;
  --shadow:rgba(0,0,0,.35);
  --veil:rgba(0,0,0,.65);   /* затемнение под окном товара */
  --r:12px;
  --ui:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
}

/* Светлая тема — те же роли, другие значения. Ни одного нового правила:
   если для светлой понадобилось новое правило, значит цвет где-то вписан
   числом, и это ошибка, а не особенность темы. */
:root[data-theme="light"], :root[data-theme="system"].sys-light{
  --bg:#ffffff;
  --side:#f6f6f6;
  --raise:#ffffff;
  --raise2:#f3f3f4;
  --sunk:#f5f7f8;
  --head:#efefef;
  --ph:#eef1f3;
  --line:#e1e5e8;
  --line2:#f2f3f5;
  --line-hi:#b4bcc2;
  --edge:#e1e5e8;
  --txt:#14181b;
  --sub:#4e585f;         /* контраст к белому ≥ 7:1 — мелкий текст читаем */
  --dim:#6d787f;         /* доведён до нормы 4.5: было 3.9 и не читалось */
  --acc:#2b5fb8;         /* темнее тёмного: на белом нужен контраст */
  --acc2:#24509b;
  --on-acc:#ffffff;
  --acc-bg:#eaeff8;
  --acc-fg:#2b5fb8;
  --acc-line:#c4d2eb;
  --sale:#d63a26;
  --warn:#a06c18;
  --bad:#c0392b;
  --scroll:#c4c5c6;
  --scroll2:#a6a7a8;
  --shadow:rgba(20,20,30,.10);
  --veil:rgba(30,30,40,.45);
}
/* ── РАЗМЕРЫ КОЛОНКИ ──
   Не цвета и потому лежат отдельно от тем: тема меняет краски, а не
   раскладку. Одно число на ленту и на поле ввода — см. `.wrap`. */
:root{--col:1280px;--gut:28px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);font:15px/1.55 var(--ui);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll2)}
::-webkit-scrollbar-track{background:transparent}

#app{display:flex;height:100%;height:100dvh}

/* ── колонка истории ── */
#side{width:260px;flex:none;background:var(--side);display:flex;
      flex-direction:column;border-right:1px solid var(--edge);transition:margin-left .2s}
#side.hide{margin-left:-260px}
.side-top{padding:10px;display:flex;gap:8px;align-items:center}
.newchat{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;
         border-radius:var(--r);background:var(--raise);font-weight:600;font-size:14px}
.newchat:hover{background:var(--raise2)}
.iconbtn{width:36px;height:36px;border-radius:var(--r);display:flex;
         align-items:center;justify-content:center;color:var(--sub)}
.iconbtn:hover{background:var(--raise);color:var(--txt)}
.side-h{padding:14px 16px 6px;font-size:12px;color:var(--dim);
        text-transform:uppercase;letter-spacing:.08em}
#hist{flex:1;overflow-y:auto;padding:0 8px 8px}
.hitem{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
       font-size:14px;color:var(--sub);cursor:pointer;white-space:nowrap;min-width:0}
.hitem .htitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.hitem .hmarks{display:flex;gap:3px;flex:none;color:var(--dim);font-size:12px}
.hitem .hmenu{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  flex:none;opacity:.2;color:var(--dim);font-weight:700}
.hitem:hover .hmenu,.hitem .hmenu:focus{opacity:1;background:var(--raise2)}
.hitem:hover{background:var(--raise);color:var(--txt)}
.hitem.on{background:var(--raise);color:var(--txt)}
.hitem .x{margin-left:auto;opacity:0;color:var(--dim);font-size:16px;flex:none}
.hitem:hover .x{opacity:1}
.hitem .x:hover{color:var(--bad)}
.side-bot{border-top:1px solid var(--line2);padding:8px}
.side-bot .hitem{color:var(--sub)}

/* ── лента диалога ── */
#main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
#top{height:52px;flex:none;display:flex;align-items:center;gap:10px;
     padding:0 14px;border-bottom:1px solid var(--line2);background:var(--bg);
     position:relative;z-index:5}
#top .brand{display:flex;align-items:center;height:34px}
#top .brand{padding:2px 9px 2px 2px;border-radius:12px;background:#101916;
  border:1px solid rgba(255,255,255,.08);text-decoration:none}
#top .brand img{display:block;width:123px;height:30px}
#top .tag{font-size:12px;color:var(--dim);border:1px solid var(--line);
          padding:2px 8px;border-radius:20px;min-width:76px;max-width:180px;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.top-news{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;color:var(--sub);
  text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.top-news:hover{color:var(--txt);background:var(--raise)}
/* Лента — колонка, а не «всё, что влезло». `flex` нужен, чтобы пустой экран
   вставал по центру, а не висел под шапкой с провалом до самого поля ввода. */
#feed{flex:1;overflow-y:auto;scroll-behavior:smooth;display:flex;
      flex-direction:column}
/* Страница товара должна появляться сразу с начала. Без временного
   отключения плавности `scrollTop = 0` превращается в заметный подъём от
   прежнего места в выдаче к заголовку товара. `overflow-anchor` на время
   перехода не даёт браузеру вернуть старую точку после замены содержимого. */
#feed.product-jump{scroll-behavior:auto;overflow-anchor:none}
/* ── ОДНА КОЛОНКА НА ВСЁ ──
   Ширина ленты и ширина поля ввода — одно и то же число (`--col`), и поля по
   краям тоже одни (`--gut`). Пока это были разные числа (лента до 1560,
   поле 820), выдача уходила к правому краю, а поле ввода стояло узкой
   полосой по центру: два прямоугольника, не связанных ничем. Теперь у
   ответа, карточек, сравнения и поля ввода ОДНИ И ТЕ ЖЕ левый и правый края
   — именно это и читается как «собранный» экран.

   Лента при этом шире классического чата намеренно: в неё кладут не абзацы,
   а витрину, и ширина здесь — число товаров, которые видно без прокрутки.
   Текст не растягивается на всю колонку (см. `.said > p`): строка в тысячу
   с лишним пикселей не читается — глазу негде поймать начало следующей. */
.wrap{width:100%;max-width:var(--col);margin:0 auto;
      padding:26px var(--gut) 40px}
.msg.bot .said > p{max-width:78ch}

/* Пустой экран: не пустота, а подсказка, что тут вообще спрашивают. Стоит
   по центру свободного места — `margin:auto` в колонке-флексе, — потому что
   приветствие под самой шапкой и поле ввода у нижнего края оставляли между
   собой пустой экран высотой в полтысячи пикселей. */
#hello{max-width:820px;margin:auto;padding:0 20px;text-align:center}
/* Вид приветствия держится на классе, а не на теге. На странице товара
   сервер отдаёт это же приветствие обычным блоком, чтобы единственным
   заголовком H1 в ответе осталось название товара; будь стиль на теге,
   такая подмена ломала бы вид главной. */
#hello .hi{font-size:30px;font-weight:600;margin:0 0 6px;letter-spacing:-.02em}
#hello p{color:var(--sub);margin:0 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{border:1px solid var(--line);border-radius:20px;padding:9px 15px;
      font-size:14px;color:var(--sub);background:var(--raise)}
.chip:hover{background:var(--raise2);color:var(--txt)}
/* Кнопка, которая делает следующий шаг за человека, а не просто советует */
.chip.go{background:var(--acc);border-color:var(--acc);color:var(--on-acc);
         font-weight:600}
.chip.go:hover{background:var(--acc2);color:var(--on-acc)}

/* ── ПРИГЛАШЕНИЕ ВОЙТИ ──
   Показывается только там, где человек уже нажал и получил отказ: избранное
   принадлежит учётной записи. Это не окно с укором — объяснение и кнопка. */
.signin-ask{position:fixed;inset:0;background:var(--veil);display:flex;
            align-items:center;justify-content:center;z-index:60;padding:18px}
.si-card{width:min(420px,100%);background:var(--raise);border:1px solid var(--line);
         border-radius:16px;padding:20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.si-h{font-size:17px;font-weight:700;margin-bottom:8px}
.si-card p{color:var(--sub);margin:0 0 10px;line-height:1.5}
.si-card p.mini{color:var(--dim);font-size:12.5px}
.si-row{display:flex;gap:8px;margin-top:14px}
/* Короткое сообщение об отказе: без него молчание читается как поломка */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
       background:var(--raise);border:1px solid var(--line);border-radius:12px;
       padding:11px 16px;color:var(--txt);box-shadow:0 12px 34px rgba(0,0,0,.3);
       opacity:0;transition:opacity .18s,transform .18s;z-index:70;
       max-width:min(460px,92vw)}
.toast.go{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

.msg{margin-bottom:30px}
.msg.me{display:flex;justify-content:flex-end}
/* Пузырь вопроса лежит на утопленной подложке С РАМКОЙ. На светлой теме
   поднятая подложка совпадает с фоном ленты по цвету — и вопрос человека
   становился невидимым: текст висел в пустоте у правого края. */
.msg.me .body{background:var(--sunk);border:1px solid var(--line);
              padding:10px 16px;border-radius:18px;
              max-width:min(75%,620px);white-space:pre-wrap}
.msg.bot .body{display:block}
/* ── ОТВЕТ: ШАПКА СВЕРХУ, А НЕ ЗНАЧОК СБОКУ ──
   Значок стоял слева, и ВСЁ содержимое ответа — текст, фильтры, карточки,
   сравнение — сдвигалось на его ширину. Справа же ничего не сдвигалось, и
   выдача заметно кренилась вправо: слева поле в 65 пикселей, справа в 26.
   Ответ здесь — не реплика в мессенджере, а целая витрина, и боковой значок
   ей не подходит. Теперь он в шапке над ответом, а содержимое занимает всю
   колонку ровно от края до края. */
.bot-head{display:block}
.bot-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.ava{width:26px;height:26px;flex:none;border-radius:50%;background:var(--acc);
     display:flex;align-items:center;justify-content:center;font-size:14px}
.bot-name{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
          color:var(--dim);font-weight:600}
.said{min-width:0}
.said p{margin:0 0 12px}

/* Разбор запроса: что сервис понял. Показываем всегда — иначе непонятно,
   почему выдача именно такая, и человек винит поиск вместо формулировки. */
.parsed{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px}
.pchip{font-size:12px;background:var(--acc-bg);color:var(--acc-fg);border:1px solid var(--acc-line);
       padding:3px 9px;border-radius:20px}
.pchip.off{background:var(--raise);color:var(--dim);border-color:var(--line)}
.decision{margin:10px 0 14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--raise)}
.decision-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.confidence{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.decision-q{margin:12px 0 5px;font-weight:700}.decision-why{font-size:12px;color:var(--dim);margin:0 0 8px}
.decision-note{font-size:11.5px;color:var(--dim);margin:10px 0 0}

/* ── ФИЛЬТРЫ ──
   Ряд «таблеток» над выдачей: те же формы, что и у остального интерфейса,
   чтобы не выглядели вставкой из панели администратора. Активный фильтр
   подсвечен — снятый и поставленный обязаны различаться с одного взгляда. */
.filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:2px 0 14px}
.fl{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
    color:var(--sub);background:var(--raise);border:1px solid var(--line);
    border-radius:20px;padding:5px 11px;white-space:nowrap}
.fl b{color:var(--txt);font-weight:600}
.fl input.np{width:56px;background:var(--sunk);border:1px solid var(--line);
             border-radius:6px;color:var(--txt);font:inherit;font-size:12.5px;
             padding:2px 6px;-moz-appearance:textfield}
.fl input.np::-webkit-outer-spin-button,
.fl input.np::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
select.fl{appearance:none;cursor:pointer;padding-right:26px;
          background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),
                           linear-gradient(135deg,var(--sub) 50%,transparent 50%);
          background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px;
          background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.fl:hover,button.fl:hover{border-color:var(--line-hi);color:var(--txt)}

/* ── ВЫПАДАЮЩИЙ СПИСОК ──
   ПОЧЕМУ СВОЙ, А НЕ СИСТЕМНЫЙ. Закрытый `<select>` покрасить можно, а
   ОТКРЫТЫЙ список — нет: его рисует не страница, а операционная система.
   Он приходит со своим фоном, своим шрифтом и прямыми углами — и посреди
   тёмной витрины открывается белый прямоугольник, будто из другой
   программы. Ни выбранное значение отметить, ни длинный список брендов
   сделать читаемым там нельзя.
   Поэтому список свой: те же роли цвета, те же скругления, отметка на
   выбранном, работа с клавиатуры.
   НО НЕ ВЕЗДЕ: на телефоне системный список ЛУЧШЕ — он крупный, листается
   пальцем и стоит там, где человек его ждёт. Поэтому при касании
   остаётся родной `<select>`; свой показывается там, где есть мышь. */
.dd{cursor:pointer;padding-right:24px;position:relative;gap:6px}
.dd::after{content:'';width:0;height:0;margin-left:2px;
  border:4px solid transparent;border-top-color:var(--sub);
  position:absolute;right:10px;top:calc(50% - 1px)}
.dd:hover::after{border-top-color:var(--txt)}
.dd[aria-expanded="true"]{border-color:var(--line-hi);color:var(--txt);
  background:var(--raise2)}
.dd.set{color:var(--acc-fg);border-color:var(--acc-line);
  background:var(--acc-bg);font-weight:600}
.dd.set::after{border-top-color:var(--acc-fg)}
/* Список лежит в конце страницы, а не рядом с кнопкой: полоса фильтров
   прокручивается вбок и обрезает всё, что из неё торчит. */
.dd-pop{position:fixed;z-index:60;min-width:190px;max-width:min(340px,92vw);
  background:var(--raise);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px var(--shadow);padding:6px;
  max-height:min(340px,58vh);overflow-y:auto;
  animation:ddIn .13s ease-out}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}
                to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dd-pop{animation:none}}
.dd-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:9px;font-size:13px;color:var(--sub);cursor:pointer;
  white-space:nowrap}
/* `.here` — то, на чём стоит клавиатура; `.on` — то, что выбрано. Это
   разные вещи, и путать их нельзя: стрелками ходят по списку, не выбирая. */
.dd-opt:hover,.dd-opt.here{background:var(--sunk);color:var(--txt)}
.dd-opt.on{color:var(--acc-fg);font-weight:600}
.dd-opt.on.here{background:var(--acc-bg)}
.dd-tick{width:13px;flex:none;text-align:center;color:var(--acc-fg)}
/* Поиск внутри списка — только в длинных (от дюжины пунктов). Полсотни
   брендов перебирать колесом это не выбор, а работа. Поле прилипает к
   верху: список под ним прокручивается, а строка поиска остаётся. */
.dd-find{position:sticky;top:-6px;background:var(--raise);padding:2px 2px 6px;
  margin:-2px -2px 2px;z-index:1}
.dd-find input{width:100%;background:var(--sunk);border:1px solid var(--line);
  border-radius:9px;color:var(--txt);font:inherit;font-size:13px;
  padding:7px 10px}
.dd-find input:focus{outline:none;border-color:var(--acc-line)}
.dd-none{padding:10px;font-size:13px;color:var(--dim);text-align:center}
button.fl{cursor:pointer}
button.fl.on{background:var(--acc-bg);border-color:var(--acc-line);color:var(--acc-fg);font-weight:600}
button.fl.clear{color:var(--dim)}
.fl.count{background:none;border:0;color:var(--dim);margin-left:auto}

/* ── КАРТОЧКА ──
   Решение о покупке человек принимает по карточке, а не по попапу: попап
   открывают у одного товара из десяти. Поэтому на карточке стоит ровно то,
   из чего это решение складывается, и в порядке важности:
     что это (рисунок и название) → сколько (цена и выгода) →
     когда приедет (дата, а не «2 дн.») → чем отличается (две характеристики).
   Всё остальное — в попап. */
/* СЕМЬ В РЯД на большом экране — так просили, и так больше товаров попадает
   в один взгляд. На узких экранах колонки считаются сами по минимальной
   ширине: жёстких семи там быть не может, карточка стала бы уже пальца. */
.cards{display:grid;gap:10px;align-items:stretch;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
@media (min-width:1180px){ .cards{grid-template-columns:repeat(7,minmax(0,1fr))} }
/* От 901: ниже начинается мобильная раскладка, и она ставит один столбец
   ПОЗЖЕ по файлу — если диапазоны пересекутся, победит она, и на планшете
   останется одна колонка. */
@media (min-width:901px) and (max-width:1179px){
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.card{background:var(--raise);border:1px solid var(--line);border-radius:14px;
      min-width:0;height:100%;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
      transition:border-color .14s,transform .14s,box-shadow .14s}
.card:hover{border-color:var(--line-hi);transform:translateY(-3px);
            box-shadow:0 12px 28px var(--shadow)}
.card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ph)}
.card .ph img{width:100%;height:100%;display:block;object-fit:cover;
              transition:transform .3s}
.card:hover .ph img{transform:scale(1.035)}
/* Скидка — единственная метка, которая имеет право кричать: это причина
   купить сейчас, а не отложить. */
.off{position:absolute;left:7px;top:7px;background:var(--sale);color:var(--on-acc);
     font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;
     letter-spacing:.01em}
.fastb{position:absolute;right:7px;top:7px;background:rgba(16,163,127,.92);
       color:var(--on-acc);font-size:10.5px;font-weight:600;padding:2px 6px;
       border-radius:6px}
/* Состояние товара — внизу снимка, спокойным цветом: это не повод для
   тревоги, но и не мелочь, о которой узнают после покупки. */
.cond{position:absolute;left:7px;bottom:7px;background:var(--sunk);
      color:var(--sub);border:1px solid var(--line);font-size:10.5px;
      padding:2px 6px;border-radius:6px}
/* Цена за единицу — под ценой, мелко: сравнивают по ней, а решают по цене. */
.unitp{font-size:11.5px;color:var(--dim);margin-top:-2px}
/* ── ПЛОТНОСТЬ И РАЗМЕР ──
   Число колонок задаётся переменной, а не набором правил: человек выбирает
   «5 · 7 · 9», и это одно значение, а не три разных раскладки, которые
   потом расходятся между собой. */
.cards.fixed{grid-template-columns:repeat(var(--cols,7),minmax(0,1fr))}
.cards.sz-s .in{padding:7px 8px 9px;gap:5px}
.cards.sz-s .ttl{font-size:12px}
.cards.sz-s .price b{font-size:16px}
.cards.sz-l .in{padding:14px 15px 16px;gap:9px}
.cards.sz-l .ttl{font-size:15.5px}
.cards.sz-l .price b{font-size:22px}

/* ── СПИСОК ВМЕСТО СЕТКИ ──
   Тот же товар, но строкой: помещается вчетверо больше сведений — все
   характеристики, продавец, артикул. Нужен тем, кто сравнивает вдумчиво,
   а не выбирает глазами. */
.cards.list{display:block}
.cards.list .card{display:grid;grid-template-columns:120px minmax(0,1fr) 200px;
                  gap:14px;margin-bottom:10px;align-items:center}
.cards.list .ph{border-radius:12px 0 0 12px;overflow:hidden}
.cards.list .ph img{aspect-ratio:1/1}
.cards.list .in{padding:10px 0}
.cards.list .ttl{-webkit-line-clamp:1;font-size:15px}
.cards.list .tags{max-height:none}
.cards.list .price{margin-top:6px}
.cards.list .buy{align-self:center;margin:0 14px 0 0}
.cards.list .row-right{padding:10px 14px 10px 0;display:flex;
                       flex-direction:column;gap:6px;align-items:flex-end}
.card .extra{font-size:11px;color:var(--dim);display:flex;gap:8px;
             flex-wrap:wrap}
@media (max-width:900px){
  .cards.list .card{grid-template-columns:84px minmax(0,1fr)}
  .cards.list .row-right{grid-column:1 / -1;align-items:stretch;padding:0 12px 12px}
}

/* Размеры внутри карточки заданы под узкую колонку: при семи в ряд на
   товар приходится около 165 пикселей, и прежние 14.5 px названия давали
   три строки на каждое слово. */
.card .in{padding:9px 10px 11px;display:flex;flex-direction:column;gap:6px;flex:1}
.meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);
      min-width:0}
.meta > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta .rate{margin-left:auto;color:var(--warn);white-space:nowrap;flex:none}
.meta .rate i{display:none}
.card .ttl{font-size:13px;line-height:1.32;font-weight:600;margin:0;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
           overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden;max-height:20px}
.tags span{font-size:10.5px;color:var(--sub);background:var(--raise2);
           border-radius:5px;padding:1px 6px;white-space:nowrap;
           max-width:100%;overflow:hidden;text-overflow:ellipsis}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:auto}
.price b{font-size:18px;font-weight:700;letter-spacing:-.03em}
.price s{color:var(--dim);font-size:12px}
.price em{font-style:normal;font-size:11px;color:var(--acc-fg);font-weight:600}
.ship{font-size:11.5px;color:var(--sub);display:flex;align-items:baseline;
      gap:5px;flex-wrap:wrap}
.ship b{color:var(--txt);font-weight:600}
.ship.soon b{color:var(--acc-fg)}
.stars{color:var(--warn);white-space:nowrap}
.badge{font-size:11px;padding:2px 7px;border-radius:20px;border:1px solid var(--line)}
.badge.fast{color:var(--acc-fg);border-color:var(--acc-line);background:var(--acc-bg)}
.buy{display:block;text-align:center;background:var(--acc);color:var(--on-acc);
     font-weight:600;font-size:12.5px;padding:8px;border-radius:8px;
     text-decoration:none;margin-top:2px;transition:background .12s}
.buy:hover{background:var(--acc2)}
.row2{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);
      flex-wrap:wrap}

/* ── сравнение ── */
.cmp{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);
     overflow:hidden;background:var(--sunk)}
.cmp-h{display:flex;align-items:center;gap:10px;padding:11px 14px;
       font-size:14px;font-weight:600;cursor:pointer}
.cmp-h .cnt{color:var(--dim);font-weight:400;font-size:13px}
.cmp-h .arr{margin-left:auto;color:var(--dim);transition:transform .15s}
.cmp.open .cmp-h .arr{transform:rotate(180deg)}
.cmp-b{display:none;overflow-x:auto;border-top:1px solid var(--line);
       position:relative}
.cmp.open .cmp-b{display:block}
/* ── ТАБЛИЦА, КОТОРАЯ ШИРЕ ЭКРАНА ──
   Столбцы обрывались у правого края без единого признака, что там что-то
   есть: выглядело как поломка вёрстки, а не как «прокрутите вбок».
   Подсказка и растушёвка появляются ТОЛЬКО когда таблица действительно не
   помещается (класс ставит `compare()` после замера) — постоянная тень у
   таблицы, которая влезла целиком, обещала бы несуществующее продолжение. */
.cmp-h .swipe{color:var(--dim);font-weight:400;font-size:12px;
              border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.cmp.wide .cmp-b::after{content:'';position:sticky;right:0;top:0;float:right;
  width:44px;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sunk))}
table.ct{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}
table.ct th,table.ct td{padding:9px 12px;text-align:left;
                        border-bottom:1px solid var(--line2)}
table.ct thead th{position:sticky;top:0;background:var(--head);font-size:12px;
                  color:var(--sub);font-weight:600;z-index:1}
table.ct tbody th{color:var(--sub);font-weight:500;background:var(--sunk);
                  position:sticky;left:0;z-index:1}
table.ct td.best{color:var(--acc-fg);font-weight:700}
table.ct tr.diff th{color:var(--txt)}
table.ct td .mini{color:var(--dim);font-size:12px}

/* ── попап товара ── */
#modal{position:fixed;inset:0;z-index:50;display:none}
#modal.on{display:block}
#modal .back{position:absolute;inset:0;background:var(--veil)}
#modal .win{position:absolute;inset:3vh 50% auto auto;transform:translateX(50%);
            width:min(1000px,94vw);max-height:94vh;background:var(--sunk);
            border:1px solid var(--line);border-radius:16px;overflow:hidden;
            display:flex;flex-direction:column;box-shadow:0 30px 80px var(--shadow)}
.mw-h{display:flex;align-items:center;gap:12px;padding:12px 16px;
      border-bottom:1px solid var(--line);flex:none}
.mw-h .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── СТРАНИЦА ТОВАРА ──
   Не попап: у неё свой адрес, её присылают в переписке и открывают из
   поиска. Поэтому она отвечает на всё сразу и не спешит — попап краток,
   потому что поверх выдачи, а страница может позволить себе развернуться. */
.pp{max-width:1180px;margin:0 auto}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);
        margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--sub);text-decoration:none;cursor:pointer}
.crumbs a:hover{color:var(--txt);text-decoration:underline}
.pp-top{display:grid;gap:32px;grid-template-columns:minmax(0,470px) minmax(0,1fr);
        align-items:start}
/* ── ПРОПОРЦИЯ СНИМКА ──
   Квадрат, и он задан ЗАРАНЕЕ, а не выводится из файла. Иначе высота
   меняется вслед за картинкой: у одного товара настоящее фото 400×400, у
   другого рисунок, у третьего широкий кадр — и страница прыгает при каждом
   переключении. Плюс браузер не знает высоту до загрузки и дёргает вёрстку.
   `contain` вместо `cover`: обрезать товар по краям нельзя, человек пришёл
   смотреть именно на него. */
/* `height:auto` обязателен. Атрибуты `width`/`height` у картинки — это не
   только подсказка браузеру о пропорции: они превращаются в прямое указание
   высоты и перебивают `aspect-ratio`. Без этой строки снимок брал высоту
   800 пикселей при ширине 420 — то есть ровно ту вытянутость, от которой
   мы и уходим. */
.pp-top img.hero{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  border-radius:14px;display:block;background:var(--ph);padding:6px}
.no-product-image{aspect-ratio:1/1;border:1px dashed var(--line);border-radius:14px;
  display:grid;place-items:center;background:var(--ph);color:var(--dim);
  text-align:center;padding:24px}
.no-product-image[hidden]{display:none!important}
.pp h1{font-size:26px;line-height:1.25;margin:2px 0 10px;letter-spacing:-.01em}
.pp-brand{color:var(--dim);font-size:13.5px}
.pp-buy{background:var(--raise);border:1px solid var(--line);border-radius:14px;
        padding:16px;margin-top:16px}
.pp-cols{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
         margin-top:30px}
.pp h3{font-size:15px;margin:0 0 10px;letter-spacing:-.01em}
/* График цены: две-три точки не нуждаются в библиотеке, а библиотека
   нуждается в сети — которой у страницы может не быть. */
.chart-price{background:var(--raise);border:1px solid var(--line);
             border-radius:12px;padding:12px}
.chart-price svg{width:100%;height:130px;display:block}
.pp-sim{margin-top:30px}
@media (max-width:900px){
  .pp-top,.pp-cols{grid-template-columns:1fr}
  .pp h1{font-size:21px}
}
.wolldi-pick{display:flex;gap:6px;align-items:flex-start;padding:7px 8px;
  border-radius:9px;background:color-mix(in srgb,var(--acc) 9%,var(--raise));
  color:var(--sub);font-size:10.5px;line-height:1.35}
.wolldi-pick b{color:var(--acc-fg);white-space:nowrap}
.wolldi-pick span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

/* ── ПОПАП ──
   Отвечает на три вопроса в этом порядке: что это, почему столько денег,
   когда приедет. Поэтому цена, доставка и кнопка стоят выше описания:
   описание читают те, кто уже заинтересовался, а цену смотрят все. */
/* `overflow-anchor:none` — не украшение. Содержимое окна подменяется
   целиком при каждом открытии, и «привязка прокрутки» браузера честно
   пытается удержать прежнее место: открытый следом товар показывался с
   того пикселя, на котором закрыли предыдущий. Якорить тут нечего —
   это каждый раз другой товар. */
.mw-b{overflow-y:auto;overflow-x:hidden;overflow-anchor:none;padding:22px 24px 26px;display:grid;
      gap:30px;
      grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start}
/* Снимок квадратный и с заранее заданной пропорцией — по той же причине,
   что и на странице: иначе попап меняет высоту при переключении ракурса. */
.mw-b img.hero{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  padding:6px;border-radius:var(--r);display:block;background:var(--ph)}
/* Левая колонка липкая: докрутив до характеристик, человек продолжает
   видеть товар. Без этого он смотрит на текст, забыв, о чём тот. */
.mw-left{position:sticky;top:0}
.mw-sect{margin-bottom:22px}
.history-manager,.settings-panel{display:grid;gap:14px}
.history-manager .mw-sect,.settings-panel .mw-sect{margin:0;padding:16px;
  border:1px solid var(--line);border-radius:14px;background:var(--raise)}
.history-manager input,.history-manager textarea,.settings-panel input:not(.np){
  width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font:inherit;padding:10px 12px;outline:none}
.history-manager textarea{min-height:96px;resize:vertical;line-height:1.5}
.history-manager input:focus,.history-manager textarea:focus,
.settings-panel input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.settings-panel select{min-height:42px;background:var(--sunk);border:1px solid var(--line);
  border-radius:10px;color:var(--txt);font:inherit;padding:9px 34px 9px 12px;outline:none}
.settings-panel select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.history-manager .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.history-manager .acts .buy{padding:9px 18px}
.history-manager .hint{display:block;margin-top:9px;line-height:1.45}
.settings-pane>.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-pane>.settings-grid .mw-sect{height:100%}
.settings-grid .settings-wide{grid-column:1/-1}
.settings-tabs{position:sticky;top:-1px;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);
  gap:6px;padding:6px;background:color-mix(in srgb,var(--sunk) 94%,transparent);
  border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(12px)}
.settings-tab{min-height:42px;border:0;border-radius:10px;background:transparent;color:var(--sub);
  font:600 13px/1.2 inherit;cursor:pointer;padding:8px 12px}
.settings-tab:hover{background:var(--raise)}.settings-tab.on{background:var(--acc-bg);color:var(--acc)}
.settings-pane{display:grid;gap:14px;min-width:0;padding-bottom:90px}
.settings-pane[hidden]{display:none!important}
.newsletter-card{border-color:color-mix(in srgb,var(--acc) 42%,var(--line))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 7%,var(--raise)),var(--raise))!important}
.newsletter-card .email-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.newsletter-card .email-mark{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;
  background:var(--acc-bg);color:var(--acc);font-size:20px}
.newsletter-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
.newsletter-options .fl{min-height:44px;justify-content:flex-start!important;text-align:left!important}
.newsletter-card input[type=checkbox]{width:18px!important;height:18px!important;flex:none;accent-color:var(--acc)}
.subscribe-switch{display:grid!important;grid-template-columns:22px minmax(0,1fr);align-items:center;
  gap:10px;min-height:50px;padding:12px 14px!important;border:1px solid var(--line)!important;
  border-radius:12px!important;background:var(--sunk)!important;color:var(--txt)!important}
.email-field{display:grid;gap:7px;margin-top:14px}.email-field>span{font-size:12px;font-weight:700;color:var(--sub)}
.newsletter-options label{border:1px solid var(--line)!important;background:var(--sunk)!important;
  border-radius:11px!important;padding:10px 12px!important;color:var(--txt)!important}
.newsletter-options label:has(select){display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:10px}
.newsletter-options select{width:100%;min-width:0}
.consent-row{display:grid!important;grid-template-columns:20px minmax(0,1fr);gap:10px;
  align-items:start;padding:12px 2px 0;line-height:1.5}
@media(max-width:700px){
  .settings-pane>.settings-grid{grid-template-columns:1fr}
  .settings-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:4px;border-radius:12px}
  .settings-tab{min-height:44px;padding:7px 5px;font-size:11px}
  .newsletter-options{grid-template-columns:1fr}
  .history-manager .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .history-manager .filters .fl{justify-content:center;white-space:normal;text-align:center}
  .history-manager .acts>*{flex:1;justify-content:center}
  #top .brand{padding-right:6px}
  #top .brand img{width:108px;height:26px}
}
/* ── ВЫБОР ЦВЕТА ──
   Каждый образец покрашен СОБОЙ: полсотни названий словами не различаются
   («Аметист» и «Слива» — это что?), а кнопкой и ценником — сразу. Сетка
   прокручивается внутри себя, чтобы настройки не растянулись на три
   экрана и остальные пункты остались достижимы. */
.pal-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  max-height:none;overflow:visible;padding:2px;margin-bottom:2px}
.pal-sw{background:var(--s-raise);border:1px solid var(--s-line);
  border-radius:10px;padding:7px 8px 8px;cursor:pointer;text-align:left;
  font:inherit;color:var(--s-txt);display:block;width:100%}
.pal-sw:hover{border-color:var(--s-acc)}
.pal-sw.on{outline:2px solid var(--acc);outline-offset:1px}
.pal-nm{display:block;font-size:11.5px;font-weight:600;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-row{display:flex;align-items:center;gap:6px}
.pal-btn{background:var(--s-acc);color:var(--s-on);font-size:10px;
  font-weight:600;border-radius:6px;padding:3px 7px}
.pal-pr{font-size:12px;font-weight:700;letter-spacing:-.02em}
.mw-sect h4,.mw-ask h4{margin:0 0 9px;font-size:12px;color:var(--dim);
            text-transform:uppercase;letter-spacing:.09em}
/* Вопрос о товаре — во всю ширину под обеими колонками и отделён чертой:
   это не часть описания, а обращение к другому собеседнику.
   Своя подложка и слой нужны из-за ЛИПКОЙ левой колонки: докрученная до
   низа, она наезжала на этот блок, и подпись под снимком читалась поверх
   заголовка «Спросить о товаре». Подложка того же цвета, что и окно, —
   границы её не видно, а перекрытие она снимает. */
.mw-ask{grid-column:1/-1;border-top:1px solid var(--line2);padding-top:20px;
        position:relative;z-index:1;background:var(--sunk)}
/* В попапе карточка вопроса тянется во всю ширину окна: там и без того
   тесно, и оставлять справа пустую треть незачем. Подложка у неё та же,
   что у блока цены, — они и стоят по смыслу рядом. */
.mw-ask .askcard{max-width:none}
.mw-ask .qa,.mw-ask .answer{max-width:none}
.mbrand{font-size:13px;color:var(--dim);margin-bottom:4px}
.mw-b h2{margin:0 0 10px;font-size:22px;line-height:1.3;letter-spacing:-.01em}
/* Цена, доставка и кнопка — одним блоком на подложке. Пока они лежали
   вперемешку с текстом, взгляд искал их заново на каждом товаре. */
.mbuy{background:var(--raise);border:1px solid var(--line);border-radius:14px;
      padding:15px 16px;margin:14px 0 18px}
.mstock{font-size:13.5px;font-weight:600;color:var(--acc-fg);margin-bottom:6px}
.musp{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px;
       margin-top:12px;font-size:12.5px;color:var(--sub)}
.musp i{font-style:normal;margin-right:6px}
.mrate{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:10px}
.mrate .n{font-weight:700}
.mrate span{color:var(--dim);font-size:13px}
/* «Нет оценок» — не ошибка, а состояние: у товара из открытой базы оценок
   не бывает. Поэтому спокойный цвет, а не тревожный. */
.rate.none{color:var(--dim);font-weight:400}
/* Распределение оценок: средний балл 4.4 бывает у товара, который всем
   нравится, и у товара, который половину бесит. Полоски показывают разницу. */
.bars{display:grid;gap:3px;margin:0 0 16px;max-width:320px}
.bar{display:grid;grid-template-columns:22px 1fr 38px;align-items:center;gap:8px;
     font-size:12px;color:var(--sub)}
.bar i{display:block;height:7px;border-radius:4px;background:var(--line);
       overflow:hidden}
.bar i u{display:block;height:100%;background:var(--warn);text-decoration:none}
.mprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.mprice b{font-size:30px;font-weight:700;letter-spacing:-.03em}
.mprice s{color:var(--dim)}
.mprice em{font-style:normal;color:var(--on-acc);background:var(--sale);font-size:12px;
           font-weight:700;padding:2px 7px;border-radius:6px}
.mship{font-size:14px;color:var(--sub);margin-bottom:14px}
.mship b{color:var(--txt)}
.buy.big{font-size:15px;padding:13px}
/* ── ПАНЕЛЬ ДЕЙСТВИЙ НАСТРОЕК ──
   Форма длинная, и на телефоне кнопка «Сохранить» уезжала за экран: чтобы
   её найти, надо долистать до конца, а ответ о сохранении оказывался ещё
   ниже. Панель прилипает к низу окна настроек и держит при себе ответ. */
.set-bar{position:sticky;bottom:0;z-index:5;display:grid;gap:8px;
  padding:12px 0 4px;background:linear-gradient(to bottom,
  transparent, var(--bg) 26%)}
.set-acts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.set-acts .fl{min-height:46px;justify-content:center;padding:0 18px}
.set-bar .buy.big{margin:0;min-height:46px}
/* Ответ занимает место всегда: без этого строка появлялась и весь
   экран подпрыгивал ровно в тот момент, когда на него смотрят. */
.set-said{min-height:20px;font-size:13.5px;line-height:20px;color:var(--sub);
  opacity:0;transition:opacity .15s ease}
.set-said.on{opacity:1;color:var(--acc)}
.set-said.bad{color:var(--bad)}
.spec{display:grid;grid-template-columns:minmax(120px,190px) 1fr;
      gap:0;font-size:14px;border:1px solid var(--line);border-radius:10px;
      overflow:hidden}
.spec dt{color:var(--sub);padding:9px 12px;background:var(--head)}
.spec dd{margin:0;padding:9px 12px;background:var(--sunk)}
.rev{border-top:1px solid var(--line2);padding:11px 0}
.rev:first-of-type{border-top:0}
.rev .s{color:var(--warn);font-size:12px;margin-bottom:2px}
.demo-note{font-size:12px;color:var(--dim);border:1px dashed var(--line);
           border-radius:8px;padding:9px 11px;margin-top:12px;line-height:1.45}
/* Нижняя полоса с ценой и кнопкой: в длинном попапе, докрутив до отзывов,
   человек уже не видит кнопку — а решение он принимает как раз там. */
.mw-f{flex:none;border-top:1px solid var(--line);padding:10px 16px;
      display:flex;align-items:center;gap:14px;background:var(--head)}
.mw-f .p{font-size:19px;font-weight:700}
.mw-f .s{color:var(--dim);font-size:13px}
.mw-f .buy{margin:0 0 0 auto;padding:10px 22px}

/* ── ввод ── */
/* Поле ввода живёт в ТОЙ ЖЕ колонке, что и лента: одинаковые края —
   единственное, что связывает вопрос и ответ в один экран. */
/* Отступ сверху — это высота растушёвки: лента уходит под поле ввода, и без
   него карточки обрывались ровно по прямой линии, как обрезанные. */
#bottom{flex:none;padding:22px var(--gut) 18px;
        background:linear-gradient(180deg,transparent,var(--bg) 60%)}
/* Ширина считается ИЗ ТОЙ ЖЕ колонки за вычетом её полей: у `.wrap` поля
   внутри, у `#bottom` — тоже, и без вычитания края разъезжались бы ровно на
   `--gut` на широком экране, где колонка упирается в свой предел. */
#form{max-width:calc(var(--col) - var(--gut) * 2);margin:0 auto;
      background:var(--raise);
      border:1px solid var(--line);border-radius:26px;padding:8px 8px 8px 18px;
      display:flex;align-items:flex-end;gap:8px}
#form:focus-within{border-color:var(--line-hi)}
#q{flex:1;background:none;border:0;outline:0;color:var(--txt);font:inherit;
   resize:none;max-height:180px;padding:9px 0;line-height:1.5}
/* Кнопка залита цветом ТЕКСТА, поэтому стрелка на ней — цвета ФОНА, а не
   белая. Белая стрелка на светлой кнопке в тёмной теме просто исчезает —
   что и случилось, когда цвет здесь взяли «как поверх акцента». */
#send{width:36px;height:36px;flex:none;border-radius:50%;background:var(--txt);
      color:var(--bg);display:flex;align-items:center;justify-content:center;
      font-size:17px;font-weight:700}
#send:disabled{opacity:.3;cursor:default}
.foot{max-width:calc(var(--col) - var(--gut) * 2);margin:8px auto 0;
      text-align:center;font-size:11px;color:var(--dim)}
.site-disclosure{line-height:1.45}
.legal-nav{display:flex;justify-content:center;gap:6px 14px;flex-wrap:wrap;
  min-height:30px;margin-top:7px;padding-top:7px;border-top:1px solid var(--line2)}
.legal-nav a{color:var(--sub);text-decoration:none;display:inline-flex;align-items:center}
.legal-nav a:hover{text-decoration:underline;color:var(--txt)}
.affiliate-inline{font-size:11.5px;color:var(--dim);margin:7px 0 10px;
  padding-left:9px;border-left:2px solid var(--acc-line)}
/* Управляемые страницы остаются частью витрины, но читаются как документ:
   узкая строка, крупные интервалы, печать без панелей приложения. */
.legal-page{max-width:820px;margin:0 auto;padding:4px 0 40px}
.legal-page h1{font-size:32px;line-height:1.15;letter-spacing:-.025em;margin:18px 0 10px}
.legal-summary{font-size:17px;color:var(--sub);margin:0 0 28px;max-width:68ch}
.legal-body{font-size:15.5px;line-height:1.72}
.legal-body h2{font-size:21px;line-height:1.3;margin:32px 0 10px;letter-spacing:-.01em}
.legal-body h3{font-size:17px;margin:24px 0 8px}
.legal-body p{margin:0 0 14px}
.legal-body ul,.legal-body ol{padding-left:24px;margin:0 0 16px}
.legal-body li{margin:6px 0}
.legal-body a{color:var(--acc-fg);text-decoration:underline;text-underline-offset:2px}
.legal-body blockquote{margin:18px 0;padding:12px 16px;border-left:3px solid var(--acc);
  background:var(--sunk);color:var(--sub)}
.legal-updated{margin-top:32px;padding-top:16px;border-top:1px solid var(--line2);
  color:var(--dim);font-size:12px}
.news-page{max-width:1180px;padding-bottom:72px}.news-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:28px;align-items:end;margin:20px 0 38px;padding:32px 34px;border:1px solid var(--line);
  border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 12%,var(--raise)),var(--raise) 62%);
  box-shadow:0 12px 36px var(--shadow)}
.news-eyebrow{display:block;margin-bottom:11px;color:var(--acc-fg);font-size:11px;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.news-hero h1{max-width:760px;margin:0 0 12px;font-size:clamp(34px,4.2vw,56px);
  line-height:1.02;letter-spacing:-.045em}.news-hero p{max-width:670px;margin:0;color:var(--sub);font-size:17px;line-height:1.6}
.news-hero-note{display:grid;gap:3px;min-width:144px;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;background:color-mix(in srgb,var(--sunk) 82%,transparent);color:var(--sub);font-size:12px;line-height:1.35}
.news-hero-note strong{color:var(--txt);font-size:20px;letter-spacing:-.03em}.news-hero-note span{text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:800;color:var(--dim)}
.news-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 17px}
.news-section-head h2{margin:0;font-size:23px;letter-spacing:-.03em}.news-section-head span{color:var(--dim);font-size:12px}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.news-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--raise);
  box-shadow:0 8px 24px var(--shadow);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.news-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 46%,var(--line));box-shadow:0 16px 36px var(--shadow)}
.news-card>img,.news-no-image{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--sunk)}
.news-card.featured{grid-column:span 2;display:grid;grid-template-columns:minmax(285px,45%) minmax(0,1fr)}
.news-card.featured>img,.news-card.featured>.news-no-image{height:100%;min-height:310px;aspect-ratio:auto}
.news-card.featured .news-card-body{display:flex;flex-direction:column;justify-content:center;padding:32px}
.news-card.featured h2{max-width:19ch;font-size:clamp(25px,2.8vw,36px);line-height:1.12}
.news-no-image{display:grid;place-items:center;color:var(--dim);font-size:13px}.news-card-body{padding:19px 19px 17px}
.news-card h2{font-size:20px;line-height:1.27;margin:10px 0 9px;letter-spacing:-.018em}.news-card h2 a{color:var(--txt);text-decoration:none}.news-card h2 a:hover{color:var(--acc-fg)}
.news-card p{color:var(--sub);font-size:14px;line-height:1.55;margin:0 0 13px}.review-kicker{display:flex;align-items:center;gap:7px;color:var(--acc-fg);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.review-kicker:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.news-read{display:inline-flex;align-items:center;gap:5px;min-height:38px;color:var(--acc-fg);font-size:13px;font-weight:800;text-decoration:none}.news-read:hover{text-decoration:underline;text-underline-offset:3px}
.news-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:28px 0}
.news-pager a:last-child{text-align:right;justify-content:flex-end}.news-pager a{color:var(--acc-fg);
  text-decoration:none;min-height:44px;display:flex;align-items:center}
.news-empty{padding:35px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--sub)}
.review-page{max-width:980px;padding-bottom:70px}.review-head{max-width:800px;padding:30px 0 4px}
.review-head h1{margin:9px 0 16px;font-size:clamp(35px,4.5vw,54px);line-height:1.06;letter-spacing:-.04em}
.review-head>p{max-width:720px;margin:0;color:var(--sub);font-size:18px;line-height:1.6}
.review-byline{display:flex;align-items:center;gap:10px;margin-top:20px;color:var(--dim);font-size:12px}
.review-byline span{padding-right:10px;border-right:1px solid var(--line)}.review-byline b{color:var(--txt)}
.review-product{display:grid;grid-template-columns:minmax(260px,40%) minmax(0,1fr);
  gap:0;margin:34px 0 42px;overflow:hidden;border:1px solid var(--line);
  border-radius:20px;background:var(--raise);box-shadow:0 14px 42px var(--shadow)}
.review-product-media{display:grid;place-items:center;min-height:360px;background:var(--sunk)}
.review-product img{display:block;width:100%;height:100%;max-height:440px;object-fit:contain}
.review-product-info{display:flex;flex-direction:column;justify-content:center;padding:34px}
.review-product h2{margin:9px 0 12px;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.025em}
.review-product-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.review-product-tags span{padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--sub);font-size:11px}
.review-price{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}.review-price strong{font-size:26px;letter-spacing:-.02em}
.review-price small{color:var(--dim)}.review-merchant{display:flex;width:100%;min-height:48px;
  align-items:center;justify-content:center;gap:7px;margin:0 0 10px;padding:0 18px;text-decoration:none}
.review-commission{display:block;color:var(--dim);font-size:11px;line-height:1.45}
.review-page>.legal-body{max-width:760px;margin:0 auto;font-size:16px;line-height:1.78}
.review-page>.legal-body>blockquote:first-child{margin:0 0 34px;border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:10px;background:var(--sunk)}
.review-page>.legal-updated{max-width:760px;margin-left:auto;margin-right:auto}
/* ── ПОЛЕ ПОИСКА ОСТАЁТСЯ И НА ЮРИДИЧЕСКИХ СТРАНИЦАХ ──
   Раньше здесь стояло `#form{display:none}`: раз это документ, поиск как
   бы ни к чему. На деле выходило иначе — человек открывал «Политику»,
   дочитывал и оказывался в тупике: поля нет, и чтобы вернуться к покупкам,
   надо догадаться нажать «Новый поиск» в углу. Выход из раздела не должен
   быть головоломкой, а поле внизу — единственная привычная дорога назад.
   `content-mode` остаётся ради отступа: у документа нет ленты сообщений,
   и без него поле висело бы в пустоте. */
#bottom.content-mode{padding-top:8px;background:var(--bg)}
.privacy-panel{margin:24px 0;padding:18px;border:1px solid var(--line);
  border-radius:12px;background:var(--raise)}
.privacy-panel h2{font-size:18px;margin:0 0 7px}
.privacy-panel .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.privacy-state{font-size:13px;color:var(--sub)}

/* ── ПОЛОСКА СОГЛАСИЯ ──
   Внизу и узкой лентой: она не должна закрывать товар, ради которого
   пришли. Обе кнопки равноправны по размеру — «Только необходимое» не
   спрятано мелким серым, иначе это не выбор, а его имитация. */
.consent{position:fixed;left:0;right:0;bottom:96px;z-index:60;display:flex;
  flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;
  background:var(--raise);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px var(--shadow);font-size:13px;color:var(--sub)}
.consent span{flex:1;min-width:240px}
.consent .buy{padding:8px 18px;font-size:13px}
.consent .fl{padding:8px 14px}

/* «ищу…» — три точки, а не спиннер: видно, что работа идёт, и не создаётся
   впечатления, будто страница подвисла. */
.dots span{display:inline-block;width:6px;height:6px;margin-right:4px;
           border-radius:50%;background:var(--sub);animation:b 1.2s infinite}
.dots span:nth-child(2){animation-delay:.15s}
.dots span:nth-child(3){animation-delay:.3s}
@keyframes b{0%,60%,100%{opacity:.25;transform:translateY(0)}
             30%{opacity:1;transform:translateY(-3px)}}

/* ── УЗКИЙ ЭКРАН ──
   На телефоне колонка истории не «сжимается», а уезжает: 260 пикселей из 380
   — это две трети экрана под список, который нужен раз в сессию. Поэтому она
   выезжает поверх ленты и закрывается затемнением, как ящик в мобильных
   приложениях. */
#backdrop{display:none;position:absolute;inset:0;z-index:15;
          background:var(--veil)}
#backdrop.on{display:block}
/* ── ПОДСКАЗКИ ПРИ НАБОРЕ ──
   Список появляется над полем со сдвигом снизу вверх: движение оттуда, куда
   человек смотрит и где печатает. Появление из ниоткуда читается как рывок,
   а не как ответ. */
/* Подсказки — над полем и ровно по его ширине: список шириной с одну вещь,
   а поле под ним с другую, читается как чужой элемент. */
#sugbox{max-width:calc(var(--col) - var(--gut) * 2);margin:0 auto 8px;
  background:var(--raise);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px var(--shadow);
  animation:sugIn .22s cubic-bezier(.2,.8,.3,1)}
@keyframes sugIn{from{opacity:0;transform:translateY(10px)}
                 to{opacity:1;transform:none}}
/* Уважение к настройке «меньше движения»: для части людей анимация — не
   украшение, а причина тошноты и головной боли. */
@media (prefers-reduced-motion:reduce){#sugbox{animation:none}}
.sug{display:flex;align-items:center;gap:11px;padding:9px 13px;cursor:pointer;
  border-bottom:1px solid var(--line2)}
.sug:last-child{border-bottom:0}
.sug:hover,.sug.on{background:var(--raise2)}
.sug .ic{width:38px;height:38px;flex:none;border-radius:9px;object-fit:cover;
  background:var(--ph);display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--sub)}
.sug .tx{flex:1;min-width:0}
.sug .t1{font-size:14.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* Введённые буквы жирным — человек видит, ЧТО именно совпало, и не гадает,
   почему ему это показали. */
.sug .t1 b{font-weight:700;color:var(--acc-fg)}
.sug .t2{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sug .pr{font-size:13.5px;font-weight:700;white-space:nowrap;margin-left:auto}
.sug .kd{font-size:10.5px;color:var(--sub);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;white-space:nowrap}
.sug-head{padding:7px 13px;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.07em;background:var(--sunk)}
.sug-empty{padding:14px 13px;color:var(--sub);font-size:13.5px}
#qclear{width:30px;height:30px;flex:none;border-radius:50%;
  color:var(--sub);font-size:13px;align-self:flex-end;margin-bottom:3px}
#qclear:hover{background:var(--raise2);color:var(--txt)}

/* ── СТРАНИЦА ТОВАРА: БЛОКИ ДЛЯ ПОИСКА И ДЛЯ ЧЕЛОВЕКА ──
   Порядок блоков — это порядок вопросов покупателя: что это → сколько →
   когда приедет → что если не подойдёт → а что похожего. */
.pp-sect{margin:26px 0;padding-top:18px;border-top:1px solid var(--line2)}
.pp-sect h2, .pp-cols h2, .pp-sim h2{font-size:17px;margin:0 0 10px}
.pp-sect p{margin:0 0 10px;max-width:70ch}
.blist{margin:6px 0 12px;padding-left:20px;color:var(--sub)}
.blist li{margin:3px 0}
/* Подзаголовки внутри описания. Они не украшение: по ним человек находит
   нужный раздел, не читая всё, а поисковик понимает, где в тексте про
   размеры, а где про доставку. */
.bh2{font-size:17px;margin:20px 0 8px;letter-spacing:-.01em}
.bh2:first-child{margin-top:0}
.xlink{color:var(--sub)}
.xlink a{color:var(--acc-fg);cursor:pointer;text-decoration:underline}
.thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px}
.thumb{width:64px;height:64px;object-fit:cover;border-radius:9px;flex:none;
  border:2px solid transparent;cursor:pointer;background:var(--ph)}
.thumb.on{border-color:var(--acc)}
.stock{margin:6px 0 2px;font-weight:600;font-size:13.5px;color:var(--acc-fg)}
.stock.low{color:var(--warn)}
.stock.out{color:var(--bad)}
.stock.order{color:var(--sub)}
.cur{font-size:12px;color:var(--dim);margin-left:6px;font-weight:400}
/* ── ВЫБОР РАЗНОВИДНОСТИ ──
   Кнопками, а не выпадающим списком: варианты видно все сразу, и «нет в
   наличии» читается до нажатия, а не после. Размер кнопки не меньше 38 px —
   это нижняя граница, ниже которой пальцем промахиваются. */
.vars{margin:10px 0 4px;display:grid;gap:10px}
.vax{display:grid;gap:6px}
.vlab{font-size:12px;color:var(--dim);text-transform:uppercase;
      letter-spacing:.05em}
.vlab b{color:var(--txt);text-transform:none;letter-spacing:0;font-weight:600}
.vrow{display:flex;flex-wrap:wrap;gap:6px}
.vchip{min-height:38px;padding:8px 13px;border-radius:10px;cursor:pointer;
  background:var(--sunk);color:var(--txt);border:1px solid var(--line);
  font:inherit;font-size:13.5px;transition:border-color .12s,background .12s}
.vchip:hover{border-color:var(--line-hi)}
.vchip.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc-fg);
  font-weight:600}
.vchip.gone{opacity:.45;text-decoration:line-through}
.vmini{font-size:12.5px;color:var(--dim)}
.vtag{font-size:12px;color:var(--acc-fg);background:var(--acc-bg);
  border:1px solid var(--acc-line);border-radius:7px;padding:2px 7px;
  display:inline-block;margin:2px 0 0}
.vfrom{font-size:13px;color:var(--sub);margin-top:2px}
.usp{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px;margin-top:12px;
  font-size:12.5px;color:var(--sub)}
.usp i{font-style:normal;margin-right:6px}
.faq{border-bottom:1px solid var(--line2);padding:9px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:14.5px}
.faq div{margin-top:6px;color:var(--sub);max-width:70ch}
.sizes{border-collapse:collapse;width:100%;font-size:13px}
.sizes th,.sizes td{border:1px solid var(--line);padding:6px 9px;text-align:left}
.sizes th{background:var(--head);color:var(--sub);font-size:12px}
.scrollx{overflow-x:auto}
.video{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden}
/* Подложка под видео — та же роль, что под картинкой: цвет числом здесь
   означал бы, что в светлой теме останется чёрный прямоугольник. */
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;
  border:0;background:var(--ph);object-fit:contain}
.rev .s{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.revph{max-width:160px;border-radius:8px;margin-top:6px;display:block}
.reply{margin-top:6px;padding:8px 10px;background:var(--sunk);border-radius:9px;
  font-size:13px;color:var(--sub)}
.upd{margin-top:22px;color:var(--dim);font-size:12px}
/* ── ВОПРОС О ТОВАРЕ ──
   Одна карточка сверху вниз: кто отвечает → что уходит наружу → поле во всю
   ширину → счётчик и кнопка. Рамка нужна не для красоты: без неё пояснение,
   поле и кнопка читались как три случайно оказавшихся рядом элемента. */
.askcard{background:var(--raise);border:1px solid var(--line);
  border-radius:14px;padding:16px;max-width:760px;margin-top:10px}
.askcard textarea{width:100%;background:var(--sunk);
  border:1px solid var(--line);border-radius:11px;color:var(--txt);font:inherit;
  padding:11px 13px;resize:vertical;min-height:84px;margin-top:12px;
  display:block}
.askcard textarea:focus{outline:none;border-color:var(--line-hi)}
.askcard textarea:disabled{opacity:.55}
/* Подвал карточки: слева счётчик знаков, справа кнопка. Счётчик — про то,
   что человек пишет, поэтому он у поля, а не у кнопки. */
.ask-foot{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:10px}
.askcard .buy{flex:none;padding:11px 24px;font-size:14px}
/* Кнопка, на которую нельзя нажать, обязана и выглядеть так. Иначе при
   исчерпанном пределе она стоит яркой и зовёт нажать — а не отвечает. */
.askcard .buy:disabled{opacity:.4;cursor:default}
/* Счётчик знаков: спокойный, пока запас есть, и заметный на подходе к
   пределу. Красный с первого знака учил бы не смотреть на него вовсе. */
.ask-count{font-size:12px;color:var(--dim)}
.ask-count.near{color:var(--warn)}
.ask-count.full{color:var(--bad);font-weight:600}
/* ── ЗАМЕТКА НАД ПОЛЕМ ВОПРОСА ──
   Главное — обычным текстом, служебное — мелкими метками отдельной строкой.
   Пока всё было одним серым абзацем, его не читали целиком: а прочитать
   надо, там сказано, что вопрос уходит третьей стороне. */
.ask-lead{color:var(--sub);max-width:70ch}
.ask-lead b{color:var(--txt)}
.ask-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ask-meta span{font-size:11.5px;color:var(--dim);background:var(--sunk);
  border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.ask-meta .ask-quota{color:var(--sub)}
.ask-meta .ask-quota b{color:var(--txt)}
/* Остаток вопросов на сегодня. Меняется после каждого ответа; жёлтый на
   последних двух, красный на нуле — предупредить заранее полезнее, чем
   сообщить об исчерпании постфактум. */
.ask-left.low{color:var(--warn)}
.ask-left.none{color:var(--bad)}
.qa{margin-top:14px;max-width:760px}
.qq{font-weight:600;margin-bottom:6px}
.qq::before{content:'— ';color:var(--dim)}
/* Ответ на подложке и с полосой сбоку: видно, где кончается наш текст и
   начинается ответ модели. Смешивать их нельзя — человек должен понимать,
   кто это сказал. */
.answer{background:var(--sunk);border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:10px;padding:12px 14px;
  line-height:1.55;max-width:760px}
.answer.bad{border-left-color:var(--bad);color:var(--sub)}
.answer.wait{color:var(--dim);border-left-color:var(--line)}

@media (max-width:900px){
  #side{position:absolute;z-index:20;height:100%;margin-left:0;
    transform:translateX(0);transition:transform .2s;
    box-shadow:0 0 40px var(--shadow);will-change:transform}
  #side.hide,#side.preload{margin-left:0;transform:translateX(-102%)}
  /* Поля по краям меняются ОДНИМ числом — и лента, и поле ввода берут его
     оттуда же. Пока их правили порознь, на телефоне выдача стояла с полем в
     14 пикселей, а поле ввода — в 12, и это было видно. */
  :root{--gut:14px}
  .wrap{padding:18px var(--gut) 30px}
  .msg.me .body{max-width:88%}
  /* ЛЕСТНИЦА, А НЕ ОБРЫВ. Раньше здесь сразу стояло «одна карточка в ряд»,
     и на планшете шириной 900 пикселей выдача превращалась в столбец
     карточек во весь экран с картинкой в пол-экрана. Ширина убывает
     постепенно — как и место под карточку. */
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mw-b{padding:14px}
  #modal .win{inset:0;transform:none;width:100%;max-height:100%;border-radius:0}
  /* Compact mobile footer: search first, policies directly below it. */
  #bottom{display:flex;flex-direction:column;
    padding:8px var(--gut) max(6px,env(safe-area-inset-bottom))}
  #form{order:1;width:100%}
  #hello .hi{font-size:24px}
  .foot{order:2;width:100%;font-size:10px;margin:4px auto 0}
  .site-disclosure{display:none}

  /* Stable, finger-sized mobile controls. Keeping these sizes in CSS means
     buttons do not grow after JavaScript starts and therefore cannot shift
     the first painted layout. */
  .iconbtn,#send,#qclear{width:44px;height:44px;min-width:44px;min-height:44px;
    padding:0;line-height:1;display:flex;align-items:center;justify-content:center}
  #showSide,#hideSide{font-size:20px}
  #themeBtn{font-size:24px;font-weight:600}
  #openSaved{font-size:20px}
  #qclear{font-size:16px}
  #send{font-size:20px}
  #qclear{margin-bottom:0}
  .chip,.fl,.buy,.vchip,.dd-opt,.sug{min-height:44px}
  .hitem{min-height:44px}
  .hitem .hmenu{width:44px;height:44px}
  /* Legal links remain reachable without turning the composer into a
     quarter-screen footer. One finger-sized, horizontally scrollable row
     is clearer than two uneven wrapped rows. */
  .legal-nav{min-height:45px;gap:0 14px;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));
    margin-top:0;padding:0 var(--gut);border-top:0}
  .legal-nav::-webkit-scrollbar{display:none}
  .legal-nav a{min-height:44px;padding:0;white-space:nowrap;flex:none}

  /* The consent bar used to wrap one action at the far right and the other
     at the far left on a new row. It is a compact card now: explanation on
     top, two equally prominent actions below. */
  .consent{left:8px;right:8px;bottom:calc(102px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;
    border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 36px var(--shadow)}
  .consent span{grid-column:1/-1;min-width:0;line-height:1.4}
  .consent .buy,.consent .fl{width:100%;min-width:0;margin:0;justify-content:center}
  /* The banner is fixed above the composer. It must never add padding to
     the document after first paint: doing so moved the whole viewport and
     was the largest source of mobile CLS. */
  .news-card:first-child{grid-template-columns:minmax(260px,42%) minmax(0,1fr)}
}
/* ── PRODUCT QUICK VIEW: TABLET ──
   Keep the gallery beside the buying information, but give the text the
   larger share. This rule intentionally follows the general mobile block. */
@media (min-width:641px) and (max-width:900px){
  .mw-b{grid-template-columns:minmax(250px,36%) minmax(0,1fr);
    gap:18px;padding:16px}
  .mw-left{position:sticky;top:0}
  .mw-b img.hero,.mw-left .no-product-image{width:100%;height:auto;
    max-height:38vh;aspect-ratio:1/1;object-fit:contain}
  .mw-ask{grid-column:1/-1}
}
/* ── ОБРАЩЕНИЯ: ОТДЕЛЬНЫЙ МЕССЕНДЖЕР ── */
.settings-pane.support-pane{padding-bottom:0}
.settings-panel.support-mode .set-bar{display:none}
.support-chat{height:min(670px,calc(94vh - 150px));min-height:480px;display:flex;
  flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;
  background:var(--raise);box-shadow:0 18px 46px color-mix(in srgb,var(--shadow) 55%,transparent)}
.sup-head{display:flex;align-items:center;gap:11px;min-height:68px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--head);flex:none}
.sup-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--on-acc);background:linear-gradient(145deg,var(--acc),color-mix(in srgb,var(--acc) 72%,#111));
  font:800 18px/1 inherit;box-shadow:0 0 0 3px var(--acc-bg)}
.sup-head-copy{display:grid;gap:2px;min-width:0}.sup-head-copy strong{font-size:15px}
.sup-presence{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-private{margin-left:auto;color:var(--dim);font-size:11.5px;white-space:nowrap}
.sup-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--raise);flex:none}
.sup-tabs[hidden]{display:none!important}
.sup-tabs::-webkit-scrollbar{display:none}
.sup-tabs button{border:1px solid var(--line);background:var(--sunk);color:var(--sub);
  border-radius:20px;padding:6px 11px;font:600 12px/1.2 inherit;cursor:pointer;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.sup-tabs button.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}
.sup-log{display:flex;flex:1;min-height:0;flex-direction:column;gap:6px;overflow-y:auto;
  overscroll-behavior:contain;padding:18px 18px 20px;margin:0;
  background-color:var(--sunk);background-image:
  radial-gradient(circle at 12px 12px,color-mix(in srgb,var(--line) 38%,transparent) 1px,transparent 1.4px);
  background-size:24px 24px}
.sup-empty{margin:auto;max-width:390px;padding:24px;text-align:center;border:1px solid var(--line);
  border-radius:16px;background:color-mix(in srgb,var(--raise) 94%,transparent);color:var(--sub);
  font-size:14px;line-height:1.55;box-shadow:0 8px 24px color-mix(in srgb,var(--shadow) 22%,transparent)}
.sup-empty-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 11px;
  background:var(--acc-bg);color:var(--acc);font-size:22px}.sup-empty b{display:block;color:var(--txt);font-size:16px;margin-bottom:4px}
.sup-empty>span:last-child{display:block}
.sup-details{margin:7px 4px 0;border-top:1px solid var(--line)}
.sup-details summary{list-style:none;min-height:38px;display:flex;align-items:center;gap:8px;
  padding:5px 7px;color:var(--sub);cursor:pointer;border-radius:9px;user-select:none}
.sup-details summary::-webkit-details-marker{display:none}
.sup-details summary:hover{background:var(--sunk);color:var(--txt)}
.sup-details summary:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.sup-details summary>span{font-size:12px;font-weight:700}
.sup-details summary>small{margin-left:auto;color:var(--dim);font-size:11px}
.sup-details summary:after{content:'⌄';font-size:16px;line-height:1;transition:transform .15s ease}
.sup-details[open] summary:after{transform:rotate(180deg)}
.sup-meta{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:9px;
  padding:4px 1px 3px;background:transparent}
.sup-fld{display:grid;gap:5px;min-width:0}.sup-fld>span{font-size:11.5px;font-weight:700;color:var(--sub)}
.sup-fld>span i{font-style:normal;font-weight:400;color:var(--dim)}
.sup-fld select,.sup-fld input{width:100%;min-width:0;min-height:42px;background:var(--sunk);
  border:1px solid var(--line);border-radius:10px;color:var(--txt);font:inherit;font-size:14px;padding:0 11px}
.sup-fld input{padding:9px 11px}.sup-fld select:focus,.sup-fld input:focus{border-color:var(--acc);
  outline:none;box-shadow:0 0 0 3px var(--acc-bg)}
.sup-msg{position:relative;max-width:min(78%,620px);padding:9px 12px 6px;border-radius:15px;
  font-size:14.5px;line-height:1.47;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 25%,transparent)}
.sup-msg.me{align-self:flex-end;background:color-mix(in srgb,var(--acc) 88%,var(--raise));
  color:var(--on-acc);border-bottom-right-radius:4px}
.sup-msg.them{align-self:flex-start;background:var(--raise);border:1px solid var(--line);
  border-bottom-left-radius:4px}.sup-msg.me + .sup-msg.me,.sup-msg.them + .sup-msg.them{margin-top:-3px}
.sup-when{font-size:10.5px;opacity:.72;margin:3px 0 0 12px;display:block;text-align:right;white-space:nowrap}
.sup-msg.them .sup-when{text-align:left;margin-left:0}.sup-day{align-self:center;font-size:11px;color:var(--sub);
  margin:7px 0;padding:4px 10px;background:color-mix(in srgb,var(--raise) 90%,transparent);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 18%,transparent)}
.sup-compose-shell{padding:7px 10px 10px;border-top:1px solid var(--line);background:var(--raise);flex:none}
.sup-policy{min-height:18px;margin:0 6px 5px;color:var(--sub);font-size:11.5px;line-height:1.4}
.sup-policy.good{color:var(--acc)}.sup-policy.wait{color:var(--warn)}.sup-policy.bad{color:var(--bad)}
.sup-compose{display:flex;gap:8px;align-items:flex-end}.sup-compose textarea{flex:1;min-height:46px;
  max-height:132px;resize:none;background:var(--sunk);border:1px solid var(--line);border-radius:23px;
  color:var(--txt);font:inherit;padding:12px 16px;line-height:1.4}
.sup-compose textarea:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px var(--acc-bg)}
.sup-compose textarea:disabled{opacity:.72;cursor:not-allowed}
.sup-compose .sup-send{flex:none;width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;
  display:grid;place-items:center;background:var(--acc);border:1px solid var(--acc);color:var(--on-acc);
  font-size:0;transition:opacity .15s ease,transform .15s ease}.sup-compose .sup-send:after{content:'↑';font-size:22px;line-height:1}
.sup-compose .sup-send:not([disabled]):hover{transform:translateY(-1px)}
.sup-compose .sup-send[disabled]{opacity:.35;cursor:default}.sup-secure-note{padding:0 14px 10px;
  background:var(--raise);color:var(--dim);font-size:11px;text-align:center;flex:none}
@media (max-width:640px){
  .support-chat{height:calc(100dvh - 138px);min-height:420px;border-radius:14px}
  .sup-head{min-height:62px;padding:8px 10px}.sup-avatar{width:40px;height:40px}
  .sup-private{font-size:0}.sup-private:after{content:'🔒';font-size:15px}
  .sup-log{padding:14px 10px 16px}.sup-details{margin-top:6px}
  .sup-details summary{min-height:44px;padding:6px 9px}.sup-details summary>small{display:none}
  .sup-meta{grid-template-columns:minmax(0,1fr);gap:8px;padding:4px 2px 3px}
  .sup-fld select,.sup-fld input{min-height:45px;font-size:16px}.sup-msg{max-width:88%;font-size:15px}
  .sup-compose-shell{padding:6px 7px calc(7px + env(safe-area-inset-bottom))}.sup-policy{font-size:11px}
  #supText{font-size:16px}.settings-panel.support-mode{gap:8px}
  #top .tag{display:none}
  .top-news{width:44px;padding:0;justify-content:center;font-size:0}.top-news:after{content:'N';font-size:15px}
  .news-page{padding-bottom:28px}.news-hero{display:block;margin:14px 0 27px;padding:25px 20px;border-radius:19px}.news-hero h1{font-size:32px;line-height:1.08}
  .news-hero p{font-size:16px;line-height:1.55}.news-hero-note{display:inline-grid;margin-top:20px;min-width:132px}.news-section-head{margin-bottom:11px}
  .news-grid{grid-template-columns:1fr;gap:16px}
  .news-card,.news-card.featured{display:block;grid-column:auto}.news-card.featured>img,
  .news-card.featured>.news-no-image,.news-card>img,.news-no-image{width:100%;height:auto;min-height:0;aspect-ratio:16/10}
  .news-card>img,.news-card.featured>img{object-fit:cover}.news-card.featured .news-card-body,.news-card-body{display:block;padding:17px}
  .news-card.featured h2,.news-card h2{font-size:20px;max-width:none}.news-card p{display:block;font-size:13.5px}
  .review-page{padding-bottom:30px}.review-head{padding:20px 0 2px}.review-head h1{font-size:32px}
  .review-head>p{font-size:16px}.review-byline{align-items:flex-start;flex-direction:column;gap:4px}
  .review-byline span{padding:0;border:0}.review-product{display:block;margin:26px 0 32px;border-radius:16px}
  .review-product-media{min-height:0;aspect-ratio:16/11}.review-product img{height:100%;max-height:none;object-fit:contain}
  .review-product-info{padding:19px}.review-product h2{font-size:21px}.review-product-tags{margin-bottom:17px}
  .review-price{justify-content:space-between;align-items:center}.review-price strong{font-size:24px}
  .review-price small{max-width:120px;text-align:right}.review-page>.legal-body{font-size:15.5px;line-height:1.72}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Настройка «карточек в ряд» — про большой экран. На телефоне семь
     карточек в ряд физически нечитаемы, и уважать её здесь значит
     сломать выдачу ровно там, где человек её и смотрит. */
  .cards.fixed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card .in{padding:10px;gap:7px}
  .card .ttl{font-size:13.5px;line-height:1.35}
  .card .buy{min-height:44px;display:grid;place-items:center;padding:8px 6px}
  .card:hover{transform:none;box-shadow:none}
  .tags{display:none}
  /* Filters are controls, not page copy. A single swipeable toolbar keeps
     the result visible and avoids an irregular three-row button cloud. */
  .filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;width:calc(100% + var(--gut) * 2);
    margin-left:calc(-1 * var(--gut));padding:0 var(--gut) 7px;
    scroll-padding-left:var(--gut)}
  .filters::-webkit-scrollbar{display:none}
  .filters>*{flex:none}
  .fl.count{margin-left:0}
  /* Specification values need reading width on a phone. */
  .spec{grid-template-columns:1fr}
  .spec dt{padding:9px 12px 3px;font-size:12px;border-top:1px solid var(--line2)}
  .spec dt:first-child{border-top:0}
  .spec dd{padding:3px 12px 10px}

  /* ── PRODUCT QUICK VIEW: PHONE ── */
  #modal .win{height:100%;height:100dvh;max-height:none}
  .mw-h{min-height:56px;padding:6px 10px 6px 14px}
  .mw-h .t{font-size:13px}
  .mw-b{grid-template-columns:minmax(0,1fr);gap:16px;padding:12px 14px 18px}
  .mw-b{touch-action:pan-y;overscroll-behavior-x:none}
  .mw-left{position:static;top:auto;min-width:0}
  .mw-b img.hero,.mw-left .no-product-image{width:100%;height:min(54vw,230px);
    aspect-ratio:auto;object-fit:contain;padding:4px;border-radius:12px}
  .thumbs{gap:7px;margin-top:7px;padding-bottom:2px;scroll-snap-type:x proximity;
    touch-action:pan-x;overscroll-behavior-x:contain}
  .thumb{width:54px;height:54px;scroll-snap-align:start}
  .demo-note{font-size:12px;line-height:1.45;margin-top:7px;padding:9px 10px;
    display:block;overflow:visible;white-space:normal}
  .mbrand{font-size:11.5px;margin-bottom:5px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .mw-b h2{font-size:19px;line-height:1.25;margin-bottom:8px}
  .mrate{margin-bottom:8px}
  .mbuy{margin:10px 0 16px;padding:13px}
  .mprice b{font-size:26px}
  .musp{grid-template-columns:1fr;gap:7px}
  .mw-sect{margin-bottom:18px}
  .mw-ask{padding-top:16px}

  .mw-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}
  .mw-f .p{grid-column:1/2;grid-row:1;align-self:center;font-size:18px}
  .mw-f .s{grid-column:2/3;grid-row:1;align-self:center;min-width:0}
  .mw-f .buy{grid-column:3/4;grid-row:1;margin:0;padding:9px 12px;min-height:44px;
    display:grid;place-items:center}
  .mw-f button.fl{margin:0;width:100%;padding:6px 4px;justify-content:center;
    overflow:hidden;text-overflow:ellipsis}
  .mw-f button.fl:nth-of-type(1){grid-column:1;grid-row:2}
  .mw-f button.fl:nth-of-type(2){grid-column:2;grid-row:2}
  .mw-f button.fl:nth-of-type(3){grid-column:3;grid-row:2}

  /* ── USER SETTINGS: PHONE ──
     Search-result filters scroll horizontally; settings must not inherit
     that behaviour. They are a form and therefore wrap inside the screen. */
  .mw-b:has(.settings-panel){grid-template-columns:minmax(0,1fr)!important;
    padding:12px;gap:0}
  .settings-panel{width:100%;min-width:0;gap:12px}
  .settings-pane>.settings-grid{grid-template-columns:minmax(0,1fr);gap:12px;
    width:100%;min-width:0}
  .settings-panel .mw-sect{width:100%;min-width:0;padding:13px;border-radius:12px}
  .settings-panel .filters{width:100%;max-width:100%;margin:0 0 8px!important;
    padding:0;overflow:visible;flex-wrap:wrap;gap:7px}
  .settings-panel .filters>*{flex:0 1 auto;max-width:100%;white-space:normal;
    text-align:center;justify-content:center}
  .settings-panel .filters>span.fl{flex-basis:100%;justify-content:flex-start;
    min-height:28px;padding:2px 0;border:0;background:transparent;text-align:left}
  .settings-panel .pal-grid{width:100%;max-width:100%;min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
  .settings-panel .pal-sw{min-width:0}
  .settings-panel input.np{width:68px;height:36px;min-height:36px;font-size:16px}
  .settings-panel #setCountryBox select{width:100%;min-height:44px}
  .settings-panel #setFast,.settings-panel #setNotify,
  .settings-panel #setWipe{width:100%;justify-content:center;white-space:normal}
  .settings-panel #setSave{width:100%;min-height:48px;margin:0}
  /* Место под липкую панель действий: поля обращения можно докрутить выше
     кнопок, и Topic/Email больше не оказываются под ними. */
  .settings-pane{padding-bottom:142px}
  /* На телефоне действия в один столбец: «Готово» под «Сохранить», а не
     рядом — иначе обе кнопки становятся узкими и в них трудно попасть. */
  .set-acts{grid-template-columns:minmax(0,1fr);gap:8px}
  .set-acts .fl{min-height:48px}
  .set-bar{padding-bottom:calc(4px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  /* Метка каталога в шапке — сведение, а не действие: на узком экране она
     отнимает строку у того, ради чего пришли. */
  .tag{display:none}
  #top{height:52px}
  .cards.list .card{grid-template-columns:64px minmax(0,1fr)}
  .legal-page h1{font-size:27px}
  .legal-body{font-size:15px}
  #hello{padding:0 14px}
  #hello p{margin-bottom:18px}
  .chips{gap:8px}
  .chip{width:100%;justify-content:center;text-align:center}
  .pp-top{gap:20px}
  .pp-buy{padding:14px}
}
@media print{
  #side,#top,#bottom,#backdrop,#modal{display:none!important}
  #app,#main,#feed{display:block;height:auto;overflow:visible}
  .wrap{max-width:none;padding:0}.legal-page{max-width:none;padding:0;color:#000}
}
/* ЛЕСТНИЦА ЗАКАНЧИВАЛАСЬ ОБРЫВОМ. Одна карточка в ряд стояла с 420 пикселей
   — то есть на большинстве телефонов: карточка во весь экран с картинкой в
   треть его высоты, полтора товара за экран. Два столбца держатся до 360 —
   там карточка шириной 160, ровно как на большом экране в семь колонок, —
   и один столбец остаётся только для действительно узких экранов. */
@media (max-width:360px){
  .cards, .cards.fixed{grid-template-columns:1fr}
  /* Very narrow phones cannot hold three labelled actions in one row. */
  .mw-f{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mw-f .p{grid-column:1;grid-row:1}
  .mw-f .s{display:none}
  .mw-f .buy{grid-column:2;grid-row:1}
  .mw-f button.fl:nth-of-type(1){grid-column:1;grid-row:2}
  .mw-f button.fl:nth-of-type(2){grid-column:2;grid-row:2}
  .mw-f button.fl:nth-of-type(3){grid-column:1/-1;grid-row:3}
  .thumb{width:50px;height:50px}
  .thumbs{gap:6px}
}