/* ── ОБЛИК ── Взят уклад 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; /* Роль «в пользу покупателя»: упавшая цена, экономия, «дешевле соседей». Отдельная от акцента намеренно — акцент означает ДЕЙСТВИЕ («купить»), а это ОЦЕНКА. Один цвет на две роли делает витрину одноцветной, и кнопка перестаёт выделяться среди похвал. */ --good:#5fbf84; --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; --good:#1f7a4d; /* на белом зелёный обязан быть темнее */ --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:var(--app-h,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)} .pchip.removable{font:inherit;font-size:12px;cursor:pointer;text-align:left} .pchip.removable:hover,.pchip.removable:focus-visible{border-color:var(--acc);outline-offset:2px} .pchip.removable span{margin-left:4px;font-weight:700} .guidance{margin:4px 0 14px;padding:13px 14px;border:1px solid var(--acc-line); border-radius:13px;background:color-mix(in srgb,var(--acc) 6%,var(--raise))} .guidance-top{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-bottom:7px} .guidance-top b{font-size:13.5px} .guidance-engine{font-size:10px;letter-spacing:.045em;text-transform:uppercase; color:var(--dim);white-space:nowrap} .said .guidance-question{margin:0 0 4px;font-weight:650;font-size:14px} .said .guidance-why{margin:0 0 10px;color:var(--sub);font-size:12.5px;line-height:1.45} .guidance-options{display:flex;flex-wrap:wrap;gap:7px} .guidance-option{appearance:none;border:1px solid var(--line);background:var(--raise); color:var(--txt);border-radius:999px;padding:7px 11px;font:inherit;font-size:12px; cursor:pointer;transition:border-color .15s,background .15s} .guidance-option:hover{border-color:var(--acc);background:var(--acc-bg)} .guidance-option:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media (max-width:420px){ .guidance{padding:12px} .guidance-top{align-items:flex-start;flex-direction:column;gap:3px} .guidance-option{min-height:40px} } /* ── ЧТО ВИДНО ПО ВЫДАЧЕ ── Уточнение показывается отдельно и только одно. Здесь остаются четыре строки: сколько нашлось, одно или два наблюдения и действие, если оно следует из данных. Без рамки и подложки намеренно. Прежний блок был отдельной карточкой и спорил с выдачей за внимание; наблюдение — это подпись к выдаче, а не соседний предмет на экране. */ .readout{margin:12px 0 6px;padding:0 0 0 13px; border-left:2px solid var(--acc-line)} .readout-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .readout-head b{font-size:14.5px;font-weight:700} .readout-range{font-size:12.5px;color:var(--dim); font-variant-numeric:tabular-nums} .readout-note{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--sub); max-width:64ch} /* Первое наблюдение — главное; второе идёт оговоркой и звучит тише. */ .readout-note + .readout-note{color:var(--dim);font-size:12.5px} .readout-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} .readout-go{display:inline-flex;align-items:center;min-height:34px; border:1px solid var(--line);background:var(--sunk);color:var(--txt); border-radius:9px;padding:5px 12px;font:inherit;font-size:13px; text-decoration:none;white-space:nowrap;cursor:pointer} .readout-go:hover{border-color:var(--acc);color:var(--acc)} .readout-go b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:500;font-size:11.5px;color:var(--dim);margin-left:7px} /* ── ФИЛЬТРЫ ── Ряд «таблеток» над выдачей: те же формы, что и у остального интерфейса, чтобы не выглядели вставкой из панели администратора. Активный фильтр подсвечен — снятый и поставленный обязаны различаться с одного взгляда. */ .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)} /* ── ВЫПАДАЮЩИЙ СПИСОК ── ПОЧЕМУ СВОЙ, А НЕ СИСТЕМНЫЙ. Закрытый ``; свой показывается там, где есть мышь. */ .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} /* ── РАМКА СНИМКА: ХОЗЯИН ЛЕНТЫ СОБЫТИЙ ── На странице лента садится на снимок так же, как на квадрат карточки. Снимок здесь крупнее карточки в три раза, поэтому пилюли чуть выше и отступ от края больше — иначе лента читалась бы приклеенной мелочью в углу большой фотографии. Скругление и обрезка — чтобы размытый верх ленты не вылезал за скруглённые углы снимка. */ .pp-gal{position:relative;border-radius:14px;overflow:hidden} .pp-gal .mx-live{left:14px;right:14px;bottom:14px} .pp-gal .mx-feed{height:74px} .pp-gal .mx-live.is-demo .mx-feed{height:50px} .pp-gal .mx-reel span{height:20px;font-size:11px;padding:0 9px 0 3px} .pp-gal .mx-reel b{font-size:11px} .pp-gal .mx-reel i{width:15px;height:15px;font-size:8.5px} .pp-gal .mx-disclose{height:18px;font-size:10px} /* ── КВАДРАТ ВМЕСТО СНИМКА ── Тот же, что на карточке (`.k .sq`): буква бренда на цвете категории, косая сетка и блик. Цвет берётся от категории через `.t-*`, поэтому товар на странице того же цвета, что в выдаче. Буква втрое крупнее карточной — квадрат тоже. */ .pp-sq{aspect-ratio:1;display:flex;align-items:center;justify-content:center; background:linear-gradient(142deg,var(--tone),var(--tone2))} .pp-sq > b{font:600 clamp(110px,22vw,190px)/1 Georgia,'Times New Roman',serif; color:#0b1422;opacity:.92;letter-spacing:-.02em;position:relative;z-index:1} .pp-sq::before{content:"";position:absolute;inset:0;opacity:.13; background-image:linear-gradient(45deg,#fff 1px,transparent 1px); background-size:11px 11px;pointer-events:none} .pp-sq::after{content:"";position:absolute;top:-40%;left:-15%;width:75%; height:170%;transform:rotate(18deg);pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)} .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 8px;letter-spacing:-.01em;text-wrap:balance} .pp-brand{color:var(--dim);font-size:13.5px} .pp-info{min-width:0} /* «Read reviews» у оценки — прыжок к отзывам. */ .pp-torev{color:var(--acc-fg);cursor:pointer;font-size:13px;text-decoration:none} .pp-torev:hover{text-decoration:underline} /* Ключевые факты чипами: название приглушено, значение — основным цветом. */ .pp-facts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0} .pp-facts span{display:inline-flex;align-items:baseline;gap:5px;font-size:12.5px; padding:4px 10px;border-radius:999px;background:var(--sunk);border:1px solid var(--line2); color:var(--txt);white-space:nowrap} .pp-facts em{font-style:normal;color:var(--dim);font-size:11.5px} .pp-buy{background:var(--raise);border:1px solid var(--line);border-radius:14px; padding:16px;margin-top:16px} /* Метки у цены: «lowest in 30 days» — в пользу покупателя, зелёным; откуда взялась «была» — мелко и во всю строку, это раскрытие, а не украшение. */ .mprice .low{font-size:12px;font-weight:600;color:var(--good);white-space:nowrap} .mprice .was-src{flex-basis:100%;font-size:11.5px;color:var(--dim);font-weight:400; margin-top:-2px} .pp-sum{margin-left:8px;color:var(--dim);font-weight:400;font-size:13px} /* В попапе те же чипы и ссылка, только компактнее — заголовки там мельче. */ .mw-b .pp-facts{margin:8px 0 2px} .mw-b .pp-sum{font-size:12px;margin-left:6px} .mw-b .mrate{flex-wrap:wrap;gap:6px 8px} .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} /* График цены: линия в растягиваемом SVG, подписи — снаружи обычным текстом (внутри они растягивались вместе с линией). Цвет — по знаку: упала — «в пользу покупателя», выросла — предупреждение. */ .chart-price{background:var(--raise);border:1px solid var(--line); border-radius:12px;padding:12px;color:var(--acc-fg)} .chart-price.down{color:var(--good)} .chart-price.up{color:var(--warn)} .chart-price svg{width:100%;height:110px;display:block;overflow:visible} .cp-ends{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:11.5px; color:var(--dim);font-variant-numeric:tabular-nums;flex-wrap:wrap} .cp-ends b{color:var(--txt);font-weight:700} .cp-days{font-size:11px;color:var(--dim);margin-top:3px} .pp-sim{margin-top:30px} /* ── ЛИПКАЯ ПОЛОСА ПОКУПКИ ── Последняя в потоке и прилипает к низу области прокрутки; показывается только пока блок покупки не на экране. `[hidden]` обязан побеждать `display:flex`. */ .pp-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px; margin-top:20px;padding:10px 14px;background:var(--head);border:1px solid var(--line); border-radius:14px 14px 0 0;box-shadow:0 -8px 24px var(--shadow)} .pp-bar[hidden]{display:none!important} .pp-bar .p{font-size:18px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .pp-bar .s{color:var(--sub);font-size:13px;flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pp-bar .buy{margin-left:auto;padding:9px 22px} /* ══ СТРАНИЦА ТОВАРА: АДАПТИВ ══ Четыре класса экранов, и у каждого своя раскладка, а не «то же самое, но мельче»: широкий стол, обычный стол, планшет, телефон. Галерея липкая везде, где есть две колонки: докрутив до характеристик, человек продолжает видеть товар. */ /* Широкий стол: странице можно быть шире, галерее — крупнее. */ @media (min-width:1400px){ .pp{max-width:1280px} .pp-top{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px} } /* Две колонки — галерея липкая. */ @media (min-width:641px){ .pp-top > div:first-child{position:sticky;top:8px;align-self:start} } /* Обычный стол поуже: колонка снимка уступает тексту. */ @media (min-width:901px) and (max-width:1100px){ .pp-top{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:24px} } /* Планшет: две колонки остаются, но снимок берёт 40 %, нижние разделы складываются в одну колонку. */ @media (min-width:641px) and (max-width:900px){ .pp-top{grid-template-columns:minmax(240px,40%) minmax(0,1fr);gap:20px} .pp-cols{grid-template-columns:1fr} .pp h1{font-size:22px} .pp .mprice b{font-size:27px} .pp .usp{grid-template-columns:1fr} } /* Телефон: одна колонка, снимок не выше 80 % ширины экрана, чтобы цена попадала на первый экран; галерея не липкая — ей некуда липнуть. */ @media (max-width:640px){ .pp-top,.pp-cols{grid-template-columns:1fr;gap:16px} .pp-top > div:first-child{position:static} .pp-gal .hero,.pp-sq{max-height:min(68vw,380px)} .pp-sq > b{font-size:clamp(90px,30vw,150px)} .pp h1{font-size:20px;margin-bottom:6px} .pp-brand{font-size:12.5px} .pp-facts{gap:5px} .pp-facts span{font-size:12px;padding:3px 9px} .pp-buy{padding:13px;margin-top:12px} .pp .mprice b{font-size:26px} .pp .usp{grid-template-columns:1fr;gap:5px} .pp-buy .filters{gap:6px} .pp-buy .fl{flex:1 1 auto;justify-content:center;min-height:40px} .pp .pp-sect{margin:20px 0;padding-top:14px} .pp-cols{margin-top:20px} .pp-sim{margin-top:20px} .chart-price svg{height:90px} .cp-ends{font-size:11px} .pp-bar{margin:16px -2px 0;padding:9px 12px;gap:10px;border-radius:12px 12px 0 0} .pp-bar .p{font-size:16px} .pp-bar .s{font-size:12px} .pp-bar .buy{padding:9px 16px} } /* Пальцем, а не курсором: цели нажатия не меньше 40px. */ @media (hover:none){ .pp-buy .fl,.pp-torev{min-height:40px;display:inline-flex;align-items:center} .pp .thumb{width:60px;height:60px} } .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} .k .wolldi-pick{margin-top:5px;font-size:11px} .k .match-warning{margin-top:4px} .match-warning{display:flex;gap:6px;align-items:flex-start;padding:6px 8px; border-radius:9px;background:color-mix(in srgb,var(--warn) 10%,transparent); border:1px solid color-mix(in srgb,var(--warn) 28%,transparent); color:var(--sub);font-size:10.5px;line-height:1.35} .match-warning b{color:var(--warn);white-space:nowrap} .match-warning 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} /* ── ГАЛЕРЕЯ ПОПАПА ── Квадратная рамка с заранее заданной пропорцией — по той же причине, что и на странице: иначе попап меняет высоту при переключении ракурса. Пропорция задана РАМКЕ, а не снимку: тогда стрелки и счётчик стоят по её краям, а не по краям картинки, у которой поля зависят от кадра. */ .mgal{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r); border:1px solid var(--line);background:var(--ph); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--txt) 4%,transparent)} .mgal img.hero{width:100%;height:100%;object-fit:contain;padding:16px;display:block; transition:opacity .18s ease} .mgal img.hero.swap{opacity:.35} /* `display:block` выше сильнее браузерного `[hidden]{display:none}`: без этой строки снимок без адреса оставался на экране пустым серым квадратом, а под ним стояла ещё и заглушка «снимков нет» — два блока вместо одного. */ .mgal img.hero[hidden],.mgal-arr[hidden],.mgal-n[hidden]{display:none!important} .mgal .no-product-image{height:100%;aspect-ratio:auto;border:0;border-radius:0; gap:8px;font-size:13.5px;align-content:center} /* ── КВАДРАТ КАТЕГОРИИ ВМЕСТО СНИМКА ── Тот же, что на карточке и на странице: буква бренда на цвете категории, косая сетка, блик. Хозяин ленты событий, когда фото нет. */ .mgal.mgal-sq{background:linear-gradient(142deg,var(--tone),var(--tone2));border-color:transparent} .mgal.mgal-sq .no-product-image{background:none;color:#0b1422;padding:0} .mgal.mgal-sq .no-product-image > b{font:600 clamp(90px,18vw,170px)/1 Georgia,'Times New Roman',serif; opacity:.92;letter-spacing:-.02em;position:relative;z-index:1} .mgal.mgal-sq::before{content:"";position:absolute;inset:0;opacity:.13; background-image:linear-gradient(45deg,#fff 1px,transparent 1px); background-size:11px 11px;pointer-events:none} .mgal.mgal-sq::after{content:"";position:absolute;top:-40%;left:-15%;width:75%; height:170%;transform:rotate(18deg);pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)} /* ── ЛЕНТА СОБЫТИЙ НА СНИМКЕ ПОПАПА ── Слева внизу, как везде. Счётчик «2 / 5» уходит в правый верхний угол: внизу справа он стоял бы в одной строке с пилюлями. */ .mgal .mx-live{left:12px;right:12px;bottom:12px} .mgal .mx-feed{height:66px} .mgal:has(.mx-live) .mgal-n{bottom:auto;top:10px} /* Стрелки прячутся, пока курсор не над снимком: на экране с курсором они не нужны постоянно, а поверх товара мешают. Там, где курсора нет, показываются всегда — иначе неясно, что снимков несколько. */ .mgal-arr{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px; border-radius:50%;display:grid;place-items:center;padding:0 0 3px; font-size:26px;line-height:1;color:var(--txt); background:color-mix(in srgb,var(--raise) 88%,transparent); border:1px solid var(--line);box-shadow:0 2px 10px var(--shadow); opacity:0;transition:opacity .15s,background .15s,border-color .15s} .mgal-arr.prev{left:10px} .mgal-arr.next{right:10px} .mgal:hover .mgal-arr,.mgal:focus-within .mgal-arr,.mgal-arr:focus-visible{opacity:1} .mgal-arr:hover{background:var(--raise);border-color:var(--line-hi)} .mgal-arr:active{transform:translateY(-50%) scale(.94)} @media (hover:none){.mgal-arr{opacity:.9;width:32px;height:32px;font-size:22px}} .mgal-n{position:absolute;right:10px;bottom:10px;font-size:11.5px;font-weight:600; padding:3px 9px;border-radius:999px;color:var(--sub); font-variant-numeric:tabular-nums;letter-spacing:.02em; background:color-mix(in srgb,var(--raise) 88%,transparent); border:1px solid var(--line)} /* Ряд миниатюр: без полосы прокрутки (она рвёт ряд), с привязкой к началу миниатюры при прокрутке. Невыбранные чуть приглушены — тогда выбранная читается по яркости, а не только по рамке. */ .mgal-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding:2px 2px 4px; scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .mgal-thumbs::-webkit-scrollbar{display:none} .mthumb{flex:none;width:66px;height:66px;padding:0;border-radius:10px;overflow:hidden; border:1.5px solid var(--line);background:var(--ph);opacity:.72;scroll-snap-align:start; transition:opacity .15s,border-color .15s,box-shadow .15s} .mthumb img{width:100%;height:100%;object-fit:cover;display:block} .mthumb:hover{opacity:1;border-color:var(--line-hi)} .mthumb.on{opacity:1;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-bg)} .mthumb:focus-visible{outline:2px solid var(--acc);outline-offset:2px;opacity:1} /* Левая колонка липкая: докрутив до характеристик, человек продолжает видеть товар. Без этого он смотрит на текст, забыв, о чём тот. */ .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:flex;flex-wrap:wrap;gap:6px 16px; margin-top:12px;font-size:12.5px;color:var(--sub)} .musp i{font-style:normal;margin-right:5px} .musp:empty{display:none} .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} /* На странице разбор оценок стоит ПОСЛЕ блока покупки — ему нужен отступ сверху, которого не было, пока он шёл сразу за оценкой. */ .pp-buy + .bars{margin-top:18px} .pp-buy + .mpanel{margin-top:18px} .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;flex-wrap:wrap;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} .mw-f .fl{margin:0} .mfoot-pages{order:2;flex:1 0 100%;display:grid; grid-template-columns:minmax(210px,auto) minmax(0,1fr);align-items:center;gap:10px 16px; padding-top:8px;border-top:1px solid var(--line2)} .mfoot-pages::-webkit-scrollbar{display:none} .mfoot-pages[hidden]{display:none!important} .mfoot-copy{min-width:0;line-height:1.25} .mfoot-copy b{display:block;color:var(--txt);font-size:12.5px} .mfoot-copy span{display:block;color:var(--dim);font-size:11px;margin-top:2px} .mfoot-links{display:flex;justify-content:flex-end;gap:7px;min-width:0; overflow-x:auto;scrollbar-width:none} .mfoot-links::-webkit-scrollbar{display:none} .mfoot-link{flex:none;max-width:250px;color:var(--acc-fg);font-weight:650; text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mfoot-link i{font-style:normal;color:var(--acc);margin-left:3px} /* ── ОКНО: КОРОТКИЕ БЛОКИ ── Окно отвечает «то ли это и по какой цене» за полминуты; у каждого блока короткая версия и ссылка с числом на полную на странице. Панель чисел, вся таблица характеристик, все отзывы и поле вопроса — на странице. */ .mw-acts{display:flex;gap:2px;margin-left:auto} .mw-acts .iconbtn.on{color:var(--sale)} /* Крестик прижат вправо и когда ♡ 🔗 скрыты (настройки, история). */ .mw-h > .iconbtn[data-close]{margin-left:auto} .mw-acts:not([hidden]) ~ .iconbtn[data-close]{margin-left:0} .mw-sect h4{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .mw-more{font-size:12px;font-weight:600;color:var(--acc-fg);text-decoration:none; cursor:pointer;text-transform:none;letter-spacing:0;white-space:nowrap} .mw-more:hover{text-decoration:underline} .mshort{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--sub)} .mspec{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0;font-size:13px} .mspec div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding:6px 0; border-bottom:1px solid var(--line2)} .mspec dt{color:var(--dim);margin:0;white-space:nowrap} .mspec dd{margin:0;font-weight:600;text-align:right;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .mwhy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .mwhy div{border:1px solid var(--line2);background:var(--raise);border-radius:10px; padding:9px 11px;min-width:0} .mwhy b{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.15; font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .mwhy b.good{color:var(--good)} .mwhy span{display:block;font-size:11.5px;color:var(--dim);line-height:1.3;margin-top:2px} .mrev{border-left:3px solid var(--warn);padding:2px 0 2px 11px} .mrev .s{color:var(--warn);font-size:12px;margin-bottom:2px} .mrev .s b{color:var(--txt);margin-left:6px} .mrev .t{font-size:13.5px;color:var(--sub);line-height:1.45} .mw-b .affiliate-inline.mini{margin:0;color:var(--dim)} /* ── ввод ── */ /* Поле ввода живёт в ТОЙ ЖЕ колонке, что и лента: одинаковые края — единственное, что связывает вопрос и ответ в один экран. */ /* Отступ сверху — это высота растушёвки: лента уходит под поле ввода, и без него карточки обрывались ровно по прямой линии, как обрезанные. */ #bottom{flex:none;padding:22px var(--gut) 18px; background:linear-gradient(180deg,transparent,var(--bg) 60%)} /* Ширина считается ИЗ ТОЙ ЖЕ колонки за вычетом её полей: у `.wrap` поля внутри, у `#bottom` — тоже, и без вычитания края разъезжались бы ровно на `--gut` на широком экране, где колонка упирается в свой предел. */ /* position:relative — чтобы счётчик знаков встал у правого края поля, а не уехал к краю окна. */ #form{max-width:calc(var(--col) - var(--gut) * 2);margin:0 auto; background:var(--raise);position:relative; 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,1.65fr) minmax(250px,.7fr); gap:24px;align-items:stretch;margin:20px 0 28px;padding:34px;border:1px solid var(--line); border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 13%,var(--raise)),var(--raise) 60%); 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-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;padding:4px 0} .news-hero-jump{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:22px;padding:0 15px;border:1px solid var(--line); border-radius:11px;background:var(--raise);color:var(--txt);font-size:12.5px;font-weight:800;text-decoration:none} .news-hero-jump:hover{border-color:var(--acc);color:var(--acc-fg)} .news-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;border:1px solid var(--line); border-radius:17px;background:var(--line)}.news-hero-stats>div{display:flex;min-height:112px;flex-direction:column; justify-content:flex-end;padding:18px;background:color-mix(in srgb,var(--sunk) 88%,var(--raise))} .news-hero-stats strong{color:var(--txt);font-size:30px;line-height:1;letter-spacing:-.045em}.news-hero-stats span{margin-top:7px;color:var(--dim); font-size:9.5px;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.news-hero-stats>p{grid-column:1/-1;max-width:none;padding:17px 18px; background:var(--raise);font-size:12px;line-height:1.5} .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-directory{margin:0 0 38px;padding:26px;border:1px solid var(--line2);border-radius:20px;background:color-mix(in srgb,var(--raise) 76%,transparent)} .news-directory-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.news-directory-head h2{margin:0;font-size:25px;letter-spacing:-.035em} .news-directory-head p{max-width:390px;margin:0;color:var(--sub);font-size:13px;line-height:1.5;text-align:right}.news-directory-head .news-eyebrow{margin-bottom:6px} .news-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.news-topic{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px; align-items:center;min-height:68px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--raise);color:var(--txt);text-decoration:none; transition:border-color .16s ease,background .16s ease,transform .16s ease}.news-topic:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--acc) 55%,var(--line))} .news-topic.active{border-color:var(--acc);background:var(--acc-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 34%,transparent)} .news-topic-index{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:var(--sunk);color:var(--acc-fg);font-size:9px;font-weight:900;letter-spacing:.06em} .news-topic.active .news-topic-index{background:var(--acc);color:var(--on-acc)}.news-topic strong{display:block;overflow:hidden;font-size:12.5px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap} .news-topic small{display:block;margin-top:4px;color:var(--dim);font-size:9.5px;line-height:1.2}.news-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 17px;padding-top:4px;scroll-margin-top:16px} .news-section-head h2{margin:0;font-size:25px;letter-spacing:-.035em}.news-section-head .news-eyebrow{margin-bottom:5px}.news-section-head>span{color:var(--dim);font-size:12px} .news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .news-card{display:grid;grid-template-columns:minmax(130px,32%) minmax(0,1fr);min-width:0;min-height:184px;overflow:hidden; border:1px solid var(--line);border-radius:15px;background:var(--raise);box-shadow:0 5px 16px color-mix(in srgb,var(--shadow) 58%,transparent); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .news-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 50%,var(--line));box-shadow:0 15px 34px var(--shadow)} .news-card-media{position:relative;display:grid;min-width:0;min-height:184px;place-items:center;overflow:hidden;background: radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--raise) 58%,transparent),transparent 62%),var(--sunk)} .news-card-media img{display:block;width:100%;height:100%;padding:12px;object-fit:contain;transition:transform .25s ease}.news-card:hover .news-card-media img{transform:scale(1.025)} .news-no-image{display:grid;width:100%;height:100%;min-height:184px;place-items:center;color:var(--dim);font-size:12px} .news-card-number{position:absolute;top:9px;left:9px;display:grid;width:30px;height:30px;place-items:center;border:1px solid var(--line); border-radius:10px;background:color-mix(in srgb,var(--raise) 92%,transparent);color:var(--txt);font-size:9px;font-weight:900;letter-spacing:.08em;box-shadow:0 5px 15px var(--shadow)} .news-card-body{display:flex;min-width:0;flex-direction:column;align-items:flex-start;padding:15px 16px}.news-card h2{margin:9px 0 7px;font-size:18px;line-height:1.2;letter-spacing:-.024em;text-wrap:balance} .news-card h2 a{color:var(--txt);text-decoration:none}.news-card h2 a:hover{color:var(--acc-fg)}.news-card-summary{display:-webkit-box;overflow:hidden;margin:0 0 17px;color:var(--sub); font-size:12.5px;line-height:1.48;-webkit-box-orient:vertical;-webkit-line-clamp:2} .news-card.featured{grid-column:1/-1;grid-template-columns:minmax(270px,38%) minmax(0,1fr);min-height:292px;border-radius:18px} .news-card.featured .news-card-media{min-height:292px}.news-card.featured .news-card-media img{padding:19px}.news-card.featured .news-card-body{justify-content:center;padding:24px 27px} .news-card.featured h2{max-width:24ch;margin:11px 0 9px;font-size:clamp(25px,2.7vw,34px);line-height:1.09;letter-spacing:-.035em} .news-card.featured .news-card-summary{max-width:68ch;margin-bottom:14px;font-size:13.5px;line-height:1.52;-webkit-line-clamp:3} .news-card:not(.featured):last-child:nth-child(even){grid-column:1/-1;grid-template-columns:minmax(170px,22%) minmax(0,1fr);min-height:170px} .news-card:not(.featured):last-child:nth-child(even) .news-card-media{min-height:170px}.news-card:not(.featured):last-child:nth-child(even) h2{font-size:19px}.news-card:not(.featured):last-child:nth-child(even) .news-card-summary{max-width:80ch} .news-card-meta,.news-card-foot{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px}.news-card-meta{color:var(--dim);font-size:9.5px;font-weight:750;letter-spacing:.055em;text-transform:uppercase} .news-card-type{min-width:0}.news-card-meta a{display:block;overflow:hidden;color:var(--acc-fg);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.news-card-meta time{flex:none}.news-card-foot{margin-top:auto;padding-top:9px;border-top:1px solid var(--line2)} .news-card-context{display:flex;min-width:0;gap:5px;overflow:hidden}.news-card-context span{overflow:hidden;padding:4px 7px;border:1px solid var(--line2);border-radius:999px;color:var(--dim);font-size:9.5px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap} .wolldi-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} .wolldi-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:32px;color:var(--acc-fg);font-size:11.5px;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{display:grid;gap:6px;padding:42px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--sub)}.news-empty strong{color:var(--txt);font-size:16px}.news-empty span{font-size:13px} /* News option 07: a true editorial mosaic. The two- and three-story states have explicit compositions, so a young library never leaves dead cells. */ .news-mosaic{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:178px;gap:11px} .news-mosaic .news-card{position:relative;display:block;min-height:0;overflow:hidden;border-radius:16px;background:#10201a;box-shadow:0 7px 20px color-mix(in srgb,var(--shadow) 65%,transparent)} .news-mosaic .news-card.featured{grid-column:span 2;grid-row:span 2;min-height:0;border-radius:18px} .news-mosaic .news-card:nth-child(4){grid-column:span 2}.news-mosaic .news-card-media{position:absolute;inset:0;display:grid;min-height:0;place-items:center;background:linear-gradient(145deg,var(--sunk),color-mix(in srgb,var(--sunk) 65%,var(--raise)))} .news-mosaic .news-card-media img,.news-mosaic .news-card.featured .news-card-media img{width:100%;height:100%;padding:10px;object-fit:contain;opacity:.9}.news-mosaic .news-no-image{min-height:0;color:var(--dim)} .news-mosaic .news-card-body,.news-mosaic .news-card.featured .news-card-body{position:absolute;z-index:2;inset:auto 0 0;display:block;padding:54px 13px 13px;background:linear-gradient(transparent,rgba(7,17,13,.94));color:#fff} .news-mosaic .news-card.featured .news-card-body{padding:92px 20px 19px}.news-mosaic .news-card-meta{color:#c3d5ce;font-size:8px}.news-mosaic .news-card-meta a{color:#91e8cb}.news-mosaic .news-card h2,.news-mosaic .news-card.featured h2,.news-mosaic .news-card:not(.featured):last-child:nth-child(even) h2{max-width:25ch;margin:6px 0 0;color:#fff;font-size:14px;line-height:1.16;letter-spacing:-.02em} .news-mosaic .news-card h2 a{color:#fff}.news-mosaic .news-card.featured h2{max-width:20ch;margin-top:8px;font-size:27px;line-height:1.08;letter-spacing:-.035em}.news-mosaic .news-card-summary,.news-mosaic .news-card-context{display:none}.news-mosaic .news-card.featured .news-card-summary{display:-webkit-box;max-width:65ch;margin:9px 0 0;color:#d7e3de;font-size:11.5px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2} .news-mosaic .news-card-foot{margin:7px 0 0;padding:0;border:0}.news-mosaic .news-read{min-height:26px;color:#91e8cb;font-size:9.5px}.news-mosaic .news-card-number{z-index:3;border-color:rgba(255,255,255,.3);background:rgba(11,27,21,.72);color:#fff;box-shadow:none;backdrop-filter:blur(8px)} .news-mosaic:has(>.news-card:nth-child(2):last-child){grid-template-columns:minmax(0,1.65fr) minmax(250px,.75fr);grid-auto-rows:300px} .news-mosaic:has(>.news-card:nth-child(2):last-child) .news-card.featured{grid-column:auto;grid-row:auto} .news-mosaic:has(>.news-card:nth-child(2):last-child) .news-card:last-child{grid-column:auto;grid-row:auto} .news-mosaic:has(>.news-card:nth-child(3):last-child){grid-template-columns:minmax(0,1.6fr) minmax(250px,.8fr);grid-auto-rows:174px} .news-mosaic:has(>.news-card:nth-child(3):last-child) .news-card.featured{grid-column:1;grid-row:span 2} .review-page{max-width:1120px;padding-bottom:54px}.wolldi-review{display:block;min-width:0}.wolldi-review__head{max-width:880px;padding:22px 0 2px} .wolldi-review__head h1{margin:8px 0 13px;font-size:clamp(34px,4vw,48px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance} .wolldi-review__head>p{max-width:760px;margin:0;color:var(--sub);font-size:17px;line-height:1.58} .wolldi-review__byline{display:flex;align-items:center;gap:10px;margin-top:15px;color:var(--dim);font-size:12px} .wolldi-review__byline span{padding-right:10px;border-right:1px solid var(--line)}.wolldi-review__byline b{color:var(--txt)} .wolldi-review__product{display:grid;grid-template-columns:minmax(320px,43%) minmax(0,1fr);overflow:hidden; margin:26px 0 28px;border:1px solid var(--line);border-radius:22px;background:var(--raise); box-shadow:0 14px 42px var(--shadow)} .wolldi-review__product-media{position:relative;display:grid;place-items:center;min-height:390px;padding:20px;background:var(--sunk)} .wolldi-review__product img{display:block;width:100%;height:100%;max-height:390px;object-fit:contain} .wolldi-review__image-label{position:absolute;left:14px;bottom:13px;padding:5px 8px;border:1px solid var(--line); border-radius:999px;background:color-mix(in srgb,var(--raise) 90%,transparent);color:var(--dim);font-size:10px;font-weight:700} .wolldi-review__product-info{display:flex;flex-direction:column;justify-content:center;padding:27px 30px} .wolldi-review__product h2{margin:7px 0 9px;font-size:clamp(22px,2.4vw,29px);line-height:1.18;letter-spacing:-.025em;text-wrap:balance} .wolldi-review__product-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .wolldi-review__product-tags span{padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--sub);font-size:10.5px} .wolldi-review__price{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px} .wolldi-review__price strong{font-size:28px;line-height:1;letter-spacing:-.03em}.wolldi-review__price small{max-width:190px;color:var(--dim);font-size:10.5px;text-align:right} .wolldi-review__commission{display:block;color:var(--dim);font-size:10px;line-height:1.4} .wolldi-review__rating{display:flex;align-items:center;gap:7px;margin:0 0 11px;color:var(--sub)} .wolldi-review__rating>span{color:#e9a21b;font-size:18px}.wolldi-review__rating strong{color:var(--txt);font-size:15px}.wolldi-review__rating small{color:var(--dim)} .wolldi-review__snapshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:2px 0 15px;overflow:hidden; border:1px solid var(--line2);border-radius:12px;background:var(--line2)} .wolldi-review__snapshot h3{grid-column:1/-1;margin:0;padding:8px 11px;background:var(--sunk);font-size:11px;letter-spacing:.04em;text-transform:uppercase} .wolldi-review__snapshot>div{display:block;min-width:0;padding:10px;background:var(--raise);font-size:11px;line-height:1.35} .wolldi-review__snapshot span{display:block;margin-bottom:4px;color:var(--dim)}.wolldi-review__snapshot strong{display:-webkit-box;overflow:hidden;color:var(--txt);font-weight:700;-webkit-line-clamp:3;-webkit-box-orient:vertical} .wolldi-review__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}.wolldi-review__actions a{min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:800;text-align:center;text-decoration:none} .wolldi-review__card-link{margin:0}.wolldi-review__retailer{border:1px solid var(--line);color:var(--txt);background:var(--raise)}.wolldi-review__retailer:hover{border-color:var(--acc);color:var(--acc-fg)} .wolldi-review>.legal-body{max-width:none;margin:0 auto;font-size:16px;line-height:1.72} .wolldi-review__rich{display:block}.wolldi-review__rich-section{padding:42px 0;border-bottom:1px solid var(--line2);scroll-margin-top:14px} .wolldi-review__rich-section>h2{max-width:800px;margin:0 0 18px;font-size:clamp(24px,2.7vw,30px);line-height:1.16;letter-spacing:-.03em;text-wrap:balance} .wolldi-review__rich-section>p,.wolldi-review__section-intro{max-width:790px;color:var(--sub);font-size:16.5px;line-height:1.72} .wolldi-review__toc{display:flex;align-items:center;gap:6px;overflow-x:auto;margin:18px 0 0;padding:10px;border:1px solid var(--line); border-radius:14px;background:var(--raise);scrollbar-width:none}.wolldi-review__toc::-webkit-scrollbar{display:none}.wolldi-review__toc strong{flex:none;padding:0 8px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em} .wolldi-review__toc a{flex:none;padding:7px 10px;border-radius:8px;color:var(--sub);font-size:12px;font-weight:700;text-decoration:none}.wolldi-review__toc a:hover{background:var(--sunk);color:var(--txt)} .wolldi-review__verdict{margin:0;padding:31px 34px;border-radius:20px;background:linear-gradient(135deg,#17231f,#1c2c34);color:#f7faf8;scroll-margin-top:14px} .wolldi-review__verdict>span,.wolldi-review__panel-label,.wolldi-review__variant-card>div>span{display:block;margin-bottom:7px;color:#98c9b6;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .wolldi-review__verdict h2{margin:0 0 11px;font-size:clamp(26px,3vw,32px);letter-spacing:-.03em}.wolldi-review__verdict p{max-width:900px;margin:8px 0 0;color:#cbd8d4;font-size:15.5px;line-height:1.65}.wolldi-review__verdict .wolldi-review__verdict-lead{font-size:18px;line-height:1.6;color:#f7faf8} .wolldi-review__verdict-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:22px;overflow:hidden;border-radius:12px;background:rgba(255,255,255,.13)} .wolldi-review__verdict-points>div{padding:13px 14px;background:rgba(8,16,14,.32)}.wolldi-review__verdict-points span{display:block;margin-bottom:5px;color:#9eb0aa;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.wolldi-review__verdict-points strong{display:block;color:#f7faf8;font-size:12px;line-height:1.4} .wolldi-review__audience-grid,.wolldi-review__signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .wolldi-review__audience,.wolldi-review__signal{padding:23px 25px;border:1px solid var(--line);border-radius:16px;background:var(--raise)} .wolldi-review__audience h3,.wolldi-review__signal h3{margin:0 0 12px;font-size:18px}.wolldi-review__audience ul,.wolldi-review__signal ul{margin:0;padding-left:19px;color:var(--sub)}.wolldi-review__audience li,.wolldi-review__signal li{margin:8px 0} .wolldi-review__panel-label{color:var(--dim)}.wolldi-review__audience-good,.wolldi-review__signal-positive{border-top:3px solid var(--good)}.wolldi-review__audience-bad,.wolldi-review__signal-caution{border-top:3px solid var(--warn)} .wolldi-review__evidence-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--line)} .wolldi-review__evidence-strip>div{padding:17px;background:var(--raise)}.wolldi-review__evidence-strip strong{display:block;margin-bottom:4px;font-size:21px;letter-spacing:-.03em}.wolldi-review__evidence-strip span{display:block;color:var(--dim);font-size:11px;line-height:1.35} .wolldi-review__quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.legal-body .wolldi-review__quote{display:flex;flex-direction:column;justify-content:space-between;min-height:180px;margin:0;padding:20px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:15px;background:var(--raise);color:var(--txt)} .wolldi-review__quote p{margin:0;font-size:14px;line-height:1.6}.wolldi-review__quote footer{display:grid;gap:2px;margin-top:18px}.wolldi-review__quote footer strong{font-size:12px}.wolldi-review__quote footer span{color:var(--dim);font-size:10.5px}.wolldi-review__method-note{margin:13px 0 0!important;color:var(--dim)!important;font-size:11px!important} .wolldi-review__empty-evidence{margin-top:15px;padding:20px 22px;border:1px dashed var(--line);border-radius:14px;background:var(--sunk)}.wolldi-review__empty-evidence strong{font-size:15px}.wolldi-review__empty-evidence p{max-width:760px;margin:6px 0 0;color:var(--sub);font-size:13px} .wolldi-review__table-scroll{overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--raise)} .wolldi-review__spec-table,.wolldi-review__compare-table{width:100%;border-collapse:collapse}.wolldi-review__spec-table th,.wolldi-review__spec-table td,.wolldi-review__compare-table th,.wolldi-review__compare-table td{padding:13px 16px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top} .wolldi-review__spec-table tr:last-child th,.wolldi-review__spec-table tr:last-child td,.wolldi-review__compare-table tbody tr:last-child th,.wolldi-review__compare-table tbody tr:last-child td{border-bottom:0}.wolldi-review__spec-table th{width:34%;font-size:13px}.wolldi-review__spec-table td{color:var(--sub)} .wolldi-review__compare-table thead{background:var(--sunk)}.wolldi-review__compare-table th{font-size:13px}.wolldi-review__compare-table td{color:var(--sub);font-size:14px} .wolldi-review__variant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wolldi-review__variant-card{display:grid;grid-template-columns:auto 1fr;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--raise)} .wolldi-review__variant-card>img{width:120px;height:100%;min-height:160px;object-fit:contain;background:var(--sunk)}.wolldi-review__variant-copy{padding:19px 20px}.wolldi-review__variant-card>div>span{color:var(--acc-fg)}.wolldi-review__variant-card h3{margin:0 0 10px;font-size:17px}.wolldi-review__variant-card ul{margin:0;padding-left:18px;color:var(--sub);font-size:13px} .wolldi-review__variant-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}.wolldi-review__variant-meta strong{font-size:13px}.wolldi-review__stock{font-size:10px;font-style:normal;font-weight:800;color:var(--sub)}.wolldi-review__stock-in_stock{color:var(--good)}.wolldi-review__stock-out_of_stock{color:var(--bad)} .wolldi-review__checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.wolldi-review__checklist li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;align-items:start;padding:15px 17px;border:1px solid var(--line2);border-radius:13px;background:var(--raise)} .wolldi-review__checklist span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--acc-bg);color:var(--acc-fg);font-size:10px;font-weight:900}.wolldi-review__checklist p{margin:4px 0 0;font-size:14px} .wolldi-review__faq-item{max-width:860px;padding:18px 0;border-bottom:1px solid var(--line2)}.wolldi-review__faq-item:last-child{border-bottom:0}.wolldi-review__faq-item h3{margin:0 0 6px;font-size:17px}.wolldi-review__faq-item p{margin:0;color:var(--sub)} .wolldi-review__disclosure{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;color:var(--dim);font-size:11px}.wolldi-review__disclosure p{max-width:720px;margin:0}.wolldi-review__disclosure a{flex:0 0 auto;color:var(--acc-fg);font-weight:800;text-decoration:none}.wolldi-review__disclosure a:hover{text-decoration:underline}.review-page>.legal-updated{max-width:none;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)} /* ── НАЛОЖЕНИЕ ТЕПЛОВОЙ КАРТЫ (только для владельца, по «#heat») ── */ .heat-cvs{position:fixed;inset:0;z-index:200;pointer-events:none} .heat-tag{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:201; padding:7px 12px;border-radius:999px;font:600 12px var(--ui);color:#fff; background:rgba(10,12,14,.88);border:1px solid rgba(255,255,255,.2); box-shadow:0 6px 20px rgba(0,0,0,.4);white-space:nowrap;max-width:94vw; overflow:hidden;text-overflow:ellipsis} .heat-tag button{margin-left:10px;padding:2px 9px;border-radius:999px;font:600 11px var(--ui); color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)} /* ── АДАПТАЦИЯ ПОД ПРИВЫЧКИ: объявление и свёрнутая панель, кнопка на карточке ── */ .adapt-note{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);z-index:65; display:flex;align-items:center;gap:10px;max-width:min(92vw,560px);padding:10px 12px 10px 14px; border-radius:14px;background:var(--raise);border:1px solid var(--acc-line); box-shadow:0 12px 32px var(--shadow);font-size:13px;color:var(--txt);line-height:1.4} .adapt-note .fl{flex:none;padding:6px 12px} .mpanel-fold{margin:12px 0} .mpanel-fold > summary{cursor:pointer;list-style:none;padding:10px 14px;border-radius:var(--r); background:var(--sunk);border:1px solid var(--line2);font-size:13px;font-weight:600} .mpanel-fold > summary::-webkit-details-marker{display:none} .mpanel-fold > summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--dim)} .mpanel-fold[open] > summary::before{content:"▾"} .mpanel-fold > summary span{color:var(--dim);font-weight:400;font-size:12px} .mpanel-fold[open] > summary{border-radius:var(--r) var(--r) 0 0} .mpanel-fold[open] > .mpanel{margin-top:0;border-radius:0 0 var(--r) var(--r);border-top:0} /* ── НИЖНИЙ РЯД КАРТОЧКИ: БЕГУЩИЕ СТАТУСЫ СЛЕВА, «КУПИТЬ» СПРАВА ── Две колонки поровну, высота 30px у обеих. Строка слева — окно в одну строку, статусы сменяются вертикальным сдвигом (см. startTicks); пауза при наведении, при prefers-reduced-motion стоит первый. Цвет по смыслу: зелёный — в пользу покупателя, тёплый — оценка, ледяной — скорость. */ .k .krow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:9px;align-items:stretch} .k .ktick{height:30px;overflow:hidden;border-radius:9px;background:var(--sunk); border:1px solid var(--line2);padding:0 8px;min-width:0} .k .ktick.wide{grid-column:1/-1} .k .ktick ul{list-style:none;margin:0;padding:0;transition:transform .45s cubic-bezier(.25,.9,.3,1)} .k .ktick li{height:30px;line-height:30px;font-size:10.5px;font-weight:600;color:var(--sub); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} .k .ktick li i{font-style:normal;margin-right:4px;font-size:9.5px} .k .ktick li.good{color:var(--good)} .k .ktick li.warm{color:var(--warn)} .k .ktick li.ice{color:var(--acc-fg)} .k .kbuy{display:flex;align-items:center;justify-content:center;height:30px;padding:0 9px; min-width:38%;font-size:12px;font-weight:700;border-radius:9px;white-space:nowrap;margin:0} @media (prefers-reduced-motion:reduce){.k .ktick ul{transition:none}} /* Узкая карточка (пять в ряд на столе — по 140px): половины по 60px не читаются. Тогда строка — во всю ширину, кнопка — под ней. Меряется по ширине самой карточки, а не экрана: та же карточка в три ряда — широкая. */ .k .body{container-type:inline-size} @container (max-width:190px){ .k .krow{grid-template-columns:1fr} .k .kbuy{min-width:0} } @media (max-width:560px){ .k .krow{gap:5px;margin-top:8px} .k .ktick{padding:0 7px} .k .ktick li{font-size:10.5px} .k .kbuy{font-size:11.5px;padding:0 6px} } @media (max-width:640px){ .adapt-note{bottom:auto;top:64px;flex-wrap:wrap} } /* ── ПОЛОСКА СОГЛАСИЯ ── Внизу и узкой лентой: она не должна закрывать товар, ради которого пришли. Обе кнопки равноправны по размеру — «Только необходимое» не спрятано мелким серым, иначе это не выбор, а его имитация. */ .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} /* ── ШИРОКИЙ ЭКРАН ── Компактный список делался под телефон, где после клавиатуры остаётся меньше половины экрана. На мониторе та же строка в 38 пикселей оставляет рядом с полем пустую половину ширины — ровно в тот момент, когда человек решает, что ему нужно. Здесь места хватает на настоящую карточку. */ /* Ширину здесь НЕ трогаем. Список и поле ввода оба ограничены одной величиной и центрированы — то есть список уже ровно по ширине поля. Первая версия ставила ему 980 пикселей «чтобы было шире», а выходило уже прежних 1224: список съезжал относительно поля под ним, и это было видно именно на большом мониторе, ради которого всё и делалось. */ .sug-cards{display:grid;gap:1px;background:var(--line2)} @media(min-width:1180px){.sug-cards{grid-template-columns:1fr 1fr}} .sug-card{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:13px; align-items:start;padding:13px 15px;background:var(--raise);border-bottom:0} .sug-card:hover,.sug-card.on{background:var(--raise2)} .sc-ph{width:92px;height:92px;border-radius:11px;overflow:hidden;flex:none; background:var(--ph);display:flex;align-items:center;justify-content:center} .sc-ph img{width:100%;height:100%;object-fit:cover} .sc-ph span{width:100%;height:100%;display:block} .sc-tx{min-width:0;display:flex;flex-direction:column;gap:3px} .sc-brand{font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--dim)} .sc-title{font-size:15px;line-height:1.3;font-weight:600; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .sc-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap; font-size:12px;color:var(--sub);margin-top:1px} .sc-rate{font-weight:600;color:var(--txt)} .sc-rate i{font-style:normal;color:var(--dim);font-weight:400} .sc-fast{color:var(--acc);font-weight:600} .sc-ship{color:var(--sub)} /* Характеристики — причина выбрать именно эту вещь, а не соседнюю. На телефоне их не показать, на мониторе для них есть место. */ .sc-specs{list-style:none;margin:5px 0 0;padding:0;display:flex; flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--sub)} .sc-specs b{font-weight:600;color:var(--dim);font-size:10.5px; text-transform:uppercase;letter-spacing:.04em;margin-right:3px} .sc-buy{display:flex;flex-direction:column;align-items:flex-end;gap:7px; white-space:nowrap} .sc-price{font-size:17px;font-weight:700;letter-spacing:-.01em} .sc-go{font-size:12px;font-weight:600;color:var(--acc); border:1px solid var(--line);border-radius:8px;padding:4px 11px} /* Текст поверх акцента — токеном: в тёмной теме акцент светло-синий, и белые буквы на нём не читаются. Для этого `--on-acc` и заведён. */ .sug-card:hover .sc-go,.sug-card.on .sc-go{border-color:var(--acc); background:var(--acc);color:var(--on-acc)} @media(max-width:1179px){ .sc-specs{display:none} .sug-card{grid-template-columns:72px minmax(0,1fr) auto} .sc-ph{width:72px;height:72px}} /* ── ПАНЕЛЬ ВЫДАЧИ ── Две зоны с подписями вместо россыпи ручек. Обе — ленты вправо: условий и уточнений бывает много, и расти им положено вбок, а не вниз, иначе панель съедает экран телефона так же, как это делали подсказки. */ .panel{margin:10px 0 4px} .panel-cap{margin:0 0 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--dim)} .panel-row{display:flex;gap:6px;align-items:center;overflow-x:auto; overscroll-behavior-x:contain;padding-bottom:3px;margin-bottom:11px} .panel-row:last-child{margin-bottom:0} .panel-row::-webkit-scrollbar{height:3px} .panel-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px} /* Выбранное условие снимается там же, где написано: крестик — часть чипса. */ .fchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px; border:1px solid var(--acc-line);background:var(--acc-bg);color:var(--txt); border-radius:999px;padding:5px 7px 5px 12px;font:inherit;font-size:13px; white-space:nowrap;cursor:pointer} .fchip i{font-style:normal;width:18px;height:18px;border-radius:50%;flex:none; background:var(--raise2);color:var(--sub);display:flex;align-items:center; justify-content:center;font-size:10px} .fchip:hover i{background:var(--line-hi);color:var(--txt)} /* Уточнение несёт значение и число: сколько останется, если нажать. */ .sug-opt{flex:none;display:inline-flex;align-items:center;min-height:34px; border:1px solid var(--line);background:var(--sunk);color:var(--txt); border-radius:9px;padding:5px 11px;font:inherit;font-size:13px; white-space:nowrap;cursor:pointer} .sug-opt:hover{border-color:var(--line-hi)} .sug-opt small{margin-left:6px;color:var(--dim);font-size:11.5px; font-variant-numeric:tabular-nums} /* Ноль не прячем: он говорит, что такой товар в каталоге есть, но не здесь. */ .sug-opt.empty{opacity:.45;cursor:default} .panel-link{flex:none;border:0;background:none;color:var(--acc);font:inherit; font-size:12.5px;cursor:pointer;padding:5px 4px;white-space:nowrap} .panel-count{flex:none;margin-left:auto;color:var(--dim);font-size:12.5px; white-space:nowrap;padding-left:8px} .panel .filters{margin-top:2px} /* ── ТОВАРЫ И СЛОВА ── Список перестал быть однородным: сверху до трёх товаров строками, ниже остальные подсказки чипсами. И главное — у списка появился потолок. Без него восемь строк по 56 пикселей давали 450, а на телефоне после клавиатуры остаётся около трёхсот: список не помещался вдвое и выдавливал диалог. Потолок в dvh, а не в vh: vh на телефоне не знает ни про адресную строку, ни про клавиатуру. */ #sugbox{max-height:min(46dvh,320px);overflow-y:auto;overscroll-behavior:contain} /* На мониторе потолок другой: он ставился под телефон с клавиатурой, а здесь клавиатуры нет и карточка вчетверо выше строки. Триста двадцать пикселей обрезали бы её на второй же штуке. */ #sugbox.wide{max-height:min(72dvh,620px)} /* Строка товара чуть плотнее прежней: миниатюра 34 вместо 38. */ .sug .ic{width:34px;height:34px} .sug-chips{display:flex;flex-wrap:wrap;gap:6px;padding:9px 13px 11px} /* Два класса в селекторе — чтобы правило гарантированно перебивало и общий вид строки, и мобильное min-height:44px, где бы они ни стояли в файле. */ .sug.sug-chip{display:inline-flex;align-items:center;min-height:36px;max-width:100%; padding:6px 12px;border:1px solid var(--line);border-radius:999px; background:var(--sunk);font-size:13px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .sug.sug-chip:hover,.sug.sug-chip.on{background:var(--acc-bg); border-color:var(--acc-line);color:var(--txt)} .sug.sug-chip b{font-weight:700;color:var(--acc-fg)} #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} /* Счётчик знаков: спокойный, пока запас есть, и заметный на подходе к пределу. Красный с первого знака учил бы не смотреть на него вовсе. */ /* Пояснение под полем вопроса и место для ответа. Оба класса разметка ставила, а описания у них не было: подпись читалась как обычный текст, а ответ прижимался к кнопке вплотную. Потерялись при вынесении стилей в отдельный файл — та же история, что была со списками. */ .sub{color:var(--dim);font-size:12.5px;line-height:1.5} .ask-out{margin-top:10px;font-size:14px;line-height:1.6;overflow-wrap:anywhere} .ask-out:empty{display:none} .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} /* Нижний ряд карточки: обе колонки 36px — пальцем попасть можно, а карточка не растёт на полтора ряда. */ .k .ktick,.k .kbuy{height:36px;min-height:36px} .k .ktick li{height:36px;line-height:36px} .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} .mgal{max-height:38vh} .mgal img.hero{padding:10px} .mthumb{width:56px;height:56px} .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 20px;padding:24px 19px;border-radius:19px}.news-hero h1{font-size:32px;line-height:1.08} .news-hero p{font-size:15px;line-height:1.55}.news-hero-jump{margin-top:17px}.news-hero-stats{margin-top:22px}.news-hero-stats>div{min-height:86px;padding:14px}.news-hero-stats strong{font-size:25px}.news-hero-stats>p{font-size:11.5px} .news-directory{margin-bottom:28px;padding:18px 14px;border-radius:17px}.news-directory-head{display:block;margin-bottom:14px}.news-directory-head p{margin-top:8px;text-align:left}.news-topics{display:flex;width:calc(100% + 14px);gap:8px;overflow-x:auto;padding:1px 14px 8px 1px;scroll-snap-type:x proximity} .news-topic{flex:0 0 220px;scroll-snap-align:start}.news-section-head{align-items:end;margin-bottom:11px}.news-section-head h2{font-size:22px}.news-section-head>span{font-size:10.5px} .news-grid{grid-template-columns:1fr;gap:16px} .news-card,.news-card:not(.featured):last-child:nth-child(even){grid-column:auto;grid-template-columns:112px minmax(0,1fr);min-height:170px;border-radius:15px} .news-card.featured{display:block;grid-column:auto;min-height:0;border-radius:18px}.news-card-media{min-height:170px}.news-card.featured .news-card-media{min-height:0;aspect-ratio:16/10} .news-card-media img,.news-card.featured .news-card-media img{padding:12px}.news-card-body,.news-card.featured .news-card-body{display:flex;padding:15px} .news-card.featured h2,.news-card h2,.news-card:not(.featured):last-child:nth-child(even) h2{max-width:none;margin:9px 0 7px;font-size:19px;line-height:1.2} .news-card.featured .news-card-summary,.news-card-summary{display:-webkit-box;margin-bottom:11px;font-size:12.5px;line-height:1.45;-webkit-line-clamp:2}.news-card-meta time{display:none} .news-card-foot{padding-top:8px}.news-card-context{display:none}.news-read{min-height:34px;font-size:11.5px}.news-card-number{top:8px;left:8px;width:30px;height:30px} .news-mosaic,.news-mosaic:has(>.news-card:nth-child(2):last-child),.news-mosaic:has(>.news-card:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:158px;gap:8px} .news-mosaic .news-card,.news-mosaic .news-card:not(.featured):last-child:nth-child(even){display:block;min-height:0;border-radius:13px} .news-mosaic .news-card.featured,.news-mosaic:has(>.news-card:nth-child(2):last-child) .news-card.featured,.news-mosaic:has(>.news-card:nth-child(3):last-child) .news-card.featured{grid-column:1/-1;grid-row:span 2;min-height:0;border-radius:16px} .news-mosaic>.news-card:last-child:nth-child(even){grid-column:1/-1}.news-mosaic .news-card.featured .news-card-body{padding:74px 16px 15px}.news-mosaic .news-card.featured h2{font-size:23px} .news-mosaic .news-card.featured .news-card-summary{font-size:10.5px}.news-mosaic .news-card-body{padding:44px 11px 10px}.news-mosaic .news-card h2{font-size:13px}.news-mosaic .news-card-meta time{display:none} .review-page{padding-bottom:24px}.review-page>.crumbs{font-size:0;white-space:nowrap}.review-page>.crumbs span{display:none}.review-page>.crumbs a{font-size:11px}.review-page>.crumbs a+a:before{content:'›';margin:0 7px;color:var(--dim)}.wolldi-review__head{padding:15px 0 2px}.wolldi-review__head h1{font-size:30px} .wolldi-review__head>p{font-size:16px}.wolldi-review__byline{align-items:flex-start;flex-direction:column;gap:4px} .wolldi-review__byline span{padding:0;border:0}.wolldi-review__product{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:stretch;margin:21px 0 22px;border-radius:16px} .wolldi-review__product-media{min-height:0;height:auto;padding:9px;aspect-ratio:auto}.wolldi-review__product img{height:100%;max-height:190px;object-fit:contain}.wolldi-review__image-label{display:none} .wolldi-review__product-info{padding:14px 13px}.wolldi-review__product-info>.wolldi-review__kicker{display:none}.wolldi-review__product h2{margin:0 0 6px;font-size:17px}.wolldi-review__product-tags{display:none} .wolldi-review__rating{margin-bottom:8px}.wolldi-review__price{display:block;margin-bottom:10px}.wolldi-review__price strong{font-size:22px} .wolldi-review__price small{display:block;max-width:none;margin-top:4px;text-align:left}.wolldi-review__actions{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:0}.wolldi-review__actions a{min-height:40px;padding:6px;font-size:10.5px}.wolldi-review__commission,.wolldi-review__snapshot{display:none}.wolldi-review>.legal-body{font-size:15.5px;line-height:1.72} .wolldi-review__verdict{padding:24px 21px;border-radius:17px}.wolldi-review__verdict h2{font-size:25px}.wolldi-review__verdict .wolldi-review__verdict-lead{font-size:16.5px} .wolldi-review__verdict-points{grid-template-columns:1fr}.wolldi-review__toc{width:calc(100% + var(--gut) * 2);margin-left:calc(-1 * var(--gut));border-right:0;border-left:0;border-radius:0;padding-left:var(--gut);padding-right:var(--gut)} .wolldi-review__rich-section{padding:34px 0}.wolldi-review__rich-section>h2{font-size:24px} .wolldi-review__audience-grid,.wolldi-review__signal-grid,.wolldi-review__variant-grid,.wolldi-review__quote-grid{grid-template-columns:1fr} .wolldi-review__audience,.wolldi-review__signal{padding:20px}.wolldi-review__evidence-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.wolldi-review__evidence-strip>div{padding:14px}.wolldi-review__evidence-strip strong{font-size:19px}.legal-body .wolldi-review__quote{min-height:0;padding:18px} .wolldi-review__spec-table th,.wolldi-review__spec-table td,.wolldi-review__compare-table th,.wolldi-review__compare-table td{padding:12px;min-width:130px} .wolldi-review__variant-card>img{width:104px;min-height:145px}.wolldi-review__variant-copy{padding:16px}.wolldi-review__checklist{grid-template-columns:1fr}.wolldi-review__checklist li{grid-template-columns:38px minmax(0,1fr);padding:14px} .wolldi-review__disclosure{display:block}.wolldi-review__disclosure a{display:inline-block;margin-top:12px} .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} /* На телефоне квадрат съел бы весь экран: рамка ниже, снимок вписан. */ .mgal{aspect-ratio:auto;height:min(60vw,260px);border-radius:12px; touch-action:pan-y} .mgal img.hero{padding:8px} .mgal-arr{width:30px;height:30px;font-size:20px} .mgal-arr.prev{left:6px} .mgal-arr.next{right:6px} .mgal-n{right:8px;bottom:8px;font-size:11px;padding:2px 8px} .mgal-thumbs{gap:7px;margin-top:8px;touch-action:pan-x;overscroll-behavior-x:contain} .mthumb{width:52px;height:52px;border-radius:9px} .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{gap:5px 12px;font-size:12px} .mw-sect{margin-bottom:18px} /* Короткие блоки окна: характеристики в одну колонку — двум тесно; три плитки чисел остаются, шрифт чуть меньше. */ .mspec{grid-template-columns:1fr} .mwhy{gap:6px} .mwhy div{padding:8px 9px} .mwhy b{font-size:15px} .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} /* Во втором ряду две кнопки — «Ask a question» и «Full page»; ♡ и 🔗 ушли в шапку окна. Вторая занимает две колонки, чтобы ряд был полным. */ .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/4;grid-row:2} .mw-f .mfoot-pages{grid-column:1/-1;grid-row:3;width:100%;min-width:0; grid-template-columns:minmax(0,1fr);align-items:start;gap:7px;padding-top:7px} .mw-f .mfoot-links{justify-content:flex-start;width:100%} /* ── 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 .mfoot-pages{grid-column:1/-1;grid-row:3} .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} .thumb{width:50px;height:50px} .thumbs{gap:6px} } /* ══ ПОМОЩЬ С ВЫБОРОМ ══ Метки на карточке, расширяющие подсказки и наши готовые разборы. */ .badges{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px} .bdg{font-size:11px;font-weight:700;letter-spacing:.01em;padding:2px 8px; border-radius:999px;white-space:nowrap;background:var(--sunk);color:var(--sub); border:1px solid var(--line)} /* Цвета меток берутся из тем, а не пишутся вручную. Первая версия задавала светлую палитру в основе и тёмную в медиазапросе — но витрина тёмная ПО УМОЛЧАНИЮ, а светлой её делает выбор человека. То есть по умолчанию метки выходили светлыми на тёмном, а при выбранной светлой теме на тёмной системе — наоборот. Две рукописные палитры и не могли сойтись: тем здесь три — тёмная, светлая и «как в системе». */ .bdg-cheap{background:color-mix(in srgb,var(--acc) 15%,transparent); color:var(--acc-fg);border-color:var(--acc-line)} .bdg-rating{background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn);border-color:color-mix(in srgb,var(--warn) 38%,transparent)} .bdg-reviews{background:var(--sunk);color:var(--sub);border-color:var(--line-hi)} .bdg-fast{background:transparent;color:var(--acc-fg);border-color:var(--acc-line)} /* Подсказка «показать больше» отличается от сужающих: у неё плюс, а не остаток, и путать их нельзя — это противоположные действия. */ .sug-opt.wide{border-style:dashed} .sug-opt.wide small{color:var(--acc)} /* ══ ЧЕМ ЭТОТ ТОВАР ОТЛИЧАЕТСЯ ОТ СОСЕДА ══ Метка отвечает одним словом, но одним словом не сказать, ПОЧЕМУ товар стоит смотреть. Сервер выбирает вид блока по метрикам самого товара: у одного здесь график упавшей цены, у другого срок крупно, у третьего честное предупреждение. Один набор правил, двенадцать видов. Цвет на контейнере не украшение, а механизм: спарклайн и полоса рисуются через `currentColor`, поэтому вид меняется одним классом и обе темы получают его бесплатно. */ .mx-wrap{margin-top:1px} .mx{display:flex;flex-direction:column;gap:2px;font-size:11.5px; line-height:1.36;color:var(--acc-fg)} .mx-good{color:var(--good)} .mx-ice{color:var(--acc-fg)} .mx-gold{color:var(--warn)} .mx-quiet{color:var(--sub)} .mx-spark{display:block;width:100%;height:24px;overflow:visible} .mx-bar{height:4px;border-radius:2px;background:var(--bg);overflow:hidden; margin-top:4px;border:1px solid var(--line2)} .mx-bar i{display:block;height:100%;border-radius:2px;background:currentColor} .mx-bar i.warn{background:var(--warn)} /* Подпись под полосой или графиком. Слева — что меряем, справа — число. Числа моноширинные по цифрам: в столбце карточек они обязаны стоять в одной колонке, иначе глаз ищет их заново на каждой карточке. */ .mx-lab{display:flex;justify-content:space-between;gap:8px;font-size:11px; margin-top:3px} .mx-lab span{color:var(--dim)} .mx-lab b{font-weight:700;font-variant-numeric:tabular-nums} .mx-note{color:var(--dim);font-size:11px;line-height:1.35} .mx-good-t{color:var(--good);font-weight:600} .mx-big{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .mx-big em{font-style:normal;font-weight:700;font-size:18px;line-height:1.05; letter-spacing:-.022em} .mx-big em.gold{color:var(--warn)} .mx-big em.ice{color:var(--acc-fg)} .mx-big span{color:var(--dim);font-size:11px} /* Предупреждение видно рамкой, а не только цветом: цвет один человек из двенадцати не различает, а рамку видят все. */ .mx-warn{flex-direction:row;gap:6px;align-items:flex-start;color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent); border:1px solid color-mix(in srgb,var(--warn) 32%,transparent); border-radius:8px;padding:5px 8px} .mx-warn i{font-style:normal;flex:none;line-height:1.3} .mx-quiet{flex-direction:row;flex-wrap:wrap;gap:5px;align-items:baseline} .mx-quiet i{font-style:normal;flex:none} .mx-row{flex-direction:row;flex-wrap:wrap;gap:5px} .mx-chip{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px; white-space:nowrap;background:var(--sunk);color:var(--sub); border:1px solid var(--line)} .mx-chip.good{background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good);border-color:color-mix(in srgb,var(--good) 34%,transparent)} .mx-chip.gold{background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent)} .mx-chip.coup{background:transparent;color:var(--warn);border-style:dashed; border-color:color-mix(in srgb,var(--warn) 45%,transparent)} /* Пять столбиков вместо одной цифры: 4.7 из ровных пятёрок и 4.7 из смеси двоек с пятёрками — разные товары, а число одно. */ .mx-five{display:flex;gap:3px;align-items:flex-end;height:18px;margin-top:4px} .mx-five u{flex:1;background:var(--line);border-radius:2px; text-decoration:none;min-height:3px} .mx-five u.hi{background:var(--warn)} .mx-specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px; margin:2px 0 0;font-size:11.5px} .mx-specs dt{color:var(--dim)} .mx-specs dd{margin:0;color:var(--txt);font-weight:600;text-align:right; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── ЛЕНТА СОБЫТИЙ НА КАРТИНКЕ ── Без имён: людей мы не называем, показываем только действие. Строки уезжают вверх, верх окна размыт в ноль — у ленты нет края, она просто уходит. Пилюли по ширине текста: ровный столбик читался бы таблицей. Показывается только от трёх человек — «1 looking» это пустой зал. */ .mx-live{position:absolute;left:8px;right:8px;bottom:8px;z-index:3; pointer-events:none} /* ── ЛЕНТА РАСТЁТ СНИЗУ ВВЕРХ ── Верх размыт в ноль — у ленты нет края, она просто уходит. Содержимое прижато к НИЗУ окна, и это не косметика: лента заполняется снизу, как переписка. Пока она была прижата к верху, первое событие появлялось в самой размытой части окна — то есть почти невидимым, — а низ пустовал. И подсветка «только что», висящая на последней пилюле, совпадала с нижней только когда пилюль оказывалось ровно три. */ .mx-feed{height:66px;overflow:hidden;display:flex;align-items:flex-end; -webkit-mask-image:linear-gradient(transparent 1%,#000 44%,#000); mask-image:linear-gradient(transparent 1%,#000 44%,#000)} .mx-reel{display:flex;flex-direction:column;align-items:flex-start;gap:4px; width:100%;will-change:transform} /* ── ПИЛЮЛЯ ── Каждое событие занимает ровно свою ширину: получается неровный левый столбик, который читается как живая лента. Одинаковые строки во всю ширину читались бы таблицей. Мельче прежнего: 18 пикселей вместо двадцати, значок в своём кружке — в нём и цвет события, поэтому текст остаётся спокойным. */ /* ── БЕЗ РАЗМЫТИЯ ФОНА ── Здесь стоял `backdrop-filter`. На одной пилюле он незаметен, но пилюль в ряду из десяти карточек набирается СЕМЬДЕСЯТ, и каждая заставляет видеокарту размывать кусок фона на каждом кадре. Страница начинала подвисать — при том что вся остальная работа занимала миллисекунды. Плотная подложка поверх цветного квадрата выглядит так же, а стоит ноль. */ .mx-reel span{display:flex;align-items:center;gap:5px;flex:none;height:18px; padding:0 8px 0 2px;border-radius:999px;white-space:nowrap;font-size:10px; font-weight:600;color:#fff;letter-spacing:.005em; border:1px solid rgba(255,255,255,.16); background:linear-gradient(135deg,rgba(13,16,19,.88),rgba(9,11,13,.8)); box-shadow:0 2px 8px rgba(0,0,0,.32)} .mx-reel u{text-decoration:none} /* ── ЧИСЛО В ПИЛЮЛЕ — ТА ЖЕ СТРОКА, ТОЛЬКО ПЛОТНЕЕ ── Размер задан явно и ничего не наследует от квадрата: пилюля лежит внутри него, а там крупный шрифт у буквы бренда. Одной небрежности в селекторе хватило, чтобы «7» и «34» встали сорока пикселями в пилюле высотой восемнадцать — поэтому размер здесь закреплён, а не оставлен на усмотрение наследования. */ .mx-reel b{font-weight:700;font-size:10px;font-family:var(--ui); line-height:1;letter-spacing:0;color:#fff} .row6 .mx-reel b, .cards .mx-reel b{font-size:inherit} /* Значок в кружке своего цвета: событие узнаётся до чтения текста. */ .mx-reel i{font-style:normal;font-size:8px;line-height:1;flex:none; width:14px;height:14px;border-radius:50%;display:flex; align-items:center;justify-content:center;color:#0b1013} .mx-reel .eye{background:#7fd7ff} .mx-reel .fav{background:#ff8f7d} .mx-reel .buy{background:#5fbf84} .mx-reel .demo{background:#ffb547} /* ── СВЕЖЕЕ СОБЫТИЕ ЗАМЕТНЕЕ ОСТАЛЬНЫХ ── Нижняя пилюля — только что случившееся. Кольцо и мягкое свечение, и раз в шесть секунд по ней проходит блик. Светится ОДНА из трёх: если подсветить все, подсветка перестаёт что-либо значить. */ .mx-reel span:last-child{ border-color:rgba(127,215,255,.45); background:linear-gradient(135deg,rgba(24,44,58,.82),rgba(11,18,24,.66)); box-shadow:0 0 0 1px rgba(127,215,255,.12), 0 4px 16px rgba(127,215,255,.22)} /* Блик по свежей пилюле — тоже трансформом. Двигать `background-position` значит перерисовывать пилюлю на каждом кадре; трансформ этого не требует. Полоска шириной в половину пилюли ездит внутри неё. */ .mx-reel span:last-child::after{content:"";position:absolute;top:0;bottom:0; left:0;width:50%;pointer-events:none; background:linear-gradient(100deg,transparent, rgba(255,255,255,.32),transparent); transform:translateX(-140%);will-change:transform; animation:feedshine 6s ease-in-out infinite} @keyframes feedshine{0%,74%{transform:translateX(-140%)} 92%,100%{transform:translateX(260%)}} .mx-reel span{position:relative;overflow:hidden} /* Переход в магазин — самое сильное действие, и видно это сразу. */ .mx-reel span.hot{border-color:rgba(95,191,132,.5); box-shadow:0 0 0 1px rgba(95,191,132,.14), 0 4px 16px rgba(95,191,132,.26)} /* Пометка о показательных данных. Отличается и цветом значка, и рамкой: покупатель обязан отличить нарисованное число от настоящего, и одного оттенка для этого мало. */ .mx-reel span.is-demo{border-color:rgba(255,181,71,.5); background:linear-gradient(135deg,rgba(46,35,14,.82),rgba(20,15,8,.62)); box-shadow:0 0 0 1px rgba(255,181,71,.14)} .mx-reel span.is-demo::after{animation:none;background:none} .cards.sz-l .mx-feed{height:88px} /* В списке картинка шириной сто двадцать пикселей — лента там не живёт. */ .cards.list .mx-live{display:none} /* ══ ВСЕ МЕТРИКИ РАЗОМ ══ Попап и страница товара: сюда приходят разбираться, и здесь показываем всё, что знаем. Каждая строка называет единицу — «82» без «% of the category» это не показатель, а загадка. */ .mpanel{margin:12px 0;padding:12px 14px;background:var(--sunk); border:1px solid var(--line2);border-radius:var(--r)} .mpanel h4{margin:0 0 7px;font-size:13px;font-weight:600} .mpanel-why{margin:0 0 11px;font-size:12px;color:var(--dim);line-height:1.45} .mpanel-why b{color:var(--acc-fg);font-weight:600} .mpanel-g + .mpanel-g{margin-top:12px;padding-top:11px; border-top:1px solid var(--line2)} .mpanel-g h5{margin:0 0 8px;font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--dim);font-weight:600; display:flex;justify-content:space-between;gap:8px;align-items:baseline} /* Правая часть заголовка — уточнение обычным регистром: «Dog Beds, 10 products», «this week». */ .mpanel-g h5 span{letter-spacing:0;text-transform:none;font-weight:500;text-align:right} .mpanel dl{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:4px 14px;margin:0;font-size:12.5px} .mpanel dt{color:var(--sub);min-width:0} .mpanel dd{margin:0;color:var(--txt);font-weight:600;text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .mpanel-dist{margin-top:8px;display:flex;flex-direction:column;gap:3px} .mpanel-row{display:grid;grid-template-columns:30px minmax(0,1fr) 38px; gap:8px;align-items:center;font-size:11.5px;color:var(--dim)} .mpanel-row i{display:block;height:6px;border-radius:3px;background:var(--bg); border:1px solid var(--line2);overflow:hidden} .mpanel-row u{display:block;height:100%;background:var(--warn); text-decoration:none} .mpanel-row span:last-child{text-align:right;font-variant-numeric:tabular-nums} @media (max-width:640px){ /* На телефоне карточка узкая: лента событий съедает картинку целиком. */ .mx-feed{height:24px} /* На странице снимок во всю ширину экрана — две строки ему по силам. */ .pp-gal .mx-feed{height:50px} .pp-gal .mx-live.is-demo .mx-feed{height:44px} .mgal .mx-feed{height:44px} .mgal .mx-live{left:8px;right:8px;bottom:8px} /* Панель на телефоне: подписи полос короче, дуги по две в ряд. */ .wm-frow{grid-template-columns:96px minmax(0,1fr) auto 46px;gap:7px} .wm-week .wm-frow{grid-template-columns:78px minmax(0,1fr) auto} .wm-arcs{justify-content:space-around} .mpanel{padding:11px 12px} } @media (prefers-reduced-motion:reduce){ .mx-reel{transition:none!important} } /* ══════════════════════════════════════════════════════════════════ КАРТОЧКА ПО МАКЕТУ ══════════════════════════════════════════════════════════════════ Размеры, отступы и шрифты — из утверждённого макета один в один. Цвета взяты через токены темы: макет тёмный, а витрина умеет и светлую, и прибитый к макету цвет там стал бы невидимым. Двенадцать видов отличаются ТОЛЬКО добавленным блоком внутри тела. Скелет у всех один: квадрат, цена, доказательство, название, метки, срок. */ /* Промежуток между карточками — 10px: четырнадцать разводили ряд шире, чем нужно глазу, чтобы понять, где кончается одна карточка и начинается другая; у карточек есть рамка, она и так их разделяет. */ .cards{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px} /* Колонка, а не блок: карточки в ряду растянуты сеткой до одной высоты, и тело должно занимать весь остаток — иначе нижний ряд с кнопкой стоит там, где кончился текст, и «Buy now» у соседей висят на разной высоте. */ .k{--tone:var(--acc);--tone2:var(--acc2); display:flex;flex-direction:column; text-decoration:none;color:inherit;position:relative; background:var(--raise);border:1px solid var(--line);border-radius:15px; overflow:hidden;cursor:pointer; transition:transform .16s cubic-bezier(.2,.8,.3,1), border-color .16s, box-shadow .16s} /* Квадрат держит свой размер: в колонке он иначе сожмётся под остаток. */ .k > .sq{flex:0 0 auto} .k:hover{transform:translateY(-3px);border-color:var(--line-hi); box-shadow:0 16px 34px var(--shadow)} /* Квадрат. Фотографий в каталоге нет — буква бренда на цвете категории занимает РОВНО то же место: появятся снимки, встанут сюда и ничего не сдвинут. */ .k .sq{position:relative;aspect-ratio:1;display:flex;align-items:center; justify-content:center;overflow:hidden; background:linear-gradient(142deg,var(--tone),var(--tone2))} .k .sq img{width:100%;height:100%;object-fit:cover;display:block} /* ── БУКВА БРЕНДА, А НЕ ЛЮБОЙ В КВАДРАТЕ ── Здесь стоял .k .sq b. Лента событий живёт в том же квадрате, и её числа — «7 смотрят», «34 открыли» — тоже . Они получали размер буквы бренда: сорок с лишним пикселей внутри пилюли высотой восемнадцать. Только прямой потомок: остальные внутри квадрата принадлежат другим блокам и о своём размере договариваются сами. */ .k .sq > b{font:600 clamp(38px,9vw,52px)/1 Georgia,'Times New Roman',serif; color:#0b1422;opacity:.92;letter-spacing:-.02em; transition:transform .3s cubic-bezier(.2,.8,.3,1)} .k:hover .sq > b{transform:scale(1.07)} /* Косая сетка — чтобы плашка не читалась как заливка-заглушка. */ .k .sq::before{content:"";position:absolute;inset:0;opacity:.13; background-image:linear-gradient(45deg,#fff 1px,transparent 1px); background-size:11px 11px;pointer-events:none} .k .sq::after{content:"";position:absolute;top:-40%;left:-15%;width:75%; height:170%;transform:rotate(18deg);pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)} /* Угловая метка. Блик пробегает раз в четыре с половиной секунды: карточка живая, но не дёргается. */ .k .corner{position:absolute;top:0;left:0;z-index:3;overflow:hidden; background:linear-gradient(135deg,var(--sale),#e0402c);color:#fff; font:700 11px/1 var(--ui);letter-spacing:.02em;padding:6px 11px 6px 9px; border-radius:0 0 11px 0;box-shadow:0 3px 10px rgba(224,64,44,.35)} /* Блик двигается ТРАНСФОРМОМ, а не свойством `left`. `left` заставляет браузер пересчитывать разметку и перерисовывать блок на каждом кадре — двенадцать меток в ряду превращали это в постоянную работу. Трансформ отдаётся видеокарте и разметки не трогает. */ .k .corner::after{content:"";position:absolute;top:0;bottom:0;width:38%; left:0;background:linear-gradient(90deg,transparent, rgba(255,255,255,.5),transparent); transform:translateX(-160%);will-change:transform; animation:kshine 4.5s ease-in-out infinite} @keyframes kshine{0%,72%{transform:translateX(-160%)} 88%,100%{transform:translateX(320%)}} .k .corner.gold{background:linear-gradient(135deg,#ffc061,#f0992a); color:#2a1c05;box-shadow:0 3px 10px rgba(240,153,42,.32)} .k .corner.blue{background:linear-gradient(135deg,#9cc0ff,#6ba0ff); color:#0b1422;box-shadow:0 3px 10px rgba(107,160,255,.32)} .k .cond{position:absolute;left:9px;bottom:9px;z-index:3; font:600 10px var(--ui);padding:2px 7px;border-radius:5px; background:rgba(9,11,13,.6);color:#fff;backdrop-filter:blur(6px)} /* Сердечко работает, а не нарисовано. */ .k .heart{position:absolute;top:9px;right:9px;z-index:4;width:30px;height:30px; border:0;border-radius:50%;background:rgba(10,12,14,.46);color:#fff; backdrop-filter:blur(6px);font-size:14px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:transform .14s, background .14s} .k .heart:hover{transform:scale(1.14);background:rgba(10,12,14,.66)} .k .heart.on{color:var(--sale)} /* ── ОТКЛИК НА НАЖАТИЕ ── Сердечко меняет цвет — но смена цвета на тридцати пикселях почти незаметна, и человек не понимает, засчиталось ли. Кольцо расходится от сердечка за четыре десятых секунды: этого хватает, чтобы увидеть ответ, и мало, чтобы он мешал. Анимация вешается на КЛАСС, а не на :hover — значит проигрывается ровно в момент, когда класс появился, то есть по ответу сервера. */ .k .heart.on::after{content:"";position:absolute;inset:-4px;border-radius:50%; border:2px solid var(--sale);opacity:0;pointer-events:none; animation:heartpop .42s ease-out} @keyframes heartpop{0%{transform:scale(.6);opacity:.85} 100%{transform:scale(1.5);opacity:0}} @media (prefers-reduced-motion:reduce){ .k .heart.on::after{animation:none} } /* ── ВСЁ ОТ ОДНОЙ ЛЕВОЙ ЛИНИИ ── Цена, отзывы, название, метрика, метки и срок начинаются с одной вертикали. Часть блоков раньше разносила подпись и число по краям (`space-between`), часть жалась вправо — и текст в карточке шёл лесенкой: глазу не за что зацепиться, каждая строка начинается в новом месте. Одна левая линия читается сверху вниз без усилия. */ /* ── ПОЧЕМУ СЕЛЕКТОР ДЛИННЕЕ, ЧЕМ НУЖНО ── Выдача живёт внутри сообщения бота, а у него своё правило `.msg.bot .body {display:block}` — оно написано для пузыря переписки, но классом попадает и в карточку, и весом (три класса против двух) выигрывает. Тело карточки от этого оставалось блоком: колоночная раскладка ниже не работала вовсе, а вместе с ней и всё, что от неё зависит — выравнивание детей и прижатый к низу нижний ряд. Поэтому здесь селектор с тем же весом, но ниже по файлу: он и решает спор. */ /* Зазора между строками нет вовсе, и это не опечатка: у каждой строки тела своя высота с запасом (у названия 34 на две строки в 17, у меток 22 на чип в 19, у факта 16 на текст в 13) — воздух уже внутри них, и добавленный сверху лишь повторялся. Восемь строк по четыре пикселя зазора и щедрые поля стоили карточке полсотни пикселей — треть снимка товара, отданная ни за что. */ .msg .k .body, .k .body{padding:6px 12px 7px;display:flex;flex-direction:column;gap:0; text-align:left;align-items:stretch;flex:1 1 auto} /* Цена — самый громкий текст карточки. Центы мельче: глаз читает целое. */ .k .price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap; line-height:1;margin-bottom:0} .k .price em{font-style:normal;font-size:25px;font-weight:700; letter-spacing:-.028em;color:var(--txt)} .k .price em sup{font-size:13px;font-weight:600;top:-.66em;margin-right:1px} .k .price em small{font-size:14px;font-weight:600} .k .price del{font-size:12.5px;color:var(--dim);font-weight:400} .k .price ins{text-decoration:none;font:700 10.5px var(--ui); background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good); border-radius:4px;padding:2px 5px} /* Доказательство: чужой выбор убеждает сильнее звёзд, поэтому число отзывов стоит слева от оценки. */ .k .proof{font-size:11.5px;color:var(--dim);display:flex;align-items:center; gap:6px;min-height:14px} .k .proof b{color:var(--txt);font-weight:600} .k .proof .st{color:var(--warn);font-weight:600} /* Слабая оценка красная, а не золотая: золото тут читалось бы похвалой. */ .k .proof .st.low{color:var(--sale)} .k .proof s{width:1px;height:10px;background:var(--line); display:inline-block;text-decoration:none} /* Название — служебная подпись в две строки. Высота фиксирована: иначе карточки в ряду стоят на разной высоте и ряд пляшет. */ .k .name{font-size:12.5px;line-height:1.36;color:var(--sub); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:34px;text-decoration:none} .k:hover .name{color:var(--txt)} /* ── МЕТКИ ТОЖЕ ОТ ЛЕВОГО КРАЯ ── В витрине давно живут общие `.chips` и `.chip` с центрированием: они написаны для другого места, где метки стоят рядком под заголовком. Моё правило перекрыло у них шрифт и отступы, но НЕ центрирование — то, что не переопределено, продолжает действовать. Из-за этого строка меток в карточке одна стояла по центру, а всё остальное слева. */ /* Метки — ОДНА строка. Второй перенос добавлял карточке целую строку, и только ей: в ряду она становилась выше соседей на двадцать пикселей, а у остальных та же величина превращалась в пустоту. Что не поместилось — не потеряно: в бегущей строке нижнего ряда те же поводы повторены. */ .k .kchips{display:flex;gap:5px;flex-wrap:wrap;margin-top:1px; justify-content:flex-start;text-align:left; max-height:22px;overflow:hidden} .k .kchip{font:600 10.5px var(--ui);padding:3px 7px;border-radius:5px; white-space:nowrap;border:1px solid transparent; justify-content:flex-start;text-align:left; /* ── МЕТКА ШИРИНОЙ ПО ТЕКСТУ, А НЕ ВО ВСЮ СТРОКУ ── В медиазапросе для телефона у общей `.chip` стоит `width:100%`: она написана для главной, где метки — крупные кнопки во всю ширину. В карточке от этого каждая метка вставала отдельной строкой во весь столбец, и строка меток переставала быть строкой. Ширину задаём явно, иначе унаследованное правило переживёт любые правки выравнивания. */ width:auto;max-width:100%;flex:0 0 auto;align-self:flex-start; display:inline-flex;align-items:center} .k .kchip.pick{background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc-fg);border-color:color-mix(in srgb,var(--acc) 30%,transparent)} .k .kchip.coup{background:transparent;color:var(--warn); border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent)} .k .kchip.warn{background:color-mix(in srgb,var(--warn) 13%,transparent); color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)} /* ── ФАКТ, КОТОРЫМ ЗАНЯТО ОСТАВШЕЕСЯ МЕСТО ── Характеристика товара: название приглушённой заглавной мелочью, значение обычным текстом. Тоном строка тише названия и цены — это добор, а не то, ради чего на карточку смотрят. Значение в одну строку с многоточием: длинная характеристика иначе отнимет место у следующей и сломает слот, который ради ровного ряда и заведён. */ .k .kfact{display:flex;align-items:baseline;gap:6px;min-height:16px; font-size:11px;color:var(--sub);min-width:0} .k .kfact b{flex:none;font-weight:600;font-size:10px;color:var(--dim); text-transform:uppercase;letter-spacing:.04em} .k .kfact span{min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} /* ── СЛОТ ПОД ПОЯСНЕНИЕ К ЦЕНЕ ── Внутри — добавленный блок вида и строка отзывов. У разных видов это разное количество строк разной высоты: график с подписями, одна оговорка, полоса в четыре пикселя. Высота слота — по самому полному набору, и она же держит ритм у остальных: цена, название и всё ниже стоят у соседних карточек на одних линиях, а не расползаются по шаблону. */ /* Высота слота — под тот же набор строк, что и раньше, минус сэкономленные на зазорах пиксели: слот обязан вмещать полный набор, иначе он перестаёт держать ряд ровным и пустота возвращается. */ .k .kmid{display:flex;flex-direction:column;gap:0;min-height:58px} .k .kmid > *{margin-top:0} /* ── СЛОТ ПОД МЕТКИ И СРОК ── Обе строки необязательные: метки бывают не у каждого товара, а срок вид может не показывать, когда уже сказал его крупно. Высоту ряда задаёт самая полная карточка — и у остальных ровно эта разница собиралась одной пустотой внизу. Слот высотой в обе строки стоит всегда: карточка с одной строкой держит место второй, и метки со сроком у соседей оказываются на одной высоте. Содержимое прижато к низу слота — ближе к нижнему ряду, с которым оно и читается. */ .k .kfoot{display:flex;flex-direction:column;gap:0; justify-content:flex-end;min-height:38px} /* Отступы строк заданы для тела, где между ними гуляет gap; внутри слота они сбивают его высоту с расчётной. */ .k .kfoot > *{margin-top:0} /* Дата, а не «через 9 дней»: срок в днях надо считать в уме. */ .k .when{font-size:11.5px;font-weight:600;color:var(--txt); display:flex;align-items:center;gap:5px;margin-top:2px} .k .when i{font-style:normal;color:var(--good);font-weight:500} .k .when .fast{color:var(--acc-fg)} /* ── ВСЁ ВНУТРИ КАРТОЧКИ ПРИЖАТО ВЛЕВО ── Витрина большая, и в ней хватает правил, написанных для других мест: метки во всю ширину на главной, центрированные подписи, кнопки на всю строку. Любое из них, попав в карточку, ломает одну левую линию — и заметно это не там, где написано. Поэтому карточка договаривается об этом один раз и за всех своих детей. */ .k .body > *{align-self:flex-start;max-width:100%;text-align:left} /* Кроме тех, кому ширина нужна: полоса, график и столбики меряют себя по всей ширине карточки, иначе шкала перестаёт быть шкалой. */ .k .body > .bar, .k .body > .spark, .k .body > .mx-spark, .k .body > .five, .k .body > .blab, .k .body > .specs, .k .body > .name, .k .body > .up, .k .body > .kfoot, .k .body > .kmid{align-self:stretch} /* ── НИЖНИЙ РЯД СТОИТ НА ДНЕ КАРТОЧКИ ── У каждого шаблона свой набор строк, и текста в них разное количество: у одной карточки тело кончается на пять строк раньше, чем у соседней. Пока ряд шёл сразу за текстом, кнопки в ряду висели на разной высоте — глаз при сравнении ловил не цену, а прыгающие прямоугольники. Свободное место уходит НАД рядом, а не под ним, поэтому кнопки стоят на одной линии у всех карточек ряда, какой бы шаблон им ни достался. */ /* Отступ живёт в padding, а не в margin: `margin-top:auto` съедает свою величину до нуля, и у самой высокой карточки ряда — той, где свободного места нет, — ряд прилипал бы к тексту вплотную. */ .k .body > .krow{align-self:stretch;margin-top:auto;padding-top:3px} /* ── БЛОКИ ВИДОВ ── */ /* Спарклайн собирается общей функцией и приходит с классом mx-spark; в макете он назывался spark. Ловим оба имени, чтобы не размножать отрисовку ради одного слова. */ .k .spark, .k .mx-spark{display:block;width:100%;height:24px;margin:3px 0 1px; overflow:visible;color:var(--good)} /* Подорожало — тот же график, другой цвет. Одинаковый зелёный на росте и падении сказал бы, что это одно и то же событие. */ .k .up .spark, .k .up .mx-spark{color:var(--warn)} .k .up + .blab b{color:var(--warn)} .k .bar{height:4px;border-radius:2px;background:var(--bg);overflow:hidden; margin-top:5px;border:1px solid var(--line2)} .k .bar i{display:block;height:100%;border-radius:2px;background:var(--good)} .k .bar i.warn{background:var(--warn)} /* Подпись под полосой или графиком: число СРАЗУ за словом, а не у правого края. «дешевле, чем ——————— 82%» заставляет глаз прыгать через всю карточку и соединять две части одной фразы. */ .k .blab{font-size:10.5px;color:var(--dim);margin-top:4px; display:flex;justify-content:flex-start;align-items:baseline;gap:5px; font-variant-numeric:tabular-nums} .k .blab b{color:var(--txt);font-weight:600} /* Единственное исключение — подписи краёв шкалы оценок: «1 ★» слева и «5 ★» справа это и есть две границы, они обязаны стоять по краям. */ .k .five + .blab{justify-content:space-between} /* Пять столбиков вместо одной цифры: 4.7 из ровных пятёрок и 4.7 из смеси двоек с пятёрками — разные товары, а число одно. */ .k .five{display:flex;gap:3px;align-items:flex-end;height:18px;margin-top:4px} .k .five u{flex:1;background:var(--line);border-radius:1.5px; text-decoration:none;min-height:2px} .k .five u.hi{background:var(--warn)} .k .big{display:flex;align-items:baseline;gap:6px;margin-top:1px} .k .big em{font:700 20px/1 var(--ui);font-style:normal;letter-spacing:-.025em} .k .big em.ice{color:var(--acc-fg)} .k .big em.gold{color:var(--warn)} .k .big em.good{color:var(--good)} .k .big em.hot{color:var(--sale)} /* ── ПОМЕТКА О ПОКАЗАТЕЛЬНЫХ ДАННЫХ ── Прибита над лентой и не уезжает: события сменяют друг друга, раскрытие обязано стоять. Пока оно крутилось в кольце вместе с событиями, видно его было меньше половины времени. */ .mx-disclose{display:inline-flex;align-items:center;gap:5px;height:17px; margin-bottom:4px;padding:0 8px 0 6px;border-radius:999px; font:600 9.5px var(--ui);color:#ffd79a;white-space:nowrap; background:linear-gradient(135deg,rgba(48,36,14,.94),rgba(22,16,8,.88)); border:1px solid rgba(255,181,71,.5)} .mx-disclose i{font-style:normal;color:#ffb547;font-size:9px} .mx-disclose b{font-weight:700;color:#fff} /* Пометка занимает строку — окно ленты на неё и укорачиваем, чтобы квадрат не зарос лентой снизу доверху. */ .mx-live.is-demo .mx-feed{height:44px} @media (max-width:560px){ .k .mx-live.is-demo .mx-feed{height:22px} } .k .big span{font-size:11px;color:var(--dim)} /* Честное предупреждение. Мы его показываем, а не прячем. */ .k .caveat{font-size:11px;color:var(--warn);display:flex;gap:5px; align-items:flex-start;line-height:1.4;margin-top:2px} .k .caveat.cool{color:var(--acc-fg)} .k .caveat i{font-style:normal;flex:none} /* Характеристики: значение сразу за названием, обе колонки от левого края. Прижатое вправо значение отрывалось от своего названия. */ .k .specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px; font-size:11px;margin:3px 0 0} .k .specs dt{color:var(--dim)} .k .specs dd{margin:0;color:var(--txt);font-weight:600;text-align:left; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Цветовые темы квадрата. Цвет берётся от категории, а не от порядка в выдаче: товар обязан быть одного цвета в любом поиске. */ .t-blue{--tone:#8ab4ff;--tone2:#5b8fe0} .t-green{--tone:#7fd7a8;--tone2:#46a172} .t-amber{--tone:#ffc978;--tone2:#e09a34} .t-violet{--tone:#c2a6e6;--tone2:#8f6fc0} .t-rose{--tone:#ffa3a3;--tone2:#e06b6b} .t-ice{--tone:#9fe0f0;--tone2:#4ba8c4} /* Лента событий живёт в квадрате: три строки, снизу самое свежее. */ .k .mx-live{left:9px;right:9px;bottom:9px} .k .mx-feed{height:66px} .cards.sz-l .k .mx-feed{height:88px} @media (max-width:560px){ .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .k .price em{font-size:21px} .k .body{padding:5px 10px 6px} /* На узкой карточке — две строки: фразы те же, механика та же, но лента во всю высоту квадрата закрыла бы сам товар. */ .k .mx-feed{height:44px} .mx-reel span{font-size:9.5px;height:17px;padding:0 7px 0 2px} .mx-reel i{width:13px;height:13px;font-size:7.5px} } /* ══ КОМПАКТНАЯ КАРТОЧКА И РАСКРЫТИЕ ══ Карточка выросла до десяти строк: бренд, оценка, название в две строки, метки, блок метрик, характеристики, цена, цена за единицу, срок, кнопка. В ряду это стена текста высотой в пол-экрана — сравнить две карточки глазом нельзя, приходится скроллить. В покое карточка отвечает на четыре вопроса: сколько стоит, кому верить, что это, когда приедет. Остальное приезжает при наведении ПОВЕРХ соседей, не сдвигая ряд: раскрытие внутри потока раздвигало бы сетку и заставляло страницу прыгать под курсором. */ .card.tight{overflow:visible;position:relative} .card.tight .ph{border-radius:13px 13px 0 0;overflow:hidden} .card.tight .in{padding:8px 10px 10px;gap:3px} /* Цена первой и самой крупной: в ряду глаз ищет её. */ .card.tight .price{margin:0;order:0} .card.tight .price b{font-size:19px;letter-spacing:-.02em} .card.tight .proof{font-size:11px;color:var(--dim);display:flex; align-items:center;gap:6px;min-height:15px} .card.tight .proof b{color:var(--txt);font-weight:600} .card.tight .proof .st{color:var(--warn);font-weight:600} .card.tight .proof s{width:1px;height:9px;background:var(--line); display:inline-block;text-decoration:none} .card.tight .proof .none{color:var(--warn)} /* Название — служебная подпись в ОДНУ строку. Высота фиксирована, иначе карточки в ряду стоят на разной высоте и ряд «пляшет». */ .card.tight .ttl{font-size:12.5px;line-height:1.35;font-weight:500; color:var(--sub);-webkit-line-clamp:1;min-height:17px;margin:0} .card.tight:hover .ttl{color:var(--txt)} .card.tight .when{font-size:11.5px;font-weight:600;color:var(--txt); display:flex;align-items:center;gap:5px;min-height:16px} .card.tight .when i{font-style:normal;color:var(--good);font-weight:500} .card.tight .when.soon{color:var(--acc-fg)} /* Раскрытие. Лежит вне потока, поэтому ряд не сдвигается. */ .card-more{position:absolute;top:100%;left:-1px;right:-1px;z-index:1; display:flex;flex-direction:column;gap:6px;padding:10px 10px 11px; background:var(--raise);border:1px solid var(--line-hi);border-top:0; border-radius:0 0 13px 13px;box-shadow:0 18px 36px var(--shadow); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .14s, transform .14s, visibility .14s} .card.tight:hover{z-index:30} .card.tight:hover .card-more, .card.tight:focus-within .card-more{opacity:1;visibility:visible; transform:none} .card.tight:hover{border-bottom-left-radius:0;border-bottom-right-radius:0} .more-brand{font-size:11px;color:var(--dim);letter-spacing:.02em} .card-more .buy{margin-top:2px} .card-more .badges{margin:0} .card-more .tags{max-height:none} /* ── БЕЗ КУРСОРА НАВЕДЕНИЯ НЕ БЫВАЕТ ── На телефоне и планшете раскрытие недостижимо, а кнопка покупки живёт именно в нём. Поэтому там оно просто часть карточки: место есть, ряд всё равно в один-два столбца. */ @media (hover:none){ .card-more{position:static;opacity:1;visibility:visible;transform:none; box-shadow:none;border:0;border-top:1px solid var(--line2); border-radius:0;padding:8px 10px 10px} .card.tight:hover{border-bottom-left-radius:14px; border-bottom-right-radius:14px} } /* ══ МЕТРИКИ ГЛАЗАМИ ══ Тридцать строк «название — число» читаются только подряд и только по одной. Картинка отвечает на вопрос за полсекунды, строка — за десять. */ .wm-tiles{display:grid;gap:8px;margin:0 0 12px; grid-template-columns:repeat(auto-fit,minmax(96px,1fr))} .wm-tile{background:var(--bg);border:1px solid var(--line2);border-radius:10px; padding:9px 10px;display:flex;flex-direction:column;gap:1px} .wm-tile b{font-size:19px;font-weight:700;letter-spacing:-.022em;line-height:1.1; font-variant-numeric:tabular-nums;color:var(--txt)} .wm-tile span{font-size:11px;color:var(--sub)} .wm-tile i{font-style:normal;font-size:10px;color:var(--dim)} .wm-tile.good b{color:var(--good)} .wm-tile.gold b{color:var(--warn)} .wm-tile.ice b{color:var(--acc-fg)} /* Шкала: полоса — весь разброс категории, точка — наш товар. Оба края подписаны: шкала без единиц ничего не измеряет. */ .wm-gauge{margin:2px 0 0} .wm-track{position:relative;height:6px;border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb,var(--good) 45%,transparent), color-mix(in srgb,var(--warn) 45%,transparent))} .wm-track i{position:absolute;top:50%;width:13px;height:13px; margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--txt); border:3px solid var(--raise);box-shadow:0 1px 4px var(--shadow)} .wm-ends{display:flex;justify-content:space-between;gap:8px;margin-top:7px; font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums} .wm-ends span:nth-child(2){color:var(--txt);font-weight:600} /* График цены. Пунктир — текущий уровень: по нему сразу видно, выше или ниже сегодняшняя цена всего остального ряда. */ .wm-chart{color:var(--good)} .tone-warn .wm-chart{color:var(--warn)} .wm-chart svg{display:block;width:100%;height:52px;overflow:visible} .wm-cends{display:flex;justify-content:space-between;gap:8px;margin-top:6px; font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums} .wm-cends b{color:var(--txt);font-weight:700} .wm-days{font-size:10px;color:var(--dim);margin-top:3px} /* Пять столбиков по звёздам. */ .wm-stars{display:flex;flex-direction:column;gap:4px} .wm-srow{display:grid;grid-template-columns:30px minmax(0,1fr) 36px;gap:9px; align-items:center;font-size:11px;color:var(--dim); font-variant-numeric:tabular-nums} .wm-srow i{display:block;height:7px;border-radius:4px;background:var(--bg); border:1px solid var(--line2);overflow:hidden} .wm-srow u{display:block;height:100%;background:var(--warn); text-decoration:none} .wm-srow span:last-child{text-align:right} /* Неделя к неделе: рост виден разницей высот, а не знаком перед числом. */ .wm-weeks{display:flex;align-items:flex-end;gap:14px;height:74px;padding:0 4px} .wm-col{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:flex-end;height:100%;gap:4px} .wm-col i{width:100%;max-width:56px;border-radius:5px 5px 0 0; background:color-mix(in srgb,var(--acc) 34%,transparent); border:1px solid color-mix(in srgb,var(--acc) 46%,transparent); border-bottom:0} .wm-col:last-child i{background:color-mix(in srgb,var(--acc) 62%,transparent)} .wm-col b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} .wm-col span{font-size:10px;color:var(--dim)} .wm-note{margin:8px 0 0;font-size:11.5px;color:var(--dim);line-height:1.45} .wm-note b{color:var(--txt);font-weight:600} /* ── РИСУНКИ ПАНЕЛИ ── Подписи и полосы — обычная разметка с фиксированным шрифтом: колонка панели в попапе ~500px, на странице ~650px, на телефоне ~370px, и текст обязан быть одного размера во всех трёх. SVG только у фигур фиксированного размера (дуга, кольцо) — они не растягиваются. */ /* Дуги-датчики: ряд, на телефоне переносится по два. */ .wm-arcs{display:flex;justify-content:space-between;gap:6px 4px;flex-wrap:wrap} .wm-arc{flex:1 1 78px;max-width:130px;min-width:78px;display:flex;flex-direction:column; align-items:center;text-align:center;position:relative} /* Датчик ужимается до 78px на телефоне, чтобы четыре встали в ряд. Число живёт внутри SVG и ужимается вместе с дугой — это единственный текст панели, которому это позволено: он часть фигуры. */ .wm-arc svg{display:block;width:100%;max-width:96px;height:auto;aspect-ratio:96/56;overflow:visible} .wm-arc svg text{font-family:var(--ui);font-variant-numeric:tabular-nums} .wm-arc span{font-size:11px;color:var(--sub);margin-top:4px;line-height:1.3} .wm-arc i{font-style:normal;font-size:10.5px;color:var(--dim);line-height:1.3} /* Линейка цены: полоса, засечка медианы, точка товара с ценой сверху. */ .wm-ruler{padding-top:22px} .wm-rtrack{position:relative;height:2px;border-radius:1px;background:var(--line);margin:0 8px} .wm-rtrack .med{position:absolute;top:-11px;width:1.5px;height:24px;background:var(--dim); transform:translateX(-50%)} .wm-rtrack b{position:absolute;top:50%;width:14px;height:14px;border-radius:50%; background:var(--acc);border:2.5px solid var(--sunk);transform:translate(-50%,-50%); box-sizing:border-box} .wm-rtrack b u{position:absolute;bottom:14px;left:50%;transform:translateX(-50%); text-decoration:none;font-size:12.5px;font-weight:700;color:var(--txt);white-space:nowrap; font-variant-numeric:tabular-nums} /* У краёв шкалы подпись прижимается к точке изнутри, а не вылезает наружу. */ .wm-rtrack b u.r{left:auto;right:-2px;transform:none} .wm-rtrack b u.l{left:-2px;transform:none} .wm-rends{position:relative;display:flex;justify-content:space-between;margin-top:8px; font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;padding:0 8px} .wm-rends .m{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} /* Полосы от одного основания: воронка и неделя к неделе. */ .wm-funnel{display:flex;flex-direction:column;gap:8px} .wm-frow{display:grid;grid-template-columns:118px minmax(0,1fr) auto 50px;gap:9px; align-items:center;font-size:12px} .wm-frow > span{color:var(--sub);text-align:right;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .wm-frow i{display:block;height:20px;border-radius:5px;background:var(--line2);overflow:hidden} .wm-frow u{display:block;height:100%;border-radius:5px;background:var(--acc);text-decoration:none} .wm-frow u.dim{opacity:.45} .wm-frow b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;min-width:22px} .wm-frow em{font-style:normal;font-size:11px;color:var(--dim);text-align:right; font-variant-numeric:tabular-nums} .wm-week{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center} .wm-week .wm-frow{grid-template-columns:82px minmax(0,1fr) auto} .wm-week .wm-frow i{height:16px;border-radius:4px} .wm-trend{text-align:right} .wm-trend b{display:block;font-size:20px;font-weight:700;line-height:1.1;letter-spacing:-.01em} .wm-trend.up b{color:var(--good)} .wm-trend.down b{color:var(--bad)} .wm-trend span{font-size:11px;color:var(--dim)} /* Кольцо «сейчас»: число внутри, легенда настоящих/показательных справа. */ .wm-now{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center} .wm-ring{position:relative;width:58px;height:58px;flex:none} .wm-ring svg{display:block;width:58px;height:58px;overflow:visible} .wm-ring > b{position:absolute;inset:0;display:grid;place-items:center;font-size:16px; font-weight:700;color:var(--txt);line-height:1} .wm-txt > b{display:block;font-size:20px;line-height:1.1;letter-spacing:-.01em} .wm-txt > span{font-size:12px;color:var(--sub)} .wm-lg{display:flex;gap:12px;margin-top:5px;font-size:11.5px;color:var(--dim);flex-wrap:wrap} .wm-lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px; vertical-align:middle} .wm-lg i.a{background:var(--acc)} .wm-lg i.b{background:var(--line)} /* Пульс — только трансформом и прозрачностью, разметку не трогает. */ .wm-pulse{opacity:0} @media (prefers-reduced-motion:no-preference){ .wm-pulse{animation:wmpulse 2.4s ease-in-out infinite;transform-origin:center; transform-box:fill-box} @keyframes wmpulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:0;transform:scale(1.6)}} } .mpanel-h{display:flex;flex-direction:column;gap:2px;margin-bottom:12px} .mpanel-h h4{margin:0} /* Пометка о показательных данных. Стоит наверху и цветом отличается от всего остального: её нельзя пролистать, приняв за подпись к графику. */ .mpanel-demo{margin:0 0 12px;padding:7px 10px;border-radius:8px; font-size:11.5px;line-height:1.45;color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); display:flex;gap:7px;align-items:flex-start} .mpanel-demo i{font-style:normal;flex:none} .mx-reel span.demo{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent)} /* ══ СЧЁТЧИК ЗНАКОВ В ПОЛЕ ПОИСКА ══ */ .qcount{position:absolute;right:86px;bottom:14px;font-size:10.5px; color:var(--dim);font-variant-numeric:tabular-nums;pointer-events:none; background:var(--sunk);padding:1px 6px;border-radius:5px} .qcount.full{color:var(--warn)} #q.fading::placeholder{opacity:0;transition:opacity .24s} #q::placeholder{transition:opacity .24s} @media (max-width:560px){.qcount{right:78px;bottom:12px}} .offers{display:grid;gap:8px;margin:10px 0 4px} .offer{display:block;padding:11px 13px;border:1px solid var(--line); border-radius:12px;background:var(--card,var(--bg));text-decoration:none; color:inherit;transition:border-color .12s} .offer:hover{border-color:var(--acc)} .offer-lead{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--acc);margin-bottom:3px} .offer b{display:block;font-size:14px;line-height:1.35} .offer-sum{display:block;margin-top:4px;color:var(--sub);font-size:12.5px; line-height:1.45} @media(min-width:760px){.offers{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}} .sample-flag{position:absolute;left:8px;top:8px;z-index:3;padding:4px 7px;border-radius:999px;background:#202938;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;box-shadow:0 2px 8px #0004} .sample-price{margin-top:-2px;color:var(--muted);font-size:11px;line-height:1.25} .sample-notice{display:flex;gap:4px;flex-direction:column;margin:10px 0 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--line) 72%,#e5a82e);border-radius:12px;background:color-mix(in srgb,var(--panel) 88%,#e5a82e);color:var(--text)} .sample-notice b{font-size:13px}.sample-notice span{color:var(--muted);font-size:12px;line-height:1.4} .buy.disabled{opacity:.55;cursor:not-allowed;pointer-events:none;filter:saturate(.3)} /* home-explore: текст и ссылки на главной (патч индексации 04.10.2026) */ .home-explore{max-width:760px;margin:34px auto 0;text-align:left;font-size:14.5px;line-height:1.55} .home-explore h2{font-size:15px;margin:22px 0 8px;color:var(--txt)} .home-explore p{color:var(--sub);margin:0 0 8px} .home-explore ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .home-cats{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} .home-cats li,.home-reviews li{border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:var(--raise)} .home-cats span{color:var(--sub);font-size:13px} .home-explore a{color:var(--txt);text-decoration:none;font-weight:600} .home-explore a:hover{text-decoration:underline} .home-reviews p{font-size:13px;margin:4px 0 0} .home-more{margin-top:14px!important;font-size:13.5px} .home-more a{font-weight:500;color:var(--sub)} .discover-nav .nav-label{color:var(--sub);font-weight:600;margin-left:6px} @media (max-width:640px){.home-explore{margin-top:24px;font-size:14px}}