/* ГАРНИТУРА — Zona Pro, та же, что на effort-group.ru: два сайта компании говорят одним голосом.
Лежит у нас же в public/fonts (98 КБ на три файла), поэтому адреса АБСОЛЮТНЫЕ: наружу эти стили
уходят отдельным файлом /assets/app.<хэш>.css, и относительный путь искал бы шрифт в /assets/.
Начертаний у гарнитуры восемь, берём только те веса, что реально в ходу: 400 · 500 · 600 · 700.
⭐ Medium (500) у Zona Pro НЕ СУЩЕСТВУЕТ — его нет ни у словолитни, ни на effort-group. А в
стилях витрины 500 стоит в 45 местах, и без него браузер рисовал бы эти подписи Regular'ом,
теряя ступень насыщенности. Поэтому начертание СДЕЛАНО: Regular и SemiBold взяты мастерами и
смешаны пополам (tools/zona-medium.py, там же приёмка). Не «утолщение фильтром», а настоящая
интерполяция контуров — проверено: чернил ровно посередине между мастерами, ширина строки тоже.
Захочешь сменить файл — меняй ?v= в адресе (отдаём их с кэшем на год). */
@font-face{font-family:'Zona Pro';font-weight:400;font-style:normal;font-display:swap;
src:url('/fonts/ZonaPro-Regular.woff2?v=1') format('woff2')}
@font-face{font-family:'Zona Pro';font-weight:500;font-style:normal;font-display:swap;
src:url('/fonts/ZonaPro-Medium.woff2?v=1') format('woff2')}
@font-face{font-family:'Zona Pro';font-weight:600;font-style:normal;font-display:swap;
src:url('/fonts/ZonaPro-SemiBold.woff2?v=1') format('woff2')}
@font-face{font-family:'Zona Pro';font-weight:700;font-style:normal;font-display:swap;
src:url('/fonts/ZonaPro-Bold.woff2?v=1') format('woff2')}
/* Approved palette, 06.10.2026: blue actions, orange brand/promotion, neutral metadata.
The original logo orange is preserved; white CTA text uses a darker orange fill. */
:root{
--bgCard:#FFFFFF; --bgSolid:#FFFFFF; --bgHover:#F3F4F6; --bgInput:#FFFFFF;
--border:#E4E1DC; --text:#1A2231; --textMuted:#5B6472; --textDim:#8A93A3;
--accent:#285873; --accentSolid:#285873; --accentDim:#EAF1F5;
--accentGlow:rgba(40,88,115,0.13); --accentHover:#20465C;
--brandOrange:#E85326; --brandButton:#CE471F; --brandButtonHover:#B93E1A;
--promoInk:#B5421F; --promoBg:#FFF2EC;
--purchaseColor:#285873; --purchaseHover:#20465C; --purchaseTint:#EEF3F7;
--green:#15803D; --greenDim:#DCFCE7; --red:#DC2626;
--ownStockBg:#D3F1DB; --ownStockText:#146338; --ownStockBorder:#B3DEBF;
/* 12.09: токены для цветов, которые жили россыпью (три синих транзита, пять янтарных, три пары шиммера) */
--blue:#2563EB; --blueDim:#E7EFF5; --amber:#B45309; --amberDim:#FEF3C7; --redDim:#FEE2E2;
--surface2:#EFEDE9; --surface3:#FCFBF9; --border2:#D6D1C8; --skelB:#F7F5F2; --rIn:8px;
--r1:6px; --r2:10px; --r3:14px; --r4:20px; --rPill:999px;
/* ШРИФТ: одна гарнитура Zona Pro (как на effort-group.ru) + системный стек на случай, если файл
не доехал; моноширинного нет — цифры табличные (font-variant-numeric). Кегли только целые:
10 подпись · 11 мета · 12 вторичный · 13 тело · 14 акцент · 15 лид · 17 h4 · 20 h3 · 25 h2 ·
32 h1 · 40 герой. Georgia — ТОЛЬКО статья.
⚠️ Гарнитуру называть ТОЛЬКО через --font: до 19.09 имя шрифта стояло россыпью в четырёх местах,
и смена гарнитуры «почти везде» оставляет три плашки на старой — заметно только глазом. */
--font:'Zona Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
--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);line-height:1.35;
font-family:var(--font);
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}
/* Одна ширина с шапкой (аудит 12.09): .bar/.qrow живут на 1600, а выдача была на 1180 — при 1440 четыре плитки и
150 px мёртвого поля с боков. Сетка auto-fill при ≥1392 даёт пятую колонку сама. */
.wrap{max-width:1440px;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:color .15s,background .15s,border-color .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}
@media (hover:hover){.logo:hover img{transform:scale(1.05)}}
.logo b{font-size:15px;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(232,83,38,.13),
0 0 24px 6px rgba(232,83,38,.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:var(--rPill);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)}
.pop-info .pi-h{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--textDim);padding:8px 12px 3px}
.pop-info .pi-h + a{margin-top:0}
.pop-info .pi-h ~ .pi-h{border-top:1px solid var(--border);margin-top:4px;padding-top:10px} /* 14.09: группы «Компания» и «Полезное» */
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:var(--rIn);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:13px}
.lkw .lk-sec:hover{background:var(--bgHover)}
.lkw .lk-err{color:var(--red);font-size:13px;margin-top:10px}
.lkw .lk-who{font-size:15px;font-weight:600;letter-spacing:-.2px;margin-bottom:2px}
.lkw .lk-me{font-size:13px;color:var(--textDim);margin-bottom:4px}
.lkp-me{font-size:13px;color:var(--textDim);margin:-4px 0 8px}
.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:var(--rPill);
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{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} /* 13.09: без max-width — только композитор */
.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.12)}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-t.in{animation:none} /* 15.09: толчок счётчика и подъём суммы — цифры, они движутся всегда (блок «ЦИФРЫ ДВИЖУТСЯ ВСЕГДА») */
}
/* ── ВЫЕЗДНАЯ КОРЗИНА. Отдельной страницей не делаем: набор идёт из выдачи,
и уводить с неё ради проверки списка — терять место в поиске. ── */
.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:var(--rIn);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:var(--rIn);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}
/* 13.09: одометр как в карточке — цифра прокатывается, сумма набегает (владелец: «прикольная анимация… почему у нас такой нет») */
.cq .odo{position:relative;overflow:hidden;width:52px;height:100%;display:flex;align-items:center}
.cq .odo input{width:100%;position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s}
.cq .odo input.up{transform:translateY(-100%);opacity:0}.cq .odo input.down{transform:translateY(100%);opacity:0}
.cq .odo .g{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cq .odo .g.down{transform:translateY(-100%)}.cq .odo .g.up{transform:translateY(100%)}
.cq.big .odo{width:56px}.cq.big .odo .g{font-size:15px}
/* 15.09: при «меньше движения» одометр НЕ гасится — см. блок «ЦИФРЫ ДВИЖУТСЯ ВСЕГДА» */
.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:var(--rIn);display:flex;
align-items:center;justify-content:center;color:var(--textDim);transition:background .15s,color .15s}
.crow-del:hover{background:var(--redDim);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:20px;font-weight:700;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);background:var(--accentSolid);color:#fff;
font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;
transition:background .15s}
.csum-go:hover{background:var(--accentHover)} .csum-go:active{transform:scale(.98)}
.c-open{display:block;width:100%;text-align:center;margin-top:10px;font-size:13px;color:var(--textMuted)} .c-open:hover{color:var(--accent)}
.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:var(--redDim)}
/* ── ОФОРМЛЕНИЕ. Форма живёт в той же панели: уводить со страницы ради пяти
полей незачем, а список рядом остаётся видимым в шапке панели. ── */
.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:13px;font-weight:600;color:var(--textMuted);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:var(--redDim);
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(40,88,115,.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:13px;line-height:1.5;color:var(--textMuted);max-width:760px}
.ckbar-t a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(40,88,115,.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:var(--rPill);padding:7px 15px;font-variant-numeric:tabular-nums}
.cdone b{display:block;font-size:20px;font-weight:700;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:var(--rPill);background:var(--accentDim);color:var(--accent);
display:flex;align-items:center;justify-content:center;margin:0 auto 4px}
/* Исход «записали, но в CRM не уехало»: знак НЕ зелёный и НЕ праздничный — иначе человек
прочитает его как «всё хорошо» и не продублирует. И не красный: заявка не потеряна, она у нас. */
.cdone .ok.warn{background:var(--amberDim);color:var(--amber)}
.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}}
.it-open-calm{animation:itOpenCalm .18s ease-out backwards}
@keyframes itOpenCalm{from{opacity:0}to{opacity:1}}
.hero-ghost{position:fixed;z-index:500;pointer-events:none;object-fit:contain;transform-origin:top left;border-radius:var(--rIn);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}
/* Предкарточка кладёт кадр в ТУ ЖЕ сцену (.wb-stage → .wb-plate → img), что и готовая карточка: бокс 520 px,
правило размера кадра из capShot — геометрия совпадает до пикселя, и при приходе полной карточки ничего не двигается. */
.pre-l{--stageH:520px;display:flex;flex-direction:column;padding:30px 34px 26px;background:#fff;min-width:0}
.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:var(--rPill);
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:600;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:var(--blue)}
.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,var(--surface2) 25%,var(--skelB) 50%,var(--surface2) 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-r{padding:18px}}
.sk-hero{max-width:86%;max-height:86%;object-fit:contain;border-radius:var(--rIn)}
@media (prefers-reduced-motion:reduce){.scr-in,.it-open-calm{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:var(--rIn);
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:var(--rIn);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:var(--font);font-weight:600;color:var(--accent);letter-spacing:.03em}
/* 12.09: «по чему совпало» — контурный чип, мандарин без заливки, кегль 11; своего движения нет, входит вместе со строкой */
.sug-chip{display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-left:6px;border:1px solid var(--accentSolid);border-radius:var(--r1);color:var(--accent);font-size:11px;font-weight:600;line-height:1;vertical-align:middle;letter-spacing:0}
.sug-foot .sug-note{color:var(--textMuted)}
.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:var(--rIn);
background:linear-gradient(90deg,var(--surface2) 25%,var(--skelB) 50%,var(--surface2) 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:var(--rIn);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:40px;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 .12s cubic-bezier(.2,.8,.25,1),background .2s}
.lsn-btn svg{width:18px;height:18px}
@media (hover:hover){.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:var(--rPill);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:#fff;border:1px solid var(--cardBorder);border-radius:var(--rPill);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 .12s cubic-bezier(.2,.8,.25,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:var(--rPill);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:var(--rPill);background:var(--text);transition:transform .2s linear;will-change:transform}
.lsn-dock .d-x{font-size:17px;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:var(--r3);overflow:hidden;max-height:430px;background:var(--surface2)}
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:20px;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:20px;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:var(--surface2)}
.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:color .15s,background .15s,border-color .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,var(--surface2) 25%,var(--skelB) 50%,var(--surface2) 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:17px}
.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:40px;font-weight:600;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:700;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:15px;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:15px;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:var(--rIn);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:var(--r3);
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:var(--r3);
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:color .15s,background .15s,border-color .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:var(--amber)}
/* Позиции без цены — 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:25px;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:15px;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:var(--blue)}
.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:20px;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:var(--surface3)}
.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:var(--rIn);
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:13px;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:13px;margin-bottom:6px}
.ccrumb{border:none;background:transparent;font:inherit;font-size:13px;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:var(--rIn);color:var(--text)}
.cgrp:hover{background:var(--bgHover)}
.cgrp .nm{flex:1;min-width:0;font-size:13px;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:var(--rIn);
color:var(--textMuted);font-size:13px;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:var(--rIn);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:13px;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:13px;
font-weight:600;color:var(--text);padding:6px 14px;border-radius:var(--rPill);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:var(--accentSolid);
--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(232,83,38,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(232,83,38,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:var(--rPill);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 — состояние на каждый кадр
не гоняем, иначе шестьдесят перерисовок в секунду на ровном месте. ── */
/* 13.09 (владелец выбрал вариант «Чуть шире» из пяти на макете): 400 px · 16:10 · наклон 40° — заголовок целиком в две строки,
лента выше всего на ~30 px. Прежний вид 350×3:2·44° (решение 22.08) заменён явным выбором владельца. */
.cf{--cf-card:clamp(240px,28vw,400px);--cf-ar:1.6;--cf-body:88px;--cf-title:15px;--cf-rotate:40;--cf-depth:.55; /* прежний вид 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}
/* Края ленты уходят в маску, а не режутся краем окна; воздуха над лентой меньше (44/34 → 26/18) */
.cf-frame{cursor:grab;overflow:hidden;padding:26px 0 18px;outline:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
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:var(--rIn)}
.cf-frame:focus-visible{box-shadow:0 0 0 2px var(--accentSolid)}
/* 🪤 13.09: подложка ленты — плоскость z=0 внутри 3D-сцены, а боковые карточки отодвинуты вглубь (translateZ < 0). Браузер
искал цель нажатия с учётом глубины и попадал в ПОДЛОЖКУ перед ними: щелчок по любой боковой карточке не доходил до неё
(прибор: elementFromPoint → .cf-stage для смещений ±1, ±2, ±3). Подложка прозрачна для указателя, карточки — нет. */
.cf-stage{position:relative;user-select:none;transform-style:preserve-3d;pointer-events:none;
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);pointer-events:auto;
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:var(--surface2);
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}
.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:var(--cf-title,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:var(--rPill);
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}
/* Стрелки — плотные белые с тенью: полупрозрачный хром со blur на витрине не в языке (единственное место было здесь) */
.cf-nav{position:absolute;top:calc(26px + var(--cf-card) / (var(--cf-ar) * 2));z-index:30; /* 13.09: было 200 — стрелки просвечивали сквозь мега-меню (.bar = контекст 120) */
width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--bgCard);border:1px solid var(--cardBorder);color:var(--text);
box-shadow:var(--e1);transition:background .15s,border-color .15s,transform .12s cubic-bezier(.2,.8,.25,1);transform:translateY(-50%)}
.cf-nav:active{transform:translateY(-50%) scale(.97)}
@media (hover:hover){.cf-nav:hover{border-color:var(--accentSolid);color:var(--accent)}}
.cf-prev{left:20px}.cf-next{right:20px}
.cf-dots{margin-top:12px;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:.4;
transition:opacity .2s,transform .2s}
.cf-dots button[aria-current=true]{opacity:1;transform:scale(1.15);background:var(--accent)}
.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:14px 0 0}
.sec-h{display:flex;align-items:baseline;gap:10px;padding:0 2px 10px}
/* Заголовки полос главной — один кегль на все полосы («Бренды» был 15, «Новинки» 18); счётчики 13 px, 5,3:1 */
.sec-h h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.3px}
.sec-h span{font-size:13px;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)}
@media (hover:hover){.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:var(--rIn);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}
/* ряд раздела (12.09): счётчик «в наличии» на плашке — как у чипов подразделов; до ответа узла ряд приглушён */
.bcnt{font-size:12px;font-weight:500;color:var(--textDim);font-variant-numeric:tabular-nums;padding:0 4px 0 2px;white-space:nowrap}
.bcard.on .bcnt{color:var(--text)}
.brandrow{transition:opacity .15s}
.brandrow.wait{opacity:.55;pointer-events:none}
/* ═══ ВЫДАЧА ═══ */
.res{padding:24px 0 40px}
.res-h{display:flex;align-items:center;gap:10px;padding:0 2px 12px;flex-wrap:wrap}
.res-h h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.3px}
.catalogue-lead{max-width:76ch;margin:0 0 18px;color:var(--textMuted);font-size:15px;line-height:1.6}
.catalogue-copy.ssr-list{max-width:none;padding:28px 0 12px;margin:20px 0 0;border-top:1px solid var(--border);overflow-wrap:anywhere}
.catalogue-copy.ssr-list>h2:first-child{margin-top:0}
.res-h span{font-size:12px;color:var(--textMuted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
/* Ряд подразделов текущего узла (12.09): раздел на тысячи позиций управлялся только сортировкой */
.subrow{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.subrow a{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--cardBorder);background:var(--bgCard);border-radius:var(--rPill);font-size:13px;font-weight:500;color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.subrow a b{font-weight:500;color:var(--textDim);font-size:12px;font-variant-numeric:tabular-nums}
@media (hover:hover){.subrow a:hover{border-color:var(--accentSolid)}}
.subrow a.more{color:var(--textMuted);background:transparent}
/* Телефон: ряд подразделов НЕ переносим — 11 чипов давали 9 строк и 352 px до первого товара (замер 375, 12.09).
Смахивать пальцем, как .quick и .brandrow; выпуск до края экрана на ширину полей .wrap. Высота 36 — цель для пальца (правило 27.08). */
@media (max-width:760px){
.subrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:2px -20px 12px;padding:0 20px}
.subrow::-webkit-scrollbar{display:none}
.subrow a{height:36px;flex-shrink:0}
}
/* Условия выдачи — один раз, вместо повтора «В ПВЗ N» в каждой плитке */
.res-terms{font-size:13px;color:var(--textMuted);margin:0 0 14px;display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center}
/* 22.09: плашка «Официальный дистрибьютор» под заголовком выдачи бренда (renderPartner) и окно сертификатов (certDialog) */
.res-partner{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:10px 10px 10px 14px;background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);box-shadow:var(--e1)}
.rp-seal{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accentDim);color:var(--accent);display:grid;place-items:center}
.rp-seal svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rp-tx b{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.1px}
.rp-tx span{font-size:12px;line-height:1.45;color:var(--textMuted)}
.rp-tx .rp-dirs{color:var(--text)}
.cert-dlg .cd-dirs{margin:-8px 24px 24px;color:var(--text)}
.rp-btn{flex:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 14px 5px 5px;border:1px solid var(--cardBorder);border-radius:var(--r2);background:var(--surface3);font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
@media (hover:hover){.rp-btn:hover{border-color:var(--accent);color:var(--accent)}}
.rp-btn:focus-visible,.cd-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rp-th{display:flex;gap:4px}
.rp-th img{display:block;width:48px;height:34px;border-radius:4px;border:1px solid var(--cardBorder);background:#fff}
.cert-dlg{width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:0;border:0;border-radius:var(--r4);background:var(--bgCard);color:var(--text);box-shadow:0 24px 64px -16px rgba(26,34,49,.35)}
.cert-dlg::backdrop{background:rgba(26,34,49,.45)}
.cd-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 12px 0 24px}
.cd-h h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.3px}
.cd-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--textMuted);cursor:pointer;display:grid;place-items:center}
.cd-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (hover:hover){.cd-x:hover{background:var(--bgHover);color:var(--text)}}
.cd-l{margin:6px 24px 16px;font-size:14px;line-height:1.55;color:var(--textMuted);max-width:72ch}
.cert-dlg .ssr-certs{padding:0 24px 24px}
.cert-dlg .ssr-certs figure{max-width:none}
.cert-dlg .ssr-certs figcaption{font-size:13px}
@media (max-width:600px){
.res-partner{flex-wrap:wrap;align-items:flex-start;gap:10px 12px;padding:12px}
.rp-tx{flex-basis:calc(100% - 48px)}
.rp-btn{width:100%;justify-content:center}
.cd-h{padding:10px 6px 0 16px} .cd-l{margin:4px 16px 12px} .cert-dlg .ssr-certs{padding:0 16px 16px}
}
.catalogue-price-notice{margin:0 0 16px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;line-height:1.5;color:var(--textMuted)}
.res-terms b{color:var(--text);font-weight:600} .res-terms .g{color:var(--green);font-weight:600}
.res-terms .lnk{background:none;border:0;padding:0;font:inherit;color:var(--text);font-weight:600;border-bottom:1px solid var(--border);cursor:pointer}
@media (hover:hover){.res-terms .lnk:hover{border-color:var(--accentSolid);color:var(--accent)}}
.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:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
/* Полосы главной (Новинки · Акции): лента плиток со снапом, стрелки справа в заголовке; плитка — та же productCard */
.hrows{display:flex;flex-direction:column;gap:36px}
.hrow .sec-h h2{font-size:20px}
.hrow .sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.hrow .sec-h .n{font-size:13px;color:var(--textMuted)}
/* 13.09: у полосы есть вход — «Все N →» (чернилами, подчёркивание, hover под гейтом) */
.hrow .sec-h .all{margin-left:auto;font-size:13px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);text-decoration:none;white-space:nowrap;cursor:pointer;background:none;padding:0;font-family:inherit}
@media (hover:hover){.hrow .sec-h .all:hover{color:var(--accent);border-color:var(--accentSolid)}}
.hrow .sec-h .all:active{transform:scale(.97)}
.hrow .pnm{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pbadge.hot::before{background:var(--textDim)}
.hrow .sec-h .blogo{height:22px;width:auto;max-width:120px;object-fit:contain;align-self:center;margin-right:2px}
/* полоса бренда: логотип крупнее, «Бренд недели» надстрочником, имя бренда заголовком */
.hrow.hbrand .sec-h{align-items:center;gap:13px;margin-bottom:10px}
.hrow.hbrand .sec-h .blogo{height:34px;max-width:158px;margin-right:4px}
.hb-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.hb-ey{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--textDim)}
.hrow.hbrand .sec-h h2{font-size:22px;line-height:1.05}
/* линия цветом бренда; цвет не нашёлся — обычная волосяная, как у прочих полос */
.hb-rule{height:2px;border-radius:2px;background:var(--cRule,var(--cardBorder));margin:0 0 14px}
/* 🪤 Телефон: в шапке полосы четыре соседа — логотип, надстрочник с именем, подпись и «Все N →».
На 375 px они не помещаются в строку: «БРЕНД НЕДЕЛИ» переносилось на две строки, а подпись
«969 позиций в наличии» наезжала на имя бренда. Подпись уводим на свою строку, кнопку — за ней. */
@media (max-width:560px){
.hrow .sec-h{flex-wrap:wrap;row-gap:5px}
.hrow .sec-h .n{flex:1 1 auto;order:3;min-width:0} /* подпись и «Все N →» делят одну строку, если помещаются */
.hrow .sec-h .all{order:4;margin-left:auto}
.hb-ey{white-space:nowrap}
}
.hrow .sec-h .blogo:not([src]){display:none}
/* Единственная редакция подъёма плитки — ниже, у .pcard (здесь стояли дубли с пружиной .45 с, которые каскад перебивал) */
/* 13.09 вечер (владелец: «уберём анимацию появления картинки, она какая-то дерганная»): картинки появляются СРАЗУ —
без проявления, перелёта из плитки и сдвига при переключении. opacity:0 до .ready остаётся: пустой/битый кадр не мелькает. */
.pph img{height:82%;width:auto;max-width:88%;object-fit:contain;opacity:0}
.pph img.ready{opacity:1}
.hrows:not([hidden])~.res .hint{display:none}
/* 13.09: ярлык без капса и цветной подложки — 11 px чернилами, цвет только точкой (10 px капс оранжем на accentDim давал 3,6:1 и «маркет») */
.pbadge{position:absolute;left:10px;top:10px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.01em;padding:3px 9px 3px 8px;border-radius:var(--rPill);background:#fff;border:1px solid var(--cardBorder);color:var(--text);display:inline-flex;align-items:center;gap:6px}
.pbadge::before{content:'';width:6px;height:6px;border-radius:var(--rPill);background:var(--textDim);flex-shrink:0}
.pbadge.akcia::before{background:var(--promoInk)}
.pbadge.new::before{background:var(--green)}
.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}
/* ── ДВА ВИДА ВЫДАЧИ. Плитка продаёт глазами, строки — прайсом: снабженец
со списком артикулов думает таблицей, и для него плитка — шум. ── */
/* Сортировка — нативный 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:var(--rIn);display:flex;align-items:center;justify-content:center;
color:var(--textDim);transition:background .15s,color .15s}
.vsw button.on{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px var(--accentSolid)} /* 13.09: выбранное = тонкая рамка, не заливка */
.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:var(--rIn);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:var(--rPill);background:var(--green);text-decoration:none;flex-shrink:0}
.prow-st s.tr{background:var(--blue)}
.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,var(--surface2) 25%,var(--skelB) 50%,var(--surface2) 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:transform .2s cubic-bezier(.2,.8,.25,1),border-color .15s} /* 13.09: тень без transition — перерисовка всей плитки на каждом кадре hover */
@media (hover:hover){.pcard:hover{transform:translateY(-3px);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}
/* «без фото» — серый логотип бренда вместо пустого прямоугольника (аудит 12.09: четверть плиток экрана) */
.pph .nologo{max-width:58%;max-height:38%;opacity:.32;filter:grayscale(1);object-fit:contain}
.ptr{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:var(--rPill);font-size:11px;
font-weight:600;background:var(--blueDim);color:var(--blue)}
.pb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
/* Бренд на плитке — служебная подпись, а не акцент (аудит 12.09: 32 жирных оранжевых бренда на экран, контраст 3,9:1;
в строчном виде бренд и так серый). Оранжевым на плитке остаются кнопка и бейдж «Акция». */
.pbr{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--textMuted)}
.pnm{font-size:13px;font-weight:600;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.psku{font-size:12px;color:var(--textMuted);font-variant-numeric:tabular-nums} /* 13.09: артикул — главный B2B-идентификатор, 3,0:1 → 6,4:1 */
.pst{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--textMuted);margin-top:2px}
/* движение остатков — только в полосе «Разбирают»; тон общий с точкой её ярлыка */
.phot{font-size:12px;color:var(--textMuted);margin-top:3px}
.phot b{font-weight:600;color:var(--textMuted);font-variant-numeric:tabular-nums}
.pst s{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
.pst b{color:var(--text);font-weight:600}
.pst .today{color:var(--green);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(--textMuted);display:block}
.ppr .val{font-size:15px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ppr .ask{font-size:13px;color:var(--textMuted);font-weight:600}
/* розница зачёркнутой — только у вошедшего, которому уступили (см. productCard) */
.ppr .was{display:block;font-size:11.5px;color:var(--textDim);text-decoration:line-through;font-variant-numeric:tabular-nums;margin-top:1px}
.ppr span.was{text-decoration:none}
.ppr.ppr-personal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 12px;container-type:inline-size}
.ppr.ppr-personal .lbl{grid-row:1;font-size:12px;margin:0;white-space:nowrap}
.ppr.ppr-personal .personal-label{grid-column:2;text-align:right}
.ppr.ppr-personal .val{grid-column:2;grid-row:2;text-align:right;font-size:15px}
.ppr.ppr-personal .was{grid-column:1;grid-row:2;display:inline;font-size:14px;line-height:1.25;margin:0;white-space:nowrap;color:var(--textMuted)}
/* Чип «Партнёрам — ниже» с плиток снят (аудит 12.09): 24 одинаковых зелёных капсулы без числа, в том числе при
«цене по запросу». Обещание стоит один раз над выдачей (#res-terms). */
/* Кнопка корзины — контурная: сплошной оранжевой заливки в интерфейсе не держим. */
.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:color .15s,background .15s,border-color .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,var(--surface2) 25%,var(--skelB) 50%,var(--surface2) 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)}
/* 13.09: подвал — юрлицо · контакты · как покупают (для B2B здесь проверяют контрагента перед заявкой) */
.ftr .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px 32px;font-size:13px}
.ftr .fc h5{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim)}
.ftr .fc p{margin:0 0 6px;line-height:1.5} .ftr .fc b{color:var(--text);font-weight:600}
.ftr .fc a.tel{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.ftr .legal{grid-column:1/-1;border-top:1px solid var(--border);padding-top:12px;font-size:12px;color:var(--textDim)}
@media (max-width:760px){.ftr .wrap{grid-template-columns:1fr}}
.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}
body.card-open .fcat-h1,body.news-open .fcat-h1,body.news-section .fcat-h1,body.about-open .fcat-h1,body.contacts-open .fcat-h1,body.cart-open .fcat-h1,body.checkout-open .fcat-h1,body.lk-open .fcat-h1{display:none}
.fcat .fcat-t{font-weight:600}
.fcat a{color:var(--textMuted);border-bottom:0} /* 13.09: 30+ подчёркнутых ссылок читались простынёй */
.fcat a:hover{color:var(--accent)}
/* ═══ УЗКИЙ ЭКРАН ═══════════════════════════════════════════════════════════
Раскладка в три яруса: логотип с действиями, поле во всю ширину, фильтры.
На 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}
/* 19.09 (владелец): «вход в ЛК в моб. версии — человечек». В строке поиска места нет, поэтому
человечек стоит отдельной кнопкой в правой группе, рядом с корзиной. */
.ico-lkm{display:inline-flex;margin-left:auto;width:44px;height:44px;border:1px solid var(--border);background:var(--bgSolid);border-radius:var(--r2)}
.ico-lkm.in{color:var(--green);border-color:var(--green)}
/* Разделитель .sep после пилюль на телефоне отделяет их от пустоты (справа в .bar-l ничего нет), а при длинном имени
раздела («Видеонаблюдение») не помещался и уезжал отдельной строкой — +28 px к шапке (замер 375, 12.09). */
.bar-l .sep{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:20px}
.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;--cf-ar:1.5;--cf-title:14px} /* телефон — как был */
.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}
/* «100+ шт · Забрать сегодня» в плитке 163 px рвалось внутри фразы («Забрать / сегодня»); переносим фразу целиком */
.pst{flex-wrap:wrap;row-gap:2px}
.pst .today{white-space:nowrap}
.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,var(--surface2) 25%,var(--skelB) 50%,var(--surface2) 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:700;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:var(--rPill);padding:4px 10px;cursor:pointer;transition:color .15s,background .15s,border-color .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)}
/* «данные обмена — N назад» — служебное, не наличие: зелёный на странице закреплён за наличием */
.e-meta .fresh{display:flex;align-items:center;gap:6px;color:var(--textDim);font-weight:500}
.e-meta .fresh i{width:7px;height:7px;border-radius:var(--rPill);background:var(--green);font-style:normal}
/* 19.09.2026: правило .fresh.old (янтарная точка «данные старше 48 часов») снято по решению владельца. */
/* Страница карточки: широкая 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}
.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:var(--r3);padding:11px 12px}
.e-key b{display:block;font-size:15px;font-weight:700;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:24px;padding:24px 28px;margin-bottom:12px} /* 13.09: один контейнер с паспортом · 19.09: радиус и поля макета */
/* 19.09.2026 (макет единой карточки, утверждён владельцем): заголовки нижних блоков — настоящие заголовки 20 px, а не серая
капитель 12 px. После того как шапка «Наличие и сроки» стала 17 px чернилами, мелкие серые «ОПИСАНИЕ» / «ПОХОЖИЕ…» ниже
читались как подписи к чужому блоку. Уровень тега (h3) не меняется — меняется только вид: SEO-структура та же. */
.e-sec h3{font-size:20px;font-weight:700;letter-spacing:-.015em;text-transform:none;color:var(--text);margin:0 0 14px;line-height:1.25}
.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:var(--rPill);background:#EFECE6;overflow:hidden}
.e-fill{height:100%;border-radius:var(--rPill);background:linear-gradient(90deg,#22A455,var(--green))}
.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:var(--rPill);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 var(--border2);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 .own{font-size:15px;line-height:1.7;color:var(--text);margin:0 0 10px;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}
/* Вопросы-ответы — мягкими плитками, как в макете. Разметка прежняя (dl > div > dt + dd) и ВИДИМАЯ: FAQPage в JSON-LD обязан
соответствовать видимому тексту, сворачивать ответы в аккордеон нельзя. */
.e-about .faq{margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.e-about .faq>div{background:var(--surface3,#FCFBF9);border:1px solid var(--cardBorder);border-radius:16px;padding:16px 18px}
.e-about .faq dt{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:6px;color:var(--text)}
.e-about .faq dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--textMuted)}
/* 🪤 minmax(0,…): у голого 1fr минимум равен содержимому, и плитка вопроса с длинным артикулом вылезала за свою
колонку — на телефоне это давало лишний пиксель прокрутки вбок. Тот же класс, что был у ряда «похожих». */
@media (max-width:900px){.e-about .vlist{columns:1}.e-about .faq{grid-template-columns:minmax(0,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:600;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:var(--rPill);background:var(--green);font-style:normal;flex-shrink:0}
.e-sh i.tr{background:var(--blue)}
.e-sh i.gr{background:var(--textDim)}
.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(--text);font-weight:600;border-bottom:1px solid var(--border)}
@media (hover:hover){.e-bridge:hover b{color:var(--accent);border-color:var(--accentSolid)}}
.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}
/* 20.09: заливку сняли — это примечание, а не панель; серое пятно на белом листе читалось дыркой */
.e-trust{margin-top:11px;font-size:12px;line-height:1.55;color:var(--textDim);padding:9px 0}
.e-rel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} /* 19.09: minmax(0,…) — у голого 1fr минимум = содержимое, шестая плитка вылезала за секцию */
/* 🪤 display:block здесь перебивал -webkit-box у .pnm — клэмп имени был мёртв, плитки ряда получали разную высоту */
.prow-nm{display:block;color:inherit}
.pnm{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}
/* ⭐ 13.09: ЗАПАСНОЙ ВИД — разметка сервера раздела/бренда (.ssr-list) и карточки (.ssr-item). Её видят рендер Google
(данные /b2b/* ему закрыты robots.txt), человек без JS и человек при сбое данных (ssrFallback, catch в itOpen).
До этого у списка не было ни полей, ни типографики: на телефоне текст упирался в края экрана. */
.ssr-list{max-width:1180px;margin:0 auto;padding:18px 20px 36px;font-size:14px;line-height:1.6}
.ssr-list>nav:first-child,.ssr-item>nav:first-child{font-size:13px;color:var(--textMuted)}
.ssr-list h1,.ssr-item h1{font-family:var(--serif);font-size:32px;line-height:1.15;letter-spacing:-.3px;margin:8px 0 6px}
.ssr-list h1+p{max-width:760px;margin:0 0 4px;font-size:15px;color:var(--textMuted)}
.ssr-list h2,.ssr-item h2{font-size:18px;letter-spacing:-.2px;margin:28px 0 10px}
.ssr-cat-about,.ssr-brand-about{max-width:760px}
/* 22.09: «Официальный дистрибьютор» — сертификаты одной разметкой у робота (/b/, /about), в окне бренда и на экране
«О компании». Под картинкой — фраза сертификата и подпись: статус его словами, а не нашими. */
.ssr-certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ssr-certs figure{margin:0;min-width:0;max-width:380px}
.ssr-certs img{display:block;width:100%;height:auto;border:1px solid var(--cardBorder);border-radius:var(--r2);background:#fff}
@media (hover:hover){.ssr-certs a:hover img{border-color:var(--accent)}}
.ssr-certs figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--textMuted)}
.ssr-certs blockquote{margin:0;font-style:normal;color:var(--text)}
.ssr-certs cite{display:block;margin-top:4px;font-style:normal;color:var(--textDim)}
.ssr-list .ssr-partner{max-width:760px;margin:18px 0 8px;padding:20px 22px 22px;background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3)}
.ssr-list .ssr-partner h2{margin:0 0 6px}
.ssr-list .ssr-partner>p{margin:0 0 14px;color:var(--textMuted)}
.ssr-certs+.ssr-dirs,.ssr-list .ssr-partner>.ssr-dirs{margin:14px 0 0;color:var(--text)}
.ssr-cat-about h2{font-size:16px;margin:20px 0 6px}
.ssr-list h2+ul:not(.ssr-items){list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.ssr-list h2+ul:not(.ssr-items) li{border:1px solid var(--cardBorder);border-radius:var(--rPill);padding:4px 12px;font-size:13px;color:var(--textMuted);background:var(--bgCard)}
.ssr-list h2+ul:not(.ssr-items) a{color:var(--text);font-weight:600}
.ssr-items a,.ssr-item .rel a{color:var(--text);font-weight:500}
.ssr-list dl.faq,.ssr-item dl.faq{max-width:760px;margin:0}
.ssr-list dl.faq dt,.ssr-item dl.faq dt{font-weight:600;margin-top:14px}
.ssr-list dl.faq dd,.ssr-item dl.faq dd{margin:4px 0 0;color:var(--textDim)}
.ssr-list>nav:last-child:not(:first-child){margin-top:20px;font-size:14px;font-weight:600}
.ssr-list a:hover,.ssr-item a:hover{text-decoration:underline}
.ssr-item .kind{margin:14px 0 0;font-size:13px;color:var(--textMuted)}
.ssr-item h1+p{margin:0;font-size:13px;color:var(--textMuted)}
.ssr-item .oos{color:var(--accent);font-weight:600}
.ssr-item img{display:block;max-width:min(480px,100%);height:auto;margin:16px 0;border-radius:var(--r2);background:#fff}
.ssr-item>p,.ssr-item .own{max-width:760px}
.ssr-item .dims{font-size:13px;color:var(--textMuted)}
.ssr-item table{width:100%;max-width:760px}
.ssr-item th,.ssr-item td{padding:7px 14px 7px 0;border-bottom:1px solid var(--cardBorder);vertical-align:top;text-align:left}
.ssr-item td{padding-right:0}
.ssr-item ul{padding-left:18px}
.ssr-item ul.rel{list-style:none;padding:0}
.ssr-item ul.rel li{padding:6px 0;border-bottom:1px solid var(--cardBorder)}
.it-wrap .ssr-item{max-width:none;padding:0}
.ssr-retry{margin:24px 0 0}
.ssr-retry .it-retry{margin-left:0}
/* Данные не пришли: пустой каркас главной (ряд брендов, полосы, выдача) не показываем — остаётся разметка сервера */
body.ssr-fallback .wrap.home{display:none}
@media (max-width:760px){.ssr-list,.ssr-item{padding:12px 16px 28px}.ssr-list h1,.ssr-item h1{font-size:26px}.ssr-items li span{display:block;margin:2px 0 0}}
/* SEO-страницы новостей (/news/, /news/) и блоки «Новости бренда» на /b/ и /p/. Заметка — в разметке
читалки (.art*), сюда только то, чего у читалки нет: ссылки вместо кнопок и список ленты. */
.ssr-news h1{font-family:var(--serif);font-size:32px;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)}
/* 13.09: страницы компании /about … /warranty — разметка сервера (робот, человек без JS) и экран «Доставка/Оплата/Гарантия» в приложении */
.ssr-info{max-width:980px}
.ssr-info h1{font-family:var(--serif);font-size:32px;line-height:1.15;margin:8px 0 6px}
.ssr-info .ssr-lead{color:var(--textMuted);max-width:760px;font-size:15px}
.ssr-info h2{font-size:18px;margin:26px 0 8px;letter-spacing:-.2px}
.ssr-info .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}
.ssr-info .cards .ab-card h2{font-size:15px;margin:0 0 8px}
.ssr-info .cards .ab-card p{margin:0 0 8px;font-size:14px}
.ssr-info .cards .ab-card p:last-child{margin-bottom:0}
.ssr-info .facts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.ssr-info .facts b{font-size:18px;color:var(--accent);margin-right:5px}
.ssr-info .offices{list-style:none;padding:0;margin:8px 0 0}
.ssr-info .offices li{padding:6px 0;border-bottom:1px solid var(--cardBorder);font-size:14px}
.ssr-info table.rq{border-collapse:collapse;width:100%;max-width:760px;font-size:14px}
.ssr-info table.rq th{text-align:left;font-weight:500;color:var(--textMuted);padding:7px 14px 7px 0;vertical-align:top;white-space:nowrap;border-bottom:1px solid var(--cardBorder)}
.ssr-info table.rq td{padding:7px 0;border-bottom:1px solid var(--cardBorder);user-select:all}
.ssr-info dl.faq dt{font-weight:600;margin-top:12px}
.ssr-info dl.faq dd{margin:4px 0 0;color:var(--textDim)}
.ssr-info .ct-ln{font-size:15px}
.ssr-info .ssr-info-nav{margin-top:26px;font-size:13px;color:var(--textMuted);display:flex;flex-wrap:wrap;gap:6px 14px}
.ssr-info a:hover{text-decoration:underline}
.ssr-info-app{padding:0}
/* 13.09: отзывы клиентов — блок на /about (SSR и экран приложения), форма /review, проверка /b2b/review-mod */
.ab-rv{margin-top:26px}
/* 22.09: «Официальный дистрибьютор» на экране «О компании» — карточкой того же языка, что ab-card, под тремя карточками */
.ab-partners{margin-top:12px;background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:24px 24px 20px}
.ab-partners h2{font-size:18px;margin:0 0 8px;letter-spacing:-.2px}
.ab-partners .ab-pl{margin:0 0 16px;font-size:14px;line-height:1.62;color:var(--textMuted);max-width:760px}
.ab-partners .ab-pb{margin:14px 0 0;font-size:14px;color:var(--textMuted)}
.ab-partners .ab-pb a{color:var(--text);font-weight:600}
.ab-rv h2,.ssr-about h2#reviews{font-size:18px;margin:0 0 8px;letter-spacing:-.2px}
.rv-stars{color:var(--accent);letter-spacing:1px;white-space:nowrap}
.rv-stars i{font-style:normal;color:var(--cardBorder)}
.rv-sum{margin:0 0 10px;font-size:14px;color:var(--textMuted)}
.rv-sum b{color:var(--text);font-size:16px}
.rv-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.rv-list li{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:16px 18px}
.rv-list .rv-h{font-size:13px;color:var(--textMuted);margin-bottom:6px}
.rv-list .rv-h b{color:var(--text)}
.rv-list p{margin:0;font-size:14px;line-height:1.55}
.rv-list .rv-a{margin-top:8px;color:var(--textMuted);font-size:13px}
.rv-invite{margin:12px 0 0;font-size:14px;color:var(--textMuted)}
.rv-invite a,.lk-rv a{color:var(--accent);font-weight:600}
.lk-rv{margin:10px 0 0;font-size:13px}
.lk-chat{margin:10px 0 0;font-size:13px;color:var(--accent);font-weight:600;background:none;border:0;padding:0;text-align:left}
.lk-chat:hover{text-decoration:underline}
.rv-page{background:var(--page)}
.rv-top{max-width:760px;margin:0 auto;padding:18px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.rv-top .rv-back{font-size:13px;color:var(--textMuted)}
.ssr-info.rv{max-width:760px}
.rv-form{display:grid;gap:14px;margin-top:18px;background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);padding:22px 24px}
.rv-f{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--text)}
.rv-f small{font-weight:400;color:var(--textDim)}
.rv-f input,.rv-f textarea{font:inherit;font-weight:400;font-size:15px;padding:10px 12px;border:1px solid var(--cardBorder);border-radius:var(--r2);background:var(--bgCard);color:var(--text);width:100%;box-sizing:border-box}
.rv-f textarea{resize:vertical;min-height:140px;line-height:1.5}
.rv-f input:focus,.rv-f textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.rv-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rv-rate{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.rv-rate legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
.rv-rate label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.rv-rate span{color:var(--accent)}
.rv-agree{font-size:13px;color:var(--textMuted);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.rv-agree input{margin-top:3px}
.rv-go,.rv-sec{font:inherit;font-size:14px;font-weight:600;height:42px;padding:0 20px;border-radius:var(--r2);cursor:pointer;justify-self:start}
/* Разбор 19.09: единственная заливная кнопка сайта мимо фирменного оранжевого — теперь в общей паре цвет/ховер. */
.rv-go{background:var(--accentSolid);color:#fff;border:1px solid var(--accentSolid)}
.rv-go:hover{background:var(--accentHover);border-color:var(--accentHover)}
.rv-sec{background:transparent;color:var(--text);border:1px solid var(--cardBorder)}
.rv-err{color:#b42318;background:#fef3f2;border:1px solid #fecdca;border-radius:var(--r2);padding:10px 12px;font-size:14px}
.rv-ok{color:#067647;background:#ecfdf3;border:1px solid #abefc6;border-radius:var(--r2);padding:10px 12px;font-size:14px}
.rv-co{margin:0;font-size:14px}
.rv-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.rv-q{margin:14px 0;padding:14px 16px;border-left:3px solid var(--accent);background:var(--bgCard);font-size:15px;line-height:1.55}
.rv-mod{display:flex;gap:10px;flex-wrap:wrap}
.rv-note{font-size:12px;color:var(--textDim)}
@media (max-width:760px){.rv-row{grid-template-columns:1fr}.rv-form{padding:18px 16px}}
.ssr-info-app .crumbs{display:none}
.ssr-info-app h1{margin-top:0}
@media (max-width:760px){.ssr-info h1{font-size:26px}.ssr-info table.rq th{white-space:normal}}
/* закладки: флажок на плитке (появляется по ховеру или когда отмечен), в строке, в карточке */
.pph{position:relative}
.pbmk{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:var(--rIn);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:focus-visible,.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:1440px;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:18px;padding:12px;cursor:pointer;transition:box-shadow .15s}
@media (hover:hover){.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}
.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.35;min-height:calc(2 * 1.35em);overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.e-rc .pr{font-size:13px;font-weight:700;margin-top:5px}
.e-rc .st{font-size:11px;color:var(--green);margin-top:2px}
/* ── БЕГУЩАЯ СТРОКА: похожее в этом классе, под плитками в карточке товара ─────
Владелец 27.08: вариант «Тихая», сперва на главной, затем перенесена в карточку.
Без оконтовки, графитом, при наведении замирает.
Оконтовки нет по условию — но обрыв имени на середине слова выглядит поломкой,
поэтому края гасит МАСКА: имя уходит в землю страницы, а не упирается в границу.
🪤 Наведение ставит анимацию на ПАУЗУ, а не на нулевую длительность: нулевая
доигрывает круг до конца, и строка дёргается на месте.
🪤 Гасим СОСЕДЕЙ, а не подсвечиваем наведённое: иначе при каждом движении мыши
мигает вся строка. */
/* ⭐ 19.09.2026 (владелец выбрал из пяти вариантов «A — таблетки»): имена — пилюлями, ход медленный, края растворяются,
пауза при наведении И постоянная кнопка паузы справа (движение, которое нельзя остановить, — нарушение WCAG 2.2.2,
а наведения на телефоне нет вовсе). Маска теперь на окне .tk-vp, а не на всей строке: иначе кнопка паузы
растворялась бы вместе с краем. */
.tk{position:relative;margin:16px 0 2px;display:flex;align-items:center;gap:10px}
.tk-vp{flex:1 1 auto;min-width:0;overflow:hidden;padding:3px 0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.tk-pz{flex-shrink:0;width:34px;height:34px;border-radius:var(--rPill);border:1px solid var(--cardBorder);background:var(--bgCard);
color:var(--textMuted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s}
.tk-pz:hover{color:var(--accent);border-color:var(--accentSolid)}
.tk-pz:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.tk-pz svg{width:14px;height:14px}
.tk-pz .i-play{display:none}
.tk.paused .tk-pz .i-play{display:block}
.tk.paused .tk-pz .i-pause{display:none}
.tk.paused .tk-track{animation-play-state:paused}
.tk-track{display:flex;width:max-content;will-change:transform;animation:tkrun 80s linear infinite}
@keyframes tkrun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.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);
height:32px;padding:0 14px;margin-right:8px;border-radius:var(--rPill);border:1px solid var(--cardBorder);background:var(--bgCard);
cursor:pointer;font-family:inherit;line-height:1;display:inline-flex;align-items:center;flex-shrink:0;
transition:color .18s ease,border-color .18s ease,box-shadow .18s ease}
/* Соседей больше не гасим: приглушённая пилюля выглядит выключенной кнопкой, а не фоном. */
@media (hover:hover){.tk-i:hover{color:var(--accent);border-color:var(--accentSolid);box-shadow:inset 0 0 0 .5px var(--accentSolid)}}
.tk-i:focus-visible{outline:2px solid var(--text);outline-offset:2px}
/* Просили меньше движения — строка перестаёт быть лентой и становится обычным списком:
имена переносятся по строкам и видны ВСЕ сразу.
🪤 Прежняя редакция ставила ленту на паузу и включала 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-pz{display:none} /* шаговый режим и так не едет — останавливать нечего */
}
/* липкая нижняя полоса покупки */
.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:var(--rIn);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:20px;font-weight:700;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:13px}
.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)}
/* 19.09: minmax(0,…) — у голого 1fr минимум равен содержимому, и после увеличения полей плитка «похожих» вылезала
за экран на 3 px (замер 375 px). Поля секции на телефоне — прежние компактные, радиус поменьше. */
.e-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
.e-sec{padding:18px 16px;border-radius:20px}
/* на телефоне полоса несёт только суть: фото · цена · кнопка */
.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;overflow:hidden} /* 13.09: лис не ложится на плитки фактов ниже */ /* под квадратную картину */
/* Картина — лис тушью в энсо (владелец 21.08 22:5x: «новая картинка в hero О компании»). Исходник
ChatGPT 1774×887 (версия 22:46, лис слева, смотрит вправо) обрезан до левой части с лисом (920×887) и ВЫРОВНЕН ПО ТОНУ бумаги к цвету
страницы (ffmpeg colorlevels: бумага #EEE9E0 → var(--page)) — арт лежит прямо на земле, край невидим,
как было с 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:600;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. */
/* «Контакты»: лис в энсо (прежний герой «О компании»); остров (island-sumi.jpg, ChatGPT 1673×940 → левая часть 921×940) ушёл в «О компании» */
/* «Контакты»: горы, путник, красное солнце (ChatGPT 1774x887 → левая часть 887x887) */
/* обрыв — ровно по левому краю контента, без выноса −30px (владелец 22.08 01:0x) */ /* «Контакты»: обрыв и прорезь неба (ChatGPT 1774x887 → левая часть 887x887) */
/* «Реквизиты»: человек, чья тень — птица (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]]);
профиль поперёк ровный, ступени «внутри светлее — снаружи темнее» нет. */
/* кадр 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 на var(--page) (цвет страницы) дочищен локально: фон выровнен в ровный var(--page), крупные оранжевые
кляксы сняты, тень под лапами облегчена — `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 % не растворяли край).
⭐ Тон бумаги подогнан НЕ к var(--page), а к ЗЕМЛЕ ПОД ЭТИМ ГЕРОЕМ — (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:13px;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:13px;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:13px;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:13px;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:600;letter-spacing:-1.3px;line-height:1;font-variant-numeric:tabular-nums}
.ab-bento .t b small{font-size:17px;font-weight:700;letter-spacing:-.3px;margin-left:7px;color:var(--textMuted)}
.ab-bento .t span{display:block;font-size:13px;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:15px}
.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:700;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:11px;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:600;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-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 жив на случай возврата). */
/* БЕЗ СЕРОГО ВОВСЕ — выбор владельца 20.09 из пяти композиций: «только типографика».
Дорога была такая: плашка под ценой → бумажная сцена → стенд во всю половину. На стенде и
стало видно, что серого в кадре слишком много: замер дал 371 983 px² заливки цветом ФОНА
СТРАНИЦЫ (#F6F5F2) внутри белого листа — такие поля читаются дырками, а не частью карточки.
Выбрано обратное: белый лист целиком, подложек нет НИ У СЦЕНЫ, НИ У ЦЕНЫ, половины держатся
отступами и волосяной линией шва (см. .wb-r).
🪤 Что от той дороги ОСТАВЛЕНО осознанно: сцена тянется на всю колонку, а кадр сидит в
коробке --stageH. Это геометрия, а не цвет: она чинит «рисунок не по центру» (под снимком
оставалось 345 px пустоты) и к серому отношения не имеет. */
.wb-l{--stageH:520px;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: «фон по-прежнему
белый» — белый отсвет камеры накрывал серую землю), цветные кадры по-прежнему подкрашивают серый */
/* СЦЕНА ЗАПОЛНЯЕТ КОЛОНКУ, а КАДР остаётся в коробке --stageH. Разделение важное, и вот почему.
20.09 (владелец, по карточке кабеля): «рисунок не по центру выходит». Бумажная подложка проявила то,
что на белом не читалось: высота сцены берётся из пропорций СНИМКА (360 у плоского, 520 у высокого),
а колонка всегда высокая — под сценой оставалось 345 px пустоты. Центрирование сцены проблему не
решает, а переносит: замер на живом дал 203 px пустоты СВЕРХУ. Поэтому поле тянется на всю колонку —
тогда левая половина у всех карточек одинаковая, независимо от пропорций снимка.
🪤 НО САМ КАДР ТЯНУТЬ НЕЛЬЗЯ. Замер 12.09: пока сцена тянулась
под колонку, кадр в предкарточке стоял 427×430, а в готовой карточке — 427×468 (камера) и 379×795 (высокий коммутатор):
предмет «увеличивался» на глазах. Поэтому max-height кадра считается от --stageH, а не от высоты поля:
предкарточка и карточка по-прежнему кладут кадр в ОДНУ И ТУ ЖЕ коробку, растёт только бумага вокруг. */
.wb-stage{flex:1 1 auto;height:auto;min-height:var(--stageH,520px);position:relative;display:flex;align-items:center;justify-content:center;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-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)}
/* 20.09: СЦЕНА БУМАГОЙ — и только под снимок, снятый на белом. Предмет перестаёт висеть в
пустом белом поле без опоры: справа у колонки материал есть (плитки, плашка цены), слева
не было. Кадр рисуется multiply: его собственный белый фон перемножается с бумагой и
исчезает, поэтому прямоугольной «заплатки» вокруг товара не видно — ради неё сцену и
держали белой.
🪤 Признак даёт ТОТ ЖЕ замер краевых пикселей, что и .boxed выше (~7050): доля фоновых
краёв ≥0.9 — снимок на белом. Кадрам со СВОИМ фоном (серая студия) бумагу не включаем:
multiply их затемнит, и у них уже есть своя скруглённая рамка.
Браузер без :has() просто оставит белую сцену — как было. */
/* Подложки у сцены нет: лист белый, снимки вендоров сняты на белом — растворять нечего.
Признак .onpaper снят вместе с ней; замер краевых пикселей ниже остаётся ради .boxed
(кадры со СВОИМ фоном, серая студия, по-прежнему получают скруглённую рамку). */
.e-rc img.boxed,.cf-card img.boxed{border-radius:var(--rIn)}
/* Кадр лежит абсолютно по центру подложки: при переключении новый кадр ПРОЯВЛЯЕТСЯ поверх старого на том же месте
(opacity+лёгкий сдвиг, 220 мс, ease-out), старый гаснет с blur 3px. Blur-up 14px + scale 1.03 при появлении снят:
кадр приходит уже обрезанным и с известным размером, ему нечего «наводить на резкость». Только opacity/transform/filter. */
/* Кадр — в коробке --stageH, а не 86% выросшего поля (см. замер 12.09 выше). min() держит и телефон:
там --stageH задан медиазапросом (300/230), и 86% высоты поля оказывается меньше. */
.wb-stage img{position:absolute;left:50%;top:50%;translate:-50% -50%;max-height:min(86%,calc(var(--stageH,520px) * .86));max-width:86%;object-fit:contain;opacity:0}
.wb-stage img.ready{opacity:1}
.wb-stage img.sk-hero{border-radius:0}
.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:var(--rPill);background:var(--border2);transition:width .3s cubic-bezier(.22,1,.36,1),background .3s}
.wb-dots i.on{width:20px;background:var(--accentSolid)}
.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}
@media (hover:hover){.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} .wb-thumbs img.ready{opacity:1}
/* Ярлыки условий под фото (19.09, владелец: «красивее и ровнее»). Было: значок в плитке 38 px и две строки текста,
причём «1 год от производителя» ломалось надвое — три ячейки выходили разной высоты и с разными базовыми линиями.
Стало: ровная сетка с волосяными разделителями, значок и подпись капителью в одну строку, значение под ними —
одной строкой у всех трёх. Подписи укорочены до однострочных; подробности и так ниже, в плашке условий. */
.wb-facts{margin-top:auto;padding-top:16px;border-top:1px solid var(--cardBorder);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;z-index:1}
.wb-facts>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:2px 14px;border-left:1px solid var(--cardBorder)}
.wb-facts>div:first-child{padding-left:0;border-left:0}
.wb-facts>div:last-child{padding-right:0}
.wb-facts .ic{display:inline-flex;align-items:center;gap:7px;color:var(--textDim);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.wb-facts .ic svg{width:15px;height:15px;flex-shrink:0}
.wb-facts .t{display:block;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-tabsec{margin-top:12px}
.wb-tabsec .wb-tabs{margin-top:0}
.wb-tabsec .wb-pane{margin-bottom:0}
@media (max-width:900px){.wb-facts{margin-top:16px;padding-top:14px}}
@media (max-width:560px){.wb-facts{grid-template-columns:1fr;gap:10px}
.wb-facts>div{padding:0;border-left:0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}}
.wb-docs{margin-top:16px;border-top:1px solid var(--cardBorder);padding-top:12px;position:relative;z-index:1}
.wb-docs h4{margin:0 0 6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--textMuted);font-weight:600}
.wb-docs a{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--text);text-decoration:none;padding:5px 0;min-width:0}
.wb-docs a svg{flex-shrink:0;color:var(--textDim)} .wb-docs a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.wb-docs a:hover{color:var(--accent)}}
@media (max-width:900px){.wb-docs{display:none}}
/* шов между половинами — волосяная линия вместо смены материала (выбор 20.09) */
.wb-r{border-left:1px solid var(--cardBorder);padding:30px 36px 26px;display:flex;flex-direction:column;transform-origin:left center;animation:wbOpen .32s 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 .24s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wbIn{to{opacity:1;transform:none}}
/* Каскад стартует вместе со страницей, шаг 40 мс — экран собирается к ~0,45 с, а не к 0,88 с */
.wb-in.d1{animation-delay:0s}.wb-in.d2{animation-delay:.04s}.wb-in.d3{animation-delay:.08s}.wb-in.d4{animation-delay:.12s}.wb-in.d5{animation-delay:.16s}
.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:700;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}
/* ПЛАШКИ ПОД ЧИСЛОМ НЕТ (20.09, итоговый выбор «только типографика»). Цена держится кеглем и
воздухом, как и весь лист. История — чтобы не ходить по кругу: заливку под ЦЕЛЫМ блоком цены
пробовали и сняли 28.08 («серая коробка читалась как панель админки»), плашку под самим
числом — 20.09, вместе со стендом. Обёртка .num у числа ОСТАВЛЕНА: она отделяет число от
подписи, и если подложку решат вернуть, это снова одна строка CSS, а не правка разметки. */
.wb-was{display:flex;gap:10px;align-items:center;margin-top:8px}
.wb-was s,.wb-was > span:not(.wb-save){font-size:14px;color:var(--textDim);font-weight:500}
.wb-save{font-size:11px;font-weight:700;color:var(--green);background:#fff;border-radius:var(--rPill);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:700;letter-spacing:-.5px}
.lkp-agr{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--green);
background:var(--greenDim);border-radius:var(--rPill);padding:5px 12px;font-weight:600}
.lkp-agr i{width:7px;height:7px;border-radius:var(--rPill);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:13px;font-weight:600;color:var(--textMuted);background:#fff}
.lkp-out:hover{color:var(--text);border-color:var(--textDim)}
.lkp-chat{border:1px solid var(--accentSolid);border-radius:var(--r2);height:34px;padding:0 14px;
font-size:13px;font-weight:600;color:var(--accent);background:#fff;transition:background .15s}
.lkp-chat:hover{background:var(--accentDim)}
.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:11px;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:var(--surface3)}
.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:var(--surface3)}
.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:13px}
.ord-it:last-of-type{border-bottom:0}
.ord-it b{display:block;font-weight:600}
.ord-it span{color:var(--textDim);font-size:11px}
.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:13px;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:11px;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:11px}
.fq .st{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--textMuted);margin-top:6px}
.fq .st i{width:7px;height:7px;border-radius:var(--rPill);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:13px;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}
/* Остаток — значение ведомости: кегль крупнее строки, цифры табличные. Свой склад зелёным
(это успех), транзит чернилами — «в пути» наличием не является и хвалить его цветом нельзя. */
/* Число своего склада — чернилами 700; ожидание/транзит — тише (15/600, --textMuted): «100+ шт» в пути не должно весить
больше «10+ шт», которые можно забрать сегодня (аудит 12.09; раньше два одинаковых селектора спорили) */
.wb-av .r b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.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:var(--rPill);background:var(--green);text-decoration:none;display:inline-block;flex-shrink:0}
.wb-av .l s.gr{background:#fff;box-shadow:inset 0 0 0 2px #A8B0BC}
/* Вторая ступень — зелёный контур: товар будет, но не сегодня. Заливка остаётся только у своего
склада: она означает «можно забрать через час», и разбавлять её нельзя. */
.wb-av .l{align-items:flex-start}
.wb-av .l s{margin-top:5px}
.wb-av .tt{min-width:0;white-space:normal}
/* Продолжение лесенки — тише первой строки: это добор, а не отдельное предложение. */
/* ⭐ 19.09: ПЛИТКИ НАЛИЧИЯ (решение владельца со снимком effort-group.ru). Две плитки, не больше:
слева «можно забрать сегодня», справа ближайшая поставка. Заливка плиток — единственный способ
отличить их от строк карточки: рамок здесь нет, карточка и так белая. */
/* Шапка блока: имя слева, возраст обмена справа — он про ОСТАТКИ, поэтому живёт здесь, а не в строке
действий у заголовка товара (макет 19.09). */
.wb-av .avh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--border)}
.wb-av .avh h4{margin:0;padding:0;border:0;font-size:17px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--text);display:block}
.wb-av .avm{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;color:var(--textDim)}
.wb-av .avm .fresh i{width:7px;height:7px;border-radius:var(--rPill);background:var(--green);display:inline-block;margin-right:6px}
.wb-av .avm .fresh{display:inline-flex;align-items:center}
.wb-av .avm i{font-style:normal}
.wb-av .avm>i{color:var(--green);font-weight:600}
/* ⭐ 22.09 (владелец по карточке ИБП INFOLCD2000SI): «количество на одном уровне — чтобы смотрелось дорого». Плитка была
flex-колонкой, и строки в каждой жили сами по себе: стоило шапке «Дополнительно под заказ» уйти на вторую строку, число
справа съезжало ниже левого (на телефоне — на 17 px). А уходит она почти всегда: при 100 % надпись влезает в плитку с
запасом 0,06 px, при масштабе страницы и на телефоне — нет. Подгонять пиксели бесполезно, поэтому строки плитки стали
ОБЩИМИ для ряда (subgrid): шапка · число · текст · [цена]. Высоту строки задаёт самая высокая из плиток — значки, числа,
первые строки текста и цены стоят на одних линиях при любом переносе. Четвёртая строка (цена ступени) — только у .priced. */
.wb-av .tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:9px 10px;margin-top:12px}
.wb-av .tiles.priced{grid-template-rows:auto auto 1fr auto}
/* Кромка (разбор 19.09): плитки отличались от белой карточки ТОЛЬКО заливкой с контрастом 1,09–1,11:1 — на дешёвом
мониторе и в режиме высокой контрастности они пропадали совсем. Волосок держит форму там, где заливки не видно. */
.wb-tile{grid-row:span 3;display:grid;grid-template-rows:subgrid;min-width:0;border-radius:var(--r2);padding:14px 16px 16px;gap:9px;border:1px solid rgba(26,34,49,.07)}
.wb-av .tiles.priced .wb-tile{grid-row:span 4}
.wb-tile h5 svg{flex-shrink:0}
/* Цена ступени — подвалом плитки, отделена волоском. Прижата книзу (margin-top:auto), чтобы у двух
плиток разной высоты цены стояли на одной линии. */
.wb-tile .pr{margin-top:auto;padding-top:10px;border-top:1px solid rgba(26,34,49,.09);font-size:13px;font-weight:700;color:var(--text)}
.wb-tile.own{background:var(--ownStockBg);border-color:var(--ownStockBorder)}
/* 20.09: в колонке залито только САМОЕ ВАЖНОЕ. Плашка под числом цены и плитка «под заказ»
были ОДНИМ цветом (#F6F5F2) — главное число страницы и справочная плитка читались как
объекты одного ранга. Плитки поставки теперь белые с волосяной рамкой; зелёная заливка
осталась там, где означает «можно забрать сегодня». Новых цветов в колонке не появилось. */
.wb-tile.sup{background:#fff;border-color:var(--cardBorder)}
.wb-tile.way{background:#fff;border-color:var(--cardBorder)}
.wb-tile.stock{background:#fff;border-color:var(--cardBorder)}
/* 22.09: значок стоит по ПЕРВОЙ строке шапки (строка 18 px = высота значка). По центру двух строк он уезжал ниже значка
соседней плитки. Перенос — ровными строками: «Дополнительно / под заказ», а не «Дополнительно под / заказ». */
.wb-tile h5{margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--text);display:flex;align-items:flex-start;gap:9px;text-wrap:balance}
/* Точный остаток партнёра бывает длинным («12 480 м»): число обязано ужиматься, а не вылезать из плитки на телефоне. */
.wb-tile .q{display:flex;align-items:baseline;gap:6px;line-height:1;flex-wrap:wrap;min-width:0}
.wb-tile .q b{font-size:clamp(22px,6.4vw,30px);min-width:0;overflow-wrap:anywhere;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
.wb-tile .q small{font-size:13px;color:var(--textMuted)}
.wb-tile p{margin:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.45;color:var(--textMuted)}
.wb-tile p .hi{color:var(--text);font-weight:600}
.wb-tile p .dt{font-weight:700;white-space:nowrap}
.wb-tile p .nw{white-space:nowrap} /* предлог при слове, число при «рабочих дня» — см. itRender, плитки */
/* Сноска «Нужно больше?» — тихая строка, не ссылка: вести ей некуда. */
.wb-more{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:10px;padding:11px 14px;border:1px solid var(--cardBorder);border-radius:var(--r2);
font-size:12.5px;color:var(--textMuted)} /* 20.09: #FCFBF9 снят — четвёртый почти-белый в кадре был шумом, рамки хватает */
.wb-more .mi{display:inline-flex;color:var(--textDim);flex-shrink:0}
.wb-more .mi svg{width:16px;height:16px}
.wb-more .ttl{flex-grow:1}
.wb-more .val{font:inherit;font-weight:700;color:var(--accent);white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;text-align:right}
.wb-more .val:hover{text-decoration:underline}
.wb-more .val:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:4px}
@media (max-width:340px){.wb-av .tiles{display:flex;flex-direction:column}.wb-tile{display:flex;flex-direction:column}} /* уже 340 px две плитки рядом ломают слова — встают столбцом; общие строки столбцу не нужны, плитка снова сама себе колонка */
/* 22.09: у двух плиток на телефоне 360–400 px (141–161 px шириной) рядом со значком оставалось 88–108 px, а слово
«Дополнительно» — 109,5 px: оно вылезало на рамку плитки. Здесь значок встаёт НАД надписью, подписи — вся ширина.
С 421 px значок снова сбоку (запас от 8 px); столбец ≤340 px — тоже сбоку, там плитка во всю ширину. */
@media (min-width:341px) and (max-width:420px){.wb-tile h5{flex-direction:column;gap:6px}}
@media (max-width:560px){
.wb-av .tiles{column-gap:8px}
.wb-tile{padding:12px 12px 14px}
.wb-more{flex-direction:column;align-items:flex-start;gap:4px}
.wb-more .val{white-space:normal}
}
/* покупка */
.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 (степпер ушёл от корзины) */
/* 13.09 (решение владельца): «В корзину» в карточке — ЗАЛИВНАЯ, одна на экран; плитки остаются контурными */
.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);background:var(--accentSolid);color:#fff;font-size:14px;font-weight:600;
display:inline-flex;align-items:center;justify-content:space-between;gap:12px;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(--accentHover)} .wb-cta:active{transform:scale(.98)}
.wb-cta.ok{background:var(--green);border-color:var(--green);color:#fff}
.wb-cta.ok:hover{background:#126B33}
/* Разбор 19.09: «Обновить» красилось --accent (#DB5524) — третий оранжевый на одной кнопке, причём слабее ховера.
Состояние «ждёт нажатия» = тот же тон, что ховер: пара из двух цветов, а не тройка. */
.wb-cta.upd{background:var(--accentHover)}
.wb-cta.just{background:var(--green);border-color:var(--green)}
.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}
/* Мелкий акцент-текст — чернилами с подчёркиванием (как .wb-lock b): мандарин на белом 3,7:1 при норме 4,5 */
.e-ask b{color:var(--text);font-weight:600;border-bottom:1px solid var(--border)}
@media (hover:hover){.e-ask:hover b{color:var(--accent);border-color:var(--accentSolid)}}
.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)}
/* Телефон: вкладки одной строкой со смахиванием. При переносе («Документы · 3» уходила на вторую строку при 375) бегунок
стоял у низа контейнера — на 38 px ниже своей вкладки (замер 12.09). bottom:0 — за пределами overflow:auto бегунок режется. */
@media (max-width:760px){
.wb-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.wb-tabs::-webkit-scrollbar{display:none}
.wb-tabs button{flex-shrink:0}
.wb-tabs i{bottom:0}
}
.wb-pane{flex:1;min-height:160px;overflow:hidden}
.wb-pane>div{display:none}
/* Смена вкладки = смена листа, не листание: 160 мс opacity + 4 px, без шторки clip-path (400 мс покадрового paint) */
.wb-pane>div.on{display:block;animation:tabIn .16s cubic-bezier(.2,.8,.25,1)}
@keyframes tabIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.wb-pane .ef1{grid-template-columns:1fr 1fr}
.wb-pane .ef1 .row{opacity:1} /* каскад строк на каждый клик по вкладке снят: вкладки отвечают ≤200 мс */
.wb-pane .ef1x{margin-top:8px}
.wb-groups{columns:1}
.wb-pane .e-srow{opacity:1} /* отточия статичны, строки без каскада */
.wb-doc{opacity:1}
.wb-doc svg{transition:transform .2s cubic-bezier(.2,.8,.25,1)} @media (hover:hover){.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:var(--r4);
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:var(--rIn);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:17px;font-weight:700;white-space:nowrap}
/* чип разницы цены у похожих */
/* 13.09: разница цены — словами и чернилами на серой подложке (10 px оранж на accentDim = 3,4:1, знак «+» читался как «плюс к чему?») */
.e-rc .df{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--text);background:var(--surface2);border-radius:var(--rPill);padding:2px 7px;vertical-align:2px;white-space:nowrap}
.e-rc .df.eq{color:var(--textDim)}
@media (prefers-reduced-motion:reduce){.wb-stage img{transition:none}.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-l,.pre-l{--stageH:300px}
.wb-tabs button{padding:10px 10px;font-size:13px}
.wb-r{border-left:0;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%}
}
/* Одна настройка ОС — одно правило: все анимации встают в конечный кадр (содержимое видно), шиммеры и переходы
останавливаются. Адресные блоки выше остаются — они задают, ЧТО именно видно (opacity:1, transform:none). */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* ═══ ЦИФРЫ ДВИЖУТСЯ ВСЕГДА (15.09.2026) ═══ Владелец: анимация цифр — «как при включённой анимации, так и при выключенной».
Одометры количества (карточка, корзина, шторка), толчок счётчика и подъём суммы в шапке, барабан «Каталог сейчас»: число
меняется на месте, по экрану ничего не едет. Правило выше гасит их вместе со всем, поэтому здесь длительности возвращены
(!important + класс сильнее звёздочки). Всё остальное движение по-прежнему слушает настройку системы. JS — numMotionOk(). */
@media (prefers-reduced-motion:reduce){
.cq .odo input,.cq .odo .g,.wb-qty .odo .g{transition-duration:.3s!important}
.wb-qty .odo input{transition-duration:.3s,.3s,.15s!important}
.cartw-n.bump{animation-duration:.34s!important}
.cartw-t b.upd{animation-duration:.26s!important}
.nreel.go .nd::after{transition-duration:var(--t)!important}
}
/* Барабан: цифра в разметке настоящая и прозрачная, крутится только нарисованная лента ::after (два круга 0–9).
Текст узла = число ВСЕГДА: робот, читалка и копирование видят «53 152», а не кадры прокрутки; высота строки прежняя — сдвига нет.
Конечную цифру (строка --k ленты) ставит РАСКЛАДКА: top в % высоты разряда совпадает со строками ленты до LayoutUnit, а сдвиг
transform к концу уходит в none. Если бы конец задавал transform (дробные px), цифра при уборке ленты прыгала бы на 1 px. */
.nreel{white-space:nowrap}
.nreel .nd{position:relative;display:inline-block;margin:0;padding:0;font:inherit;-webkit-text-fill-color:transparent;clip-path:inset(0 -.25em)} /* цифра — : span внутри .ab-num ловит правило подписи (display:block, 13px) */
.nreel .nd::after{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";position:absolute;left:0;
top:calc(var(--k) * -100%);transform:translateY(calc(var(--k) * 5%));white-space:pre;-webkit-text-fill-color:currentColor;pointer-events:none}
.nreel.go .nd::after{transform:none;transition:transform var(--t) cubic-bezier(.16,1,.3,1) var(--w)}
@media print{.nreel .nd{-webkit-text-fill-color:currentColor}.nreel .nd::after{content:none}}
/* ═══ РАУНД 2 ДИЗАЙНА (13.09.2026, «всё согласовано») ═══════════════════════════════════════
Главная: строка условий и «Все N →»; листинг: путь, фасеты-чипы, конец и нулевая выдача; карточка: адрес ПВЗ,
копирование характеристик; корзина: срок в строке, «Очистить» в шапке, ИНН, ошибка у поля, состав после отправки;
мега-меню: счётчики «в наличии»; подсказки: группы; телефон: мини-полоса, лист меню, имя над фото; доступность. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar svg{stroke-width:1.8} /* один вес линии у иконок шапки */
.ico-cam,.ico-cam:hover{color:var(--textDim)} /* камера — серой, пока функции нет (была единственной оранжевой) */
#pcat-l{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} /* длинное имя раздела не сжимает поле */
.chip{background:#fff;border-color:var(--accentSolid);color:var(--text)} .chip b{color:var(--text)} /* выбранное = тонкая рамка */
.res-path{font-size:13px;color:var(--textMuted);margin:0 0 6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.res-path a{color:var(--textMuted);border-bottom:1px solid var(--border);text-decoration:none} .res-path a:hover{color:var(--accent);border-color:var(--accentSolid)}
.res-terms .fch{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--rPill);background:#fff;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:border-color .15s}
.res-terms .fch.on{border-color:var(--accentSolid)} .res-terms .fch b{font-weight:500;color:var(--textDim);font-size:12px;font-variant-numeric:tabular-nums}
.res-terms .fch:first-child span{color:var(--green);font-weight:600} .res-terms .fch:active{transform:scale(.97)}
@media (hover:hover){.res-terms .fch:hover{border-color:var(--border2)}}
.more{flex-direction:column;align-items:center;gap:10px}
.more .shown{font-size:13px;color:var(--textMuted)}
.more .up{font-size:13px;color:var(--text);border:0;border-bottom:1px solid var(--border);background:none;padding:0;cursor:pointer;font-family:inherit}
.grid.busy,.rows.busy{opacity:.55;transition:opacity .15s} /* смена сортировки: старые плитки ждут, а не сносятся в скелеты */
.res-empty{grid-column:1/-1;background:#fff;border:1px solid var(--cardBorder);border-radius:var(--r4);padding:28px 32px;max-width:720px;margin:4px 0 40px}
.res-empty h3{margin:0 0 8px;font-size:20px;font-weight:600;letter-spacing:-.3px} .res-empty p{margin:0 0 8px;color:var(--textMuted);font-size:14px;line-height:1.5}
.res-empty p a{color:var(--text);border-bottom:1px solid var(--border)}
.res-empty .acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.res-empty .b1,.res-empty .b2{height:38px;padding:0 16px;border-radius:var(--r2);background:#fff;font-weight:600;font-size:13px;display:inline-flex;align-items:center;cursor:pointer;font-family:inherit}
.res-empty .b1{border:1px solid var(--accentSolid);color:var(--accent)} .res-empty .b2{border:1px solid var(--border);color:var(--text)}
.res-empty .b1:active,.res-empty .b2:active{transform:scale(.97)}
#sug .sug-nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
#sug .sug-grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--cardBorder);font-size:13px}
#sug .sug-grp .t{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--textDim);margin-right:4px}
#sug .sug-grp button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--rPill);background:#fff;color:var(--text);font-weight:500;font-family:inherit;font-size:13px;cursor:pointer}
#sug .sug-grp button b{font-weight:500;color:var(--textDim);font-size:12px}
@media (hover:hover){#sug .sug-grp button:hover{border-color:var(--accentSolid)}}
.cnt i.tot{font-style:normal;color:var(--textDim);font-size:11px;font-weight:500}
.crow .cnt{white-space:normal;text-align:right;line-height:1.2}
.wb-av .r .addr{display:block;font-size:12px;color:var(--textMuted);margin-top:2px;white-space:normal;font-weight:400}
.wb-pass h4{display:flex;align-items:baseline;gap:12px}
.copy-specs{margin-left:auto;font-size:12px;font-weight:600;color:var(--text);border:0;border-bottom:1px solid var(--border);cursor:pointer;background:none;padding:0;font-family:inherit;text-transform:none;letter-spacing:0}
@media (hover:hover){.copy-specs:hover{color:var(--accent);border-color:var(--accentSolid)}}
.crow-av{font-size:12px;color:var(--textMuted);margin-top:3px} .crow-av .g{color:var(--green);font-weight:600}
.cartp-h .c-clear{font-size:12px;color:var(--textMuted);background:none;border:0;border-bottom:1px solid var(--border);padding:0;margin:0 12px 0 0;height:auto;font-family:inherit;cursor:pointer;white-space:nowrap}
.cartp-h .c-clear.armed{color:var(--red);border-color:var(--red)}
.frow .fmsg{font-size:12px;color:var(--red);margin-top:5px}
.cdone-list{margin:14px 0 10px;border-top:1px solid var(--cardBorder)}
.cdone-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--cardBorder)} .cdone-row b{white-space:nowrap;font-weight:600}
.ssr-news-list .cv{display:block;margin:-14px -16px 10px;border-radius:10px 10px 0 0;overflow:hidden;aspect-ratio:3/2;background:var(--surface2)}
.ssr-news-list .cv img{width:100%;height:100%;object-fit:cover;display:block}
.ssr-news-list h2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ssr-news-list article>p:last-child{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.news-rubrics{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.news-rubrics button{height:30px;padding:0 12px;border:1px solid var(--border);border-radius:var(--rPill);background:#fff;font:500 13px var(--font);color:var(--text);cursor:pointer}
.news-rubrics button.on{border-color:var(--accentSolid)}
/* мини-полоса телефона */
.mbar{display:none;position:fixed;top:0;left:0;right:0;z-index:125;background:var(--page);padding:8px 12px;gap:8px;align-items:center;box-shadow:0 1px 0 var(--border)}
.mbar-logo{display:flex;flex-shrink:0} .mbar-logo img{display:block}
.mbar-q{flex:1;min-width:0;height:40px;border:1px solid var(--border);border-radius:var(--r2);background:#fff;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--textDim);font:400 14px var(--font);text-align:left}
.mbar-q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbar-cart{position:relative;width:40px;height:40px;border:1px solid var(--border);border-radius:var(--r2);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--textMuted);flex-shrink:0}
.mbar-cart i{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--rPill);background:var(--accentSolid);color:#fff;font:600 11px/18px var(--font);font-style:normal}
/* 19.09 (владелец): вход в кабинет на телефоне — человечком. Тот же размер, что корзина рядом. */
.mbar-lk{width:40px;height:40px;border:1px solid var(--border);border-radius:var(--r2);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--textMuted);flex-shrink:0}
.mbar-lk.in{color:var(--green);border-color:var(--green)} /* вошёл — видно по цвету, не только по экрану за кликом */
.ico-lkm{display:none} /* на десктопе вход живёт в строке поиска (#a-lk) */
@media (max-width:600px){
.mbar:not([hidden]){display:flex}
.bar{position:static} /* три яруса больше не липнут — липнет мини-полоса */
.qrow{display:none} /* «Все разделы + телефон»: разделы — в «Категории», телефон — в подвале */
body.searching .brandrow,body.searching #brands-sub{display:none} /* бренды над выдачей — в поповере «Бренд» */
body.searching .brandrow+*{margin-top:0}
#res-terms{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px 4px;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
#res-terms::-webkit-scrollbar{display:none} #res-terms>*{flex:0 0 auto;white-space:nowrap}
.wb-l{--stageH:230px}
.wb-head{grid-column:1/-1;padding:16px 18px 0;background:#fff} .wb-head .wb-kind{font-size:13px;color:var(--textMuted)} .wb-head .wb-sku{font-size:12px;color:var(--textMuted);margin-top:2px}
.wb-head h1{font-size:20px;margin:4px 0 0;letter-spacing:-.3px;line-height:1.25}
.cq button,.crow-del,.cartp-x{min-width:44px;min-height:44px} /* цели касания */
body.pop-open .e-stick,body.pop-open .mbar{display:none}
/* мега-меню — лист на весь экран: корни лентой чипов, подразделы во всю ширину, кнопка «Показать» приклеена снизу */
#pop-cat{position:fixed;inset:0;width:auto;max-width:none;max-height:none;border-radius:0;display:flex;flex-direction:column;box-shadow:none;z-index:500}
#pop-cat[hidden]{display:none}
#pop-cat .panes{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}
#cat-l{display:flex;flex-direction:row;overflow-x:auto;flex-wrap:nowrap;width:auto;max-width:none;min-width:0;border-right:0;border-bottom:1px solid var(--border);padding:8px 12px;gap:6px;scrollbar-width:none;flex:0 0 auto;max-height:none}
#cat-l::-webkit-scrollbar{display:none}
#cat-l .crow{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;padding:7px 12px;border:1px solid var(--border);border-radius:var(--rPill);background:#fff;width:auto;gap:0;height:auto}
#cat-l .crow.on{border-color:var(--accentSolid);background:#fff} #cat-l .crow .nm{white-space:nowrap;font-size:13px;overflow:visible;max-width:none}
#cat-l .crow .cnt{display:none}
#cat-r{padding:12px 16px;width:auto} #cat-r .nm{white-space:normal}
#cat-foot{position:sticky;bottom:0;background:#fff}
}
/* ═══ КОРЗИНА-СТРАНИЦА · ОФОРМЛЕНИЕ · ОКНО ПАРТНЁРСТВА (13.09.2026, по композиции effort-group.ru; макет утверждён владельцем) ═══
Шторка остаётся мини-корзиной. Заливная кнопка — ОДНА на экран: «Оформить заказ», «Отправить заявку», «Отправить». */
body.cart-open #news,body.cart-open .wrap.home,body.cart-open .quick,
body.checkout-open #news,body.checkout-open .wrap.home,body.checkout-open .quick{display:none}
.pgw{max-width:1440px;margin:0 auto;padding:14px 24px 64px}
.pg-crumbs{font-size:12px;color:var(--textDim);margin:2px 0 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.pg-crumbs button{color:var(--textMuted)}.pg-crumbs button:hover{color:var(--accent)}
.pg-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pg-h1{font-size:32px;font-weight:600;letter-spacing:-.6px;line-height:1.1;margin:0}
.pg-rule{width:88px;height:3px;background:var(--accentSolid);border-radius:2px;margin:12px 0 22px}
.btn-fill{height:52px;padding:0 22px;border-radius:var(--r3);border:1px solid var(--accentSolid);background:var(--accentSolid);color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;transition:background .15s,transform .12s cubic-bezier(.2,.8,.25,1)}
.btn-fill:hover{background:var(--accentHover)}.btn-fill:active{transform:scale(.98)}.btn-fill:disabled{opacity:.6;cursor:default;transform:none}
.btn-ghost{height:44px;padding:0 16px;border-radius:var(--r2);border:1px solid var(--border);color:var(--textMuted);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}.btn-ghost:hover{color:var(--text);border-color:var(--text)}
/* корзина */
.cp-clear{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--textMuted);height:32px;margin-top:8px;transition:color .15s}.cp-clear:hover,.cp-clear.armed{color:var(--red)}.cp-clear svg{width:15px;height:15px}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.cp-tbl{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);box-shadow:var(--e1);overflow:hidden}
.cp-th,.cp-row{display:grid;grid-template-columns:76px minmax(0,1fr) 150px 150px 130px 36px;gap:16px;align-items:center;padding:14px 20px}
.cp-th{background:var(--page);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--textDim);font-weight:600;padding:12px 20px}.cp-th .r{text-align:right}
.cp-row{border-top:1px solid var(--cardBorder);padding:18px 20px;position:relative}
.cp-ph{width:76px;height:76px;border:1px solid var(--cardBorder);border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;overflow:hidden}.cp-ph img{max-width:84%;max-height:84%;object-fit:contain}.cp-ph span{font-size:10px;color:var(--textDim)}
.cp-nm a{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}.cp-nm a:hover{color:var(--accent)}.cp-meta{font-size:12px;color:var(--textDim);margin-top:4px}
.cp-pr{font-size:14px;font-variant-numeric:tabular-nums;color:var(--textMuted)}.cp-pr small{font-size:12px;color:var(--textDim)}.cp-pr .ask{font-size:12px;font-weight:600;color:var(--textMuted)}
.cq.big{height:42px;border-radius:12px;gap:0}.cq.big button{width:40px;height:40px;background:var(--accentDim);color:var(--accent);border-radius:0;font-size:18px}.cq.big button:hover{background:#FFE1D0}.cq.big input{width:56px;height:40px;font-size:15px}
.cp-sum{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.cp-del{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);color:var(--textDim);display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}.cp-del:hover{color:var(--red);border-color:var(--red)}.cp-del svg{width:14px;height:14px}
.cp-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--textMuted);margin-bottom:14px;transition:color .15s}.cp-back:hover{color:var(--accent)}
.cp-box{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);box-shadow:var(--e2);padding:24px}
.cp-box .t{font-size:15px;color:var(--textMuted);margin-bottom:4px}.cp-box .big{font-size:32px;font-weight:600;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.1}
.cp-box .sub{font-size:13px;color:var(--textDim);margin:8px 0 18px;line-height:1.5}.cp-box .fine{font-size:12px;color:var(--textDim);line-height:1.5;margin-top:14px}.cp-box .fine b{color:var(--text);font-weight:600}
.cp-empty{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);padding:56px 24px;text-align:center;color:var(--textDim)}.cp-empty b{display:block;font-size:17px;color:var(--text);margin-bottom:6px}.cp-empty .btn-fill{max-width:280px;margin-top:18px}
/* оформление */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.co-blk{padding:22px 0 26px;border-bottom:1px solid var(--cardBorder)}.co-blk.last{border-bottom:0}.co-blk h3{font-size:20px;font-weight:600;letter-spacing:-.3px;margin:0 0 14px}
.co-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px;margin-bottom:14px}
.co-seg button{height:50px;border:1px solid var(--border);border-radius:12px;font-size:14px;font-weight:600;color:var(--textMuted);background:var(--bgCard);display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,background .15s}.co-seg button.on{border-color:var(--accentSolid);color:var(--accent);background:var(--accentDim)}
.fl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:940px}.fl2{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px}.fl1{max-width:940px}
.fx{position:relative}.fx input,.fx textarea{width:100%;height:50px;border:1px solid var(--border);border-radius:12px;padding:0 14px;font:inherit;font-size:14px;background:var(--bgInput);outline:none;color:var(--text)}.fx textarea{height:100px;padding:12px 14px;resize:vertical;line-height:1.5}
.fx input:focus,.fx textarea:focus{border-color:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}.fx i{position:absolute;right:12px;top:16px;color:var(--accent);font-style:normal;font-size:16px;pointer-events:none}.fx.bad input,.fx.bad textarea{border-color:var(--red)}.fx .fmsg{font-size:12px;color:var(--red);margin-top:4px}
.co-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:940px}
.co-opt{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--bgCard);cursor:pointer;display:flex;gap:12px;align-items:flex-start;text-align:left;transition:border-color .15s,box-shadow .15s}.co-opt.on{border-color:var(--accentSolid);box-shadow:0 0 0 1px var(--accentSolid) inset}
.co-opt s{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border2);flex:0 0 auto;margin-top:1px;text-decoration:none;position:relative}.co-opt.on s{border-color:var(--accentSolid)}.co-opt.on s::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--accentSolid)}
.co-opt b{display:block;font-size:14px;font-weight:600;margin-bottom:3px}.co-opt span{font-size:12px;color:var(--textMuted);line-height:1.45}
.agree2{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--textMuted);margin:16px 0 14px;max-width:620px;cursor:pointer}.agree2 input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}.agree2 a{color:var(--accent);border-bottom:1px solid rgba(40,88,115,.35)}.agree2.bad{color:var(--red)}
.co-grid .btn-fill{max-width:320px}.co-note{font-size:12px;color:var(--textDim);margin-top:12px;line-height:1.5;max-width:620px}
.co-box{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);box-shadow:var(--e2);padding:22px 24px;position:sticky;top:70px}.co-box h4{font-size:17px;font-weight:600;margin:0 0 14px}
.co-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--cardBorder)}.co-row .ph{width:56px;height:56px;border:1px solid var(--cardBorder);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}.co-row .ph img{max-width:84%;max-height:84%;object-fit:contain}.co-row .ph span{font-size:10px;color:var(--textDim)}
.co-row .nm{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.co-row .meta{font-size:12px;color:var(--textDim);margin-top:3px}.co-row b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.co-box .cnt{font-size:13px;color:var(--textDim);margin:12px 0 6px}.co-box .tot{display:flex;justify-content:space-between;align-items:baseline}.co-box .tot span{font-size:14px;color:var(--textMuted)}.co-box .tot b{font-size:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.co-box .edit{display:inline-block;margin-top:12px;font-size:13px;color:var(--accent);border-bottom:1px solid rgba(40,88,115,.35)}
.co-who{font-size:14px;margin:0 0 6px}.co-who b{font-weight:700}
.co-done{max-width:640px;background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);box-shadow:var(--e1);padding:8px 24px 24px}.co-done .btn-ghost{margin-top:8px}
/* партнёрство — окно */
.pm-dim{position:fixed;inset:0;z-index:330;background:rgba(26,34,49,.45);opacity:0;transition:opacity .2s}.pm-dim.on{opacity:1}
.pm-mod{position:fixed;left:50%;top:50%;z-index:331;width:min(560px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--bgCard);border-radius:var(--r4);box-shadow:0 30px 60px -30px rgba(26,34,49,.5),var(--e2);padding:28px 30px 26px;transform:translate(-50%,-48%);opacity:0;transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1)}.pm-mod.on{opacity:1;transform:translate(-50%,-50%)}
.pm-x{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--textMuted);transition:color .15s,background .15s}.pm-x:hover{color:var(--text);background:var(--bgHover)}
.pm-mod h3{font-size:25px;font-weight:700;letter-spacing:-.4px;margin:0 40px 6px 0}.pm-lead{font-size:13px;color:var(--textMuted);line-height:1.55;margin:0 0 18px}
.pm-mod .fl2{max-width:none}.pm-mod .fx.w{grid-column:1/-1}.pm-mod .agree2{margin:14px 0 6px}.pm-mod .agree2+.agree2{margin-top:0}.pm-mod .btn-fill{margin-top:12px}.pm-mod .cdone{padding:24px 0 8px}
@media (prefers-reduced-motion:reduce){.pm-mod,.pm-dim{transition:none}}
@media (max-width:1000px){.cp-grid,.co-grid{grid-template-columns:1fr}.co-box{position:static}.fl3,.co-opts{grid-template-columns:1fr}}
@media (max-width:760px){.pgw{padding:10px 14px 48px}.pg-h1{font-size:25px}.cp-th{display:none}.cp-row{grid-template-columns:64px minmax(0,1fr);grid-auto-rows:auto;gap:10px 12px;padding:14px 14px 14px}.cp-ph{width:64px;height:64px}.cp-pr,.cp-sum{text-align:left}.cp-del{position:absolute;right:12px;top:12px}.cp-box .big{font-size:26px}
.pm-mod{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92%;border-radius:20px 20px 0 0;transform:translate(0,12px);padding:22px 18px 18px}.pm-mod.on{transform:none}.fl2,.co-seg{grid-template-columns:1fr}.co-grid .btn-fill{max-width:none}}
/* INFO DOCUMENT LAYOUT — 2026-09-13 */
/* Only company documents: the app reuses the same server section, without a second page gutter. */
#page-seo > :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty){max-width:1180px;margin:0 auto;padding:32px 20px 64px}
[data-info-page] .ssr-info-app{max-width:none;margin:0;padding:0}
[data-info-page] .ssr-info-app > .ssr-info{max-width:none;margin:0;padding:20px 0 0}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty){font-family:inherit;font-size:16px;line-height:1.65;overflow-wrap:break-word}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) h1{font-family:inherit;font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.025em;text-wrap:balance;margin:0 0 20px;max-width:24ch}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .ssr-lead{font-size:16px;line-height:1.65;max-width:72ch;margin:0 0 32px;color:var(--textMuted)}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) h2{font-size:24px;line-height:1.25;letter-spacing:-.02em;margin:40px 0 16px;text-wrap:balance}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) p{max-width:75ch}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;align-items:stretch}
#page-seo > .ssr-about .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .ab-card{min-width:0;padding:28px;border:1px solid var(--cardBorder);border-radius:16px;background:var(--bgCard);box-shadow:none}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .cards .ab-card h2{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0 0 16px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .cards .ab-card p{font-size:16px;line-height:1.65;margin:0 0 12px;color:var(--textMuted)}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .cards .ab-card p:last-child{margin-bottom:0}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) a{color:#A6421C;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) a:hover{color:var(--text);text-decoration-thickness:2px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) a:focus-visible{outline:2px solid #A6421C;outline-offset:4px;border-radius:3px}
:is(#page-seo,[data-info-page]) :is(.ssr-delivery,.ssr-payment) dl.faq{max-width:75ch;margin:0}
:is(#page-seo,[data-info-page]) :is(.ssr-delivery,.ssr-payment) dl.faq dt{font-size:17px;line-height:1.4;font-weight:600;margin:24px 0 0;padding-top:24px;border-top:1px solid var(--border)}
:is(#page-seo,[data-info-page]) :is(.ssr-delivery,.ssr-payment) dl.faq dd{font-size:16px;line-height:1.65;margin:8px 0 0;color:var(--textMuted)}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .ssr-info-nav{font-size:14px;line-height:1.4;gap:0 16px;align-items:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .ssr-info-nav a{min-height:44px;display:inline-flex;align-items:center;color:var(--textMuted)}
:is(#page-seo,[data-info-page]) .ssr-warranty .ab-card:nth-child(2) :is(a[href^="mailto:"],a[href^="tel:"]){display:inline-flex;align-items:center;min-height:44px;max-width:100%;margin:4px 0;padding:8px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--page);font-weight:600;text-decoration:none}
:is(#page-seo,[data-info-page]) .ssr-warranty .ab-card:nth-child(2) :is(a[href^="mailto:"],a[href^="tel:"]):hover{background:var(--accentDim);border-color:#A6421C}
[data-info-page="warranty"] > .ab-foot .cta{background:transparent;border-color:var(--border2);color:var(--textMuted)}
#page-seo > :is(.ssr-about,.ssr-contacts,.ssr-requisites) :is(.facts,.offices,.ct-ln){font-size:16px;line-height:1.65}
#page-seo > .ssr-about .facts{gap:16px 28px;margin:0 0 32px}
#page-seo > .ssr-contacts .offices li{padding:14px 0}
#page-seo > .ssr-requisites table.rq{font-size:16px;line-height:1.5;max-width:960px;table-layout:fixed;font-variant-numeric:tabular-nums}
#page-seo > .ssr-requisites table.rq th{width:35%;padding:14px 24px 14px 0;white-space:normal}
#page-seo > .ssr-requisites table.rq td{padding:14px 0;overflow-wrap:anywhere}
@media (max-width:760px){
[data-info-page] .ssr-info-app > .ssr-info{padding-top:8px}
#page-seo > :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty){padding:24px 20px 48px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty){font-size:15px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) h1{font-size:29px;line-height:1.1;letter-spacing:-.025em;margin-bottom:16px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .ssr-lead{font-size:15px;margin-bottom:24px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .cards{grid-template-columns:minmax(0,1fr);gap:16px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .ab-card{padding:20px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .cards .ab-card p{font-size:15px}
:is(#page-seo,[data-info-page]) :is(.ssr-delivery,.ssr-payment) dl.faq dd{font-size:15px}
:is(#page-seo,[data-info-page]) :is(.ssr-about,.ssr-contacts,.ssr-requisites,.ssr-delivery,.ssr-payment,.ssr-warranty) .ssr-info-nav{margin-top:32px;gap:0 14px}
#page-seo > .ssr-requisites table.rq{font-size:14px}
#page-seo > .ssr-requisites table.rq th{width:38%;padding-right:16px}
}
/* INFO PRACTICAL PAGES — 2026-09-13. Scoped to the six company pages. */
[data-info-page]{--info-link:var(--accent);--textDim:var(--textMuted);min-width:0}
[data-info-page] .ab-back{min-height:44px;height:auto;margin:0 0 12px;padding:10px 12px 10px 8px}
[data-info-page] :is(.ab-back,.rq-all,.cta){color:var(--info-link)}
[data-info-page] :is(a,button):focus-visible{outline:2px solid var(--info-link);outline-offset:4px}
[data-info-page] ::selection{background:var(--accentDim);color:var(--text)}
[data-info-page] .abfox{min-height:390px;margin:0 0 28px;gap:32px}
[data-info-page] .abfox .tx{width:48%;max-width:530px;padding:24px 0}
[data-info-page] .abfox h1{line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
[data-info-page] .abfox p{font-size:16px;line-height:1.65;max-width:48ch;margin-bottom:20px}
[data-info-page="about"] .abfox .art{width:min(42%,420px)}
[data-info-page="contacts"] .abfox,[data-info-page="requisites"] .abfox{min-height:300px}
[data-info-page="contacts"] .abfox .art{width:min(47%,480px)}
[data-info-page="requisites"] .abfox .art{width:min(46%,440px)}
[data-info-page] :is(.ab-card,.ab-o,.ab-foot,.ab-num){border-radius:var(--r3)}
[data-info-page] :is(.ab-card,.ct-col,.ct-grid,.ab-nums){min-width:0}
[data-info-page] .ab-card h3{font-size:18px;line-height:1.35}
[data-info-page] .ab-card :is(p,ul){font-size:15px;line-height:1.65}
[data-info-page] .ct-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;margin-top:0}
[data-info-page] .ct-how{padding:14px 16px;font-size:14px;line-height:1.6}
[data-info-page] .ct-card .ln{gap:6px 18px;margin-top:16px}
[data-info-page] .ct-card .ln a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-underline-offset:4px;text-decoration:underline;text-decoration-color:var(--border2)}
[data-info-page] .ct-hero-ln a{min-height:44px;overflow-wrap:anywhere}
[data-info-page] .ct-hero-ln a small{font-size:12px;color:var(--textMuted)}
[data-info-page] .rq-all{height:auto;min-height:44px;padding:10px 16px;white-space:normal}
[data-info-page] .rq-row{padding:12px 0;grid-template-columns:minmax(120px,180px) minmax(0,1fr)}
[data-info-page] .rq-k{font-size:13px}
[data-info-page] .rq-v{font-size:15px;line-height:1.55}
[data-info-page] .rq-v small{font-size:13px}
[data-info-page] .ab-foot{margin-top:24px;padding:22px 24px;gap:16px}
[data-info-page] .ab-foot .cta{min-height:44px}
[data-info-page] .ab-nums{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
[data-info-page] .ab-nums-h{min-width:0;flex-wrap:wrap;gap:4px 12px}
[data-info-page] .ab-num{min-width:0;box-shadow:none;padding:20px}
[data-info-page] .ab-num b{overflow-wrap:anywhere}
[data-info-page] .ab-nums-h span{max-width:100%;line-height:1.5}
@media (max-width:900px){
[data-info-page] .abfox{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.7fr);align-items:center;gap:24px}
[data-info-page] .abfox .tx{width:auto;max-width:none;margin:0;padding:12px 0;grid-column:1;grid-row:1}
[data-info-page] .abfox .art{position:relative;top:auto;left:auto;transform:none;width:100%;max-width:280px;margin:0;order:0;grid-column:2;grid-row:1;justify-self:end}
[data-info-page] .ct-grid{grid-template-columns:minmax(0,1fr)}
[data-info-page] .ab-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
[data-info-page]{padding:0 20px 40px}
[data-info-page] .abfox{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:24px}
[data-info-page] .abfox .tx{padding:8px 0 0;grid-column:1;grid-row:1}
[data-info-page] .abfox h1{font-size:29px;line-height:1.16;margin-bottom:12px}
[data-info-page] .abfox p{font-size:15px;line-height:1.6;margin-bottom:16px}
[data-info-page] .abfox .art{grid-column:1;grid-row:2;width:200px;max-width:65%;justify-self:center;margin:12px auto 0}
[data-info-page="contacts"] .abfox .art,[data-info-page="requisites"] .abfox .art{width:230px;max-width:80%}
[data-info-page] .ab-card{padding:20px}
[data-info-page] .ab-card h3{font-size:17px}
[data-info-page] .ab-card :is(p,ul){font-size:15px}
[data-info-page] .rq-row{grid-template-columns:minmax(0,1fr);gap:4px}
[data-info-page] .ab-num{padding:16px;min-width:0}
[data-info-page] .ab-num b{font-size:24px;letter-spacing:-.02em}
[data-info-page] .ab-num span{font-size:13px}
[data-info-page] .ab-foot{padding:20px;align-items:flex-start}
[data-info-page] .ab-foot .cta{margin-left:0}
[data-info-page] .ab-geo-h{flex-wrap:wrap;gap:6px}
}
/* INFO VISUAL PASS — 2026-09-13. Existing paper, ink, Zona Pro and fox artwork. */
:is(#page-about,#page-contacts) [data-info-page]{max-width:1240px;padding-bottom:72px}
:is(#page-about,#page-contacts) [data-info-page] .info-top{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--border2);margin:0 0 32px;min-width:0}
:is(#page-about,#page-contacts) [data-info-page] .info-top .ab-back{flex-shrink:0;margin:0;padding:0 8px 0 0;border-radius:0;color:var(--textMuted);font-size:12px}
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav{display:flex;gap:28px;min-width:0;margin-left:auto;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav a{position:relative;display:flex;align-items:center;min-height:54px;flex-shrink:0;font-size:13px;font-weight:500;color:var(--textMuted);text-decoration:none;border-bottom:2px solid transparent;padding-top:2px}
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav a[aria-current]{color:var(--info-link);border-color:var(--accentSolid);font-weight:700}
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav a:hover{color:var(--text)}
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav a:focus-visible{outline:2px solid var(--info-link);outline-offset:-3px}
:is(#page-about,#page-contacts) [data-info-page] .abfox{min-height:420px;margin:0 0 48px}
:is(#page-about,#page-contacts) [data-info-page] .abfox .tx{width:52%;max-width:600px;padding:24px 0 30px}
:is(#page-about,#page-contacts) [data-info-page] .abfox h1{font-size:48px;line-height:1.08;letter-spacing:-.035em;font-weight:600;margin:0 0 24px}
:is(#page-about,#page-contacts) [data-info-page] .abfox p{font-size:17px;line-height:1.7;max-width:54ch}
:is(#page-about,#page-contacts) [data-info-page="about"] .abfox .art{width:42%;max-width:440px}
:is(#page-about,#page-contacts) [data-info-page="about"] .absig{border-left:0;border-top:1px solid var(--border2);padding:16px 0 0;margin-top:24px;max-width:300px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento{gap:0 32px;margin:0 0 36px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t{box-shadow:none;border-radius:0;border:0;background:transparent;padding:26px 0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big{padding:30px;background:var(--bgCard);border-radius:16px;margin-right:4px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4{border-bottom:1px solid var(--border2)}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t b{font-size:48px;letter-spacing:-.03em}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big b{font-size:96px;letter-spacing:-.035em}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t em{font-size:13px;line-height:1.55;color:var(--textMuted);max-width:34ch}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-nums{gap:0 24px;margin:36px 0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num{background:transparent;border:0;border-top:1px solid var(--border2);border-radius:0;padding:22px 0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid{gap:32px;margin-top:48px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card{border:0;border-top:1px solid var(--border2);border-radius:0;background:transparent;padding:24px 0 0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid h3{font-size:22px;letter-spacing:-.025em;margin-bottom:16px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid p{font-size:16px;line-height:1.7}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .abfox,:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox{min-height:310px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .abfox h1{font-size:64px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .abfox .art{width:43%;max-width:440px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox .art{width:41%;max-width:420px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card{padding:32px;border:0;border-radius:16px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card+ .ab-card{background:transparent;border-top:1px solid var(--border2);border-radius:0;padding:28px 0}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-card h3{font-size:24px;letter-spacing:-.025em;margin-bottom:18px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-how{background:transparent;border:0;border-top:1px solid var(--cardBorder);border-radius:0;padding:18px 0 0;margin-top:18px;font-size:15px;line-height:1.65}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-card .ln{gap:12px;margin-top:20px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-card .ln a{border:1px solid var(--border2);border-radius:8px;padding:8px 12px;min-height:44px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-fh{margin-top:36px;padding:16px 0;border-bottom:1px solid var(--border2)}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-fh h3{font-size:28px;letter-spacing:-.025em}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid{background:var(--bgCard);border-radius:16px;padding:36px;gap:44px;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid .ab-card{border:0;background:transparent;border-radius:0;padding:0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-col{border-left:1px solid var(--cardBorder);padding-left:32px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-h h3{font-size:22px;letter-spacing:-.025em;margin:0 0 24px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-row{padding:16px 0;grid-template-columns:minmax(110px,150px) minmax(0,1fr)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-row:nth-child(4),:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-row:nth-child(7){margin-top:16px;border-top-color:var(--border2)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-v{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot{background:transparent;border:0;border-top:1px solid var(--border2);border-radius:0;padding:28px 0;margin-top:56px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot b{display:block;font-size:22px;letter-spacing:-.02em;max-width:30ch;margin-bottom:8px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot span{font-size:14px;line-height:1.6}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot .cta{min-height:48px;padding:0 20px}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info-app>.ssr-info{padding-top:0}
:is(#page-about,#page-contacts) [data-info-page] .info-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin:54px 0 56px}
:is(#page-about,#page-contacts) [data-info-page] .info-intro h1{font-size:60px;line-height:1.04;letter-spacing:-.035em;margin:0;max-width:13ch}
:is(#page-about,#page-contacts) [data-info-page] .info-intro .ssr-lead{font-size:18px;line-height:1.65;margin:6px 0 0;max-width:49ch}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards{display:block}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards .ab-card{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr);gap:0 48px;background:transparent;border:0;border-bottom:1px solid var(--border2);border-radius:0;padding:32px}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards .ab-card:first-child{background:var(--bgCard);border:0;border-radius:16px;margin-bottom:8px}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards .ab-card h2{grid-column:1;grid-row:1 / span 8;font-size:26px;line-height:1.2;max-width:17ch;margin:0}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards .ab-card p{grid-column:2}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;background:transparent;border:0;border-radius:0;padding:0;margin:48px 0}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing h2{grid-column:1/-1;font-size:28px;margin:0 0 24px}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing p{font-size:15px;border-top:1px solid var(--border2);padding-top:18px;margin:0}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .info-order{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr);gap:0 48px;background:var(--bgCard);border:0;padding:32px;border-radius:16px;margin-bottom:40px}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .info-order h2{grid-column:1;grid-row:1 / span 4;font-size:28px;line-height:1.2;max-width:14ch;margin:0}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .info-order p{grid-column:2;margin:0 0 12px;font-size:17px}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards .ab-card{background:transparent;border:0;border-top:1px solid var(--border2);border-radius:0;padding:24px 0 0}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards .ab-card h2{font-size:24px;margin-bottom:18px}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards{background:var(--bgCard);border-radius:16px;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;padding:36px}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card{background:transparent;border:0;border-radius:0;padding:0}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card+ .ab-card{border-left:1px solid var(--border2);padding-left:40px}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card h2{font-size:26px;line-height:1.2;margin-bottom:24px}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty a[href^="mailto:"],:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty a[href^="tel:"]{background:transparent;border:0;border-bottom:1px solid var(--border2);border-radius:0;padding:4px 0;font-size:21px;line-height:1.5;color:var(--text);font-weight:600}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info .ssr-faq{margin-top:48px}
@media (max-width:1000px){
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav{gap:20px}
:is(#page-about,#page-contacts) [data-info-page] .info-top{gap:16px}
:is(#page-about,#page-contacts) [data-info-page] .abfox h1{font-size:40px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .abfox h1{font-size:48px}
:is(#page-about,#page-contacts) [data-info-page] .info-intro h1{font-size:48px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid{padding:28px;gap:24px}
}
@media (max-width:900px){
:is(#page-about,#page-contacts) [data-info-page] .abfox{min-height:0;gap:24px}
:is(#page-about,#page-contacts) [data-info-page] .abfox .tx{width:auto;padding:16px 0}
:is(#page-about,#page-contacts) [data-info-page] .abfox .art,:is(#page-about,#page-contacts) [data-info-page="about"] .abfox .art,:is(#page-about,#page-contacts) [data-info-page="contacts"] .abfox .art,:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox .art{width:100%;max-width:300px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid,:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid{grid-template-columns:minmax(0,1fr)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-col{border-left:0;border-top:1px solid var(--border2);padding:24px 0 0}
}
@media (max-width:760px){
:is(#page-about,#page-contacts) [data-info-page] .info-top{display:block;margin-bottom:24px}
:is(#page-about,#page-contacts) [data-info-page] .info-top .ab-back{min-height:36px}
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav{gap:24px;margin:0}
:is(#page-about,#page-contacts) [data-info-page] .info-page-nav a{min-height:48px;font-size:13px}
:is(#page-about,#page-contacts) [data-info-page] .info-intro{grid-template-columns:minmax(0,1fr);gap:20px;margin:32px 0 32px}
:is(#page-about,#page-contacts) [data-info-page] .info-intro h1{font-size:44px;max-width:16ch}
:is(#page-about,#page-contacts) [data-info-page] .info-intro .ssr-lead{font-size:16px;max-width:50ch;margin:0}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards .ab-card,:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .info-order{display:block;padding:24px 20px}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards .ab-card h2,:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .info-order h2{font-size:25px;margin-bottom:20px;max-width:none}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing,:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards{grid-template-columns:minmax(0,1fr);gap:24px}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing h2{margin-bottom:0}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards{grid-template-columns:minmax(0,1fr);padding:24px;gap:28px}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card+ .ab-card{border-left:0;border-top:1px solid var(--border2);padding:28px 0 0}
}
@media (max-width:560px){
:is(#page-about,#page-contacts) [data-info-page] .abfox{margin-bottom:32px;gap:0}
:is(#page-about,#page-contacts) [data-info-page] .abfox .tx{padding:8px 0 0}
:is(#page-about,#page-contacts) [data-info-page] .abfox h1{font-size:34px;margin-bottom:20px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .abfox h1{font-size:44px}
:is(#page-about,#page-contacts) [data-info-page] .abfox p{font-size:15px;line-height:1.65}
:is(#page-about,#page-contacts) [data-info-page] .abfox .art,:is(#page-about,#page-contacts) [data-info-page="about"] .abfox .art,:is(#page-about,#page-contacts) [data-info-page="contacts"] .abfox .art,:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox .art{width:240px;max-width:80%;margin:20px auto 0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento{gap:0 24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big{margin:0 0 4px;padding:24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4{grid-column:span 6;min-width:0;padding:24px 0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4 b{font-size:32px;overflow-wrap:anywhere}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4 b.ru{font-size:28px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4 em{font-size:12px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4 span{font-size:13px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid{gap:28px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid{gap:28px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card{padding:24px 20px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card+ .ab-card{padding:24px 0}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-card h3{font-size:23px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid{padding:24px 20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-row{grid-template-columns:minmax(0,1fr)}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot{margin-top:40px;padding:24px 0}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot b{font-size:21px}
:is(#page-about,#page-contacts) [data-info-page] .info-intro h1{font-size:38px}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty a[href^="mailto:"],:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty a[href^="tel:"]{font-size:18px;overflow-wrap:anywhere}
}
/* INFO CONTENT PASS — existing heroes and all copy are preserved. */
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:20px;padding:12px 32px 12px 12px;gap:0 32px;margin-bottom:32px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big{background:var(--accentDim);margin:0;padding:32px;border-radius:12px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big b{font-size:112px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4{padding:24px 0;justify-content:flex-start}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4:nth-last-child(-n+2){border-bottom:0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-nums{padding:28px 32px 32px;background:var(--text);border-radius:16px;gap:24px;margin:0 0 56px;color:var(--bgCard)}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-nums-h{padding:0;justify-content:space-between;gap:8px 24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-nums-h h2{font-size:20px;font-weight:500;letter-spacing:-.02em}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-nums-h span{color:#B9C0CA}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num{padding:24px 0 0;border-color:#4B5260;color:var(--bgCard)}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num b{font-size:36px;line-height:1.15;font-weight:500;letter-spacing:-.025em;color:var(--bgCard)}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num.acc b{color:#FFA475}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num span{display:block;color:#C5CBD3;font-size:13px;line-height:1.55;margin-top:10px;max-width:25ch}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px 48px;margin-top:0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card{padding:24px 0 0}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child{grid-row:span 2;background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:16px;padding:36px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child h3{font-size:18px;font-weight:500;color:var(--textMuted);margin-bottom:32px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child p:first-of-type{font-size:27px;line-height:1.42;letter-spacing:-.02em;color:var(--text);margin-bottom:24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-rv{margin-top:40px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot{background:var(--accentDim);border:0;border-radius:16px;padding:32px 36px;gap:24px;margin-top:48px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot b{font-size:30px;line-height:1.18;font-weight:500;max-width:24ch;margin-bottom:12px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot .cta{background:var(--text);border:1px solid var(--text);color:var(--bgCard);min-height:48px;border-radius:8px;flex-shrink:0;text-decoration:none}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot .cta:hover{background:var(--textMuted);border-color:var(--textMuted)}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot .cta:focus-visible{outline:2px solid var(--info-link);outline-offset:4px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid{gap:40px;align-items:start}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card{border:1px solid var(--cardBorder);padding:36px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card+ .ab-card{border:0;border-top:1px solid var(--border2);padding:28px 0}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card>p:first-of-type>b{font-size:23px;line-height:1.5;font-weight:500;letter-spacing:-.025em;color:var(--text)}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid .ct-card .ln a{border:0;border-bottom:1px solid var(--border2);border-radius:0;padding:8px 0;justify-content:flex-start}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid .ct-card .ln a[href^="tel:"]{font-size:22px;letter-spacing:-.02em;color:var(--text);font-weight:500}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid .ct-card .ln a.ext{background:var(--accentDim);border:1px solid transparent;padding:10px 16px;border-radius:8px;color:var(--info-link)}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-fh{margin-top:48px;border-bottom:0;gap:16px;justify-content:space-between}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-off{display:block;margin:0;border-top:1px solid var(--border2)}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:24px;align-items:baseline;padding:24px 0;margin:0;background:transparent;border:0;border-bottom:1px solid var(--border2);border-radius:0;box-shadow:none}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o b{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o b i{width:6px;height:6px;margin-right:14px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o span{font-size:16px;line-height:1.5;margin:0;color:var(--textMuted)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid{padding:0;background:transparent;gap:40px;align-items:start}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid>.ab-card{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:16px;padding:32px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-col{border:0;border-top:1px solid var(--border2);padding:28px 0 0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-col h3{font-size:25px;line-height:1.25;letter-spacing:-.025em;font-weight:500;margin-bottom:20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-col p{font-size:16px;line-height:1.7}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-h{padding:0 0 20px;border-bottom:1px solid var(--border2)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-h h3{font-size:20px;margin:0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-row{gap:20px;grid-template-columns:minmax(100px,140px) minmax(0,1fr)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-k{font-size:13px;line-height:1.65;color:var(--textMuted)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-v{font-size:15px;line-height:1.55;font-weight:500}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .cards .ab-card:first-child{background:var(--accentDim)}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing{background:var(--bgCard);padding:28px 32px 32px;border:1px solid var(--cardBorder);border-radius:16px;margin-top:40px}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing p b{display:block;font-size:19px;font-weight:500;line-height:1.4;color:var(--text);margin-bottom:12px}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .info-order{background:var(--accentDim);padding:36px}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards{gap:28px}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards .ab-card{padding-top:24px;border-top:2px solid var(--border2)}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards .ab-card h2{min-height:2.6em;font-size:23px;max-width:19ch}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards{padding:0;gap:0;overflow:hidden;border:1px solid var(--cardBorder)}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card{padding:32px;background:var(--accentDim)}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card+ .ab-card{border:0;padding:32px 40px;background:var(--bgCard)}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info dl.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);max-width:none;gap:0 40px;border-top:1px solid var(--border2);margin-top:24px}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info dl.faq dt,:is(#page-about,#page-contacts) [data-info-page] .ssr-info dl.faq dd{padding:24px 0;margin:0;border:0;border-bottom:1px solid var(--border2)}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info dl.faq dt{font-size:18px;line-height:1.4;font-weight:500;letter-spacing:-.015em}
@media(max-width:1000px){
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento{padding:12px 24px 12px 12px;gap:0 24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big{padding:24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t b{font-size:40px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big b{font-size:88px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid{gap:28px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child{padding:28px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child p:first-of-type{font-size:24px}
}
@media(max-width:900px){
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento{padding:12px 24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big{grid-column:1/-1;margin:0 -12px 8px;display:grid;grid-template-columns:1fr 1.25fr;gap:0 24px;align-items:end}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big .eye{grid-column:1;align-self:start}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big b{grid-column:1;grid-row:2/4}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big span{grid-column:2;grid-row:2}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big em{grid-column:2;grid-row:3;margin-top:12px}
}
@media(max-width:760px){
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-nums{padding:24px;gap:20px;margin-bottom:32px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num{padding-top:18px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num b{font-size:30px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num span{font-size:12px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid{grid-template-columns:minmax(0,1fr);gap:28px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child{grid-row:auto;padding:28px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child h3{margin-bottom:24px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot{padding:28px;align-items:flex-start;flex-direction:column;gap:20px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot b{font-size:26px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card{padding:28px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-fh{display:block}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-fh span{display:block;margin-top:12px;max-width:48ch;font-size:13px;line-height:1.5}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o{grid-template-columns:1fr 1.2fr;gap:24px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o b{font-size:18px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o span{font-size:14px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid>.ab-card{padding:24px}
:is(#page-about,#page-contacts) [data-info-page="delivery"] .ssr-delivery .info-timing,:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .info-order{padding:28px 24px}
:is(#page-about,#page-contacts) [data-info-page="payment"] .ssr-payment .cards .ab-card h2{min-height:0;max-width:none}
:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card,:is(#page-about,#page-contacts) [data-info-page="warranty"] .ssr-warranty .cards .ab-card+ .ab-card{padding:28px 24px}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info dl.faq{grid-template-columns:minmax(0,1fr);gap:0}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info dl.faq dt{padding:24px 0 8px;border-bottom:0}
:is(#page-about,#page-contacts) [data-info-page] .ssr-info dl.faq dd{padding:0 0 24px}
}
@media(max-width:560px){
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento{padding:12px 20px;gap:0 20px;margin-bottom:24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big{display:flex;align-items:stretch;margin:0 -8px 4px;gap:0;padding:24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big b{font-size:88px;margin:20px 0 12px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.big em{margin-top:12px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4 b{font-size:30px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-bento .t.w4 b.ru{font-size:26px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child{padding:24px}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-grid .ab-card:first-child p:first-of-type{font-size:22px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card{padding:24px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card+ .ab-card{padding:24px 0}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ct-grid>.ab-card>p:first-of-type>b{font-size:21px}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}
:is(#page-about,#page-contacts) [data-info-page="contacts"] .ab-o span{padding-left:20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .ct-grid>.ab-card{padding:24px 20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-row{grid-template-columns:minmax(0,1fr);gap:6px}
:is(#page-about,#page-contacts) [data-info-page] .ab-foot{padding:24px}
}
@media(max-width:360px){
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-nums{grid-template-columns:minmax(0,1fr)}
:is(#page-about,#page-contacts) [data-info-page="about"] .ab-num span{max-width:28ch}
}
/* END INFO CONTENT PASS */
/* REQUISITES MOTION CONCEPT — isolated to this document. */
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:16px;overflow:hidden}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox.rq-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:center;min-height:0;margin:0;padding:40px;overflow:visible}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero .tx{grid-column:2;grid-row:1;width:auto;max-width:none;padding:0;margin:0;order:0;position:relative;z-index:1}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero h1{font-size:44px;line-height:1.12;letter-spacing:-.035em;max-width:19ch;margin:0 0 22px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero h1 i{color:var(--accent)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero p{font-size:16px;line-height:1.65;max-width:53ch;margin:0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero .ln{margin-top:24px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-all{background:var(--text);border-color:var(--text);color:var(--bgCard);min-height:48px;border-radius:8px;font-size:14px;padding:12px 20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-all:hover{background:var(--textMuted);border-color:var(--textMuted)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-all.ok{background:var(--greenDim);color:var(--green);border-color:var(--green)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-scene{grid-column:1;grid-row:1;min-width:0;align-self:center;margin-left:-40px;width:calc(100% + 64px)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion{position:relative;aspect-ratio:16/9;background:var(--bgCard);overflow:hidden}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-travel{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion :is(img,video){display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-travel :is(img,video){width:108%;height:108%;max-width:none}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion video{opacity:0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion.has-frame video{opacity:1}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-tools{display:flex;justify-content:flex-end;margin-top:8px;min-height:44px;padding-right:24px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:116px;min-height:44px;padding:8px 12px;background:transparent;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:12px;color:var(--textMuted);cursor:pointer}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-toggle[hidden]{display:none}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-toggle:hover{background:var(--page);color:var(--text)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] :is(.rq-motion-toggle,.rq-all):focus-visible{outline:2px solid var(--info-link);outline-offset:4px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);background:transparent;padding:0 40px 40px;gap:48px;margin:0;border:0;border-radius:0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-grid>.ab-card{background:transparent;padding:28px 0 0;border:0;border-top:1px solid var(--border2);border-radius:0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-col{padding:28px 0 0;border:0;border-top:1px solid var(--border2)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-col h3{font-size:23px;max-width:20ch;line-height:1.3}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-col p{font-size:15px;line-height:1.7}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-h{padding:0 0 24px;margin:0;border:0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-h h3{font-size:20px;line-height:1.3;font-weight:600}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-row{padding:17px 0;gap:20px;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);margin:0;border-top:1px solid var(--cardBorder)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-v{font-size:15px;font-weight:500;line-height:1.55;font-variant-numeric:tabular-nums}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-v small{display:block;font-size:12px;line-height:1.55;margin-top:6px;color:var(--textMuted);font-weight:400}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-v::selection{background:var(--accentDim);color:var(--text)}
@media(max-width:1100px){
:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox.rq-hero{padding:32px;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero h1{font-size:38px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-scene{margin-left:-32px;width:calc(100% + 48px)}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-tools{padding-right:16px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-grid{padding:0 32px 32px;gap:32px}
}
@media(max-width:760px){
:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox.rq-hero{grid-template-columns:minmax(0,1fr);padding:28px;gap:24px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero .tx{grid-column:1;grid-row:1}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-scene{grid-column:1;grid-row:2;width:calc(100% + 56px);max-width:none;margin:0 -28px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-tools{padding:0 28px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-travel :is(img,video){width:100%;height:100%}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero h1{font-size:40px;max-width:19ch}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-grid{grid-template-columns:minmax(0,1fr);padding:0 28px 28px;gap:32px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-col h3{max-width:none}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-row{grid-template-columns:minmax(110px,.7fr) minmax(0,1.5fr)}
}
@media(max-width:480px){
:is(#page-about,#page-contacts) [data-info-page="requisites"] .abfox.rq-hero{padding:24px 20px;gap:28px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero h1{font-size:34px;max-width:17ch;margin-bottom:20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero p{font-size:15px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-scene{width:calc(100% + 40px);margin:0 -20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-motion-tools{padding:0 20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-hero .ln{margin-top:20px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-all{width:100%;padding:12px 10px;font-size:13px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .ct-grid{padding:0 20px 28px}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
:is(#page-about,#page-contacts) [data-info-page="requisites"] .rq-paper .rq-h h3{font-size:19px}
}
/* END REQUISITES MOTION CONCEPT */
/* Cookie wording and choices are unchanged; native details keeps mobile reading compact. */
@media (max-width:360px){
.bar-r .cta{min-width:0;white-space:normal;text-align:center;line-height:1.2;padding:0 8px}
.bar-r{position:relative}
.bar-r .info{position:static}
.bar-r .pop-info{left:0;right:auto;top:calc(100% + 6px);max-width:100%}
}
body:has(.ckbar){padding-bottom:var(--cookie-space,0px)}
.ckbar-details{flex:1;min-width:0;max-width:760px}
.ckbar-details summary{list-style:none;font-size:13px;line-height:1.5;color:var(--textMuted);cursor:default}
.ckbar-details summary::-webkit-details-marker{display:none}
.ckbar-more{display:none}
.ckbar-details .ckbar-t{margin-top:2px}
@media (max-width:560px){
.ckbar{gap:10px;padding:12px;bottom:max(8px,env(safe-area-inset-bottom))}
.ckbar-details{flex-basis:100%}
.ckbar-details summary{cursor:pointer;padding-right:2px}
.ckbar-more{display:inline-block;margin-left:5px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ckbar-details .ckbar-t{margin-top:8px}
.ckbar-b{gap:10px}
.ckbar-b button{min-height:44px;padding:9px 12px}
.ckbar-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
}
/* ═══ 14.09.2026 — СТРАНИЦЫ КОМПАНИИ: Контакты, Реквизиты, Доставка, Оплата, Гарантия (.rd-page) ═══════════════
Стенд «было/стало» принят владельцем («делаем! ок»). Разметка — server.mjs (INFO_PAGES + rdNav/rdEnd/rdFaq); в приложении
её оборачивает .rd-app (staticBody), на загрузке страницы — #page-seo. Ритм «О компании»: надзаголовок · h1 44 · лид 15.
Цвета и радиусы — только токены :root; заливная кнопка одна на экран (правило 13.09). Префиксы rd-/rc-/rx-/dl-/pay-/wr- свободны. */
#page-seo > .rd-page{max-width:1240px;margin:0 auto;padding:12px 20px 72px}
.rd-page > .crumbs{font-size:12px;color:var(--textDim);margin:4px 0 10px}
.rd-page > .crumbs a{color:var(--textMuted)}
.rd-srvnav{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border2);margin:0 0 24px;min-height:48px;font-size:13px;font-weight:500}
.rd-srvnav .home{color:var(--textMuted);font-size:12px}
.rd-srvnav span{display:flex;gap:4px 24px;flex-wrap:wrap}
.rd-srvnav span a{color:var(--textMuted);padding:14px 0;border-bottom:2px solid transparent;margin-bottom:-1px}
.rd-srvnav span a[aria-current]{color:var(--accent);border-color:var(--accentSolid)}
.rd-app > .rd-page > .crumbs,.rd-app > .rd-page > .rd-srvnav{display:none}
.rd-loading{color:var(--textMuted);font-size:15px;padding:40px 0}
.rd{display:flex;flex-direction:column;gap:64px;color:var(--text);padding-top:12px}
.rd :is(h1,h2,h3,p,ol,ul,dl,dd){margin:0}
.rd a{color:inherit;text-decoration:none}
.rd-ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rd-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim);margin-bottom:14px}
.rd h1{font-size:44px;line-height:1.05;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.rd .rd-lead{font-size:15px;line-height:1.6;color:var(--textMuted);max-width:58ch;margin-top:16px}
.rd-top{display:flex;flex-direction:column;gap:28px}
.rd-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:end}
.rd-sec{display:flex;flex-direction:column;gap:20px}
.rd-sh{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--border2)}
.rd-sh h2{font-size:25px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.rd-sh p{font-size:13px;color:var(--textMuted);text-align:right}
.rd-card{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r3);box-shadow:var(--e1)}
.rd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:var(--r2);border:1px solid var(--border2);background:var(--bgCard);color:var(--text);font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,transform .12s}
.rd-btn .rd-ic{width:16px;height:16px}
.rd-btn:active{transform:scale(.97)}
.rd-btn.fill{background:var(--accentSolid);border-color:var(--accentSolid);color:#fff}
.rd-btn.ghost{border-color:transparent;background:transparent;color:var(--textMuted);padding:0 10px}
.rd-btn.done{color:var(--green)}
@media (hover:hover){.rd-btn:hover{border-color:var(--textDim)}.rd-btn.fill:hover{background:var(--accentHover);border-color:var(--accentHover)}.rd-btn.ghost:hover{color:var(--text);background:var(--surface2)}}
.rd .rd-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:4px}
.rd-link .rd-ic{width:14px;height:14px}
@media (hover:hover){.rd .rd-link:hover{text-decoration-color:currentColor}}
.rd-steps{list-style:none;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.rd-steps li{counter-increment:s;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.5;color:var(--textMuted)}
.rd-steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;border:1px solid var(--border2);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--text);background:var(--bgCard)}
.rd-steps li b{color:var(--text);font-weight:600}
.rd :is(a,button,summary,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* вопросы — : FAQPage в JSON-LD остаётся, на экране ответ не повторяет текст страницы */
.rd-faqwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start}
.rd-faqwrap h2{font-size:25px;font-weight:600;letter-spacing:-.015em}
.rd-faqwrap .sub{font-size:14px;color:var(--textMuted);margin-top:10px;line-height:1.55;max-width:32ch}
.rd-faq details{border-top:1px solid var(--border2)}
.rd-faq details:last-child{border-bottom:1px solid var(--border2)}
.rd-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:18px 0;font-size:17px;font-weight:600;cursor:pointer}
.rd-faq summary::-webkit-details-marker{display:none}
.rd-faq summary::after{content:"";width:12px;height:12px;flex:none;color:var(--textMuted);background:linear-gradient(currentColor,currentColor) center/12px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 12px no-repeat;transition:transform .2s}
.rd-faq details[open] summary::after{transform:rotate(45deg)}
.rd-faq details p{padding:0 48px 22px 0;font-size:15px;line-height:1.6;color:var(--textMuted);max-width:64ch}
/* низ: соседние страницы + партнёрство одной строкой (эхо тёмного блока «Каталог сейчас» на «О компании») */
.rd-end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.2fr);gap:12px}
[data-info-page="about"] > .rd-end{margin-top:48px}
.rd-pg{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px 22px;border:1px solid var(--cardBorder);border-radius:var(--r3);text-decoration:none;background:var(--surface3);color:var(--text)}
.rd-pg span{font-size:12px;color:var(--textDim)}
.rd-pg b{font-size:17px;font-weight:600}
.rd-pg.next{text-align:right}
@media (hover:hover){.rd-pg:hover{border-color:var(--border2);background:var(--bgCard)}}
.rd-partner{display:flex;align-items:center;gap:20px;padding:18px 20px 18px 26px;border-radius:var(--r3);background:var(--text);color:#fff}
.rd-partner b{display:block;font-size:15px;font-weight:600}
.rd-partner span{display:block;font-size:13px;color:rgba(255,255,255,.66);margin-top:4px}
.rd-partner .rd-btn,[data-info-page] .rd-partner .rd-btn{margin-left:auto;background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
@media (hover:hover){.rd-partner .rd-btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}}
/* Контакты */
.rc-now{justify-self:end;display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right;padding-bottom:6px}
.rc-status{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px;border-radius:var(--rPill);background:var(--surface2);font-size:13px;font-weight:600;color:var(--text)}
.rc-status i{width:8px;height:8px;border-radius:50%;background:var(--textDim)}
.rc-status.open{background:var(--greenDim);color:var(--green)}
.rc-status.open i{background:var(--green);box-shadow:0 0 0 4px rgba(21,128,61,.14)}
.rc-now small{font-size:13px;color:var(--textMuted)}
.rc-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rd .rc-q{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:3px;padding:20px 22px;align-items:center}
.rc-q .ic{grid-row:1 / span 3;align-self:start;width:44px;height:44px;border-radius:var(--r2);background:var(--surface2);display:grid;place-items:center;color:var(--text)}
.rc-q .l{font-size:12px;color:var(--textDim);font-weight:500}
.rc-q b{font-size:20px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-q .s{font-size:13px;color:var(--textMuted)}
@media (hover:hover){.rd .rc-q:hover{border-color:var(--border2);box-shadow:var(--e2)}}
.rc-sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rc-site{overflow:hidden;display:flex;flex-direction:column}
.rc-map{height:230px;background:var(--surface2);border-bottom:1px solid var(--cardBorder)}
.rc-map img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.rc-site-b{padding:22px 26px 24px;display:flex;flex-direction:column;gap:16px;flex:1}
.rc-tag{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim)}
.rc-tag .rd-ic{width:16px;height:16px;color:var(--textMuted)}
.rc-site h3{font-size:20px;font-weight:600;line-height:1.3;margin-top:-6px}
.rc-note{font-size:14px;line-height:1.55;color:var(--textMuted)}
.rc-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:var(--textMuted)}
.rc-meta b{color:var(--text);font-weight:600}
.rc-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.rc-br{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rc-b{padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;min-height:152px}
.rc-b > b{font-size:17px;font-weight:600}
.rc-b p{font-size:14px;line-height:1.45;color:var(--textMuted)}
.rc-b .t{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--surface2);font-size:12px;color:var(--textDim);font-variant-numeric:tabular-nums}
.rc-tz{font-size:11px;font-weight:600;color:var(--textMuted);padding:3px 7px;border-radius:var(--rPill);background:var(--surface2);white-space:nowrap}
.rc-b.tbd{background:var(--surface3);border-style:dashed;box-shadow:none}
.rc-b.tbd p{color:var(--textDim)}
.rc-req{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px;padding:16px 22px;font-size:13px;color:var(--textMuted)}
.rc-req b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.rc-req .rd-link{margin-left:auto}
/* Реквизиты */
.rx-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.rx-hero .acts{display:flex;gap:10px;flex:none;padding-bottom:4px}
.rx-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:20px;align-items:start}
.rx-doc{overflow:hidden}
.rx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 28px 22px;border-bottom:1px solid var(--cardBorder)}
.rx-head b{font-size:20px;font-weight:600;display:block;letter-spacing:-.01em}
.rx-head span{font-size:13px;color:var(--textMuted);display:block;margin-top:4px}
.rx-head .rx-since{flex:none;margin:0;font-size:12px;padding:6px 11px;border:1px solid var(--border2);border-radius:var(--rPill);white-space:nowrap;font-variant-numeric:tabular-nums}
.rx-g{padding:10px 28px 14px}
.rx-g + .rx-g{border-top:1px solid var(--cardBorder)}
.rx-gl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim);padding:12px 0 6px}
.rx-row{display:grid;grid-template-columns:176px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:54px;padding:6px 0}
.rx-row + .rx-row{border-top:1px solid var(--surface2)}
.rx-row .k{font-size:13px;color:var(--textMuted)}
.rx-row .v{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1.35;overflow-wrap:anywhere;user-select:all}
.rx-row .v small{display:block;font-size:12px;color:var(--textDim);font-weight:400;margin-top:3px;letter-spacing:0;user-select:text}
.rx-row .v .g + .g{margin-left:.4em}
.rx-cp{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;height:36px;padding:0;border-radius:var(--r2);border:1px solid var(--cardBorder);background:var(--bgCard);color:var(--textMuted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}
.rx-cp .rd-ic{width:16px;height:16px}
.rx-cp .lbl{display:none}
.rx-row.done .rx-cp{padding:0 12px;border-color:transparent;background:var(--greenDim);color:var(--green)}
.rx-row.done .rx-cp .lbl{display:inline}
@media (hover:hover){.rx-cp:hover{color:var(--text);border-color:var(--border2)}}
.rx-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.rx-box{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.rx-box :is(h2,h3){font-size:17px;font-weight:600;letter-spacing:0}
.rx-row .v a{color:inherit;text-decoration:none;font-variant-numeric:normal;letter-spacing:0}
.rx-box p{font-size:14px;line-height:1.55;color:var(--textMuted)}
.rx-box p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px}
.rx-dir{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 24px;font-size:13px;color:var(--textMuted)}
.rx-dir b{font-size:14px;color:var(--text);font-weight:600}
@media print{
body:has([data-rd="requisites"]) *{visibility:hidden}
body:has([data-rd="requisites"]) :is(.rx-doc,.rx-doc *){visibility:visible}
body:has([data-rd="requisites"]) .rx-doc{position:absolute;left:0;top:0;width:100%;border:0;box-shadow:none}
body:has([data-rd="requisites"]) .rx-cp{display:none}
}
/* Доставка */
.dl-meter{padding:22px 24px 20px;display:flex;flex-direction:column;gap:14px}
.dl-mt{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.dl-mt span{font-size:13px;color:var(--textMuted)}
.dl-mt b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dl-bar{height:8px;border-radius:var(--rPill);background:var(--surface2);overflow:hidden;position:relative}
.dl-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accentSolid);border-radius:inherit;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.dl-bar.full i{background:var(--green)}
.dl-mb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--textMuted);font-variant-numeric:tabular-nums}
.dl-mb b{color:var(--text);font-weight:600}
.dl-mb b.ok{color:var(--green)}
.dl-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dl-way{padding:24px 24px 22px;display:flex;flex-direction:column;gap:18px}
.dl-wh{display:flex;gap:14px;align-items:center}
.dl-ic{width:48px;height:48px;flex:none;border-radius:var(--r2);background:var(--surface2);display:grid;place-items:center;color:var(--text)}
.dl-ic .rd-ic{width:22px;height:22px}
.dl-way h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.dl-way .sub{font-size:13px;color:var(--textMuted);margin-top:3px}
.dl-dl{display:flex;flex-direction:column;border-top:1px solid var(--cardBorder)}
.dl-dl > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--surface2)}
.dl-dl dt{font-size:12px;color:var(--textDim);padding-top:2px}
.dl-dl dd{font-size:14px;line-height:1.45}
.dl-dl dd b{font-weight:600}
.dl-dl dd.pr{font-size:17px;font-weight:600;line-height:1.3}
.dl-dl dd.pr em{font-style:normal;color:var(--green)}
.dl-dl dd small{display:block;font-size:13px;font-weight:400;color:var(--textMuted);margin-top:3px}
.dl-chips{display:flex;flex-wrap:wrap;gap:6px}
.dl-chip{font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--rPill);border:1px solid var(--border2);background:var(--surface3);white-space:nowrap}
.dl-chip.dim{color:var(--textMuted);font-weight:500;border-style:dashed}
.dl-way .foot{margin-top:auto}
.dl-tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:30px 30px 28px}
.dl-st{position:relative;display:flex;flex-direction:column;gap:12px;padding-top:36px}
.dl-st::before{content:"";position:absolute;top:8px;left:8px;right:-36px;height:2px;background:var(--border2)}
.dl-st:last-child::before{right:0;background:repeating-linear-gradient(90deg,var(--border2) 0 6px,transparent 6px 12px)}
.dl-st::after{content:"";position:absolute;top:1px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bgCard);border:2px solid var(--textDim);box-sizing:border-box}
.dl-st.g::after{border-color:var(--green);background:var(--green);box-shadow:0 0 0 4px var(--greenDim)}
.dl-st.b::after{border-color:var(--blue)}
.dl-when{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim)}
.dl-badge{align-self:flex-start;display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:6px 10px;border-radius:var(--r1);line-height:1.2}
.dl-badge.g{color:var(--green);background:var(--greenDim)}
.dl-badge.n{color:var(--text);background:var(--surface2)}
.dl-badge.b{color:var(--blue);background:var(--blueDim)}
.dl-st p{font-size:14px;line-height:1.5;color:var(--textMuted);max-width:36ch}
.dl-reg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 28px;padding:20px 24px}
.dl-reg p{font-size:14px;line-height:1.5;color:var(--textMuted)}
.dl-reg p b{color:var(--text);font-weight:600}
.dl-reg .dl-chips{grid-column:1 / -1}
/* Оплата */
.pay-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pay-way{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:22px 24px;align-items:start}
.pay-way .ic{grid-row:1 / span 2;width:44px;height:44px;border-radius:var(--r2);background:var(--surface2);display:grid;place-items:center;color:var(--text)}
.pay-way h3{font-size:17px;font-weight:600;align-self:center}
.pay-way p{font-size:14px;line-height:1.5;color:var(--textMuted)}
.pay-req{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.pay-req .t{font-size:12px;color:var(--textDim)}
.pay-req .n{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.pay-kv{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;font-size:13px;color:var(--textMuted);padding-top:14px;border-top:1px solid var(--surface2)}
.pay-kv b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px;margin-left:6px}
.pay-kv .rd-link{margin-left:auto}
.pay-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pay-s{padding:26px 26px 28px;display:flex;flex-direction:column;gap:8px;position:relative}
.pay-s + .pay-s{border-left:1px solid var(--cardBorder)}
.pay-s::after{content:"";position:absolute;right:-7px;top:36px;width:12px;height:12px;background:var(--bgCard);border-top:1px solid var(--cardBorder);border-right:1px solid var(--cardBorder);transform:rotate(45deg);z-index:1}
.pay-s:last-child::after{display:none}
.pay-n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;border:1px solid var(--border2);background:var(--surface3);font-variant-numeric:tabular-nums;margin-bottom:10px}
.pay-s:last-child .pay-n{background:var(--text);color:#fff;border-color:var(--text)}
.pay-s h3{font-size:17px;font-weight:600}
.pay-s p{font-size:14px;line-height:1.5;color:var(--textMuted)}
.pay-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;color:var(--textMuted)}
.pay-cmp{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.pay-cmp > div{padding:15px 24px;border-top:1px solid var(--surface2);font-size:14px;line-height:1.45;display:flex;align-items:center}
.pay-cmp > .h{border-top:0;padding:22px 24px 18px;flex-direction:column;align-items:flex-start;gap:4px}
.pay-cmp .h b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.pay-cmp .h span{font-size:13px;color:var(--textMuted)}
.pay-cmp .k{font-size:13px;color:var(--textMuted)}
.pay-cmp .p{background:var(--surface3)}
.pay-cmp .p b{font-weight:600}
.pay-cmp .h.p{box-shadow:inset 0 3px 0 var(--accentSolid)}
.pay-cmp > .f{border-top:1px solid var(--cardBorder);padding-top:18px;padding-bottom:20px}
.pay-yes{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:600}
.pay-yes .rd-ic{width:16px;height:16px}
.pay-no{color:var(--textDim)}
.pay-note{font-size:13px;line-height:1.55;color:var(--textDim);max-width:90ch}
/* Гарантия */
.wr-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);overflow:hidden}
.wr-hero .l{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:flex-end}
.wr-hero .r{background:var(--accentDim);padding:34px 40px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.wr-hero .r .rd-eyebrow{margin:0}
.wr-big{display:flex;align-items:baseline;gap:14px}
.wr-big b{font-size:128px;line-height:.8;font-weight:600;letter-spacing:-.05em;color:var(--accent)}
.wr-big span{font-size:34px;font-weight:600;letter-spacing:-.02em}
.wr-hero .r p{font-size:14px;line-height:1.55;color:var(--textMuted);max-width:36ch}
.wr-hero .r p b{color:var(--text);font-weight:600}
.wr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:16px}
.rd .wr-ch{padding:24px;display:flex;flex-direction:column;gap:6px}
.wr-ch .ic{width:44px;height:44px;border-radius:var(--r2);background:var(--surface2);display:grid;place-items:center;margin-bottom:12px}
.wr-ch .l{font-size:12px;color:var(--textDim)}
.wr-ch b{font-size:20px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.wr-ch .s{font-size:13px;color:var(--textMuted)}
@media (hover:hover){.rd .wr-ch:hover{border-color:var(--border2);box-shadow:var(--e2)}}
.wr-list{padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--surface3)}
.wr-list h3{font-size:17px;font-weight:600}
.wr-list ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.wr-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.45;color:var(--textMuted)}
.wr-list li .rd-ic{width:18px;height:18px;color:var(--green);margin-top:1px}
.wr-docs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:30px 32px}
.wr-docs h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.wr-docs p{font-size:14px;line-height:1.55;color:var(--textMuted);margin-top:10px;max-width:48ch}
.wr-find{display:flex;gap:8px;margin-top:22px}
.wr-find input{flex:1;min-width:0;height:44px;border:1px solid var(--border2);border-radius:var(--r2);padding:0 14px;font-family:inherit;font-size:15px;background:var(--bgCard);color:var(--text)}
.wr-how{padding:20px 22px;border-radius:var(--r2);background:var(--surface3);border:1px solid var(--cardBorder);align-self:start}
.wr-how .rd-eyebrow{margin-bottom:12px}
.wr-law{font-size:13px;color:var(--textDim)}
@media (max-width:1100px){
.rc-br{grid-template-columns:repeat(3,minmax(0,1fr))}
.rd-end{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rd-partner{grid-column:1 / -1}
}
@media (max-width:760px){
#page-seo > .rd-page{padding:8px 16px 48px}
.rd-srvnav{flex-direction:column;align-items:flex-start;gap:0}
.rd{gap:44px;padding-top:4px}
.rd h1{font-size:32px}
.rd-hero,.rd-faqwrap{grid-template-columns:minmax(0,1fr);gap:20px}
.rd-sh{flex-direction:column;gap:6px}.rd-sh p{text-align:left}
.rd-faq details p{padding-right:0}
.rd-partner{flex-wrap:wrap}.rd-partner .rd-btn,[data-info-page] .rd-partner .rd-btn{margin-left:0}
.rc-now{justify-self:start;align-items:flex-start;text-align:left}
.rc-quick,.rc-sites{grid-template-columns:minmax(0,1fr)}
.rc-br{grid-template-columns:repeat(2,minmax(0,1fr))}
.rc-map{height:180px}
.rc-req .rd-link{margin-left:0}
.rx-hero{flex-direction:column;align-items:stretch;gap:20px}
.rx-hero .acts{flex-direction:column}
.rx-grid{grid-template-columns:minmax(0,1fr)}
.rx-side{position:static}
.rx-head{flex-direction:column;gap:10px;padding:20px}
.rx-g{padding:8px 20px 12px}
.rx-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
.rx-row .k{grid-column:1 / -1;padding-top:6px}
.dl-ways,.dl-tl{grid-template-columns:minmax(0,1fr)}
.dl-st::before{display:none}
.dl-reg{grid-template-columns:minmax(0,1fr)}
.pay-flow{grid-template-columns:minmax(0,1fr)}
.pay-ways{grid-template-columns:minmax(0,1fr);gap:12px}
.pay-s + .pay-s{border-left:0;border-top:1px solid var(--cardBorder)}
.pay-s::after{display:none}
.pay-cmp{grid-template-columns:92px minmax(0,1fr) minmax(0,1fr)}
.pay-cmp > div,.pay-cmp > .h{padding:12px 10px;font-size:13px}
.pay-cmp .h b{font-size:16px}
.pay-cta{flex-direction:column;align-items:stretch}
.wr-hero,.wr-grid,.wr-docs{grid-template-columns:minmax(0,1fr)}
.wr-hero .l{padding:28px 22px}
.wr-hero .r{padding:26px 22px}
.wr-big b{font-size:96px}
.wr-docs{gap:28px;padding:24px 20px}
.rd-end{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
.dl-mt{flex-direction:column;gap:2px}
.dl-tl{gap:26px;padding:24px 20px}
.dl-st{padding:0 0 0 32px}
.dl-st::after{top:1px}
.dl-st:not(:last-child)::before{display:block;top:20px;bottom:-24px;left:7px;right:auto;width:2px;height:auto}
.pay-s{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px 18px}
.pay-n{grid-row:1 / span 2;margin:0}
.rd .wr-ch{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:18px 20px}
.wr-ch .ic{grid-row:1 / span 3;margin:0}
.rc-b{min-height:0}
.rc-b > b{font-size:15px}
.pay-cmp > .f:not(.p){display:none}
.pay-cmp > .f.p{grid-column:1 / -1;justify-content:center}
.pay-cmp > .f.p .rd-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.rd-btn,.dl-bar i,.rd-faq summary::after{transition:none}}
/* Product spotlight: homepage, 29 September 2026 */
#news{display:none!important}
.spotlight{margin:26px auto 34px;max-width:1320px!important;padding:0 28px!important}
body.searching .spotlight{display:none}
.sp-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px;gap:16px}
.sp-kicker{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accentSolid);font-weight:700}
.sp-head h2{font-size:30px;letter-spacing:-.035em;margin:7px 0 0;font-weight:600}
.sp-news{font-size:14px;color:var(--textMuted);padding:12px 0;white-space:nowrap}
.sp-track{position:relative;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px;overscroll-behavior-x:contain;padding-bottom:3px}
.sp-track::-webkit-scrollbar{display:none}
.sp-card{flex:0 0 91%;scroll-snap-align:start;display:grid;grid-template-columns:48% 52%;min-height:420px;position:relative;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:#fff}
.sp-image{position:relative;background:#f4f3ef;display:flex;align-items:center;justify-content:center;padding:58px 35px 35px;border:0;cursor:zoom-in;min-width:0}
.sp-image img{width:100%;height:300px;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s}
.sp-image:hover img,.sp-image:focus-visible img{transform:scale(1.07)}
.sp-brand{position:absolute;top:24px;left:27px;font-size:18px;font-weight:700;letter-spacing:-.03em}
.sp-zoom{position:absolute;bottom:20px;left:27px;font-size:11px;color:var(--textMuted)}
.sp-copy{padding:32px 34px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sp-category{font-size:11px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--textMuted)}
.sp-copy h3{font-size:30px;line-height:1.13;letter-spacing:-.025em;margin:17px 0 12px;overflow-wrap:anywhere;font-weight:600}
.sp-name{font-size:13px;line-height:1.6;color:var(--textMuted);margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-stock{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#3b674e;margin-bottom:24px}
.sp-stock:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.sp-bottom{margin-top:auto;width:100%}.sp-price{display:block;font-size:28px;letter-spacing:-.035em;font-weight:600}.sp-tax{display:block;font-size:11px;color:var(--textMuted);margin:4px 0 18px}
.sp-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp-actions .buy{width:150px;margin:0}.sp-actions .buy-add{min-height:44px}.sp-details{border:1px solid var(--border);background:#fff;border-radius:10px;padding:13px 18px;font:500 12px var(--font);cursor:pointer;color:var(--text)}
.sp-controls{display:flex;align-items:center;justify-content:space-between;margin-top:17px;gap:15px}.sp-dots{display:flex;gap:7px}.sp-dot{border:0;padding:12px 0;background:transparent;cursor:pointer;width:28px}.sp-dot:after{content:'';display:block;height:3px;border-radius:4px;background:#d8d4ce}.sp-dot[aria-current=true]:after{background:var(--accentSolid)}
.sp-arrows{display:flex;align-items:center;gap:10px}.sp-count{font-size:12px;color:var(--textMuted);margin-right:12px;font-variant-numeric:tabular-nums}.sp-arrow{width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:transparent;font-size:20px;cursor:pointer}.sp-arrow:disabled{opacity:.3;cursor:default}
.spotlight button:focus-visible,.sp-news:focus-visible{outline:2px solid var(--accentSolid);outline-offset:4px}
@media(max-width:760px){.spotlight{padding:0 16px!important;margin-top:18px}.sp-head h2{font-size:23px}.sp-head{align-items:center}.sp-kicker{font-size:9px}.sp-news{font-size:12px}.sp-card{flex-basis:94%;grid-template-columns:1fr;min-height:0}.sp-image{padding:38px 30px 28px}.sp-image img{height:205px}.sp-brand{top:18px;left:20px;font-size:16px}.sp-zoom{bottom:13px;left:20px;font-size:10px}.sp-copy{padding:23px}.sp-copy h3{font-size:24px;margin-top:11px}.sp-name{-webkit-line-clamp:2}.sp-stock{margin-bottom:20px}.sp-price{font-size:26px}.sp-count{margin-right:0}.sp-track{gap:12px}.sp-head h2{max-width:220px}}
@media(prefers-reduced-motion:reduce){.sp-image img{transition:none}}
.sp-image{cursor:default;overflow:hidden}
.sp-photo-open{border:0;background:transparent;width:100%;padding:0;cursor:zoom-in;color:inherit;font:inherit}
.sp-photo-dots{position:absolute;left:26px;right:26px;bottom:20px;display:flex;gap:5px;justify-content:center}
.sp-photo-dots[hidden],.sp-photo-count[hidden]{display:none!important}
.sp-photo-dot{border:0;padding:10px 0;flex:1;max-width:65px;background:transparent;cursor:pointer}
.sp-photo-dot:after{content:'';height:3px;border-radius:3px;display:block;background:#d8d4ce}
.sp-photo-dot[aria-pressed=true]:after{background:var(--accentSolid)}
.sp-photo-count{position:absolute;top:26px;right:24px;font-size:11px;color:var(--textMuted)}
body.news-section #news{display:block!important}
body.news-section .wrap.home,body.news-section .qrow{display:none!important}
.news-heading{padding-top:28px}.news-heading h2{font-size:38px;letter-spacing:-.035em;margin:12px 0 0}.news-heading .sp-news{display:block;margin-bottom:24px}.news-read{text-align:center;margin:12px 0 32px}
body.news-section .news-read{display:none}
body.news-section #page-news{margin-top:24px}
body.news-section #page-news .art-hero{display:none}
body.news-section:is(.card-open,.contacts-open,.about-open,.cart-open,.checkout-open,.lk-open) #news{display:none!important}
body.news-section #news[hidden]{display:none!important}
/* Approved volume news flow, 06.10.2026: native DOM, manual navigation, full covers. */
body.news-section .cf{--cf-card:410px;--cf-ar:1.88;--cf-body:146px;--cf-title:18px;max-width:1320px;margin:0 auto}
body.news-section .cf-frame{padding:32px 0 36px;perspective:1300px}
body.news-section .cf-card{border:1px solid var(--border);box-shadow:0 16px 34px -22px rgba(26,34,49,.45);backface-visibility:hidden}
body.news-section .cf-card.on{border-color:#d0c8c2;box-shadow:0 22px 44px -25px rgba(26,34,49,.48)}
body.news-section .cf-cover{background:#fff}
body.news-section .cf-card img{object-fit:contain}
body.news-section .cf-b{padding:18px 22px;gap:9px}
body.news-section .cf-t{-webkit-line-clamp:3;letter-spacing:-.35px}
body.news-section .cf-m{display:flex;justify-content:space-between;gap:10px;color:var(--textMuted);font-size:11px;flex-shrink:0}
body.news-section .cf-m span{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.news-section .cf-m time{flex-shrink:0}
body.news-section .cf-chip{top:14px;left:14px;bottom:auto;border-radius:6px;background:#fff;color:var(--text);padding:7px 10px;font-size:12px}
.cf-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin:0 0 28px}
.cf-controls .cf-nav{position:static;transform:none;width:48px;height:48px;box-shadow:none;flex-shrink:0}
.cf-controls .cf-nav:active{transform:scale(.97)}
.cf-controls .cf-dots{margin:0;gap:0}
.cf-controls .cf-dots button{width:44px;height:44px;padding:20px 9px;background:transparent;opacity:1;border-radius:0;transform:none}
.cf-controls .cf-dots button::after{position:static;display:block;width:100%;height:4px;background:#d7d9de;border-radius:4px;transform:none}
.cf-controls .cf-dots button[aria-current=true]::after{background:var(--accentSolid)}
.cf-controls .cf-dots button[hidden]{display:none}
.cf-count{font-size:13px;color:var(--textMuted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cf-hint{font-size:12px;color:var(--textMuted);margin:14px 0 0}
@media(min-width:1450px){body.news-section .cf{--cf-card:440px;--cf-body:148px}}
@media(max-width:760px){body.news-section .cf{--cf-card:min(310px,calc(100vw - 64px));--cf-ar:1.67;--cf-body:150px;--cf-title:17px}body.news-section .cf-frame{perspective:850px;padding:28px 0 32px}body.news-section .cf-b{padding:17px}body.news-section .news-heading h2{font-size:32px}.cf-controls{gap:12px;margin-bottom:24px}.cf-controls .cf-nav{width:44px;height:44px}.cf-controls .cf-dots{display:none}.cf-hint{font-size:11px}}
/* Static product; native animated facts keep purchase controls interactive. */
.sp-image:hover img,.sp-image:focus-visible img{transform:none}
.sp-image{padding-bottom:35px}
.sp-feature{width:100%;margin:0 0 24px;padding-top:16px;border-top:1px solid var(--border)}
.sp-feature-stage{position:relative;height:177px}
.sp-feature-panel{position:absolute;inset:0;animation:sp-fact-in .45s ease both}
.sp-feature-panel[hidden]{display:none!important}
.sp-feature-kicker{display:block;font-size:9px;letter-spacing:.12em;color:var(--textMuted);margin-bottom:10px}.sp-feature-title{display:block;font-size:20px;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px}.sp-feature-value{display:block;font-size:40px;line-height:1.1;letter-spacing:-.04em;color:var(--accentSolid);font-weight:600}
.sp-feature-label{display:block;font-size:15px;line-height:1.4;margin-top:10px;color:var(--textMuted)}
.sp-feature-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sp-feature-dots{display:flex;gap:5px}
.sp-feature-dot{width:30px;height:26px;padding:10px 0;border:0;background:transparent;cursor:pointer}
.sp-feature-dot:after{content:'';display:block;height:3px;background:#dedbd5;border-radius:3px}
.sp-feature-dot[aria-pressed=true]:after{background:var(--accentSolid)}
.sp-feature-pause{border:0;background:transparent;color:var(--textMuted);font:12px var(--font);cursor:pointer;padding:6px 0}
@keyframes sp-fact-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.sp-feature-value{font-size:40px}.sp-feature-stage{height:180px}.sp-image{padding-bottom:28px}}
@media(prefers-reduced-motion:reduce){.sp-feature-panel{animation:none}}
.sp-feature-partner .sp-feature-value{font-size:28px;line-height:1.15}.sp-feature-partner .sp-feature-title:empty{display:none}.sp-feature-partner .sp-feature-label{font-size:14px;margin-top:8px}.sp-partner-link{display:inline-block;margin-top:10px;color:var(--accentSolid);font-size:13px;font-weight:600;text-underline-offset:4px}
.sp-retail{display:flex;align-items:center;gap:9px;color:var(--textMuted);font-size:13px;margin-bottom:7px}.sp-retail span{font-size:10px}.sp-retail del{text-decoration-thickness:1px}.sp-feature-value{font-size:clamp(26px,3.5vw,40px)}
#a-partner[hidden]{display:none!important}
/* Clean neutral surfaces, graphite typography and Effort orange. */
:root{--page:#FCFCFD;--depth:none;--text:#17212D;--textMuted:#56616D;--textDim:#73808D;--border:#E6E4DE;--cardBorder:#E6E4DE;--surface2:#F3F1EA;--surface3:#FFFFFF}
body::before,.bar::before{display:none}
.bar{background:#FCFCFD;border-bottom:1px solid #EAE7E0}
#q{background:#FFFFFF;border-color:#DEDCD5;box-shadow:0 3px 12px #17212D06;border-radius:12px}
#q:focus{box-shadow:0 0 0 3px var(--accentGlow);border-color:var(--accentSolid)}
.qrow{padding-top:14px;padding-bottom:14px}
.spotlight{margin-top:30px;margin-bottom:44px}
.sp-head{margin-bottom:22px}
.sp-kicker{font-weight:700;letter-spacing:.14em;color:var(--textMuted)}
.sp-head h2{color:#17212D;font-weight:600;letter-spacing:-.04em}
.sp-news{color:#344354}
.sp-card{border:1px solid #E3E7EA;border-radius:24px;box-shadow:0 12px 36px -24px #17212D24;background:#FFF}
.sp-image{background:#F5F7F8;border-right:1px solid #E7ECEF}
.sp-brand{color:#17212D;font-size:20px}
.sp-copy{background:#FFF;padding-top:30px;padding-bottom:30px}
.sp-copy h3{font-weight:600;color:#17212D}
.sp-category{color:#65717D;font-size:10px;letter-spacing:.09em}
.sp-stock{color:#35604B}
.sp-feature{border-top-color:#EEE9E1;padding-top:18px}
.sp-feature-kicker{color:#9B4528;font-weight:600;letter-spacing:.13em}
.sp-feature-title{color:#263342;font-weight:500}
.sp-feature-value{color:#C44922;font-weight:600}
.sp-feature-label{color:#53606C;line-height:1.5}
.sp-feature-dot:after{background:#EAE3D9}
.sp-feature-dot[aria-pressed=true]:after{background:#D34E25}
.sp-price{font-size:32px;font-weight:700;letter-spacing:-.04em;color:#17212D}
.sp-retail{color:#7B8490}
.sp-tax{color:#65717D}
.sp-actions .buy-add{background:var(--accentSolid);color:#FFF;border-color:var(--accentSolid);font-weight:600;box-shadow:0 4px 10px var(--accentGlow)}
.sp-actions .buy-add:hover{background:var(--accentHover);border-color:var(--accentHover)}
.sp-details{background:#FFF;color:#263342;border-color:#D9DEE2;box-shadow:none}
.sp-details:hover{background:#F5F7F8;border-color:#AEB8C0}
.sp-arrow{background:#FFF;border-color:#E1E3E3;color:#17212D}.sp-arrow:not(:disabled):hover{background:#17212D;color:#FFF;border-color:#17212D}
.sp-photo-dot:after{background:#D7DEE3}.sp-photo-dot[aria-pressed=true]:after{background:#C44922}
.bfilt{filter:none}
.bcard{border-color:#E7E6E0;background:#FFF}
.bcard:hover{box-shadow:0 3px 12px #17212D0A}
.sec-h h2{color:#17212D;font-weight:600}
.ftr{background:#17212D;color:#D3DAE1;border-top:none;margin-top:56px;padding-top:40px;padding-bottom:32px}
.ftr h5{color:#FFF}.ftr a{color:#EDF1F4}.ftr a:hover{color:#FFAE86}.ftr p,.ftr small{color:#B8C1CB}
@media(max-width:760px){.sp-image{border-right:0;border-bottom:1px solid #E7ECEF}.sp-price{font-size:30px}.sp-card{border-radius:20px}.sp-copy{padding:23px}}
/* Shared product-photo backdrop. Editorial imagery and brand logos keep their own backgrounds. */
:root{--product-photo-bg:#F5F7F8}
.sp-image,.pph,.prow-ph,.crow-ph,.sug-ph,.it-ph,.it-thumbs button,
.e-stage,.e-thumbs button,.e-rc .ph,.e-stick .ph,.wb-l,.pre-l,.wb-stage,.wb-plate,
.wb-thumbs button,.wb-dock img,.cp-ph,.co-row .ph,.lb figure,.ssr-item img{
background:var(--product-photo-bg);isolation:isolate;
}
.pph img:not(.boxed),.prow-ph img:not(.boxed),.crow-ph img:not(.boxed),
.sug-ph img:not(.boxed),.it-ph img:not(.boxed),.it-thumbs img:not(.boxed),
.e-stage img:not(.boxed),.e-thumbs img:not(.boxed),.e-rc .ph img:not(.boxed),
.e-stick .ph img:not(.boxed),.wb-stage img:not(.boxed),.wb-thumbs img:not(.boxed),
.cp-ph img:not(.boxed),.co-row .ph img:not(.boxed),.lb img:not(.boxed){mix-blend-mode:multiply}
/* Approved option 02: soft depth, centered cards and precise navigation. */
.sp-track{padding-top:14px;padding-bottom:34px;border-radius:0;gap:20px}
.sp-card{flex-basis:88%;scroll-snap-align:center;border:1px solid #E1E7EC;box-shadow:0 24px 36px -25px #243B5359,0 6px 14px -9px #243B5324}
.sp-controls{margin-top:0}
.sp-arrow{display:inline-flex;align-items:center;justify-content:center;padding:0;width:44px;height:44px;line-height:1;border:1px solid #CCD5DC;background:#FFF;box-shadow:0 5px 12px #2334430D}
.sp-arrow svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp-arrow:disabled{opacity:1;color:#B9C2C9;background:#F6F8F9;border-color:#E5E9EC;box-shadow:none}
.sp-dots{gap:2px;align-items:center}.sp-dot{width:28px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}
.sp-dot:after{width:6px;height:6px;background:#CBD3DA;border-radius:8px;transition:width .2s}
.sp-dot[aria-current=true]:after{width:22px;background:#283B4B}
.sp-feature-dots{gap:2px}.sp-feature-dot{height:32px;width:32px;padding:0;display:flex;align-items:center;justify-content:center}
.sp-feature-dot:after{width:22px;height:3px;background:#DCE2E6}
.sp-feature-pause{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 6px}
.sp-feature-pause svg{width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.sp-card{flex-basis:92%}.sp-track{gap:12px;padding-bottom:28px}.sp-head{margin-bottom:8px}.sp-count{margin-right:2px}.sp-arrows{gap:6px}}
@media(prefers-reduced-motion:reduce){.sp-dot:after{transition:none}}
/* News-like centered product composition. */
.sp-track{padding:24px 11% 38px;gap:18px;scroll-padding-inline:11%;align-items:stretch}
.sp-card{flex:0 0 100%;transform:scale(.92);opacity:.58;transition:transform .35s ease,opacity .35s ease;cursor:pointer}
.sp-card.sp-active{transform:scale(1);opacity:1;cursor:default;z-index:2}
.sp-card:not(.sp-active) .sp-copy,.sp-card:not(.sp-active) .sp-image{pointer-events:none}
.sp-copy{padding:27px}.sp-copy h3{font-size:27px}.sp-image{padding-left:26px;padding-right:26px}
@media(max-width:760px){.sp-track{padding:16px 5% 30px;gap:10px;scroll-padding-inline:5%}.sp-copy{padding:23px}.sp-card{transform:scale(.96)}.sp-copy h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.sp-card{transition:none}}
/* Compact centered cards. */
@media(min-width:761px){
.sp-track{padding-left:13%;padding-right:13%;scroll-padding-inline:13%;padding-top:18px;padding-bottom:30px}
.sp-card{min-height:0}.sp-copy{padding:23px 25px}.sp-copy h3{font-size:25px;margin:12px 0 10px}
.sp-image{padding:44px 24px 26px}.sp-image img{height:240px}
.sp-stock{margin-bottom:17px}.sp-feature{padding-top:14px;margin-bottom:17px}
.sp-feature-stage{height:150px}.sp-feature-title{font-size:18px;margin-bottom:8px}
.sp-feature-value{font-size:32px}.sp-feature-label{font-size:13px;line-height:1.45}
.sp-feature-partner .sp-feature-value{font-size:25px}.sp-feature-partner .sp-feature-label{font-size:13px}
.sp-price{font-size:29px}.sp-tax{margin-bottom:14px}.sp-brand{font-size:18px}
}
@media(max-width:760px){.sp-image img{height:175px}.sp-image{padding-top:36px;padding-bottom:24px}.sp-copy{padding:20px}.sp-feature-stage{height:165px}}
/* Readable neighbor previews instead of cropped product text. */
.sp-card:not(.sp-active){opacity:.85;background:var(--product-photo-bg,#F5F7F8)}
.sp-card:not(.sp-active)>.sp-image,.sp-card:not(.sp-active)>.sp-copy{visibility:hidden}
.sp-neighbor{position:absolute;top:0;bottom:0;width:10%;min-width:60px;padding:16px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--product-photo-bg,#F5F7F8);color:#263342;isolation:isolate;cursor:pointer;border:0}
.sp-neighbor[hidden]{display:none}.sp-before .sp-neighbor{right:0}.sp-after .sp-neighbor{left:0}
.sp-neighbor-brand{font-size:13px;font-weight:650;letter-spacing:-.03em}
.sp-neighbor img{width:100%;height:108px;object-fit:contain;mix-blend-mode:multiply}
.sp-neighbor:hover{background:var(--product-photo-bg,#F5F7F8)}.sp-neighbor:focus-visible{outline-offset:-4px}
@media(min-width:761px){.sp-feature-stage{height:145px}.sp-feature{margin-bottom:10px}.sp-feature-label{margin-top:8px}}
@media(max-width:760px){.sp-neighbor{width:8%;min-width:30px;padding:8px 2px;gap:10px}.sp-neighbor-brand{font-size:9px;writing-mode:vertical-rl}.sp-neighbor img{height:65px}}
/* Three complete cards: compact previews flank the detailed active card. */
@media(min-width:761px){
.sp-track{display:block;overflow:visible;padding:18px 0 30px;scroll-snap-type:none}
.sp-card{display:none;transition:opacity .25s ease;transform:none!important}
.sp-card.sp-active{display:grid;position:relative;width:66%;margin:0 auto}
.sp-card.sp-before,.sp-card.sp-after{display:block;position:absolute;top:9%;height:78%;width:15%;opacity:.92;min-height:0}
.sp-card.sp-before{left:0}.sp-card.sp-after{right:0}
.sp-card:not(.sp-active)>.sp-copy,.sp-card:not(.sp-active)>.sp-image{display:none}
.sp-neighbor{width:100%;min-width:0;padding:24px 12px;gap:24px;border-radius:23px}
.sp-neighbor img{width:100%;height:155px}.sp-neighbor-brand{font-size:18px}
.sp-neighbor-name{font-size:11px;line-height:1.5;text-align:center;overflow-wrap:anywhere;width:100%;color:#586775}
.sp-card.sp-active .sp-copy{padding:22px 20px}.sp-card.sp-active .sp-copy h3{font-size:23px}
.sp-feature-stage{height:165px}.sp-feature-value{font-size:30px}.sp-feature-partner .sp-feature-value{font-size:23px}
.sp-image{padding-left:18px;padding-right:18px}.sp-image img{height:220px}
.sp-actions{gap:7px}.sp-actions .buy{width:130px}.sp-details{padding:12px}
}
@media(max-width:760px){
.sp-track{display:block;padding:12px 0 26px;overflow:visible}
.sp-card{display:none;transform:none!important}.sp-card.sp-active{display:grid;width:100%;position:relative;margin:0}
.sp-neighbor-name{display:none}
}
/* Showroom proposal: quiet catalog surfaces and a compact brand strip. */
.showroom-brands{margin:44px 0 48px;padding:24px 0 18px;border-top:1px solid #E3E7EB;border-bottom:1px solid #E3E7EB}
.showroom-brands .sec-h{margin-bottom:14px;align-items:baseline}
.showroom-brands .sec-h h2{font-size:23px;letter-spacing:-.6px}
.showroom-brands #brands-sub{font-size:12px}
.showroom-brands .brandrow{padding:0;gap:8px;overflow-x:auto}
.showroom-brands .bcard{border:0;border-radius:8px;padding:10px 8px;background:transparent;box-shadow:none;min-height:58px}
.showroom-brands .bcard:hover{background:#F0F3F5;box-shadow:none}
.showroom-brands .bmore{border:0;padding:10px 8px;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
#hrows .hrow{margin-bottom:54px}
#hrows .sec-h{margin-bottom:22px;align-items:baseline;gap:16px;flex-wrap:wrap}
#hrows .sec-h h2{font-size:28px;letter-spacing:-.8px;color:#202A33}
#hrows .sec-h .n{font-size:12px;color:#66717C}
#hrows .sec-h .all{margin-left:auto;border:0;background:transparent;color:#202A33;font-size:13px;text-decoration:underline;text-underline-offset:5px}
#hrows .grid{gap:24px}
#hrows .pcard{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;transform:none;transition:none}
#hrows .pcard:hover{box-shadow:none;transform:none}
#hrows .pph{border-radius:14px;overflow:hidden;border:1px solid #EDF0F2;aspect-ratio:1.3;height:auto}
#hrows .pb{padding:16px 0 0}
#hrows .pb-top{margin-bottom:10px}
#hrows .pbadge{border:0;background:transparent;padding:0;color:var(--textMuted);font-size:11px}
#hrows .pbr{font-size:10px;color:#66717C;letter-spacing:.02em}
#hrows .pnm{font-size:15px;line-height:1.4;font-weight:600;min-height:63px;-webkit-line-clamp:3;color:#202A33}
#hrows .psku{font-size:11px;color:#66717C;margin-top:6px;min-height:16px}
#hrows .pst{font-size:11px;margin-top:10px;min-height:18px}
#hrows .ppr{padding-top:16px;margin-top:auto}
#hrows .ppr .val{font-size:23px;letter-spacing:-.5px;color:#202A33}
#hrows .ppr .lbl{font-size:10px;margin-bottom:3px}
#hrows .buy{margin-top:12px}
#hrows .buy-add{border:1px solid #CFD7DC;border-radius:8px;background:#FFFFFF;color:#263342;height:42px;box-shadow:none}
#hrows .buy-add:hover{border-color:var(--accentSolid);color:var(--accentSolid);background:#FFF}
@media(max-width:600px){
.showroom-brands{margin:28px 0;padding:18px 0}.showroom-brands .sec-h{flex-wrap:wrap;gap:8px}
#hrows .grid{gap:24px 14px}#hrows .sec-h h2{font-size:23px}#hrows .sec-h{gap:8px;margin-bottom:16px}
#hrows .sec-h .n{flex-basis:100%;order:3}#hrows .pnm{font-size:13px;min-height:55px}#hrows .ppr .val{font-size:20px}
}
/* Showroom refinement: grouped cards, tighter spacing, clearer actions. */
.showroom-brands{margin:30px 0 28px;padding:20px 0 14px}
#hrows .grid{gap:18px}
#hrows .sec-h{margin-bottom:18px}
#hrows .pcard{border:1px solid #DFE5E9;border-radius:14px;background:#FFF;overflow:hidden;box-shadow:none}
#hrows .pcard:hover{border-color:#B9C5CE;box-shadow:none}
#hrows .pph{border:0;border-bottom:1px solid #EDF0F2;border-radius:0;aspect-ratio:1.4}
#hrows .pb{padding:14px}
#hrows .pb-top{margin-bottom:8px}
#hrows .pnm{font-size:14px;line-height:1.4;min-height:0}
#hrows .psku{margin-top:5px;min-height:0}
#hrows .pst{margin-top:9px}
#hrows .ppr{padding-top:12px}
#hrows .buy{margin-top:10px}
#hrows .buy-add{background:#EFF2F4;border-color:#BBC7D0;color:#202A33;font-weight:600}
#hrows .buy-add:hover{background:#E7EDF1;border-color:#7F929F;color:#202A33}
#hrows .hrow{margin-bottom:38px}
@media(max-width:600px){#hrows .grid{gap:12px}#hrows .pb{padding:11px}#hrows .pnm{font-size:13px;min-height:0}.showroom-brands{margin:24px 0}}
/* Continuation: useful break between concise merchandising rows. */
.showroom-partner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;margin:4px 0 42px;padding:28px 32px;border:1px solid #DFE5E9;border-left:3px solid var(--brandOrange);border-radius:12px;background:#FFF}
.showroom-partner h2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:0 0 10px;color:#202A33}
.showroom-partner p{font-size:14px;line-height:1.55;color:#66717C;max-width:550px;margin:0}
.showroom-partner-action{display:flex;flex-direction:column;align-items:center;gap:12px}
.showroom-partner-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:8px;background:#263342;color:#FFF;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.showroom-partner-cta:hover{background:#394A57;color:#FFF}
.showroom-signin{border:0;background:none;color:#52616D;font:inherit;font-size:12px;padding:4px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.showroom-more{display:block;margin:20px auto 0;background:#FFF;border:1px solid #CBD4DA;border-radius:8px;padding:11px 24px;font:inherit;font-size:13px;color:#263342;cursor:pointer}
.showroom-more[hidden]{display:none}.showroom-more:hover{border-color:#7F929F}
.showroom-partner a:focus-visible,.showroom-partner button:focus-visible,.showroom-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.showroom-partner{grid-template-columns:1fr;gap:20px;padding:22px 20px;margin-bottom:30px}.showroom-partner h2{font-size:22px}.showroom-partner-action{align-items:flex-start}.showroom-partner p{font-size:13px}}
/* Lower homepage: brand focus, recent products, legible contact footer. */
#hrows .showroom-brand-week{padding-top:22px;border-top:1px solid #E3E7EB}
#hrows .showroom-brand-week .sec-h{align-items:center;gap:18px}
#hrows .showroom-brand-week .blogo{width:120px;max-width:120px;height:38px;object-fit:contain;margin:0;padding:0}
.showroom-brand-heading{display:flex;flex-direction:column;gap:4px}
.showroom-brand-label{font-size:12px;color:#66717C}
#hrows .showroom-brand-heading h2{font-size:25px;margin:0}
#seen.seen-home{border:0;border-top:1px solid #E3E7EB;border-radius:0;background:transparent;box-shadow:none;padding:26px 20px 14px;margin:12px auto 24px}
#seen h3{font-size:22px;font-weight:600;text-transform:none;letter-spacing:-.5px;color:#202A33;margin:0 0 20px}
#seen .e-rel{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}
#seen .e-rc{width:168px;flex:0 0 168px;border:1px solid #DFE5E9;border-radius:12px;background:#FFF;box-shadow:none;overflow:hidden}
#seen .e-rc:hover{border-color:#A9B8C3;transform:none}
#seen .e-rc .ph{border-radius:0;height:106px}
#seen .e-rc .nm{font-size:12px;line-height:1.45}
#seen .e-rc .pr{font-size:15px;color:#202A33}
.ftr{padding:36px 0 28px;margin-top:38px;background:#202B36}
.ftr .wrap{grid-template-columns:1fr 1fr 1.15fr;gap:30px 40px}
.ftr .fc:nth-child(2){order:-1}
.ftr .fc h5{color:#D5DFE7;font-size:13px;letter-spacing:0;text-transform:none;margin:0 0 16px;font-weight:500}
.ftr .fc p{font-size:13px;line-height:1.65;color:#C2CCD5;margin:0 0 9px}
.ftr .fc b,.ftr .fc a.tel{color:#FFF}
.ftr .fc a.tel{font-size:23px;letter-spacing:-.4px;white-space:nowrap}
.ftr .fl{color:#EDF2F6;border-color:#667785;font-weight:400}
.ftr .legal{color:#AEBCC7;border-top:1px solid #495865;line-height:1.6;font-size:11px;padding-top:20px;margin-top:2px}
@media(max-width:760px){.ftr .wrap{grid-template-columns:1fr;gap:26px}.ftr .fc h5{margin-bottom:10px}#seen h3{font-size:20px}#hrows .showroom-brand-week .sec-h{gap:12px}#hrows .showroom-brand-week .blogo{width:92px;height:30px}#hrows .showroom-brand-heading h2{font-size:22px}}
/* Product facts with stable purchase zone and useful neighbor prices. */
.sp-feature-kicker{display:none}
.sp-feature-title{font-size:15px;color:#66717C;font-weight:500;line-height:1.4;margin-bottom:10px}
.sp-feature-value{font-size:32px;line-height:1.15;letter-spacing:-.6px}
.sp-feature-label{font-size:13px;line-height:1.5;margin-top:12px}
.sp-feature-pause{width:36px;height:36px;padding:0;border:1px solid #DCE3E8;border-radius:50%;background:#FFF;color:#52616D;flex-shrink:0}
.sp-feature-pause:hover{background:#F0F3F5;border-color:#AAB9C4}
.sp-feature-pause svg{width:13px;height:13px}
.sp-neighbor{gap:18px}
.sp-neighbor-name{min-height:34px;display:flex;align-items:center;justify-content:center}
.sp-neighbor-price{font-size:18px;font-weight:650;letter-spacing:-.3px;color:#202A33;margin-top:0}
.sp-neighbor-tier{font-size:9px;color:#66717C;margin-top:-13px}
.sp-photo-open>img{transform:scale(var(--sp-photo-scale,1))}
.sp-image:hover .sp-photo-open>img{transform:scale(var(--sp-photo-scale,1))}
.sp-copy{display:flex;flex-direction:column}
.sp-bottom{margin-top:auto}
@media(min-width:761px){
.sp-card.sp-active{min-height:474px}
.sp-card.sp-active .sp-copy h3{min-height:58px}
.sp-feature{margin-bottom:14px;flex:1}
.sp-feature-stage{height:130px}
.sp-neighbor img{height:135px}
}
@media(max-width:760px){.sp-feature-stage{height:125px}.sp-feature-value{font-size:30px}.sp-feature-title{font-size:14px}}
/* White search header with a separate service line. */
:root{--page:#FAFBFC;--bgPage:#FAFBFC}
body{background:#FAFBFC}
.header-service{background:#F1F4F6;border-bottom:1px solid #E5E9ED;color:#5E6C78;font-size:11px}
.header-service-inner{max-width:1600px;margin:auto;min-height:36px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.service-separator{color:#A6B1B9;margin:0 10px}
.header-service-contact{display:flex;align-items:center;gap:20px}
.header-service-contact a{color:#263342;font-size:13px;font-weight:650;white-space:nowrap}
.bar-r .pop-info{max-height:calc(100dvh - 180px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:761px){
.bar{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:20px;padding:16px 24px;max-width:none;background:#FFF;border-bottom:1px solid #E5E9ED;position:sticky;top:0}
.bar-l,.bar-r{width:auto!important;min-width:0!important;flex-basis:auto!important}
.bar .sbox{width:100%;min-width:0;max-width:none;margin:0;flex:none;background:#F7F9FA;border-color:#D6DEE5;box-shadow:none}
.bar .logo{margin-right:12px}.bar .logo b{font-size:15px}
.bar .pill{padding:0 8px}
.qrow{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px;background:#FAFBFC}
.qrow>.teln{display:none}
.qrow .quick{flex:1;overflow-x:auto;scrollbar-width:none}
.qrow>.cta{flex:none;margin-left:auto;min-height:36px;padding:8px 13px;font-size:12px;border-color:#D1DAE1;color:#344451;background:#FFF}
/* Company navigation belongs to the persistent header, not the page-specific category row. */
.bar-r .hlink{min-height:44px;padding:0 10px;font-size:13px}
.bar-r .pop-info{left:auto;right:0;max-height:calc(100dvh - 120px)}
.sp-preview-mode{margin-top:12px}
}
@media(max-width:760px){.header-service{display:none}.bar{background:#FFF;border-bottom:1px solid #E5E9ED}.qrow .teln{display:block}}
@media(min-width:761px) and (max-width:1050px){.bar{gap:12px;padding-left:20px;padding-right:20px}.bar .logo{margin-right:4px}.bar .logo b{font-size:13px}.bar .pill{font-size:12px;padding:0 5px}.header-service-inner{padding:0 20px}}
@media(min-width:761px) and (max-width:1050px){
.bar{grid-template-columns:minmax(0,1fr) auto}
.bar .sbox{grid-column:1 / -1;grid-row:2}
.bar-r .pop-info{max-height:calc(100dvh - 100px)}
}
/* Product design preview: neutral gallery, clear purchase hierarchy. */
body.card-open .qrow{display:none}
.it{background:#FAFBFC}.it-top{border-color:#E5E9EC}.it-wrap{padding-top:24px}
.it .wb{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);border:0;border-radius:0;background:transparent;box-shadow:none;gap:32px;overflow:visible;align-items:start}
.it .wb-l{padding:22px;min-height:0;background:#F3F5F7;border:1px solid #E4E8EB;border-radius:18px}
.it .wb-stage{height:330px!important;min-height:330px!important;flex:none}
.it .wb-stage img{max-height:88%;max-width:92%}
.it .wb-plate{height:100%}
.it .wb-r{padding:4px 0 0;border:0;animation:none}
.it .wb-in{animation:none;opacity:1;transform:none}
.it .wb-r h1{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:8px 0 12px;overflow-wrap:anywhere}
.it .wb-kind{font-size:13px;font-weight:500;color:#606C76}
.it .wb-sku{font-size:11px}
.it .wb-big{font-size:38px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.it .wb-big small{font-size:12px;color:#68747F}
.it .wb-flip{height:90px;margin-top:12px}
.it .wb-buy{margin:10px 0 8px;flex-wrap:nowrap}
.it .wb-qty,.it .wb-cta{height:48px;border-radius:10px}
.it .wb-cta{box-shadow:none}
.it .wb-r>.e-ask{text-align:left;margin:8px 0 0;font-size:12px}
.it .wb-av{margin-top:24px}
.it .wb-av .avh h4{font-size:15px}
.it .wb-av .avm{font-size:10px}
.it .wb-av .tiles{gap:6px 10px;margin-top:12px}
.it .wb-tile{padding:12px;gap:6px;border-radius:10px}
.it .wb-tile.own{background:var(--ownStockBg);border-color:var(--ownStockBorder)}
.it .wb-tile.own h5,.it .wb-tile.own .q b,.it .wb-tile.own .q small,.it .wb-tile.own p,.it .wb-tile.own .pr{color:var(--ownStockText)}
.it .wb-tile .q b{font-size:24px}
.it .wb-tile h5{font-size:12px;gap:6px;line-height:16px}
.it .wb-tile p{font-size:11px;line-height:1.4}
.it .wb-more{padding:10px 0;border:0;border-bottom:1px solid #E5E9EC;border-radius:0;gap:6px;font-size:11px}
.it .wb-lock{margin:16px 0 0;padding:13px 0 0;border:0;border-top:1px solid #E5E9EC;line-height:1.7;font-size:11px;flex-wrap:wrap;gap:5px;background:none}
.it .wb-trust{font-size:11px;line-height:1.7;margin-top:14px;padding:0;background:none;border:0}
.it .wb-facts{display:none}
.it .wb-docs{margin:18px 0 0;padding-top:12px}
.it .wb-thumbs{justify-content:center}.it .wb-thumbs[hidden],.it .wb-dots[hidden]{display:none}
.pd-keyfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #DEE4E8;margin-top:18px;padding-top:18px;gap:14px}
.pd-keyfacts b{display:block;font-size:20px;letter-spacing:-.4px;color:#242D35;font-weight:600}
.pd-keyfacts span{display:block;font-size:11px;color:#65727D;margin-top:6px;line-height:1.4}
.it .e-about{margin-top:30px}
.it .wb-tabsec{background:#FFF;border:1px solid #E3E8EC;border-radius:14px;padding:8px 22px 22px;margin-top:24px}
@media(max-width:900px){.it .wb{gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.it .wb-l{padding:16px}.it .wb-qty button{width:30px}.it .wb-qty .odo{width:34px}.it .wb-buy{flex-wrap:wrap}.it .wb-stage{height:280px!important;min-height:280px!important}}
@media(max-width:600px){.it-wrap{padding:16px 16px 40px}.it .wb{display:flex;flex-direction:column;gap:18px}.it .wb-head{padding:0;background:none;border:0}.it .wb-l,.it .wb-r{width:100%;box-sizing:border-box}.it .wb-stage{height:240px!important;min-height:240px!important}.it .wb-r{padding:0}.it .wb-buy{flex-wrap:nowrap}.it .wb-flip{margin-top:0}.it .wb-head h1{font-size:25px}.pd-keyfacts{margin-top:10px;padding-top:14px}.pd-keyfacts b{font-size:18px}.it .wb-tabsec{padding:8px 14px 18px}.it .wb-av .avm{font-size:9px}}
/* Gallery and shared service baseline */
.it .wb.noph{grid-template-columns:minmax(0,1fr)}
.it .wb.noph .wb-r{max-width:760px}
.it .wb{gap:28px;align-items:stretch}
.it .wb-l{display:flex;flex-direction:column}
.it .wb-r{padding-top:8px}
.it .wb-dots{display:none!important}
.it .wb-thumbs{margin:12px 0 0;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding:3px;justify-content:flex-start}
.it .wb-thumbs button{flex:0 0 60px;width:60px;height:60px;border-radius:9px;background:#fff;border:1px solid #DAE0E5;box-shadow:none;transform:none}
.it .wb-thumbs button.on{border:1.5px solid var(--accent);box-shadow:0 0 0 2px #FFF}
.it .wb-thumbs button:focus-visible,.pd-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.it .wb-docs{margin-top:auto;padding-top:16px;border:0}
.it .pd-keyfacts+.wb-docs{margin-top:18px}
.it .wb-docs h4{font-size:12px;text-transform:none;letter-spacing:0}
.it .wb-docs a{font-size:11px;padding:6px 0}
.it .wb-more{border:0;padding-bottom:0}
.it .wb-lock{border:0;padding:0;margin-top:20px}
.pd-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:1px solid #DCE2E7;background:#FFF;border-radius:50%;display:grid;place-items:center;z-index:3;color:#596772;box-shadow:0 2px 5px #24334208}
.pd-arrow.prev{left:0}.pd-arrow.next{right:0}.pd-arrow svg{width:15px;height:15px}
.pd-arrow[hidden]{display:none}.pd-arrow:hover{border-color:#8F9AA4;color:#202C36}
.pd-services{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:24px;margin-top:24px;padding:22px 0;border-top:1px solid #DFE5E9;border-bottom:1px solid #DFE5E9}
.pd-services a{font-size:13px;font-weight:600;color:#28353F;text-decoration:none;display:inline-block;margin-bottom:7px}
.pd-services a:hover{text-decoration:underline}.pd-services p{margin:0;font-size:12px;color:#687580;line-height:1.6;max-width:35ch}
.it .e-about{margin-top:24px}
@media(max-width:600px){.it .wb{gap:18px}.pd-services{grid-template-columns:1fr;gap:18px;padding:20px 0}.it .wb-l{height:auto}.it .wb-r{padding-top:0}.pd-arrow{width:30px;height:30px}}
.pd-description-more summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600;padding:10px 0}.pd-description-more[open] summary{margin-bottom:12px}.pd-description-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Detail gallery keeps its own height; purchase terms must not stretch the photo panel. */
.it .wb-l{align-self:start}
.it .wb-thumbs{justify-content:center}
.it .pd-keyfacts{gap:10px}
.it .wb-l{container-type:inline-size;container-name:product-photo}
.it .pd-keyfacts>div{min-width:0;display:grid;grid-template-rows:1fr auto}
.it .pd-keyfacts b{min-width:0;font-size:16px;letter-spacing:-.2px;font-variant-numeric:tabular-nums;overflow-wrap:break-word;line-height:1.45}
@container product-photo (max-width:500px){
.it .pd-keyfacts{grid-template-columns:1fr;gap:10px}
.it .pd-keyfacts>div{grid-template-columns:minmax(80px,.8fr) minmax(0,1.6fr);grid-template-rows:auto;column-gap:12px;align-items:baseline}
.it .pd-keyfacts b{grid-column:2;grid-row:1;font-size:14px;letter-spacing:0}
.it .pd-keyfacts span{grid-column:1;grid-row:1;margin-top:0;font-size:11px}
}
/* A shared divider baseline only applies to the side-by-side product layout. */
@media(min-width:601px){
.it .pd-keyfacts{margin-top:calc(18px + var(--facts-align,0px))}
.it .wb-av{margin-top:calc(24px + var(--availability-align,0px))}
}
/* Shared store surfaces: catalogue, search, checkout and information pages. */
.bar .pill{height:38px;min-height:38px;border:1px solid #DFE5E9;border-radius:9px;padding:0 10px;gap:7px;background:#FFF;font-weight:500;max-width:170px;flex-shrink:1}
.bar .pill>span{min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .pill svg,.bar .pill em{flex-shrink:0}
.bar .pill:hover{background:#F3F6F8;border-color:#BAC6CF}
.bar .pill.on{background:#EBF0F4;border-color:#AEBFCB;color:#263A48;font-weight:600;box-shadow:none}
.bar .pill[aria-expanded=true]{background:#E7EDF2;border-color:#869BAA;color:#263A48;box-shadow:0 0 0 2px #EAF0F4}
.bar .pill:focus-visible{outline:2px solid #667F91;outline-offset:3px}
.pop,.sug{background:#FFF;border:1px solid #DCE3E8;border-radius:14px;box-shadow:0 16px 40px -16px #24384740}
.popq{background:#F7F9FA;padding:14px 16px}.popq input{font-size:14px;min-height:24px}
.pane{padding:8px}.crow{padding:11px 12px;border-radius:8px;text-align:left}
.crow:hover,.sug-row:hover{background:#F3F6F8}
.crow.on,.sug-row.on{background:#EAF0F4;box-shadow:inset 3px 0 #647F92;color:#213743}
.crow.on .nm{font-weight:600}.sug-hl{color:#263A48;text-decoration-color:#8BA1B0}
.sug-row{padding:10px;border-radius:9px}.sug-ph{width:48px;height:48px}.sug-price{font-size:14px}
.chip{height:auto;min-height:32px;padding:6px 10px;border:1px solid #C6D2DB;background:#EDF2F5;color:#304552;border-radius:8px;font:500 12px var(--font);max-width:100%;white-space:normal;text-align:left;line-height:1.4}
.chip b{font-size:17px;line-height:1;color:#667B89}.chip:hover{background:#E3EBF0}.chip:focus-visible{outline:2px solid #667F91;outline-offset:2px}
.res-h{gap:12px;margin-bottom:12px}.res-h h1{font-size:26px;letter-spacing:-.5px}.res .pcard{background:#FFF;border:1px solid #DFE5E9;border-radius:14px;box-shadow:none;overflow:hidden}
.res .pcard:hover{border-color:#ACBCC7;box-shadow:none}.res .pph{border:0;border-bottom:1px solid #EDF0F2;border-radius:0}.res .pb{padding:14px}.res .pnm{line-height:1.45}.res .ppr .val{font-size:23px;letter-spacing:-.5px}
.res .buy-add{background:#EFF2F4;border-color:#BBC7D0;color:#202A33}.res .buy-add:hover{background:#E5ECF1;border-color:#899FAB}
.cp-tbl,.cp-box,.cp-empty,.co-box,.rd-card,.rd-pg,.lkw{background:#FFF;border-color:#DFE5E9;border-radius:14px;box-shadow:none}
.cp-box{box-shadow:0 8px 22px -18px #273D5140}.cp-th{background:#F3F6F8;color:#61717D;letter-spacing:0;text-transform:none;font-size:12px}.cp-pr small{display:block;margin-top:4px}.cp-allocation{font-size:11px;color:#5C7060;line-height:1.5;margin-top:7px}
.pg-rule{width:100%;height:1px;background:#DFE5E9;margin:18px 0 24px}.pg-hd>div:first-child{flex:1}.pg-h1{font-size:32px;letter-spacing:-.7px}.co-seg button.on{background:#EDF2F5;border-color:#8DA3B2;color:#263A48}
.rd-card{box-shadow:none}.rd-srvnav{border-color:#DFE5E9}.rd-srvnav span a[aria-current]{color:#273C4B;border-color:#687F90}.rd-pg:hover{background:#F4F7F9;border-color:#B7C5CF}.rd-faq summary{font-size:16px;line-height:1.45}.rd-faq details p{color:#5E6D78}.rd-eyebrow{letter-spacing:.02em;text-transform:none;font-size:12px}
.lkw{box-shadow:0 18px 60px -18px #24384750}.lkw input{background:#F7F9FA;border-color:#CED8DF}.lkw .lk-go{background:var(--accentSolid);color:#FFF;border-color:var(--accentSolid)}.lkw .lk-go:hover{background:var(--accentHover);border-color:var(--accentHover)}.lkw .lk-sec{border-radius:9px}
@media(max-width:760px){.bar .pill{max-width:130px;padding:0 8px;min-height:40px}.bar .pill>span{max-width:82px}.res-h h1{font-size:23px}.res .pb{padding:11px}.res .ppr .val{font-size:21px}.sug-price{font-size:13px}.sug-row{gap:8px}.pg-h1{font-size:28px}}
.lkp-co .cap{font-size:12px;text-transform:none;letter-spacing:0}.lkp-co h1{font-size:30px;font-weight:600}.lkp-kpi{border-color:#DFE5E9;border-radius:14px}.lkp-kpi>div{padding:20px}.lkp-tab.on{color:#2E4555}.lkp-tab.on::after{background:#687F90}.lkp-out,.lkp-chat{min-height:40px;border-radius:9px}.lkp-chat{color:#304B5D;border-color:#BCCBD5;background:#F2F6F8}.lkp-note{color:#637480;line-height:1.65}
.news-rubrics button.on{background:#EBF0F4;color:#304552;border-color:#AEBFCB}.art-mast{border-bottom:1px solid #CED8DF}.art-listen{border-color:#DFE5E9}.ssr-news-list article{border-color:#DFE5E9;background:#FFF;border-radius:14px}.art-body p{max-width:70ch}
:root{--surface2:#EEF2F5;--surface3:#F7F9FA;--border2:#CFD8DF;--border:#DFE5E9;--cardBorder:#E2E7EB;--skelB:#F4F7F9;--textDim:#64717D}
/* Checkout: persistent labels and calm, explicit selection. */
#page-checkout .co-label{display:block;margin:0 0 8px;font-size:12px;font-weight:600;color:#53616D}
#page-checkout .co-label span{color:#A95E24}
#page-checkout .fx>i{display:none}
#page-checkout .co-seg button.on,#page-checkout .co-opt.on{background:#F0F4F7;border-color:#91A4B2;color:#263A48;box-shadow:inset 0 0 0 1px #91A4B2}
#page-checkout .co-opt.on s{border-color:#526D80;background:#526D80}
#page-checkout .co-opts{grid-template-columns:1fr;gap:10px}
#page-checkout .co-opt{text-align:left;border-radius:12px;padding:16px 18px}
#page-checkout .co-opt.on s:after{background:#fff}
#page-checkout .co-opt span{line-height:1.55}
#page-checkout .co-row .meta{line-height:1.5;margin-top:5px}
#page-checkout .co-box .co-note{font-size:12px;line-height:1.6;margin:12px 0}
#page-checkout .co-seg button:focus-visible,#page-checkout .co-opt:focus-visible{outline:2px solid #526D80;outline-offset:3px}
/* Effort showcase: consistent surfaces, stable controls and restrained motion. */
:root{--eff-page:#F8FAFC;--eff-paper:#FFFFFF;--eff-ink:#202B36;--eff-muted:#596875;--eff-line:#DDE4E9;--eff-action:var(--accentSolid)}
.sp-reference.sp-active{border-color:#CBD5DD;box-shadow:0 16px 38px -28px #202B3655}
.sp-reference .sp-image{background:#F1F4F6;border-right:1px solid var(--eff-line)}
.sp-reference .sp-copy{background:var(--eff-paper)}
.sp-reference .sp-feature{width:100%;border-top:1px solid var(--eff-line);padding-top:14px}
.sp-reference .sp-feature-stage{height:126px}
.sp-reference .sp-feature-title{font-size:12px;color:var(--eff-muted);margin-bottom:9px}
.sp-reference .sp-feature-value{font-size:36px;font-weight:600;letter-spacing:-1px;color:var(--eff-ink)}
.sp-reference .sp-feature-label{font-size:13px;line-height:1.5;color:var(--eff-muted);max-width:30ch}
.sp-reference .sp-feature-nav{gap:6px;width:100%;align-items:center}
.sp-reference .sp-feature-dots{gap:3px;flex:1;flex-wrap:wrap}
.sp-reference .sp-feature-dot{width:32px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;border:0;background:transparent}
.sp-reference .sp-feature-dot:after{content:"";display:block;width:22px;height:3px;border-radius:4px;background:#DCE2E6}
.sp-reference .sp-feature-dot[aria-pressed=true]:after{background:var(--eff-action)}
.sp-reference .sp-feature-pause{width:30px;height:30px;min-height:30px;border:0;background:transparent}
.sp-reference .sp-feature-panel:not([hidden]){animation:eff-fact-in .3s ease-out}
.sp-reference .sp-actions{min-height:48px}
.sp-reference .sp-bottom{padding-top:14px;border-top:1px solid var(--eff-line)}
@keyframes eff-fact-in{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.sp-reference .sp-image{border-right:0}}
@media(prefers-reduced-motion:reduce){.sp-reference .sp-feature-panel:not([hidden]){animation:none}}
@media(min-width:761px){#q{padding-right:220px}}
/* Explicit partner entry; the link can be copied and shared. */
#a-lk.partner-login-entry{width:auto;display:inline-flex;gap:6px;padding:0 8px;text-decoration:none;color:#334451;white-space:nowrap}
.partner-login-label{font-size:11px;font-weight:500}
@media(max-width:760px){#a-lk.partner-login-entry{display:none}#a-lk-m{width:auto;gap:4px;padding:0 5px}#a-lk-m .partner-login-label{font-size:10px}}
/* Text entry focus uses the same single border and halo as the main search. */
:root{--field-focus-width:1px;--field-focus-halo:0 0 0 3px var(--accentGlow)}
:is(#q,.lkw input,.fx input,.fx textarea,.frow input,.frow textarea,.rv-f input,.rv-f textarea,.wr-find input):focus{
border-width:var(--field-focus-width);border-style:solid;border-color:var(--accentSolid);outline:none;box-shadow:var(--field-focus-halo)
}
.fx.bad :is(input,textarea):focus{border-color:var(--red);box-shadow:0 0 0 3px #DC26261A}
/* Catalog alignment */
.res .pcard .pnm{min-height:calc(3 * 1.45em)}
.res .pcard .psku{min-height:1.45em;line-height:1.45;overflow-wrap:anywhere}
.res .pcard .buy{min-height:42px}
.res .pcard .buy-add{height:42px;border-radius:8px}
.res .pcard:hover{transform:none}
.res .pcard:focus-within{border-color:#91A4B2}
.lkw .lk-go,.lkw .lk-sec{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0 16px;line-height:1.2}
/* Approved purchase-color cursor, 2026-10-06: 64px glow matches the buy button. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
body,body *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22glow%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23285873%22%20stop-opacity%3D%22.48%22%2F%3E%3Cstop%20offset%3D%22.28%22%20stop-color%3D%22%23285873%22%20stop-opacity%3D%22.30%22%2F%3E%3Cstop%20offset%3D%22.58%22%20stop-color%3D%22%23285873%22%20stop-opacity%3D%22.11%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23285873%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2233%22%20r%3D%2230%22%20fill%3D%22url(%23glow)%22%2F%3E%3Cpath%20d%3D%22M25%2025%20L43%2032%20Q45%2033%2042.5%2034%20L35.2%2035.6%20L32.4%2043%20Q31.5%2045%2030.5%2042.5%20Z%22%20fill%3D%22%23101318%22%20stroke%3D%22%23FFF%22%20stroke-width%3D%222.3%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 25 25,auto!important}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),textarea,[contenteditable="true"],[contenteditable="true"] *{cursor:text!important}
button:disabled,input:disabled,[aria-disabled="true"]{cursor:not-allowed!important}
}
/* Photo scrubber shared by every product tile. */
.tile-gallery{position:relative;isolation:isolate}
.tile-gallery .tile-gallery-layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;padding:14px;box-sizing:border-box;pointer-events:none;transform:none!important}
.tile-gallery .tile-gallery-layer[hidden],.tile-gallery-bars[hidden]{display:none!important}
.tile-gallery-host{position:relative}
.tile-gallery-bars{position:absolute;display:flex;justify-content:center;align-items:center;gap:5px;height:4px;pointer-events:none;z-index:2}
.tile-gallery-bars span{width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#CBD1D6}
.tile-gallery-bars span.active{background:#78838D}
.sp-photo-dots{gap:2px}
.sp-photo-dot{flex:0 0 16px;max-width:16px;padding:8px 6px}
.sp-photo-dot:after{width:4px;height:4px;border-radius:50%;background:#CBD1D6}
.sp-photo-dot[aria-pressed=true]:after{background:#78838D}
.prow-ph .tile-gallery-layer{padding:4px}
/* 02.10: a lighter homepage, retaining live products and every existing action. */
:root{color-scheme:light;--focus-ring:#397EB5;--selection-bg:#DCEAF5}
/* Native browser defaults otherwise differ between macOS and Windows. Keep forced-colour accessibility. */
@media(forced-colors:none){
:root ::selection{background:var(--selection-bg)!important;color:#202B36!important}
:focus-visible{outline-color:var(--focus-ring)!important;outline-width:2px!important;outline-style:solid!important;box-shadow:none!important}
}
input:not([type=checkbox]):not([type=radio]):focus-visible,textarea:focus-visible,select:focus-visible{outline-style:solid;outline-offset:2px}
#spotlight{margin-top:28px}
#spotlight .sp-head{margin-bottom:16px}
#spotlight .sp-head h2{font-size:30px;font-weight:600;letter-spacing:-.7px}
#spotlight .sp-track{padding-top:12px;padding-bottom:16px}
#spotlight .sp-card{box-shadow:none;border-color:#DEE4E9;border-radius:22px}
#spotlight .sp-card.sp-active,#spotlight .sp-image,#spotlight .sp-photo-open{cursor:pointer}
#spotlight .sp-photo-open{display:block;text-decoration:none}
#spotlight .sp-title-link{color:inherit;text-decoration:none}
#spotlight .sp-title-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#spotlight .sp-neighbor{text-decoration:none}
#spotlight a:focus-visible{outline:2px solid var(--accentSolid);outline-offset:4px}
#spotlight .sp-neighbor:focus-visible{outline-offset:-4px}
#spotlight .camera-badges,#spotlight .sp-feature{cursor:default}
#spotlight .sp-card.sp-active{min-height:420px}
#spotlight .sp-card.sp-active .sp-copy{padding:24px;gap:0}
#spotlight .sp-copy h3{font-size:23px;line-height:1.25;min-height:0;margin:12px 0 14px}
#spotlight .sp-stock{margin-bottom:12px;font-size:12px}
#spotlight .sp-image{background:#F4F6F8}
#spotlight .sp-image img{height:250px;max-width:100%}
#spotlight .sp-brand{font-size:19px;left:24px;top:24px}
#spotlight .camera-badges-compact{gap:8px;margin:0 0 18px}
#spotlight .camera-badges-compact .camera-badge{min-height:54px;padding:8px 10px;gap:10px;border-radius:10px;font-size:13px;background:#F7F8FA}
#spotlight .camera-badges-compact .camera-badge img{height:34px;width:34px}
#spotlight .camera-badges-compact .camera-badge small{font-size:11px;margin-top:2px}
#spotlight .sp-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'retail retail' 'price buy' 'tax more';gap:4px 12px;align-items:center;padding-top:16px}
#spotlight .sp-retail{grid-area:retail;margin:0 0 4px}
#spotlight .sp-price{grid-area:price;font-size:27px;font-weight:600;letter-spacing:-.6px;white-space:nowrap}
#spotlight .sp-tax{grid-area:tax;font-size:10px;margin:0}
#spotlight .sp-actions{display:contents}
#spotlight .sp-actions .buy{grid-area:buy;width:146px;margin:0}
#spotlight .sp-actions .buy-add{background:#FFF;color:#263342;border-color:#CDD6DE;box-shadow:none;font-weight:500;border-radius:10px}
#spotlight .sp-actions .buy-add:hover{background:#F4F7F9;border-color:#8A9BA8}
#spotlight .sp-details{grid-area:more;background:none;border:0;padding:5px 0;min-height:28px;font-size:11px;color:#596875;text-align:right;justify-self:end}
#spotlight .sp-details:hover{color:var(--accentSolid);text-decoration:underline}
#spotlight .sp-neighbor{padding:22px 14px;gap:18px}
#spotlight .sp-neighbor img{height:120px}
#spotlight .sp-neighbor-price{font-size:19px;font-weight:600}
#spotlight .sp-card.sp-before,#spotlight .sp-card.sp-after{top:7%;height:84%;background:#F6F8FA}
#spotlight .sp-controls{padding-top:0}
#spotlight .sp-dot{min-width:32px;min-height:32px}
.showroom-brands{border:0;margin:36px 0 44px;padding:0}
.showroom-brands .sec-h{margin-bottom:14px}
.showroom-brands .bcard{border:1px solid #E1E7EB;border-radius:11px;background:#FFF;min-height:58px;padding:10px;flex:1 0 auto;justify-content:center}
.showroom-brands .bmore{border:1px solid #E1E7EB;border-radius:11px;background:#FFF;min-height:58px;padding:10px 14px;text-decoration:none}
.showroom-brands .bcard:hover,.showroom-brands .bmore:hover{background:#F5F7F9;border-color:#B8C6D0}
#hrows{gap:40px}
#hrows .hrow{margin:0}
#hrows .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
#hrows .sec-h{margin-bottom:18px;gap:12px}
#hrows .sec-h h2{font-size:26px;font-weight:600;letter-spacing:-.6px}
#hrows .sec-h .all{min-height:32px;display:flex;align-items:center;text-decoration:none}
#hrows .pcard{border-color:#E1E7EB;border-radius:16px;background:#FFF}
#hrows .pph{height:190px;aspect-ratio:auto;background:#F7F9FA;border:0;margin:8px 8px 0;border-radius:10px}
#hrows .pb{padding:18px;gap:6px}
#hrows .pb-top{margin-bottom:0}
#hrows .pnm{font-size:15px;line-height:1.45;font-weight:500;min-height:65px}
#hrows .psku{font-size:11px;margin:0}
#hrows .pst{font-size:12px;min-height:22px;margin-top:4px}
#hrows .ppr{padding-top:14px}
#hrows .ppr .val{font-size:24px;font-weight:600}
#hrows .buy{margin-top:10px}
#hrows .buy-add{background:#FFF;border-color:#D2DBE2;font-weight:500}
#hrows .buy-add:hover{background:#F4F7F9;border-color:#8A9BA8}
.showroom-partner{margin:0;padding:24px 28px;gap:24px;background:#FFF;border-color:#E1E7EB;border-left-color:var(--brandOrange)}
.showroom-partner h2{font-size:22px;font-weight:600;margin-bottom:6px}
.showroom-partner p{font-size:13px}
.showroom-partner-cta{background:#FFF;color:#263342;border:1px solid #CDD6DE}
.showroom-partner-cta:hover{background:#F4F7F9;color:#263342}
@media(min-width:761px) and (max-width:1050px){
#spotlight .sp-card.sp-active{width:72%}
#spotlight .sp-card.sp-before,#spotlight .sp-card.sp-after{width:12%}
#spotlight .sp-card.sp-active .sp-copy{padding:20px 16px}
#spotlight .sp-copy h3{font-size:20px}
#spotlight .sp-bottom{grid-template-columns:1fr;grid-template-areas:'retail' 'price' 'tax' 'buy' 'more';gap:5px}
#spotlight .sp-actions .buy{width:100%;margin-top:6px}
#spotlight .sp-details{justify-self:center}
#spotlight .sp-neighbor{padding:18px 8px;gap:18px}
#spotlight .sp-neighbor-brand{font-size:14px}
#spotlight .sp-neighbor-price{font-size:15px}
}
@media(max-width:760px){
#spotlight{margin-top:22px}
#spotlight .sp-head h2{font-size:23px;line-height:1.25}
#spotlight .sp-card.sp-active{min-height:0}
#spotlight .sp-card.sp-active .sp-copy{padding:20px}
#spotlight .sp-copy h3{font-size:23px;margin-bottom:12px}
#spotlight .sp-image{padding:36px 24px 20px}
#spotlight .sp-image img{height:180px}
#spotlight .sp-brand{top:18px;left:20px;font-size:17px}
#spotlight .sp-price{font-size:25px}
#spotlight .sp-bottom{gap:4px 8px}
#spotlight .sp-actions .buy{width:134px}
.showroom-brands{margin:28px 0 32px}
#hrows{gap:30px}
#hrows .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#hrows .sec-h h2{font-size:23px}
#hrows .pph{height:145px;margin:6px 6px 0}
#hrows .pb{padding:12px}
#hrows .pnm{font-size:13px;min-height:57px}
#hrows .ppr .val{font-size:20px}
#hrows .pst{font-size:11px}
.showroom-partner{padding:22px 20px}
}
@media(max-width:360px){#spotlight .sp-bottom{grid-template-columns:1fr;grid-template-areas:'retail' 'price' 'tax' 'buy' 'more'}#spotlight .sp-actions .buy{width:100%;margin-top:8px}#spotlight .sp-details{justify-self:center}#hrows .pb{padding:9px}#hrows .ppr .val{font-size:18px}}
/* One compact disclosure, with the same real links on every page. */
#a-partner{background:var(--brandButton);color:#FFF;border-color:var(--brandButton);font-weight:600;box-shadow:0 2px 8px #CE471F18;transition:background .18s ease,border-color .18s ease}
#a-partner:hover{background:var(--brandButtonHover);color:#FFF;border-color:var(--brandButtonHover)}
#a-partner:active{background:#A83716;border-color:#A83716}
#a-partner.is-company{background:#FFF;color:var(--text);border-color:var(--brandOrange);box-shadow:none}
#a-partner.is-company:hover{background:var(--promoBg);color:var(--text);border-color:var(--brandButton)}
#a-partner.is-company:active{background:#FBE7DC}
.pbadge.akcia,#hrows .pbadge.akcia{color:var(--promoInk);background:var(--promoBg);border:0;padding:3px 9px}
:is(.bar-r,.header-links) #pop-info{width:min(720px,calc(100vw - 32px));max-width:none;padding:18px;grid-template-columns:.85fr 1fr 1.3fr;gap:16px;box-shadow:0 16px 40px -18px #24384730}
:is(.bar-r,.header-links) #pop-info:not([hidden]){display:grid}
#pop-info .info-group{min-width:0}
#pop-info .info-group+.info-group{border-left:1px solid #E6EBEF;padding-left:16px}
#pop-info .pi-h{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:#63717D;padding:4px 10px 10px;margin:0}
#pop-info a{font-size:13px;font-weight:500;line-height:1.4;min-height:44px;padding:11px 10px;display:flex;align-items:center;border-radius:8px;overflow-wrap:anywhere}
#pop-info a:hover,#pop-info a.on{background:#F5F7F9;color:var(--accentSolid)}
#pop-info a:focus-visible,#a-info:focus-visible{outline:2px solid #667F91;outline-offset:2px}
@media(max-width:760px){
.bar-r{position:relative}
.bar-r .info{position:static}
:is(.bar-r,.header-links) #pop-info{grid-template-columns:1fr;width:100%;max-width:100%;left:0;right:auto;gap:14px;padding:14px;max-height:calc(100dvh - 180px)}
#pop-info .info-group+.info-group{border-left:0;border-top:1px solid #E6EBEF;padding:14px 0 0}
#pop-info .pi-h{padding-bottom:6px}
}
@media(max-width:360px){:is(.bar-r,.header-links) #pop-info{max-height:calc(100dvh - 240px)}}
/* Purchase controls stay mounted: quantity/focus never wait for an animation. */
.buy{position:relative;min-height:44px}
.buy-stepper{display:flex;align-items:center;gap:4px;width:100%;min-width:0;height:44px;border:1px solid #C9D6D0;border-radius:10px;background:#F5F9F7;padding:2px}
.buy-stepper[hidden]{display:none}
.buy .buy-q{width:38px;height:38px;border:0;border-radius:7px;background:transparent;color:#304B40}
.buy .buy-q:hover{background:#E5EEE9;color:#263D33}
.buy .buy-in{height:38px;font-size:14px;font-weight:600;color:#304B40}
.buy .buy-add{height:44px;min-height:44px;transition:background .18s ease,border-color .18s ease,transform .12s ease}
.buy .buy-add[hidden]{display:none}
.buy .buy-add:active,.buy .buy-q:active{transform:scale(.97)}
.buy :is(button,input):focus-visible{outline:2px solid #667F91;outline-offset:2px}
@media(pointer:coarse){.buy-stepper{height:48px;padding:1px}.buy .buy-q{width:44px;height:44px}.buy .buy-in{height:44px}.buy .buy-add{min-height:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.buy .buy-add,.buy .buy-q{transition:none}.buy .buy-add:active,.buy .buy-q:active{transform:none}}
/* Video surveillance pilot: preserve the catalogue controls and data contracts. */
.catalogue-refined .res{padding-top:24px}
.catalogue-refined .res-h{padding:0;margin-bottom:20px;gap:10px 16px}
.catalogue-refined .res-h h1{font-size:30px;letter-spacing:-.7px}
.catalogue-refined #res-n{font-size:13px;color:#596875}
.catalogue-refined .subrow{margin-bottom:20px;gap:8px}
.catalogue-refined .subrow a{min-height:40px;height:auto;padding:9px 13px;border-radius:9px;background:#fff}
.catalogue-refined .showroom-brands{margin:0 0 20px;padding:16px 0;border-top:1px solid #DDE4E9;border-bottom:1px solid #DDE4E9}
.catalogue-refined .showroom-brands .sec-h{margin:0 0 10px;gap:12px}
.catalogue-refined .showroom-brands .sec-h h2{font-size:14px;letter-spacing:0}
.catalogue-refined .showroom-brands .bcard{min-height:44px;height:44px;padding:6px 12px;flex-direction:row;gap:10px;border:1px solid #DDE4E9;background:#fff;border-radius:8px}
.catalogue-refined .showroom-brands .bcard.on{border-color:var(--accent);background:var(--accentDim)}
.catalogue-refined .showroom-brands .blogo{height:25px;width:84px}
.catalogue-refined .showroom-brands .blogo img{max-height:25px}
.catalogue-refined .showroom-brands .bcnt{margin:0;font-size:11px}
.catalogue-refined .showroom-brands .bmore{min-height:44px;height:44px}
.catalogue-refined #res-terms{display:block;margin:0 0 14px;padding:0;overflow:visible;mask-image:none;-webkit-mask-image:none;white-space:normal}
.catalogue-refined .catalogue-filters{width:100%;border:1px solid #D6E2EA;border-radius:14px;background:#F7FAFC;overflow:hidden}
.catalogue-refined .catalogue-filters summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;cursor:pointer;color:#202B36;font-size:14px;font-weight:600;list-style:none}
.catalogue-refined .catalogue-filters summary::-webkit-details-marker{display:none}
.catalogue-refined .catalogue-filters summary::after{content:'+';margin-left:auto;flex-shrink:0;font-size:22px;font-weight:400}
.catalogue-refined .catalogue-filters[open] summary::after{content:'−'}
.catalogue-refined .filter-count{flex:1;min-width:0;white-space:normal;line-height:1.4;font-size:12px;font-weight:400;color:#596875}
.catalogue-refined .filter-groups{display:flex;flex-wrap:wrap;gap:16px 32px;padding:0 16px 16px}
.catalogue-refined .filter-group{border:0;padding:0;margin:0;min-width:0}
.catalogue-refined .filter-group legend{padding:0 0 8px;font-size:12px;color:#596875}
.catalogue-refined .filter-options{display:flex;flex-wrap:wrap;gap:8px}
.catalogue-refined .res-terms .fch{min-height:44px;height:auto;padding:10px 14px;border-radius:8px;font-size:13px;background:#fff;color:#202B36;border-color:#DDE4E9}
.catalogue-refined .res-terms .fch span{color:inherit;font-weight:500}
.catalogue-refined .res-terms .fch.on{color:#285873;background:#EAF1F5;border-color:#8EAFBF}
.catalogue-refined #chips{margin:0 0 16px;align-items:center;gap:8px}
.catalogue-refined #chips:empty{display:none}
.catalogue-refined .chip{height:auto;min-height:40px;padding:9px 12px;border:1px solid #BED1DC;border-radius:8px;background:#EAF1F5;color:#285873}
.catalogue-refined .catalogue-filters :is(button,select,summary):focus-visible,.catalogue-refined #chips button:focus-visible{outline:3px solid #285873;outline-offset:2px}
.catalogue-refined .catalogue-filters summary::after{color:#285873}
.catalogue-refined .catalogue-filters>summary{color:#285873}
.catalogue-refined .filter-reset:hover{color:#285873}
.catalogue-refined .filter-reset{min-height:44px;background:none;border:0;font:inherit;font-size:13px;color:#596875;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
@media(min-width:761px){
.catalogue-refined .catalogue-filters[open] summary{float:left;width:150px;min-height:94px}
.catalogue-refined .catalogue-filters[open] summary .filter-count{display:none}
.catalogue-refined .filter-groups{padding:12px 16px}
}
.catalogue-refined #grid.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.catalogue-refined #grid .pst{line-height:1.6;min-height:36px;font-size:12px}
.catalogue-refined #grid .pb{padding:16px}
@media(max-width:1000px) and (min-width:761px){.catalogue-refined #grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
.catalogue-refined .res{padding-top:16px}
.catalogue-refined .res-h{gap:10px;margin-bottom:16px}
.catalogue-refined .res-h h1{font-size:25px;width:100%;overflow-wrap:anywhere}
.catalogue-refined #res-n{width:100%;font-size:12px}
.catalogue-refined .sortsel{margin-left:0;flex:1;min-height:44px}
.catalogue-refined .subrow{margin-bottom:14px}
.catalogue-refined .subrow a{min-height:44px}
.catalogue-refined .showroom-brands{padding:12px 0;margin-bottom:14px}
body.catalogue-refined.searching .showroom-brands .brandrow{display:flex}
.catalogue-refined .showroom-brands .sec-h{display:none}
.catalogue-refined .showroom-brands .brandrow{gap:8px}
.catalogue-refined .filter-groups{display:block}
.catalogue-refined .filter-group+.filter-group{margin-top:16px}
.catalogue-refined #grid.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.catalogue-refined #grid .pb{padding:10px}
.catalogue-refined #grid .pst{font-size:11px;min-height:36px}
}
.catalogue-refined .camera-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.catalogue-refined .camera-filter-field{display:flex;flex-direction:column;gap:8px;color:#596875;font-size:12px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.catalogue-refined .camera-filter-field select{font:inherit;font-size:14px;width:100%;min-height:44px;border:1px solid #DDE4E9;border-radius:8px;padding:10px 28px 10px 12px;color:#202B36;background:#fff}
.catalogue-refined .camera-filter-field select[data-active=true]{background:#EAF1F5;border-color:#8EAFBF;color:#285873;font-weight:600}
.catalogue-refined .camera-filter-field select:hover{border-color:#8EAFBF}
.catalogue-refined .camera-filter-note{width:100%;margin:0;font-size:12px;line-height:1.5;color:#596875;white-space:normal}
.catalogue-refined .catalogue-filters:has(.camera-filter-grid)[open] summary{float:none;width:auto;min-height:48px}
@media(min-width:1000px){.catalogue-refined .recorder-filter-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){.catalogue-refined .camera-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalogue-refined .camera-filter-note{margin:12px 0 16px}}
/* Общий вход в подбор оборудования. Контурные иконки — в цвете витрины. */
.cabinet-extra{width:100%;margin-top:12px;border-top:1px solid var(--border)}
.catalogue-refined .catalogue-filters .cabinet-extra summary{float:none;width:100%;padding:10px 0;min-height:44px;font-size:13px;font-weight:500}
.cabinet-extra[open]{padding-bottom:4px}
.catalogue-refined .cabinet-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.catalogue-refined .cabinet-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.equipment-picker{position:fixed;right:24px;bottom:calc(20px + var(--chat-space,0px) + var(--cookie-space,0px) + env(safe-area-inset-bottom,0px));z-index:160;display:flex;flex-direction:column;align-items:flex-end;gap:16px;max-width:calc(100vw - 32px)}
#company-chat-notice{position:fixed;right:22px;bottom:130px;z-index:100001;max-width:min(330px,calc(100vw - 32px));padding:14px 18px;border:1px solid #dce4e9;border-radius:12px;background:#fff;color:#263744;box-shadow:0 4px 22px #17344920;font-size:14px;line-height:1.45}
#company-chat-notice[hidden]{display:none}
body.chat-enabled{--chat-space:120px}
.equipment-picker-panel{position:relative;width:326px;max-width:calc(100vw - 32px);padding:24px 18px 16px;border:1px solid var(--border);border-radius:26px 26px 7px 26px;background:var(--bgCard);box-shadow:0 20px 60px rgba(26,34,49,.14),0 4px 14px rgba(26,34,49,.06)}
.equipment-picker-panel:after{content:"";position:absolute;bottom:-9px;right:23px;width:16px;height:16px;background:var(--bgCard);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg)}
.equipment-picker-title{font-size:23px;line-height:1.16;font-weight:600;letter-spacing:-.6px;margin:0 44px 20px 6px;color:var(--text)}
.equipment-picker-close{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;color:var(--textDim);border-radius:50%}
.equipment-picker-close:hover{background:var(--bgHover);color:var(--text)}
.equipment-picker-options{display:grid;gap:4px;max-height:calc(100dvh - 260px - var(--chat-space,0px) - var(--cookie-space,0px));overflow:auto}
.equipment-picker-option{display:flex;align-items:center;gap:12px;min-height:78px;padding:10px 6px;text-decoration:none;color:var(--text);border-radius:14px;transition:background .18s ease}
.equipment-picker-option:hover{background:#F1F6F9}
.equipment-picker-icon{width:54px;height:54px;flex-shrink:0}
.equipment-picker-label{flex:1;min-width:0}
.equipment-picker-label strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
.equipment-picker-label small{display:block;margin-top:4px;color:var(--textMuted);font-size:11px;line-height:1.4}
.equipment-picker-arrow{width:16px;height:16px;color:var(--textDim);flex-shrink:0}
.equipment-picker-trigger{position:relative;isolation:isolate;width:var(--picker-size,66px);height:var(--picker-size,66px);display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:#285873;color:#fff;box-shadow:0 8px 25px rgba(35,55,74,.1);transition:box-shadow .18s ease}
.equipment-picker-trigger:hover{box-shadow:0 10px 27px rgba(35,55,74,.15)}
.equipment-picker-trigger::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none}
.equipment-picker.has-halo .equipment-picker-trigger::before{animation:equipment-picker-halo 8s ease-out 3}
.equipment-picker:hover .equipment-picker-trigger::before,.equipment-picker:focus-within .equipment-picker-trigger::before{animation-play-state:paused;opacity:0!important}
@keyframes equipment-picker-halo{0%,28%,100%{box-shadow:0 0 0 0 #28587300;opacity:0}5%{opacity:1;box-shadow:0 0 0 4px #28587322}17%{opacity:1;box-shadow:0 0 0 11px #2858730b}26%{opacity:0;box-shadow:0 0 0 14px #28587300}}
.equipment-picker-tooltip{position:absolute;right:calc(var(--picker-size,66px) + 12px);width:max-content;max-width:calc(100vw - var(--picker-size,66px) - 48px);padding:11px 14px;border:1px solid var(--border);border-radius:9px;background:var(--bgCard);color:var(--text);box-shadow:0 3px 10px rgba(34,59,77,.07);font-size:13px;font-weight:600;line-height:1.3;text-align:left;opacity:0;pointer-events:none;transition:opacity .15s}
.equipment-picker-tooltip small{display:block;margin-top:4px;font-size:10px;font-weight:400;color:var(--textMuted)}
.equipment-picker-trigger[aria-expanded=false]:hover .equipment-picker-tooltip,.equipment-picker-trigger[aria-expanded=false]:focus-visible .equipment-picker-tooltip{opacity:1}
.equipment-picker :is(button,a):focus-visible{outline:3px solid #285873;outline-offset:4px}
.catalogue-refined #res-terms{scroll-margin-top:150px}
@media(max-width:760px){.equipment-picker{right:16px;bottom:calc(16px + var(--chat-space,0px) + var(--cookie-space,0px) + env(safe-area-inset-bottom,0px));gap:14px}.equipment-picker-panel{width:310px;padding-top:22px}.catalogue-refined #res-terms{scroll-margin-top:130px}}
@media(prefers-reduced-motion:reduce){.equipment-picker-option,.equipment-picker-trigger,.equipment-picker-tooltip{transition:none}.equipment-picker.has-halo .equipment-picker-trigger::before{animation:none}}
/* Account price comparison: shared grid aligns the two amounts on one baseline. */
#hrows .ppr.ppr-personal .lbl{font-size:12px;margin:0}
#hrows .ppr.ppr-personal .val{font-size:clamp(16px,8cqi,23px)}
#hrows .ppr.ppr-personal .was{font-size:clamp(14px,5.5cqi,16px)}
@media(max-width:600px){.grid:has(.ppr-personal),#hrows .grid:has(.ppr-personal){grid-template-columns:minmax(0,1fr)}}
/* Equal launcher diameters share the same right edge. */
body.chat-enabled .equipment-picker{right:21px}
body.chat-enabled .b24-widget-button-wrapper.b24-widget-button-position-bottom-right{right:21px!important;bottom:calc(20px + var(--cookie-space,0px) + env(safe-area-inset-bottom,0px))!important}
@media(max-width:760px){
body.chat-enabled .equipment-picker{right:14px}
body.chat-enabled .b24-widget-button-wrapper.b24-widget-button-position-bottom-right{right:14px!important;bottom:calc(16px + var(--cookie-space,0px) + env(safe-area-inset-bottom,0px))!important}
}
/* One approved homepage video: contain it in the original photo box without resizing cards. */
:is(#spotlight,.product-video) .sp-video-image>.sp-brand{display:none}
:is(#spotlight,.product-video) .sp-video-image video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#F4F6F8}
:is(#spotlight,.product-video) .sp-video-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;padding:0;margin:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.82);border-radius:50%;background:rgba(219,226,231,.76);color:#3D4851;box-shadow:0 2px 9px #34445118;z-index:4;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:is(#spotlight,.product-video) .sp-video-toggle svg{width:28px;height:28px;fill:currentColor;margin-left:3px}
:is(#spotlight,.product-video) .sp-video-toggle[hidden]{display:none}
:is(#spotlight,.product-video) .sp-video-toggle:hover{background:rgba(225,231,236,.78)}
@supports ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){:is(#spotlight,.product-video) .sp-video-toggle{background:rgba(210,219,226,.44)}:is(#spotlight,.product-video) .sp-video-toggle:hover{background:rgba(219,226,232,.58)}}
:is(#spotlight,.product-video) .sp-video-toggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
#spotlight .sp-price{transform-origin:left center}
/* Restore the compact pre-02.10 card proportions in the two requested rows. */
#hrows .hrow-compact .grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
#hrows .hrow-compact .pcard{border-radius:14px}
#hrows .hrow-compact .pph{height:auto;aspect-ratio:1.4;margin:0;border-radius:0;border-bottom:1px solid #EDF0F2}
#hrows .hrow-compact .pb{padding:14px;gap:5px}
#hrows .hrow-compact .pb-top{margin-bottom:8px}
#hrows .hrow-compact .pnm{font-size:14px;line-height:1.4;font-weight:600;min-height:0}
#hrows .hrow-compact .psku{margin-top:5px}
#hrows .hrow-compact .pst{font-size:11px;min-height:18px;margin-top:9px}
#hrows .hrow-compact .ppr{padding-top:12px}
#hrows .hrow-compact .ppr .val{font-size:23px}
@media(max-width:760px){#hrows .hrow-compact .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media(max-width:600px){#hrows .hrow-compact .grid{gap:12px}#hrows .hrow-compact .pb{padding:11px}#hrows .hrow-compact .pnm{font-size:13px}#hrows .hrow-compact .ppr .val{font-size:20px}}
/* A single soft highlight; never change the shared partner action or button dimensions. */
#a-partner{position:relative;overflow:hidden}
#a-partner.partner-motion{transition:background .18s ease,border-color .18s ease,transform .18s ease}
#a-partner.partner-motion::after{content:'';position:absolute;pointer-events:none;inset:-30% auto -30% 0;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-160%) skewX(-15deg)}
#a-partner.partner-sheen::after{animation:partner-sheen 900ms ease-out 350ms 1}
@keyframes partner-sheen{from{transform:translateX(-160%) skewX(-15deg)}to{transform:translateX(370%) skewX(-15deg)}}
@media(hover:hover){#a-partner.partner-motion:hover{transform:translateY(-1px)}}
#a-partner.partner-motion:focus-visible{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){#a-partner.partner-motion{transition:none;transform:none}#a-partner.partner-motion::after{animation:none;display:none}}
/* Warm pointer/keyboard feedback only for the active homepage showcase purchase control. */
@media(hover:hover){html.shop-motion-ok #spotlight .sp-active .buy-add:hover{background:#FFF9F4;border-color:#C78964;box-shadow:0 3px 10px #A9692920}}
html.shop-motion-ok #spotlight .sp-active .buy-add:focus-visible{background:#FFF9F4;border-color:#C78964;box-shadow:0 3px 10px #A9692920}
:is(#spotlight,.product-video) .sp-video-image .sp-video-poster{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:none;object-fit:contain;mix-blend-mode:normal;background:#F4F6F8;pointer-events:none;z-index:1}
:is(#spotlight,.product-video) .sp-video-image .sp-video-poster[hidden]{display:none}
:is(#spotlight,.product-video) .sp-video-image video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* Explicit mobile choice: full-width 10:11 video, with product information below. */
@media(max-width:760px){
:is(#spotlight,.product-video) .sp-has-video .sp-video-image{padding:0;aspect-ratio:10/11}
#spotlight .sp-has-video .sp-photo-open{width:100%;height:100%}
:is(#spotlight,.product-video) .sp-has-video .sp-video-image img{display:block;width:100%;height:100%;object-fit:contain}
:is(#spotlight,.product-video) .sp-has-video .sp-video-poster[hidden]{display:none}
}
.product-video-section{margin:24px 0;padding:16px 20px;border:1px solid #DFE5E9;border-radius:14px;background:#FFF}
.product-video-section>summary{cursor:pointer;font-size:16px;font-weight:600;color:#263342}
.product-video{max-width:360px;margin:18px auto 0}
.product-video .sp-video-image{position:relative;aspect-ratio:10/11;overflow:hidden;border-radius:12px;background:#F4F6F8}
.product-video .sp-photo-open{display:block;width:100%;height:100%;cursor:pointer}
.product-video .sp-photo-open>img{display:block;width:100%;height:100%;object-fit:contain}
/* Approved product volume flow, 06.10.2026. Scoped to the new layout. */
#spotlight.sp-volume{--sv-width:520px;--sv-height:558px;--sv-photo:270px;max-width:none!important;width:100%;padding:0!important;overflow:hidden}
#spotlight.sp-volume .sp-head{max-width:1320px;margin-left:auto;margin-right:auto;padding:0 28px}
#spotlight.sp-volume .sv-stage{margin-left:0;margin-right:0}
#spotlight.sp-volume .sp-head h2{font-size:36px;line-height:1.15}
#spotlight.sp-volume .sp-kicker{font-size:12px;text-transform:none;letter-spacing:0;margin-bottom:8px}
#spotlight .sv-stage{position:relative;perspective:1600px;height:calc(var(--sv-height) + 86px);overflow:hidden;touch-action:pan-y;cursor:grab;outline-offset:-3px;margin:0 -20px}
#spotlight .sv-stage:active{cursor:grabbing}
#spotlight .sv-card{position:absolute;top:30px;left:50%;margin-left:calc(var(--sv-width) / -2);width:var(--sv-width);height:var(--sv-height);border:1px solid var(--border);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 20px 55px -30px #1a223165;backface-visibility:hidden;transition:transform .65s cubic-bezier(.22,.68,.18,1)}
#spotlight .sv-card.sp-active{border-color:#c8cdd4;box-shadow:0 24px 60px -28px #1a223170}
#spotlight .sv-card:after{content:'';position:absolute;inset:0;background:rgba(255,255,255,var(--sv-veil,0));pointer-events:none;z-index:1}
#spotlight .sv-content{height:100%;display:flex;flex-direction:column}
#spotlight .sv-top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:24px 30px 0}
#spotlight .sv-brand{font-size:24px;font-weight:600;letter-spacing:-.5px}
#spotlight .sv-stock{color:#146338;background:#edf7f0;border-radius:6px;padding:7px 10px;font-size:11px;white-space:nowrap}
#spotlight .sv-stock.sv-supplier{background:#eef2f7;color:#465c76}
#spotlight .sv-photo{height:var(--sv-photo);flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:20px 56px 12px;overflow:hidden;background:white;text-decoration:none}
#spotlight .sv-photo img{width:100%;height:100%;max-width:100%;object-fit:contain;transform:scale(var(--sv-photo-scale,1));user-select:none;-webkit-user-drag:none}
#spotlight .sv-photo-error{font-size:13px;color:var(--textMuted)}
#spotlight .sv-body{padding:0 30px 26px;display:flex;flex-direction:column;flex:1;min-height:0}
#spotlight .sv-kind{font-size:12px;color:var(--textMuted);margin:0 0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#spotlight .sv-title{font-size:25px;line-height:1.18;letter-spacing:-.7px;min-height:60px;font-weight:600;margin:0;overflow-wrap:anywhere}
#spotlight .sv-title a{color:var(--text);text-decoration:none}
#spotlight .sv-title a:hover{text-decoration:underline;text-underline-offset:4px}
#spotlight .sv-facts{display:flex;gap:0;font-size:12px;color:var(--textMuted);margin:10px 0 18px}
#spotlight .sv-facts span+span{border-left:1px solid var(--border);padding-left:14px;margin-left:14px}
#spotlight .sv-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--border);padding-top:17px;margin-top:auto}
#spotlight .sv-price{font-size:29px;line-height:1.15;letter-spacing:-.8px;font-weight:600;white-space:nowrap}
#spotlight .sv-retail{font-size:11px;color:var(--textMuted)}
#spotlight .sv-tax{font-size:10px;line-height:1.4;color:var(--textMuted);margin-top:4px}
#spotlight .sv-actions{display:flex;align-items:center;gap:10px}
#spotlight .sv-actions .buy{width:140px;min-height:46px;margin:0}
#spotlight .sv-actions .buy-add{background:var(--accentSolid);color:white;border:1px solid var(--accentSolid);border-radius:8px;height:46px;min-height:46px;font-size:13px;box-shadow:none}
#spotlight .sv-actions .buy-add:hover{background:var(--accentHover);border-color:var(--accentHover)}
#spotlight .sv-details{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;color:var(--text);flex-shrink:0}
#spotlight .sv-details svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
#spotlight .sv-select{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;z-index:2;width:100%}
#spotlight .sv-select[hidden]{display:none}
#spotlight.sp-volume .sp-controls{justify-content:center;margin:0 0 12px;gap:22px}
#spotlight.sp-volume .sp-arrows{gap:18px}
#spotlight.sp-volume .sp-arrow{width:48px;height:48px}
#spotlight.sp-volume .sp-count{font-size:13px;min-width:58px;margin:0;text-align:center}
#spotlight.sp-volume .sp-dots{gap:0}
#spotlight.sp-volume .sp-dot{width:44px;height:44px;padding:20px 8px}
#spotlight.sp-volume .sp-dot:after{height:4px}
@media(prefers-reduced-motion:reduce){#spotlight .sv-card{transition:none}}
@media(max-width:1000px) and (min-width:761px){#spotlight.sp-volume{--sv-width:460px}#spotlight .sv-body{padding:0 24px 24px}#spotlight .sv-title{font-size:23px}#spotlight .sv-actions .buy{width:125px}}
@media(max-width:760px){
#spotlight.sp-volume{--sv-width:min(342px,calc(100vw - 48px));--sv-height:486px;--sv-photo:182px;margin-top:20px}
#spotlight.sp-volume .sp-head{padding:0 16px}
#spotlight.sp-volume .sp-head h2{font-size:27px;max-width:100%;letter-spacing:-.8px}#spotlight.sp-volume .sp-head{align-items:start;gap:10px}#spotlight.sp-volume .sp-news{font-size:11px;max-width:70px;text-align:right}#spotlight.sp-volume .sp-kicker{font-size:11px}
#spotlight .sv-stage{height:536px;perspective:1000px;margin:0 -16px}
#spotlight .sv-card{top:22px;border-radius:17px}
#spotlight .sv-top{padding:18px 17px 0;gap:8px}#spotlight .sv-brand{font-size:20px}#spotlight .sv-stock{font-size:10px;padding:6px 8px}
#spotlight .sv-photo{padding:10px 24px 8px}#spotlight .sv-body{padding:0 18px 18px}#spotlight .sv-kind{font-size:11px;margin-bottom:6px}
#spotlight .sv-title{font-size:20px;min-height:48px;line-height:1.18}#spotlight .sv-facts{font-size:10px;margin:8px 0 14px}#spotlight .sv-facts span+span{margin-left:8px;padding-left:8px}
/* A full-width purchase row leaves room for the quantity between two 44px touch targets. */
#spotlight .sv-bottom{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:'price details' 'buy buy';gap:10px;padding-top:14px}#spotlight .sv-price-block{grid-area:price}#spotlight .sv-price{font-size:25px}#spotlight .sv-tax{font-size:9px}
#spotlight .sv-actions{display:contents}#spotlight .sv-actions .buy{grid-area:buy;width:100%;min-width:0}#spotlight .sv-actions .buy-add{font-size:13px;gap:6px;padding:0 12px;min-height:48px}#spotlight .sv-actions .buy-add svg{width:15px;height:15px}#spotlight .sv-details{grid-area:details;width:44px}
#spotlight .sv-actions .buy-stepper{height:48px}#spotlight .sv-actions .buy-q{width:44px;height:44px}#spotlight .sv-actions .buy-in{min-width:48px;height:44px;font-size:16px}
#spotlight.sp-volume .sp-dots{display:none}#spotlight.sp-volume .sp-arrow{width:44px;height:44px}
}
@media(max-width:350px){#spotlight.sp-volume{--sv-height:506px}#spotlight .sv-stage{height:556px}#spotlight .sv-body{padding-left:14px;padding-right:14px}#spotlight .sv-price{font-size:22px}#spotlight .sv-bottom{gap:6px}#spotlight .sv-facts span+span{padding-left:6px;margin-left:6px}}
#spotlight.sp-volume .sp-arrows{display:contents}
#spotlight.sp-volume #sp-prev{order:0}#spotlight.sp-volume #sp-count{order:1}#spotlight.sp-volume #sp-dots{order:2}#spotlight.sp-volume #sp-next{order:3}
#spotlight.sp-volume .sp-dot:after{width:100%;background:#d7d9de}
#spotlight.sp-volume .sp-dot[aria-current=true]:after{background:var(--accentSolid)}
@media(max-width:760px){#spotlight.sp-volume .sp-news{white-space:normal;min-width:0;line-height:1.5}}
/* Own-stock status: a clear, quiet accent, using the shared warehouse palette. */
#spotlight.sp-volume .sv-stock:not(.sv-supplier){display:inline-flex;align-items:center;gap:7px;padding:8px 11px;font-size:12px;font-weight:600;line-height:1.3;color:#146338;background:#edf7f0;border:1px solid transparent;border-radius:7px;box-shadow:0 2px 5px rgba(20,99,56,.06)}
#spotlight.sp-volume .sv-stock:not(.sv-supplier):before{content:'';width:6px;height:6px;border-radius:50%;background:#188348;flex-shrink:0}
@media(max-width:760px){#spotlight.sp-volume .sv-stock:not(.sv-supplier){padding:6px 8px;font-size:11px;gap:6px}}
/* Approved purchase color; product frames and pointer behavior stay unchanged. */
.buy-add,.wb-cta,.it-cart{--accent:var(--purchaseColor);--accentSolid:var(--purchaseColor);--accentHover:var(--purchaseHover);--accentDim:var(--purchaseTint)}
#spotlight.sp-volume .sv-card .sv-actions .buy-add{background:var(--purchaseColor);border-color:var(--purchaseColor);color:#FFF;box-shadow:none}
#spotlight.sp-volume .sv-card .sv-actions .buy-add:hover,#spotlight.sp-volume .sv-card .sv-actions .buy-add:focus-visible{background:var(--purchaseHover);border-color:var(--purchaseHover);color:#FFF;box-shadow:none}
/* Approved light only inside purchase buttons; card/photo surfaces are untouched. */
.purchase-light{--buy-light-x:50%;--buy-light-y:50%}
.purchase-light:not(:disabled):not([aria-disabled="true"]):not(.ok):not(.just):focus-visible{
background-color:var(--purchaseColor)!important;border-color:var(--purchaseColor)!important;color:#fff!important;
}
@media(hover:hover) and (pointer:fine){
.purchase-light:not(:disabled):not([aria-disabled="true"]):not(.ok):not(.just):hover{
background-color:var(--purchaseColor)!important;border-color:var(--purchaseColor)!important;color:#fff!important;
box-shadow:0 3px 12px rgba(40,88,115,.14)!important;
}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.purchase-light:not(:disabled):not([aria-disabled="true"]):not(.ok):not(.just):is(:hover,:focus-visible){
background-image:radial-gradient(circle 72px at var(--buy-light-x) var(--buy-light-y),rgba(255,255,255,.15),rgba(255,255,255,0) 90%)!important;
}
}
/* Approved product-detail idle state: outline until hover, focus or press. */
.it :is(.wb-cta,.it-cart).purchase-light:not(.ok):not(.just):not(.upd):not(:disabled):not([aria-disabled="true"]){
background:transparent;border-color:#B7C9D3;color:var(--purchaseColor);box-shadow:none;
}
.it :is(.wb-cta,.it-cart).purchase-light:not(.ok):not(.just):not(:disabled):not([aria-disabled="true"]):is(:active,.purchase-pressed){
background-color:var(--purchaseColor)!important;border-color:var(--purchaseColor)!important;color:#fff!important;
}
/* Direct useful navigation and a partner CTA matching the site's blue palette. */
#a-useful{min-height:44px;text-decoration:none;white-space:nowrap;color:var(--accentSolid);font-weight:600}
#a-useful:focus-visible{outline:2px solid var(--accentSolid);outline-offset:2px}
#a-partner,#a-partner.is-company{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:44px;margin:0;padding:10px 16px;background:#285873;color:#fff;border:1px solid #285873;border-radius:10px;box-shadow:inset 0 1px 0 #ffffff12;transform:none;font-weight:600;transition:background .18s ease,border-color .18s ease}
#a-partner::before{content:'';order:1;display:block;flex:none;width:28px;height:18px;border-left:1px solid #ffffff38;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4M4 4h8v8'/%3E%3C/svg%3E") right center/14px 14px no-repeat;transition:transform .18s ease}
@media(hover:hover){#a-partner:hover,#a-partner.is-company:hover{background:#214b63;color:#fff;border-color:#214b63;box-shadow:inset 0 1px 0 #ffffff12;transform:none}#a-partner:hover::before{transform:translate(2px,-1px)}}
#a-partner:active,#a-partner.is-company:active{background:#1d4055;color:#fff;border-color:#1d4055;box-shadow:none;transform:none}
#a-partner:focus-visible{outline:2px solid #285873;outline-offset:3px}
@media(min-width:761px){.qrow>#a-partner{margin-left:auto}}
@media(max-width:760px){
.bar-r{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%}
.bar-r #a-useful,.bar-r #a-info{justify-content:center;width:100%}
.bar-r #a-partner{grid-column:1/-1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){#a-partner,#a-partner::before{transition:none}#a-partner:hover::before{transform:none}}
/* Full-width header surfaces; align their contents with the active page. */
body{--shell-content:1400px;--shell-gutter:24px}
body.about-open,body.contacts-open:has(.rd-page),body.contacts-open:has(#eg-about){--shell-content:1360px;--shell-gutter:56px;--shell-surface:#f6f5f2}
@media(min-width:761px){
.header-service-inner,.bar,.qrow{max-width:none;width:100%;padding-left:max(var(--shell-gutter),calc((100% - var(--shell-content))/2));padding-right:max(var(--shell-gutter),calc((100% - var(--shell-content))/2))}
.qrow{background:var(--shell-surface,#FAFBFC)}
body.about-open .ftr>.wrap,body.contacts-open:has(.rd-page) .ftr>.wrap{width:calc(100% - 2 * var(--shell-gutter));max-width:var(--shell-content);padding-left:0;padding-right:0}
}
@media(min-width:761px) and (max-width:1100px){body.about-open,body.contacts-open:has(.rd-page),body.contacts-open:has(#eg-about){--shell-gutter:32px}}
/* Approved warm surfaces, sage availability and secondary partnership CTA (2026-10-06). */
:root{--page:#F6F5F2;--bgPage:#F6F5F2;--cardBorder:#E2E0DA;--border:#E2E0DA}
body{background:#F6F5F2;--shell-surface:#F6F5F2;--page:#F6F5F2;--bgPage:#F6F5F2}
.qrow{background:#F6F5F2}
.header-service{background:#EEEDE8;border-color:#E2E0DA}
.bar{background:#FFF;border-color:#E2E0DA}
.bar .sbox,#q{background:#FFF;border-color:#DEDDD7}
#hrows .pcard,.showroom-brands :is(.bcard,.bmore),.showroom-partner{background:#FFF;border-color:#E2E0DA}
#hrows .pph,#spotlight .sp-image{background:#FFF}
#spotlight .sp-card.sp-before,#spotlight .sp-card.sp-after{background:#EEEDE8}
.it,.it-top{background:#F6F5F2}
.it .wb-l,.it .wb-stage,.it .wb-plate{background:#FFF}
.it .wb-l,.it .wb-tabsec,.it-top,.pd-keyfacts,.pd-services{border-color:#E2E0DA}
.ftr{background:#202B36}
body{--ownStockBg:#E2EDDF;--ownStockBorder:#B7CCB3;--ownStockText:#315C3B}
.it .wb-tile.own h5{color:#31523A}
.it .wb-tile.own p,.it .wb-tile.own .pr{color:#4F6654}
.it .wb-tile.own .q b{color:#315C3B}
.it .wb-tile.own .q small{color:#4F6654}
.it .wb-buy .wb-cta.purchase-light{background:#285873!important;border-color:#285873!important;color:#fff!important;font-weight:600;justify-content:center;gap:10px;box-shadow:0 2px 5px #28587314;transition:background .18s,border-color .18s;min-height:48px}
.it .wb-buy .wb-cta.purchase-light svg{color:inherit}
@media(hover:hover){.it .wb-buy .wb-cta.purchase-light:hover{background:#214B63!important;border-color:#214B63!important;color:#fff!important;box-shadow:0 3px 8px #28587320}}
.it .wb-buy .wb-cta.purchase-light:active{background:#1D4055!important;border-color:#1D4055!important;box-shadow:none}
.it .wb-buy .wb-cta.purchase-light:focus-visible{outline:2px solid #285873;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.it .wb-buy .wb-cta.purchase-light{transition:none}}
:is(.bar-r,.header-links) #pop-info[hidden]{display:none!important}
:is(.bar-r,.header-links) #pop-info:not([hidden]){display:grid!important;grid-template-columns:1fr 1.08fr 1.45fr;gap:24px;position:fixed;top:var(--info-menu-top,110px);right:24px;left:auto;width:790px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--info-menu-top,110px) - 20px);overflow:auto;padding:26px;background:#FFF;border:1px solid #DDDFDB;border-radius:16px;box-shadow:0 18px 55px #1A283126;transform:none;z-index:2000;text-align:left}
:is(.bar-r,.header-links) #pop-info .info-group{padding:0;margin:0;border:0;min-width:0}
:is(.bar-r,.header-links) #pop-info .pi-h{padding:0 10px 16px;margin:0 0 8px;border-bottom:1px solid #E6E7E2;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:#68747B}
:is(.bar-r,.header-links) #pop-info a{display:flex;align-items:center;gap:11px;min-height:48px;margin:2px 0;padding:11px 10px;border:0;border-radius:9px;text-decoration:none;background:transparent;color:#26333D;white-space:normal}
:is(.bar-r,.header-links) #pop-info a .pi-icon{flex:none;width:23px;height:23px;color:#526F7B}
:is(.bar-r,.header-links) #pop-info a span{min-width:0}:is(.bar-r,.header-links) #pop-info a strong{font-size:13px;line-height:1.4;font-weight:500;display:block}:is(.bar-r,.header-links) #pop-info a small{display:block;font-size:11px;line-height:1.5;color:#798087;margin-top:3px}
:is(.bar-r,.header-links) #pop-info a:hover,:is(.bar-r,.header-links) #pop-info a:focus-visible{background:#F3F4EF;color:#285873}:is(.bar-r,.header-links) #pop-info a:focus-visible{outline:2px solid #285873;outline-offset:1px}
#a-info[aria-expanded=true]{color:#285873;background:#EDF1F2;border-radius:9px}
@media(max-width:700px){:is(.bar-r,.header-links) #pop-info:not([hidden]){grid-template-columns:1fr;gap:22px;right:16px;padding:20px}:is(.bar-r,.header-links) #pop-info a strong{font-size:14px}:is(.bar-r,.header-links) #pop-info a small{font-size:12px}:is(.bar-r,.header-links) #pop-info a{min-height:48px}:is(.bar-r,.header-links) #pop-info .pi-h{padding-bottom:12px}}
#a-partner,#a-partner.is-company{background:#FFF;color:#285873;border:1px solid #CBD3D5;box-shadow:none;font-weight:500}
#a-partner::before{border-left-color:#D8E0E1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23285873' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4M4 4h8v8'/%3E%3C/svg%3E")}
@media(hover:hover){#a-partner:hover,#a-partner.is-company:hover{background:#EAF0F2;color:#214B63;border-color:#AABFC9;box-shadow:none}}
#a-partner:active,#a-partner.is-company:active{background:#E1E9ED;color:#214B63;border-color:#AABFC9;box-shadow:none}
body.useful-open .wrap.home,body.useful-open #news{display:none}
body.useful-open:is(.cart-open,.checkout-open,.lk-open,.card-open,.about-open,.contacts-open) #page-useful{display:none}
/* ═══ ЗАКАЗ ПО СПИСКУ (07.10.2026, MVP за флагом config/list-search.json; макет утверждён владельцем) ═══
Страница #list — каркас корзины-страницы (.pgw/.pg-crumbs/.pg-h1), токены витрины. Таблица на ≤1000px — карточки. */
body.list-open #news,body.list-open .wrap.home,body.list-open .quick,body.list-open .fcat-h1{display:none}
body.news-section.list-open #news{display:none!important}
body.useful-open.list-open #page-useful{display:none}
.ls-sub{font-size:13px;color:var(--textMuted);margin:6px 0 0}.ls-sub b{color:var(--accent);font-weight:600}
.ls-card{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);box-shadow:var(--e1);padding:22px 22px 20px}
/* Сцена (08.10.2026): ввод, распознавание и отказы — по центру страницы, «героический» заголовок, фирменное свечение за карточкой.
Глубина карточки — несколько мягких слоёв тени + тонкая обводка; верхняя акцентная линия. Всё — на токенах витрины. */
.ls-stage{position:relative;isolation:isolate;padding:20px 0 8px}
.ls-stage::before{content:'';position:absolute;z-index:-1;left:50%;top:40px;width:min(1180px,100%);height:min(720px,100%);transform:translateX(-50%);pointer-events:none;
background:radial-gradient(ellipse closest-side at 50% 42%,rgba(40,88,115,.16),rgba(40,88,115,.06) 52%,rgba(40,88,115,0) 100%)}
.ls-hero{max-width:760px;margin:0 auto 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ls-eye{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 13px 0 11px;border:1px solid rgba(40,88,115,.16);border-radius:var(--rPill);background:rgba(255,255,255,.72);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.01em;box-shadow:0 1px 2px rgba(26,34,49,.04)}
.ls-eye::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}
.ls-hero .pg-h1{font-size:40px;letter-spacing:-1.1px;line-height:1.08;margin:18px 0 0}
.ls-lead{font-size:17px;line-height:1.5;color:var(--textMuted);margin:14px 0 0;max-width:560px;text-wrap:balance}
.ls-agr{display:inline-flex;align-items:center;gap:9px;min-height:34px;max-width:100%;padding:5px 15px 5px 6px;margin-top:22px;border-radius:var(--rPill);background:var(--bgCard);border:1px solid var(--cardBorder);box-shadow:var(--e1);font-size:13px;line-height:1.35;color:var(--textMuted)}
.ls-agr>i{width:24px;height:24px;border-radius:50%;background:var(--accentDim);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:none}.ls-agr>i svg{width:14px;height:14px}
.ls-agr>span{min-width:0;overflow-wrap:anywhere;text-align:left}.ls-agr b{color:var(--text);font-weight:600;white-space:nowrap}.ls-agr-d{white-space:nowrap}.ls-agr-s{white-space:pre}
.ls-in,.ls-deny,.ls-head{position:relative;border-color:rgba(26,34,49,.08);
box-shadow:0 1px 2px rgba(26,34,49,.04),0 4px 12px -4px rgba(26,34,49,.05),0 24px 48px -20px rgba(26,34,49,.14),0 40px 90px -48px rgba(40,88,115,.30)}
.ls-in::before,.ls-deny::before,.ls-head::before{content:'';position:absolute;left:40px;right:40px;top:-1px;height:2px;border-radius:0 0 2px 2px;pointer-events:none;
background:linear-gradient(90deg,rgba(40,88,115,0),var(--accentSolid) 28%,var(--accentSolid) 72%,rgba(40,88,115,0))}
.ls-in{max-width:880px;margin:0 auto;padding:32px 36px 28px}
.ls-in-h{display:flex;align-items:flex-start;gap:14px;margin:0 0 18px}
.ls-ic{width:40px;height:40px;border-radius:12px;background:var(--accentDim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}.ls-ic svg{width:20px;height:20px}
.ls-lbl{font-size:15px;font-weight:600;margin:1px 0 3px;letter-spacing:-.1px}.ls-hint{font-size:13px;color:var(--textMuted);margin:0;line-height:1.5}
.ls-ta{width:100%;min-height:150px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.5;background:var(--bgInput);color:var(--text);outline:none;resize:vertical}
.ls-ta:focus{border-color:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}
.ls-in .ls-ta{min-height:176px;border-radius:var(--r3);padding:16px 18px;font-size:15px;line-height:1.6;background:var(--surface3);transition:border-color .15s,box-shadow .15s,background .15s}
.ls-in .ls-ta:focus{background:var(--bgInput)}.ls-in .ls-ta::placeholder{color:var(--textDim)}
.ls-cnt{font-size:12px;color:var(--textDim);margin:6px 0 14px}.ls-cnt.bad{color:var(--red)}
.ls-tamt{display:flex;justify-content:space-between;align-items:center;gap:6px 16px;flex-wrap:wrap;margin:10px 2px 0}
.ls-tamt .ls-cnt{margin:0;font-variant-numeric:tabular-nums}.ls-tamt .ls-cnt.bad{font-weight:600}
.ls-lim{font-size:12px;color:var(--textDim);display:flex;align-items:center;gap:7px}.ls-lim svg{width:14px;height:14px;flex:none}
.ls-or{display:flex;align-items:center;gap:16px;margin:26px 0 16px;font-size:12px;color:var(--textDim);letter-spacing:.02em}.ls-or::before,.ls-or::after{content:'';flex:1;height:1px;background:var(--cardBorder)}
.ls-drop{position:relative;border-radius:var(--r3);transition:outline-color .15s}
.ls-drop.over{outline:2px dashed var(--accentSolid);outline-offset:8px}
.ls-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ls-fb{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:16px 18px 15px;border:1px solid var(--border);border-radius:var(--r3);background:var(--bgCard);text-align:left;color:var(--text);
box-shadow:0 1px 2px rgba(26,34,49,.03);transition:border-color .15s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.25,1),background .15s}
.ls-fb>i{width:42px;height:42px;border-radius:12px;background:var(--accentDim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s,color .15s}.ls-fb svg{width:20px;height:20px;flex:none}
.ls-fb>span{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start}.ls-fb b{display:block;font-size:14px;font-weight:600;line-height:1.3}.ls-fb small{display:block;font-size:12px;line-height:1.4;color:var(--textDim);margin:3px 0 9px}
.ls-fb em{display:inline-block;margin-top:auto;padding:2px 8px;border-radius:var(--rPill);background:var(--surface2);font-style:normal;font-size:11px;font-weight:600;line-height:1.5;color:var(--textMuted);font-variant-numeric:tabular-nums}
@media (hover:hover){.ls-fb:hover{border-color:rgba(40,88,115,.45);box-shadow:var(--e2);transform:translateY(-1px)}.ls-fb:hover>i{background:var(--accentSolid);color:#fff}}
.ls-fb:focus-visible{outline:2px solid var(--accentSolid);outline-offset:2px}
/* Общее кольцо фокуса (button:focus-visible) задаёт border-radius:var(--rIn) — у плиток, кнопки и чипов форма на фокусе не меняется. */
#page-list .ls-fb:focus-visible,#page-list .ls-cta:focus-visible,#page-list .ls-in .btn-fill:focus-visible{border-radius:var(--r3)}
#page-list .ls-chip:focus-visible{border-radius:var(--rPill)}
.cam-pop .b button:focus-visible{border-radius:var(--r2)}.cam-pop .x:focus-visible{border-radius:50%}
/* Липкая панель итога не должна закрывать элемент с фокусом клавиатуры (WCAG 2.4.11): браузер докручивает с этим запасом. */
#page-list .ls-tbl :is(button,input,a,select),#page-list .ls-head :is(button,a),#page-list .ls-chip{scroll-margin-bottom:140px}
.ls-drop.over .ls-fb{border-color:rgba(40,88,115,.45);background:var(--accentDim)}
.ls-kinds{display:flex;justify-content:center;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;color:var(--textDim);margin:14px 0 0;text-align:left}.ls-kinds svg{width:15px;height:15px;flex:none;margin-top:1px}
.ls-go{display:flex;align-items:center;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--cardBorder)}.ls-go .btn-fill{width:auto;min-width:200px;height:48px}
.ls-in .ls-go{justify-content:space-between;margin-top:26px;padding-top:24px}
.ls-go-n{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.45;color:var(--textMuted)}.ls-go-n>i{display:inline-flex;color:var(--accent)}.ls-go-n svg{width:16px;height:16px;flex:none}
.ls-cta,.ls-foot .ls-btns .btn-fill{background:linear-gradient(180deg,#2F6684 0%,var(--accentSolid) 100%);border-color:var(--accentSolid);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(26,34,49,.12),0 10px 22px -10px rgba(40,88,115,.65)}
.ls-in .ls-go .ls-cta{min-width:232px;height:54px;padding:0 26px;font-size:15px;letter-spacing:.01em;flex:none}
.ls-cta>i{display:inline-flex;transition:transform .2s cubic-bezier(.2,.8,.25,1)}.ls-cta svg{width:18px;height:18px}
@media (hover:hover){.ls-cta:hover,.ls-foot .ls-btns .btn-fill:hover:not(:disabled){background:var(--accentHover)}.ls-cta:hover>i{transform:translateX(3px)}}
.ls-err{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--redDim);color:#8F1D1D;font-size:13px;line-height:1.5}
.ls-in .ls-err{margin-top:18px}
/* Как это работает */
.ls-how{max-width:880px;margin:48px auto 0}
.ls-how-h{text-align:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--textDim);margin:0 0 20px}
.ls-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ls-steps li{position:relative;padding-top:18px;border-top:1px solid var(--border2)}
.ls-steps li::before{content:'';position:absolute;left:0;top:-1px;width:32px;height:2px;background:var(--accentSolid)}
.ls-step-n{display:block;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.ls-steps b{display:block;font-size:15px;font-weight:600;letter-spacing:-.1px}.ls-steps p{font-size:13px;line-height:1.55;color:var(--textMuted);margin:6px 0 0}
/* распознаём */
.ls-busy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:52px 36px 44px}
.ls-ring{position:relative;width:72px;height:72px;border-radius:50%;background:var(--accentDim);color:var(--accent);display:flex;align-items:center;justify-content:center}
.ls-ring::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,rgba(40,88,115,0) 0deg,rgba(40,88,115,0) 120deg,var(--accentSolid) 340deg,rgba(40,88,115,0) 360deg);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:lsSpin 1.1s linear infinite}
.ls-ring>i{display:inline-flex}.ls-ring svg{width:26px;height:26px}
.ls-busy-t{display:flex;flex-direction:column;align-items:center;margin-top:26px;max-width:520px}
.ls-busy-t b{font-size:20px;font-weight:600;letter-spacing:-.3px;line-height:1.3}
.ls-busy-t small{display:block;font-size:14px;line-height:1.5;color:var(--textMuted);margin-top:6px}
.ls-fchip{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-top:14px;padding:5px 12px 5px 9px;border:1px solid var(--cardBorder);border-radius:var(--rPill);background:var(--surface3);font-size:12px;color:var(--textMuted)}
.ls-fchip>i{display:inline-flex}.ls-fchip svg{width:14px;height:14px;flex:none}.ls-fchip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-bar{position:relative;width:min(300px,100%);height:3px;margin-top:28px;border-radius:var(--rPill);background:var(--accentDim);overflow:hidden}
.ls-bar>i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:inherit;background:var(--accentSolid);animation:lsSlide 1.5s cubic-bezier(.45,0,.25,1) infinite}
@keyframes lsSpin{to{transform:rotate(360deg)}}
@keyframes lsSlide{from{transform:translateX(-100%)}to{transform:translateX(265%)}}
@media (prefers-reduced-motion:reduce){.ls-ring::after,.ls-bar>i{animation:none}.ls-bar>i{width:100%;opacity:.35}.ls-fb,.ls-cta>i,.ls-chip{transition:none}.ls-fb:hover{transform:none}}
/* результат */
.ls-top{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 20px}.ls-top .ls-agr{margin:0}
.ls-head{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);padding:24px 26px 0;margin:0 0 16px;overflow:hidden}
.ls-rh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.ls-rh h2{font-size:25px;font-weight:600;letter-spacing:-.5px;margin:0;line-height:1.2}.ls-rh .ls-sub{margin-top:4px}.ls-rh .ls-n{color:var(--accent)}
.ls-head .ls-rh{margin:0}.ls-head .ls-rh .btn-ghost{height:40px;color:var(--text);background:var(--bgCard)}
.ls-prog{display:flex;gap:3px;height:8px;margin:18px 0 22px;border-radius:var(--rPill);overflow:hidden;background:var(--surface2)}
.ls-seg{flex:1 1 0;min-width:6px;background:var(--textDim)}
.ls-seg.exact{background:var(--green)}.ls-seg.check{background:var(--amber)}.ls-seg.short{background:repeating-linear-gradient(-45deg,var(--amber) 0 3px,rgba(180,83,9,.35) 3px 6px)}
.ls-seg.analog{background:var(--accentSolid)}.ls-seg.order{background:var(--textMuted)}.ls-seg.ask{background:repeating-linear-gradient(-45deg,var(--textMuted) 0 3px,rgba(91,100,114,.3) 3px 6px)}
.ls-seg.miss{background:var(--red)}.ls-seg.blocked{background:var(--red);opacity:.55}
.ls-src{display:flex;align-items:center;gap:12px;background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:14px;padding:12px 16px;margin:0 0 12px}
.ls-head .ls-src{margin:0 -26px;padding:14px 26px;border:0;border-top:1px solid var(--cardBorder);border-radius:0;background:var(--surface3)}
.ls-src>i{width:36px;height:36px;border-radius:10px;background:var(--accentDim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}.ls-src>i svg{width:18px;height:18px}
.ls-src>div{flex:1;min-width:0}.ls-src b{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}.ls-src small{font-size:12px;color:var(--textMuted)}
.ls-tog{font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
.ls-raw{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:14px;padding:14px 16px;margin:-4px 0 12px}
.ls-head .ls-raw{margin:0 -26px;padding:16px 26px 18px;border:0;border-top:1px solid var(--cardBorder);border-radius:0}
.ls-raw pre{margin:0 0 12px;font:inherit;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;color:var(--textMuted)}
.ls-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 14px}.ls-chips::-webkit-scrollbar{display:none}
.ls-chip{flex:none;height:34px;padding:0 13px;border:1px solid var(--border);border-radius:var(--rPill);background:var(--bgCard);font-size:13px;color:var(--text);display:inline-flex;align-items:center;gap:7px;box-shadow:0 1px 2px rgba(26,34,49,.04);transition:border-color .15s,background .15s,color .15s}
.ls-chip b{font-weight:600;color:var(--textMuted);font-variant-numeric:tabular-nums}
@media (hover:hover){.ls-chip:not(.on):hover{border-color:rgba(40,88,115,.45)}}
.ls-chip.on{background:var(--accentSolid);border-color:var(--accentSolid);color:#fff;box-shadow:0 6px 14px -8px rgba(40,88,115,.7)}.ls-chip.on b{color:rgba(255,255,255,.78)}.ls-chip.on .ls-dot{box-shadow:0 0 0 2px #fff}
.ls-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--textDim)}
.ls-dot.exact{background:var(--green)}.ls-dot.check,.ls-dot.short{background:var(--amber)}.ls-dot.short{background:transparent;border:2px solid var(--amber);width:8px;height:8px}
.ls-dot.analog{background:var(--accentSolid)}.ls-dot.order{background:var(--textMuted)}.ls-dot.ask{background:transparent;border:2px solid var(--textMuted);width:8px;height:8px}.ls-dot.miss,.ls-dot.blocked{background:var(--red)}
.ls-tbl{background:var(--bgCard);border:1px solid var(--cardBorder);border-radius:var(--r4);box-shadow:0 1px 2px rgba(26,34,49,.04),0 12px 32px -20px rgba(26,34,49,.16);overflow:hidden}
.ls-th,.ls-row{display:grid;grid-template-columns:24px 128px 160px minmax(0,1fr) 130px 138px 128px 104px;gap:14px;align-items:center;padding:14px 18px}
.ls-th{background:var(--page);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--textDim);font-weight:600;padding:11px 18px}.ls-th .r{text-align:right}
.ls-row{border-top:1px solid var(--cardBorder)}
.ls-row.off{background:#FCFCFB}
.ls-cb{width:18px;height:18px;accent-color:var(--accentSolid);margin:0}
.ls-st{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--border);border-radius:var(--rPill);font-size:12px;font-weight:600;white-space:nowrap;background:var(--bgCard)}
.ls-why{display:block;font-size:11px;color:var(--textDim);margin-top:5px;line-height:1.35}
.ls-q{font-size:13px;color:var(--textMuted);line-height:1.4;overflow-wrap:anywhere;display:flex;gap:8px}.ls-q em{font-style:normal;font-size:11px;color:var(--textMuted);background:var(--surface2);border-radius:5px;padding:1px 6px;height:18px;flex:none}
.ls-it{display:flex;gap:12px;min-width:0}
.ls-ph{width:52px;height:52px;border:1px solid var(--cardBorder);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;color:var(--textDim);font-size:18px}.ls-ph img{max-width:86%;max-height:86%;object-fit:contain}
.ls-nm{min-width:0;font-size:13px;line-height:1.35}.ls-nm b{display:block;font-weight:600;overflow-wrap:anywhere}
.ls-meta{font-size:11px;color:var(--textDim);margin-top:3px;overflow-wrap:anywhere}.ls-meta span{text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:var(--textMuted);margin-right:6px}
.ls-note{font-size:12px;color:var(--textMuted);margin-top:4px;line-height:1.4}.ls-note.warn{color:var(--amber)}
.ls-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px}
.ls-yes{height:28px;padding:0 10px;border:1px solid var(--accentSolid);border-radius:8px;color:var(--accent);font-size:12px;font-weight:600;background:var(--bgCard)}.ls-yes:hover{background:var(--accentDim)}
.ls-yes.on{background:var(--accentSolid);color:#fff}
.ls-link{font-size:12px;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ls-tag{display:inline-block;font-size:10px;font-weight:600;color:var(--green);background:var(--greenDim);border-radius:5px;padding:2px 6px;margin:4px 0}
.ls-av{font-size:12px;line-height:1.4;color:var(--textMuted)}.ls-av b{color:var(--green);font-weight:600}.ls-av.warn b{color:var(--amber)}
.ls-pr{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.ls-pr small{font-size:11px;font-weight:400;color:var(--textDim)}
.ls-pr s{display:block;font-size:11px;font-weight:400;color:var(--textDim)}.ls-pr .ask{font-size:12px;font-weight:600;color:var(--textMuted);white-space:normal}
.ls-qt{font-size:13px;color:var(--textMuted)}
.ls-sum{font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.ls-row.off .ls-sum{color:var(--textDim);font-weight:600}
.ls-pick{grid-column:1/-1;background:var(--surface3);border:1px solid var(--cardBorder);border-radius:12px;padding:12px;margin-top:2px}
.ls-pick .row{display:flex;gap:8px}.ls-pick input{flex:1;min-width:0;height:38px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font:inherit;font-size:13px;background:#fff;outline:none}
.ls-pick input:focus{border-color:var(--accentSolid)}
.ls-pr-l{margin-top:8px;display:grid;gap:6px}.ls-pr-l button{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:6px 8px;border:1px solid var(--cardBorder);border-radius:10px;background:#fff;font-size:12px}
.ls-pr-l button:hover{border-color:var(--accentSolid)}.ls-pr-l .ls-ph{width:40px;height:40px}.ls-pr-l b{font-weight:600;display:block}.ls-pr-l small{color:var(--textDim)}
.ls-empty{padding:28px 18px;text-align:center;font-size:13px;color:var(--textDim)}
/* итог — липкий низ */
/* Нижняя панель итога: «стекло» над таблицей. Кнопки — гибкий ряд: под будущую третью («Скачать КП») место есть, ряд перенесётся сам. */
.ls-foot{position:sticky;bottom:12px;z-index:20;margin-top:16px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
border:1px solid rgba(26,34,49,.09);border-radius:var(--r4);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(26,34,49,.05),0 22px 44px -18px rgba(26,34,49,.30);padding:16px 18px 16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ls-tot{flex:1;min-width:240px}.ls-tot .l1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--textMuted)}
.ls-tot .l1 b{font-size:25px;font-weight:700;color:var(--text);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ls-tot .l2{font-size:12px;color:var(--amber);font-weight:600;margin-top:3px}.ls-tot .l3{font-size:12px;color:var(--textMuted);margin-top:2px}
.ls-btns{display:flex;gap:10px;flex-wrap:wrap}.ls-btns .btn-ghost{height:48px;color:var(--text)}
.ls-btns .btn-fill{width:auto;min-width:170px;height:48px}
.ls-foot .ls-btns{flex:0 1 auto;justify-content:flex-end}.ls-foot .ls-btns .btn-ghost{background:var(--bgCard);padding:0 18px}.ls-foot .ls-btns .btn-fill{min-width:190px}
.ls-foot .ls-btns .btn-ghost{text-align:center;line-height:1.25}
.ls-foot .ls-btns .btn-fill:disabled{background:var(--accentSolid);box-shadow:none;opacity:.45}
/* 08.10 «Скачать КП» — третья кнопка панели (только при listSearch.kp): на компьютере — первой слева, на телефоне — во всю ширину под двумя */
.ls-foot .ls-btns .ls-kp{gap:8px;white-space:nowrap;flex-shrink:0;min-width:168px}.ls-kp>i{display:inline-flex}.ls-kp svg{width:18px;height:18px}.ls-foot .ls-btns .ls-kp[aria-busy="true"]:disabled{cursor:progress;opacity:.75}
@media (min-width:761px){.ls-foot .ls-btns .ls-kp{order:-1}}
.ls-msg{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--greenDim);color:#14532D;font-size:13px;line-height:1.5;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ls-msg.warn{background:var(--amberDim);color:#7C2D12}.ls-msg button{font-weight:600;text-decoration:underline;color:inherit}
/* окно «Отправить менеджеру» — каркас окна партнёрства (.pm-dim/.pm-mod) */
.ls-askm ul{margin:0 0 12px;padding:0;list-style:none;max-height:min(260px,40vh);overflow:auto;border:1px solid var(--cardBorder);border-radius:12px}
.ls-askm li{display:flex;gap:10px;justify-content:space-between;padding:8px 12px;font-size:13px;border-top:1px solid var(--cardBorder)}.ls-askm li:first-child{border-top:0}
.ls-askm li span{min-width:0;overflow-wrap:anywhere}.ls-askm li em{font-style:normal;color:var(--textMuted);white-space:nowrap}
.ls-askm textarea{width:100%;min-height:76px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font:inherit;font-size:13px;outline:none;resize:vertical;background:var(--bgInput);color:var(--text)}
.ls-askm textarea:focus{border-color:var(--accentSolid);box-shadow:0 0 0 3px var(--accentGlow)}
.ls-askm .btn-fill{margin-top:14px}.ls-askm .ls-err{margin-top:10px}
.ls-foot>.ls-msg{flex:1 1 100%;margin:0}
.ls-dot.remembered{background:var(--accentSolid)}
.ls-fb i,.ls-lim i,.cam-pop .t i{display:inline-flex}
.ls-btns .btn-ghost:disabled{opacity:.45;cursor:default}
.ls-raw .ls-ta{min-height:180px}.ls-raw .ls-go{margin-top:12px;padding-top:0;border-top:0}.ls-raw .ls-go .btn-ghost{height:48px}
/* нет доступа — по центру; строка ценности над отказом не показывается — карточка ближе к заголовку */
.ls-st-deny .ls-hero{margin-bottom:24px}
.ls-deny{max-width:600px;margin:0 auto;padding:44px 40px 40px;text-align:center}
.ls-deny>i{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;background:var(--accentDim);color:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(40,88,115,.05),inset 0 0 0 1px rgba(40,88,115,.12)}
.ls-deny>i svg{width:26px;height:26px}.ls-deny h2{font-size:25px;font-weight:600;letter-spacing:-.5px;margin:0 0 10px;line-height:1.25;text-wrap:balance}
.ls-deny p{font-size:15px;color:var(--textMuted);line-height:1.6;margin:0 auto 26px;max-width:470px}
.ls-deny .ls-btns{justify-content:center}.ls-deny .ls-btns .btn-fill{min-width:180px;background:linear-gradient(180deg,#2F6684 0%,var(--accentSolid) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 22px -10px rgba(40,88,115,.65)}
.ls-deny .ls-btns .btn-ghost{height:48px;padding:0 22px;color:var(--text);background:var(--bgCard)}
/* всплывашка гостю у камеры — в стиле сцены */
.cam-pop{position:absolute;right:0;top:calc(100% + 12px);z-index:120;width:min(360px,calc(100vw - 32px));background:var(--bgCard);border:1px solid rgba(26,34,49,.09);border-radius:var(--r3);
box-shadow:0 2px 6px rgba(26,34,49,.06),0 24px 48px -16px rgba(26,34,49,.24);padding:18px}
.cam-pop::before{content:'';position:absolute;right:20px;top:-7px;width:12px;height:12px;background:var(--bgCard);border-left:1px solid rgba(26,34,49,.09);border-top:1px solid rgba(26,34,49,.09);transform:rotate(45deg);border-radius:3px 0 0 0}
.cam-pop .t{display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600;line-height:1.4;padding-right:34px;letter-spacing:-.1px}
.cam-pop .t i{width:36px;height:36px;border-radius:50%;background:var(--accentDim);color:var(--accent);align-items:center;justify-content:center;flex:none}.cam-pop .t svg{width:17px;height:17px;flex:none}
.cam-pop .x{position:absolute;right:6px;top:6px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--textDim);transition:background .15s,color .15s}.cam-pop .x svg{width:14px;height:14px}.cam-pop .x::after{content:'';position:absolute;inset:-4px}
@media (hover:hover){.cam-pop .x:hover{background:var(--surface2);color:var(--text)}}
.cam-pop .b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.cam-pop .b button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 8px;border-radius:var(--r2);font-size:13px;font-weight:600;line-height:1.2;text-align:center;border:1px solid var(--border);color:var(--text);background:var(--bgCard)}
.cam-pop .b button.f{background:linear-gradient(180deg,#2F6684 0%,var(--accentSolid) 100%);border-color:var(--accentSolid);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px -10px rgba(40,88,115,.7)}
@media (max-width:1240px){ /* таблица в 8 колонок помещается от ~1250px; уже — строки-карточки (на 1024 колонка «Что нашли» схлопывалась) */
.ls-th{display:none}
.ls-row{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"cb st sum" "q q q" "it it it" "av av av" "pr pr qt";gap:8px 10px;padding:14px}
.ls-row>.c-cb{grid-area:cb}.ls-row>.c-st{grid-area:st}.ls-row>.c-q{grid-area:q}.ls-row>.c-it{grid-area:it}.ls-row>.c-av{grid-area:av}.ls-row>.c-pr{grid-area:pr}.ls-row>.c-qt{grid-area:qt;justify-self:end}.ls-row>.c-sum{grid-area:sum}
.ls-row>.c-st{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ls-why{display:inline;margin:0}
.ls-row>.c-av:empty{display:none}
.ls-q::before{content:'Прислали:';color:var(--textDim);flex:none}
.ls-pick{grid-column:1/-1}
.ls-row>.c-qt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.ls-row.nf>.c-av,.ls-row.nf>.c-pr{display:none}
}
@media (max-width:760px){
#page-list .pgw{padding-left:16px;padding-right:16px}
.ls-card{padding:16px}.ls-rh h2{font-size:20px}
.ls-stage{padding-top:8px}.ls-hero{margin-bottom:22px}.ls-hero .pg-h1{font-size:32px;letter-spacing:-.8px;margin-top:14px}.ls-lead{font-size:15px;margin-top:10px}
.ls-agr{margin-top:16px;font-size:12px;border-radius:var(--r3);padding:5px 12px 5px 6px}
.ls-head .ls-src .ls-tog{margin-left:0;font-size:12px}.ls-head .ls-src .ls-tog+.ls-tog{margin-left:0}
.ls-head .ls-src .ls-tog{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}.ls-head .ls-src .ls-tog+.ls-tog{margin-left:8px}
.ls-head .ls-rh .btn-ghost{height:44px}.ls-chip{height:44px;padding:0 15px}
#page-list .ls-tbl :is(button,input,a,select),#page-list .ls-head :is(button,a),#page-list .ls-chip{scroll-margin-bottom:200px}
.ls-in::before,.ls-deny::before,.ls-head::before{left:24px;right:24px}
.ls-in{padding:20px 16px 18px}.ls-in-h{gap:12px;margin-bottom:14px}.ls-ic{width:36px;height:36px;border-radius:10px}
.ls-in .ls-ta{min-height:150px;padding:14px;font-size:15px}
.ls-or{margin:20px 0 12px}
.ls-tiles{grid-template-columns:1fr;gap:8px}
.ls-fb{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}.ls-fb small{margin-bottom:6px}.ls-fb>i{width:38px;height:38px;border-radius:10px}.ls-fb svg{width:18px;height:18px}
.ls-kinds{justify-content:flex-start}
.ls-go{flex-direction:column;align-items:stretch}.ls-go .btn-fill{width:100%}
.ls-in .ls-go{flex-direction:column-reverse;gap:12px;margin-top:20px;padding-top:18px}.ls-in .ls-go .ls-cta{width:100%;min-width:0;height:52px}.ls-go-n{justify-content:center;text-align:center;font-size:12px;text-wrap:balance}.ls-go-n>i{display:none}
.ls-hero .ls-agr-s{display:none}.ls-hero .ls-agr-d{display:block}.ls-hero .ls-agr>span{text-align:center}.ls-hero .ls-agr{padding-right:16px}
.ls-lim{align-items:flex-start}.ls-lim svg{margin-top:2px}
.ls-how{margin-top:32px}.ls-how-h{margin-bottom:12px}.ls-steps{grid-template-columns:1fr;gap:14px}
.ls-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding-top:12px}.ls-step-n{grid-row:span 2;margin:2px 0 0}.ls-steps p{margin-top:2px}
.ls-busy{padding:36px 18px 32px}.ls-busy-t b{font-size:17px}
.ls-top{margin-bottom:16px}
.ls-head{padding:18px 16px 0}.ls-head .ls-src,.ls-head .ls-raw{margin:0 -16px;padding-left:16px;padding-right:16px}.ls-prog{margin:14px 0 16px}
/* панель итога и на телефоне «плавает», как на компьютере: скругление со всех сторон, чуть шире колонки ради кнопок */
.ls-foot{border-radius:18px;bottom:calc(8px + env(safe-area-inset-bottom));margin:16px -8px 0;padding:12px 14px;gap:10px}
.ls-tot .l3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-tot{min-width:0;flex:1 1 100%}.ls-tot .l1 b{font-size:21px}
.ls-foot .ls-btns{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.ls-foot .ls-btns>:nth-child(3){grid-column:1/-1}.ls-foot .ls-btns .btn-ghost,.ls-foot .ls-btns .btn-fill{min-width:0;width:100%;height:46px;padding:0 10px;font-size:13px}
.ls-rh{align-items:center}.ls-rh .btn-ghost{height:38px;padding:0 12px}
.ls-src{flex-wrap:wrap;align-items:flex-start;row-gap:6px}.ls-src>div{flex:1 1 calc(100% - 52px)}.ls-src .ls-tog{margin-left:48px}.ls-src .ls-tog+.ls-tog{margin-left:12px}
.ls-deny{padding:32px 18px 24px}.ls-deny>i{width:56px;height:56px;margin-bottom:18px}.ls-deny h2{font-size:20px}.ls-deny p{font-size:14px;margin-bottom:20px}
.ls-deny .ls-btns .btn-fill,.ls-deny .ls-btns .btn-ghost{flex:1 1 auto}
.ls-top .ls-agr-s{display:none}.ls-top .ls-agr-d{display:block}
}
@media (max-width:400px){.cam-pop .b button{font-size:12.5px;white-space:nowrap;padding:0 6px}}
.cart-price-notice{padding:12px 16px;margin:0 0 16px;border-left:3px solid var(--accent,#e85326);background:#fff5ef;color:#593925;font-size:13px;line-height:1.5;border-radius:8px}