/* ═══════════════════════════════════════════════════════════════════════
ТОКЕНЫ — дословно светлая тема матрицы (tovarnaya-matrica/src/lib/theme.jsx, LIGHT).
Не заменять «похожими» значениями витрины: владелец просил точь-в-точь.
═══════════════════════════════════════════════════════════════════════ */
:root{
--bgCard:#FFFFFF; --bgSolid:#FFFFFF; --bgHover:#F3F4F6; --bgInput:#FFFFFF;
--border:#E4E1DC; --text:#1A2231; --textMuted:#5B6472; --textDim:#8A93A3;
--accent:#DB5524; --accentSolid:#F2641E; --accentDim:#FFEDE2;
--accentGlow:rgba(242,100,30,0.13);
--green:#15803D; --greenDim:#DCFCE7; --red:#DC2626;
--r1:6px; --r2:10px; --r3:14px; --rPill:999px;
/* ШРИФТ: одна гарнитура Inter + системный стек; моноширинного нет — цифры табличные
(font-variant-numeric). Кегли только целые: 10 подпись · 11 мета · 12 вторичный ·
13 тело · 14 акцент · 15 лид · 17 h4 · 20 h3 · 25 h2 · 32 h1 · 40 герой. Georgia — ТОЛЬКО статья. */
--e1:0 1px 3px rgba(26,34,49,0.07), 0 1px 2px rgba(26,34,49,0.04);
--e2:0 6px 18px -6px rgba(26,34,49,0.16), 0 2px 6px rgba(26,34,49,0.05);
/* Земля страницы — тёплый серый; карточки и поле поиска белые и потому всплывают
над ней. Снимки вендоров сняты на белом, поэтому плитка под фото тоже белая:
иначе вокруг товара торчит его собственная белая заплатка. Ступенек по цвету нет —
шапка, полоса поиска, лента и подвал своего фона не рисуют. */
--page:#F6F5F2; --cardBorder:#EAE6E0;
/* газетная гарнитура — ТОЛЬКО внутри статьи, как в матрице */
--serif:Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
/* display в классе перебивает атрибут hidden — без этой строки скрытые блоки
(.more, .res-h) остаются на экране. */
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--page);color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
font-size:14px;-webkit-font-smoothing:antialiased}
button{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
.n{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* ═══ ЕДИНАЯ СТРОКА (вариант H) — пилюли, поле, действия ВНУТРИ правого торца
поля, снаружи только призыв. Отдельной шапки нет: логотип-знак живёт в поле.
Дословные размеры полосы — матрица, item.jsx:328-340 + pricecenter.jsx:1600. ═══ */
/* Строка идёт почти во всю ширину экрана (до 1600). Так поле поиска стоит ровно
на оси страницы И остаётся широким: при узкой строке центровка съедала у него
270 px, потому что слева логотип с двумя фильтрами, а справа одна кнопка.
Карусель ниже тоже во всю ширину — широкая строка с ней согласуется. */
.bar{max-width:1600px;margin:0 auto;padding:16px 24px 18px;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Ширины боковых групп уравнивает balanceBar() по факту замера: слева две пилюли,
справа одна кнопка, и без выравнивания поле уезжало вправо на 58 px — мимо оси
карусели и ряда брендов. Числом задать нельзя: пилюля меняет ширину вместе
с именем выбранной категории. */
.bar-l,.bar-r{display:flex;align-items:center;gap:8px}
.bar-r{justify-content:flex-end}
/* пилюли скоупа — hdrBtn(active), pricecenter.jsx:1584.
БЕЗ ховер-подложки: активность передаётся цветом и весом, не фоном. */
.pill{height:34px;padding:0 11px;border-radius:var(--r2);font-size:13px;cursor:pointer;
display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:500;
transition:all .15s;background:transparent;border:1px solid transparent;color:var(--textMuted)}
.pill[aria-expanded=true],.pill.on{color:var(--accent);font-weight:600}
.pill em{font-style:normal;font-size:10px;opacity:.7}
.sep{width:1px;height:22px;background:var(--border);margin:0 4px 0 6px;flex-shrink:0}
.sbox{position:relative;flex:1 1 auto;min-width:220px;display:flex;align-items:center}
/* Логотип — точка возврата на главную. В поле поиска его держать бессмысленно:
туда ради возврата никто не тыкает. Подпись «оборудование безопасности» снята
ради ширины поля — она осталась в подвале и в заголовке страницы. */
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;padding-right:2px}
.logo img{height:30px;width:auto;display:block;transition:transform .15s}
.logo:hover img{transform:scale(1.05)}
.logo b{font-size:16px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.lupa{position:absolute;left:16px;color:var(--textMuted);pointer-events:none;display:flex;
transition:color .15s;z-index:2}
.sbox:focus-within .lupa{color:var(--accent)}
#q{width:100%;height:48px;background:var(--bgInput);border:1px solid var(--border);
border-radius:var(--r3);padding:0 178px 0 48px;color:var(--text);font-size:15px;font-weight:500;
outline:none;font-family:inherit;
transition:border-color .15s, box-shadow .18s, background .15s;
/* ПОКОЙ: мандариновое гало матрицы дословно — узкое 12px и широкое 24px, оба .13.
ФОКУС: гало снимается, встаёт кольцо 3px accentGlow (item.jsx:333). */
box-shadow:0 2px 10px rgba(15,23,42,.05),
0 0 12px 1px rgba(242,100,30,.13),
0 0 24px 6px rgba(242,100,30,.13)}
#q:focus{border-color:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}
#q::placeholder{color:var(--textDim)}
/* Гроздь действий в торце поля. Полоса перехватывает клики сама, иначе промах
между иконками проваливался бы в поле и ставил курсор вместо открытия корзины —
это единственный настоящий минус варианта H. */
.inact{position:absolute;right:6px;display:flex;align-items:center;gap:1px;z-index:2}
.inact s{width:1px;height:22px;background:var(--border);display:block;margin:0 5px}
.ico{width:36px;height:36px;border-radius:var(--r2);display:flex;align-items:center;
justify-content:center;color:var(--textMuted);flex-shrink:0;position:relative;
transition:color .15s,background .15s}
.ico:hover{background:var(--accentDim);color:var(--accent)}
.ico-cam{color:var(--accent)}
.ico i{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;
border-radius:999px;background:var(--accentSolid);color:#fff;font-size:11px;font-weight:700;
font-style:normal;display:flex;align-items:center;justify-content:center;line-height:1}
/* Разделы шапки — текстом. Вторая обводка рядом с призывом спорила бы с ним
за внимание: у призыва в строке должна быть ровно одна рамка. */
.hlink{height:40px;padding:0 12px;display:flex;align-items:center;border-radius:var(--r2);
font-size:13px;font-weight:600;color:var(--textMuted);white-space:nowrap;flex-shrink:0;
transition:color .15s,background .15s}
.hlink:hover{color:var(--accent);background:var(--accentDim)}
.hlink.on{color:var(--accent)}
/* «Информация» — выпадашка в стиле пилюль шапки (владелец 21.08 23:2x: «блок Информация: О компании · Реквизиты · Контакты») */
.info{position:relative;flex-shrink:0}
.hlink em{font-style:normal;font-size:10px;opacity:.7;margin-left:5px}
.hlink[aria-expanded=true]{color:var(--accent)}
body.about-open #a-info,body.contacts-open #a-info{color:var(--accent)}
.pop-info{left:auto;right:0;width:260px;padding:6px}
.pop-info a{display:block;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text);transition:background .12s,color .12s}
.pop-info a span{display:block;font-size:11px;color:var(--textDim);font-weight:500;margin-top:2px}
.pop-info a:hover,.pop-info a.on{background:var(--accentDim);color:var(--accent)}
/* Призыв — контурный. Сплошной оранжевой заливки у нас нет. */
.cta{height:40px;padding:0 16px;border-radius:var(--r2);border:1px solid var(--accentSolid);
color:var(--accent);font-size:13px;font-weight:600;display:flex;align-items:center;
white-space:nowrap;flex-shrink:0;transition:background .15s}
.cta:hover{background:var(--accentDim)}
/* ── ВХОД КОМПАНИИ. Не выездная штора, как корзина: вход — короткий разговор на одно поле,
боковая панель под него слишком просторна. Окно по центру, одно поле, одна кнопка.
Кнопка в языке страницы — обводка и акцент текстом, а не сплошная заливка. ── */
.lkdim{position:fixed;inset:0;background:rgba(26,34,49,.34);z-index:320;opacity:0;transition:opacity .2s}
.lkdim.on{opacity:1}
.lkw{position:fixed;z-index:321;left:50%;top:50%;transform:translate(-50%,-46%);width:min(420px,calc(100% - 28px));
background:var(--page);border-radius:var(--r3);box-shadow:var(--e2);padding:22px 22px 20px;opacity:0;
transition:opacity .2s,transform .22s cubic-bezier(.32,.72,0,1)}
.lkw.on{opacity:1;transform:translate(-50%,-50%)}
@media (prefers-reduced-motion:reduce){.lkw,.lkdim{transition:none}}
.lkw h3{margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.3px}
.lkw p{margin:0 0 15px;font-size:13px;line-height:1.65;color:var(--textMuted)}
.lkw input{width:100%;height:44px;border:1px solid var(--border);border-radius:var(--r2);background:var(--bgInput);
padding:0 13px;font:inherit;font-size:15px;color:var(--text)}
.lkw input:focus{outline:none;border-color:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}
.lkw .lk-row{display:flex;gap:9px;margin-top:12px}
.lkw .lk-go{flex:1;height:44px;border-radius:var(--r2);border:1px solid var(--accentSolid);color:var(--accent);
font-weight:600;font-size:14px;transition:background .15s}
.lkw .lk-go:hover{background:var(--accentDim)}
.lkw .lk-go:disabled{opacity:.5}
.lkw .lk-sec{height:44px;padding:0 14px;border-radius:var(--r2);border:1px solid var(--border);color:var(--textMuted);font-size:13.5px}
.lkw .lk-sec:hover{background:var(--bgHover)}
.lkw .lk-err{color:var(--accent);font-size:13px;margin-top:10px}
.lkw .lk-who{font-size:16px;font-weight:600;letter-spacing:-.2px;margin-bottom:2px}
.lkw .lk-agr{font-size:12px;color:var(--textDim);line-height:1.5;margin-bottom:6px}
.lkw .lk-agr b{font-weight:500;color:var(--accent)} /* акцент только на имени соглашения — рядом уже акцентная кнопка «Продолжить» */
.lkw .lk-fine{font-size:12px;color:var(--textDim);margin-top:14px;line-height:1.6}
/* ── КОРЗИНА В ШАПКЕ. Партнёр должен видеть набранный бюджет, не открывая
заявку: у поставщиков (ТИНКО и др.) это норма отрасли. Ярлык мелкий
приглушённый, значение крупное — ярлык не спорит со значением. Иконка
ушла из торца поля: две корзины в одной строке читались бы как разные. ── */
.cartw{height:40px;padding:0 10px;border-radius:var(--r2);display:flex;align-items:center;gap:0;
border:1px solid transparent;flex-shrink:0;transition:background .15s}
.cartw:hover{background:var(--accentDim)}
/* Пустая корзина — просто иконка: подпись «пусто» занимала бы место и сообщала
ровно ничего. Как только что-то положили — сумма ВЫЕЗЖАЕТ, а не появляется
рывком: движение само по себе говорит «принято».
⚠️ Рамки у наполненного виджета НЕТ: счётчик сидит на углу иконки и любая
рамка его перерезала бы. Границу держит белая обводка самого счётчика. */
.cartw.has{gap:10px;padding:0 12px 0 10px}
.cartw-ic{position:relative;display:flex;color:var(--textMuted);transition:color .15s}
.cartw.has .cartw-ic,.cartw:hover .cartw-ic{color:var(--accent)}
.cartw-n{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
background:var(--accentSolid);color:#fff;font-size:10px;font-weight:700;font-style:normal;
display:flex;align-items:center;justify-content:center;line-height:1;
box-shadow:0 0 0 2px var(--page)}
.cartw-t{display:none;flex-direction:column;line-height:1.12;gap:3px;align-items:flex-start;
white-space:nowrap;overflow:hidden}
.cartw.has .cartw-t{display:flex}
.cartw-t.in{animation:cartslide .3s cubic-bezier(.32,.72,0,1)}
@keyframes cartslide{from{max-width:0;opacity:0;transform:translateX(-8px)}
to{max-width:180px;opacity:1;transform:none}}
.cartw-t em{font-style:normal;font-size:11px;font-weight:500;color:var(--textDim);letter-spacing:.02em}
.cartw-t b{font-size:15px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Толчок счётчика и подъём цифры — единственная реакция на «положил»:
всплывашек и тостов не держим, движение само сообщает, что заявка выросла. */
@keyframes cartpop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
.cartw-n.bump,.cartw-ic.bump{animation:cartpop .34s cubic-bezier(.32,.72,0,1)}
@keyframes cartsum{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.cartw-t b.upd{animation:cartsum .26s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){
.cartw{transition:none}
.cartw-n.bump,.cartw-t b.upd,.cartw-t.in{animation:none}
}
/* ── ВЫЕЗДНАЯ КОРЗИНА. Отдельной страницей не делаем: набор идёт из выдачи,
и уводить с неё ради проверки списка — терять место в поиске. ── */
.cdim{position:fixed;inset:0;background:rgba(26,34,49,.34);z-index:300;opacity:0}
.cdim.anim{transition:opacity .2s}
.cdim.on{opacity:1}
.cartp{position:fixed;top:0;right:0;bottom:0;width:min(470px,100%);z-index:301;background:var(--page);
display:flex;flex-direction:column;box-shadow:var(--e2);transform:translateX(100%)}
.cartp.anim{transition:transform .24s cubic-bezier(.32,.72,0,1)}
.cartp.on{transform:none}
@media (prefers-reduced-motion:reduce){.cartp.anim,.cdim.anim{transition:none}}
.cartp-h{display:flex;align-items:center;gap:10px;padding:16px 18px 13px;border-bottom:1px solid var(--border);
background:var(--bgSolid)}
.cartp-h h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px}
.cartp-h span{font-size:13px;color:var(--textDim);margin-right:auto}
.cartp-x{width:34px;height:34px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;
color:var(--textMuted);transition:background .15s,color .15s}
.cartp-x:hover{background:var(--bgHover);color:var(--text)}
.cartp-b{flex:1;overflow-y:auto;padding:10px 14px 14px}
.c-row{display:flex;gap:12px;padding:12px;background:var(--bgCard);border:1px solid var(--cardBorder);
border-radius:var(--r3);margin-bottom:8px}
.crow-ph{width:58px;height:58px;flex-shrink:0;border-radius:9px;background:#fff;border:1px solid var(--cardBorder);
display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.crow-ph img{max-width:86%;max-height:86%;object-fit:contain;display:block}
.crow-ph span{font-size:10px;color:var(--textDim);text-align:center}
.crow-m{flex:1;min-width:0}
.crow-br{font-size:11px;font-weight:600;color:var(--textDim);text-transform:uppercase;letter-spacing:.04em}
.crow-nm{font-size:13px;font-weight:600;line-height:1.3;cursor:pointer;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crow-nm:hover{color:var(--accent)}
.crow-sku{font-size:12px;color:var(--textDim);margin-top:2px}
.crow-bt{display:flex;align-items:center;gap:10px;margin-top:9px}
.cq{display:flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:var(--r2);
background:var(--bgSolid);height:30px}
.cq button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--textMuted);
font-size:15px;border-radius:8px;transition:background .15s,color .15s}
.cq button:hover{background:var(--accentDim);color:var(--accent)}
.cq button svg{width:12px;height:12px;display:block}
.cq input{width:52px;height:28px;border:0;background:transparent;text-align:center;font:inherit;font-size:13px;
font-weight:700;color:var(--text);outline:none;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cq input::-webkit-outer-spin-button,.cq input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.crow-u{font-size:12px;color:var(--textDim)}
.crow-s{margin-left:auto;text-align:right}
.crow-s b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.crow-s em{font-style:normal;font-size:11px;color:var(--textDim)}
.crow-s .ask{font-size:12px;font-weight:600;color:var(--textMuted)}
.crow-del{width:26px;height:26px;flex-shrink:0;align-self:flex-start;border-radius:7px;display:flex;
align-items:center;justify-content:center;color:var(--textDim);transition:background .15s,color .15s}
.crow-del:hover{background:#FEE2E2;color:var(--red)}
.cempty{text-align:center;padding:56px 20px;color:var(--textDim)}
.cempty b{display:block;font-size:15px;color:var(--text);margin-bottom:6px}
.cartp-f{border-top:1px solid var(--border);background:var(--bgSolid);padding:14px 18px 16px}
.csum-line{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--textMuted);
margin-bottom:6px}
.csum-tot{display:flex;align-items:baseline;justify-content:space-between;margin:2px 0 12px}
.csum-tot span{font-size:13px;color:var(--textMuted)}
.csum-tot b{font-size:21px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.csum-btns{display:flex;gap:9px}
.csum-go{flex:1;height:44px;border-radius:var(--r2);border:1px solid var(--accentSolid);color:var(--accent);
font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;
transition:background .15s}
.csum-go:hover{background:var(--accentDim)}
.csum-clr{height:44px;padding:0 14px;border-radius:var(--r2);border:1px solid var(--border);color:var(--textMuted);
font-size:13px;font-weight:600;display:flex;align-items:center;transition:color .15s,border-color .15s}
.csum-clr:hover{color:var(--red);border-color:var(--red)}
.csum-clr.armed{color:var(--red);border-color:var(--red);background:#FEE2E2}
/* ── ОФОРМЛЕНИЕ. Форма живёт в той же панели: уводить со страницы ради пяти
полей незачем, а список рядом остаётся видимым в шапке панели. ── */
.cback{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 6px;margin-bottom:10px;
border-radius:var(--r2);color:var(--textMuted);font-size:13px;font-weight:600;transition:color .15s,background .15s}
.cback:hover{color:var(--accent);background:var(--accentDim)}
.frow{margin-bottom:12px}
.frow label{display:block;font-size:12px;font-weight:600;color:var(--textDim);margin-bottom:5px;letter-spacing:.02em}
.frow label i{font-style:normal;color:var(--accent)}
.frow input,.frow textarea{width:100%;height:42px;border:1px solid var(--border);border-radius:var(--r2);
background:var(--bgSolid);padding:0 12px;font:inherit;font-size:14px;color:var(--text);outline:none;
transition:border-color .15s,box-shadow .15s}
.frow textarea{height:84px;padding:10px 12px;resize:vertical;line-height:1.5}
.frow input:focus,.frow textarea:focus{border-color:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}
.frow.bad input,.frow.bad textarea{border-color:var(--red)}
.ftwo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ferr{margin-top:10px;font-size:13px;line-height:1.5;color:var(--red);background:#FEE2E2;
border-radius:var(--r2);padding:9px 11px}
.fhint{font-size:12px;line-height:1.5;color:var(--textDim);margin:-2px 0 14px}
/* Согласие на обработку данных — обязательная галочка перед отправкой (152-ФЗ: согласие
даётся действием, поэтому поле НЕ отмечено заранее). */
.fagree{display:flex;gap:9px;align-items:flex-start;margin:2px 0 4px;font-size:12px;line-height:1.45;color:var(--textMuted)}
.fagree input{margin:2px 0 0;width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.fagree a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(219,85,36,.35)}
.fagree.bad{color:var(--red)}
/* 🪤 Ловушка для роботов: человек этого поля не видит и не встретит табом. НЕ display:none —
часть ботов такие поля пропускает; уводим за край экрана, но оставляем в потоке. */
.fhp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Куки-панель: снизу, узкой полосой — не перекрывает выдачу и не требует «крестика».
Кнопки равнозначны: отказ такой же видимый, как согласие. */
.ckbar{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;display:flex;gap:14px;align-items:center;
flex-wrap:wrap;justify-content:space-between;background:var(--bgCard);border:1px solid var(--cardBorder);
border-radius:16px;box-shadow:0 8px 30px rgba(26,34,49,.13);padding:13px 16px}
.ckbar-t{font-size:12.5px;line-height:1.5;color:var(--textMuted);max-width:760px}
.ckbar-t a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(219,85,36,.35)}
.ckbar-b{display:flex;gap:8px;flex:0 0 auto}
.ckbar-b button{font:inherit;font-size:13px;font-weight:600;border-radius:10px;padding:9px 14px;cursor:pointer;
border:1px solid var(--cardBorder);background:var(--bgCard);color:var(--text)}
.ckbar-b button:hover{background:var(--bgHover)}
.ckbar-yes{border-color:var(--accent) !important;color:var(--accent) !important}
.ckbar-yes:hover{background:var(--accentDim) !important}
@media (max-width:560px){.ckbar{left:8px;right:8px;bottom:8px;padding:12px}.ckbar-b{width:100%}
.ckbar-b button{flex:1}}
.fwho{font-size:14px;color:var(--text);margin:2px 0 2px}
.fwho b{font-weight:700}
.fsave{color:var(--green);font-weight:600}
.fdays{font-size:12px;color:var(--textMuted);margin-top:6px}
.fsum{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:12px 14px;
margin-bottom:14px;font-size:13px;color:var(--textMuted)}
.fsum b{color:var(--text);font-weight:700}
.cdone{text-align:center;padding:52px 24px}
.cdone .num{display:inline-block;font-size:13px;font-weight:700;color:var(--accent);background:var(--accentDim);
border-radius:999px;padding:7px 15px;font-variant-numeric:tabular-nums}
.cdone b{display:block;font-size:21px;font-weight:800;letter-spacing:-.4px;margin:14px 0 8px}
.cdone p{font-size:14px;line-height:1.62;color:var(--textMuted);max-width:330px;margin:0 auto}
.cdone .ok{width:54px;height:54px;border-radius:999px;background:var(--accentDim);color:var(--accent);
display:flex;align-items:center;justify-content:center;margin:0 auto 4px}
/* Исход «записали, но в CRM не уехало»: знак НЕ зелёный и НЕ праздничный — иначе человек
прочитает его как «всё хорошо» и не продублирует. И не красный: заявка не потеряна, она у нас. */
.cdone .ok.warn{background:#FDF3E3;color:#A16207}
.cdone p a{color:var(--text);font-weight:600;border-bottom:1px solid var(--border)}
.cdone p a:hover{border-bottom-color:var(--accent)}
.csum-note{margin-top:10px;font-size:12px;line-height:1.45;color:var(--textMuted);
background:var(--accentDim);border-radius:var(--r2);padding:9px 11px}
/* ── ЛИПКАЯ СТРОКА: поле всегда под рукой, сколько бы ни листали выдачу.
Своего фона у полосы не было (единая земля) — для sticky он обязателен,
иначе сквозь неё поедет контент. ── */
.bar{position:sticky;top:0;z-index:120;background:var(--page)}
/* ── ГЛУБИНА ЗЕМЛИ — «Бумага» (выбор владельца 21.08 из макета depth.html, варианты 0–11):
мягкий свет сверху по центру, лёгкое затемнение книзу и к углам, зерно матовой бумаги.
Слой лежит ПОД контентом и закреплён на экране (body::before). Липкая строка получает ТОТ ЖЕ
рисунок поверх своей подложки (.bar::before): оба бокса начинаются в углу экрана, единицы
vw/vh — потому шва между строкой и землёй нет, а контент под строку не просвечивает.
Карточки, поле поиска, лента — не трогаем: глубина только у земли. Зерно — SVG-шум 240 px
чернилами до 10 %: на расстоянии не читается, фактура бумаги чувствуется.
Силу подбирали ползунком макета; сильнее — поднять альфы, не множить слои. ── */
:root{--depth:url("data:image/svg+xml;utf8,"),
radial-gradient(100vw 62vh at 50vw -8vh, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 38%, rgba(255,255,255,0) 72%),
radial-gradient(130vw 80vh at 50vw 112vh, rgba(26,34,49,.07) 0%, rgba(26,34,49,0) 62%),
radial-gradient(140vw 140vh at 50vw 50vh, rgba(26,34,49,0) 55%, rgba(26,34,49,.045) 100%)}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--depth)}
.bar::before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;pointer-events:none;background-image:var(--depth)}
/* ── ПОЯВЛЕНИЕ ЭКРАНА: новый экран (карточка/статья/о компании) въезжает .22 с (opacity + 8 px), старый
скрывается сразу. View Transitions снесены 21.08 21:1x: снимок всего документа (коверфлоу 3D + фактура земли)
подвешивал страницу при открытии карточки («система залипает» — владелец). Перелёт фото плитка → сцена —
лёгкий призрак на Web Animations (heroFly в itOpen), без снимков документа. */
.scr-in{animation:scrIn .22s cubic-bezier(.2,.8,.25,1) backwards}
@keyframes scrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-ghost{position:fixed;z-index:500;pointer-events:none;object-fit:contain;transform-origin:top left;border-radius:8px;will-change:transform}
.e-skel .g1{display:flex;align-items:center;justify-content:center;overflow:hidden}
.it-slow{margin-top:14px;font-size:13px;color:var(--textMuted)}
.it-retry{height:32px;padding:0 12px;border-radius:var(--r2);border:1px solid var(--accentSolid);color:var(--accent);font-size:13px;font-weight:600;margin-left:6px;vertical-align:middle}
.it-retry:hover{background:var(--accentDim)}
/* ── ПРЕДКАРТОЧКА: пока матрица собирает полную карточку (холодный /api/item — 1–4 с, ночью дольше; замер в Chrome
владельца 21.08 22:2x — 3,4 с), показываем то, что уже знаем из строки выдачи: фото, тип, имя, бренд, цену,
наличие и «В корзину» (тот же buyControl). Полная карточка заменит её целиком, когда приедет. Пришли по ссылке
без данных строки — прежний скелет. Геометрия как у книги .wb: две колонки, белый лист, тень книги. */
.pre{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--cardBorder);border-radius:24px;overflow:hidden;
box-shadow:0 30px 60px -30px rgba(26,34,49,.28);margin-top:6px;min-height:600px}
.pre-l{display:flex;align-items:center;justify-content:center;padding:30px 34px 26px;background:#fff;min-width:0}
.pre-l img.sk-hero{max-width:86%;max-height:430px;object-fit:contain;border-radius:8px}
.pre-r{padding:30px 36px 26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pre-kind{font-size:13px;color:var(--textMuted)}
.pre-r h1{margin:0;font-size:25px;line-height:1.15;letter-spacing:-.4px;font-weight:700;overflow-wrap:anywhere}
.pre-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--textDim)}
.pre-brand{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--cardBorder);border-radius:999px;
font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.pre-price{margin-top:6px;padding:16px 18px;background:var(--page);border:1px solid var(--cardBorder);border-radius:var(--r3)}
.pre-price b{font-size:32px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pre-price b.ask{font-size:20px;font-weight:700;color:var(--textMuted)}
.pre-price span{font-size:12px;color:var(--textMuted);margin-left:8px}
.pre-stock{display:flex;align-items:center;gap:8px;font-size:13px;padding:12px 14px;border:1px solid var(--cardBorder);border-radius:var(--r3)}
.pre-stock s{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;text-decoration:none;flex-shrink:0}
.pre-stock s.tr{background:#3B82F6}
.pre-stock b{margin-left:auto;font-weight:600;white-space:nowrap}
.pre-buy{margin-top:4px}
.pre-more{margin-top:14px;font-size:12px;color:var(--textDim)}
.pre-more .sk{height:12px;border-radius:6px;margin-top:8px;background:linear-gradient(90deg,#EFEDE9 25%,#F7F5F2 50%,#EFEDE9 75%);
background-size:400% 100%;animation:sk 1.2s ease-in-out infinite}
@media (max-width:760px){.pre{grid-template-columns:1fr;min-height:0}.pre-l{padding:18px}.pre-l img.sk-hero{max-height:260px}.pre-r{padding:18px}}
.sk-hero{max-width:86%;max-height:86%;object-fit:contain;border-radius:8px}
@media (prefers-reduced-motion:reduce){.scr-in{animation:none}}
/* ── ПАНЕЛЬ БЫСТРЫХ НАХОДОК: разворачивается прямо под полем, поверх ленты.
Смысл в том, что при вводе артикула ответ нужен сразу, а не после
прокрутки мимо новостей. ── */
.sug{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:200;
background:var(--bgSolid);border:1px solid var(--cardBorder);border-radius:var(--r3);
box-shadow:var(--e2);overflow:hidden;max-height:min(70vh,560px);display:flex;flex-direction:column}
.sug-list{overflow-y:auto;padding:6px}
.sug-row{display:flex;align-items:center;gap:11px;width:100%;padding:7px 9px;border-radius:9px;
cursor:pointer;text-align:left;background:transparent;border:none}
.sug-row:hover,.sug-row.on{background:var(--accentDim);box-shadow:inset 2px 0 0 var(--accentSolid)}
.sug-ph{width:40px;height:40px;border-radius:8px;background:var(--bgCard);border:1px solid var(--cardBorder);
flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sug-ph img{max-width:86%;max-height:86%;object-fit:contain;display:block}
.sug-ph span{font-size:10px;color:var(--textDim)}
.sug-mid{flex:1;min-width:0}
.sug-nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-sub{font-size:12px;color:var(--textDim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-variant-numeric:tabular-nums;margin-top:1px}
.sug-sub b{font-family:Inter,sans-serif;font-weight:600;color:var(--accent);letter-spacing:.03em}
.sug-right{text-align:right;flex-shrink:0}
.sug-price{font-size:13px;font-weight:700;white-space:nowrap}
.sug-ask{font-size:12px;color:var(--textMuted);font-weight:600;white-space:nowrap}
.sug-st{font-size:11px;color:var(--green);white-space:nowrap;margin-top:1px}
.sug-st.no{color:var(--textDim)}
.sug-foot{border-top:1px solid var(--cardBorder);padding:9px 14px;display:flex;align-items:center;
justify-content:space-between;gap:12px;background:var(--bgCard)}
.sug-foot button{font-size:13px;font-weight:600;color:var(--accent)}
.sug-foot span{font-size:12px;color:var(--textDim)}
.sug-foot kbd{font-family:inherit;font-size:11px;border:1px solid var(--cardBorder);border-radius:4px;
padding:1px 5px;color:var(--textMuted);background:var(--page)}
.sug-empty{padding:26px 16px;font-size:13px;color:var(--textMuted);text-align:center}
/* ── Панель находок появляется мягко (класс вешает anCascade при видимой вкладке, снимает animationend),
строки ПЕРВОГО показа входят короткой волной (по каждому символу — без волны, иначе дёргается);
совпавший фрагмент запроса — жирный с тонкой мандариновой линией, без заливки. */
.sug.an-pop{animation:anPop .14s ease-out backwards;transform-origin:top center}
@keyframes anPop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.sug-row.an-fade{animation-duration:.16s}
.sug-hl{font-weight:700;color:var(--text);text-decoration:underline;text-decoration-color:var(--accentSolid);
text-decoration-thickness:1px;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.sug.an-pop{animation:none}}
.sug-skel{height:54px;margin:2px 0;border-radius:9px;
background:linear-gradient(90deg,#F1EFEB 25%,#F8F7F4 50%,#F1EFEB 75%);background-size:400% 100%;
animation:sk 1.2s ease-in-out infinite}
/* Лента при активном поиске схлопывается: между запросом и ответом ей не место.
Схлопываем grid-строкой (1fr→0fr), а не max-height: анимация высоты дёргает
раскладку всей страницы на каждом кадре. */
#news{display:grid;grid-template-rows:1fr;
transition:grid-template-rows .32s cubic-bezier(.2,.8,.25,1), opacity .22s ease}
#news>*{min-height:0}
body.searching #news{grid-template-rows:0fr;opacity:0;overflow:hidden;margin:0;pointer-events:none}
/* ═══ СТРАНИЦА СТАТЬИ — формат «Тревожной кнопки» из матрицы ═══════════════
Перенесено с src/components/news.jsx (ArticlePage): газетная гарнитура,
мини-шапка с номером выпуска, лид, буквица, врезка-цитата, обтекаемые фото
с подписями, «Читайте также». Гарнитура живёт ТОЛЬКО внутри статьи. */
/* Статья, как и карточка товара, живёт ВНУТРИ страницы: строка поиска с корзиной
остаётся на месте — из статьи уходят искать товар, а не закрывать вкладку. */
.art{background:transparent} /* своя заливка закрывала бы слой глубины и давала ступеньку под строкой */
body.news-open #news,body.news-open .wrap.home{display:none}
.art-wrap{max-width:760px;margin:0 auto;padding:18px 20px 60px}
.art-mast{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--text);
padding-bottom:10px;margin-bottom:14px;flex-wrap:wrap}
.art-back{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;
color:var(--textMuted);border:1px solid var(--cardBorder);border-radius:9px;padding:6px 12px}
.art-back:hover{color:var(--accent);border-color:var(--accentSolid)}
.art-mast .no{margin-left:auto;font-size:12px;color:var(--textDim);white-space:nowrap}
.art-mast .no b{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--text)}
.art-mast .vend{color:var(--textDim);font-weight:600;font-size:13px}
.art-mast .date{color:var(--textMuted);font-size:13px}
.art-cat{font-size:11px;font-weight:700;border-radius:5px;padding:2px 8px;letter-spacing:.4px;
text-transform:uppercase}
.art h1{font-family:var(--serif);font-size:38px;font-weight:700;line-height:1.16;margin:0;
letter-spacing:-.3px}
/* «Слушать» — вариант «Полоса» (выбор владельца 21.08, макет player5.html): газетная линейка под заголовком —
чернильная кнопка, серифный статус, капитель меты, справа время и скорость; ниже — живая волна записи (пики из
сайдкара, иначе WebAudio при первом нажатии), по ней же перемотка. Мини-плеер снизу при прокрутке — те же чернила.
Палитра: чернила на бумаге, мандарин — только бегущий столбик волны. Движение — пружина, без линейных переходов. */
.art-listen{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin:18px 0 0;padding:14px 0;border-top:1px solid var(--text);border-bottom:1px solid var(--cardBorder)}
.lsn-btn{width:46px;height:46px;border-radius:50%;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .5s cubic-bezier(.32,.72,0,1),background .3s}
.lsn-btn svg{width:18px;height:18px}
.lsn-btn:hover{transform:scale(1.04);background:#0F1520} .lsn-btn:active{transform:scale(.96)}
.lsn-txt{min-width:0}
.lsn-t1{font-family:var(--serif);font-size:17px;line-height:1.2;color:var(--text)}
.lsn-t2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--textDim);margin-top:5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn-t2 em{font-style:normal;color:var(--textMuted);letter-spacing:0;text-transform:none;font-weight:500;margin-left:6px}
.lsn-rt{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--textMuted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lsn-rate,.lsn-dock .d-rate{border:1px solid var(--cardBorder);border-radius:999px;padding:3px 10px;font-weight:600;color:var(--textMuted);font-size:12px;font-variant-numeric:tabular-nums;transition:border-color .3s,color .3s}
.lsn-rate:hover,.lsn-dock .d-rate:hover{border-color:var(--text);color:var(--text)}
.lsn-wave{grid-column:1/-1;height:38px;display:flex;align-items:center;gap:2px;cursor:pointer;margin-top:2px}
/* Столбики растут трансформацией: анимировать высоту — значит пересчитывать раскладку всей
строки на каждом шаге, а их тут несколько десятков. Базовая высота полная, масштаб от низа. */
.lsn-wave i{flex:1;height:100%;transform:scaleY(.3);transform-origin:bottom;border-radius:2px;
background:rgba(26,34,49,.16);transition:background .25s,transform .6s cubic-bezier(.32,.72,0,1)}
.lsn-wave i.on{background:var(--text)}
.lsn-wave i.hot{background:var(--accentSolid)}
.lsn-dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(92vw,720px);z-index:140;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;
background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid var(--cardBorder);border-radius:999px;box-shadow:0 1px 2px rgba(26,34,49,.04),0 18px 40px -24px rgba(26,34,49,.35);animation:wbIn .4s cubic-bezier(.32,.72,0,1)}
.lsn-dock .d-btn{width:36px;height:36px;border-radius:50%;background:var(--text);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.lsn-dock .d-btn svg{width:14px;height:14px} .lsn-dock .d-btn:active{transform:scale(.92)}
.lsn-dock .d-title{font-family:var(--serif);font-size:13px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.lsn-dock .d-lbl{font-size:12px;color:var(--textMuted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lsn-dock .lsn-prog{flex:1;height:3px;border-radius:99px;background:#ECE9E3;position:relative;cursor:pointer;min-width:50px}
.lsn-dock .lsn-prog:before{content:'';position:absolute;left:0;right:0;top:-9px;bottom:-9px}
/* Полосу тянем transform-ом, а не шириной: ширина заставляет браузер пересчитывать раскладку
на каждом кадре воспроизведения, трансформация — нет. Ширина 100% и scaleX от левого края
дают ту же картинку. */
.lsn-dock .lsn-prog i{position:absolute;left:0;top:0;bottom:0;width:100%;transform:scaleX(0);
transform-origin:left center;border-radius:99px;background:var(--text);transition:transform .2s linear;will-change:transform}
.lsn-dock .d-x{font-size:18px;line-height:1;color:var(--textDim);width:28px;height:28px;border-radius:50%;flex-shrink:0}
.lsn-dock .d-x:hover{color:var(--text);background:var(--bgHover)}
@media (max-width:600px){.art-listen{grid-template-columns:auto 1fr;gap:12px}.lsn-rt{grid-column:1/-1;justify-content:space-between}.lsn-dock .d-title{display:none}}
figure.art-hero{margin:16px 0 4px;padding:0}
figure.art-hero .ph{border-radius:12px;overflow:hidden;max-height:430px;background:#EFEDE9}
figure.art-hero img{width:100%;max-height:430px;object-fit:cover;display:block}
figcaption{font-size:12px;color:var(--textMuted);font-style:italic;margin-top:7px;line-height:1.45}
.art-body{overflow:hidden;margin:10px 0 0}
.art-body p{font-family:var(--serif);font-size:17px;line-height:1.75;margin:14px 0;color:var(--text)}
.art-body p.lead{font-size:19px;line-height:1.6;font-weight:500}
.art-body p.drop::first-letter{float:left;font-family:var(--serif);font-size:56px;line-height:46px;
padding:5px 8px 0 0;color:var(--accent);font-weight:700}
.art-body blockquote{clear:both;margin:22px 0;padding:18px 26px;border-top:2.5px solid var(--text);
border-bottom:1px solid var(--cardBorder);text-align:center}
.art-body blockquote span{font-family:var(--serif);font-size:22px;font-style:italic;line-height:1.45}
.art-body figure{margin:6px 0 12px 22px;padding:0;float:right;width:46%}
.art-body figure.wide{margin:18px 0;float:none;width:auto;clear:both}
.art-body figure .ph{border-radius:10px;overflow:hidden;background:#EFEDE9}
.art-body figure img{width:100%;max-height:260px;object-fit:cover;display:block}
.art-body figure.wide img{max-height:380px}
.art-sign{text-align:right;font-family:var(--serif);font-style:italic;font-size:15px;
color:var(--textDim);margin:18px 0 0}
/* Ряд действий под статьёй стоит ПО ЦЕНТРУ колонки: пока справа висел блок
«Следующая ›», ряд читался как левая половина пары, а без него левый прижим
выглядел случайным. */
.art-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px;
border-top:1px solid var(--cardBorder);padding-top:16px}
.art-acts button{font-size:13px;font-weight:700;color:var(--textMuted);border:1px solid var(--cardBorder);
border-radius:10px;padding:7px 14px;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.art-acts button:hover{color:var(--accent);border-color:var(--accentSolid)}
.art-acts button.ok{color:var(--green);border-color:var(--green)}
.art-acts .tg{font-size:13px;font-weight:700;color:#fff;background:#2AABEE;border:1px solid #2AABEE;
border-radius:10px;padding:7px 14px;display:inline-flex;align-items:center;gap:7px;transition:filter .15s}
.art-acts .tg:hover{filter:brightness(1.07)}
.art-rule{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.art-rule i{flex:1;border-top:2px solid var(--text);font-style:normal}
.art-rule span{font-family:var(--serif);font-size:15px;font-weight:700}
.art-also{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.art-also>div{cursor:pointer;border:1px solid var(--cardBorder);border-radius:10px;padding:10px 13px;
background:var(--bgCard)}
.art-also>div:hover .h{text-decoration:underline}
.art-also .k{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:5px}
.art-also .h{font-family:var(--serif);font-size:15px;font-weight:700;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-also .m{font-size:12px;color:var(--textMuted);margin-top:6px}
.art-goods{max-width:1180px;margin:0 auto;padding:0 20px 20px}
.art-skel{height:17px;border-radius:6px;margin:0 0 12px;
background:linear-gradient(90deg,#EDEBE7 25%,#F6F4F1 50%,#EDEBE7 75%);background-size:400% 100%;
animation:sk 1.2s ease-in-out infinite}
.art-skel.s2{width:88%} .art-skel.s3{width:94%}
@media (max-width:760px){
.art-wrap{padding:14px 16px 44px}
.art h1{font-size:27px}
.art-body p{font-size:16px}
.art-body p.lead{font-size:17px}
.art-body p.drop::first-letter{font-size:44px;line-height:38px}
.art-body figure{float:none;width:auto;margin:14px 0}
.art-body blockquote span{font-size:18px}
.art-body blockquote{padding:14px 4px}
.art-also{grid-template-columns:1fr}
.art-goods{padding:0 16px 16px}
}
/* ═══ КАРТОЧКА ТОВАРА ══════════════════════════════════════════════════════
Отдельный экран поверх витрины, как у статьи. Две колонки: фото и всё, что
нужно для решения о покупке — цена, наличие, характеристики, документы. */
/* Карточка живёт ВНУТРИ страницы, а не поверх неё: строка поиска с корзиной
должна оставаться под рукой — из карточки часто уходят искать следующую позицию. */
.it{background:var(--page)}
.it-top{background:transparent;border-bottom:1px solid var(--cardBorder)} /* своя заливка = серая полоса поверх слоя глубины земли */
/* Пока открыт товар, витрина скрыта — но шапка и разделы на месте. */
body.card-open #news,body.card-open .wrap.home{display:none}
/* На карточке пилюли разделов не нужны (крошки ведут в раздел точнее) — книга поднимается к сгибу. */
body.card-open .quick{display:none}
/* ═══ О КОМПАНИИ ═══════════════════════════════════════════════════════════
Раздел живёт ВНУТРИ страницы, как карточка и статья: шапка с поиском
остаётся на месте, из «о компании» можно уйти в товар одним движением. */
body.about-open #news,body.about-open .wrap.home,body.about-open .quick{display:none}
body.lk-open #news,body.lk-open .wrap.home,body.lk-open .quick{display:none}
body.contacts-open #news,body.contacts-open .wrap.home,body.contacts-open .quick{display:none}
.ab{max-width:1180px;margin:0 auto;padding:0 20px 64px}
.ab-back{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 8px;margin:4px 0 18px;
border-radius:var(--r2);color:var(--textMuted);font-size:13px;font-weight:600;
transition:color .15s,background .15s}
.ab-back:hover{color:var(--accent);background:var(--accentDim)}
.ab-hero{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:20px;
padding:44px 46px 40px;box-shadow:var(--e1)}
.ab-hero h1{margin:0 0 14px;font-size:38px;font-weight:800;letter-spacing:-1.1px;line-height:1.1}
.ab-hero h1 i{font-style:normal;color:var(--accent)}
.ab-lead{margin:0;font-size:17px;line-height:1.62;color:var(--textMuted);max-width:760px}
.ab-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 0} /* переопределено ниже (бенто) */
.ab-num{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:18px 20px}
.ab-num b{display:block;font-size:26px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums;
line-height:1.1}
.ab-num span{display:block;margin-top:5px;font-size:13px;color:var(--textDim);line-height:1.35}
.ab-num.acc b{color:var(--accent)}
.ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.ab-card{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:24px 24px 26px}
.ab-card h3{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:-.2px}
.ab-card p{margin:0 0 10px;font-size:14px;line-height:1.62;color:var(--textMuted)}
.ab-card p:last-child{margin-bottom:0}
.ab-card ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:var(--textMuted)}
.ab-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px;
background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:22px 24px}
.ab-foot b{font-size:16px;font-weight:700}
.ab-foot span{font-size:13px;color:var(--textMuted)}
.ab-foot .cta{margin-left:auto}
.ab-foot a.ml{color:var(--accent);font-weight:600}
@media (max-width:900px){
.ab-nums{grid-template-columns:repeat(2,1fr)}
.ab-grid{grid-template-columns:1fr}
.ab-hero{padding:30px 22px 28px}
.ab-hero h1{font-size:29px}
}
.it-top-in{max-width:1180px;margin:0 auto;padding:0 24px;min-height:46px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.it-back{font-size:13px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}
/* крошки живут в той же строке, что и «Назад» — одна строка служебного верха вместо двух */
.it-top-in .it-crumbs{margin:0;padding-left:14px;border-left:1px solid var(--cardBorder);min-height:20px}
.it-top .who{margin-left:auto;display:flex;align-items:center;gap:8px}
.it-top .who img{height:22px;width:auto;display:block}
/* Раскладка C4: на первом экране — только решение о покупке (фото, цена, наличие,
корзина). Описание, характеристики и документы уходят под переключатель:
у иных позиций характеристик за тридцать, и одной колонкой они топят карточку. */
.it-wrap{max-width:1180px;margin:0 auto;padding:16px 24px 60px}
.it-head{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:32px;align-items:start}
.it-tabs{display:flex;gap:4px;border-bottom:1px solid var(--cardBorder);margin:30px 0 0;
overflow-x:auto;scrollbar-width:none}
.it-tabs::-webkit-scrollbar{display:none}
.it-tabs button{padding:11px 16px;font-size:13px;font-weight:600;color:var(--textMuted);
border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s}
.it-tabs button:hover{color:var(--text)}
.it-tabs button.on{color:var(--accent);border-bottom-color:var(--accentSolid)}
.it-tabs button b{font-weight:600;color:var(--textDim);margin-left:6px;font-size:12px}
.it-tabs button.on b{color:var(--accent)}
.it-tabbody{padding-top:18px;max-width:900px}
.it-empty{font-size:13px;color:var(--textMuted);padding:20px 0}
.it-ph{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);
height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--e1)}
.it-ph img{max-width:88%;max-height:88%;object-fit:contain;display:block}
.it-ph .no{color:var(--textDim);font-size:13px}
.it-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.it-thumbs button{width:62px;height:62px;border-radius:9px;border:1px solid var(--cardBorder);
background:var(--bgCard);overflow:hidden;display:flex;align-items:center;justify-content:center}
.it-thumbs button.on{border-color:var(--accentSolid)}
.it-thumbs img{max-width:86%;max-height:86%;object-fit:contain;display:block}
/* Фото липнет при прокрутке длинных характеристик: товар остаётся перед глазами.
top отсчитан от липкой строки поиска (~86px), чтобы колонки не наезжали. */
@media (min-width:761px){
.it-head>div:first-child{position:sticky;top:96px;align-self:start}
}
.it-ph.zoom{cursor:zoom-in}
/* ── ЛАЙТБОКС. Конечное состояние видимо сразу — появление не зависит от
анимации (фоновая вкладка её замораживает). ── */
.lb{position:fixed;inset:0;z-index:400;background:rgba(15,20,30,.88);display:flex;
align-items:center;justify-content:center}
.lb figure{margin:0;max-width:min(1100px,90vw);max-height:86vh;background:#fff;border-radius:14px;
padding:18px;display:flex;align-items:center;justify-content:center}
.lb img{max-width:100%;max-height:calc(86vh - 36px);object-fit:contain;display:block}
.lb-x{position:fixed;top:16px;right:16px;width:42px;height:42px;border-radius:12px;
background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;
transition:background .15s}
.lb-x:hover{background:rgba(255,255,255,.24)}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:12px;
background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;
transition:background .15s}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-n{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;
opacity:.75;font-variant-numeric:tabular-nums;letter-spacing:.06em}
/* Хлебные крошки: карточка не должна быть тупиком — из неё видно, где товар лежит,
и одним кликом можно уйти в его раздел. */
.it-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;
color:var(--textMuted);margin-bottom:10px}
.it-crumbs button{font-size:12px;color:var(--textMuted)}
.it-crumbs button:hover{color:var(--accent)}
.it-crumbs i{font-style:normal;color:var(--textDim)}
.it-brand{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.it-sku-row{display:flex;align-items:center;gap:8px}
.it-copy{font-size:12px;color:var(--textDim);border:1px solid var(--cardBorder);border-radius:6px;
padding:2px 7px;transition:all .15s}
.it-copy:hover{color:var(--accent);border-color:var(--accentSolid)}
.it-copy.ok{color:var(--green);border-color:var(--green)}
/* Возраст данных. Остаток без даты — это обещание, а не факт: клиент имеет право
знать, на какой момент число верно. */
.it-age{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--textDim);
margin-top:12px;padding-top:10px;border-top:1px dashed var(--cardBorder)}
.it-age s{width:6px;height:6px;border-radius:50%;background:var(--green);display:block;text-decoration:none}
.it-age s.old{background:#B45309}
/* Позиции без цены — 24,7% наличия. Без этой кнопки карточка становится тупиком. */
.it-ask{height:44px;padding:0 20px;border-radius:var(--r2);border:1px solid var(--accentSolid);
color:var(--accent);font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;
transition:background .15s}
.it-ask:hover{background:var(--accentDim)}
.it h1{margin:6px 0 8px;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.3px}
.it-sku{font-size:13px;color:var(--textDim);font-variant-numeric:tabular-nums}
.it-price{margin:18px 0 0;padding:16px 18px;background:var(--bgCard);border:1px solid var(--cardBorder);
border-radius:var(--r3);box-shadow:var(--e1)}
.it-price .lbl{font-size:11px;color:var(--textDim);display:block}
.it-price .val{font-size:27px;font-weight:700;letter-spacing:-.5px}
.it-price .ask{font-size:16px;font-weight:600;color:var(--textMuted)}
.it-price .part{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;color:var(--green);
background:var(--greenDim);padding:5px 10px;border-radius:var(--r1)}
.it-shelf{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--textMuted);margin-top:12px}
.it-shelf s{width:7px;height:7px;border-radius:50%;display:block;background:var(--green);text-decoration:none}
.it-shelf s.b{background:#35678F}
.it-shelf b{color:var(--text);font-weight:600}
.it-buy{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.it-step{display:flex;align-items:center;border:1px solid var(--cardBorder);border-radius:var(--r2);
background:var(--bgCard);overflow:hidden}
.it-step button{width:40px;height:44px;font-size:19px;color:var(--textMuted);display:flex;
align-items:center;justify-content:center;line-height:1}
.it-step button:hover{color:var(--accent);background:var(--accentDim)}
.it-step input{width:66px;height:44px;border:0;outline:none;text-align:center;font:inherit;
font-size:15px;font-weight:700;background:transparent;color:var(--text)}
.it-cart{height:44px;padding:0 22px;border-radius:var(--r2);border:1px solid var(--accentSolid);
color:var(--accent);font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;
transition:background .15s}
.it-cart:hover{background:var(--accentDim)}
.it-cart.ok{border-color:var(--green);color:var(--green)}
.it-sec{margin-top:26px}
.it-sec h2{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:-.1px}
.it-desc{font-size:15px;line-height:1.62;color:#2C3444}
.it-specs{border:1px solid var(--cardBorder);border-radius:var(--r3);overflow:hidden;background:var(--bgCard)}
.it-specs div{display:flex;gap:14px;padding:9px 14px;font-size:13px;border-bottom:1px solid var(--cardBorder)}
.it-specs div:last-child{border-bottom:0}
.it-specs div:nth-child(odd){background:#FBFAF8}
.it-specs .k{flex:0 0 45%;color:var(--textMuted);min-width:0}
.it-specs .v{flex:1;font-weight:600;min-width:0}
.it-docs{display:flex;flex-direction:column;gap:6px}
.it-docs a{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);
border:1px solid var(--cardBorder);border-radius:var(--r2);padding:9px 13px;background:var(--bgCard)}
.it-docs a:hover{border-color:var(--accentSolid);color:var(--accent)}
.it-rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.it-rel button{text-align:left;border:1px solid var(--cardBorder);border-radius:var(--r2);padding:10px 12px;
background:var(--bgCard);font-size:13px;font-weight:600;line-height:1.35}
.it-rel button:hover{border-color:var(--accentSolid);color:var(--accent)}
.it-rel span{display:block;font-size:11px;color:var(--textDim);margin-top:4px;
font-variant-numeric:tabular-nums}
@media (max-width:860px){
.it-wrap{padding:16px 16px 48px}
.it-head{grid-template-columns:1fr;gap:20px}
.it-ph{height:280px}
.it h1{font-size:20px}
}
/* ── БЫСТРЫЕ РАЗДЕЛЫ: профильные корни каталога по наличию. Выровнены по строке
поиска, а не по контенту — читаются как её продолжение. ── */
/* ── ТЕЛЕФОН В СТРОКЕ РАЗДЕЛОВ (владелец 28.08, четвёртый заход) ──
Отклонены: служебная строка над шапкой (лишняя полоса), номер под кнопкой «Стать партнёром»
(кнопка уезжала вверх: y=16 вместо родных y=20), отдельная строка по центру (лишние 37 px).
Здесь высоты не добавляется ВОВСЕ: строка разделов уже была, справа у неё пусто.
⭐ Номер — СОСЕД навигации, а не её ребёнок: на ≤1100 px .quick превращается в прокручиваемую
ленту (overflow-x:auto), и номер внутри уезжал бы вбок вместе с чипами. */
.qrow{max-width:1600px;margin:0 auto;padding:0 24px 14px;display:flex;align-items:center;gap:18px}
.qrow .quick{flex:1;min-width:0;max-width:none;margin:0;padding:0;flex-wrap:nowrap;overflow:hidden}
/* 🪤 margin-left:auto ОБЯЗАТЕЛЕН, а не украшение. На карточке, «О компании», «Контактах» и
«Реквизитах» строка разделов скрывается (body.card-open/.about-open/.contacts-open .quick),
и номер остаётся в строке ОДИН — без этого он прижимался к левому краю и висел под логотипом.
Поймано снимком боевой страницы реквизитов, а не чтением правил. */
.teln{flex:none;margin-left:auto;display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
font-variant-numeric:tabular-nums;border-bottom:1px solid transparent;white-space:nowrap}
.teln:hover{border-bottom-color:var(--accent)}
/* Вариант 5 (выбор владельца 28.08): без скобок, группы через пробел, ОДНИМ весом.
Скобки и дефисы дробят номер на куски и заставляют глаз спотыкаться; пробел с разрядкой
даёт те же группы, но ровным строем. Цифры табличные — ширины знаков одинаковы. */
.teln b{font-size:17px;font-weight:600;color:var(--text);letter-spacing:.06em;line-height:1}
@media(max-width:760px){
.qrow{padding:0 16px 12px;gap:12px}
.teln b{font-size:15px;letter-spacing:.04em}
}
.quick{display:flex;align-items:center;
gap:6px;flex-wrap:wrap}
.quick button{height:32px;padding:0 12px;border-radius:var(--rPill);font-size:13px;
font-weight:500;color:var(--textMuted);white-space:nowrap;background:var(--bgCard);
border:1px solid var(--cardBorder);transition:color .15s,border-color .15s,background .15s}
.quick button:hover{color:var(--accent);border-color:var(--accentSolid)}
.quick button.on{color:var(--accent);font-weight:600;border-color:var(--accentSolid)}
.quick button b{font-weight:500;color:var(--textDim);margin-left:6px;font-size:12px}
.quick button.on b{color:var(--accent)}
.quick .all{background:transparent;border-style:dashed}
/* ── ПОПОВЕР КАТЕГОРИЙ — catmenu.jsx:290+ : две панели, ширина min(1000px,92vw) ── */
.pop{position:absolute;top:calc(100% + 6px);left:0;z-index:199;
background:var(--bgSolid);border:1px solid var(--border);border-radius:var(--r3);
box-shadow:var(--e2);overflow:hidden}
.pop-cat{width:min(1000px,92vw)}
.pop-brand{width:min(560px,92vw)}
.popq{display:flex;align-items:center;gap:8px;background:var(--bgInput);
border-bottom:1px solid var(--border);padding:10px 14px}
.popq input{background:transparent;border:none;outline:none;color:var(--text);font-size:13px;
width:100%;font-family:inherit}
.panes{display:flex;min-height:320px;max-height:min(62vh,520px)}
.pane{overflow-y:auto;padding:7px}
.pane-l{width:300px;flex-shrink:0;border-right:1px solid var(--border)}
.pane-r{flex:1;min-width:0}
.crow{display:flex;align-items:center;gap:11px;width:100%;padding:8px 11px;border-radius:9px;
cursor:pointer;font-size:13px;color:var(--text);border:none;background:transparent}
.crow:hover{background:var(--bgHover)}
.crow.on{background:var(--accentDim);box-shadow:inset 2px 0 0 var(--accentSolid)}
.crow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .sub{display:block;margin-top:1px;font-size:12px;color:var(--textDim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnt{font-size:12px;color:var(--textDim);white-space:nowrap;flex-shrink:0}
.cnt b{color:var(--green);font-weight:600}
.pane-empty{padding:34px 16px;color:var(--textMuted);font-size:13;max-width:44ch}
.pane-empty b{display:block;color:var(--text);font-size:13.5px;margin-bottom:4px}
/* Многоуровневое меню категорий (03.09): крошки + сетка узлов уровня с детьми. */
.catcrumbs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:9px 8px 10px;
border-bottom:1px solid var(--border);font-size:12.5px;margin-bottom:6px}
.ccrumb{border:none;background:transparent;font:inherit;font-size:12.5px;color:var(--textMuted);
cursor:pointer;padding:2px 5px;border-radius:6px}
.ccrumb:hover{color:var(--accent);background:var(--bgHover)}
.csep{color:var(--textDim)}
.ccur{color:var(--text);font-weight:600;padding:2px 4px}
.catgrid{columns:2;column-gap:26px;padding:2px 6px 8px}
@media(max-width:760px){.catgrid{columns:1}}
.cgcell{break-inside:avoid;margin-bottom:14px}
.cgrp{display:flex;align-items:baseline;gap:8px;width:100%;border:none;background:transparent;
font:inherit;text-align:left;cursor:pointer;padding:4px 6px;border-radius:8px;color:var(--text)}
.cgrp:hover{background:var(--bgHover)}
.cgrp .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35}
.ckids{display:block;margin-top:3px}
.ckid{display:flex;align-items:baseline;gap:7px;width:100%;border:none;background:transparent;
font:inherit;text-align:left;cursor:pointer;padding:3px 6px;border-radius:7px;
color:var(--textMuted);font-size:12.5px;line-height:1.42}
.ckid:hover{background:var(--bgHover);color:var(--accent)}
.ckid-all{color:var(--accent);font-weight:600}
.ckid .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmore{font-size:12px;color:var(--accent);font-weight:600;background:none;border:none;
cursor:pointer;padding:4px 6px;border-radius:7px;font-family:inherit}
.cmore:hover{background:var(--bgHover)}
.catfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 15px;border-top:1px solid var(--border);font-size:12.5px;color:var(--textMuted)}
.cfpath{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfgo{border:1px solid var(--border);background:transparent;font:inherit;font-size:12.5px;
font-weight:600;color:var(--text);padding:6px 14px;border-radius:999px;cursor:pointer;flex-shrink:0}
.cfgo:hover{border-color:var(--accentSolid);color:var(--accent)}
/* ═══ НОВОСТИ — дословно из vibe.css («Наш вайб», виджет 2 «Лента вендоров»).
Классы .eg-* сохранены как есть, чтобы правки CSS переносились туда-обратно. ═══ */
.eg-news{--ink:#141311;--ink2:#4A4640;--ink3:#8A857D;--sheet:#FFFFFF;--sheet2:#FAF8F4;
--accent-bright:#E8551C;
--shadow:0 2px 5px rgba(26,34,49,0.06), 0 10px 24px -6px rgba(26,34,49,0.10), 0 12px 28px -10px rgba(242,100,30,0.10);
--shadow-up:0 6px 14px -4px rgba(26,34,49,0.16), 0 12px 30px -6px rgba(26,34,49,0.12), 0 16px 34px -10px rgba(242,100,30,0.17);
color:var(--ink)}
.eg-news *{box-sizing:border-box}
.eg-head{padding:0 2px 10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.eg-head__pill{display:inline-flex;align-items:baseline;gap:10px;
padding:7px 15px 8px 13px;border-radius:999px;background:rgba(16,15,14,0.62);color:#fff}
.eg-head__dot{align-self:center;width:7px;height:7px;border-radius:50%;background:var(--accent-bright)}
.eg-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.2px}
.eg-head__pill span{font-size:12px;color:rgba(255,255,255,0.62)}
.eg-epi{font-size:13px;font-style:italic;color:var(--textMuted);flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── КОВЕРФЛОУ. Механика перенесена с ruixen.ui/coverflow-carousel (React+Tailwind)
на ванильный DOM: у витрины нет сборки. Параметры сохранены один в один.
Всё считает paint() и красит прямо в style — состояние на каждый кадр
не гоняем, иначе шестьдесят перерисовок в секунду на ровном месте. ── */
.cf{--cf-card:clamp(230px,23vw,350px);--cf-ar:1.5;--cf-body:84px;--cf-rotate:44;--cf-depth:.6; /* прежний вид 350×3:2 (владелец 22.08 01:2x: «верни в прежний вид» после проб 440×1.9) */
--cf-persp:3;--cf-falloff:.56;--cf-fade:.1;--cf-gap:.05;
width:100%;position:relative}
.cf-frame{cursor:grab;overflow:hidden;padding:44px 0 34px;outline:none;
perspective:calc(var(--cf-card) * var(--cf-persp));touch-action:pan-y}
.cf-frame:active{cursor:grabbing}
/* ⭐ КЛАВИАТУРА. Фокус был оформлен ровно в двух местах — значит человек, идущий табом
(а это и служба поддержки, и любой, кому неудобна мышь), терял себя на странице: браузерное
кольцо на наших скруглённых элементах местами не видно вовсе. Даём общее правило один раз.
:focus-visible, а не :focus — мышью нажатая кнопка кольцом не обрастает. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--accentSolid);outline-offset:2px;border-radius:8px}
.cf-frame:focus-visible{box-shadow:0 0 0 2px var(--accentSolid)}
.cf-stage{position:relative;user-select:none;transform-style:preserve-3d;
height:calc(var(--cf-card) / var(--cf-ar) + var(--cf-body))}
/* 3:2 — ровно медиана живых обложек вендоров (замер 19.08: разброс 1,0…2,96).
Квадрат резал типичную обложку на треть ширины: уходили логотип и подпись. */
/* Карточка «Вайба»: обложка сверху, белая подложка с заголовком снизу. Так
заголовки видны у ВСЕХ карточек сразу, отдельная подпись под каруселью не нужна,
и страница поднимается — под товары остаётся больше места. */
.cf-card{position:absolute;left:50%;top:0;width:var(--cf-card);
overflow:hidden;border-radius:16px;background:var(--bgCard);cursor:pointer;
box-shadow:0 20px 25px -5px rgba(26,34,49,.14), 0 8px 10px -6px rgba(26,34,49,.12);
will-change:transform;display:flex;flex-direction:column}
.cf-cover{position:relative;flex-shrink:0;background:#EFEDE9;
height:calc(var(--cf-card) / var(--cf-ar))}
.cf-card img{height:100%;width:100%;object-fit:cover;display:block;user-select:none;
-webkit-user-drag:none;opacity:0;transition:opacity .28s ease}
.cf-card img.cf-ld{opacity:1}
@media (prefers-reduced-motion:reduce){.cf-card img{transition:none}}
.cf-b{padding:11px 14px 13px;height:var(--cf-body);display:flex;flex-direction:column;
justify-content:flex-start;gap:5px;overflow:hidden}
.cf-t{font-size:14px;font-weight:600;line-height:1.32;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Появление заголовка по знакам пробовали 27.08 и сняли по решению владельца
(«по новостям не нужно эффекта печатающего текста») — заголовок просто есть. */
.cf-m{font-size:12px;color:var(--textDim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Карточка кликабельна целиком: жмут на баннер, а не на подпись под ним.
Отдельная кнопка «Читать» была лишней и мешала картинке. */
.cf-card{cursor:pointer}
.cf-chip{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:999px;
font-size:11px;font-weight:600;background:rgba(16,15,14,0.62);color:#fff;z-index:2}
.cf-ear{position:absolute;right:12px;bottom:12px;width:26px;height:26px;border-radius:50%;background:rgba(16,15,14,.62);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.cf-nav{position:absolute;top:calc(44px + var(--cf-card) / (var(--cf-ar) * 2));z-index:200;
width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.65);color:#2E2B27;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
box-shadow:0 2px 10px rgba(15,20,10,.16);transition:background .15s;transform:translateY(-50%)}
.cf-nav:hover{background:#fff}
.cf-prev{left:20px}.cf-next{right:20px}
.cf-dots{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:8px}
/* Точка — 8 px, и это правильно: она метка, а не кнопка. Но нажимать по ней пальцем
невозможно, поэтому область нажатия расширяем невидимо — псевдоэлементом на 44 px.
Вид не меняется, промахи исчезают. */
.cf-dots button{position:relative}
.cf-dots button::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;
transform:translate(-50%,-50%)}
.cf-dots button{width:8px;height:8px;border-radius:50%;background:var(--text);opacity:.25;
transition:opacity .2s,transform .2s}
.cf-dots button[aria-current=true]{opacity:1;transform:scale(1.15)}
.eg-empty{padding:16px 18px;font-size:13px;color:#4A4640;background:#fff;
border:1px solid rgba(26,34,49,0.07);border-radius:14px;box-shadow:var(--e1)}
/* ═══ ПЛАШКИ БРЕНДОВ — дословно pricecenter.jsx:2079-2247 ═══ */
.sec{padding:22px 0 0}
.sec-h{display:flex;align-items:baseline;gap:10px;padding:0 2px 10px}
.sec-h h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.2px}
.sec-h span{font-size:12px;color:var(--textMuted)}
.brandrow{padding:10px 0;display:flex;gap:8px;align-items:stretch;
flex-wrap:nowrap;overflow-x:hidden;min-width:0;max-width:100%}
.brandrow.open{flex-wrap:wrap;overflow-x:visible;max-height:46vh;overflow-y:auto}
.bcard{display:flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid var(--cardBorder);
border-radius:var(--r2);padding:6px 6px 6px 11px;cursor:pointer;font-family:inherit;
min-width:0;flex-shrink:0;
/* в покое тени НЕТ; подъём/увеличение на ховере запрещены (сняты владельцем 12.08) */
transition:box-shadow .16s ease, border-color .12s, background .12s,
transform .16s cubic-bezier(.2,.8,.25,1)}
.bcard:active{transform:scale(.97)}
.bcard:hover{box-shadow:0 6px 18px var(--c-a,rgba(26,34,49,.16));border-color:var(--c,var(--border));z-index:2}
.bcard.on{border-color:var(--c,var(--accentSolid))}
.blogo{width:96px;height:30px;border-radius:7px;overflow:hidden;flex-shrink:0;
display:flex;align-items:center;justify-content:center;background:transparent;
padding:2px 5px}
.bfilt{display:flex;align-items:center;justify-content:center;
filter:grayscale(1) opacity(0.8);transition:filter .18s ease}
.bcard:hover .bfilt,.bcard.on .bfilt{filter:none}
.blogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.bword{display:flex;align-items:center;min-height:30px;font-size:13px;font-weight:700;
color:var(--text);overflow:hidden;text-overflow:ellipsis;max-width:130px;white-space:nowrap;
transition:color .15s}
.bcard.on .bword{color:var(--c,var(--accent))}
.bcard:hover .bword{color:var(--c,var(--accent))}
.bmore{display:flex;align-items:center;background:transparent;border:1px dashed var(--border);
border-radius:var(--r2);padding:6px 14px;cursor:pointer;font-family:inherit;font-size:12px;
color:var(--textMuted);font-weight:600;flex-shrink:0;white-space:nowrap}
/* ═══ ВЫДАЧА ═══ */
.res{padding:24px 0 40px}
.res-h{display:flex;align-items:center;gap:10px;padding:0 2px 12px;flex-wrap:wrap}
.res-h h2{margin:0;font-size:15px;font-weight:600}
.res-h span{font-size:12px;color:var(--textMuted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
border-radius:var(--r1);background:var(--accentDim);color:var(--accent);
font-size:12px;font-weight:600;cursor:pointer}
.chip b{font-weight:800;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
/* Полосы главной (Новинки · Акции): лента плиток со снапом, стрелки справа в заголовке; плитка — та же productCard */
.hrows{display:flex;flex-direction:column;gap:30px}
.hrow .sec-h h2{font-size:18px}
.hrow .sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.hrow .sec-h .n{font-size:12px;color:var(--textDim)}
.hrow .nav{margin-left:auto;display:flex;gap:6px;align-self:center}
.hrow .nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--cardBorder);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--textMuted);transition:border-color .2s,color .2s,transform .4s cubic-bezier(.32,.72,0,1)}
.hrow .nav button:hover{border-color:var(--accentSolid);color:var(--accent)} .hrow .nav button:active{transform:scale(.92)}
.hrow .strip{display:grid;grid-auto-flow:column;grid-auto-columns:232px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px}
.hrow .strip::-webkit-scrollbar{display:none}
.hrow .strip>.pcard{scroll-snap-align:start}
.hrow .pnm{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pbadge.hot{color:#B45309;border-color:rgba(217,119,6,.4);background:#FEF3C7}
.hrow .sec-h .blogo{height:22px;width:auto;max-width:120px;object-fit:contain;align-self:center;margin-right:2px}
.hrow .sec-h .blogo:not([src]){display:none}
.hrow .strip{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.hrow .strip.end{-webkit-mask-image:none;mask-image:none}
.pcard{transition:transform .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1),border-color .3s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(26,34,49,.04),0 18px 34px -22px rgba(26,34,49,.35);border-color:#DDD8D0}
.pph img{height:82%;width:auto;max-width:88%;object-fit:contain;opacity:0;transition:opacity .3s}
.pph img.ready{opacity:1}
.hrows:not([hidden])~.res .hint{display:none}
.pbadge{position:absolute;left:10px;top:10px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid var(--cardBorder);color:var(--text)}
.pbadge.akcia{color:var(--accent);border-color:rgba(242,100,30,.45);background:var(--accentDim)}
.pbadge.new{color:var(--green);border-color:rgba(21,128,61,.35);background:var(--greenDim)}
.pb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.pb-top .pbadge{position:static}
.pb-top .pbr{margin:0}
@media (max-width:600px){.hrow .nav{display:none}.hrow .strip{grid-auto-columns:78vw}}
/* ── ДВА ВИДА ВЫДАЧИ. Плитка продаёт глазами, строки — прайсом: снабженец
со списком артикулов думает таблицей, и для него плитка — шум. ── */
/* Сортировка — нативный select в одежде пилюли: свой дропдаун здесь не окупается,
а системный список на телефоне удобнее любого самодельного. */
.sortsel{margin-left:auto;height:32px;padding:0 30px 0 12px;border-radius:var(--r2);
border:1px solid var(--cardBorder);background:var(--bgCard);color:var(--textMuted);
font:inherit;font-size:13px;font-weight:600;cursor:pointer;outline:none;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A93A3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center}
.sortsel:hover{color:var(--text);border-color:var(--border)}
.sortsel:focus-visible{border-color:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}
.vsw{display:flex;gap:2px;background:var(--bgCard);border:1px solid var(--cardBorder);
border-radius:var(--r2);padding:2px}
.vsw button{width:34px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
color:var(--textDim);transition:background .15s,color .15s}
.vsw button.on{background:var(--accentDim);color:var(--accent)}
.vsw button:hover:not(.on){color:var(--textMuted)}
.rows{display:flex;flex-direction:column;background:var(--bgCard);border:1px solid var(--cardBorder);
border-radius:var(--r3);overflow:hidden}
.prow{display:grid;grid-template-columns:52px minmax(0,1fr) 156px 126px 178px;gap:14px;align-items:center;
padding:9px 14px;cursor:pointer;border-top:1px solid var(--cardBorder);transition:background .12s}
.prow:first-child{border-top:0}
.prow:hover{background:var(--bgHover)}
/* плитка под фото белая по той же причине, что и в карточках: снимки на белом */
.prow-ph{width:52px;height:52px;border-radius:9px;background:#fff;border:1px solid var(--cardBorder);
display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.prow-ph img{max-width:88%;max-height:88%;object-fit:contain;display:block}
.prow-ph span{font-size:10px;color:var(--textDim)}
.prow-nm{font-size:13px;font-weight:600;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prow-sub{display:flex;gap:9px;align-items:baseline;margin-top:2px;min-width:0}
.prow-sub b{font-size:11px;font-weight:700;color:var(--textDim);text-transform:uppercase;
letter-spacing:.05em;flex-shrink:0}
.prow-sub span{font-size:12px;color:var(--textDim);font-variant-numeric:tabular-nums;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow-st{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--textMuted)}
.prow-st s{width:7px;height:7px;border-radius:99px;background:var(--green);text-decoration:none;flex-shrink:0}
.prow-st s.tr{background:#2563EB}
.prow-pr{text-align:right}
.prow-pr b{display:block;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.prow-pr em{font-style:normal;font-size:11px;color:var(--textDim)}
.prow-pr .ask{font-size:13px;font-weight:600;color:var(--textMuted)}
.prow-buy .buy{margin-top:0}
.skel-row{height:70px;border-top:1px solid var(--cardBorder);
background:linear-gradient(90deg,#EFEDE9 25%,#F7F5F2 50%,#EFEDE9 75%);
background-size:400% 100%;animation:sk 1.3s ease-in-out infinite}
.skel-row:first-child{border-top:0}
.grid>*{min-width:0}
.pcard{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);
overflow:hidden;box-shadow:var(--e1);display:flex;flex-direction:column;
transition:box-shadow .15s,border-color .15s}
.pcard:hover{box-shadow:var(--e2)}
.pph{height:168px;background:var(--bgCard);display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden}
.pph img{max-width:88%;max-height:88%;object-fit:contain;display:block}
.pph .nofoto{color:var(--textDim);font-size:12px}
.ptr{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:999px;font-size:11px;
font-weight:600;background:#E7EFF5;color:#35678F}
.pb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.pbr{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.pnm{font-size:13px;font-weight:600;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.psku{font-size:11px;color:var(--textDim);font-variant-numeric:tabular-nums}
.pst{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--textMuted);margin-top:2px}
.pst s{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
.pst b{color:var(--text);font-weight:600}
.ppr{margin-top:auto;padding-top:9px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px 8px;flex-wrap:wrap}
.ppr .lbl{font-size:11px;color:var(--textDim);display:block}
.ppr .val{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ppr .ask{font-size:13px;color:var(--textMuted);font-weight:600}
.ppr .part{font-size:11px;font-weight:600;color:var(--green);background:var(--greenDim);
padding:4px 8px;border-radius:var(--r1);white-space:nowrap}
/* Кнопка корзины — контурная: сплошной оранжевой заливки в интерфейсе не держим. */
.buy{margin-top:10px;display:flex;align-items:center;gap:6px}
.buy-add{flex:1;height:36px;border-radius:var(--r2);border:1px solid var(--accentSolid);
color:var(--accent);font-size:13px;font-weight:600;
display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s}
.buy-add:hover{background:var(--accentDim)}
.buy-add svg{flex-shrink:0}
.buy-q{width:36px;height:36px;border-radius:var(--r2);border:1px solid var(--cardBorder);
color:var(--textMuted);font-size:17px;font-weight:600;display:flex;align-items:center;
justify-content:center;line-height:1;flex-shrink:0;transition:all .15s}
.buy-q:hover{border-color:var(--accentSolid);color:var(--accent)}
.buy-q svg{width:13px;height:13px;display:block}
/* Количество — ПОЛЕ, не надпись: 100 метров кабеля плюсом не набирают.
В покое выглядит как цифра, рамка проявляется под курсором. */
.buy-in{flex:1;min-width:0;height:36px;border-radius:var(--r2);border:1px solid transparent;
background:transparent;text-align:center;font:inherit;font-size:13px;font-weight:700;
color:var(--accent);outline:none;font-variant-numeric:tabular-nums;-moz-appearance:textfield;
transition:border-color .15s,background .15s}
.buy-in::-webkit-outer-spin-button,.buy-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-in:hover{border-color:var(--cardBorder)}
.buy-in:focus{border-color:var(--accentSolid);background:var(--bgCard)}
.buy-un{font-size:11px;color:var(--textDim);flex-shrink:0}
.more{display:flex;justify-content:center;padding:22px 0 0}
.more button{height:40px;padding:0 22px;border-radius:var(--r2);border:1px solid var(--border);
background:var(--bgCard);font-size:13px;font-weight:600;color:var(--text)}
.more button:hover{border-color:var(--accentSolid);color:var(--accent)}
.skel{background:linear-gradient(90deg,#EFEDE9 25%,#F7F5F2 50%,#EFEDE9 75%);
background-size:400% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:var(--r3);height:280px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
/* ── КАСКАД ПОЯВЛЕНИЯ новых плиток/плашек (класс вешает anCascade, снимает animationend).
fill backwards, а не forwards: законченная анимация отпускает transform — иначе он прибит
и ломает подъём .pcard:hover; последний кадр нейтральный, раскладка не сдвигается. */
.an-rise{animation:anRise .24s cubic-bezier(.2,.8,.25,1) backwards}
.an-fade{animation:anFade .24s cubic-bezier(.2,.8,.25,1) backwards}
@keyframes anRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes anFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.an-rise,.an-fade{animation:none}}
.hint{padding:40px 0;text-align:center;color:var(--textMuted);font-size:13px}
.ftr{border-top:1px solid var(--border);margin-top:20px;padding:22px 0 40px;
font-size:12px;color:var(--textDim)}
.ftr .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
.ftr .fl{color:var(--text);font-weight:600;border-bottom:1px solid var(--border)}
.ftr .fl:hover{color:var(--accent);border-color:var(--accentSolid)}
/* Блок разделов над подвалом. Наполняет СЕРВЕР (только на главной): робот с главной не видел
ни одной ссылки на 1497 адресов /c/… из карты сайта — вес не тёк с корня (SEO-аудит 30.08).
Пустым (на прочих страницах) блок не занимает ни пикселя. */
.fcat{border-top:1px solid var(--border);margin-top:20px;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;line-height:1.5}
.fcat:empty{display:none}
/* H1 главной: живой заголовок над блоком каталога, а не спрятанный текст для робота. */
.fcat-h1{margin:24px 0 0;font-size:15px;font-weight:600;line-height:1.45;color:var(--textMuted);max-width:52ch}
.fcat .fcat-t{font-weight:600}
.fcat a{color:var(--text);border-bottom:1px solid var(--border)}
.fcat a:hover{color:var(--accent);border-color:var(--accentSolid)}
/* ═══ УЗКИЙ ЭКРАН ═══════════════════════════════════════════════════════════
Раскладка в три яруса: логотип с действиями, поле во всю ширину, фильтры.
На 375 px строка в один ряд не влезала — документ уезжал за край на 67 px,
а под ввод в поле оставалось 117 px из 343: паддинги под иконки съедали
остальное. ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
.bar{gap:8px;padding:12px 16px 10px;max-width:none}
.bar-l{flex:1 1 100%;min-width:0!important;flex-wrap:wrap;gap:6px;order:1}
.sbox{flex:1 1 100%;min-width:0;order:2}
.bar-r{flex:1 1 100%;min-width:0!important;order:3;justify-content:stretch}
.bar-r .cta{flex:1;justify-content:center}
.logo{margin-right:auto}
.logo b{font-size:15px}
/* 16px — иначе iOS зумит страницу при фокусе в поле */
#q{padding:0 120px 0 44px;font-size:16px}
.lupa{left:14px}
/* в поле оставляем очистку и камеру; закладки и кабинет прячем, пока для них
нет отдельного мобильного места. Корзина стоит третьим ярусом рядом с
призывом — на узком экране от неё нужен счётчик, сумма съела бы полстроки. */
#a-lk,.inact s{display:none}
.cartw{border:1px solid var(--border);background:var(--bgSolid);padding:0 11px;height:44px}
/* Медиазапрос НЕ добавляет специфичности: правило .cartw.has .cartw-t (три класса)
перебивало бы простое .cartw-t, и сумма лезла бы в узкую строку. Гасим тем же весом. */
.cartw-t,.cartw.has .cartw-t{display:none}
.bar-r{gap:6px}
.bar-r .hlink{padding:0 8px;font-size:13px}
.bar-r .cta{padding:0 12px;font-size:13px}
/* Строка корзины на узком экране: степпер и сумма в один ряд не помещались
и РАСПИРАЛИ панель — сумма уезжала за край экрана. Переносим сумму вниз. */
.c-row{padding:10px;gap:10px}
.crow-ph{width:48px;height:48px}
.crow-bt{flex-wrap:wrap;row-gap:8px}
.crow-s{margin-left:auto;text-align:right}
.cartp-b{padding:8px 12px 12px}
.csum-tot b{font-size:19px}
.bar-r .cta{height:44px}
.cartp{width:100%}
.quick{max-width:none;padding:0 16px 12px;flex-wrap:nowrap;overflow-x:auto;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.quick::-webkit-scrollbar{display:none}
/* ряд брендов на узком экране НЕ обрезаем, а даём смахивать пальцем:
иначе из 60 плашек видно две с половиной и добраться до остальных нельзя */
.brandrow{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.brandrow::-webkit-scrollbar{display:none}
.cf{--cf-card:clamp(200px,62vw,260px);--cf-body:80px}
.pane-l{width:132px}
.panes{min-height:260px}
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
/* строка на узком экране: наличие прячем (оно есть в карточке), корзина
переезжает во второй ярус под имя — пять колонок в 360 px не живут */
.prow{grid-template-columns:44px minmax(0,1fr) auto;
grid-template-areas:"ph m pr" "ph buy buy";row-gap:7px;gap:10px;padding:9px 12px}
.prow-ph{grid-area:ph;width:44px;height:44px}
.prow-m{grid-area:m}
.prow-st{display:none}
.prow-pr{grid-area:pr}
.prow-buy{grid-area:buy;justify-self:start;min-width:170px}
.pph{height:132px}
.res-h{gap:6px}
.ftr .wrap{gap:10px}
}
/* На телефоне слово рядом со знаком не оставляет места двум фильтрам в одну линию
(34 + 106 + 133 против 343). Знак сам по себе — привычная кнопка «на главную»,
на планшете и шире слово остаётся. */
@media (max-width:480px){
.logo b{display:none}
.logo{margin-right:2px}
}
/* ═══ КАРТОЧКА — КОНЦЕПТ E («ОнлайнТрейд, но лучше», принят 20.08) ═════════
Скелет эталона: миниатюры-лента · липкая сцена · центр · липкая панель
покупки · липкая нижняя полоса. Начинка наша: свежесть вместо рейтинга,
полки складов вместо ПВЗ, «Запросить счёт» вместо «1 клик». */
/* скелет карточки: строка шапки + три колонки раскладки */
.e-skel{display:grid;grid-template-columns:minmax(280px,450px) minmax(0,1fr) 300px;gap:16px}
.e-skel .sk{border-radius:var(--r3);background:linear-gradient(90deg,#EFEDE9 25%,#F7F5F2 50%,#EFEDE9 75%);
background-size:400% 100%;animation:sk 1.3s ease-in-out infinite}
.e-skel .h{grid-column:1/-1;height:64px;border-radius:var(--r2)}
.e-skel .g1{aspect-ratio:1}
.e-skel .g2{height:420px}
.e-skel .g3{height:460px}
@media (max-width:760px){.e-skel{grid-template-columns:1fr}.e-skel .g2,.e-skel .g3{height:220px}}
.e-head h1{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.2;margin:6px 0 8px;max-width:900px}
.e-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--textDim);margin-bottom:16px}
.e-meta .brand{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--textMuted);
border:1px solid var(--border);border-radius:999px;padding:4px 10px;cursor:pointer;transition:all .15s}
.e-meta .brand:hover{color:var(--accent);border-color:var(--accentSolid)}
.e-meta .sku{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.e-meta .cp{color:var(--textMuted);font-weight:600;cursor:pointer;transition:color .15s}
.e-meta .cp:hover{color:var(--accent)}
.e-meta .fresh{display:flex;align-items:center;gap:6px;color:var(--green);font-weight:600}
.e-meta .fresh i{width:7px;height:7px;border-radius:99px;background:var(--green);font-style:normal}
.e-meta .fresh.old i{background:#D97706}
/* Страница карточки: широкая main | панель покупки, липкая НА ВСЮ высоту main
(приём B&H/Apple — цена и «В корзину» под рукой до самых «Похожих»).
Фото не прилипает: ему незачем, и под шапкой оно резалось. */
.e-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.e-hero{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:16px;align-items:start}
.e-main{min-width:0}
.e-thumbs{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:10px}
.e-thumbs button{width:56px;height:56px;background:#fff;border:1px solid var(--cardBorder);border-radius:10px;
display:flex;align-items:center;justify-content:center;overflow:hidden}
.e-thumbs button.on{border-color:var(--accentSolid)}
.e-thumbs img{width:78%;height:78%;object-fit:contain}
/* Кадр — квадрат; поля срезаны канвой, товар растянут до кадра (решение 20.08) */
.e-stage{background:#fff;border:1px solid var(--cardBorder);border-radius:var(--r3);aspect-ratio:1;
display:flex;align-items:center;justify-content:center;padding:8%;overflow:hidden}
.e-stage.zoom{cursor:zoom-in}
.e-stage img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .2s}
.e-stage img.ready{opacity:1}
.e-stage .no{color:var(--textDim);font-size:13px}
.e-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.e-key{background:#fff;border:1px solid var(--cardBorder);border-radius:12px;padding:11px 12px}
.e-key b{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-key span{display:block;margin-top:2px;font-size:11px;color:var(--textDim);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-sec{background:#fff;border:1px solid var(--cardBorder);border-radius:var(--r3);padding:16px 20px;margin-bottom:12px}
.e-sec h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim);margin:0 0 12px}
.e-desc{font-size:13px;line-height:1.65;color:var(--textMuted);margin:0}
.e-bar{display:grid;grid-template-columns:170px minmax(0,1fr) 74px;gap:12px;align-items:center;padding:6px 0;font-size:13px}
.e-bar .k{color:var(--textMuted)}
.e-track{height:6px;border-radius:99px;background:#EFECE6;overflow:hidden}
.e-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#22A455,#15803D)}
.e-bar .v{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;text-align:right}
.e-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.e-chip{font-size:12px;font-weight:600;border:1px solid var(--cardBorder);border-radius:999px;padding:5px 11px;color:var(--textMuted)}
.e-chip.yes{border-color:rgba(21,128,61,.35);color:var(--green);background:var(--greenDim)}
.e-srow{display:flex;align-items:baseline;font-size:13px;padding:4.5px 0;break-inside:avoid}
.e-srow .k{color:var(--textMuted);flex-shrink:0;max-width:58%}
.e-srow .dots{flex:1;border-bottom:1.5px dotted #CFC9C0;margin:0 7px;transform:translateY(-3px)}
.e-srow .v{font-variant-numeric:tabular-nums;font-size:13px;font-weight:400;text-align:right;min-width:0;word-break:break-word}
.e-cols{columns:2;column-gap:40px}
/* длинное значение не воюет с отточием — уходит под ключ отдельной строкой */
.e-srow.long{display:block}
.e-srow.long .v{display:block;text-align:left;margin-top:3px;word-break:break-word}
.e-full{margin-top:16px}
/* Описание: лид обычным текстом 65–75ch, список производителя двумя колонками, Q&A тихо */
.e-about{margin-top:16px}
.e-about .lead{font-size:15px;line-height:1.7;color:var(--text);margin:0 0 8px;max-width:76ch}
.e-about h4{margin:16px 0 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--textMuted)}
.e-about .vend{font-size:13px;line-height:1.65;color:var(--textMuted);margin:0 0 8px;max-width:76ch}
.e-about .vlist{margin:0;padding-left:18px;columns:2;column-gap:40px;font-size:13px;line-height:1.6;color:var(--textMuted)}
.e-about .vlist li{break-inside:avoid;padding:1px 0}
.e-about .faq{margin:18px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.e-about .faq dt{font-size:13px;font-weight:700;margin-bottom:4px}
.e-about .faq dd{margin:0;font-size:13px;line-height:1.55;color:var(--textMuted)}
@media (max-width:900px){.e-about .vlist{columns:1}.e-about .faq{grid-template-columns:1fr}}
.e-groups{columns:2;column-gap:44px}
.e-grp{break-inside:avoid;margin-bottom:16px}
.e-grp h4{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--textMuted);
padding-bottom:6px;border-bottom:1px solid var(--cardBorder)}
@media (max-width:1120px){.e-groups{columns:2}}
.e-cols3{columns:2;column-gap:44px}
.e-buy{position:sticky;top:96px;background:#fff;border:1px solid var(--cardBorder);border-radius:var(--r3);padding:20px}
.e-price{white-space:nowrap}
.e-price{font-size:29px;font-weight:800;letter-spacing:-.7px;line-height:1}
.e-price i{font-style:normal;display:block;font-size:12px;color:var(--textDim);font-weight:500;margin-top:5px}
.e-partchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green);
background:var(--greenDim);padding:5px 10px;border-radius:var(--r1);margin-top:9px}
.e-partlink{font-size:12px;color:var(--textDim);margin-top:5px}
.e-partlink button{color:var(--accent);font-weight:600}
.e-shelves{margin:16px 0 4px;border-top:1px solid var(--cardBorder);padding-top:10px}
.e-shelves h4{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim)}
.e-sh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px;
color:var(--textMuted);padding:7px 0;border-bottom:1px solid var(--cardBorder)}
.e-sh:last-child{border-bottom:0}
.e-sh .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-sh .l{display:flex;gap:7px;align-items:center}
.e-sh i{width:7px;height:7px;border-radius:99px;background:var(--green);font-style:normal;flex-shrink:0}
.e-sh i.tr{background:#2563EB}
.e-sh i.gr{background:#8A93A3}
.e-sh b{color:var(--text);font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}
.e-age{font-size:12px;color:var(--textDim);margin-top:8px;line-height:1.45}
.e-calc{display:flex;gap:8px;align-items:center;margin:14px 0 12px}
.e-calc .it-step{flex:0 0 128px}
.e-calc .un{font-size:12px;color:var(--textDim)}
.e-sum{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.e-sum i{font-style:normal;font-size:11px;color:var(--textDim);white-space:nowrap}
.e-sum b{font-size:17px;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.2px;white-space:nowrap}
.e-buy .it-cart{width:100%;justify-content:center}
.e-cta2{width:100%;height:38px;border-radius:var(--r2);border:1px solid var(--border);color:var(--textMuted);
font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;
transition:color .15s,border-color .15s}
.e-cta2:hover{color:var(--text);border-color:var(--textDim)}
.e-bridge{display:block;width:100%;text-align:center;margin-top:9px;font-size:12px;color:var(--textMuted);
transition:color .15s}
.e-bridge b{color:var(--accent);font-weight:600}
.e-bridge:hover b{text-decoration:underline}
.e-docs{margin-top:13px;border-top:1px solid var(--cardBorder);padding-top:9px}
.e-docs2 .e-doc{font-size:13px;padding:6px 0;border-top:1px solid #F1EEE9}
.e-docs2 .e-doc:first-child{border-top:0}
.seen-box .e-rel{display:flex;flex-wrap:wrap}
.seen-box .e-rc{width:176px;flex:0 0 176px}
.e-doc{display:flex;gap:8px;align-items:flex-start;font-size:12px;padding:5px 0;color:var(--textMuted);line-height:1.35}
.e-doc svg{margin-top:1px}
.e-doc span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.e-doc:hover{color:var(--accent)}
.e-doc svg{color:var(--accent);flex-shrink:0}
.e-trust{margin-top:11px;font-size:12px;line-height:1.55;color:var(--textDim);background:var(--page);
border-radius:var(--r2);padding:9px 11px}
.e-rel{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pnm,.prow-nm{display:block;color:inherit}
.ssr{max-width:1180px;margin:0 auto;padding:20px;font-size:14px;line-height:1.6}
.ssr table{border-collapse:collapse;font-size:13px}
.ssr th{text-align:left;font-weight:500;color:var(--textMuted);padding:3px 14px 3px 0}
/* SEO-страницы новостей (/news/, /news/) и блоки «Новости бренда» на /b/ и /p/. Заметка — в разметке
читалки (.art*), сюда только то, чего у читалки нет: ссылки вместо кнопок и список ленты. */
.ssr-news h1{font-family:var(--serif);font-size:34px;line-height:1.15;margin:8px 0 6px}
.ssr-news .ssr-lead{color:var(--textMuted);max-width:760px}
.ssr-news-list{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ssr-news-list article{border:1px solid var(--cardBorder);border-radius:10px;padding:14px 16px;height:100%}
.ssr-news-list .m{font-size:12px;color:var(--textMuted);margin:0 0 6px}
.ssr-news-list .m a{color:var(--text);font-weight:600}
.ssr-news-list h2{font-family:var(--serif);font-size:17px;line-height:1.35;margin:0 0 8px}
.ssr-news-list p{margin:0;font-size:13px;color:var(--textDim)}
.ssr-news-list a:hover,.ssr-art .art-mast a:hover,.ssr-art .art-also .h a:hover,.ssr-items a:hover,.ssr-news-brand a:hover{text-decoration:underline}
.ssr-art .art-cat{color:var(--textDim);border:1px solid var(--cardBorder)}
.ssr-news-goods{margin-top:26px}
.ssr-news-goods h2{font-family:var(--serif);font-size:20px;margin:0 0 10px}
.ssr-items{list-style:none;padding:0;margin:0}
.ssr-items li{padding:6px 0;border-bottom:1px solid var(--cardBorder);font-size:14px}
.ssr-items li span{color:var(--textMuted);font-size:12px;margin-left:8px}
.ssr-news-brand{margin:0 0 12px;padding-left:18px}
.ssr-news-brand time{color:var(--textMuted)}
/* закладки: флажок на плитке (появляется по ховеру или когда отмечен), в строке, в карточке */
.pph{position:relative}
.pbmk{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.92);
border:1px solid var(--cardBorder);display:flex;align-items:center;justify-content:center;color:var(--textDim);
opacity:0;transition:opacity .15s,color .15s,border-color .15s;z-index:2}
.pcard:hover .pbmk,.pbmk.on{opacity:1}
.pbmk.on{color:var(--accent);border-color:var(--accentSolid)}
.pbmk.on svg,.rbmk.on svg,.e-meta .bmk.on svg{fill:currentColor}
@media (hover:none){.pbmk{opacity:1}}
.prow-buy{display:flex;align-items:center;gap:6px}
.rbmk{width:34px;height:36px;border-radius:var(--r2);border:1px solid var(--cardBorder);display:flex;align-items:center;
justify-content:center;color:var(--textDim);flex-shrink:0;transition:color .15s,border-color .15s}
.rbmk:hover{color:var(--accent)}
.rbmk.on{color:var(--accent);border-color:var(--accentSolid)}
.e-meta .bmk{display:inline-flex;align-items:center;gap:6px;color:var(--textMuted);font-weight:600;cursor:pointer;transition:color .15s}
.e-meta .bmk:hover,.e-meta .bmk.on{color:var(--accent)}
.bmk-add{height:30px;padding:0 12px;border-radius:var(--r2);border:1px solid var(--accentSolid);color:var(--accent);
font-size:12px;font-weight:600;white-space:nowrap;transition:background .15s}
.bmk-add:hover{background:var(--accentDim)}
.bmk-add.ok{border-color:var(--green);color:var(--green)}
/* «недавно смотрели» на главной — как секция брендов, но с плитками похожих */
.seen-home{max-width:1180px;margin:18px auto 0;padding:16px 20px}
.seen-home h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim);margin:0 0 12px}
.e-rc{color:inherit;background:#fff;border:1px solid var(--cardBorder);border-radius:12px;padding:10px;cursor:pointer;transition:box-shadow .15s}
.e-rc:hover{box-shadow:var(--e2)}
.e-rc .ph{height:86px;display:flex;align-items:center;justify-content:center;margin-bottom:7px}
.e-rc img{height:100%;width:auto;max-width:100%;object-fit:contain;opacity:0;transition:opacity .25s}
.e-rc img.ready{opacity:1}
.e-rc .nf{font-size:10px;color:var(--textDim)}
.e-rc .nm{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.e-rc .pr{font-size:13px;font-weight:800;margin-top:5px}
.e-rc .st{font-size:11px;color:var(--green);margin-top:2px}
/* ── БЕГУЩАЯ СТРОКА: похожее в этом классе, под плитками в карточке товара ─────
Владелец 27.08: вариант «Тихая», сперва на главной, затем перенесена в карточку.
Без оконтовки, графитом, при наведении замирает.
Оконтовки нет по условию — но обрыв имени на середине слова выглядит поломкой,
поэтому края гасит МАСКА: имя уходит в землю страницы, а не упирается в границу.
🪤 Наведение ставит анимацию на ПАУЗУ, а не на нулевую длительность: нулевая
доигрывает круг до конца, и строка дёргается на месте.
🪤 Гасим СОСЕДЕЙ, а не подсвечиваем наведённое: иначе при каждом движении мыши
мигает вся строка. */
.tk{position:relative;margin:16px 0 2px;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.tk-track{display:flex;width:max-content;will-change:transform;animation:tkrun 60s linear infinite}
@keyframes tkrun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tk:hover .tk-track{animation-play-state:paused}
.tk-row{display:flex;align-items:center;flex-shrink:0}
.tk-i{white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--text);
background:none;border:0;padding:0;cursor:pointer;font-family:inherit;line-height:1.5;
transition:color .18s ease,opacity .18s ease}
.tk:hover .tk-i{opacity:.38}
.tk:hover .tk-i:hover{opacity:1;color:var(--accent)}
.tk-i:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.tk-s{flex-shrink:0;width:44px;text-align:center;color:var(--textDim);opacity:.5;font-size:13px}
/* Просили меньше движения — строка перестаёт быть лентой и становится обычным списком:
имена переносятся по строкам и видны ВСЕ сразу.
🪤 Прежняя редакция ставила ленту на паузу и включала overflow-x:auto. Это выглядело
поломкой: марки-кью замирал на первом кадре, читатель видел три-четыре имени из
четырнадцати, а остальные надо было тащить пальцем или полосой прокрутки. «Меньше
движения» не значит «меньше содержимого» — поэтому здесь не пауза, а СМЕНА РАСКЛАДКИ.
Второй круг имён (он существует только ради бесшовного шва) при этом убираем, иначе
каждое имя показалось бы дважды. */
/* Просили меньше движения — строка ОСТАЁТСЯ строкой и продолжает обновляться, но перестаёт
ЕХАТЬ: непрерывного скольжения нет, имена сменяются шагом (см. tickerFrom, ветка calm).
🪤 Две прежние редакции были неверны, каждая по-своему:
1) `animation-play-state:paused` + overflow-x:auto — лента замирала на первом кадре, из
четырнадцати имён читатель видел три-четыре, остальные надо было тащить полосой;
2) раскладка в текстовый поток — имена стали статичной простынёй и строка как приём исчезла
(владелец 28.08: «бегущая строка не появилась, просто надписи стали статичными»).
Верное прочтение правила: убирать НЕПРЕРЫВНОЕ ДВИЖЕНИЕ, а не обновление содержимого.
Второй круг имён под шаговым режимом не нужен — он существует только ради бесшовного шва. */
@media (prefers-reduced-motion:reduce){
.tk-track{animation:none;will-change:auto;transition:none}
.tk-row[aria-hidden="true"]{display:none}
.tk:hover .tk-i{opacity:1} /* гасить соседей незачем: строка больше не едет */
}
/* липкая нижняя полоса покупки */
.e-stick{position:fixed;left:0;right:0;bottom:0;z-index:150;background:#fff;border-top:1px solid var(--cardBorder);
box-shadow:0 -6px 18px -8px rgba(26,34,49,.15)}
.e-stick .in{max-width:1340px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px}
.e-stick .ph{width:44px;height:44px;border:1px solid var(--cardBorder);border-radius:9px;display:flex;
align-items:center;justify-content:center;overflow:hidden;background:#fff;flex-shrink:0}
.e-stick .ph img{max-width:86%;max-height:86%;object-fit:contain}
.e-stick .nm{font-size:13px;font-weight:600;max-width:430px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-stick .sk{font-size:11px;color:var(--textDim);font-variant-numeric:tabular-nums}
.e-stick .pr{margin-left:auto;font-size:19px;font-weight:800;white-space:nowrap}
.e-stick .it-step{width:128px}
.e-stick .it-cart{height:40px;padding:0 20px}
@media (max-width:1120px){
.e-grid{grid-template-columns:minmax(0,1fr) 300px}
}
/* ⭐ ПАЛЬЦЫ, А НЕ КУРСОР. Замер 27.08 на 375 px: 86 кнопок ниже 40 px — чипы разделов 32,
выпадающие «Категория/Бренд» 34, иконки шапки 36. Рекомендации Apple и Google сходятся на
44-48 px, и дело не в формальности: по мелкой цели промахиваются, промах на витрине — это
ушедший в другой раздел человек. Высоту поднимаем ТОЛЬКО на телефоне: на десктопе плотность
осознанная и мышью попадают точно. */
@media (max-width:760px){
.quick button{height:40px;padding:0 14px;font-size:13.5px}
.chip{height:36px;padding:0 12px}
.bar .pill,.bar .ico,.bar .logo{min-height:44px;display:inline-flex;align-items:center}
.ckbar-b button{min-height:44px}
.fl,.finfo a{display:inline-block;padding:4px 0}
}
@media (max-width:760px){
.e-grid,.e-hero{grid-template-columns:1fr}
.e-buy{position:static}
.e-cols,.e-cols3,.e-groups{columns:1}
.e-keys{grid-template-columns:repeat(2,1fr)}
.e-rel{grid-template-columns:repeat(2,1fr)}
/* на телефоне полоса несёт только суть: фото · цена · кнопка */
.e-stick .sk,.e-stick .it-step,.e-stick .nm{display:none}
.e-stick .it-cart{flex-shrink:0;white-space:nowrap}
.e-head h1{font-size:20px}
}
/* ── «Главное» — спек-строки с иконками (вариант 1, решение владельца 20.08):
цифра крупно, подпись тихо, возможности — колонки галочек, не пилюли ── */
.ef1{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.ef1 .row{display:flex;gap:11px;align-items:center;padding:8px 0}
.ef1 .ic{width:34px;height:34px;border-radius:10px;background:var(--page);display:flex;align-items:center;
justify-content:center;color:var(--textMuted);flex-shrink:0}
.ef1 b{display:block;font-size:14px;font-weight:700;letter-spacing:-.2px;line-height:1.2}
.ef1 span{display:block;font-size:11px;color:var(--textDim);margin-top:1px}
.ef1x{margin-top:10px;border-top:1px solid var(--cardBorder);padding-top:11px;
display:grid;grid-template-columns:1fr 1fr;gap:3px 22px}
.e-sec{container-type:inline-size}
@container (max-width:380px){.ef1x{grid-template-columns:1fr}}
.ef1x .c{display:flex;gap:8px;align-items:center;font-size:13px;padding:3.5px 0}
.ef1x .c svg{flex-shrink:0}
.ef1x .yes{color:var(--text)}
.ef1x .yes svg{color:var(--green)}
.ef1x .no{color:var(--textDim)}
.ef1x .no svg{color:#C9CFD8}
@media (max-width:760px){.ef1,.ef1x{grid-template-columns:1fr}}
/* ── «О компании»: лис из «Нашего вайба» — БЕЗ рамки, растворяется в странице
маской и парит; текст слева, подпись директора. ── */
/* ── ПОЛИТИКА: сплошной документ, одна колонка (владелец 28.08) ──
Ширина ограничена в ch, а не в пикселях: мера читаемости — длина строки в знаках. */
.pdoc{max-width:76ch;margin:0 auto;padding:6px 0 44px}
.pdoc h1{font-size:32px;font-weight:700;letter-spacing:-.6px;line-height:1.16;margin:0 0 10px}
.pdoc .cap{font-size:12px;color:var(--textDim);margin:0 0 30px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.pdoc h2{font-size:17px;font-weight:600;letter-spacing:-.1px;margin:30px 0 10px}
.pdoc p{font-size:14px;line-height:1.68;margin:0 0 10px}
.pdoc p.li{padding-left:16px}
.pdoc a{color:var(--text);font-weight:600;border-bottom:1px solid var(--border)}
.pdoc a:hover{border-bottom-color:var(--accent)}
.pdoc .end{margin-top:34px;padding-top:18px;border-top:1px solid var(--border);font-size:13px;color:var(--textMuted)}
@media(max-width:760px){.pdoc h1{font-size:25px}.pdoc h2{font-size:15px}}
.abfox{position:relative;min-height:500px;display:flex;align-items:center;margin:4px 0 22px} /* под квадратную картину */
/* Картина — лис тушью в энсо (владелец 21.08 22:5x: «новая картинка в hero О компании»). Исходник
ChatGPT 1774×887 (версия 22:46, лис слева, смотрит вправо) обрезан до левой части с лисом (920×887) и ВЫРОВНЕН ПО ТОНУ бумаги к цвету
страницы (ffmpeg colorlevels: бумага #EEE9E0 → #F6F5F2) — арт лежит прямо на земле, край невидим,
как было с fox-poly. Мягкие фейды по краям остаются. Прежние fox-poly/fox-grey — в public на память. */
.abfox .art{position:absolute;left:0;top:50%;transform:translateY(-50%); /* картина СЛЕВА, текст справа (владелец 21.08 22:5x) */
width:min(44%,500px);aspect-ratio:1/1;background:url(/fox-enso.jpg) center/cover no-repeat; /* «О компании» = лис в энсо (владелец 23.08: «о компании банер на этот поменяй»; ChatGPT 1774×887 13:17 → квадрат 980×980 вокруг чернил, поля 15–16 % — шире 12 % фейда маски); остров island-sumi.jpg — в запасе */
/* края растворяем шире (12 %): земля сверху подсвечена слоем глубины и чуть светлее ровного листа картины —
узкий фейд оставлял угадываемый прямоугольник (владелец 21.08 23:5x: «сделай hero на новом фоне») */
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%),
linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%),
linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-composite:intersect;
pointer-events:none}
.abfox .tx{position:relative;z-index:2;max-width:530px;padding:26px 0;margin-left:auto} /* текст — в правой половине, картина слева */
/* наведение на картину — медленный рост на 4 % (владелец 22.08 00:2x: «увеличение при наведении»): только десктоп с мышью,
transform сохраняет вертикальное центрирование; reduced-motion — без движения */
@media (hover:hover) and (min-width:901px){
.abfox .art{pointer-events:auto;transition:transform .9s cubic-bezier(.2,.8,.25,1);transform-origin:50% 55%}
.abfox .art:hover{transform:translateY(-50%) scale(1.04)}
}
@media (prefers-reduced-motion:reduce){.abfox .art{transition:none}.abfox .art:hover{transform:translateY(-50%)}}
.abfox .art .sp{position:absolute;border-radius:50%;background:rgb(219,123,68);box-shadow:0 0 4px 1px rgba(219,123,68,.5);opacity:.35;
animation:spark var(--d,3.4s) ease-in-out var(--o,0s) infinite;pointer-events:none}
@keyframes spark{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}} /* медленнее и спокойнее: период 5–8 с (владелец: «частота тоже меньше») */
@media (prefers-reduced-motion:reduce){.abfox .art .sp{animation:none;opacity:.7}}
.abfox h1{font-size:40px;font-weight:800;letter-spacing:-1.2px;line-height:1.1;margin:0 0 18px}
.abfox h1 i{font-style:normal;color:var(--accent)}
.abfox p{font-size:15px;line-height:1.7;color:var(--textMuted);margin:0 0 24px;max-width:470px}
.absig{display:flex;gap:12px;align-items:center;border-left:2px solid var(--accentSolid);padding-left:12px}
.absig b{display:block;font-size:14px}
.absig span{display:block;font-size:12px;color:var(--textDim);margin-top:1px}
/* ── РЕКВИЗИТЫ И СКЛАД (#contacts; владелец 21.08 23:1x: «самурая оставим для реквизитов / контактов склада»):
та же композиция, что у лисы, — картина слева (самурай тушью, samurai-sumi.jpg: ChatGPT 1942×809, левая часть 940×809,
бумага #DEDDDB подтянута к цвету страницы lutrgb ×1.108), справа заголовок и лид; ниже — реквизиты с копированием
в один клик (для договора и счёта) и карточки склада/офиса со старого сайта effort-group.ru/contacts. */
.abfox.samurai .art{background:url(/samurai-sumi.jpg) center/cover no-repeat;aspect-ratio:940/809;width:min(52%,600px)}
.abfox.enso .art{background:url(/fox-sumi.jpg) center/cover no-repeat;aspect-ratio:920/887;width:min(52%,580px)} /* «Контакты»: лис в энсо (прежний герой «О компании»); остров (island-sumi.jpg, ChatGPT 1673×940 → левая часть 921×940) ушёл в «О компании» */
.abfox.mount .art{background:url(/mount-sumi.jpg) center/cover no-repeat;aspect-ratio:887/887;width:min(52%,590px)} /* «Контакты»: горы, путник, красное солнце (ChatGPT 1774x887 → левая часть 887x887) */
.abfox.sky .art{background:url(/sky-sumi.jpg) center/cover no-repeat;aspect-ratio:887/887;width:min(52%,590px);left:0} /* обрыв — ровно по левому краю контента, без выноса −30px (владелец 22.08 01:0x) */ /* «Контакты»: обрыв и прорезь неба (ChatGPT 1774x887 → левая часть 887x887) */
.abfox.wing .art{background:url(/wing-sumi.jpg) center/cover no-repeat;aspect-ratio:887/887;width:min(52%,590px);left:0} /* «Реквизиты»: человек, чья тень — птица (ChatGPT 1774x887 → левая часть 887x887) */
/* 🪤 ?v=2 — НЕ УКРАШЕНИЕ. Картинки отдаются с cache-control: public, max-age=86400, то есть
браузер держит их СУТКИ. Заменив файл по тому же адресу, мы меняем только то, что лежит на
диске: у всех, кто уже был на сайте, остаётся старый рисунок, и увидят они новый лишь через
день. Владелец 28.08 так и написал: «номер вижу, но картинка старая».
ПРАВИЛО: подменил ассет по существующему адресу — подними версию в ссылке. */
.abfox.cart .art{background:url(/fox-cart.jpg?v=2) center/cover no-repeat;aspect-ratio:680/456;width:min(52%,600px);left:0} /* «Реквизиты»: лис везёт тележку камер (владелец 28.08). Исходник ChatGPT 1536×1024, бумага (248,244,241).
Кадр СОБРАН НА ХОЛСТЕ, а не вырезан: чернила начинались на 16-м пикселе, и обычный crop прижал бы тележку
к краю — поля 13 % досыпаны бумагой со всех сторон (чернила 776×512 → кадр 976×644).
Тон приведён к (239,239,237) — земля под героем на этой странице, как у прочих ([[art_tone_match_local_ground]]);
профиль поперёк ровный, ступени «внутри светлее — снаружи темнее» нет. */
.abfox.mirror .art{background:url(/fox-water.jpg) center/cover no-repeat;aspect-ratio:1032/1188;width:min(44%,510px);left:0} /* кадр 16:48 стоячий (мазок-дуга сверху, лис, отражение снизу) — ширина подобрана так, чтобы ЧЕРНИЛА были ~390 px, вровень с энсо (370) и лисом на следах; при 500 px картинка выпирала бы */ /* «Реквизиты»: лис над своим отражением в воде (владелец 23.08 16:3x). Кадр от bbox чернил, поля 13 % со всех сторон, тон (239,239,237) — как у прочих героев ([[art_tone_match_local_ground]]). Крылья-тень (.wing) и самурай (.samurai) — в запасе */
/* «Контакты» = лис оборачивается на свои следы (владелец 23.08: «используем его для контактов»).
Исходник ChatGPT на #F6F5F2 (цвет страницы) дочищен локально: фон выровнен в ровный #F6F5F2, крупные оранжевые
кляксы сняты, тень под лапами облегчена — `Downloads\fox-tracks-F6F5F2.png` 1983×793.
🪤 Первый заход клал кадр во ВСЮ ширину блока (2.5:1): цепочка следов тянулась через весь герой и лезла под
телефон и почту — владелец: «сделай правильно и сократи количество следов». Кадр обрезан до 1300×793 —
лис и ЧЕТЫРЕ ближние пары отпечатков (дальше по кадру их было 8 плотных + бледный хвост), слот теперь как
у прочих героев: картина слева по краю контента, текст справа. Рамка кадра подтянута по чернилам
(1280×610 из области 20,93–1300,703) — лис держит 79 % высоты, иначе в широком кадре он мельчал.
23.08 16:0x владелец прислал ПРАВИЛЬНЫЙ кадр (лис крупнее, следов меньше) — пересобран из источника 1672×941:
рамка считается ОТ ЧЕРНИЛ, поля добраны бумагой до 12 % с трёх сторон (весь запас по ширине отдан ЛЕВОМУ краю,
там лис) + вернули СТАНДАРТНЫЕ фейды 12 % (узкие 5–6 % не растворяли край).
⭐ Тон бумаги подогнан НЕ к #F6F5F2, а к ЗЕМЛЕ ПОД ЭТИМ ГЕРОЕМ — (239,239,237): слой глубины (body::before
темнит к углам) держит здесь 236–241, и кадр на 246 читался светлым прямоугольником даже сквозь фейд.
Замер после правки: профиль поперёк героя ровный 237–241, ступени нет. Справа фейд с 86 % — следы тают.
Прежние герои sky/mount/enso — в запасе. */
.abfox.tracks{min-height:430px}
.abfox.tracks .art{left:0;width:min(58%,660px);aspect-ratio:1280/610;background:url(/fox-tracks.jpg) center/cover no-repeat;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%),
linear-gradient(90deg,transparent 0,#000 12%,#000 86%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%),
linear-gradient(90deg,transparent 0,#000 12%,#000 86%,transparent 100%);
mask-composite:intersect}
.ct-hero-ln{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:2px}
.ct-hero-ln a{font-size:15px;font-weight:700;color:var(--text)}
.ct-hero-ln a:hover{color:var(--accent)}
.ct-hero-ln a small{display:block;font-size:11px;font-weight:500;color:var(--textDim)}
.ftr .finfo{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ct-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start;margin-top:14px}
.ct-col{display:flex;flex-direction:column;gap:16px}
.rq-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.rq-h h3{margin:0}
.rq-all{height:32px;padding:0 12px;border-radius:var(--r2);border:1px solid var(--accentSolid);color:var(--accent);font-size:12.5px;font-weight:600;white-space:nowrap;transition:background .15s}
.rq-all:hover{background:var(--accentDim)}
.rq-all.ok{border-color:var(--green);color:var(--green);background:var(--greenDim)}
.rq-row{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--cardBorder)}
.rq-row:last-child{border-bottom:0}
.rq-k{font-size:12px;color:var(--textMuted)}
.rq-v{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;overflow-wrap:anywhere;user-select:all}
.rq-v small{display:block;font-weight:400;color:var(--textDim);font-size:12px;margin-top:2px}
.rq-c{font-size:12px;color:var(--textDim);white-space:nowrap;padding:2px 6px;border-radius:6px;transition:color .15s,background .15s}
.rq-c:hover{color:var(--accent);background:var(--accentDim)}
.rq-c.ok{color:var(--green)}
.ct-card p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--textMuted)}
.ct-card p b{color:var(--text);font-weight:600}
.ct-card .ln{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.ct-card .ln a{font-size:13px;font-weight:600;color:var(--text)}
.ct-card .ln a:hover{color:var(--accent)}
.ct-card .ln a.ext:after{content:' ↗';color:var(--textDim);font-weight:500}
.ct-how{margin-top:10px;padding:12px 14px;background:var(--page);border:1px solid var(--cardBorder);border-radius:var(--r2);font-size:12.5px;line-height:1.5;color:var(--textMuted)}
/* Заголовок блока филиалов — той же меры, что «География» в «О компании»: это один и тот же
список офисов, и разная типографика читалась бы как два разных факта. */
.ct-fh{display:flex;align-items:baseline;gap:10px;padding:22px 2px 12px;flex-wrap:wrap}
.ct-fh h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px}
.ct-fh span{font-size:12px;color:var(--textMuted)}
.ct-how b{color:var(--text);font-weight:600}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr}.rq-row{grid-template-columns:1fr;row-gap:2px}.rq-row .rq-k{grid-column:1/-1}}
/* ── ГЕОГРАФИЯ (владелец 21.08 23:0x: «команда 100+, 5 городов, карту ниже»): слева факты компании
(статичные — это факты владельца, не данные матрицы), справа карта России тушью в стиле лиса
(свой SVG, без внешних карт: грузится мгновенно, читается как часть картины), ниже — офисы
с адресами и телефонами со старого сайта effort-group.ru/contacts. */
.ab-geo{margin:22px 0 0}
.ab-geo-h{display:flex;align-items:baseline;gap:10px;padding:0 2px 12px}
.ab-geo-h h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.3px}
.ab-geo-h span{font-size:12px;color:var(--textMuted)}
.ab-geo-grid{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:stretch}
.ab-geo-grid.nomap{grid-template-columns:1fr}
.ab-geo-grid.nomap .ab-facts{flex-direction:row}
.ab-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(128px,auto);gap:14px;margin:6px 0 14px}
.ab-bento .t{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:20px;padding:22px 24px 20px;box-shadow:var(--e1);
display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.ab-bento .t b{display:block;font-size:40px;font-weight:800;letter-spacing:-1.3px;line-height:1;font-variant-numeric:tabular-nums}
.ab-bento .t b small{font-size:18px;font-weight:700;letter-spacing:-.3px;margin-left:7px;color:var(--textMuted)}
.ab-bento .t span{display:block;font-size:13.5px;color:var(--text);font-weight:600;margin-top:9px;line-height:1.35}
.ab-bento .t em{display:block;font-style:normal;font-size:12px;color:var(--textDim);margin-top:5px;line-height:1.45}
.ab-bento .t.w4{grid-column:span 4}
.ab-bento .t.big{grid-column:span 4;grid-row:span 2;justify-content:space-between;padding:24px 26px 24px;
background:linear-gradient(160deg,#FFFFFF 0%,#FFF6F0 100%)}
.ab-bento .t .eye{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--textDim);margin-bottom:8px}
.ab-bento .t.big .eye{margin-bottom:0}
.ab-bento .t b.ru{color:var(--accent);letter-spacing:-1.6px}
.ab-bento .t.big b{font-size:96px;letter-spacing:-4px;color:var(--accent);margin-top:10px}
.ab-bento .t.big b small{font-size:28px;color:var(--text);margin-left:10px;letter-spacing:-.6px}
.ab-bento .t.big span{font-size:16px}
.ab-bento .t.big em{font-size:13px}
.ab-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 0}
.ab-nums-h{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;padding:8px 2px 0}
.ab-nums-h h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.2px}
.ab-nums-h span{font-size:12px;color:var(--textMuted)}
.ab-num{border-radius:20px;padding:20px 22px 18px;box-shadow:var(--e1)}
@media (max-width:900px){.ab-bento .t.big,.ab-bento .t.w4{grid-column:span 6}.ab-bento .t.big{grid-row:span 1}.ab-bento .t.big b{font-size:64px}}
@media (max-width:560px){.ab-bento .t.big,.ab-bento .t.w4{grid-column:span 12}}
.ab-facts2{display:flex;align-items:stretch;border-top:1px solid var(--cardBorder);border-bottom:1px solid var(--cardBorder);padding:16px 0;margin:2px 0 18px}
.ab-facts2 .f{flex:1;min-width:0;padding:2px 26px;border-left:1px solid var(--cardBorder)}
.ab-facts2 .f:first-child{padding-left:6px;border-left:0}
.ab-facts2 b{display:block;font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.05;font-variant-numeric:tabular-nums}
.ab-facts2 b.acc{color:var(--accent)}
.ab-facts2 span{display:block;font-size:12px;color:var(--textMuted);margin-top:5px}
.ab-facts2 em{display:block;font-style:normal;font-size:11.5px;color:var(--textDim);margin-top:4px;line-height:1.4}
@media (max-width:760px){.ab-facts2{flex-direction:column;gap:14px}.ab-facts2 .f{border-left:0;padding:0 6px}}
.ab-facts{display:flex;flex-direction:column;gap:12px}
.ab-fact{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:18px 20px;flex:1}
.ab-fact b{display:block;font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.05;font-variant-numeric:tabular-nums}
.ab-fact b.acc{color:var(--accent)}
.ab-fact span{display:block;font-size:12px;color:var(--textMuted);margin-top:6px;line-height:1.35}
.ab-map{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:14px 18px 10px;min-width:0;position:relative}
.ab-map svg{display:block;width:100%;height:auto}
.ab-map .cap{position:absolute;left:18px;bottom:12px;font-size:11px;color:var(--textDim)}
.ab-map text{font-family:Inter,sans-serif;font-size:12px;font-weight:600;fill:var(--text);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.ab-map text.sub{font-weight:500;font-size:11px;fill:var(--textMuted)}
.ab-off{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px}
.ab-o{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:14px 16px;min-width:0}
.ab-o b{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.ab-o b i{font-style:normal;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accentSolid);margin-right:7px;vertical-align:1px}
.ab-o span{display:block;font-size:12px;color:var(--textMuted);line-height:1.45}
.ab-o a{display:block;font-size:12px;color:var(--text);margin-top:5px;font-variant-numeric:tabular-nums}
.ab-o a:hover{color:var(--accent)}
@media (max-width:900px){.ab-geo-grid{grid-template-columns:1fr}.ab-facts{flex-direction:row}.ab-off{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ab-facts{flex-direction:column}.ab-off{grid-template-columns:1fr}}
@media (max-width:900px){
.abfox{flex-direction:column;align-items:stretch;min-height:0}
.abfox .art{position:static;transform:none;width:100%;max-width:540px;margin:-8px auto;order:-1}
.abfox h1{font-size:29px}
}
/* ═══ КАРТОЧКА — РАЗВОРОТ (W2, принят 21.08). Две страницы книги: слева фото
с отсветом, лупой и лентой кадров; справа — имя, цена-флип, наличие, покупка,
вкладки. Движение: transform/opacity/clip-path, ≤350 мс, два авторских
момента — раскрытие книги и флип цены. ═══ */
.wb{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--cardBorder);border-radius:24px;overflow:hidden;
box-shadow:0 30px 60px -30px rgba(26,34,49,.28);perspective:1600px;transition:box-shadow .5s cubic-bezier(.22,1,.36,1);margin-top:6px}
.wb.flat{box-shadow:0 10px 24px -16px rgba(26,34,49,.2)}
/* Снимка нет → разворот одностраничный: пустой белый столб во всю высоту выглядел бы поломкой,
а таких карточек по замеру 28.08 около пятой части каталога (21 из 96). Правая страница
получает всю ширину и ограничивается по строке, чтобы текст не растягивался на весь лист. */
.wb.noph{grid-template-columns:minmax(0,1fr)}
.wb.noph .wb-l{display:none}
.wb.noph .wb-r{max-width:760px;padding:34px 40px 30px}
/* Левая страница — ЧИСТО БЕЛАЯ, без градиента, тени-пола и отсвета (владелец 21.08 ~20:30: «фон карточки делаем белым,
тень от фото не всегда + лучше, когда оно всё сливается»). Фото поставщиков — JPEG с белым фоном: на белом кадр растворяется
целиком, а любая подкраска/тень рядом выдавала его прямоугольник. Глубину книге даёт только тень самой книги (сгиб снят 21:33).
История: 17:10 — белый фон + напольная тень; 20:30 — тень и отсвет сняты (элементы остаются в DOM, скрыты CSS — код
placeFloor/tint жив на случай возврата). */
.wb-l{position:relative;background:#FFFFFF;padding:30px 34px 26px;min-height:600px;display:flex;flex-direction:column;overflow:hidden}
.wb-glow,.wb-floor{display:none}
/* сгиб между страницами снят (владелец 21.08 21:33: «полоску разделяющую уберём — будет лучше»): на чисто белой сцене он читался швом */
/* Отсвет с кадра — multiply: белое/светлое фото страницу НЕ выбеливает (жалоба владельца 21.08: «фон по-прежнему
белый» — белый отсвет камеры накрывал серую землю), цветные кадры по-прежнему подкрашивают серый */
.wb-glow{position:absolute;left:50%;top:46%;width:60%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);filter:blur(60px);opacity:.26;mix-blend-mode:multiply;transition:background .6s;pointer-events:none}
.wb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:380px;cursor:zoom-in;touch-action:pan-y;user-select:none;z-index:1}
/* Белая квадратная подложка: «идеальный размер фото» — любой снимок (крупный/мелкий, широкий/высокий)
сидит в одном и том же квадрате, лупа и свайп работают внутри рамки (overflow:hidden) */
/* Кадр во всю полосу вместо квадрата 430 (владелец 28.08, макет «Синтез»).
Замер боевой страницы до правки: полоса 565 px, подложка 430², видимый предмет 370×370 —
вокруг оставался белый воздух, на который и жаловался владелец.
🪤 Сперва я поставил здесь aspect-ratio:4/3 — и стало ХУЖЕ цели: правая колонка высокая
(цена, наличие, покупка, паспорт), полоса тянется под неё, а подложка фиксированной
пропорции оставляла пустоту сверху и снизу. Замер поймал: доля предмета в полосе упала
с 38% до 26%. Поэтому подложка НЕ задаёт пропорцию, а ЗАПОЛНЯЕТ полосу — снимок
вписывается по contain и берёт столько места, сколько на полосе есть. */
.wb-plate{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
/* напольная тень: эллипс под нижней кромкой ВИДИМОГО кадра (object-fit учтён в placeFloor), размеры от ширины кадра */
.wb-floor{position:absolute;left:0;top:0;width:0;height:18px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:0;transition:opacity .6s cubic-bezier(.32,.72,0,1);
background:radial-gradient(ellipse at center,rgba(26,34,49,.46) 0%,rgba(26,34,49,.20) 42%,rgba(26,34,49,0) 70%);filter:blur(7px)}
.wb-floor.on{opacity:1}
.wb-stage img{z-index:1}
.wb-stage img.boxed{border-radius:14px;box-shadow:0 0 0 1px rgba(26,34,49,.06),0 10px 24px -14px rgba(26,34,49,.35)}
.e-rc img.boxed,.cf-card img.boxed{border-radius:8px}
.wb-stage img{max-height:94%;max-width:94%;object-fit:contain;opacity:0;transition:transform .12s linear,opacity .3s,filter .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.wb-stage img.ready{opacity:1}
.wb-stage img.ld{filter:blur(14px);transform:scale(1.03)}
.wb-stage.drag img{transition:none}
.wb-stage .no{color:var(--textDim);font-size:13px}
.wb-dots{display:flex;gap:6px;justify-content:center;margin:8px 0 12px;position:relative;z-index:1}
.wb-dots i{width:6px;height:6px;border-radius:99px;background:#D6D1C8;transition:width .3s cubic-bezier(.22,1,.36,1),background .3s}
.wb-dots i.on{width:20px;background:var(--accent)}
.wb-thumbs{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.wb-thumbs button{width:62px;height:62px;background:#fff;border:1px solid var(--cardBorder);border-radius:10px;overflow:hidden;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s;display:flex;align-items:center;justify-content:center}
.wb-thumbs button:hover{transform:translateY(-3px)} .wb-thumbs button.on{border-color:var(--accentSolid)}
.wb-thumbs img{width:80%;height:80%;object-fit:contain;opacity:0;transition:opacity .2s} .wb-thumbs img.ready{opacity:1}
.wb-r{padding:30px 36px 26px;display:flex;flex-direction:column;transform-origin:left center;animation:wbOpen .5s cubic-bezier(.22,1,.36,1) both;min-width:0}
@keyframes wbOpen{from{transform:rotateY(-7deg);opacity:.75}to{transform:none;opacity:1}}
.wb-in{opacity:0;transform:translateY(10px);animation:wbIn .42s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wbIn{to{opacity:1;transform:none}}
.wb-in.d1{animation-delay:.22s}.wb-in.d2{animation-delay:.28s}.wb-in.d3{animation-delay:.34s}.wb-in.d4{animation-delay:.4s}.wb-in.d5{animation-delay:.46s}
.wb-sku{font-size:12px;color:var(--textDim);letter-spacing:.01em}
.wb-kind{font-size:14px;font-weight:600;color:var(--textMuted);letter-spacing:-.1px}
.wb-kind+.wb-sku{margin-top:4px}
/* h1 из двух строк: тип товара (из дерева) мелко и тихо, имя — крупно; текст h1 целиком — для робота */
/* 🪤 имена .k/.n заняты глобально (.n = tabular-nums — растягивал дефисы артикула) */
.wb-r h1 .hk{display:block;font-size:14px;font-weight:600;color:var(--textMuted);letter-spacing:-.1px;line-height:1.3;margin-bottom:5px}
.wb-r h1 .hn{display:block}
.wb-r h1{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin:6px 0 6px}
.wb-r .e-meta{margin:0 0 10px}
/* цена — флип */
.wb-flip{position:relative;height:100px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.22,1,.36,1);margin-top:4px}
.partner .wb-flip{transform:rotateX(180deg)}
/* Заливки и рамки у цены больше нет: серая коробка читалась как панель админки. Цена стоит
на белом листе и держится типографикой — это язык документа (макет «Синтез», 28.08).
Оборот (партнёру) отличается не заливкой, а зелёной волосяной линией слева: цвет остаётся
семантикой «выгода», но перестаёт быть ковром. */
.wb-face{position:absolute;inset:0;backface-visibility:hidden;padding:0;display:flex;flex-direction:column;justify-content:center}
.wb-face.back{transform:rotateX(180deg);padding-left:14px;border-left:2px solid var(--green)}
/* Цена крупнее и ЛЕГЧЕ: 40/600 вместо 32/800. Плотный жирный набор на крупном кегле читается
дёшево — «дорого» даёт размер при спокойном весе (макет «Синтез», принят 28.08). */
.wb-big{font-size:40px;font-weight:600;letter-spacing:-.9px;line-height:1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wb-big small{font-size:13px;font-weight:400;color:var(--textDim);letter-spacing:0}
.wb-was{display:flex;gap:10px;align-items:center;margin-top:8px}
.wb-was s{font-size:14px;color:var(--textDim);font-weight:500}
.wb-save{font-size:11px;font-weight:700;color:var(--green);background:#fff;border-radius:999px;padding:3px 9px;transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1) .35s,opacity .3s .35s}
.partner .wb-save{transform:scale(1);opacity:1}
/* Партнёрская строка получила волосяную оранжевую линию слева — это единственная заливка-хром
в коммерческой колонке, и стоит она у САМОГО предложения, а не у служебной надписи.
🪤 «стать партнёром» было оранжевым текстом 12 px. Это против собственного правила владельца:
мелкий акцент-текст физически не проходит по контрасту (мандарин на белом даёт ~3.7 при
норме 4.5), поэтому мелкие акцент-надписи набираем ЧЕРНИЛАМИ, а оранж оставляем хрому.
Кликабельность теперь несёт подчёркивание, которое на наведении становится оранжевым. */
.wb-lock{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--textMuted);
margin-top:14px;padding-left:14px;border-left:2px solid var(--accent);flex-wrap:wrap;line-height:1.5}
.wb-lock b{color:var(--text);font-weight:600;cursor:pointer;border-bottom:1px solid var(--border)}
.wb-lock b:hover{border-bottom-color:var(--accent)}
.wb-lock svg .sh{transition:transform .4s cubic-bezier(.22,1,.36,1);transform-origin:16px 11px}
.partner .wb-lock svg .sh{transform:translateY(-3px) rotate(-18deg)}
/* наличие */
/* Коробка снята: наличие — ведомость на волосяных линиях, а не обведённая панель.
Рамка с заливкой читается как элемент админки; линейка — как строка документа. */
/* ── ЭКРАН КАБИНЕТА (01.09). Выездная панель осталась для ВХОДА, а вошедшему нужен экран:
заявки с позициями в шторку шириной 380 px не помещаются. Каркас — как у «О компании». */
.lkp{max-width:1000px;margin:0 auto;padding:8px 0 60px}
.lkp-top{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;padding:0 0 18px}
.lkp-co{flex:1;min-width:240px}
.lkp-co .cap{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--textDim)}
.lkp-co h1{margin:5px 0 9px;font-size:26px;font-weight:800;letter-spacing:-.5px}
.lkp-agr{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--green);
background:var(--greenDim);border-radius:999px;padding:5px 12px;font-weight:600}
.lkp-agr i{width:7px;height:7px;border-radius:99px;background:var(--green);font-style:normal}
.lkp-agr.no{color:var(--textMuted);background:var(--bgHover)}
.lkp-agr.no i{background:var(--textDim)}
.lkp-out{border:1px solid var(--border);border-radius:var(--r2);height:34px;padding:0 14px;
font-size:12.5px;font-weight:600;color:var(--textMuted);background:#fff}
.lkp-out:hover{color:var(--text);border-color:var(--textDim)}
.lkp-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cardBorder);
border:1px solid var(--cardBorder);border-radius:var(--r3);overflow:hidden;margin-bottom:22px}
.lkp-kpi > div{background:#fff;padding:15px 18px}
.lkp-kpi b{display:block;font-size:20px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.lkp-kpi span{font-size:11.5px;color:var(--textDim)}
@media(max-width:700px){.lkp-kpi{grid-template-columns:1fr}}
.lkp-h2{font-size:17px;font-weight:700;margin:0 0 12px}
.ord{border:1px solid var(--cardBorder);border-radius:var(--r3);margin-bottom:10px;background:#fff;overflow:hidden}
.ord-h{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 17px;cursor:pointer}
.ord-h:hover{background:#FCFBF9}
.ord-n{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.ord-d{font-size:12px;color:var(--textDim)}
.ord-s{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ord-b{border-top:1px solid var(--cardBorder);padding:4px 17px 14px;background:#FCFBF9}
.ord-it{display:grid;grid-template-columns:1fr 84px 104px;gap:12px;align-items:center;
padding:9px 0;border-bottom:1px solid #F1EEE9;font-size:12.5px}
.ord-it:last-of-type{border-bottom:0}
.ord-it b{display:block;font-weight:600}
.ord-it span{color:var(--textDim);font-size:11.5px}
.ord-it .q{text-align:right;color:var(--textMuted);font-variant-numeric:tabular-nums}
.ord-it .p{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ord-cm{font-size:12px;color:var(--textMuted);background:#fff;border:1px solid var(--cardBorder);
border-radius:var(--r2);padding:9px 12px;margin-top:10px}
.ord-cm b{display:block;color:var(--textDim);font-weight:600;font-size:11px;margin-bottom:2px}
.ord-act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ord-act button{height:34px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r2);
font-size:12.5px;font-weight:600;color:var(--textMuted);background:#fff}
.ord-act button:hover{color:var(--text);border-color:var(--textDim)}
.ord-act button.acc{border-color:var(--accentSolid);color:var(--accent)}
.ord-act button.acc:hover{background:var(--accentDim)}
.lkp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--cardBorder);margin-bottom:16px;flex-wrap:wrap}
.lkp-tab{height:40px;padding:0 14px;font-size:14px;font-weight:600;color:var(--textMuted);position:relative;background:none}
.lkp-tab.on{color:var(--accent)}
.lkp-tab.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--accentSolid);border-radius:2px}
.lkp-tab i{font-style:normal;font-size:11px;color:var(--textDim);margin-left:5px}
.freq{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.fq{border:1px solid var(--cardBorder);border-radius:var(--r3);padding:14px;background:#fff;display:flex;flex-direction:column}
.fq .br{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim)}
.fq .nm{font-size:13px;font-weight:600;margin:4px 0 2px;line-height:1.3}
.fq .sk{font-size:11px;color:var(--textDim);font-variant-numeric:tabular-nums}
.fq .cnt{font-size:11.5px;color:var(--textMuted);margin-top:7px}
.fq .pr{display:flex;align-items:baseline;justify-content:space-between;margin-top:9px}
.fq .pr b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.fq .pr s{color:var(--textDim);font-size:11.5px}
.fq .st{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--textMuted);margin-top:6px}
.fq .st i{width:7px;height:7px;border-radius:99px;background:var(--green);font-style:normal;flex-shrink:0}
.fq .st i.d1{background:#fff;box-shadow:inset 0 0 0 2px var(--green)}
.fq .st i.gr{background:#C6CBD3}
.fq .go{margin-top:auto;padding-top:10px}
.fq .go button{width:100%;height:34px;border:1px solid var(--accentSolid);border-radius:var(--r2);
color:var(--accent);font-size:12.5px;font-weight:600;background:#fff}
.fq .go button:hover{background:var(--accentDim)}
.lkp-note{font-size:12px;color:var(--textDim);margin-top:14px;line-height:1.5}
.wb-av{margin-top:26px}
.wb-av h4{margin:0 0 0;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--textDim);display:flex;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid var(--border)}
.wb-av h4 i{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--green)}
.wb-av .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;font-size:13px;color:var(--textMuted);padding:12px 0;border-bottom:1px solid var(--cardBorder);align-items:center}
/* Остаток — значение ведомости: кегль крупнее строки, цифры табличные. Свой склад зелёным
(это успех), транзит чернилами — «в пути» наличием не является и хвалить его цветом нельзя. */
.wb-av .r b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--green);white-space:nowrap}
.wb-av .r.way b{color:var(--text)}
.wb-av .l{display:flex;gap:7px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-av .l s{width:7px;height:7px;border-radius:99px;background:var(--green);text-decoration:none;display:inline-block;flex-shrink:0}
.wb-av .l s.tr{background:#fff;box-shadow:inset 0 0 0 2px #2563EB}
.wb-av .l s.gr{background:#fff;box-shadow:inset 0 0 0 2px #A8B0BC}
/* Вторая ступень — зелёный контур: товар будет, но не сегодня. Заливка остаётся только у своего
склада: она означает «можно забрать через час», и разбавлять её нельзя. */
.wb-av .l s.d1{background:#fff;box-shadow:inset 0 0 0 2px var(--green)}
.wb-av .l{align-items:flex-start}
.wb-av .l s{margin-top:5px}
.wb-av .tt{min-width:0;white-space:normal}
.wb-av .tt .dt{color:var(--text);font-weight:700;white-space:nowrap}
/* Продолжение лесенки — тише первой строки: это добор, а не отдельное предложение. */
.wb-av .r.cont .tt{color:var(--textDim)}
.wb-av .r.cont .tt .dt{color:var(--textMuted);font-weight:600}
.wb-av .tt .pvz{display:block;font-style:normal;font-size:12px;color:var(--accent);font-weight:600;margin-top:3px}
.wb-av .r b{color:var(--text);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
/* покупка */
.wb-buy{display:flex;gap:10px;align-items:stretch;margin-top:14px;flex-wrap:wrap}
/* степпер: глифы SVG одной толщины, подложка под курсором, «−» гаснет на единице,
ввод с клавиатуры (стрелки ±1, Enter = в корзину) */
.wb-qty{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--r2);background:#fff;height:44px;flex-shrink:0;overflow:hidden}
.wb-qty button{width:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--textMuted);transition:background .15s,color .15s,transform .1s}
.wb-qty button svg{width:14px;height:14px;display:block}
.wb-qty button:hover{background:var(--bgHover);color:var(--text)}
.wb-qty button:active{transform:scale(.88)}
.wb-qty button:disabled{color:#C9CDD5;background:transparent;cursor:default;transform:none}
.wb-qty .odo{width:48px;overflow:hidden;position:relative}
.wb-qty .odo input{width:100%;height:100%;border:0;background:transparent;text-align:center;font:inherit;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:var(--text);outline:none;position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s,box-shadow .15s}
.wb-qty .odo input:focus{box-shadow:inset 0 -2px 0 var(--accentSolid)}
.wb-qty .odo input.up{transform:translateY(-100%);opacity:0}.wb-qty .odo input.down{transform:translateY(100%);opacity:0}
.wb-qty .odo .g{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wb-qty .odo .g.down{transform:translateY(-100%)}.wb-qty .odo .g.up{transform:translateY(100%)}
.wb-qty.sm{height:36px}.wb-qty.sm button{width:32px}.wb-qty.sm button svg{width:12px;height:12px}.wb-qty.sm .odo{width:42px}.wb-qty.sm .odo input,.wb-qty.sm .odo .g{font-size:14px}
/* «В корзину»: тянется на всю строку — слева действие, справа сумма набегом (за N шт).
Состояния: В корзину → В корзине · N (зелёный) → Обновить · N (степпер ушёл от корзины) */
.wb-cta{flex:1 1 160px;min-width:0;height:44px;padding:0 16px 0 18px;border-radius:var(--r2);border:1px solid var(--accentSolid);color:var(--accent);font-size:14px;font-weight:600;
display:inline-flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;position:relative;overflow:hidden;transition:background .15s,transform .15s,color .3s,border-color .3s}
.wb-cta .lbl{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;position:relative}
.wb-cta .lbl svg{flex-shrink:0}
.wb-cta .tot{display:inline-flex;align-items:baseline;gap:6px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em;position:relative}
.wb-cta .tot small{font-size:12px;font-weight:500;opacity:.72}
.wb-cta .tot:empty{display:none}
.wb-cta:hover{background:var(--accentDim)} .wb-cta:active{transform:scale(.985)}
.wb-cta.ok{color:var(--green);border-color:var(--green)}
.wb-cta.ok:hover{background:var(--greenDim)}
.wb-cta.upd{background:var(--accentDim)}
.wb-cta.just{background:var(--greenDim)}
.wb-cta .rip{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(21,128,61,.22);transform:translate(-50%,-50%) scale(0);animation:wbRip .6s cubic-bezier(.22,1,.36,1) forwards;pointer-events:none}
@keyframes wbRip{to{transform:translate(-50%,-50%) scale(40);opacity:0}}
.wb-cta.sm{flex:0 0 auto;height:36px;padding:0 14px;font-size:13px;justify-content:center}
.wb-r .e-cta2{margin-top:10px}
.e-ask{display:block;width:100%;text-align:center;margin-top:10px;font-size:13px;color:var(--textMuted);transition:color .15s}
.e-ask b{color:var(--accent);font-weight:600}
.e-ask:hover b{text-decoration:underline}
.wb-r .e-bridge{margin-top:8px}
/* вкладки */
.wb-tabs{display:flex;gap:2px;position:relative;border-bottom:1px solid var(--cardBorder);margin:18px 0 10px;flex-wrap:wrap}
.wb-tabs button{padding:10px 14px;font-size:13px;font-weight:600;color:var(--textMuted);transition:color .2s}
.wb-tabs button.on{color:var(--text)}
.wb-tabs i{position:absolute;bottom:-1px;height:2px;background:var(--accentSolid);transition:left .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1)}
.wb-pane{flex:1;min-height:160px;overflow:hidden}
.wb-pane>div{display:none}
.wb-pane>div.on{display:block;animation:wbWipeR .4s cubic-bezier(.22,1,.36,1)}
.wb-pane>div.on.fromL{animation-name:wbWipeL}
@keyframes wbWipeR{from{clip-path:inset(0 0 0 100%);transform:translateX(10px)}to{clip-path:inset(0);transform:none}}
@keyframes wbWipeL{from{clip-path:inset(0 100% 0 0);transform:translateX(-10px)}to{clip-path:inset(0);transform:none}}
.wb-pane .ef1{grid-template-columns:1fr 1fr}
.wb-pane .ef1 .row{opacity:0;animation:wbIn .35s cubic-bezier(.22,1,.36,1) forwards}
.wb-pane .ef1 .row:nth-child(1){animation-delay:0ms}.wb-pane .ef1 .row:nth-child(2){animation-delay:40ms}.wb-pane .ef1 .row:nth-child(3){animation-delay:80ms}.wb-pane .ef1 .row:nth-child(4){animation-delay:120ms}.wb-pane .ef1 .row:nth-child(5){animation-delay:160ms}.wb-pane .ef1 .row:nth-child(6){animation-delay:200ms}
.wb-pane .ef1x{margin-top:8px}
.wb-groups{columns:1}
.wb-pane .e-srow{opacity:0;animation:wbIn .35s cubic-bezier(.22,1,.36,1) forwards}
.wb-pane .e-srow .dots{clip-path:inset(0 100% 0 0);animation:wbDraw .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wbDraw{to{clip-path:inset(0)}}
.wb-doc{opacity:0;animation:wbIn .35s cubic-bezier(.22,1,.36,1) forwards}
.wb-doc svg{transition:transform .25s cubic-bezier(.22,1,.36,1)} .wb-doc:hover svg{transform:rotate(-8deg) translateY(-2px)}
.wb-trust{margin-top:14px}
.wb-empty{padding:14px 0;color:var(--textMuted);font-size:13px}
/* Паспорт позиции — ведомость вместо извинения «характеристик пока нет» */
/* Паспорт — отдельный лист ПОД разворотом, а не врезка в колонке: во всю ширину ведомость
ложится в три колонки и не вытягивает разворот вниз. Оформление — как у книги: белая
плотная поверхность на земле страницы. */
.wb-pass{margin-top:14px;background:#fff;border:1px solid var(--cardBorder);border-radius:24px;
padding:26px 34px 28px;box-shadow:0 10px 24px -20px rgba(26,34,49,.28)}
.wb-pass h4{margin:0 0 4px;font-size:15px;font-weight:600;letter-spacing:-.1px}
.wb-pass .sub{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--textDim)}
.wb-pass .f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:38px}
.wb-pass .r{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--cardBorder)}
.wb-pass .k{font-size:11px;font-weight:600;color:var(--textDim);flex:none;min-width:92px}
.wb-pass .v{font-size:13px;color:var(--text);min-width:0;word-break:break-word}
.wb-pass .v.nd{color:var(--textDim)}
.wb-pass .note{margin:16px 0 0;font-size:12px;line-height:1.6;color:var(--textDim)}
.wb-pass .note b{color:var(--text);font-weight:600;cursor:pointer;border-bottom:1px solid var(--border)}
.wb-pass .note b:hover{border-bottom-color:var(--accent)}
@media(max-width:980px){.wb-pass .f{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.wb-pass{padding:20px;border-radius:16px}.wb-pass .f{grid-template-columns:minmax(0,1fr)}}
/* док-полоса */
.wb-dock{position:fixed;left:0;right:0;top:0;z-index:115;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--cardBorder);
transform:translateY(-110%);opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .25s;pointer-events:none}
.wb-dock.on{transform:none;opacity:1;pointer-events:auto}
.wb-dock .in{max-width:1180px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:14px}
.wb-dock img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--cardBorder);opacity:0}
.wb-dock img.ready{opacity:1}
.wb-dock .nm{font-size:13px;font-weight:600;max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-dock .sk{font-size:11px;color:var(--textDim)}
.wb-dock .pr{margin-left:auto;font-size:18px;font-weight:800;white-space:nowrap}
/* чип разницы цены у похожих */
.e-rc .df{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px;vertical-align:2px}
.e-rc .df.up{color:var(--accent);background:var(--accentDim)}.e-rc .df.dn{color:var(--green);background:var(--greenDim)}.e-rc .df.eq{color:var(--textDim);background:var(--page)}
@media (prefers-reduced-motion:reduce){.wb-r,.wb-in,.wb-pane>div.on,.wb-pane .ef1 .row,.wb-pane .e-srow,.wb-doc,.wb-pane .e-srow .dots{animation:none!important;opacity:1;transform:none;clip-path:none}.wb-flip,.wb-save,.wb-dock{transition:none}}
@media (max-width:900px){
.wb{grid-template-columns:1fr;border-radius:18px}
.wb-l{min-height:0;padding:18px}
.wb-stage{min-height:0}
.wb-tabs button{padding:10px 10px;font-size:12.5px}
.wb-r{padding:18px;animation:none;opacity:1;transform:none}
.wb-dock{display:none}
.wb-r h1{font-size:20px}
.wb-big{font-size:28px}
}
/* телефон: степпер и «В корзину» стопкой на всю ширину — в одной строке сумме в кнопке не хватает места */
@media (max-width:520px){
.it-top-in .it-crumbs{border-left:0;padding-left:0}
.wb-qty{flex:1 1 100%}
.wb-qty button{width:52px}
.wb-qty .odo{flex:1}
.wb-cta{flex:1 1 100%}
}