/* ============ WayParts — лесная палитра, минимализм ============
   Шесть базовых тонов: #051F20 #0B2B26 #163832 #235347 #8EB69B #DAF1DE.
   Промежуточные оттенки выведены из них же (смешение с белым).

   ШКАЛА (единая для всех экранов — не заводить новых размеров):
   · текст: 15px основной, .small 14px, .tiny 13px (меньше 13px — нельзя), поля ввода 16px;
   · заголовки: .h1 30px (телефон 26), .h2 22px — заголовок экрана, .h3 18px — заголовок карточки, .h4 16px;
   · высоты: --h 44px (.btn, .input, .select), --h-sm 36px (.btn-sm), --h-lg 52px (.btn-lg);
   · скругления: --r 10px контролы, --r-lg 16px карточки, 99px чипы и бейджи;
   · тени: только --sh и --sh-lg.
   Контраст (WCAG): --ink3 #4A6B5B — 5.9:1 на белом, 5.5:1 на --mist; --amber 5.3:1 на --amber-bg;
   --danger 5.9:1 на белом, 4.9:1 на --danger-bg; --line 1.6:1 — только разделители и рамки карточек; граница нажимаемого — --line-strong 3,74:1. */
:root{
  --g100:#DAF1DE; --g200:#BFE0C7; --g300:#8EB69B; --g400:#6E9E7E;
  --g500:#2F6B58; --g600:#235347; --g700:#163832; --g800:#0B2B26;
  --ink:#051F20; --ink2:#235347; --ink3:#4A6B5B;
  --line:#B9D2C0; --line2:#DCEBE0; --mist:#F1F8F3; --bg:#FFFFFF;
  --g50:var(--mist); /* устаревший синоним --mist: в новом коде не использовать */
  --danger:#B23A34; --danger-bg:#F8E6E5; --danger-line:#EBC5C3;
  --line-strong:#5B8F73;   /* рамка всего нажимаемого: кнопки-рамки, поля, чипы, переключатели (70 % --g400 + 30 % --g500) */
  --danger-strong:#C56B67; /* рамка красной кнопки-рамки (75 % --danger + 25 % белого) */
  --danger-hover:#9A302B;  /* наведение на .btn-danger вместо filter:brightness */
  --amber:#8A5710; --amber-bg:#F7EFD6; --amber-line:#EAD9A6;
  --star:#E2A300; /* звёзды оценок (js/reviews.js) */
  --r:10px; --r-lg:16px;
  --h:44px; --h-sm:36px; --h-lg:52px;
  --sh:0 6px 20px -6px rgba(5,31,32,.16);
  --sh-lg:0 16px 40px -12px rgba(5,31,32,.28);
  --font:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;font-size:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink)}
::selection{background:var(--g200)}
.ic{flex:none}
[hidden]{display:none!important}
#print-root{display:none}

/* layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding-top:44px;padding-bottom:44px}
.section-sm{padding-top:24px;padding-bottom:40px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.mt-auto{margin-top:auto}

/* утилиты — вместо inline-стилей в JS */
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}
.w-full{width:100%}
.maxw-520{max-width:520px}.maxw-640{max-width:640px}.maxw-760{max-width:760px}.maxw-900{max-width:900px}.maxw-1000{max-width:1000px}
.mx-auto{margin-left:auto;margin-right:auto}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.nowrap-row{flex-wrap:nowrap}
.text-danger{color:var(--danger)}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* typography */
/* Заголовки экрана бывают названием магазина или именем, а там встречается одно
   длинное слово без пробелов: без переноса оно раздвигало страницу шире телефона
   (и нижняя панель уезжала следом). */
.h1{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.h2{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere} /* заголовок любого экрана */
.h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em} /* заголовок карточки */
.h4{font-size:16px;line-height:1.3;font-weight:600}
.muted{color:var(--ink2)}
.muted3{color:var(--ink3)}
.small{font-size:14px}
.tiny{font-size:13px}
.bold{font-weight:600}
.green{color:var(--g600)}
a.green:not(.btn),button.green:not(.btn),.faq-a a:not(.btn),.ai-note a:not(.btn),.green a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.green:not(.btn):hover,button.green:not(.btn):hover,.faq-a a:not(.btn):hover,.ai-note a:not(.btn):hover,.green a:not(.btn):hover{text-decoration-thickness:2px}
.mono{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;letter-spacing:.01em}
.price{font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.price-md{font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.price-lg{font-size:24px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.price-xl{font-size:28px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.center{text-align:center}
.nowrap{white-space:nowrap}
.clamp1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* КНОПКИ — пять видов (контракт аудита 03.10.2026, §0–§1):
   .btn-primary — одна главная на экране; .btn-outline — обычная;
   .btn-soft — выделенная вторая и следующий шаг строки в списке, так же — нажатая кнопка-переключатель [aria-pressed=true];
   .btn-ghost — тихая ссылка-действие, подчёркнута (в шапке — нет; .btn-bare — без черты);
   .btn-danger — красная заливка, только подтверждение в окне-вопросе. «Удалить» в строке — .btn-ghost.text-danger последней. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 18px;border:1px solid transparent;border-radius:var(--r);font-size:15px;font-weight:600;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap;user-select:none}
.btn:active:not([disabled]):not([aria-disabled="true"]){transform:translateY(1px)}
.btn-lg{height:var(--h-lg);padding:0 24px;font-size:16px}
.btn-sm{height:var(--h-sm);padding:0 12px;font-size:14px;gap:6px}
.btn-primary{background:var(--g600);border-color:var(--g600);color:#fff}
.btn-primary:hover{background:var(--g700);border-color:var(--g700)}
.btn-primary:active{background:var(--g800);border-color:var(--g800)}
.btn-outline{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn-outline:hover{background:var(--mist);border-color:var(--g500);color:var(--g800)}
.btn-outline:active{background:var(--g100)}
.btn-soft,.btn[aria-pressed="true"]{background:var(--g100);border-color:var(--line-strong);color:var(--g800)}
.btn-soft:hover,.btn[aria-pressed="true"]:hover{background:var(--g200)}
.btn-ghost{color:var(--g600)}
.btn-ghost:hover{background:var(--mist);color:var(--g800)}
.btn-ghost:active{background:var(--g100)}
.btn-ghost:not(.btn-icon):not(.btn-bare):not([aria-pressed]):not([disabled]){text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:4px}
.btn-ghost:not(.btn-icon):not(.btn-bare):not([aria-pressed]):not([disabled]):hover{text-decoration-color:currentColor}
#app-header .btn-ghost{text-decoration:none}
.btn-ghost.text-danger:not(.btn-icon):not(.btn-bare):not([aria-pressed]):not([disabled]){text-decoration-color:var(--danger-strong)}
.btn-outline.text-danger{border-color:var(--danger-strong)}
.btn.text-danger{color:var(--danger)}
.btn.text-danger:hover{background:var(--danger-bg);color:var(--danger)}
/* красная кнопка — подтверждение в окне-вопросе, которое не отменить (js/dialogs.js) */
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-hover)}
.btn-icon{width:var(--h);padding:0}
.btn-icon.btn-sm{width:var(--h-sm)}
/* выключенная — после всех состояний: белая с бледной пунктирной рамкой — нажать нельзя, надпись читается (--ink3, 5,92:1).
   Серая заливка --line2 с тёмной надписью почти не отличалась от мягкой .btn-soft (приёмка r1) */
.btn[disabled],.btn[aria-disabled="true"]{opacity:1;cursor:not-allowed;transform:none;background:var(--bg);border:1px dashed var(--line);color:var(--ink3);text-decoration:none}
.btn[disabled] .ic,.btn[aria-disabled="true"] .ic{opacity:.6}
.btn-ghost[disabled],.btn-ghost[aria-disabled="true"]{background:none;border-color:transparent;color:var(--ink3)}
.btn:focus-visible,.chip:focus-visible,.seg > *:focus-visible,.tabs a:focus-visible,.bb-item:focus-visible,.hdr-nav a:focus-visible,.map-chip:focus-visible{outline:3px solid var(--g500);outline-offset:2px}

/* inputs */
.input,.select,.textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;outline:none;font-size:16px;transition:border-color .15s,box-shadow .15s}
.input,.select{height:var(--h);padding:0 14px}
.textarea{min-height:96px;padding:10px 14px;resize:vertical;line-height:1.5}
/* фокус — тёмная рамка и кольцо --g500 (к белому около 6:1): обычная рамка уже --line-strong, и прежняя бледная подсветка
   --g100 (1,19:1) фокуса почти не показывала (приёмка r1). .bad и .readonly ниже по файлу по-прежнему перекрывают это правило */
.input:focus,.select:focus,.textarea:focus{border-color:var(--g600);box-shadow:0 0 0 2px var(--g500)}
.input::placeholder,.textarea::placeholder{color:var(--ink3);opacity:.85}
.input.bad,.select.bad,.textarea.bad{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.readonly,.input[readonly],.textarea[readonly]{background:var(--mist);border-color:var(--line2);color:var(--ink2)}
.readonly:focus,.input[readonly]:focus{box-shadow:none;border-color:var(--line)}
/* === Маски ввода и график работы (m-*) === */
/* === Маски ввода (m-engine) === */
/* js/masks.js: у полей с маской цифры одной ширины — шаблон не «пляшет» при наборе. Серый шаблон
   «+7 (___) ___-__-__» и «__:__» — отдельный span.mask-ghost следующим соседом поля, только пока поле
   в фокусе: набранная часть в нём прозрачная, видно только то, что осталось, цветом подсказки поля.
   Рамку, отступы и шрифт призрак берёт у поля сам (js/masks.js), родитель поля на это время — .mask-host. */
.input[data-mask]{font-variant-numeric:tabular-nums}
.mask-host{position:relative}
.mask-ghost{position:absolute;left:0;top:0;margin:0;box-sizing:border-box;border:1px solid transparent;background:none;pointer-events:none;user-select:none;white-space:pre;overflow:hidden;color:var(--ink3);opacity:.85;z-index:1}
.mask-ghost .mask-typed{color:transparent}
/* === График работы (m-schedule) === js/schedule.js: поле графика с кнопкой «По дням» и окно
   «График работы» (WP.ui.sheet). Строки дней компактные (поля времени --h-sm), на телефоне всё
   в одну колонку без прокрутки вбок. Включённый быстрый вариант — как включённый слой карты. */
.sched-field{display:flex;align-items:center;gap:8px}
.sched-field .input{flex:1 1 auto;min-width:0}
.sched-open{flex:none;padding:0 14px}
/* длинный график, не влезший в узкое поле, — целиком строкой под ним */
.sched-full{margin-top:6px;overflow-wrap:anywhere}
.sched-form{display:flex;flex-direction:column;gap:14px}
.sched-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;overflow-wrap:anywhere}
.sched-note .ic{margin-top:2px;color:var(--ink3)}
.sched-presets{display:flex;flex-wrap:wrap;gap:8px}
.sched-days{border:1px solid var(--line2);border-radius:var(--r);padding:0 14px}
.sched-row{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;column-gap:10px;min-height:48px;padding:6px 0}
.sched-row + .sched-row{border-top:1px solid var(--line2)}
/* переключатель дня — во всю высоту строки (48px, заходит в её отступы), а не одна подпись «Пн» в 20px:
   на телефоне пальцем попадать, как в чек-боксы фильтров */
.sched-day.check{align-self:stretch;margin:-6px 0;padding:0;align-items:center;font-weight:600;color:var(--ink)}
/* касание ловит сама подпись, а не квадратик в ней: браузер телефона, выбирая, куда попал палец, отдаёт
   квадратик вперёд подписи вокруг него — и у края строки «Вт» ближе оказывалась подпись соседнего «Ср»,
   переключался не тот день. Щелчок по квадратику доходит до подписи и переключает день так же;
   с клавиатуры (Tab, пробел) чек-бокс работает как раньше */
.sched-day.check input{margin-top:0;pointer-events:none}
.sched-times{display:flex;align-items:center;gap:8px}
.sched-w{font-size:14px;color:var(--ink3)}
.sched-t.input{width:76px;height:var(--h-sm);padding:0 10px}
.sched-off{font-size:14px;color:var(--ink3)}
.sched-24.btn{justify-self:start;margin-left:-10px;padding:0 10px;font-weight:500}
/* ошибка — под полями времени, а не под днём (строка сильнее .ferr ниже по файлу) */
.sched-row .sched-err{grid-column:2;margin-top:2px}
.sched-sum-v{color:var(--ink2);font-weight:600}
/* график для показа (WP.schedule.html): группа «Ср 09:00–17:00,» переносится на новую строку целиком, а не
   «Ср 09:00–» / «17:00»; не влезла и одна — рвётся между днями и часами (слова внутри — .nowrap) */
.sched-g{display:inline-block;max-width:100%}
/* узкий телефон: четыре варианта в одну строку не влезают — два ряда по два, а не «Круглосуточно» одно внизу */
@media(max-width:480px){
  .sched-presets{display:grid;grid-template-columns:1fr 1fr}
  .sched-presets .chip{justify-content:center}
  .sched-open{padding:0 12px}
}
/* 320 px и масштаб 400 %: строка дня «Пн с [09:00] до [19:00]» шире рамки дней — поле «до» заходило за неё */
@media(max-width:340px){
  .sched-days{padding:0 10px}
  .sched-t.input{width:68px;padding:0 8px}
}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A6B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.select-sm{height:var(--h-sm);width:auto;padding-left:12px}
.label{display:block;font-size:14px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.field{margin-bottom:14px}
.ferr{font-size:13px;color:var(--danger);margin-top:5px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink2);cursor:pointer;padding:6px 0;line-height:1.45}
.check input{accent-color:var(--g600);width:18px;height:18px;cursor:pointer;flex:none;margin-top:1px}
.check a{color:var(--g600);text-decoration:underline;text-underline-offset:3px}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:48px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:var(--h-sm);height:var(--h-sm);display:flex;align-items:center;justify-content:center;color:var(--ink3);border-radius:var(--r)}
.pw-eye:hover{color:var(--ink);background:var(--mist)}

/* segmented control: снаружи 44px (sm — 36px) */
.seg{display:inline-flex;background:var(--mist);border:1px solid var(--line-strong);border-radius:var(--r);padding:3px;gap:2px}
.seg > *{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:7px;font-size:14px;font-weight:600;color:var(--ink2);transition:.15s;white-space:nowrap;cursor:pointer}
.seg > *:not(.on):not([disabled]):hover{background:var(--g100);color:var(--g800)}
.seg > *.on{background:var(--g700);color:#fff;box-shadow:none}
.seg-2{display:flex;width:100%}
.seg-2 > *{flex:1}
.seg-sm > *{height:28px;padding:0 12px;font-size:14px}

/* cards, chips, badges */
.card{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg)}
.card-pad{padding:20px}
.card-hover{transition:box-shadow .18s,border-color .18s,transform .18s}
.card-hover:hover{box-shadow:var(--sh);border-color:var(--line);transform:translateY(-2px)}
.card-soft{background:var(--mist);border-color:var(--line2)}
.card-warn{background:var(--amber-bg);border-color:var(--amber-line);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:7px;height:var(--h-sm);padding:0 14px;border-radius:99px;border:1px solid var(--line-strong);background:#fff;font-size:14px;font-weight:500;color:var(--ink);transition:.15s;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--g500);color:var(--g800);background:var(--mist)}
.chip.on,.chip[aria-pressed="true"]{background:var(--g700);border-color:var(--g700);color:#fff}
.chip.on:hover,.chip[aria-pressed="true"]:hover{background:var(--g800);border-color:var(--g800);color:#fff}
.chip.on .ic,.chip[aria-pressed="true"] .ic{color:#fff}
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap}
.badge-green{background:var(--g100);color:var(--g800)}
.badge-line{border:1px solid var(--line);color:var(--ink2);background:#fff}
.badge-amber{background:var(--amber-bg);color:var(--amber)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
/* Знак «Проверен» — один вид в четырёх местах: карточка объявления, страница магазина,
   проценка и профиль. Заливка тёмная (белое на --g600 — 8,7:1): рядом всегда стоят
   светлые «Новое» и «Магазин», и знак должен читаться как отдельный факт о продавце,
   а не как третий оттенок того же зелёного. */
.badge-verified{background:var(--g600);color:#fff}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--g100);color:var(--g800);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none}
.logo-sq{border-radius:var(--r);background:var(--mist);border:1px solid var(--g200);color:var(--g700);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.icon-tile{width:44px;height:44px;border-radius:var(--r);background:var(--mist);color:var(--g700);display:flex;align-items:center;justify-content:center;flex:none}
.icon-tile.round{border-radius:50%;width:38px;height:38px}
.nb-wrap{position:relative}
.nbadge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.nbadge-inline{position:static;margin-left:6px}

/* header: фон шапки заходит под строку состояния телефона */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2);padding-top:env(safe-area-inset-top,0px)}
.hdr-top{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.02em;flex:none}
.brand .bmark{border-radius:var(--r);background:var(--g600);display:flex;align-items:center;justify-content:center}
.brand em{font-style:normal;color:var(--g600)}
.hdr-search{flex:1;min-width:0;max-width:520px;position:relative;margin:0 auto}
.hdr-search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none}
.hdr-search input{width:100%;height:var(--h);border-radius:var(--r);border:1px solid var(--line-strong);background:var(--mist);padding:0 12px 0 38px;outline:none;font-size:16px;transition:.15s;text-overflow:ellipsis}
.hdr-search input:focus{background:#fff;border-color:var(--g600);box-shadow:0 0 0 2px var(--g500)}
.hdr-search input::placeholder{color:var(--ink3)}
.hdr-search input::-webkit-search-cancel-button{cursor:pointer}
.hdr-acts{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
/* меню магазина в шапке (компьютер): Касса · Склад · Заказы · Сообщения · Витрина, текущий
   пункт — зелёной подложкой; число новых запросов — на «Заказах», непрочитанных сообщений —
   на «Сообщениях» (.nbadge через .nb-wrap). Справа — [Жалобы] и «Настройки» */
.hdr-nav{display:flex;align-items:center;gap:2px;flex:none}
.hdr-nav a{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:var(--r);font-weight:600;color:var(--ink2);white-space:nowrap;transition:background .15s,color .15s}
.hdr-nav a:hover{background:var(--mist)}
.hdr-nav a.on{background:var(--g100);color:var(--g800)}
.hdr-acts a[aria-current]{background:var(--g100);color:var(--g800);border-color:var(--g200)}
/* «Витрина» значком-домиком в шапке телефона магазина: внизу у него «Сообщения» (решение
   владельца), на компьютере значок скрыт — там пункт меню */
.hdr-home{display:none;flex:none}
.hdr-home.on{background:var(--g100);color:var(--g800);border-color:var(--g200)}

/* bottom navigation (телефон): 68px + safe-area, все подписи на одной линии */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line2);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bb-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:56px;color:var(--ink3);font-size:13px;font-weight:600;min-width:0;border-radius:var(--r)}
.bb-item.on{color:var(--g800);font-weight:700}
.bb-item:active{color:var(--g600)}
.bb-ico{position:relative;display:flex;align-items:center;justify-content:center;height:28px;isolation:isolate}
.bb-item.on:not(.bb-sell) .bb-ico::before{content:"";position:absolute;inset:0 -14px;border-radius:99px;background:var(--g100);z-index:-1}
/* 16 px строка: при 13 px и прежних 14 px срезались хвосты «р», «у», «ф» */
.bb-lbl{line-height:16px;height:16px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bb-sell .bb-plus{width:44px;height:28px;border-radius:99px;background:var(--g600);color:#fff;display:flex;align-items:center;justify-content:center}
.bb-sell.on .bb-plus,.bb-sell:active .bb-plus{background:var(--g700)}
/* 360 px: «Сообщения» жирным 13 px (около 72 px) в ячейку около 70 px — без боковых отступов панели */
@media(max-width:374px){.bb-lbl{letter-spacing:-.02em}.bottombar{padding-left:0;padding-right:0}}

/* footer: две строки, на десктопе не выше ~90px — знак и ссылки, под ними © и реквизиты
   продавца услуг (их сверяет банк-эквайер). Подвал — у гостя и частника; у магазина подвала нет —
   реквизиты и ссылки у него в «Настройках», блок «О WayParts» (.p-about в конце файла).
   На телефоне документы собраны под «Документы» — правило в медиазапросе ≤700px. */
.ftr{border-top:1px solid var(--line2);background:var(--mist);margin-top:32px}
.ftr-in{padding:14px 20px 12px;display:flex;flex-direction:column;gap:8px}
.ftr-top{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.ftr .brand{font-size:17px;gap:8px}
.ftr-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.ftr-links a{font-size:14px;color:var(--ink2);padding:4px 0}
.ftr-links a:hover{color:var(--g700);text-decoration:underline;text-underline-offset:3px}
.ftr-bot{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--ink3);font-size:13px}
.ftr-req{overflow-wrap:anywhere}
.ftr-docs{display:contents}
.ftr-more{display:none}
.ftr-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:14px;color:var(--ink2)}
.ftr-more summary::-webkit-details-marker{display:none}
.ftr-more[open] summary svg{transform:rotate(180deg)}
/* Плавающая кнопка ИИ-помощника прикреплена к углу окна и в самом низу страницы
   ложилась на последнюю ссылку подвала — пока она видна, оставляем ей место справа
   (на широком окне кнопка стоит на поле за контейнером и не мешает). */
@media(min-width:701px) and (max-width:1380px){
  body:has(#chat-fab) .ftr-in{padding-right:88px}
}

/* главная */
.home-hero{padding:28px 0 8px;max-width:760px}
.big-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:6px 6px 6px 14px}
.big-search > .ic{color:var(--ink3)}
.big-search input{flex:1;border:none;outline:none;height:var(--h);font-size:16px;min-width:0;background:transparent}
.big-search:focus-within{border-color:var(--g600);box-shadow:0 0 0 2px var(--g500)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cat-tile{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;font-size:15px;font-weight:600;color:var(--ink2);transition:.15s}
.cat-tile .ic{color:var(--g600)}
.cat-tile:hover{border-color:var(--g500);color:var(--g800);background:var(--mist)}

/* карточки объявлений */
.thumb{border-radius:var(--r);background:var(--mist);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--g300);flex:none;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-card{width:100%;height:150px}
.thumb-sm{width:72px;height:72px}
.pcard{display:flex;flex-direction:column;gap:10px;padding:12px;position:relative}
/* сердечко: палец попадает по 44×44, а белый кружок остаётся 36px и не наползает на фото */
.pcard .fav{position:absolute;top:14px;right:14px;color:var(--ink3);background:none;border:none;border-radius:50%;width:var(--h);height:var(--h);display:flex;align-items:center;justify-content:center;transition:.15s;z-index:2}
.pcard .fav::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;border:1px solid var(--line2);transition:.15s}
.pcard .fav .ic{position:relative}
.pcard .fav:hover{color:var(--danger)}
.pcard .fav:hover::before,.pcard .fav.on::before{border-color:var(--danger-line)}
.pcard .fav.on{color:var(--danger)}
.pcard .fav.on svg{fill:currentColor}
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.fav-big{width:var(--h);height:var(--h);border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--ink3);flex:none;transition:.15s}
.fav-big:hover,.fav-big.on{color:var(--danger);border-color:var(--danger-line)}
.fav-big.on svg{fill:currentColor}
/* у магазина «Избранного» нет ни в меню, ни в шапке — значит, и сердечек нет нигде */
body.role-store .pcard .fav,body.role-store .fav-big{display:none}

/* поиск */
.search-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.search-aside{position:sticky;top:84px}
.filters{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);padding:16px}
.filters .field:last-of-type{margin-bottom:8px}
.filters [data-rc]{grid-template-columns:1fr}
.filters-toggle{display:none}

/* объявление */
.listing-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.listing-side{position:sticky;top:84px}
.gallery-main{border-radius:var(--r-lg);background:var(--mist);border:1px solid var(--line2);height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-main.gallery-empty,.gallery-empty{height:180px;flex-direction:column;gap:8px;color:var(--g300)}
.gallery-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.gallery-thumbs button{width:72px;height:72px;border-radius:var(--r);overflow:hidden;border:2px solid transparent;flex:none;background:var(--mist)}
.gallery-thumbs button.on{border-color:var(--g600)}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.spec{display:flex;flex-direction:column;gap:2px;font-size:15px;padding:8px 0;border-bottom:1px solid var(--line2)}
.spec .muted3{font-size:13px}
.desc{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.6;color:var(--ink2)}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink3);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--g700)}
.soc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 16px;border-radius:var(--r);border:1px solid var(--line-strong);font-size:15px;font-weight:600;color:var(--ink);transition:.15s;background:#fff;white-space:nowrap}
.soc-btn:hover{border-color:var(--g500);color:var(--g700)}
.soc-btn.btn-sm{height:var(--h-sm);padding:0 12px;font-size:14px}

/* размещение */
/* Фото товара (pages-sell.js): снимок, под ним полоса «‹ N ›» — сдвинуть влево, место, вправо.
   Перетаскивание: плитка .photo-ph остаётся в сетке местом вставки, за указателем летит копия
   .photo-ghost. Меню и родное перетаскивание картинки (выноска iOS, «Сохранить картинку»
   в Android, Electron) выключены — иначе долгое нажатие открывало бы их вместо перестановки. */
.photos{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-radius:var(--r)}
.photos.drop-on{outline:2px dashed var(--g400);outline-offset:4px;background:var(--mist)}
.photo{display:flex;flex-direction:column;gap:4px;min-width:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.photo-img{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);background:var(--mist)}
.photo-img img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.photo.main .photo-img{border-color:var(--g400)}
.photo-main{position:absolute;left:6px;bottom:6px;background:rgba(5,31,32,.72);color:#fff;font-size:13px;font-weight:600;padding:1px 8px;border-radius:99px}
.photo-x{position:absolute;top:4px;right:4px;width:var(--h-sm);height:var(--h-sm);border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 1px 3px rgba(5,31,32,.2)}
.photo-bar{display:flex;align-items:center;justify-content:space-between;gap:4px}
.photo-mv{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink2);display:flex;align-items:center;justify-content:center;transition:.15s}
/* на телефоне :hover залипает после касания — подсветка только там, где есть мышь */
@media(hover:hover){.photo-mv:hover:not(:disabled){border-color:var(--g500);color:var(--g700);background:var(--mist)}}
.photo-mv:disabled{opacity:.35;cursor:default}
.photo-mv:focus-visible,.photo-x:focus-visible,.photo-add:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
.photo-n{font-size:13px;font-weight:600;color:var(--ink3)}
.photo.main .photo-n{color:var(--g700)}
@media(hover:hover) and (pointer:fine){.photo-img{cursor:grab}}
.photos.dragging,.photos.dragging *{cursor:grabbing}
.photo-ph .photo-img{opacity:.35;border-style:dashed;border-color:var(--g500)}
.photo-ghost{position:fixed;left:0;top:0;z-index:85;pointer-events:none;box-shadow:var(--sh-lg);will-change:transform}
.photo-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.photo-add{align-self:start;aspect-ratio:1;border:1.5px dashed var(--line-strong);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink2);font-size:14px;font-weight:600;transition:.15s;text-align:center;padding:4px}
.photo-add:hover{border-color:var(--g500);color:var(--g700);background:var(--mist)}
/* номер места на самых узких телефонах между стрелками не помещается — хватает стрелок */
@media(max-width:340px){.photo-n{display:none}}
.ai-note{display:flex;gap:8px;align-items:flex-start;background:var(--mist);border:1px solid var(--g200);color:var(--g800);border-radius:var(--r);padding:10px 12px;font-size:14px;margin-bottom:14px}
.ai-note.warn{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}
.ai-note.bad{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}

/* вкладки (профиль, склад) */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a{display:inline-flex;align-items:center;gap:7px;min-height:var(--h);padding:10px 15px;font-size:15px;font-weight:600;color:var(--ink3);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--g800);font-weight:700;border-color:var(--g600);background:var(--mist);border-radius:var(--r) var(--r) 0 0}

/* склад и касса */
.office-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.orow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line2)}
.orow:first-child{border-top:none;padding-top:0}
/* строка чека — всегда в два ряда: [название ×] / [кол-во цена сумма] */
.crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t t x" "q p s";gap:8px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line2)}
.crow:first-child{border-top:none}
.crow>*:nth-child(1),.crow .crow-t{grid-area:t;min-width:0}
.crow>*:nth-child(2),.crow .crow-q{grid-area:q}
.crow>*:nth-child(3),.crow .crow-p{grid-area:p;justify-self:start}
.crow>*:nth-child(4),.crow .crow-s{grid-area:s;justify-self:end;text-align:right}
.crow>*:nth-child(5),.crow .crow-x{grid-area:x;justify-self:end;align-self:start}
.crow .btn-icon{width:var(--h);height:var(--h)}
.cprice{width:90px;height:var(--h);padding:0 10px;font-size:16px;text-align:right}
/* «−» и «+» — ровно 44×44 под палец, поэтому рамку рисует тень, а не border:
   иначе на неё уходят 2px высоты и кнопки выходят 44×42 */
.qty{display:inline-flex;align-items:center;height:var(--h);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-strong);overflow:hidden;background:#fff;flex:none}
.qty button{width:var(--h);height:var(--h);font-size:20px;line-height:1;color:var(--ink2);display:flex;align-items:center;justify-content:center}
.qty button:hover{background:var(--mist)}
.qty input{width:48px;height:var(--h);border:none;text-align:center;font-weight:600;font-size:16px;outline:none;background:transparent}
.qty.bad{box-shadow:inset 0 0 0 1px var(--danger);color:var(--danger)}
.qty input.bad{color:var(--danger)}
.otable,.rtable{width:100%;border-collapse:collapse;font-size:15px}
.otable th,.rtable th{text-align:left;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink2);border-bottom:1px solid var(--line);white-space:nowrap}
.otable th{padding:8px 10px}
.otable td{padding:10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.otable th:nth-child(n+2):not(:last-child),.otable td:nth-child(n+2):not(:last-child),.otable .num{text-align:right;white-space:nowrap}
.otable th:last-child:not(:first-child),.otable td:last-child:not(:first-child){text-align:right}
.otable td[colspan]{text-align:left!important;white-space:normal!important}
.otable td.low{color:var(--amber);font-weight:600}
.orow-edit td{background:var(--mist)}
.rtable th{padding:6px 4px}
.rtable td{padding:7px 4px;border-bottom:1px solid var(--line2);vertical-align:top}
.rtable td:nth-child(n+2),.rtable th:nth-child(n+2){text-align:right;white-space:nowrap}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sale-details{padding:6px 0 12px 12px}
.scan-overlay{position:fixed;inset:0;z-index:120;background:rgba(5,31,32,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
.scan-overlay video{width:min(92vw,520px);border-radius:var(--r-lg);background:#000}

/* панель действий, прибитая над нижней панелью телефона (на десктопе скрыта) */
.sticky-actions{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));padding:10px 16px;background:#fff;border-top:1px solid var(--line2);box-shadow:0 -6px 16px -10px rgba(5,31,32,.25);z-index:65;display:none;align-items:center}
.sticky-actions > .btn{flex:1 1 0;min-width:0}

/* тарифы и администрирование */
.tariff{display:flex;flex-direction:column;padding:22px;height:100%}
.tariff.current{border-color:var(--g600);box-shadow:0 0 0 1px var(--g600)}
.tariff .tprice{font-size:28px;font-weight:800;letter-spacing:-.02em}
.tariff ul{list-style:none;margin:16px 0 20px;display:flex;flex-direction:column;gap:8px}
.tariff li{display:flex;gap:8px;font-size:15px;color:var(--ink2);align-items:flex-start}
.tariff li .ic{color:var(--g600);margin-top:3px}
.progress{height:8px;border-radius:99px;background:var(--line2);overflow:hidden}
.progress i{display:block;height:100%;border-radius:99px;background:var(--g500)}
.adm-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line2);flex-wrap:wrap}
.adm-row:first-child{border-top:none;padding-top:0}
.adm-row b{overflow-wrap:anywhere} /* название магазина одним длинным словом */
.creds{display:flex;flex-direction:column;gap:6px}
.cred{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;background:var(--mist);border-radius:var(--r)}
.cred code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:14px;overflow-wrap:anywhere}
.steps-list{padding-left:20px;display:flex;flex-direction:column;gap:6px;margin:8px 0 10px}
.my-row{display:flex;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line2);align-items:flex-start}
.my-row:last-child{border-bottom:none}
.my-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
details summary::-webkit-details-marker{display:none}

/* переписка */
.chats-grid{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:440px}
.dlg-list{border-right:1px solid var(--line2);overflow-y:auto;max-height:66vh}
.dlg-pane{display:flex;flex-direction:column;min-width:0;min-height:400px}
.dlg-item{display:flex;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line2);cursor:pointer;transition:.12s}
.dlg-item:hover,.dlg-item.on{background:var(--mist)}
.dlg-more{padding:10px 12px}
.dlg-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--mist);max-height:52vh}
.bubble{max-width:76%;padding:9px 13px;border-radius:var(--r-lg);font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble-in{background:#fff;border:1px solid var(--line2);border-bottom-left-radius:4px;align-self:flex-start}
.bubble-out{background:var(--g600);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg-sys{align-self:center;background:none;color:var(--ink3);font-size:13px;padding:2px}
.chat-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line2);background:#fff}
.chat-input input{flex:1;height:var(--h);border:1px solid var(--line-strong);border-radius:var(--r);padding:0 13px;outline:none;min-width:0;font-size:16px}
.chat-input input:focus{border-color:var(--g600);box-shadow:0 0 0 2px var(--g500)}
#wp-chats-back{display:none}

/* ИИ-виджет (показывается, только когда ИИ подключён) */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:80;width:52px;height:52px;border-radius:50%;background:var(--g600);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-lg);transition:.18s}
.chat-fab:hover{background:var(--g700);transform:scale(1.05)}
.chat-panel{position:fixed;right:22px;bottom:86px;z-index:80;width:380px;max-width:calc(100vw - 32px);height:540px;max-height:calc(100vh - 120px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);display:flex;flex-direction:column;overflow:hidden;animation:chatin .18s ease}
@keyframes chatin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;gap:11px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line2)}
/* .grow тянется от полной ширины подзаголовка, и кнопки-значки без этого ужимались до 25px */
.chat-head .btn{flex:none}
/* contain — докрутив разговор до края, палец не должен начинать листать страницу под панелью */
.chat-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;background:var(--mist);display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:10px 13px;border-radius:var(--r-lg);font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg-ai{background:#fff;border:1px solid var(--line2);border-bottom-left-radius:5px;align-self:flex-start}
.msg-me{background:var(--g600);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg .mlinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
/* В ссылке бывает название объявления с ценой — длинное, в две строки: поэтому высота
   не жёсткая, а скругление карточное (--r-lg): «таблетка» 99px на двух строках раздувается в пузырь */
.msg .mlinks a{display:inline-flex;align-items:center;gap:6px;min-height:var(--h-sm);font-size:14px;font-weight:600;line-height:1.3;color:var(--g700);background:var(--mist);border:1px solid var(--g200);padding:7px 12px;border-radius:var(--r-lg)}
.msg .mlinks a svg{flex:none}
.msg .mlinks a:hover{background:var(--g100)}
.chat-chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 4px}
.chat-chips button{height:var(--h-sm);font-size:14px;font-weight:500;color:var(--g800);background:var(--mist);border:1px solid var(--g200);border-radius:99px;padding:0 12px;transition:.15s}
.chat-chips button:hover{background:var(--g100)}
@media(max-width:700px){
  /* подсказки-чипы на телефоне — 44px под палец, как остальные кнопки панели */
  .chat-chips button{height:var(--h)}
}
.typing{display:inline-flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);border-bottom-left-radius:5px;align-self:flex-start}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* misc */
.empty{padding:48px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty > .ic{color:var(--ink3)}
.empty-sub{max-width:420px}
/* слои: шапка 60 · панель действий 65 · нижняя панель 70 · ИИ 80 · всплывающие окна 90 · тост 100 · сканер 120 */
.toast{position:fixed;left:0;right:0;margin:0 auto;bottom:28px;z-index:100;background:var(--ink);color:#fff;font-size:15px;font-weight:500;padding:12px 18px;border-radius:var(--r);box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;animation:chatin .2s ease;max-width:min(560px,calc(100vw - 32px));width:max-content;line-height:1.4}
/* ---- всплывающие уведомления (js/notifier.js) ----
   Тост внизу по центру — ответ на действие самого человека, а эти окна — о том, что сделал
   кто-то другой (покупатель написал, коллега отметил «Пришло»). Поэтому у них своё место —
   стопка справа вверху, под шапкой, до трёх окон, — и одно другое не затирает. Контейнер
   пропускает щелчки сквозь себя: ловят их только сами окна. */
.pop-stack{position:fixed;top:calc(64px + env(safe-area-inset-top,0px) + 12px);right:16px;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.pop{pointer-events:auto;display:flex;align-items:flex-start;gap:2px;background:var(--bg);border:1px solid var(--line2);border-left:4px solid var(--g600);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:4px;animation:chatin .2s ease}
.pop-ok{border-left-color:var(--g500)}
.pop-warn{border-left-color:var(--amber)}
.pop-info{border-left-color:var(--g300)}
.pop-main{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;padding:8px 4px 8px 10px;border-radius:var(--r);color:var(--ink)}
.pop-main > .ic{margin-top:2px;color:var(--g600)}
.pop-warn .pop-main > .ic{color:var(--amber)}
.pop-main:hover .pop-title{text-decoration:underline;text-underline-offset:3px}
.pop-main:focus-visible{outline:2px solid var(--g500);outline-offset:-2px}
.pop-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pop-title{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.pop-text{line-height:1.4;overflow-wrap:anywhere}
.pop-x{flex:none;color:var(--ink3)}
.skel{border-radius:var(--r);background:linear-gradient(90deg,var(--line2) 25%,var(--mist) 50%,var(--line2) 75%);background-size:200% 100%;animation:sk 1.1s infinite}
.skel-thumb{height:150px}
.skel-line{height:16px;width:80%}
.skel-line-sm{height:14px;width:50%}
@keyframes sk{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Печать чека: только содержимое #print-root, лента 80 мм. Класс print-receipt на body
   ставит WP.ui.print (ui.js), когда в #print-root лёг чек. Без него любая другая страница
   (оферта, помощь, склад) по Ctrl+P печатается как есть, на обычном листе, — раньше правило
   «прятать всё, кроме #print-root» действовало всегда, и выходил пустой лист. */
@page receipt{size:80mm auto;margin:5mm}
@media print{
  body{padding:0!important;background:#fff}
  /* то, что на бумаге не нужно ни на одной странице: чат, всплывашки, нижняя панель */
  #chat-root,#toast-root,#pop-root,.bottombar,.sticky-actions{display:none!important}
  body.print-receipt > *:not(#print-root){display:none!important}
  body.print-receipt #print-root{display:block!important;page:receipt;width:100%;font-size:12px;line-height:1.4;color:#000}
  #print-root .receipt,#print-root .receipt-wrap{width:100%;max-width:none;border:none;box-shadow:none;padding:0;font-size:12px}
  #print-root .h2,#print-root .h3,#print-root .h4{font-size:14px}
  #print-root .price-md,#print-root .price-lg,#print-root .price-xl{font-size:14px}
  #print-root .rtable{font-size:12px}
  #print-root .rtable th{font-size:12px;color:#000}
  .no-print{display:none!important}
  /* Печать этикеток: WP.ui.printLabels кладёт их в #print-root, а размер страницы — стилем
     #wp-label-page (@page wp-label: на 0,4 мм меньше этикетки — так драйвер с бумагой ровно
     по этикетке печатает в 100 %, без масштаба и без второй страницы; у листа — A4).
     Одна этикетка — одна страница, лист A4 — одна страница. */
  body.print-labels > *:not(#print-root){display:none!important}
  body.print-labels #print-root{display:block!important;page:wp-label}
  body.print-labels #print-root .lbl,body.print-labels #print-root .lbl-sheet{break-after:page}
  body.print-labels #print-root .lbl:last-child,body.print-labels #print-root .lbl-sheet:last-child,body.print-labels #print-root .lbl-slot .lbl{break-after:auto}
}

/* Этикетки (js/labels.js): места и размеры полей — в мм прямо в разметке, блок .lbl — ровно
   страница печати, (w − 0,4) × (h − 0,4) мм. Шрифт Arial, цвет только чёрный на белом: серые
   тона интерфейса принтер этикеток размывает. Штрихкод — SVG, модуль — целое число точек принтера.
   Эти же правила labels.js кладёт в документ печати без окна (программа для Windows, WP.labels.CSS)
   — меняются вместе, tools/test-labels.mjs сверяет. */
.lbl{position:relative;overflow:hidden;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif}
.lbl-t{position:absolute;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word;white-space:normal}
.lbl-b{font-weight:700}
.lbl-m{font-family:Consolas,'Courier New',monospace}
.lbl-bc{display:block}
.lbl .lbl-bc{position:absolute}
.lbl-sheet{position:relative;width:210mm;height:297mm;overflow:hidden;background:#fff}
.lbl-slot{position:absolute}

@media(max-width:1020px){
  .hdr-top{gap:10px}
  .hdr-search{max-width:none}
  .hdr-acts .btn{padding:0 14px}
  .hdr-acts .btn-icon{padding:0}
  /* меню магазина — одни подписи, «Жалобы» — значок с числом; подпись «Настройки» остаётся
     на «Кассе», «Складе», в «Сообщениях» и «Настройках»: окно программы WayParts для Windows
     бывает 900–1020px (minWidth 900) */
  .hdr-nav a{padding:0 9px}
  .hdr-nav .ic{display:none}
  .hdr-rep > span:not(.nbadge){display:none}
  .hdr-acts .hdr-rep{width:var(--h);padding:0}
  /* на экранах с поиском «Настройки» — значком 44px: с «Сообщениями» в меню поле поиска
     иначе сжималось до 150–240px */
  .hdr-top.has-search .hdr-set span{display:none}
  .hdr-top.has-search .hdr-acts .hdr-set{width:var(--h);padding:0}
}
/* Магазин на экранах с поиском (поиск, объявление, страница продавца): с «Сообщениями» в меню
   (пять пунктов) поле поиска на 1021–1180px сжималось до 150–230px («м..» вместо «масло»).
   Здесь меню такое же, как на 1020px и уже: подписи без значков, промежутки уже. Частника
   это не касается: меню в шапке (.hdr-store) только у магазина. */
@media(max-width:1180px){
  .hdr-top.hdr-store.has-search{gap:10px}
  .hdr-top.hdr-store.has-search .hdr-nav a{padding:0 9px}
  .hdr-top.hdr-store.has-search .hdr-nav .ic{display:none}
}
/* Магазин-администратор (в шапке ещё и «Жалобы») на экранах с поиском — так на любой ширине:
   от 1200px контейнер всё равно 1160, и с полным меню поле было бы около 200px. «Жалобы» —
   значок с числом (имя — aria-label, его ставит WP.counters.paint). */
.hdr-top.has-search.has-rep{gap:10px}
.hdr-top.has-search.has-rep .hdr-nav a{padding:0 9px}
.hdr-top.has-search.has-rep .hdr-nav .ic{display:none}
.hdr-top.has-search.has-rep .hdr-rep > span:not(.nbadge){display:none}
.hdr-top.has-search.has-rep .hdr-acts .hdr-rep{width:var(--h);padding:0}
/* Администратор без поиска на 1021–1100px: знак, пять пунктов меню, «Жалобы» и «Настройки»
   с подписями оставляли около 18px запаса (шрифт пошире — и шапка вылезла бы за край).
   «Жалобы» — значком. */
@media(max-width:1100px){
  .hdr-top.has-rep .hdr-rep > span:not(.nbadge){display:none}
  .hdr-top.has-rep .hdr-acts .hdr-rep{width:var(--h);padding:0}
}
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .h1{font-size:26px}
  .section{padding-top:30px;padding-bottom:30px}
  .search-layout,.listing-layout{grid-template-columns:1fr}
  .search-aside,.listing-side{position:static}
  .filters{display:none}
  .filters.open{display:block;margin-bottom:16px}
  .filters-toggle{display:inline-flex}
  .gallery-main{height:300px}
  .photos{grid-template-columns:repeat(3,1fr)}
  /* касса остаётся в две колонки до самого телефона (ширину колонок задаёт правило
     для окна программы WayParts для Windows ниже): иначе чек и кнопка оплаты уезжают за нижний край */
  .office-grid{gap:12px}
}
@media(max-width:860px){
  .hdr-top.has-search .brand .bname{display:none}
  /* «Настройки» — один значок (aria-label у ссылки есть всегда) */
  .hdr-set span{display:none}
  .hdr-acts .hdr-set{width:var(--h);padding:0}
}
/* у администратора с поиском на 880px и уже «Сообщения» — значок с числом (имя — aria-label,
   его ставит WP.chats.paintBadges): иначе поле поиска уже 190px (окно программы WayParts
   для Windows — от 900px (minWidth 900), его это не касается) */
@media(max-width:880px){
  .hdr-top.has-search.has-rep .hdr-nav a[data-wp-msgs] > span:not(.nbadge){display:none}
  .hdr-top.has-search.has-rep .hdr-nav a[data-wp-msgs] .ic{display:block}
}
/* 701–760px, экраны с поиском: пункты меню магазина ещё плотнее — иначе поле поиска около 180px */
@media(min-width:701px) and (max-width:760px){
  .hdr-top.hdr-store.has-search{gap:8px}
  .hdr-top.hdr-store.has-search .hdr-nav a{padding:0 7px}
}
@media(max-width:800px){
  .chats-grid{grid-template-columns:1fr}
  .chats-grid[data-view="thread"] .dlg-list{display:none}
  .chats-grid[data-view="list"] .dlg-pane{display:none}
  .chats-grid[data-view="thread"]{height:calc(100dvh - 64px - 32px);min-height:380px}
  .chats-grid[data-view="thread"] .dlg-pane{min-height:0;height:100%}
  .chats-grid[data-view="thread"] .dlg-msgs{max-height:none;min-height:0}
  /* список диалогов — по высоте содержимого: пустая рамка на полэкрана выглядит как незагрузившийся экран */
  .chats-grid[data-view="list"]{min-height:0;height:auto}
  .dlg-list{max-height:none;border-right:none}
  /* размеры кнопки «Назад» задаёт своё правило в разделе AUTH */
  #wp-chats-back{display:inline-flex}
}
@media(max-width:700px){
  .bottombar{display:flex}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body.has-sticky{padding-bottom:calc(68px + 66px + env(safe-area-inset-bottom))}
  body:has(#app .sticky-actions:not([hidden])){padding-bottom:calc(68px + 66px + env(safe-area-inset-bottom))}
  .sticky-actions{display:flex;gap:10px}
  .hide-mobile{display:none!important}
  .ftr{padding-bottom:8px}
  /* подвал на телефоне: знак уже есть в шапке, ссылки под палец (44px) в одну строку —
     «Помощь · Контакты · Документы», документы раскрываются списком в две колонки */
  .ftr .brand{display:none}
  .ftr-in{gap:2px}
  .ftr-links{gap:0 20px;width:100%}
  .ftr-links a,.ftr-more summary{display:flex;align-items:center;min-height:var(--h);padding:4px 0;line-height:1.25}
  .ftr-docs{display:none}
  .ftr-more{display:block}
  .ftr-more[open]{width:100%}
  .ftr-more-list{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  /* кнопка ИИ висит над нижней панелью у правого края — в самом низу страницы
     под ней должно быть пустое место, а не реквизиты */
  body:has(#chat-fab) .ftr{padding-bottom:74px}
  .hdr-top{height:58px;gap:10px}
  .hdr-top.has-search .brand .bname{display:inline}
  .hdr-acts{display:none}
  /* меню магазина на телефоне — нижняя панель; в шапке только «Витрина» */
  .hdr-nav{display:none}
  .hdr-home{display:inline-flex;margin-left:auto}
  .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
  /* всплывающие окна — во всю ширину с полями по 16px, под шапкой 58px; крестик — 44px под палец */
  .pop-stack{top:calc(58px + env(safe-area-inset-top,0px) + 8px);left:16px;right:16px;width:auto}
  .pop-x.btn-icon{width:var(--h);height:var(--h)}
  .chat-fab{right:14px;bottom:calc(68px + 14px + env(safe-area-inset-bottom))}
  body.has-sticky .chat-fab{bottom:calc(68px + 66px + 14px + env(safe-area-inset-bottom))}
  body:has(#app .sticky-actions:not([hidden])) .chat-fab{bottom:calc(68px + 66px + 14px + env(safe-area-inset-bottom))}
  /* Помощник на телефоне — во весь экран поверх шапки и нижней панели (слой 80 выше их 60 и 70),
     поэтому поле ввода ничем не перекрыто; вырезы экрана обходим безопасными отступами.
     Плавающую кнопку при открытой панели прячем — она ложилась бы на поле ввода. */
  .chat-panel{left:0;right:0;top:0;bottom:0;width:auto;max-width:none;height:auto;max-height:none;border:none;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .chat-fab.is-open{display:none}
  /* значки шапки чата — единственный выход с экрана на телефоне: 36px пальцу мало, поднимаем до 44 */
  .chat-head .btn-icon{width:var(--h);height:var(--h)}
  /* значок робота на узком экране отнимал место у подзаголовка, и тот ломался на три строки */
  .chat-head .icon-tile{display:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .my-row{flex-wrap:wrap}
  .my-actions{flex-direction:row;flex-wrap:wrap;align-items:center;width:100%;justify-content:flex-start}
  /* вкладки переносятся на вторую строку — линия идёт под каждым рядом, а не одна под нижним */
  .tabs{flex-wrap:wrap;overflow-x:visible;gap:0;border-bottom:none}
  .tabs a{padding:10px 12px;font-size:15px;margin-bottom:0;border-bottom:none;box-shadow:inset 0 -1px 0 var(--line)}
  .tabs a.on{box-shadow:inset 0 -3px 0 var(--g600);background:var(--mist)}
  .seg-sm > *{height:36px}
  /* строка-карточка таблицы: кнопки действий — под палец и не вплотную друг к другу */
  .table-cards td .btn-sm,.table-cards td .soc-btn.btn-sm{min-height:var(--h)}
  .table-cards td:last-child:not([data-label]) > div{display:flex;flex-wrap:wrap;gap:8px}
  .chats-grid[data-view="thread"]{height:calc(100dvh - 58px - 68px - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom))}
  .gallery-main.gallery-empty,.gallery-empty{height:120px}
  .listing-layout{padding-bottom:8px}
  /* таблица → карточки */
  .table-cards,.table-cards tbody{display:block;width:100%}
  .table-cards thead{display:none}
  .table-cards tr{display:block;border:1px solid var(--line2);border-radius:var(--r-lg);padding:10px 14px;margin-bottom:10px;background:#fff}
  .table-cards td,.table-cards.otable td,.table-cards.rtable td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;border:none;text-align:right!important;white-space:normal!important}
  .table-cards td[data-label]::before{content:attr(data-label);color:var(--ink2);font-size:14px;font-weight:500;text-align:left;flex:none}
  .table-cards td:not([data-label]){display:block;text-align:left!important}
  .table-cards td:first-child:not([data-label]){font-weight:600;padding-bottom:6px}
  .table-cards td:last-child:not([data-label]){padding-top:8px}
  .table-cards tr.orow-edit{background:var(--mist)}
  .table-cards tr.orow-edit td{background:transparent}
  .table-cards tr[hidden]{display:none}
  .office-grid{grid-template-columns:1fr;gap:16px}
}
@media(min-width:701px){
  .only-mobile{display:none!important}
}
@media(max-width:560px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pcard{padding:10px}
  .thumb-card{height:120px}
  .row,.row-between{flex-wrap:wrap}
  .nowrap-row{flex-wrap:nowrap}
  .big-search{flex-wrap:wrap;padding:8px}
  .big-search > .ic{display:none}
  .big-search input{flex:1 1 100%;padding-left:6px}
  .big-search .btn{flex:1}
  .specs{grid-template-columns:1fr}
  .photos{grid-template-columns:repeat(3,1fr)}
  .home-hero{padding-top:12px}
  .cred{grid-template-columns:minmax(0,1fr) auto}
  .cred > :first-child{grid-column:1 / -1}
}
@media(max-width:420px){
  .hdr-top.has-search .brand .bname{display:none}
}

/* === AUTH === */
/* вход и регистрация */
.auth-reason{padding:14px 16px;font-size:15px;color:var(--ink);line-height:1.45}
.auth-reason .ic{margin-top:2px}
/* тарифы */
.tariff .tprice-per{font-size:15px;font-weight:600;color:var(--ink2);letter-spacing:0}
.tariff-hl{font-size:16px;font-weight:700;color:var(--g700)}
.tariff.popular{border-color:var(--g300)}
.tariff.popular.current{border-color:var(--g600)}
.adm-q{min-width:220px}
/* жалобы: комментарий — это слова человека, поэтому он отбит чертой, а не смешан с нашим текстом */
.adm-rep-comment{border-left:3px solid var(--line);padding-left:10px;color:var(--ink2)}
/* сообщения */
.dlg-ava{width:38px;height:38px;font-size:13px}
.dlg-ava-sm{width:36px;height:36px;font-size:13px}
.avatar.dlg-ava-sm{font-size:14px}
.dlg-unread{align-self:center}
.dlg-empty{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.dlg-head{padding:10px 14px;border-bottom:1px solid var(--line2);min-height:64px}
/* «Пожаловаться» в шапке переписки и форма жалобы под ней: форма не растягивает
   переписку — при нехватке места прокручивается сама */
.dlg-report{flex:none}
.dlg-report-box{flex:none;overflow-y:auto;max-height:60vh;padding:0 14px 12px;border-bottom:1px solid var(--line2)}
.dlg-note{margin:auto;text-align:center;max-width:280px}
.dlg-msgs .msg-day{margin-top:6px;font-weight:600}
.dlg-msgs .msg-day:first-child{margin-top:0}
.bubble-time{display:block;margin-top:2px;font-size:13px;line-height:1.2;text-align:right;color:var(--ink3)}
.bubble-out .bubble-time{color:rgba(255,255,255,.82)}
@media(max-width:800px){
  #wp-chats-back{width:auto;height:var(--h);padding:0 10px 0 4px;gap:2px;flex:none;margin-left:-6px}
}
@media(max-width:700px){
  .dlg-item{min-height:64px}
  .chat-input{padding:10px 12px}
  /* в шапке на телефоне тесно: «Назад» и «Пожаловаться» занимают первую строку,
     имя собеседника и объявление переезжают на вторую и читаются целиком */
  .dlg-head{flex-wrap:wrap;row-gap:2px;padding:6px 14px 8px}
  .dlg-head .dlg-ava-sm{display:none}
  .dlg-head > .grow{order:1;flex:1 0 100%}
  /* «Пожаловаться» — btn-sm, а это 36px: мимо такой кнопки палец промахивается.
     На телефоне поднимаем до 44px, оставляя её спокойной ghost-кнопкой. */
  .dlg-report{margin-left:auto;height:var(--h);padding:0 10px;gap:6px}
  /* решения по жалобам и тарифам администратор нередко принимает с телефона:
     «Отменить решение», «Заблокировать продавца» и соседи — под палец, 44px.
     Селекты тарифа и срока поднимаем вместе с ними: в одной строке высоты равные. */
  .adm-row .btn-sm,.adm-row .select-sm{height:var(--h)}
  .adm-row .btn-sm{padding:0 12px}
  /* на телефоне форма жалобы занимает место переписки целиком: полоска сообщений
     в сорок пикселей всё равно нечитаема, а «Отмена» возвращает переписку сразу */
  .chats-grid[data-view="thread"]:has(.dlg-report-box .report-box:not(.is-done)) .dlg-msgs{display:none}
  .dlg-report-box{flex:1 1 auto;max-height:none}
}
@media(max-width:560px){
  /* код отправлен: почта во всю ширину, отсчёт «Снова через 59 с» — строкой ниже */
  .auth-email-row:has(input[readonly]){flex-wrap:wrap}
  .auth-email-row:has(input[readonly]) .btn{width:100%}
}

/* === MAIN === */
/* аватар и логотип продавца: 44px — в карточке объявления, 64px — на странице продавца */
.ava-44{width:44px;height:44px;font-size:15px}
.ava-64{width:64px;height:64px;font-size:22px}
.skel-gallery{height:300px}
.main-back{margin-left:-12px;padding:0 12px}
/* сортировка в поиске — по ширине текста, высота как у кнопки «Фильтры». На 360px строка
   «Фильтры 1 + сортировка» шире экрана: строка не шире родителя, «Фильтры» не сжимается,
   а сжимается сортировка */
.s-sort{width:auto;min-width:0;flex:0 1 auto}
.s-tools{min-width:0;max-width:100%}
.s-tools .filters-toggle{flex:none}
@media(max-width:400px){
  /* «Сначала дешёвые» целиком влезает рядом с «Фильтры 1» только с узкими полями */
  .s-tools{gap:6px}
  .s-tools .filters-toggle{padding:0 12px}
  .s-sort{padding-left:10px;padding-right:28px;background-position:right 8px center}
}
/* «Показать N объявлений» — только когда фильтры раскрываются полотном */
.filters-apply{display:none}
.filters-toggle .badge{height:20px;padding:0 7px}
/* пустая выдача сама даёт «Сбросить фильтры» — вторая такая же кнопка в боковой панели не нужна
   (ниже 900px панель свёрнута в кнопку «Фильтры», там дубля нет) */
@media(min-width:901px){
  .search-layout.is-empty #s-reset{display:none}
}
/* документы: нумерованные пункты */
.legal-list{list-style:none;counter-reset:legal;display:flex;flex-direction:column;gap:18px}
.legal-list li{counter-increment:legal;position:relative;padding-left:30px}
.legal-list li::before{content:counter(legal) ".";position:absolute;left:0;top:0;font-weight:700;color:var(--g600);line-height:1.3}
.legal p{max-width:68ch}
/* «Помощь»: вопрос — строка во всю ширину со стрелкой справа, ответ раскрывается на месте */
.faq details{border-top:1px solid var(--line2)}
.faq details:first-child{border-top:0}
.faq summary{display:flex;gap:12px;align-items:center;justify-content:space-between;
  min-height:var(--h);padding:10px 0;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.faq summary:hover{color:var(--g700)}
.faq summary .ic{flex:none;color:var(--g600);transition:transform .15s}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .faq-a{padding:0 0 14px;color:var(--ink2)}
/* длинный ответ-инструкция («Программа WayParts для Windows»): абзацы и шаги по номерам */
.faq .faq-a p + p,.faq .faq-a ol + p{margin-top:8px}
.faq .faq-a p + ol{margin-top:4px}
.faq .faq-a ol{padding-left:1.6em}
.faq .faq-a li + li{margin-top:4px}
.help-ok{color:var(--g600)}
/* «Этот же номер у других продавцов»: строка-ссылка — название, кто продаёт и город,
   цена прижата вправо и не переносится */
.also-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px;
  align-items:center;min-height:var(--h);padding:10px 0;border-top:1px solid var(--line2);color:var(--ink)}
.also-row:first-child{border-top:0;padding-top:0}
.also-row:hover .also-t{color:var(--g700)}
.also-t{grid-column:1;grid-row:1;font-weight:600}
.also-meta{grid-column:1;grid-row:2}
.also-p{grid-column:2;grid-row:1/span 2;align-self:center;text-align:right;white-space:nowrap}
/* «Доставка в другой город» и «Только в наличии» в фильтрах, причина жалобы и
   поля запроса магазинам: строка выбора — не ниже 44px, её удобно нажать пальцем */
.filters .check,.report-box .check{min-height:var(--h);align-items:center}
/* последняя строка формы прижата к кнопке, а не висит в воздухе */
.report-box .field:last-of-type,#s-ask-box .field:last-of-type{margin-bottom:12px}
/* «Подходит для моей машины»: подпись и по чипу на каждую машину гаража.
   Нажатый чип залит — видно с одного взгляда, какая машина выбрана. */
.gar-row{align-items:center}
.gar-chip.on{background:var(--g700);border-color:var(--g700);color:#fff}
.gar-chip.on:hover{background:var(--g800);border-color:var(--g800);color:#fff}
.gar-chip.on .ic{color:#fff}
/* пометка на объявлении: длинное название машины переносится, а не уезжает за край */
.fits-me{display:inline-flex;align-items:flex-start;gap:7px;max-width:100%;padding:7px 12px;
  border-radius:var(--r);background:var(--g100);color:var(--g800);font-size:14px;font-weight:600;line-height:1.35}
.fits-me .ic{flex:none;margin-top:1px}
/* Знак «Проверен» рядом с названием магазина (сам знак — .badge-verified из ui.js).
   Подсказка висит на нём атрибутом title, но на телефоне наведения не существует,
   поэтому та же фраза стоит строкой рядом: длинная строка переносится, а галочка
   остаётся на первой строке и не уезжает за край. */
.vmark-note{display:flex;align-items:flex-start;gap:7px;line-height:1.35}
.vmark-note .ic{margin-top:2px}
@media(max-width:900px){
  .filters-apply{display:inline-flex}
}
@media(max-width:700px){
  /* чипы и мелкие кнопки на витрине — не ниже 44px под палец */
  .main-tap{height:var(--h)}
  /* «Поделиться» и «Пожаловаться» под карточкой продавца: btn-sm — это 36px,
     мимо такой кнопки палец промахивается. На телефоне поднимаем до 44px, оставаясь
     спокойными ghost-кнопками — главной на экране остаётся «Написать».
     Правило узкое, по контейнеру: остальные btn-sm на витрине не трогаем. */
  .listing-acts .btn-sm{height:var(--h);padding:0 14px}
  /* «Отмена» и «Закрыть» в самой форме жалобы — тем же ростом, что и кнопка,
     которая её открыла: иначе на телефоне человек не может выйти из формы с первого раза */
  .report-box .btn-sm{height:var(--h);padding:0 14px}
  /* номер телефона в липкой панели шире «Телефон»: даём ему место по тексту */
  .sticky-actions > a.btn[href^="tel:"]{flex:0 0 auto;padding:0 12px}
  .legal-list li{padding-left:26px}
  /* «Отправить обращение» на телефоне — во всю ширину, как «Опубликовать» в форме подачи */
  #help-send{width:100%}
}

/* === PROFILE === */
/* профиль частника и магазина, «Разместить объявление» / «Добавить товар» (#/sell) */

/* звёздочка обязательного поля — заметна, но не кричит */
.req{color:var(--danger);font-weight:700}
/* пары полей в формах профиля и подачи: по вертикали ритм такой же, как у одиночных .field */
.pf-grid{gap:0 16px}
/* блок «Склад» в форме товара — карточка, а не системная рамка браузера
   (нижние 14px даёт margin последнего .field) */
.sell-stock{padding:16px 16px 2px;margin:2px 0 14px}
/* плашка черновика над формой */
.draft-note{padding:12px 14px;margin-bottom:16px}
.draft-note .ic{display:inline-block;vertical-align:-3px}
/* ---- уведомления в настройках ---- */
/* состояние Telegram: значок, строка и одно действие справа */
.notify-state{display:flex;align-items:center;gap:10px;padding:12px 14px}
.notify-state > .ic{flex:none;color:var(--g700)}
/* переключатели: строка ниже 44px неудобна пальцу, поэтому подпись и подсказка в столбик */
.notify-switches{margin-top:14px;border-top:1px solid var(--line2)}
.notify-check{min-height:var(--h);align-items:center;padding:8px 0}
.notify-check .tiny{display:block;margin-top:2px}
.notify-check input:disabled{cursor:not-allowed}
.notify-check input:disabled ~ span{color:var(--ink3)}
/* роли: «Как покупателю» · «Как магазину» · «Как администратору» · «Куда присылать».
   Заголовок рисуется только когда групп больше одной, поэтому отступ висит на нём,
   а не на группе — у единственной группы лишнего воздуха не появляется. */
.notify-grouped .notify-group + .notify-group{border-top:1px solid var(--line2)}
.notify-group-h{margin:12px 0 2px;color:var(--ink2)}

/* ---- запасная разметка подсказки «Настройте магазин» (основную рисует «Склад») ---- */
.onb-list{list-style:none;margin:0;padding:0}
.onb-step{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line2)}
.onb-step:first-child{border-top:0}
.onb-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--g700);font-size:13px;font-weight:600}

/* ---- «Как покупатель получит товар»: форма товара и настройки магазина ---- */
/* карточка блока — как «Склад» в той же форме (нижние 14px даёт margin последнего .field) */
.ship-box{padding:16px 16px 2px;margin:2px 0 14px}
.ship-ways{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
/* строка ниже 44px неудобна пальцу, поэтому подпись и подсказка в столбик */
.ship-way{min-height:var(--h);align-items:center;padding:8px 0}
.ship-way + .ship-way{border-top:1px solid var(--line2)}
.ship-way .tiny{display:block;margin-top:2px}
/* «Через сколько дней привезёте» — короткое поле: двузначное число не просит всю ширину */
.ship-days{max-width:280px}

/* ---- «Мой гараж»: до трёх машин в профиле ---- */
.garage-list{display:grid;gap:12px}
/* машина — карточка в карточке: видно, где кончается одна и начинается вторая
   (нижние 14px даёт margin последнего .field) */
.garage-car{border:1px solid var(--line2);border-radius:var(--r);padding:12px 14px 0;background:var(--mist)}
.garage-head{margin-bottom:10px}
.garage-head .h4{margin:0}
/* подсказка про VIN — под полями, без лишнего отступа снизу */
.garage-vin{margin:0 0 12px}
.garage-empty{margin:0}
.garage-acts{align-items:center}
/* «Подставить из гаража» у поля «Подходит для»: кнопка уходит под поле, когда не помещается */
.fits-row > .input{flex:1 1 220px;min-width:0}
.garage-picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* ---- знак «Проверен» в профиле магазина ---- */
/* Знак получен — одна зелёная строка под формой: это подтверждение, а не список дел,
   поэтому не карточка и без действий. */
.ver-ok{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;
  background:var(--g100);border:1px solid var(--g200);border-radius:var(--r-lg)}
.ver-ok > .badge{flex:none;margin-top:1px}
/* Знака нет — шесть условий по строке; ростом с онбординг карточка не спорит:
   ни полоски прогресса, ни номеров шагов, ни кнопки. */
.ver-card{margin-top:16px}
/* значок и заголовок — одной строкой: на узком экране .row переносит их, и значок
   повисает над заголовком отдельной строкой */
.ver-card .h4{margin:0;flex-wrap:nowrap}
.ver-list{list-style:none;margin:0;padding:0}
.ver-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line2)}
.ver-row:first-child{border-top:0}
/* галочка или пустой кружок — видно, сколько уже сделано, даже не читая подписей */
.ver-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;
  border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--g600)}
.ver-mark-on{background:var(--g100);border-color:var(--g200)}
/* пункт «Заполнены адрес и график работы» на самой «Странице магазина» — кнопка, а не ссылка
   на себя: ставит курсор в пустое поле. Выглядит как соседние ссылки (подчёркивание — button.green:hover) */
.ver-focus{padding:0;text-align:left;line-height:inherit}

/* ---- сотрудники магазина: список у владельца, карточка «кто вошёл» у сотрудника ---- */
/* кто сейчас за компьютером — рядом с бейджем «Магазин» в шапке профиля */
.staff-who{gap:4px}
.staff-me > .btn{flex:none}
/* строка сотрудника: имя, роль и состояние слева, четыре действия справа */
.staff-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-top:1px solid var(--line2)}
.staff-row:first-child{border-top:0}
.staff-acts{flex:none;justify-content:flex-end}
/* «Что может каждый»: три абзаца подряд через линию — список, а не таблица */
.staff-role{padding:10px 0;border-top:1px solid var(--line2)}
.staff-role:first-child{border-top:0}
.staff-role:last-child{padding-bottom:0}
/* код из четырёх цифр не просит всю ширину поля */
.staff-pin{max-width:160px}
/* «Код открывает все права этого сотрудника» — не серая сноска, а предупреждение:
   четыре цифры управляющего равны доступу ко всем закупкам и прибыли */
.staff-pin-warn{color:var(--amber)}

/* ---- «Мои запросы»: заявки «Ищу запчасть» и ответы магазинов ---- */
.req-list{display:grid;gap:12px}
.req-offers{margin-top:12px;border-top:1px solid var(--line2)}
.req-offer{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2)}
.req-offer:last-child{border-bottom:0;padding-bottom:0}
.req-offer-act{display:flex;align-items:center;gap:10px;flex:none}
.req-alert{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line2)}
.req-alert:first-child{border-top:0}

/* ---- касса и чеки: выбор режима ----
   Три строки во всю ширину с пояснением под каждой: человек выбирает не слово,
   а способ работы. Разметка та же, что у выбора сотрудника на кассе (.o-who). */
.fis-modes .fis-mode{align-items:flex-start;padding:10px 12px}
.fis-mode input{margin-top:3px}
.fis-mode-note{display:block;margin-top:2px;line-height:1.35}

@media(max-width:760px){
  /* вкладки профиля — сеткой, а не лентой с прокруткой вбок: пять вкладок в ряд на 701–760 px
     не помещались. Подписи переносятся, в ряд — сколько войдёт */
  .profile-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:0 4px;overflow-x:visible}
  .profile-tabs a{justify-content:center;text-align:center;white-space:normal;padding:8px 6px;line-height:1.25}
}
@media(max-width:920px){
  /* шесть вкладок «Настроек» владельца (с «Тарифом» и «Переездом») — около 800 px шрифтом Windows;
     системный шрифт macOS или Linux шире, и в ряд они уже 920 px не помещались бы — лента уехала бы
     вбок. Два ряда по три — явные колонки: auto-fit оставлял строку с одним пунктом («Аккаунт»).
     На 540 px и уже — три ряда по два (accept:r2): по три в ряд «Страница магазина» и «Касса и чеки» ломались в две строки */
  .profile-tabs.profile-tabs-6{display:grid;grid-template-columns:repeat(3,1fr);gap:0 4px;overflow-x:visible}
  .profile-tabs.profile-tabs-6 a{justify-content:center;text-align:center;white-space:normal;padding:8px 6px;line-height:1.25}
}
@media(max-width:700px){
  /* «Настройки» владельца: четыре вкладки — два ряда по две («Аккаунт» не остаётся один) */
  .profile-tabs.profile-tabs-2x2{grid-template-columns:repeat(2,1fr)}
  /* главное действие формы подачи — во всю ширину экрана */
  .sell-actions{flex-direction:column;align-items:stretch}
  .sell-actions > .btn{width:100%}
  .sell-stock{padding:14px 14px 0}
  .ship-box{padding:14px 14px 0}
  /* цена и «Написать» на узком экране — отдельной строкой под названием магазина */
  .req-offer{flex-direction:column;align-items:stretch;gap:8px}
  .req-offer-act{justify-content:space-between}
  .garage-car{padding:12px 12px 0}
  /* «Убрать» у машины — btn-sm, а это 36px: на телефоне блок гаража стоит и на
     витрине, где под палец нужно 44px, как у соседних кнопок гаража */
  .garage-head .btn-sm{height:var(--h);padding:0 12px}
  /* «Подставить из гаража», «Изменить»/«Убрать» у сохранённой машины — тоже 44px */
  .garage-picks .btn-sm,.garage-sum-acts .btn-sm{height:var(--h);padding:0 12px}
  /* сотрудник: четыре действия уходят под имя и делят строку поровну; 36px кнопки
     под палец мало, поэтому на телефоне они вырастают до 44px */
  .staff-row{flex-direction:column;gap:10px;padding:14px}
  .staff-acts{width:100%}
  .staff-acts > .btn{flex:1 1 120px;height:var(--h);padding:0 10px}
  /* «Выйти из аккаунта» в карточке сотрудника — отдельной строкой во всю ширину */
  .staff-me{flex-direction:column;align-items:stretch}
  .staff-me > .btn{width:100%}
}
@media(max-width:560px){
  /* «Подставить из гаража» — во всю ширину под полем: в обрез рядом с полем не влезает */
  .fits-row > .btn{width:100%}
  /* «Добавить машину» и «Сохранить гараж» — одна под другой, а не лесенкой */
  .garage-acts > .btn{flex:1 1 100%}
  /* кнопки шапки профиля: занимают строку целиком, а не висят лесенкой слева */
  .profile-acts{width:100%}
  .profile-acts > .btn{flex:1 1 140px}
  /* «Подключить Telegram» на узком экране — отдельной строкой во всю ширину, а не в обрез */
  .notify-state{flex-wrap:wrap}
  .notify-state > .btn{width:100%}
  /* длинная строка остаётся рядом со значком, а не уезжает под него, оставив значок одного */
  .notify-state > .grow{flex:1 1 0}
  /* знак «Проверен»: бейдж — строкой над текстом, иначе рядом с ним пустует полстраницы */
  .ver-ok{flex-direction:column;gap:8px}
}

/* === OFFICE === */
/* ---- подсказка «Настройте магазин: N из 5» ---- */
.o-setup-bar{height:8px;margin:12px 0 6px;border-radius:99px;background:var(--line2);overflow:hidden}
.o-setup-bar > span{display:block;height:100%;border-radius:99px;background:var(--g500);transition:width .25s}
.o-setup-list{list-style:none;margin:0;padding:0}
.o-setup-step{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line2)}
.o-setup-step:first-child{border-top:none}
.o-setup-mark{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:1px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink3);font-size:13px;font-weight:600}
.o-setup-step.is-done .o-setup-mark{background:var(--g500);border-color:var(--g500);color:#fff}
.o-setup-step.is-now .o-setup-mark{border-color:var(--g500);color:var(--g700)}
.o-setup-step.is-done .o-setup-title{color:var(--ink2)}
.o-setup-step.is-now .o-setup-title{font-size:16px}
/* строка подсказки на «Кассе» телефона: текст и крестик в один ряд, без «Скрыть» отдельной
   строкой — иначе карточка росла до 135–158px, и поле «Номер детали или название» у владельца
   уезжало под «Оформить продажу» и нижнюю панель */
@media(max-width:700px){
  .card.o-setup-line{flex-wrap:nowrap;padding:8px 4px 8px 14px;margin-bottom:12px;font-size:14px;line-height:1.4}
  .o-setup-line > div{min-width:0}
  .o-setup-line .btn{flex:none;width:var(--h);height:var(--h);padding:0}
  .o-setup-line .btn span{display:none}
}
/* на 360px и уже — без «Следующий шаг:»: две строки текста вместо трёх (шаг — зелёная ссылка) */
@media(max-width:420px){
  .o-setup-next{display:none}
}

/* ---- сотрудники: смена на кассе, окно смены, отказ по правам ---- */
/* строка «Смена: Иван (продавец)»: имя слева, «Сменить сотрудника» справа */
.o-shift{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 14px}
.o-shift > .grow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
/* окно поверх кассы: тот же тёмный фон, что у сканера, но с белой карточкой */
.o-modal{position:fixed;inset:0;z-index:120;background:rgba(5,31,32,.6);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.o-modal-card{width:min(100%,520px);max-height:calc(100dvh - 40px);overflow:auto;margin:auto}
/* выбор сотрудника: строки во всю ширину, палец попадает в любую точку строки */
.o-who{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.o-who-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-top:1px solid var(--line2);cursor:pointer}
.o-who-item:first-child{border-top:none}
.o-who-item:hover{background:var(--mist)}
.o-who-item input{width:18px;height:18px;flex:none;accent-color:var(--g600)}
/* четыре цифры кода набирают вслепую — поле крупное и не во всю ширину карточки */
.o-pin{max-width:180px;letter-spacing:.3em;font-size:20px;text-align:center}
/* «сюда нельзя» вместо списка: не ошибка загрузки, поэтому спокойный, а не красный */
.o-denied{margin-top:12px}

/* ---- касса: способ оплаты, услуга, телефон покупателя ---- */
/* три способа оплаты делят ширину чека поровну: на телефоне это одна строка без переносов */
.o-pay-seg{width:100%}
.o-pay-seg > *{flex:1;min-width:0;padding:0 8px}
.o-svc-note{align-self:center}
.o-svc-fields{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:0 12px}
.o-svc .field{margin-bottom:10px}
/* «услуга» в строке чека — там, где у товара стоит номер детали */
.o-svc-tag{color:var(--g700);font-weight:600}

/* ---- касса: результаты поиска ---- */
.o-res{gap:10px}
.o-res > .grow{min-width:0}
.o-res-num{flex:none}
.o-res-stock{display:block;font-size:14px;color:var(--ink2);white-space:normal}
.o-can{cursor:pointer}
.o-can:hover{background:var(--mist)}
.o-search{min-width:200px}
/* строка чека: подпись, поле и ₽ — одной строкой */
.cprice-wrap{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.cprice-wrap > *{flex:none}
/* липкая панель кассы: подпись над суммой */
.o-sticky-total{display:flex;flex-direction:column;justify-content:center;line-height:1.2;flex:none;margin-right:6px}
/* сканер: единственная подсказка поверх тёмного оверлея */
.o-scan-hint{color:#fff;text-align:center;max-width:min(92vw,520px)}

/* ---- склад ---- */
.o-form{max-width:780px}
.o-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,210px));gap:0 16px}
.o-fields .field{margin-bottom:12px}
.o-fields .o-wide{grid-column:1/-1;max-width:440px}
.o-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.o-link{font:inherit;text-decoration:underline;text-underline-offset:2px}
.o-empty-line{padding:10px 0}
.o-moves{display:flex;flex-direction:column}
.o-move{padding:7px 0;border-top:1px solid var(--line2);color:var(--ink2)}
.o-move:first-child{border-top:none}
/* колонка «Товар» в таблицах склада и прайса не сжимается числами справа */
@media(min-width:701px){
  .o-stock td:first-child,.o-offers td:first-child{min-width:220px}
}

/* ---- продажи: журнал ---- */
.o-sale{border-top:1px solid var(--line2)}
.o-sale:first-child{border-top:none}
.o-sale > .orow{width:100%;border-top:none;padding:10px 0}
.orow-btn{text-align:left;cursor:pointer}
.orow-btn:hover{background:var(--mist)}
.o-line{display:block;margin-top:2px}
.o-chev{flex:none;transition:transform .15s}
[aria-expanded="true"] .o-chev{transform:rotate(180deg)}
.o-profit b{color:var(--ink)}
/* честная оговорка под прибылью — отдельной строкой, а не хвостом к сумме */
.o-profit-note{display:block;margin-top:2px}
/* «В долг» — отдельная строка сводки: это не итог периода, а деньги, которые должны сейчас */
.o-debt-line{border-top:1px solid var(--line2);padding-top:8px}
.o-export-note{align-self:center;max-width:520px}

/* ---- продажи: долги ---- */
.o-debts{margin-top:2px}
.o-debt{gap:10px;border-top-color:var(--amber-line)}
.o-debt:first-child{border-top:none}
.o-debt > .grow{min-width:0}
.o-debt-sum{flex:none}
.o-debt-btn{flex:none;background:#fff}

/* ---- где купить: три источника цены — три блока ---- */
.o-group{margin-top:20px;padding-top:16px;border-top:1px solid var(--line2)}
.o-group:first-child{margin-top:0;padding-top:0;border-top:none}
.o-offer{align-items:flex-start}
.o-contacts{display:flex;flex-wrap:wrap;gap:6px;flex:none}

/* ---- опт ---- */
.o-reasons{margin:6px 0 0 22px;list-style:disc}
.o-preview td,.o-preview th{font-size:14px}

/* ---- цены по наценке и товары со склада на опт (js/office-pricing.js) ---- */
/* окно «Цены по наценке»: таблица примеров «Было → Станет» — шире обычного окна */
.wh-sheet-card.op-sheet{width:min(100%,720px)}
/* ступени наценки: «до [500] ₽ — [60] % ×», у последней «дороже — [30] %»; поля процентов — одной колонкой */
.op-tiers{display:flex;flex-direction:column;gap:8px}
.op-tier{display:grid;grid-template-columns:32px 110px 16px 16px 72px 16px 36px;align-items:center;gap:6px}
.op-tier[data-last] > .op-tier-w{grid-column:1/4}
.op-tier-w{font-size:14px;color:var(--ink2)}
.op-tier-u{font-size:14px;color:var(--ink3);text-align:center}
.op-tier .op-num{height:var(--h-sm);padding:0 10px;text-align:right}
.op-round{max-width:220px;margin-bottom:0}
.op-example{margin-top:10px;color:var(--ink2)}
/* режимы: подпись и пояснение столбиком рядом с кружком */
.op-mode > span{display:flex;flex-direction:column}
.op-mode-sub{margin-top:1px}
/* строка «Вернуть прежние цены» над списком «Склада» */
.op-undo{align-items:center;color:var(--ink2)}
/* «Опт»: процент со знаком «%» рядом с полем */
.op-unit{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink3)}
.o-fields.op-wrule{grid-template-columns:repeat(auto-fit,minmax(150px,200px))}
/* поиск и «Все / На опте / Не на опте» — одной строкой, как поиск и папки «Склада» */
.op-sp-tools .o-search{flex:1 1 280px;width:auto}
/* список товаров склада: колонка галочек первая — «Товар» вторая и всё равно по левому краю, с переносом */
.otable.op-stock th:nth-child(2),.otable.op-stock td:nth-child(2){text-align:left;white-space:normal}
.otable.op-stock td:nth-child(2){min-width:200px}
.op-stock tr.op-on > td{background:var(--mist)}
.op-wp-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-top:2px}
.op-own-badge{height:20px;padding:0 7px;vertical-align:1px}
/* своя оптовая цена — поле прямо в строке, «Сохранить» и «Отмена» рядом */
.op-own{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
.op-own-in{width:110px;height:var(--h-sm);text-align:right}
.op-own-err{flex:1 1 100%;text-align:right;white-space:normal}
@media(max-width:700px){
  .op-tier{grid-template-columns:24px minmax(0,1fr) 14px 14px 64px 16px var(--h)}
  .op-tier .op-num{height:var(--h)}
  .op-tier-x{width:var(--h);height:var(--h)}
  .op-round{max-width:none}
  .o-fields.op-wrule{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* «от закупки +» / «от цены продажи −» — во всю строку: в половине строки знак обрезался */
  .o-fields.op-wrule > .field:first-child{grid-column:1/-1}
  .op-own-in{height:var(--h);flex:1 1 120px}
  .op-own,.op-wp-acts{justify-content:flex-start}
  .op-own-err{text-align:left}
  .op-sp-tools .o-search{min-width:0;flex:1 1 100%}
  .op-sp-tools .seg{width:100%}
  .op-sp-tools .seg > *{flex:1;padding:0 8px}
  .op-stock tr.op-on > td{background:transparent}
  .op-stock tr.op-on{border-color:var(--g300)}
}

/* ---- «Где купить»: что заказать (классы o-buy — с тех пор, как список жил в «Закупках») ---- */
/* «рекомендуем взять» правится прямо в таблице: поле ростом со строку, число — к правому краю */
.o-buy-qty{width:96px;text-align:right}
/* 0 — «не берём»: строка остаётся на виду, но видно, что она вычеркнута */
.o-buy-skip td{opacity:.55}
/* в последней колонке не только цена, но и имя поставщика — ему нужен перенос */
.o-buy td:last-child{white-space:normal}
.o-buy-note{align-self:center;max-width:520px}

/* ---- закупки: приход по накладной ---- */
/* Шапка и строки — один шаблон колонок; колонка «×» на компьютере есть всегда, у единственной
   строки — пустая. Шапка не знает, сколько строк: когда одна строка теряла колонку «×», подписи
   «Кол-во» и «Закупочная цена за шт» стояли на 56 px левее своих полей. Новая колонка — и в шапку,
   и в строку, тем же шаблоном (класс варианта — P.invCls, один на шапку и строки).
   Управляющему и владельцу — ещё «Цена продажи» (поле, под ним «сейчас 1 200 ₽»); 170 px у закупки —
   чтобы подпись «Закупочная цена за шт» не ломалась на две строки. */
.o-inv-head,.o-inv-row{display:grid;grid-template-columns:minmax(0,1fr) 100px 170px 150px var(--h);gap:0 12px;align-items:start}
.o-inv-head .label{margin-bottom:4px}
.o-inv-row{padding:12px 0;border-top:1px solid var(--line2)}
.o-inv-row:first-child{border-top:none}
.o-inv-chosen{padding:2px 0}
.o-inv-err{grid-column:1/-1}
/* одна строка — убирать нечего: пустая клетка «×» не рисуется (на компьютере колонку держит шаблон,
   на телефоне у единственной строки места под «×» нет) */
.o-inv-del:empty{display:none}
/* закупку видит, а карточку товара не меняет — без колонки цены продажи */
.o-inv-head.o-inv-noprice,.o-inv-row.o-inv-noprice{grid-template-columns:minmax(0,1fr) 110px 170px var(--h)}
/* продавцу закупочную цену не показывают — ни закупки, ни цены продажи, оставшиеся раздвигаются */
.o-inv-head.o-inv-nocost,.o-inv-row.o-inv-nocost{grid-template-columns:minmax(0,1fr) 110px var(--h)}
/* найденные товары — списком под полем поиска, как результаты в кассе */
.o-inv-res{margin-top:8px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--r);max-height:280px;overflow:auto}
.o-inv-res:empty{display:none}
.o-inv-res .orow{gap:10px}
.o-inv-none{padding:8px 0}
/* с ценой продажи на планшете пять колонок в ряд оставляли товару 110–150 px: название и «Ячейка»
   обрезались. Здесь товар — во всю строку («×» справа), под ним кол-во, закупка и цена продажи, каждое
   со своей подписью, как на телефоне; шапка с подписями не нужна */
@media(min-width:701px) and (max-width:900px){
  .o-inv-head:not(.o-inv-noprice):not(.o-inv-nocost){display:none}
  .o-inv-row:not(.o-inv-noprice):not(.o-inv-nocost){grid-template-columns:100px 170px 150px minmax(0,1fr) var(--h);grid-template-areas:"t t t t x" "q c p . .";gap:12px}
  .o-inv-row:not(.o-inv-noprice):not(.o-inv-nocost) .only-mobile{display:block!important}
  .o-inv-row:not(.o-inv-noprice):not(.o-inv-nocost) > .o-inv-item{grid-area:t}
  .o-inv-row:not(.o-inv-noprice):not(.o-inv-nocost) > .o-inv-qty{grid-area:q}
  .o-inv-row:not(.o-inv-noprice):not(.o-inv-nocost) > .o-inv-cost{grid-area:c}
  .o-inv-row:not(.o-inv-noprice):not(.o-inv-nocost) > .o-inv-price{grid-area:p}
  .o-inv-row:not(.o-inv-noprice):not(.o-inv-nocost) > .o-inv-del{grid-area:x}
}

/* ---- запросы покупателей ---- */
/* счётчик новых заявок у вкладки: тот же зелёный, что у бейджей, но ростом с текст вкладки */
.o-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--g500);color:#fff;font-size:13px;font-weight:700;line-height:1}
.o-req{border-top:1px solid var(--line2);padding:12px 0}
.o-req:first-child{border-top:none;padding-top:0}
.o-req-top{display:flex;align-items:flex-start;gap:12px}
.o-req-side{flex:none}
.o-reqs .o-fields{grid-template-columns:repeat(auto-fit,minmax(150px,200px))}

/* ---- заказы под клиента ---- */
/* шесть состояний в одну строку не встают даже на ноутбуке — переносим внутри сегмента */
.o-ord-seg{flex-wrap:wrap;max-width:100%}
/* сколько заказов в этом состоянии — числом рядом с подписью, без отдельного бейджа */
.o-seg-n{margin-left:6px;color:var(--ink3);font-weight:700}
.seg > *.on .o-seg-n{color:var(--g100)}
.seg > *.on .o-tab-count{background:#fff;color:var(--g800)}
.o-order{border-top:1px solid var(--line2);padding:12px 0}
.o-order:first-child{border-top:none;padding-top:0}
.o-order-top{display:flex;align-items:flex-start;gap:12px}
/* три действия в строке заказа стоят столбиком: подписи у них длинные */
.o-order-side{flex:none;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.o-orders .o-fields{grid-template-columns:repeat(auto-fit,minmax(150px,200px))}
/* строка заказа в чеке — такая же зелёная пометка, как у услуги */
.o-order-tag{display:inline-flex;align-items:center;gap:3px;color:var(--g700);font-weight:600}
/* «К доплате» отделено от итога: кассир берёт с покупателя именно эту сумму */
.o-due-row{margin-top:6px;padding-top:6px;border-top:1px solid var(--line2)}

/* ---- где купить: закрытые цены коллег ---- */
.o-lock .bold{display:flex;align-items:center;gap:6px}
.o-offer-lock{color:var(--ink2)}
/* «••• ₽» — серым: это не цена, а её отсутствие */
.o-lock-price{color:var(--ink3);font-weight:600;letter-spacing:.06em;white-space:nowrap}

/* ---- фискальный чек (54-ФЗ): состояние в кассе и в журнале продаж ----
   Три вида одной строки: чек пробит (зелёная), чек идёт (спокойная), чек не
   пробит (красная). Цвета — те же три, что у .ai-note: новых заводить незачем. */
.fis{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:10px 12px;border-radius:var(--r);
  background:var(--mist);border:1px solid var(--g200);color:var(--g800);font-size:14px}
.fis-ok{background:var(--g100);border-color:var(--g200)}
.fis-bad{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.fis > .fis-ic{margin-top:2px}
.fis > .grow{min-width:0}
.fis-t{font-weight:600}
/* причина отказа и реквизиты чека: длинные строки переносятся, а не режутся */
.fis-sub{overflow-wrap:anywhere}
.fis-act{flex:none}
/* значок состояния в строке журнала: ростом с остальные бейджи */
.fis-badge.fis-ok{background:var(--g100);color:var(--g800)}
.fis-badge.fis-wait{background:var(--mist);color:var(--ink2);border:1px solid var(--line)}
.fis-badge.fis-bad{background:var(--danger-bg);color:var(--danger)}

/* узкая колонка чека (телефон и окно программы WayParts для Windows от 900px, minWidth 900):
   цена — подпись над полем, ₽ рядом с полем, иначе строка чека не помещается */
@media(max-width:1000px){
  .crow{column-gap:8px}
  .cprice-wrap{display:grid;grid-template-columns:auto auto;grid-template-areas:"l l" "i c";gap:2px 4px;justify-content:start;align-items:center}
  .cprice-wrap > .tiny{grid-area:l}
  .cprice-wrap > .cprice{grid-area:i;width:64px;padding:0 6px}
  .cprice-wrap > .muted:not(.tiny){grid-area:c}
}
/* окно программы WayParts для Windows (minWidth 900): чек виден рядом с поиском */
@media(max-width:900px) and (min-width:701px){
  .office-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* в окне программы (900px) восемь вкладок не помещались в строку целиком: последняя
   уезжала под прокрутку. Отступы поменьше — все восемь видны сразу, высота та же */
@media(max-width:1000px) and (min-width:701px){
  #office-tabs a{padding:10px 11px}
}
/* склад в узком окне: без своей ширины колонка действий сжималась, пять кнопок
   вставали столбиком и строка товара вырастала до 225px — на экран помещалось три товара */
@media(max-width:1180px) and (min-width:701px){
  .o-stock td:first-child,.o-offers td:first-child{min-width:150px}
  .o-stock th:last-child,.o-stock td:last-child{width:300px}
  .o-stock .o-acts{justify-content:flex-start}
  .o-stock .o-acts .btn-sm{padding:0 9px;gap:5px}
  .o-stock td,.o-stock th{padding-left:6px;padding-right:6px}
  .o-stock td:first-child{padding-left:0}
  .o-stock td:last-child{padding-right:0}
}
@media(max-width:900px){
  /* долг: номер и покупатель на всю ширину, ниже сумма и «Оплачен» — как в результатах поиска */
  .o-debt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "s b";gap:8px 10px;align-items:center}
  .o-debt > .grow{grid-area:t}
  .o-debt > .o-debt-sum{grid-area:s}
  .o-debt > .o-debt-btn{grid-area:b;justify-self:end}
  /* результат поиска: название на всю ширину, ниже цена с остатком и «В чек» */
  .o-res{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "n b";gap:8px 10px;align-items:center}
  .o-res > .grow{grid-area:t}
  .o-res > .o-res-num{grid-area:n;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;text-align:left}
  .o-res > .btn{grid-area:b;justify-self:end}
  .o-res .clamp2{-webkit-line-clamp:3}
}
@media(max-width:700px){
  /* Смена на кассе: имя занимает строку целиком, «Сменить сотрудника» и
     «Войти владельцем» делят следующую и вырастают до 44px — на телефоне в них
     целятся пальцем, а btn-sm даёт 36px. */
  .o-shift > .grow{flex:1 1 100%}
  .o-shift .btn{flex:1 1 150px;height:var(--h);padding:0 12px}
  /* состояние фискального чека: кнопка «Повторить» — строкой под текстом и во всю
     ширину, а не жмётся к краю; рост 44px, в неё целятся пальцем */
  .fis{flex-wrap:wrap}
  .fis > .grow{flex:1 1 100%}
  .fis-act{flex:1 1 100%}
  .fis-act .btn{width:100%;height:var(--h)}
  /* поставщик в проценке: кнопки строкой под названием, а не рядом с ним */
  .o-offer{flex-wrap:wrap}
  .o-offer > .grow{flex:1 1 60%}
  .o-offer > .o-contacts{flex:1 1 100%;margin-top:2px}
  /* склад: действия строки товара — слева, как и остальное в карточке */
  .table-cards .o-acts{justify-content:flex-start}
  .o-fields{grid-template-columns:1fr}
  .o-fields .o-wide{max-width:none}
  /* переключатель панели импорта не должен вылезать за рамку */
  #imp-mode > *{min-width:0;padding:0 10px}
  /* услуга: название и цена столбиком, полями во всю ширину */
  .o-svc-fields{grid-template-columns:1fr}
  /* подпись у кнопки «Добавить услугу» и у выгрузки — отдельной строкой под кнопкой */
  .o-svc-note,.o-export-note{flex:1 1 100%;align-self:flex-start}
  /* заявка покупателя: кнопка ответа — строкой под текстом, иначе название сжимается до двух слов */
  .o-req-top{flex-wrap:wrap}
  .o-req-side{flex:1 1 100%}
  .o-reqs .o-fields{grid-template-columns:1fr}
  /* заказ под клиента: кнопки строкой под текстом, поля формы — в одну колонку */
  .o-order-top{flex-wrap:wrap}
  .o-order-side{flex:1 1 100%;flex-direction:row;flex-wrap:wrap}
  .o-orders .o-fields{grid-template-columns:1fr}
  /* накладная на телефоне: сверху товар (и «×» рядом с ним), ниже кол-во, закупка и цена продажи —
     каждое со своей подписью */
  .o-inv-row{grid-template-columns:minmax(0,1fr) var(--h);grid-template-areas:"t x" "q q" "c c" "p p";gap:12px}
  #bz-rows .o-inv-row:only-child{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "q" "c" "p"}
  /* без цены продажи или без закупки — меньше полос: пустая полоса сетки дала бы лишний промежуток */
  #bz-rows .o-inv-row.o-inv-noprice{grid-template-areas:"t x" "q q" "c c"}
  #bz-rows .o-inv-row.o-inv-noprice:only-child{grid-template-areas:"t" "q" "c"}
  /* без закупочной цены столбик тот же — колонки здесь задаёт телефон, а не ширина полей */
  #bz-rows .o-inv-row.o-inv-nocost{grid-template-columns:minmax(0,1fr) var(--h);grid-template-areas:"t x" "q q"}
  #bz-rows .o-inv-row.o-inv-nocost:only-child{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "q"}
  .o-inv-row > .o-inv-item{grid-area:t}
  .o-inv-row > .o-inv-qty{grid-area:q}
  .o-inv-row > .o-inv-cost{grid-area:c}
  .o-inv-row > .o-inv-price{grid-area:p}
  .o-inv-row > .o-inv-del{grid-area:x}
  /* «рекомендуем взять» в карточке товара: поле не прижимается к краю строки */
  .o-buy-qty{width:110px}
  .o-buy-note{flex:1 1 100%;align-self:flex-start}
  /* восемь вкладок раздела вставали на телефоне в три ряда (132 px — треть экрана до
     содержимого). Подпись важнее иконки: на узком экране иконку убираем, отступы ужимаем —
     вкладки укладываются в два ряда (88 px), у каждой остаётся слово, высота пальца 44 px. */
  #office-tabs a{gap:0;padding:10px 9px;font-size:14px}
  #office-tabs a > .ic{display:none}
}

/* === ОПЛАТА ТАРИФА === */
/* Логотипы способов оплаты: одного роста, без серости и без выделения — банк просит
   не отдавать предпочтения ни одному способу. Ссылка есть только у ТБанка. */
.pay-logos{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pay-logos a,.pay-logos span{display:inline-flex;align-items:center;height:40px;padding:0 8px;border:1px solid var(--line2);border-radius:var(--r);background:#fff}
.pay-logos a:hover{border-color:var(--g400)}
.pay-logos img{display:block;height:28px;width:auto;max-width:110px}
/* «Безопасность оплаты» — короткий список с иконками, как пункты тарифа */
.pay-safe{list-style:none;display:flex;flex-direction:column;gap:10px}
.pay-safe li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2)}
.pay-safe li .ic{flex:none;color:var(--g600);margin-top:2px}
/* форма оплаты в карточке тарифа: срок на всю ширину, под кнопкой — путь по счёту */
.pay-form .select{width:100%}
.pay-form .btn{white-space:normal;height:auto;min-height:var(--h);padding-top:8px;padding-bottom:8px}
/* плашка результата после возврата со страницы банка */
.pay-banner .ic{flex:none;margin-top:2px}
.pay-banner-ok{border-color:var(--g300)}
.pay-banner-ok .ic{color:var(--g600)}
.pay-banner-fail{border-color:var(--danger-line)}
.pay-banner-fail .ic{color:var(--danger)}
.pay-banner-wait .ic{color:var(--amber)}
.pay-banner-info .ic{color:var(--ink3)}
/* строка оплаты в «Ваших оплатах» и у администратора */
.pay-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line2)}
.pay-row:first-child{border-top:none;padding-top:0}
.pay-sum{font-weight:600;text-align:right;white-space:nowrap}
.adm-pay{padding:4px 0 0}
/* «Контакты»: реквизиты парами «что — значение», номера с кнопкой копирования */
.kv-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line2);font-size:15px;line-height:1.45}
.kv-row:first-child{border-top:none}
.kv-row > span:last-child{text-align:right;overflow-wrap:anywhere}
.kv-row .btn-icon{width:var(--h-sm);height:var(--h-sm);vertical-align:middle}
@media(max-width:420px){
  .pay-logos{gap:10px}
  .pay-logos a,.pay-logos span{height:36px;padding:0 6px}
  .pay-logos img{height:24px;max-width:92px}
  .kv-row{flex-direction:column;gap:2px}
  .kv-row > span:last-child{text-align:left}
}

/* быстрый вход: код на 5 минут для входа на втором устройстве без пароля */
.code-big{font-size:32px;line-height:1.2;font-weight:700;letter-spacing:.3em;font-variant-numeric:tabular-nums;color:var(--g800)}
.code-input{font-size:24px;letter-spacing:.25em;text-align:center;font-variant-numeric:tabular-nums}
.code-input::placeholder{font-size:16px;letter-spacing:0}
/* «Войти по коду с другого устройства» в одну строку не помещается в кнопку на 360px */
.auth-alt .btn{white-space:normal;height:auto;min-height:var(--h);padding-top:8px;padding-bottom:8px;line-height:1.25}
/* перенесённая подпись стоит рядом со значком, а не в центре пустой кнопки */
.auth-alt .btn > span{text-align:left}
/* «Войти как …» — кто уже входил на этом устройстве. Карточка целиком — одна кнопка
   под палец, а крестик — отдельная, чтобы не убрать аккаунт промахом мимо карточки */
.known{display:flex;flex-direction:column;gap:8px}
.known-item{display:flex;align-items:center;gap:4px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;transition:border-color .15s,background .15s}
.known-item:hover{border-color:var(--g300)}
.known-item.on{border-color:var(--g600);background:var(--mist)}
.known-pick{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 4px 8px 10px;text-align:left;border-radius:var(--r)}
.known-pick:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
/* имя переносится целиком (по нему и узнают себя), длинная почта — обрезается многоточием */
.known-name{display:block;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.known-sub{display:block;font-size:13px;line-height:1.35;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* крестик не сжимается ни от длинной почты, ни от названия магазина: 44px под палец,
   а место уступает подпись — она обрезается многоточием */
.known-drop{flex:none;color:var(--ink3);margin-right:6px}

/* гараж: по VIN */
/* переключатель «По VIN | По марке и модели» у новой машины. Подпись переносится:
   на 360px «По марке и модели» в одну строку не влезает в половину карточки и
   распирала бы все машины гаража вправо за край блока */
.garage-mode{margin-bottom:12px}
.garage-mode > *{white-space:normal;text-align:center;line-height:1.2;min-width:0;padding:0 8px}
/* машина в сетке гаража не шире самой сетки, что бы ни лежало внутри */
.garage-car{min-width:0}
/* подпись VIN со счётчиком «12 из 17» справа: видно, сколько знаков осталось */
.garage-vin-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
/* поле VIN и «Определить по VIN» в одну строку; не помещается — кнопка уходит под поле */
.garage-vin-row{display:flex;flex-wrap:wrap;gap:10px}
.garage-vin-row > .input{flex:1 1 220px;min-width:0}
.garage-vin-row > .btn{flex:none}
/* VIN у сохранённой машины — во всю ширину пары: 17 знакам в половине тесно */
.garage-vin-field{grid-column:1 / -1}
/* карточка «Определили: Kia Rio · 2015 · 1.6» между полем VIN и открывшимися полями;
   без марки — жёлтая рамка: это не ошибка, а просьба вписать самому */
.garage-found{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:14px;background:#fff;border:1px solid var(--g300);border-radius:var(--r)}
.garage-found > .ic{flex:none;color:var(--g600);margin-top:1px}
.garage-found-none{border-color:var(--amber-line)}
.garage-found-none > .ic{color:var(--amber)}
/* «Указать VIN» — свёрнутая ссылка под полями машины, добавленной по марке */
.garage-showvin{margin:0 0 12px}
/* плашка «Подбор для автомобиля … · VIN …» над выдачей: справа крестик 44px,
   поэтому отступы сверху и снизу меньше обычных, а сам крестик не сжимается */
.vin-bar{padding:10px 10px 10px 18px}
.vin-bar > .btn,.vin-bar .btn-icon{flex:none}
/* сохранённая машина — одной строкой: название, ниже двигатель и VIN, справа «Изменить» и «Убрать» */
.garage-car-saved{padding:10px 14px}
.garage-sum{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){
  /* под палец — 44px, как «Убрать» рядом (.garage-head .btn-sm): переключатель
     растёт, если подпись ушла на вторую строку; «Указать VIN» — btn-sm */
  .garage-mode > *{height:auto;min-height:var(--h)}
  .garage-showvin .btn-sm{height:var(--h)}
}
@media(max-width:560px){
  /* «Определить по VIN» — во всю ширину под полем: рядом с 17 знаками ей не хватает места */
  .garage-vin-row > .btn{width:100%}
}

/* схемы узлов: окно бесплатных каталогов (js/schemes.js) — каждая ссылка крупной строкой
   под палец; на телефоне окно прижато к низу экрана, как привычный «лист» */
.schemes-card{display:flex;flex-direction:column;gap:12px}
.schemes-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.schemes-link{display:flex;flex-direction:column;gap:2px;min-height:var(--h);padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);transition:.15s}
.schemes-link:hover{border-color:var(--g500);background:var(--mist)}
.schemes-link:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
.schemes-link-main{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--g700)}
.schemes-cars .chip{height:var(--h)}
.schemes-vin .mono{overflow-wrap:anywhere}
.schemes-find .row .input{flex:1;min-width:0}
.schemes-find .row .btn{flex:none}
@media(max-width:700px){
  .schemes-modal{align-items:flex-end;padding:0}
  .schemes-modal .o-modal-card{width:100%;max-height:92dvh;margin:0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  /* у машины в профиле три кнопки — «Схемы», «Изменить», «Убрать»: на телефоне без значков
     они встают в один ряд (со значками «Убрать» уезжала на отдельную строку) */
  .garage-sum-acts{flex-wrap:wrap;gap:4px}
  .garage-sum-acts .btn-sm{padding:0 8px}
  .garage-sum-acts .btn-sm .ic{display:none}
}

/* поиск: искомый номер и аналоги
   Поиск по номеру детали отвечает группами, как в QWEP: сначала «Искомый номер», ниже
   аналоги по производителям, в конце совпадения по словам. Группы отделены воздухом и
   тонкой линией, а не цветными подложками: выдача остаётся витриной карточек, заголовок
   группы лишь говорит, что это за номер и почём он на площадке. */
.s-chips{justify-content:flex-end;min-width:0;max-width:100%}
.s-group + .s-group{margin-top:28px;padding-top:24px;border-top:1px solid var(--line2)}
.s-ghead{min-width:0;max-width:100%}
.s-ghead .h4{overflow-wrap:anywhere}
.s-gcode{margin-top:2px;font-weight:600;overflow-wrap:anywhere}
.s-gall{padding:4px 0}
/* Чипы производителей и аналогов: название детали и номер бывают длинными — переносим
   текст внутри чипа, а не распираем экран телефона (у обычного .chip перенос запрещён). */
.s-xchip{white-space:normal;height:auto;min-height:var(--h-sm);padding-top:6px;padding-bottom:6px;line-height:1.3;max-width:100%;text-align:left}
.s-xchip .mono{overflow-wrap:anywhere}
.s-xchip-n{color:var(--ink3);font-weight:400}
/* «Только искомый номер» нажат — чип залит, как выбранная машина гаража */
.s-switch[aria-pressed="true"]{background:var(--g700);border-color:var(--g700);color:#fff}
.s-switch[aria-pressed="true"]:hover{background:var(--g800);border-color:var(--g800);color:#fff}
/* пустая выдача: известные аналоги стоят над кнопками и отделены от них воздухом */
.s-known{margin-bottom:8px}
@media(max-width:700px){
  /* под палец — 44px, как остальные чипы витрины (.main-tap); «Все N предложений» — главный
     путь ко всей группе, ему столько же */
  .s-xchip{min-height:var(--h)}
  .s-gall{display:inline-flex;align-items:center;min-height:var(--h)}
  .s-chips{justify-content:flex-start}
  /* «Запросить у магазинов» и «Сообщить, когда появится» — во всю ширину, одна под другой */
  .s-nonum-acts > .btn,#s-ask-an{width:100%}
}

/* ==================== форма: панель аналогов (пакет C2) ====================
   «Аналоги этого номера» под полем «Аналоги» в форме товара и объявления
   (WP.crossesPanel в pages-sell.js). Номера — флажками по производителям. */
/* поле аналогов многострочное, но ниже обычного описания: чаще там 2–3 номера */
.xp-field{min-height:72px}
.xp-status{margin-top:8px}
/* «Повторить» — ссылкой в строке, без рамки кнопки: ошибка тут тихая */
.xp-link{color:var(--g600);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.xp-link:hover{color:var(--g800)}
.xp-panel{margin-top:10px;padding:12px 14px;background:var(--mist);border:1px solid var(--line2);border-radius:var(--r);min-width:0}
.xp-panel:focus{outline:none}
.xp-panel:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
/* у правки товара — одна строка «Аналоги этого номера: 12 — показать» во всю ширину */
.xp-toggle{display:flex;align-items:center;width:100%;min-height:var(--h);margin-top:10px;padding:8px 14px;background:var(--mist);border:1px solid var(--line2);border-radius:var(--r);font-size:14px;color:var(--ink2);text-align:left;line-height:1.4}
.xp-toggle:hover{border-color:var(--g300)}
.xp-toggle:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
/* чипы «Уточните производителя»: название детали бывает длинным — переносим, а не
   выдавливаем страницу вбок на телефоне */
.xp-chip{height:auto;min-height:var(--h-sm);padding:6px 14px;white-space:normal;text-align:left;line-height:1.3;max-width:100%}
/* группа производителя: legend всплывает, чтобы линия-разделитель рисовалась
   над группой, а не сквозь подпись (так ведёт себя «настоящая» legend fieldset) */
.xp-brand{border:0;margin:0;padding:0;min-width:0}
.xp-brand legend{float:left;width:100%;padding:0}
.xp-brand legend + *{clear:both}
.xp-brand + .xp-brand{margin-top:8px;padding-top:4px;border-top:1px solid var(--line2)}
.xp-head + .tiny + .xp-brand{margin-top:4px}
.xp-legend{color:var(--ink)}
/* номера сдвинуты под флажок производителя: видно, к кому они относятся */
.xp-items{padding-left:28px}
.xp-body{display:flex;flex-direction:column;min-width:0}
.xp-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.xp-code{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.xp-sub{display:block;margin-top:2px}
.xp-warn{color:var(--amber)}
.xp-item input:disabled,.xp-legend input:disabled{cursor:default}
.xp-item input:disabled ~ .xp-body .xp-code{color:var(--ink2)}
.xp-acts .btn{max-width:100%}
@media(max-width:700px){
  /* под палец — 44px: строки с флажками, «Отметить все», «Показать ещё» и чипы */
  .xp-panel .btn-sm{height:var(--h)}
  .xp-item,.xp-legend{min-height:var(--h);padding:10px 0}
  .xp-chip{min-height:var(--h)}
  .xp-link{display:inline-flex;align-items:center;min-height:var(--h)}
  .xp-items{padding-left:20px}
}
@media(max-width:420px){
  /* «Добавить отмеченные» — во всю ширину: главная кнопка панели */
  .xp-acts .btn{width:100%}
}

/* склад: аналоги и поставщики (пакет C3, js/office-crosses.js) — «Где купить» с аналогами и ответами
   поставщиков, «Мои поставщики», «Мои аналоги», колонка аналогов и согласие в «Опт» */
/* заголовки «Искомый номер» и «Аналоги» делят ответ проценки; группы внутри — в своей обёртке,
   чтобы у первой группы не было верхней линии (правило .o-group:first-child) */
.xo-head{margin:24px 0 10px;overflow-wrap:anywhere}
.xo-block > .o-group:first-child{margin-top:0;padding-top:0;border-top:none}
.xo-part{overflow-wrap:anywhere;min-width:0}
.xo-kind{margin-top:10px}
.xo-kind-title{margin-bottom:4px}
.xo-break{overflow-wrap:anywhere}
.xo-link{color:var(--g600);text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* чип номера: длинный номер с производителем не раздвигает экран — переносится на вторую строку,
   а не обрезается: «MANN-FILTER · Фильтр масляный» должен читаться целиком */
.xo-chip{max-width:100%;height:auto;min-height:var(--h-sm);padding-top:5px;padding-bottom:5px;white-space:normal;text-align:left;line-height:1.35}
.xo-chip-text{min-width:0;overflow-wrap:anywhere}
/* бейдж с длинным текстом («ошибка: …», «не проверено с настоящей учётной записью») переносится,
   а не вылезает за карточку */
.xo-badge-wrap{white-space:normal;height:auto;min-height:24px;padding:2px 10px;line-height:1.35}
.xo-badges{justify-content:flex-end;max-width:60%}
.xo-live-list{display:flex;flex-direction:column;gap:12px}
.xo-live-card .otable{margin-top:6px}
/* у искомого номера и у аналогов — одинаковые колонки: таблицы стоят одна под другой и не должны «плясать» */
.xo-live-table{table-layout:fixed}
.xo-live-table th:nth-child(1){width:auto}
.xo-live-table th:nth-child(2),.xo-live-table th:nth-child(3){width:12%}
.xo-live-table th:nth-child(4){width:11%}
.xo-live-table th:nth-child(5){width:180px}
.xo-live-table td{overflow-wrap:anywhere}
/* «больше 10 шт.» и «цена — у управляющего» в узкой колонке переносятся, а не наезжают на соседнюю */
.otable.xo-live-table td:nth-child(n+2){white-space:normal}
.xo-live-table td.xo-live-part{white-space:normal}
.xo-noprice{font-weight:400;white-space:normal}
.xo-warn-title{display:flex;align-items:center;gap:6px}
.xo-int-list{display:flex;flex-direction:column;gap:12px}
.xo-prov-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.xo-prov{padding:14px 16px;border:1px solid var(--line2);border-radius:var(--r-lg);background:#fff}
.xo-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px;max-width:760px}
.xo-field-check{align-self:end}
.xo-tpl > div{max-width:320px}
.xo-cell-crosses{white-space:normal!important;text-align:left!important;min-width:180px}
.xo-offer-crosses{overflow-wrap:anywhere}
@media(max-width:700px){
  /* под палец — 44px: на телефоне в эти кнопки и чипы целятся пальцем, а btn-sm и chip дают 36px */
  .xo-bar .btn-sm,.xo-view .btn-sm,.xo-live .btn-sm,.xo-back{height:var(--h)}
  .xo-chip{min-height:var(--h)}
  /* «Мои поставщики» и «Мои аналоги» — в один ряд: без значков обе подписи помещаются в 360px */
  .xo-bar .btn-sm{flex:1 1 120px;padding:0 10px}
  .xo-bar .btn-sm .ic{display:none}
  /* строки проценки теперь есть и у каждого аналога — их кнопки тоже под палец */
  #pc-res .o-contacts .btn-sm,#pc-res .o-contacts .soc-btn.btn-sm,#pc-res .o-lock .btn-sm{height:var(--h)}
  .xo-badges{max-width:none;justify-content:flex-start}
  .xo-live-card .row-between{flex-wrap:wrap}
  .xo-live-table td.xo-live-part{min-width:0}
  .xo-live-card{padding:14px}
  .xo-prov-list{grid-template-columns:1fr}
  .xo-fields{grid-template-columns:1fr}
  .xo-form .pw-eye{right:0;width:var(--h);height:var(--h)}
  .xo-int{padding:14px}
  .xo-acts .btn-sm{flex:1 1 100px;padding:0 8px}
  .xo-imp{flex-wrap:wrap}
  .xo-imp > .grow{flex:1 1 100%}
}

/* админка: таблицы аналогов (карточка #adm-crosses в WP.pages.admin) */
/* «Если в файле нет колонки производителя» — свёрнутым блоком: нужен редко, а два лишних поля
   сбивали бы с главного — файл и основание. Заголовок строкой под палец, стрелка поворачивается. */
.adm-x-more{margin-bottom:4px}
.adm-x-more summary{display:flex;align-items:center;gap:6px;min-height:var(--h);list-style:none;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--g600)}
.adm-x-more summary .ic{transition:transform .15s}
.adm-x-more[open] summary .ic{transform:rotate(180deg)}
/* имена файлов бывают одним длинным словом («Stellox_cross_2026-09_final.csv») */
.adm-x-fname{overflow-wrap:anywhere;min-width:0}
/* основание — цитатой, как комментарий жалобы; переносы строк из поля сохраняем */
.adm-x-basis{border-left:3px solid var(--line);padding-left:10px;color:var(--ink2);overflow-wrap:anywhere;white-space:pre-line}
/* итог проверки плитками: у пар номеров плиток три, у групп четыре — сетка сама делит ширину;
   100px — чтобы и на телефоне в 360px плитки стояли по две, а не столбиком */
.adm-x-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.adm-x-tile{display:flex;flex-direction:column;padding:8px 12px;background:#fff;border:1px solid var(--line2);border-radius:var(--r)}
.adm-x-tile b{font-size:20px;line-height:1.25}
.adm-x-tile span{font-size:13px;color:var(--ink3)}
.adm-x-reasons{margin:6px 0 0 22px;list-style:disc}
@media(max-width:700px){
  /* «Разобрать как …» — вторичная кнопка, но на телефоне всё равно под палец */
  .adm-x-fmt .btn-sm{height:var(--h)}
}

/* ==================== склад: папки, ячейки, штрихкоды, этикетки (js/office-warehouse.js) ====================
   «Склад» постранично, папки и ячейки, раскладка сканом, окно печати этикеток и шаблоны,
   папки на «Кассе». Цвета — только токены; белый фон — --bg. */
/* тихий ряд кнопок «Склада» под главными: папки, ячейки, шаблоны этикеток, выгрузка
   («Переезд» — в «Настройках» и баннером над складом, .s-move) */
.wh-bar{margin-left:-8px}
/* чип ячейки «А-01-02» — в строке склада, в результатах кассы и в чеке: глаз попадает туда первым */
.wh-chip{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;margin-right:6px;border-radius:99px;background:var(--g100);color:var(--g800);font-size:13px;font-weight:700;line-height:1;white-space:nowrap;vertical-align:1px}
.wh-chip-more{font-weight:600;color:var(--g600)}
/* строка склада: название — ссылка на карточку, путь папки — серым в строке номера */
.s-title{color:var(--ink)}
.s-title:hover{color:var(--g700);text-decoration:underline;text-underline-offset:2px}
.s-sub{margin-top:2px}
.s-folder-path{display:inline-flex;align-items:center;gap:3px}
.s-tools .o-search{flex:1 1 280px;width:auto}
.s-folder{width:auto;min-width:200px;max-width:320px;flex:0 1 auto}
/* сегменты прокручиваются внутри своей полосы — страница вбок не едет */
.s-seg-scroll{max-width:100%;overflow-x:auto;scrollbar-width:none}
.s-seg-scroll::-webkit-scrollbar{display:none}
/* телефон: кнопки не ниже 44 px (раздел 6) — сегменты «Все / Заканчиваются / Скрытые / Без штрихкода», «Скрыть подсказку» и «Добавить услугу» */
@media(max-width:700px){
  #s-filter > *{height:var(--h)}
  .btn-sm[data-hide],#o-service{height:var(--h)}
}
#s-select.on{background:var(--g100);color:var(--g800)}
.s-chip{height:auto;min-height:var(--h-sm);cursor:default}
.s-chip-x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:-8px;border-radius:99px;color:var(--ink3)}
.s-chip-x:hover{background:var(--mist);color:var(--ink)}
.wh-pickcol{width:40px}
.wh-pickcol input{width:18px;height:18px;accent-color:var(--g600);cursor:pointer}
.o-stock tr.s-picked > td{background:var(--mist)}
/* с колонкой галочек «Товар» становится второй — и всё равно по левому краю (числа .otable — вправо) */
.otable.s-selecting th:nth-child(2),.otable.s-selecting td:nth-child(2){text-align:left}
/* …и переносится, как без галочек: иначе правило чисел .otable (nowrap) растянуло бы длинное название из 1С на всю строку и увело «Остаток», «Цену» и кнопки за край окна */
.otable.s-selecting td:nth-child(2){white-space:normal}
.otable th.wh-pickcol,.otable td.wh-pickcol{width:40px;min-width:40px}
/* полоса действий с выбранными: на компьютере — над таблицей, на телефоне — липкая снизу */
.o-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px solid var(--g200);border-radius:var(--r);background:var(--mist)}
.o-bulk-head,.o-bulk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* «Изменить»: ячейки строками с «×», дополнительные штрихкоды чипами */
.s-cells{display:flex;flex-direction:column;gap:6px;max-width:440px}
.s-cell-row{display:flex;gap:6px}
.s-extra-in{max-width:440px}
.o-move-imp{height:20px;margin-left:4px;vertical-align:1px}
.o-inv-cell .input{height:var(--h-sm)}
.o-inv-cell .tiny{display:block;margin-bottom:2px}

/* окно поверх экрана (WH.sheet): на компьютере — карточка по центру до 560 px */
.wh-sheet-card{width:min(100%,560px)}
.wh-sheet-card:focus{outline:none}
.wh-sheet-body{margin-top:8px}
/* тост («Разложено: 12») — поверх затемнения окна */
body.wh-sheet-open .toast{z-index:130}
.wh-toast{width:min(560px,calc(100vw - 32px))}
.wh-toast .btn{flex:none;background:var(--bg);color:var(--ink)}
/* списки выбора в окнах: папки, ячейки, товары — строками во всю ширину, палец попадает в любую точку */
.wh-pick{display:flex;flex-direction:column;max-height:min(46vh,360px);overflow:auto;margin-top:8px;border:1px solid var(--line2);border-radius:var(--r)}
.wh-pick > .small{padding:10px 12px}
.wh-pick-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-top:1px solid var(--line2);cursor:pointer}
.wh-pick-row:first-child{border-top:none}
.wh-pick-row:hover{background:var(--mist)}
.wh-pick-row input{width:18px;height:18px;flex:none;accent-color:var(--g600)}
.wh-pick-row.wh-depth-2{padding-left:34px}
.wh-pick-row.wh-depth-3{padding-left:56px}
.wh-pick .orow{padding:10px 12px}
.wh-link-row{margin:0}

/* «Папки»: дерево с отступом по уровню, «Выше» / «Ниже» — стрелками без перетаскивания */
.wh-tree{border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden}
.wh-frow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line2)}
.wh-frow:first-child{border-top:none}
.wh-frow.wh-depth-2{padding-left:38px}
.wh-frow.wh-depth-3{padding-left:62px}
.wh-fname{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.wh-fname:hover{color:var(--g700)}
.wh-facts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:none}
.wh-up .ic{transform:rotate(180deg)}
.wh-center{text-align:center}

/* «Ячейки»: номер крупно, «Несколько сразу» — «с … по …» в строку */
.wh-code{font-size:16px;color:var(--ink)}
.wh-code:hover{color:var(--g700)}
.wh-range{display:flex;flex-direction:column;gap:8px;max-width:560px}
.wh-range-row{display:grid;grid-template-columns:180px auto 72px auto 72px;align-items:center;gap:8px}
.wh-range-row .label{margin:0}
.wh-range-row .input{text-align:center}
.wh-bulk-inline{align-items:center}
/* номер и описание ячейки — по левому краю (числа в .otable прижаты вправо) */
.otable.wh-cells th.wh-l,.otable.wh-cells td.wh-l{text-align:left}
/* описание ячейки (до 80 знаков) переносится: с колонкой галочек оно третье и попало бы под nowrap чисел .otable */
.otable.wh-cells td.wh-cnote{white-space:normal;overflow-wrap:anywhere;min-width:140px}

/* «Разложить по ячейкам»: текущая ячейка — крупно, её видно с расстояния вытянутой руки */
.wh-place-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 16px;border:1px solid var(--g300);border-radius:var(--r-lg);background:var(--g100)}
.wh-place-code{font-size:30px;font-weight:800;line-height:1.15;color:var(--g800);letter-spacing:-.01em}

/* «Касса»: папки плитками, крошки «Все папки › Фильтры», товары папки — строками результатов */
.wh-fb-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-bottom:10px;font-size:14px}
.wh-fb-back{display:none}
.wh-fb-path{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.wh-crumb{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 6px;border-radius:8px;color:var(--g600);font-weight:600}
.wh-crumb:hover{background:var(--mist)}
.wh-crumb-now{font-weight:700;color:var(--ink)}
.wh-crumb-sep{color:var(--ink3)}
.wh-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:10px}
.wh-tile{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg);text-align:left}
.wh-tile:hover{border-color:var(--g300);background:var(--mist)}
.wh-tile:focus-visible,.wh-crumb:focus-visible,.wh-size:focus-visible,.wl-item:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
.wh-tile-t{display:flex;flex-direction:column;min-width:0}
.wh-tile-name{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.wh-fb-items > .orow:first-child{border-top:1px solid var(--line2);padding-top:10px}

/* первая печать: «Какого размера ваши этикетки?» — плитки с рисунком этикетки */
.wh-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wh-size{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:120px;padding:12px 8px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg);text-align:center}
.wh-size:hover{border-color:var(--g300);background:var(--mist)}
.wh-size-pic{display:block;margin-bottom:8px;border:2px solid var(--g600);border-radius:3px;background:var(--bg)}
.wh-size-sheet{border-style:dashed}
.wh-size-name{overflow-wrap:anywhere}
/* «Другой размер…» — последняя плитка: пунктир с плюсом */
.wh-size-other{border-style:dashed}
.wh-size-plus{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-style:dashed;color:var(--g600)}
/* окно печати: сколько этикеток у каждой строки */
.wh-pl-rows{max-height:220px;overflow:auto;padding:2px 10px;border:1px solid var(--line2);border-radius:var(--r)}
.wh-pl-row{display:flex;align-items:center;gap:10px;padding:4px 0;border-top:1px solid var(--line2);font-size:14px}
.wh-pl-row:first-child{border-top:none}
.wh-pl-qty{width:88px;text-align:right;flex:none}

/* «Шаблоны этикеток»: список слева, образец в настоящем размере справа */
.wl-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.wl-list{display:flex;flex-direction:column;gap:4px}
.wl-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1px solid transparent;border-radius:var(--r);text-align:left}
.wl-item:hover{background:var(--mist)}
.wl-item.on{border-color:var(--g300);background:var(--g100)}
.wl-item-name{font-size:14px;font-weight:600}
.wl-none{padding:4px 10px}
.wl-main{min-width:0}
/* мм разметки этикетки — это мм экрана; вокруг белой этикетки — серый фон, чтобы видеть её край */
.wl-sample{margin-top:8px;padding:16px;overflow:auto;background:var(--mist);border:1px solid var(--line2);border-radius:var(--r)}
.wl-sample-in{display:inline-block;box-shadow:0 0 0 1px var(--line),var(--sh)}
.wl-sample-sm{padding:10px}
.wl-fields{display:flex;flex-wrap:wrap;gap:0 16px}
.wl-help-list{margin:8px 0 0 20px;display:flex;flex-direction:column;gap:6px}
/* схема листа (WH.sheetMapHtml): уменьшенная страница, места наклеек с номерами; вылезшие за
   лист — красным; в окне печати места — кнопки «Начать с наклейки №», пропущенные заштрихованы */
.wl-map-wrap{max-width:100%;overflow:auto}
.wl-map{position:relative;margin:2px}
.wl-map-page{position:absolute;left:0;top:0;background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh)}
.wl-map-slot{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid var(--g300);border-radius:2px;background:var(--g100);color:var(--g800);font-size:13px;line-height:1;overflow:hidden}
.wl-map-slot.bad{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.wl-map-pick .wl-map-slot{cursor:pointer;padding:0}
.wl-map-pick .wl-map-slot:hover{border-color:var(--g500)}
.wl-map-slot.skip{background:repeating-linear-gradient(45deg,var(--mist) 0 3px,var(--line2) 3px 6px);border-color:var(--line);color:var(--ink3)}
.wl-map-slot.on{border:2px solid var(--g600);background:var(--g200)}
.wl-map-slot:focus-visible{outline:2px solid var(--g500);outline-offset:1px}

@media(max-width:1000px){
  .wl-grid{grid-template-columns:minmax(0,1fr)}
  .wl-list{flex-direction:row;flex-wrap:wrap}
  .wl-list .label{flex:1 1 100%}
}

/* === Карта (b645cc) === js/map.js, js/map-view.js, окно WP.ui.sheet (js/ui.js)
   Цвета точек на самой карте берёт map-view.js из тех же токенов :root: магазины — --g600 (со знаком
   «Проверен» — --g800), OpenStreetMap и места от пользователей — --ink3 (их нет в WayParts), на проверке — --amber.
   Стиль MapLibre (css/vendor) вставляется перед этим файлом, поэтому правила ниже берут верх. */
/* окно поверх страницы: на компьютере — карточка по центру, на телефоне — лист снизу */
.ui-sheet-card{display:flex;flex-direction:column;gap:12px}
.ui-sheet-card:focus{outline:none}
.ui-sheet-wide{width:min(100%,720px)}
body.ui-sheet-open .toast{z-index:130}
.map-route-to{display:flex;gap:6px;align-items:flex-start}
.map-route-to .ic{margin-top:3px;color:var(--ink3)}

/* место карты: MapLibre рисует в .map-canvas, поверх — карточка точки и подсказка */
.map-box{position:relative}
.map-host{position:relative;overflow:hidden;background:var(--mist)}
.map-canvas{position:absolute;inset:0}
.map-host-picker{height:260px;border:1px solid var(--line);border-radius:var(--r)}
.map-host-mini{height:220px;border:1px solid var(--line2);border-radius:var(--r-lg)}
.map-host .maplibregl-canvas:focus-visible{outline:2px solid var(--g500);outline-offset:-2px}
.map-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px}
.map-fail{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r);background:var(--mist)}
.map-fail .ic{color:var(--ink3)}
/* заголовок страницы для экранных чтецов: на экране его место занимает карта */
.map-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* страница #/map: карта от шапки до низа окна, подвал с реквизитами — ниже. Шапка — 64px и 1px рамки снизу */
.map-page .map-box{height:calc(100dvh - 65px - env(safe-area-inset-top,0px));min-height:360px;background:var(--mist)}

/* подпись источников и кнопки масштаба — в тон сайту; текст не мельче 13px */
.map-host .maplibregl-ctrl-attrib{font-size:13px;line-height:1.4}
.map-host .maplibregl-ctrl-attrib a{color:var(--ink2)}
.map-host .maplibregl-ctrl-group{border-radius:var(--r);box-shadow:var(--sh)}
.map-host .maplibregl-ctrl-group button{width:36px;height:36px}
.map-host .maplibregl-cooperative-gesture-screen{font-family:var(--font);font-size:16px}

/* карточка точки: над точкой на компьютере (MapLibre Popup, .map-pop) или снизу поверх карты на телефоне (.map-card) */
.map-cd{display:flex;flex-direction:column;gap:4px;font-family:var(--font);font-size:14px;line-height:1.45;color:var(--ink)}
.map-cd-kind{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink3)}
.map-cd-name{font-size:16px;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
a.map-cd-name:hover{color:var(--g700);text-decoration:underline;text-underline-offset:3px}
.map-cd-line{display:flex;gap:6px;align-items:flex-start;color:var(--ink2);overflow-wrap:anywhere}
.map-cd-line .ic{margin-top:3px;color:var(--ink3)}
.map-cd-line a,.map-cd-src a{color:var(--g600);text-decoration:underline;text-underline-offset:3px}
.map-cd-stock{color:var(--ink)}
.map-cd-src{font-size:13px;color:var(--ink3)}
.map-cd-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.map-pop .maplibregl-popup-content{padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line2);box-shadow:var(--sh-lg)}
.map-pop .maplibregl-popup-close-button{top:6px;right:6px;width:32px;height:32px;font-size:22px;line-height:1;color:var(--ink3);border-radius:var(--r)}
.map-pop .maplibregl-popup-close-button:hover{background:var(--mist);color:var(--ink)}
.map-pop .map-cd-kind{padding-right:26px}
.map-card{position:absolute;left:8px;right:8px;bottom:8px;z-index:3}
.map-card-in{position:relative;max-height:min(60vh,420px);overflow:auto;padding:14px 16px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.map-card-x{position:absolute;top:6px;right:6px}
.map-card .map-cd-kind{padding-right:36px}

/* точка, которую двигают (picker): заливка --g600, кружок внутри и обводка — белые */
.map-pin{cursor:grab}
.map-pin:active{cursor:grabbing}
.map-pin svg path{fill:var(--g600);stroke:var(--bg);stroke-width:1.6}
.map-pin svg circle{fill:var(--bg)}
.map-hint{position:absolute;left:8px;right:8px;top:8px;z-index:2;padding:8px 12px;border-radius:var(--r);background:var(--bg);box-shadow:var(--sh);color:var(--ink2);text-align:center;pointer-events:none}
/* место под picker, пока карта качается (точка магазина, «Добавить место»); не открылась — строка .map-fail */
.map-geo{position:relative;height:260px;border:1px solid var(--line);border-radius:var(--r);background:var(--mist)}
.sp-geo-label{margin-bottom:0}
/* окна «Добавить место» и «Это ваш магазин?» (js/map-sheets.js) */
.map-sheet-form{display:flex;flex-direction:column;gap:12px}
.map-sheet-form .field{margin-bottom:0}
.map-kinds{gap:4px 20px}
/* флажки видов — под палец, как в фильтрах и окне жалобы */
.map-kinds .check{min-height:var(--h);align-items:center}
/* «Места на карте» у администратора: на узком экране три вкладки — во всю ширину, подписи в две строки, а не за край */
@media(max-width:560px){
  #adm-map .row-between > .row{width:100%}
  #adm-map-tab{display:flex;width:100%}
  #adm-map-tab > *{flex:1 1 0;min-width:0;height:auto;min-height:36px;padding:4px 6px;white-space:normal;line-height:1.2;text-align:center}
}
@media(max-width:700px){
  .map-geo{height:220px}
  /* «Найти по адресу» и «Убрать с карты» — под палец, во всю ширину, если в строку не встают */
  .sp-geo-acts{width:100%}
  .sp-geo-acts .btn{flex:1 1 auto;height:var(--h)}
}

/* список вместо карты: нет WebGL или файла карты на сервере */
.map-note{display:flex;gap:10px;align-items:flex-start}
.map-note .ic{margin-top:2px;color:var(--ink3)}
.map-list-city{margin:20px 0 10px}
.map-list-city:first-child{margin-top:0}
.map-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

@media(max-width:700px){
  /* шапка 58px + 1px рамки, нижняя панель 56px + 12px отступов + 1px рамки */
  .map-page .map-box{height:calc(100dvh - 59px - 69px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:320px}
  .map-host-picker{height:220px}
  .map-list{grid-template-columns:minmax(0,1fr)}
  /* кнопки карточки — под палец; крестик тоже 44px (как .pop-x), вид и название точки под него не подлезают */
  .map-cd-acts .btn{height:var(--h)}
  .map-card-x.btn-icon{width:var(--h);height:var(--h);top:2px;right:2px}
  .map-card-x.btn-icon:focus-visible{outline-offset:-2px}
  .map-card .map-cd-kind,.map-card .map-cd > .row{padding-right:40px}
  .ui-sheet{align-items:flex-end;padding:0}
  .ui-sheet .o-modal-card{width:100%;max-height:92dvh;margin:0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* «Карта» в шапке гостя и частника (у магазина пункта нет): на 1020px и уже — один значок, подпись — aria-label */
@media(max-width:1020px){
  .hdr-map span{display:none}
  .hdr-acts .hdr-map{width:var(--h);padding:0}
}

/* страница #/map: панель над картой — «Рядом со мной», город, слои, «Добавить место». Справа сверху — кнопки
   масштаба MapLibre, поэтому панель до них не доходит. На телефоне — одна строка «Рядом со мной · Город ·
   Слои» (слои — в окне по «Слоям»), дальше она листается пальцем, и край, за которым есть кнопки, тает */
.map-page{position:relative}
.map-bar{position:absolute;top:12px;left:12px;right:64px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none}
.map-bar > *{pointer-events:auto;box-shadow:var(--sh)}
.map-city{width:auto;max-width:230px;height:var(--h-sm);padding-left:12px}
.map-chip{display:inline-flex;align-items:center;gap:6px;height:var(--h-sm);padding:0 12px;border-radius:99px;border:1px solid var(--line-strong);background:var(--bg);font-size:14px;font-weight:600;color:var(--ink3);white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.map-chip:hover{border-color:var(--g500);color:var(--g700)}
/* включённый слой — светло-зелёный, значок — цветом точек на карте */
.map-chip[aria-pressed="true"]{background:var(--g100);border-color:var(--g600);color:var(--g800);box-shadow:inset 0 0 0 1px var(--g600)}
.map-chip-store[aria-pressed="true"] .ic{color:var(--g600)}
.map-chip-osm[aria-pressed="true"] .ic{color:var(--ink3)}
.map-bar .map-layers-btn{display:none}
/* «Списком» на компьютере — один значок (имя — aria-label и подсказка): с подписью панель не встаёт в строку на 1280 */
.map-bar .map-aslist{width:var(--h-sm);padding:0}
.map-bar .map-aslist span{display:none}
/* окно «Слои» на телефоне: те же переключатели, под палец */
.map-layers{display:flex;flex-wrap:wrap;gap:8px}
/* «Здесь много точек — приблизьте карту» и сбой точек: над подписью источников, мимо карточки и тоста */
.map-pill{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:4;max-width:calc(100% - 32px);padding:8px 14px;border-radius:99px;background:var(--bg);box-shadow:var(--sh);color:var(--ink2);text-align:center;pointer-events:none}

/* главная: вход в карту — карточка без самой карты */
.home-map .icon-tile{background:var(--bg)}

/* поиск: «Списком / На карте» рядом с «Запчасти / Автомобили»; на карте — магазины и они же списком под ней */
.s-views{min-width:0;max-width:100%}
.s-map-wrap{position:relative}
.s-map-box{height:min(560px,calc(100dvh - 240px));min-height:340px;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--mist)}
.s-map-near{position:absolute;top:10px;left:10px;z-index:4;background:var(--bg);box-shadow:var(--sh)}
.s-map-others .btn{flex:none}

/* объявление и магазин: «На карте» и «Маршрут» под адресом — текст кнопок на одной линии с адресом */
.map-links{margin-left:-12px}
/* страница магазина с точкой: мини-карта справа от шапки (на 900px и уже — под ней) */
.sl-head{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.sl-map-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:220px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--mist);color:var(--ink2);font-weight:600}
.sl-map-ph:hover{border-color:var(--g400);color:var(--g700)}
.sl-map-ph:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
.sl-map-box[aria-busy]{height:220px;border-radius:var(--r-lg);background:var(--mist)}

@media(max-width:900px){
  .sl-head{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media(max-width:700px){
  .map-bar{top:8px;left:0;right:0;flex-wrap:nowrap;overflow-x:auto;padding:0 8px 14px;pointer-events:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .map-bar::-webkit-scrollbar{display:none}
  .map-bar > *{flex:none}
  .map-bar .map-chip{display:none}
  .map-bar .map-layers-btn{display:inline-flex}
  .map-bar .map-aslist{width:auto;padding:0 12px}
  .map-bar .map-aslist span{display:inline}
  /* список городов занимает, что осталось от «Рядом со мной» и «Слоёв», но не уже подсказки «Город» */
  .map-bar > .map-city{flex:1 1 auto;min-width:96px;max-width:230px}
  .map-bar-more{-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 32px),transparent)}
  /* под палец — 44px */
  .map-bar .btn-sm,.map-chip,.map-city{height:var(--h)}
  .map-pill{bottom:auto;top:66px}
  .s-map-box{height:56dvh;min-height:300px}
  .s-map-near,.map-row .btn-sm,.map-links .btn-sm{height:var(--h)}
  /* телефон: мини-карта — по нажатию, заглушка низкой строкой */
  .sl-map-ph{flex-direction:row;height:var(--h-lg)}
}
@media(max-width:560px){
  /* «Списком / На карте» — два значка рядом с «Запчасти / Автомобили» */
  .s-view span{display:none}
  .s-view > button{padding:0 12px}
}

/* === Запись в сервис (web-book) === */
/* Окно записи, выбор дня и времени и «Мои записи» (js/booking.js), «Услуги и цены» и кнопки шапки на
   странице магазина (js/pages-main.js). Нажатый чип — тёмно-зелёный, как машина в «Гараже» (.gar-chip.on);
   подпись длинной услуги переносится, а не распирает окно на телефоне. */
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chip{height:auto;min-height:var(--h-sm);padding:6px 14px;line-height:1.3;white-space:normal;text-align:left}
.bk-chip[aria-pressed="true"]{background:var(--g700);border-color:var(--g700);color:#fff}
.bk-chip[aria-pressed="true"]:hover{background:var(--g800);border-color:var(--g800);color:#fff}
.bk-chip-sub{font-weight:400}
.bk-form{display:flex;flex-direction:column;gap:14px}
.bk-form .field{margin-bottom:0}
.bk-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.bk-line,.bk-note,.sl-mine{display:flex;gap:8px;align-items:flex-start}
.bk-line .ic,.sl-mine .ic{margin-top:3px;color:var(--ink3)}
.bk-note .ic{margin-top:2px;color:var(--ink3)}
/* дни — полосой, которая листается пальцем (на компьютере — в несколько строк, ниже) */
.bk-days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px}
.bk-days .bk-chip{flex:none;white-space:nowrap;scroll-snap-align:start}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.bk-times .bk-chip{justify-content:center;text-align:center;padding:6px 8px;font-variant-numeric:tabular-nums}
.bk-done .empty{padding:24px 16px 16px}
.bk-done .bk-acts{justify-content:center}
.bk-list{display:grid;gap:12px}
/* запись, на которую пришли из переписки */
.bk-card.bk-focus{border-color:var(--g400);box-shadow:0 0 0 3px var(--g100)}
.bk-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* «Услуги и цены»: строка — название и цена, без кнопок */
.sl-svc-list{display:flex;flex-direction:column}
.sl-svc{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line2)}
.sl-svc:first-child{border-top:none;padding-top:0}
.sl-svc-price{white-space:nowrap}
.sl-q{width:min(100%,320px)}
@media(min-width:701px){
  .bk-days{flex-wrap:wrap;overflow-x:visible;padding-bottom:0}
}
@media(max-width:700px){
  /* чипы и кнопки записей — под палец, 44px */
  .bk-chip{min-height:var(--h)}
  .bk-acts .btn{height:var(--h)}
  /* «Записаться» на странице магазина — во всю ширину отдельной строкой над мессенджерами */
  .sl-acts .sl-book{flex:1 1 100%}
  .sl-q{width:100%}
}
@media(max-width:640px){
  /* пять вкладок профиля частника (с «Моими записями») — два ряда ровной высоты: «Мои объявления · Мои запросы»
     и «Мои записи · Сообщения · Настройки», каждая подпись одной строкой (до 640 px; шире — одним рядом, accept:r2). Сеткой 3+2 «Мои объявления» и
     «Мои запросы» ломались на две строки, ряды выходили разной высоты (приёмка r1). Подписи — целиком (T3) */
  .profile-tabs.profile-tabs-5{grid-template-columns:repeat(6,1fr)}
  .profile-tabs-5 > a{gap:4px;white-space:nowrap}
  .profile-tabs-5 > a:nth-child(-n+2){grid-column:span 3}
  .profile-tabs-5 > a:nth-child(n+3){grid-column:span 2;padding-left:4px;padding-right:4px}
  .profile-tabs-5 .nbadge-inline{margin-left:0}
}
@media(max-width:350px){
  /* совсем узкий экран: три в ряд не входят — две колонки, «Настройки» во всю ширину */
  .profile-tabs.profile-tabs-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-tabs-5 > a:nth-child(n){grid-column:auto}
  .profile-tabs-5 > a:last-child{grid-column:1/-1}
}

/* === Запись в сервис (web-office) ===
   «Что у вас» на регистрации и «Странице магазина» (WP.ui.kindsHtml), карточка «Запись клиентов»
   и список услуг (pages-profile.js), «Заказы» → «Записи» (js/office-bookings.js). Строки записей —
   те же .o-order, что у заказов под клиента; здесь только время визита, заголовки дней и услуги. */
.kinds-field .ferr{margin-top:6px}
.sp-book-on{margin-top:8px}
.sp-book-note{align-items:flex-start}
/* строка про данные клиента: значок слева от текста и на телефоне (там у строк в «Настройках» перенос) */
.sp-book-note,.bk-pd{flex-wrap:nowrap}
.sp-book-note > span,.bk-pd > span{min-width:0}
.sp-book-note .ic,.bk-pd .ic{margin-top:2px;color:var(--g600)}
.bk-pd{align-items:flex-start;text-align:left}
/* услуги: название с ценой слева, стрелки «выше/ниже», «Изменить» и «Убрать» — справа */
.sp-svc-list{list-style:none}
.sp-svc-row{border-top:1px solid var(--line2);padding:6px 0}
.sp-svc-row:first-child{border-top:none}
.sp-svc-top{display:flex;align-items:center;gap:8px}
.sp-svc-name{overflow-wrap:anywhere}
.sp-svc-acts{flex:none}
.sp-svc-gap{display:inline-block;width:var(--h-sm);flex:none}
.sp-svc-up .ic{transform:rotate(180deg)}
.sp-svc-fields{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:0 12px}
/* записи клиентов: время визита крупно слева, под ним день (кроме «Предстоящих» — там заголовки дней) */
.bk-when{flex:none;width:64px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.bk-time{font-size:22px;line-height:1.1;color:var(--g800)}
.bk-day{margin:16px 0 8px;color:var(--ink2)}
.bk-day:first-child{margin-top:0}
.bk-phone .btn{height:var(--h-sm);padding:0 12px;font-size:14px}
/* строки с значком (машина, «предложили другое время») — значок рядом с текстом, а не над ним */
.bk-row .o-line.row{display:flex}
.bk-moved{align-items:flex-start}
.bk-moved .ic{margin-top:3px}
@media(max-width:700px){
  .sp-svc-top{flex-wrap:wrap}
  .sp-svc-acts{margin-left:auto}
  .sp-svc-fields{grid-template-columns:1fr}
  .bk-when{width:auto;flex-direction:row;align-items:baseline;gap:8px;flex:1 1 100%}
  .bk-phone .btn{height:var(--h)}
  /* три сегмента «Новые · Предстоящие · Прошедшие» — в одну строку на всю ширину */
  #bk-seg{display:flex;width:100%;flex-wrap:nowrap}
  #bk-seg > *{flex:1 1 auto;padding:0 6px;gap:4px;font-size:13px}
  #bk-seg .o-seg-n{margin-left:2px}
}

/* === Запись в сервис (web-map) === js/map.js, js/map-view.js, js/map-sheets.js: карточка магазина с записью,
   метка «Не зарегистрирован в WayParts», легенда в «Слоях», подсказка «это вы?» на «Странице магазина» */
/* «Принимает запись» — значок цветом точек WayParts */
.map-cd-book{color:var(--ink)}
.map-cd-book .ic{color:var(--g600)}
/* «Записаться» — главное действие точки: во всю ширину карточки, «Товары» и «Маршрут» — строкой под ней */
.map-cd-acts .btn-primary{flex:1 1 100%}
/* легенда: серый кружок — как точки OpenStreetMap и мест от пользователей на карте */
.map-legend{display:flex;gap:8px;align-items:flex-start}
.map-legend-dot{flex:none;width:14px;height:14px;margin-top:3px;border-radius:50%;border:1.5px solid var(--ink3);background:var(--bg)}
/* на компьютере «Слоёв» нет — легенда строкой в правом нижнем углу карты (слева внизу — подпись источников).
   Уже половины карты без 170px — правее подсказки «Здесь много точек» по центру; нажатия проходят к карте */
.map-legend-float{position:absolute;right:12px;bottom:12px;z-index:3;max-width:min(340px,calc(50% - 170px));margin:0;padding:8px 12px;border-radius:var(--r);background:var(--bg);box-shadow:var(--sh);color:var(--ink2);pointer-events:none}
@media(max-width:700px){
  .map-legend-float{display:none}
}
.map-twin p{color:var(--ink)}

/* ==================== редактор этикеток (js/label-editor.js) ====================
   Холст — --mist, этикетка белая с тенью. Сетка (1 мм — --line2, 5 и 10 мм — --line), штриховка
   «не печатается» (правые и нижние 0,4 мм) и пунктир поля 1 мм — под этикеткой и вне .lbl: на
   печать не попадают. Выбор и ручки — --g600, направляющие — --g500. Подвал с «Сохранить»
   прилипает к низу окна — виден и на 1024 × 768 без прокрутки. */
.le{display:flex;flex-direction:column;gap:12px}
.le-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.le-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 16px}
.le-top .field{margin-bottom:0}
.le-name{flex:1 1 240px;max-width:440px}
.le-seg{flex-wrap:wrap}
.le-seg > [disabled]{opacity:.5;cursor:not-allowed}
.le-draft{align-items:center;flex-wrap:wrap;margin-bottom:0}
.le-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.le-left{min-width:0;display:flex;flex-direction:column;gap:8px}
.le-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.le-sep{display:inline-block;width:1px;height:24px;margin:0 2px;background:var(--line2)}
.le-zoom{min-width:64px;font-variant-numeric:tabular-nums}
.le-snap{padding:0}
.le-menu-wrap{position:relative}
.le-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:20;min-width:210px;display:flex;flex-direction:column;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg)}
.le-menu > button{display:block;padding:8px 10px;border-radius:8px;font-size:14px;text-align:left}
.le-menu > button:hover,.le-menu > button:focus-visible{background:var(--mist);outline:none}
.le-canvas{position:relative;height:clamp(320px,calc(100vh - 340px),640px);overflow:auto;background:var(--mist);border:1px solid var(--line2);border-radius:var(--r);outline:none}
.le-canvas:focus-visible{box-shadow:0 0 0 3px var(--g200)}
.le-stage{position:relative;min-width:100%;min-height:100%}
.le-sheetbg{position:absolute;background:var(--bg);box-shadow:var(--sh)}
.le-grid{position:absolute;overflow:visible;pointer-events:none}
.le-g1{fill:none;stroke:var(--line2);stroke-width:1}
.le-g5{fill:none;stroke:var(--line);stroke-width:1}
.le-hatch-l{stroke:var(--line);stroke-width:2}
.le-edge{fill:url(#le-hatch)}
.le-pad{fill:none;stroke:var(--g300);stroke-width:1;stroke-dasharray:4 3}
.le-paper{position:absolute;transform-origin:0 0;pointer-events:none}
.le-paper .lbl{background:transparent}
.le-over{position:absolute}
.le-hit{position:absolute;touch-action:none}
.le-free .le-hit,.le-free .le-hit-edge{cursor:move}
/* рамка ловит касания только полосами контура: внутри неё палец прокручивает холст */
.le-hit-frame{pointer-events:none}
.le-hit-edge{position:absolute;pointer-events:auto;touch-action:none}
.le-empty{position:absolute;border:1px dashed var(--line);pointer-events:none}
.le-empty-t{position:absolute;left:0;top:100%;margin-top:2px;padding:0 4px;border-radius:4px;white-space:nowrap;color:var(--ink3);background:var(--mist)}
.le-sel{position:absolute;outline:1.5px solid var(--g600);pointer-events:none}
.le-h{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%);background:var(--bg);border:1.5px solid var(--g600);border-radius:2px;pointer-events:auto;touch-action:none}
.le-h-nw{left:0;top:0;cursor:nwse-resize}.le-h-n{left:50%;top:0;cursor:ns-resize}.le-h-ne{left:100%;top:0;cursor:nesw-resize}
.le-h-e{left:100%;top:50%;cursor:ew-resize}.le-h-se{left:100%;top:100%;cursor:nwse-resize}.le-h-s{left:50%;top:100%;cursor:ns-resize}
.le-h-sw{left:0;top:100%;cursor:nesw-resize}.le-h-w{left:0;top:50%;cursor:ew-resize}
.le-guide{position:absolute;background:var(--g500);pointer-events:none}
.le-guide-v{top:-8px;bottom:-8px;width:1px}
.le-guide-h{left:-8px;right:-8px;height:1px}
.le-tip{position:absolute;z-index:3;padding:2px 8px;border-radius:6px;white-space:nowrap;background:var(--ink);color:var(--bg);pointer-events:none}
.le-status{line-height:1.45}
/* правая колонка и предупреждения перерисовываются при выборе элемента: якорем прокрутки их не брать,
   иначе браузер «подвинул» бы страницу, и второе касание попало бы в соседний элемент */
.le-side{min-width:0;display:flex;flex-direction:column;gap:12px;overflow-anchor:none}
.le-msgs{overflow-anchor:none}
.le-panel{display:flex;flex-direction:column}
.le-list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto;margin-bottom:12px}
.le-row{display:grid;grid-template-columns:22px auto minmax(0,1fr);align-items:center;gap:8px;min-height:36px;padding:4px 8px;border:1px solid transparent;border-radius:8px;text-align:left;font-size:14px}
.le-row:hover{background:var(--mist)}
.le-row.on{border-color:var(--g300);background:var(--g100)}
.le-row:focus-visible,.le-msg:focus-visible{outline:2px solid var(--g500);outline-offset:1px}
.le-row-n{color:var(--ink3);font-variant-numeric:tabular-nums}
.le-row-name{font-weight:600;white-space:nowrap}
.le-row-v{color:var(--ink2)}
.le-props{padding-top:12px;border-top:1px solid var(--line2)}
.le-props-h{margin-bottom:8px}
.le-geo,.le-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px}
.le-num{text-align:right;font-variant-numeric:tabular-nums}
.le-step{display:flex;align-items:center;gap:6px}
.le-step .input{width:90px}
.le-short{width:auto;min-width:96px}
.le-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.le-bcinfo{margin:-4px 0 8px}
.le-warn-t{color:var(--amber)}
.le-presets{display:flex;flex-wrap:wrap;gap:6px}
.le-hint{margin:-4px 0 10px 28px}
.le-calib{margin-top:16px;padding-top:12px;border-top:1px solid var(--line2)}
.le-offrow .le-offn{width:80px;flex:none}
.le-msgs:empty{display:none}
.le-msgs ul{list-style:none;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:var(--r);font-size:14px}
.le-err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger)}
.le-warn{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber)}
.le-err + .le-warn{margin-top:8px}
.le-msg{font:inherit;color:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px}
.le-foot{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;background:var(--bg);border-top:1px solid var(--line)}
.le-foot-note{flex:1 1 100%}
.le-remember{padding:0}
@media(max-width:1180px){
  .le-body{grid-template-columns:minmax(0,1fr) 280px}
}
/* планшет и узкое окно программы: правая колонка — под холстом */
@media(max-width:900px){
  .le-body{grid-template-columns:minmax(0,1fr)}
  .le-list{max-height:200px}
}
/* сенсорный моноблок: кнопки обычной высоты, ручка 14 px с зоной касания 40 px, поля 44 px */
@media(pointer:coarse){
  .le-tools .btn-sm{height:var(--h);padding:0 14px}
  .le-tools .btn-icon.btn-sm{width:var(--h);padding:0}
  .le-h{width:14px;height:14px}
  .le-h::before{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}
  /* зона касания — больше наружу, чем внутрь: середину невысокого элемента можно взять и тащить */
  .le-h-n::before{transform:translate(-50%,calc(-50% - 10px))}
  .le-h-s::before{transform:translate(-50%,calc(-50% + 10px))}
  .le-h-e::before{transform:translate(calc(-50% + 10px),-50%)}
  .le-h-w::before{transform:translate(calc(-50% - 10px),-50%)}
  .le-h-nw::before{transform:translate(calc(-50% - 10px),calc(-50% - 10px))}
  .le-h-ne::before{transform:translate(calc(-50% + 10px),calc(-50% - 10px))}
  .le-h-se::before{transform:translate(calc(-50% + 10px),calc(-50% + 10px))}
  .le-h-sw::before{transform:translate(calc(-50% - 10px),calc(-50% + 10px))}
  .le .input,.le .select{height:var(--h)}
  .le-row{min-height:var(--h)}
}
@media(max-width:700px){
  /* касса: на телефоне видно 8 результатов («Показаны первые 8 — уточните запрос»), на компьютере — 20 */
  #o-results > .o-res:nth-child(n+9){display:none}
  /* «Папки» и «Сканер» у поля кассы — значками 44 px: поле ввода остаётся широким */
  .o-q-btn{flex:none;width:var(--h);padding:0}
  .o-q-btn .o-q-btn-t{display:none}
  /* папки кассы: плитки в две колонки, крошки — «‹ Назад» и название папки */
  .wh-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wh-fb-back{display:inline-flex;height:var(--h)}
  .wh-fb-path .wh-crumb,.wh-fb-path .wh-crumb-sep{display:none}
  .wh-fb-crumbs > .wh-crumb{min-height:var(--h)}
  /* склад: папка — во всю ширину под поиском */
  .s-tools .o-search{min-width:0;flex:1 1 100%}
  .s-folder{max-width:none;width:100%;flex:1 1 100%}
  #s-select,#s-mkbc .btn,.wh-bar .btn-sm,.wh-view .btn-sm,.o-bulk .btn-sm,.wh-facts .btn-sm{height:var(--h)}
  /* тихий ряд — две колонки: четыре-пять кнопок не растягиваются в столбик на пол-экрана */
  .wh-bar{margin-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .wh-bar .btn-sm{justify-content:flex-start;padding:0 8px;white-space:normal;text-align:left;line-height:1.25}
  /* «Добавить товар» и «Обновить цены и остатки из файла» — во всю ширину, длинная подпись переносится */
  .s-top-acts{width:100%}
  .s-top-acts .btn{flex:1 1 100%;white-space:normal;height:auto;min-height:var(--h);text-align:center}
  /* выбранные товары: полоса действий — липкая снизу, над нижним меню; кнопки прокручиваются в ней */
  .o-bulk{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:65;display:block;margin:0;padding:8px 16px;border-width:1px 0 0;border-radius:0;background:var(--bg);box-shadow:0 -6px 16px -10px rgba(5,31,32,.25)}
  .o-bulk-head{justify-content:space-between}
  .o-bulk-acts{flex-wrap:nowrap;overflow-x:auto;padding-top:6px;scrollbar-width:none}
  .o-bulk-acts .btn{flex:none}
  body.s-bulk-on{padding-bottom:calc(68px + 116px + env(safe-area-inset-bottom))}
  /* окно поверх экрана — на весь экран снизу вверх */
  .wh-sheet{align-items:flex-end;padding:0}
  .wh-sheet-card{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  /* папки: действия — в строку под именем */
  .wh-frow{flex-wrap:wrap}
  .wh-facts{width:100%;justify-content:flex-start}
  .wh-facts .btn-icon{width:var(--h)}
  .wh-frow.wh-depth-2{padding-left:26px}
  .wh-frow.wh-depth-3{padding-left:38px}
  /* ячейки: «Несколько сразу» столбиком, подпись над «с … по …» */
  .wh-range-row{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}
  .wh-range-row .label{grid-column:1/-1}
  .wh-place-code{font-size:26px}
  .o-inv-cell .input{height:var(--h)}
  .s-chip-x{width:36px;height:36px}
}

/* «Переезд» (js/office-move.js): одна колонка до 760 px, плитки источников, крупные числа проверки */
.mv-col{max-width:760px}
.mv-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mv-tile{display:flex;align-items:flex-start;gap:12px;min-height:88px;padding:14px 16px;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--bg);color:var(--ink)}
.mv-tile:hover{border-color:var(--g300);background:var(--mist)}
.mv-tile:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
.mv-tile-ic{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--g100);color:var(--g700)}
.mv-tile-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mv-tile-name{font-size:16px;font-weight:700}
.mv-past-row{gap:10px}
.mv-past-row .grow{display:flex;flex-direction:column;gap:2px}
.mv-list{margin:8px 0 0 20px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.mv-guide p:first-child{margin-top:0}
.mv-more summary{display:flex;align-items:center;gap:6px;min-height:var(--h);list-style:none;cursor:pointer}
.mv-more summary .ic{flex:none;transition:transform .15s}
.mv-more[open] > summary .ic{transform:rotate(180deg)}
.mv-link{display:inline;padding:0;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mv-help a{text-decoration:underline;text-underline-offset:3px}
.mv-stores{display:flex;flex-wrap:wrap;gap:0 18px}
.mv-connected .select{max-width:520px}
/* полоса без итога — бежит, пока сервер не назвал «сколько из скольких» */
.mv-bar-run i{width:30%;animation:mv-run 1.4s ease-in-out infinite}
@keyframes mv-run{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.mv-bar-run i{animation:none;width:100%;opacity:.5}}
/* файлы переноса */
.mv-file{align-items:flex-start;gap:10px}
.mv-file > .ic{margin-top:3px}
.mv-file .grow{display:flex;flex-direction:column;gap:2px;flex:1 1 0}
.mv-fname{overflow-wrap:anywhere}
.mv-file-acts{flex:none}
.mv-broken .btn{white-space:normal;height:auto;min-height:var(--h-sm);padding-top:6px;padding-bottom:6px;text-align:left;overflow-wrap:anywhere}
/* кнопки загрузки файлов переезда — длинные («Загрузить import.xml и offers.xml (или .zip)»): на телефоне переносятся, а не раздвигают страницу */
.mv-pick{max-width:100%;white-space:normal;height:auto;min-height:var(--h);padding-top:8px;padding-bottom:8px;line-height:1.3;text-align:left}
.mv-cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
/* разметка таблицы: колонка файла, примеры, «Это…» */
.mv-map-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.otable.mv-cols td{vertical-align:middle}
.otable.mv-cols th:nth-child(n+2),.otable.mv-cols td:nth-child(n+2){text-align:left;white-space:normal}
.mv-cols td:last-child{width:40%}
.mv-cols tr.mv-col-on td:first-child{box-shadow:inset 3px 0 0 var(--g500)}
.mv-samples span{display:inline-block;max-width:100%;margin:0 6px 2px 0;padding:1px 6px;border-radius:6px;background:var(--mist);font-size:13px;overflow-wrap:anywhere}
.mv-prev td,.mv-prev th{white-space:nowrap;text-align:left!important}
.mv-seg-wrap{flex-wrap:wrap}
/* проверка: четыре крупных числа */
.mv-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mv-num{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--mist)}
.mv-num-v{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--g800)}
.mv-num-t{font-size:14px;color:var(--ink2)}
.mv-debt{display:grid;grid-template-columns:minmax(0,1fr) 190px 110px;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line2)}
.mv-debt:first-child{border-top:none}
.mv-debt-who span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.mv-debt-sum{text-align:right}
.mv-debt-phone{height:var(--h-sm)}
.mv-must b{color:var(--ink)}
.mv-need input{outline:2px solid var(--amber);outline-offset:2px}
.mv-nested{margin:0 0 4px 28px}
/* поле наценки стоит внутри <label class="check"> — правило .check input (18×18) его не сжимает */
.check .mv-pct-in{display:inline-block;flex:none;width:76px;height:var(--h-sm);margin:0 4px;padding:0 8px;text-align:right;accent-color:auto;cursor:text;vertical-align:middle}
.mv-facts{display:flex;flex-direction:column;gap:6px;font-size:14px}
.mv-probs{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto}
.mv-prob{padding:4px 0;border-top:1px solid var(--line2);overflow-wrap:anywhere}
.mv-prob:first-child{border-top:none}
.mv-apply{white-space:normal;height:auto;min-height:var(--h-lg);text-align:left}
/* итог */
.mv-verify > summary{font-size:16px}
.mv-vt td:first-child{white-space:normal;text-align:left}
.mv-vt tr.mv-off td{background:var(--danger-bg)}
.mv-known{display:flex;flex-direction:column}
.mv-known-row{border-top:1px solid var(--line2)}
.mv-known-row:first-child{border-top:none}
.mv-known-row > summary{font-size:14px}
.mv-order{padding:6px 0;border-top:1px solid var(--line2)}
.mv-order:first-child{border-top:none}
.mv-back-bar{padding-top:0}
/* баннер «Переезд» над «Складом» (M.banner): значок, текст, «Начать переезд» / «Продолжить»
   и «Скрыть навсегда» — одной строкой (≤900 px — кнопки под текстом, ≤700 — телефонная раскладка);
   тон — .card-soft или .card-warn (перенос не закончен) */
.s-move{display:flex;align-items:center;gap:14px}
.s-move-t{min-width:0}
.s-move-go,.s-move-x{flex:none}
.s-move-line{align-items:center}
/* «Продажи»: перенесённые из прошлой программы */
.o-imp-badge{font-weight:500}
.o-ret-old td{color:var(--ink3)}
.o-rc{display:flex;flex-direction:column;gap:4px;min-width:220px;flex:1 1 220px}
.o-rc .input{height:var(--h-sm)}
.o-paid-pick{align-items:flex-end}

@media(max-width:900px){
  /* баннер «Переезд» на планшете и в узком окне программы: в одну строку с двумя кнопками тексту
     оставалось 190–310 px, и карточка вырастала выше подсказки «Настройте магазин». Текст — во всю
     ширину рядом со значком (44 px + промежуток 14), кнопки — рядом под ним, от края текста */
  .card.s-move{flex-wrap:wrap;row-gap:12px}
  .s-move-t{flex:1 1 calc(100% - 60px)}
  .s-move-go{margin-left:58px}
}
@media(max-width:760px){
  .mv-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mv-map-top{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  /* баннер «Переезд» на телефоне: значок, текст и крестик 44 px в ряд, кнопка — во всю ширину под ними */
  .card.s-move{flex-wrap:wrap;align-items:flex-start;gap:12px;padding:14px 8px 14px 14px}
  .s-move-t{flex:1 1 0}
  .s-move .s-move-x{order:1;width:var(--h);height:var(--h);padding:0;margin:-8px 0 -8px -4px}
  .s-move .s-move-x span{display:none}
  .s-move-go{order:2;flex:1 1 100%;margin:0 6px 0 0}
  /* «Переезд» на телефоне: плитки столбиком, кнопки не ниже 44 px, таблица колонок — карточками */
  .mv-tiles{grid-template-columns:minmax(0,1fr)}
  .mv .btn-sm{height:var(--h)}
  .mv-broken .btn{height:auto;min-height:var(--h)}
  .check .mv-pct-in{height:var(--h)}
  .mv .seg > *{height:auto;min-height:var(--h)}
  .mv-more summary{min-height:var(--h)}
  .mv-file{flex-wrap:wrap}
  .mv-file-acts{width:100%;padding-left:28px}
  .mv-del-t{display:none}
  .mv-cat-grid{grid-template-columns:minmax(0,1fr)}
  .otable.mv-cols thead{display:none}
  .otable.mv-cols,.otable.mv-cols tbody,.otable.mv-cols tr,.otable.mv-cols td{display:block;width:100%}
  .otable.mv-cols tr{margin-bottom:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r)}
  .otable.mv-cols td{padding:3px 0;border:none}
  .otable.mv-cols tr.mv-col-on{border-color:var(--g300)}
  .otable.mv-cols tr.mv-col-on td:first-child{box-shadow:none}
  .mv-cols td:last-child{width:100%}
  .mv-debt{grid-template-columns:minmax(0,1fr) auto}
  .mv-debt-phone,.mv-debt-sp{grid-column:1/-1;grid-row:2}
  .mv-debt-sp{display:none}
  .mv-debt-phone{height:var(--h)}
  .mv-num-v{font-size:24px}
  .mv-link{display:inline-block;min-height:var(--h);line-height:var(--h)}
  .o-rc .input{height:var(--h)}
  .o-paid-pick .btn-sm,.o-ret-ask .btn-sm{height:var(--h)}
}

/* === Помощь и документы в «Настройках», «Я ищу» (e6fde0) === */
/* «О WayParts» под вкладками «Настроек» магазина — то, что у гостя и частника в подвале: у магазина
   подвала нет (app.js renderFooter). Тихо: тонкая линия сверху и мелкий шрифт, без карточки. Ссылки и
   раскрывашка «Документы» — классы подвала (.ftr-links, .ftr-docs, .ftr-more): на телефоне у них свои
   правила (ссылки под палец, документы списком), и в «Настройках» они работают так же. */
.p-about{margin-top:32px;padding-top:14px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:6px}
.p-about-h{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink3)}
.p-about-req{color:var(--ink3);font-size:13px}
/* «Заказы» → «Запросы»: «Покупатели ищут» · «Я ищу» — ссылками, блоком, чтобы под ним не было строки текста */
.rq-seg{display:flex;width:max-content;max-width:100%}
/* «Спросить у магазинов» в пустой проценке: кнопка, форма и «Запрос отправлен» — по очереди в слоте .pc-ask
   под «Ничего не найдено», не внутри него (текст пустого блока переписывает ответ поставщиков). Нижний
   отступ пустого блока переезжает под слот: кнопка стоит там же, где стояла бы в самом блоке, а форма
   встаёт на её место без пустой полосы сверху */
.pc-empty-ask .empty{padding-bottom:0}
.pc-ask{padding:20px 0 48px}
/* ошибка сервера — над кнопками формы */
.pc-ask-form .ai-note{margin-bottom:12px}
@media(max-width:700px){
  /* на телефоне два списка — пополам во всю ширину */
  .rq-seg{width:100%}
  .rq-seg > *{flex:1 1 0;min-width:0;padding:0 8px}
  /* Без подвала у магазина нет его запаса в 74 px под кнопкой помощника. Сейчас помощник выключен;
     включат — на витрине магазина кнопка не ляжет на последний товар */
  body.role-store:has(#chat-fab) #app{padding-bottom:74px}
}
.rq-seg .o-tab-count{flex:none}
@media(max-width:440px){
  /* у «Покупатели ищут» число заявок без ответа: на узком телефоне значки списков убираем, отступы
     и шрифт чуть меньше — «Покупатели ищут» и число (и двузначное) помещаются в свою половину и на 360 px */
  .rq-seg:has(.o-tab-count) > *{padding:0 6px;gap:4px;font-size:13px}
  .rq-seg:has(.o-tab-count) > * > .ic{display:none}
}

/* === Гибкий поиск (e6fde0) === */
/* Подсветка найденного в названии (WP.ui.hlHtml): мятная подложка, текст и жирность — как у самой строки. */
mark.hl{background:var(--g100);color:var(--ink);font-weight:inherit;padding:0 1px;margin:0 -1px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Тихая строка над похожими (P.searchNoteHtml): «Похоже, вы искали: …», «Точно так не нашли — похожие товары». */
.fz-note{padding:6px 10px;margin:0 0 8px;font-size:13px;line-height:1.4}
.fz-note > .ic{margin-top:1px}
#o-results > .fz-note + .orow{border-top:none;padding-top:0}
.o-inv-res > .fz-note{margin:8px 0}
.wh-pick > .fz-note{margin:8px 12px 0}
@media(max-width:700px){
  /* строка стоит первой в #o-results: восьмая строка товара остаётся видна (правило «первые 8» считает детей) */
  #o-results > .fz-note ~ .o-res:nth-child(9){display:grid}
}
/* Длинный скан без пробелов (код маркировки «Честного знака» с 2D-сканера, GS1-128, вставленная строка)
   переносится внутри строки «ничего нет» и «Штрихкод … не найден», а не раздвигает кассу за край телефона;
   .o-empty-line — то же под списками «Склада», «Опта» и ячеек («По запросу «…» ничего не найдено») */
#o-results > .small, .o-inv-none, #wp-found .small, .fz-note, .wh-link-row > span, .o-empty-line{overflow-wrap:anywhere;min-width:0}
.wh-link-row .mono{word-break:break-all}

/* === Витрина по тарифу (e6fde0) === */
/* Баннер «Витрина заполнена: N товаров ждут места» / «На витрине есть свободные места» над «Складом»
   (pages-office.js paintShowcaseBanner) — раскладка как у баннера «Переезд» (.s-move): значок, текст,
   кнопки и «Скрыть» одной строкой; ≤900 px — кнопки под текстом, ≤700 — крестик 44 px, кнопки во всю ширину */
.s-show{display:flex;align-items:center;gap:14px}
.s-show-t{min-width:0}
.s-show-acts,.s-show-x{flex:none}
/* окно «Заполнить витрину»: способ и пояснение к нему столбиком, радио — у первой строки */
.s-fill-row{align-items:flex-start}
.s-fill-row input{margin-top:2px}
.s-fill-hint{display:block;margin-top:2px}
.s-fill-folder{display:block;width:100%}
@media(max-width:900px){
  .card.s-show{flex-wrap:wrap;row-gap:12px}
  .s-show-t{flex:1 1 calc(100% - 60px)}
  .s-show-acts{margin-left:58px}
}
@media(max-width:700px){
  .card.s-show{flex-wrap:wrap;align-items:flex-start;gap:12px;padding:14px 8px 14px 14px}
  .s-show-t{flex:1 1 0}
  .s-show .s-show-x{order:1;width:var(--h);height:var(--h);padding:0;margin:-8px 0 -8px -4px}
  .s-show .s-show-x span{display:none}
  .s-show-acts{order:2;flex:1 1 100%;margin:0 6px 0 0}
  .s-show-acts .btn{flex:1 1 auto}
}

/* === Свои окна: вопрос, ввод, сообщение (u-web-dialogs) === */
/* WP.ui.confirm / prompt / alert (js/dialogs.js) поверх WP.ui.sheet: на компьютере — карточка до 440 px, кнопки
   справа внизу (действие — крайнее справа); на телефоне — лист снизу, как у sheet, кнопки во всю ширину столбиком,
   действие сверху — под большим пальцем, «Отмена» под ним */
@media(min-width:701px){
  .ui-dlg .o-modal-card{width:min(100%,440px)}
}
.ui-dlg .ui-sheet-body{display:flex;flex-direction:column;gap:12px}
.ui-dlg-text{color:var(--ink2)}
.ui-dlg-text:empty{display:none}
.ui-dlg-text p + p{margin-top:8px}
.ui-dlg-field{margin:0}
.ui-dlg-note{margin-top:6px}
.ui-dlg-steps{padding-left:22px;color:var(--ink2)}
.ui-dlg-steps li + li{margin-top:6px}
.ui-dlg-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:4px}
@media(max-width:700px){
  .ui-dlg-acts{flex-direction:column-reverse}
  .ui-dlg-acts .btn{width:100%}
  /* тост — над листом вопроса, а не поверх его заголовка */
  body.ui-dlg-open .toast{bottom:auto;top:calc(12px + env(safe-area-inset-top))}
}

/* === Свой выпадающий список (u-web-select) ===
   js/select.js: настоящий <select> остаётся в разметке источником значения, но скрыт (.wsel-src); рядом —
   кнопка .wsel с теми же классами (вид закрытого поля — от .select и его соседей), открытый список — .wsel-pop:
   на компьютере выпадает у поля (как .le-menu), на телефоне — лист снизу (как WP.ui.sheet). Слой 95: выше шапки,
   нижней панели, чата и всплывашек, ниже тоста; внутри окна .o-modal список живёт в слое самого окна. */
.select:disabled{opacity:.5;cursor:not-allowed}
.wsel-src{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important;box-shadow:none!important}
.wsel{color:var(--ink);text-align:left;font-weight:400;line-height:1.3}
.wsel[aria-expanded="true"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A6B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E")}
.wsel-box{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.wsel-box > *{grid-area:1/1;min-width:0}
.wsel-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsel-v:empty::before{content:"\00a0"}
.wsel-sz{visibility:hidden;height:0;overflow:hidden;white-space:nowrap}
.wsel-sz > span{display:block}
.wsel-pop{position:fixed;z-index:95;display:flex;flex-direction:column;width:max-content;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);color:var(--ink);font-size:15px;line-height:1.35;overflow:hidden}
.wsel-find{flex:none;padding-bottom:6px}
.wsel-find .input{height:40px}
.wsel-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.wsel-list{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;outline:none;scrollbar-width:thin;scrollbar-color:var(--g300) transparent}
.wsel-o{position:relative;display:flex;align-items:center;min-height:40px;padding:8px 34px 8px 10px;border-radius:8px;cursor:pointer;overflow-wrap:anywhere;user-select:none}
.wsel-t{flex:1 1 auto;min-width:0}
.wsel-o.on{background:var(--mist)}
.wsel-kb .wsel-o.on{box-shadow:inset 0 0 0 2px var(--g400)}
.wsel-o[aria-selected="true"]{background:var(--g100);color:var(--g800);font-weight:600}
.wsel-o[aria-selected="true"].on{background:var(--g100)}
.wsel-kb .wsel-o[aria-selected="true"].on,.wsel-o[aria-selected="true"]:hover{background:var(--g200)}
/* галочка у выбранного — цветом палитры через маску (без своей картинки у каждого из 2 000 пунктов) */
.wsel-o[aria-selected="true"]::after{content:"";position:absolute;right:10px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--g600);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 4.8 4.8L19.5 6.5'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 4.8 4.8L19.5 6.5'/%3E%3C/svg%3E") center/18px no-repeat}
.wsel-o[aria-disabled="true"]{color:var(--ink3);opacity:.6;cursor:default}
.wsel-o[aria-disabled="true"].on{background:none}
.wsel-o[aria-selected="true"] .hl{background:var(--g200)}
.wsel-gh{padding:10px 10px 4px;font-size:13px;font-weight:600;color:var(--ink3)}
.wsel-g:first-child .wsel-gh{padding-top:4px}
.wsel-empty{padding:10px;font-size:14px;color:var(--ink3)}
@media(pointer:coarse){.wsel-o{min-height:44px}}
/* телефон: лист снизу во всю ширину, затемнение — как у окон .o-modal */
.wsel-dim{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end;background:color-mix(in srgb,var(--ink) 60%,transparent);touch-action:none}
.wsel-dim .wsel-pop{position:relative;width:100%;max-height:70vh;max-height:70dvh;padding:14px 12px calc(12px + env(safe-area-inset-bottom));border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;animation:chatin .18s ease;touch-action:auto}
.wsel-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px 8px}
.wsel-head .h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsel-dim .wsel-find{padding:0 0 8px}
.wsel-dim .wsel-find .input{height:var(--h)}
/* с поиском лист постоянной высоты: не прыгает при вводе, и поле поиска остаётся над клавиатурой */
.wsel-dim .wsel-has-q{height:70vh;height:70dvh}
.wsel-dim .wsel-o{min-height:48px;font-size:16px}

/* === Единицы измерения: длина и литры (u-web-units) === */
/* Строка чека товара по длине: поле шире (влезает «12,35»), подпись «м» — внутри той же рамки, справа от числа */
.qty-dec input{width:54px;text-align:right;padding-right:2px}
.qty-u{font-size:14px;color:var(--ink3);padding-right:4px;flex:none}
/* строка чека по длине: длина своей строкой (с «м» и «−/+» она шире штучной), цена и сумма — под ней, без наложения */
.crow.crow-frac{grid-template-areas:"t t x" "q q q" "p p s"}
.crow.crow-frac .crow-q{justify-self:start}
/* «Рекомендуем взять» у метров и литров — единица рядом с полем */
.o-buy-u{margin-left:6px}

/* === Помощь: картинки (help) === js/pages-legal.js (FIGS, figHtml, figs, zoom), img/help/*, tools/help-shots.mjs
   Текст ответа — не шире 68ch (.faq-t), картинка — до ширины карточки: снимок экрана в 68ch не читается.
   Плашка «Увеличить» — строкой под картинкой, а не поверх: поверх она закрыла бы рамки у края кадра. */
.faq .faq-t{max-width:68ch}
.faq-fig{margin:12px 0}
.faq-zoom{display:block;position:relative;width:fit-content;max-width:100%;padding:0;border:1px solid var(--line2);
  border-radius:var(--r);overflow:hidden;background:var(--mist);cursor:zoom-in;text-align:left;color:var(--g700)}
.faq-zoom picture{display:block}
.faq-zoom img{display:block;max-width:100%;height:auto;background:var(--bg)}
.faq-zoom:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
.faq-zoom-hint{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:28px;padding:4px 10px;
  font-size:13px;line-height:1.3;color:var(--g700);background:var(--mist);border-top:1px solid var(--line2)}
.faq-zoom:hover .faq-zoom-hint{color:var(--ink)}
.faq-fig figcaption{margin-top:6px;max-width:68ch;font-size:13px;line-height:1.45;color:var(--ink3)}
/* окно увеличения: шире обычного окна, картинка прокручивается (и пальцем, и стрелками после Tab).
   Прокручивается только сама картинка: тело окна — сжимающаяся колонка, и карточка окна (на телефоне — лист
   92 % экрана с заголовком в 1–4 строки) не прокручивается второй раз поверх неё */
.help-zoom .o-modal-card{width:min(1200px,96vw)}
.help-zoom .ui-sheet-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.help-zoom-box{overflow:auto;min-height:0;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);touch-action:pan-x pan-y pinch-zoom;
  border:1px solid var(--line2);border-radius:var(--r);background:var(--bg)}
.help-zoom-box img{display:block;max-width:none;height:auto;margin:0 auto}
.help-zoom-box:focus-visible{outline:2px solid var(--g500);outline-offset:2px}
/* мышь: картинка не шире окна — прокрутка только колесом вниз (вбок колесо не крутит); в обе стороны — на сенсорных экранах */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
  .help-zoom-box img{max-width:100%}
}
@media(max-width:700px){
  .help-zoom .o-modal-card{width:100%}
  .help-zoom-box{flex:0 1 auto;max-height:none}
}

/* === Оценки и отзывы о продавцах (js/reviews.js) === */
.rv-stars{display:inline-flex;gap:1px;line-height:1;font-size:16px;color:var(--line);letter-spacing:0}
.rv-stars .rv-s.on{color:var(--star)}
.rv-stars.rv-sm{font-size:14px}
.rv-chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.2;color:var(--ink);white-space:nowrap}
.rv-chip .rv-star-one{color:var(--star);font-size:14px}
a.rv-chip:hover b{text-decoration:underline}
.rv-sum{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.rv-big{text-align:center;min-width:110px}
.rv-avg{font-size:40px;font-weight:700;line-height:1;color:var(--ink)}
.rv-big .rv-stars{font-size:20px;margin-top:6px}
.rv-bars{flex:1;min-width:180px;display:grid;gap:4px}
.rv-bar-row{display:grid;grid-template-columns:34px 1fr 32px;align-items:center;gap:8px}
.rv-bar{height:8px;border-radius:4px;background:var(--line2);overflow:hidden}
.rv-bar span{display:block;height:100%;background:var(--star)}
.rv-list{display:grid}
.rv-item{padding:14px 0;border-top:1px solid var(--line2)}
.rv-item:first-child{border-top:0;padding-top:0}
.rv-text{white-space:pre-wrap;overflow-wrap:anywhere}
.rv-reply{background:var(--mist);border-radius:var(--r);padding:10px 12px;border-left:3px solid var(--g300)}
.rv-acts .btn{padding-left:6px;padding-right:8px}
.rv-picker{gap:4px}
.rv-pick{font-size:34px;line-height:1;width:48px;height:48px;border:0;background:none;color:var(--line);cursor:pointer;border-radius:var(--r);padding:0}
.rv-pick.on{color:var(--star)}
.rv-pick:hover{background:var(--mist)}
.rv-pick:focus-visible{outline:2px solid var(--g500);outline-offset:1px}
@media (max-width:520px){.rv-pick{width:44px;height:44px;font-size:30px}.rv-avg{font-size:34px}}
.dlg-rate + .dlg-report{margin-left:0}
#sl-rating:empty{display:none}

/* === Режим ТСД (tsd-…, js/office-tsd.js): крупно — терминал держат одной рукой, экран 4–6 дюймов === */
.tsd-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.tsd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.tsd-tile{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);color:var(--ink);text-decoration:none}
.tsd-tile:hover,.tsd-tile:focus-visible{border-color:var(--g400);background:var(--mist)}
.tsd-tile svg{flex:none;color:var(--g600)}
.tsd-tile-t{display:flex;flex-direction:column;gap:2px;font-size:17px}
.tsd-scan{display:flex;gap:8px;margin-top:12px}
.tsd-input{flex:1;min-width:0;height:var(--h-lg);font-size:18px}
.tsd-kbd{flex:none;width:var(--h-lg);height:var(--h-lg);padding:0;justify-content:center}
.tsd-big{padding:14px 16px;border:1px solid var(--g300);border-radius:var(--r-lg);background:var(--g100)}
.tsd-big-t{font-size:17px}
.tsd-big-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:8px}
.tsd-big-n{font-size:30px;font-weight:700;line-height:1.1;color:var(--ink)}
.tsd-big-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tsd-big-acts .btn:nth-child(3):last-child{grid-column:1/-1}
.tsd-big-acts .btn{min-height:var(--h-lg);font-size:17px;justify-content:center;white-space:nowrap}
.tsd-diff{display:inline-block;padding:2px 10px;border-radius:99px;font-weight:700;font-size:15px;white-space:nowrap}
.tsd-diff.is-short{background:var(--danger-bg);color:var(--danger)}
.tsd-diff.is-extra{background:var(--amber-bg);color:var(--amber)}
.tsd-diff.is-same{background:var(--g100);color:var(--g700)}
.tsd-cellnow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 14px;border:1px solid var(--g300);border-radius:var(--r-lg);background:var(--bg)}
.tsd-cell-code{font-size:24px;font-weight:700}
.tsd-row.is-cur{background:var(--mist)}
.tsd .orow{min-width:0}
.tsd .orow > .grow{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.tsd .orow-btn{width:100%;border-left:0;border-right:0;border-bottom:0;background:none;font:inherit;color:inherit;padding-left:4px;padding-right:4px}
.tsd .chip.is-on{background:var(--g100);border-color:var(--g300);color:var(--g800)}
.tsd-foot{position:sticky;bottom:0;display:flex;flex-direction:column;align-items:center;margin:16px -4px 0;padding:10px 4px;background:var(--bg);border-top:1px solid var(--line2)}
.tsd-set summary{cursor:pointer;min-height:var(--h);display:flex;align-items:center}
@media(max-width:700px){
  .is-tsd > div:first-child,.is-tsd > #office-tabs{display:none}
  .is-tsd{padding-top:10px}
  .is-tsd .tsd.card-pad{padding:12px}
  .tsd-tiles{grid-template-columns:1fr}
  .tsd-foot{bottom:calc(var(--bottombar-h, 64px) + env(safe-area-inset-bottom, 0px))}
}

/* === audit:F касание === телефон и сенсорный моноблок у прилавка (программа шире 700 px) */
@media (max-width:700px),(pointer:coarse){
  .btn-sm{min-height:var(--h)}
  .btn-icon.btn-sm{width:var(--h)}
  button.chip,a.chip,.map-chip{min-height:var(--h)}
  .seg{padding:2px}
  .seg > *,.seg-sm > *{height:auto;min-height:40px}
  .pw-eye{width:var(--h);height:var(--h);right:0}
  .photo-mv{position:relative}
  .photo-mv::after{content:"";position:absolute;inset:-6px 0}
  .photo-x::after{content:"";position:absolute;inset:-6px}
  .hint-badge{position:relative}
  .hint-badge::after{content:"";position:absolute;inset:-10px 0}
}
/* === /audit:F касание === */

/* === audit:F подсказки === подсказка «?» (js/hints.js), строка под полем, скрытый заголовок */
.label-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.label-row .label{margin-bottom:0}
.hint-q{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;padding:0;margin-left:6px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--bg);color:var(--g600);font:700 13px/1 var(--font);vertical-align:middle;position:relative;cursor:pointer}
.label-row .hint-q{margin-left:0}
.hint-q:hover,.hint-q[aria-expanded="true"]{background:var(--g100);border-color:var(--g600);color:var(--g800)}
.hint-q:focus-visible,.hint-badge:focus-visible{outline:3px solid var(--g500);outline-offset:2px}
@media(pointer:coarse){.hint-q{width:26px;height:26px;margin-left:10px;margin-right:4px}.hint-q::after{content:"";position:absolute;inset:-9px}}
button.badge{font-family:inherit}
button.badge:not(.badge-line){border:0}
.hint-badge{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.hint-pop{position:fixed;z-index:125;width:max-content;max-width:min(320px,calc(100vw - 16px));padding:12px 40px 12px 14px;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--sh-lg);font-size:14px;line-height:1.45;color:var(--ink);text-align:left;white-space:normal}
.hint-pop:focus{outline:none}
.hint-pop-t{font-weight:700;margin-bottom:2px}
.hint-pop-more{display:inline-block;margin-top:8px;font-weight:600;color:var(--g600);text-decoration:underline;text-underline-offset:3px}
.hint-pop-x{position:absolute;top:4px;right:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--ink2)}
.hint-pop-x:hover{background:var(--mist)}
.hint-sheet-text{font-size:15px;line-height:1.5}
.field-hint{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--ink3)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media print{.hint-q,.hint-pop{display:none!important}}
/* === /audit:F подсказки === */

/* === audit:S === каркас и навигация: «Избранное» и «Сообщения» подписями в шапке гостя и частника,
   «Витрина» подписью в шапке телефона магазина, разделы «Помощи» */
/* «Избранное» и «Сообщения» — значками на 1020px и уже (как «Карта», блок карты выше) */
@media(max-width:1020px){.hdr-acts .hdr-fav span,.hdr-acts .hdr-msg > span:not(.nbadge){display:none}.hdr-acts .hdr-fav,.hdr-acts .hdr-msg{width:var(--h);padding:0}}
/* на экранах с поиском — уже на 1180px: иначе на 1021–1180px поле поиска сжимается примерно до 225px */
@media(max-width:1180px){.hdr-top.has-search .hdr-acts .hdr-fav span,.hdr-top.has-search .hdr-acts .hdr-msg > span:not(.nbadge){display:none}.hdr-top.has-search .hdr-acts .hdr-fav,.hdr-top.has-search .hdr-acts .hdr-msg{width:var(--h);padding:0}}
/* администратор площадки (частник с «Жалобами» в шапке): на экранах с поиском — значками на любой ширине,
   иначе поле поиска на 1280px сжимается до 266px, на 1181px — до 247px. У администратора магазина
   «Избранного» и «Сообщений» в шапке нет — его правило не задевает */
.hdr-top.has-search:has(.hdr-acts a[href="#/admin"]) .hdr-acts .hdr-fav span,.hdr-top.has-search:has(.hdr-acts a[href="#/admin"]) .hdr-acts .hdr-msg > span:not(.nbadge){display:none}
.hdr-top.has-search:has(.hdr-acts a[href="#/admin"]) .hdr-acts .hdr-fav,.hdr-top.has-search:has(.hdr-acts a[href="#/admin"]) .hdr-acts .hdr-msg{width:var(--h);padding:0}
/* телефон магазина: домик «Витрина» с подписью; на экранах с поиском — значком, поле поиска нужнее */
@media(max-width:700px){
  .hdr-top:not(.has-search) .hdr-home{width:auto;padding:0 12px;gap:6px}
  .hdr-top.has-search .hdr-home span{display:none}
  .hdr-top.has-search .hdr-home{width:var(--h);padding:0}
}
/* «Помощь»: заголовок раздела над его ответами — крупнее и темнее вопросов, чтобы раздел находился глазом;
   первый ответ раздела — без черты сверху, черта отделяет ответы друг от друга */
.faq-group{margin:20px 0 6px}.faq-group:first-child{margin-top:0}
.faq .faq-group{font-size:17px;font-weight:700;color:var(--g800)}
.faq .faq-group + details{border-top:0}
/* «Написать в поддержку» (кнопка и #/help?to=form): над формой остаются заголовок карточки и строка под ним —
   на телефоне страница докручена до низа, и без отступа заголовок резало краем экрана */
#help-box{scroll-margin-top:96px}
/* выбранная кнопка шапки («Настройки», «Сообщения», «Карта», «Избранное», домик «Витрина») — подложка --g100 и полоса
   --g600 снизу, как у вкладки (.tabs a.on); рамки нет, чтобы не путать с мягкой .btn-soft «Разместить» рядом (приёмка r1) */
.hdr-acts a[aria-current],.hdr-home.on{background:var(--g100);border-color:transparent;color:var(--g800);font-weight:700;box-shadow:inset 0 -3px 0 var(--g600)}
/* === /audit:S === */

/* === audit:B === покупатель: поиск, объявление, продавец, карта, запись (контракт аудита 03.10.2026, §4) */
/* B2. «Списком / На карте» на телефоне: видна одна кнопка — та, на которую переключиться, с подписью */
@media(max-width:560px){
  .s-view span{display:inline}
  .s-view > .on{display:none}
  .s-view > button{padding:0 12px}
}
@media(max-width:380px){
  .s-views{flex-wrap:wrap}
}
/* B4. Объявление: «Этот же номер у других продавцов» — третьим элементом сетки, под объявлением;
   на телефоне — под карточкой продавца. Области — только когда этот блок есть (.has-also): иначе
   сетка держала бы пустую строку и лишний отступ 24 px под объявлением */
.listing-layout.has-also{grid-template-areas:"main side" "also side";grid-template-rows:auto 1fr}
.listing-layout.has-also > .listing-main{grid-area:main}
.listing-layout.has-also > .listing-side{grid-area:side}
.listing-layout.has-also > .listing-also{grid-area:also}
@media(max-width:900px){
  .listing-layout.has-also{grid-template-areas:"main" "side" "also";grid-template-rows:none}
}
/* B12. Главное фото — кнопка «Увеличить»: метка в углу, окно с фото крупно */
.gallery-zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;color:inherit}
.gallery-zoom:focus-visible{outline:3px solid var(--g500);outline-offset:-3px}
.gallery-zoom-hint{position:absolute;right:8px;bottom:8px;border:1px solid var(--line2);border-radius:8px;box-shadow:var(--sh)}
.gallery-zoom:hover .gallery-zoom-hint{color:var(--ink)}
.gallery-big{display:flex;justify-content:center;background:var(--mist);border-radius:var(--r)}
.gallery-big img{display:block;max-width:100%;max-height:80vh;max-height:80dvh;object-fit:contain}
/* B7. Страница магазина на телефоне: кнопки сеткой в две колонки, «Записаться» и «Поделиться» во всю ширину;
   есть ссылка «На карте» — заглушка мини-карты не нужна */
@media(max-width:700px){
  .sl-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sl-acts .sl-book,.sl-acts [data-share]{grid-column:1/-1}
  .sl-acts > .btn,.sl-acts > .soc-btn{width:100%;justify-content:center}
  .sl-has-maplink .sl-map{display:none}
}
/* B8. «На карте» и «Маршрут» — кнопками с рамкой: сдвиг под тихие кнопки больше не нужен */
.map-links{margin-left:0}
/* B5. «Город — после региона» в узкой колонке фильтров на компьютере — в две строки, а не обрезанным «после рег…»
   (свой список js/select.js: кнопка стоит сразу за скрытым select) */
.search-aside #sf-city + .wsel{height:auto;min-height:var(--h);padding-top:8px;padding-bottom:8px}
.search-aside #sf-city + .wsel .wsel-v{white-space:normal}
/* === /audit:B === */

/* === audit:P === */
/* частник, вход, форма товара, сообщения (контракт аудита 03.10.2026, §5) */
@media(max-width:700px){
  /* P15: шапка переписки на телефоне — «Назад» и имя собеседника первой строкой,
     «Оценить» и «Пожаловаться» — второй, справа */
  .dlg-head > .grow{order:0;flex:1 1 180px}
  .dlg-head .dlg-rate,.dlg-head .dlg-report{order:1}
  .dlg-head .dlg-rate{margin-left:auto}
  .dlg-head .dlg-rate ~ .dlg-report{margin-left:0}
  /* «Отправить» — один значок (подпись .hide-mobile): поле ввода шире */
  .chat-input .btn{width:var(--h);padding:0}
}
/* === /audit:P === */

/* === audit:T === «Настройки» магазина и профиль частника (pages-profile.js, notifier.js, office-move.js, pages-tariffs.js) */
/* T11: «Не сохранено» перед кнопкой сохранения (в форме-карточке кнопка стоит строкой, в ряду — флекс) */
form > [data-unsaved]{margin-right:10px;vertical-align:middle}
/* T15: «На витрине N из M» и «?» витрины — одним рядом */
.plan-count .hint-q{margin-left:2px}
/* T16: строка под «Что у вас» — вплотную к чипам */
#sp-kinds .kinds-field{margin-bottom:6px}
/* T8: строка «что где» над списком уведомлений — отступ от плашки состояния */
.notify-where{margin-top:12px}
/* T10: стрелки «выше / ниже» и «×» услуги не сливаются; пустое место у края — той же ширины, что кнопка */
.sp-svc-acts > :is(.btn-icon,.sp-svc-gap) + :is(.btn-icon,.sp-svc-gap){margin-left:8px}
@media (max-width:700px),(pointer:coarse){.sp-svc-gap{width:var(--h)}}
/* T12: выбранный способ пробивать чек — заливкой и полосой слева */
.o-who-item:has(input:checked){background:var(--g100);box-shadow:inset 3px 0 0 var(--g600)}
/* T18: опасная зона — белая карточка с красной рамкой и красным заголовком */
.card-danger{background:var(--bg);border-color:var(--danger-line)}
.card-danger h2{color:var(--danger)}
/* T20: значок оферты — слева от текста и на телефоне (там у .row перенос) */
#tariffs-how .items-start{flex-wrap:nowrap}
#tariffs-how .items-start > .ic{flex:none;margin-top:2px}
#tariffs-how .items-start > span{min-width:0}
/* T21: плитки «Переезда» — рамка нажимаемого и стрелка справа; наведение темнее рамки, а не светлее */
.mv-tile{border-color:var(--line-strong)}
.mv-tile:hover{border-color:var(--g500)}
.mv-tile > .ic:last-child{margin-left:auto;align-self:center}
@media(max-width:700px){
  /* T5: строки «Моих объявлений» — название рядом с фото во всю ширину, три кнопки ровной сеткой */
  .my-row > .grow{flex:1 1 0}
  .my-actions > .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
  .my-actions .btn-sm{padding:0 6px}
  /* T8: «Прислать проверочное уведомление» шире карточки (у .btn nowrap) — во всю ширину и с переносом, как .pay-form .btn */
  #notify-box [data-notify="test"]{width:100%;white-space:normal;height:auto;min-height:var(--h);padding-top:8px;padding-bottom:8px;line-height:1.25;text-align:center}
}
@media(max-width:640px){
  /* T3: пять вкладок частника — без значков и плотнее, подписи целиком (до 640 px — как сетка 2+3 выше) */
  .profile-tabs-5 a > .ic{display:none}
  .profile-tabs-5 a{font-size:14px;padding:10px 8px}
}
/* T5: на 360 px ячейка около 95 px — «Показать» со значком не входит (у .btn nowrap), значки прячем */
@media(max-width:380px){.my-actions .btn-sm > .ic{display:none}}
/* === /audit:T === */

/* === audit:C === касса, продажи, заказы, записи (контракт аудита 03.10.2026, §7) */
/* «В долг» на кассе — жёлтая, а не тёмная, как «Наличные» и «Перевод»: деньги не получены (C4) */
.o-pay-seg > [data-pay="debt"].on{background:var(--amber-bg);color:var(--amber);box-shadow:inset 0 0 0 2px var(--amber)}
/* «В чек» не уже соседних кнопок: по ней попадают с первого раза (C5; высоту даёт блок «касание») */
.o-res .btn-sm[data-add]{min-width:88px}
/* нижняя полоса телефона: подпись «Итого · наличными» — кнопка к «Как платят» (C6) */
.o-sticky-total{min-height:var(--h);padding:0;text-align:left;cursor:pointer}
.o-sticky-lbl{text-decoration:underline dotted;text-underline-offset:3px}
/* блок «Покупатель, телефон» под «Оформить продажу» (C2): первое поле — не вплотную к заголовку */
.o-buyer > .field:first-of-type{margin-top:4px}
/* низкое окно на компьютере — окно программы для Windows (900×600), ноутбук: касса плотнее, чтобы «Оформить
   продажу» с одной строкой в чеке была видна без прокрутки (C2). Имя магазина — рядом с «Касса», «Как платят» и
   «Получено наличными» — слева от своих полей, цена строки — одной строкой с полем; поля и кнопка те же */
@media (min-width:701px) and (max-height:700px){
  #app .section-sm:has(#o-cart){padding-top:12px}
  #app .section-sm:has(#o-cart) > .row-between{margin-bottom:8px}
  #app .section-sm:has(#o-cart) > .row-between > div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
  #app .section-sm:has(#o-cart) > #office-tabs{margin-bottom:8px}
  #o-cart{padding-top:14px;padding-bottom:14px}
  #o-cart > .row-between{margin-bottom:4px}
  #o-cart .crow{padding:6px 0}
  #o-cart .cprice-wrap{display:inline-flex;align-items:center;gap:6px}
  #o-foot > .row-between.mt-16{margin-top:8px}
  #o-foot .field{margin-bottom:8px}
  #o-foot > .field.mt-12{margin-top:8px}
  #o-foot > .field:has(#o-payment),#o-cash-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 10px}
  #o-foot > .field:has(#o-payment) > .label,#o-cash-field > .label{margin:0}
  #o-foot > .field:has(#o-payment) > #o-pay-hint,#o-cash-field > .field-hint,#o-cash-field > #o-change{grid-column:1/-1}
  #o-pay{height:var(--h)}
}
/* выгрузка и «Заканчивается» — справа от периода одной группой (C14) */
.sl-tools{justify-content:flex-end}
/* записи: «За час до визита здесь появятся…» — по ширине кнопок, столбец не раздвигает (C19) */
.o-order-side > .bk-later{width:0;min-width:100%}
/* число новых на вкладке — красное, как на значке меню (C23) */
.o-tab-count{background:var(--danger)}
@media(max-width:700px){
  #office-tabs a > .o-tab-count{margin-left:6px}
  .o-order-side > .bk-later{flex:1 1 100%;width:auto;min-width:0}
}
/* раскрытый чек в «Продажах» — своей плашкой: видно, где кончается одна продажа и начинается другая (C24) */
.sale-details{background:var(--mist);border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
/* === /audit:C === */

/* === audit:W === склад, приход, где купить, опт (контракт аудита 03.10.2026, §8) */
/* ряд «Склада» — кнопками с рамкой: отрицательный отступ был для тихих кнопок без рамки */
.wh-bar{margin-left:0}
/* «Цены по наценке» и её «?» — одной ячейкой ряда (на телефоне ряд — сетка в две колонки) */
.wh-bar-q{display:inline-flex;align-items:center;min-width:0}
/* «Выбрать несколько»: у строк нет кнопок и нет пустого столбца (строку правки с colspan не трогаем) */
.o-stock.s-selecting .o-acts{display:none}
.o-stock.s-selecting th:last-child,.o-stock.s-selecting tr[data-id] > td:last-child{display:none}
/* полоса выбора: пары «На витрину · Только на склад» и «На опт · Убрать с опта» — отдельно от соседей */
.o-bulk-gap{margin-left:12px}
/* форма «Изменить»: «Удалить» — последней, справа */
.s-edit-acts .s-edit-del{margin-left:auto}
/* «Шаблоны этикеток»: готовые — «Для товаров» и «Для ячеек» */
.wl-sub{margin:6px 0 4px}
/* окно 1000 px и уже: список готовых — рядами с переносом; подзаголовок — своей строкой, а не хвостом соседнего шаблона */
@media(max-width:1000px){.wl-list .wl-sub{flex:1 1 100%}}
/* «Опт»: «?» о колонках — рядом с кнопками файла; «не задана» в столбце оптовой цены — словами, не жирной ценой */
.sp-file-acts .hint-q{align-self:center}
.op-wp .price > .muted3{font-weight:400}
@media(max-width:700px){
  /* строка «Склада»: кнопки — две колонки 50/50 во всю ширину карточки (minmax(0,…) — колонки ровно пополам,
     даже когда «Принять поставку» шире половины: тогда подпись переносится в две строки) */
  .table-cards td:last-child:not([data-label]) > .o-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .table-cards .o-acts .btn{width:100%;justify-content:center;height:auto;min-height:var(--h);padding:4px 10px;white-space:normal;line-height:1.2;text-align:center}
  /* ряд инструментов — сетка в две колонки с рамками; подпись в две строки не обрезается */
  .wh-bar .btn-sm{min-height:var(--h);height:auto;padding:4px 8px}
  .wh-bar-q{display:flex}
  .wh-bar-q .btn{flex:1 1 auto;min-width:0}
  /* фильтры «Склада» переносятся, а не уезжают за край: видны все сразу */
  .s-seg-scroll{overflow:visible}
  .s-seg-scroll .seg{flex-wrap:wrap}
  /* «Мои поставщики» и «Мои аналоги» под ответом — под палец */
  .xo-bar .btn{min-height:var(--h)}
  /* «Опт»: у товара не на опте метки нет — пустой строки «Состояние» в карточке тоже */
  .op-stock td.op-st-none{display:none}
  /* «Выбранные товары / Весь склад» и «?» — одной строкой: переключатель во всю ширину, «?» справа;
     на узком экране подпись пункта переносится внутри него, а «?» не уезжает вниз */
  .op-sp-mode{flex-wrap:nowrap;gap:8px}
  .op-sp-mode .seg{flex:1 1 auto;min-width:0}
  .op-sp-mode .seg > *{flex:1 1 auto;min-width:0;padding:4px 6px;white-space:normal;text-align:center;line-height:1.2}
  .op-sp-mode .hint-q{margin:0}
  /* «Сохранить общую оптовую цену» на узком телефоне (360 px) — в две строки, а не за край карточки */
  form[data-sp-rule] .btn{height:auto;min-height:var(--h);white-space:normal;text-align:center;line-height:1.25;padding-top:8px;padding-bottom:8px}
}
/* === /audit:W === */

/* === accept:r1 === приёмка выпуска аудита, круг 1: правки по находкам проверки (цвета — только var(--…)) */
/* касса на компьютере: «Оформить продажу» ушла за край окна (body.o-pay-off, P.watchPay) — та же полоса, что на
   телефоне, прилипает к низу ровно под колонкой чека (left и width ставит P.placePayBar) */
@media(min-width:701px){
  body.o-pay-off #o-sticky-box .sticky-actions{display:flex;gap:10px;right:auto;bottom:0;border:1px solid var(--line2);border-bottom:0;border-radius:var(--r) var(--r) 0 0}
}
/* количество в чеке: фокус виден (у поля нет своей рамки); красная рамка «больше, чем на складе» остаётся */
.qty:not(.bad):focus-within{box-shadow:inset 0 0 0 2px var(--g500)}
/* «?» рядом с заголовком, а не внутри него: диктор не читает имя кнопки частью заголовка (js: .hint-head) */
.hint-head{display:flex;align-items:center}
.hint-head > h2,.hint-head > h3{min-width:0}
/* «Склад»: «Ждут места» и его «?» — одной парой (.s-seg-pair): на телефоне сегменты переносятся, и «?» не отрывается
   от своего слова. Пара — элемент .seg без своего вида; кнопка внутри выглядит как остальные сегменты */
.seg > .s-seg-pair{gap:0;height:auto;min-height:0;padding:0 6px 0 0;background:none;cursor:default}
.seg > .s-seg-pair:not(.on):not([disabled]):hover{background:none;color:var(--ink2)}
.s-seg-pair > button[data-f]{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:7px;font-size:14px;font-weight:600;color:var(--ink2);transition:.15s;white-space:nowrap;cursor:pointer}
.s-seg-pair > button[data-f]:not(.on):hover{background:var(--g100);color:var(--g800)}
.s-seg-pair > button[data-f].on{background:var(--g700);color:var(--bg)}
.s-seg-pair > button[data-f].on .o-seg-n{color:var(--g100)}
.s-seg-pair > button[data-f]:focus-visible{outline:3px solid var(--g500);outline-offset:2px}
.s-seg-pair .hint-q{margin:0 0 0 2px}
@media(max-width:700px),(pointer:coarse){
  .s-seg-pair > button[data-f]{height:auto;min-height:40px}
  #s-filter > .s-seg-pair{height:auto}
  #s-filter .s-seg-pair > button[data-f]{height:var(--h)}
}
/* форма «Изменить» на «Складе»: на компьютере ряд кнопок во всю ширину строки (7 кнопок — одним рядом, «Удалить»
   у правого края), поля — прежней ширины; на телефоне кнопки тянутся по ряду, «Удалить» не висит посередине */
tr.orow-edit .o-form{max-width:none}
tr.orow-edit .o-form .o-fields{max-width:780px}
@media(max-width:700px){
  .s-edit-acts > .btn{flex:1 1 auto}
  .s-edit-acts .s-edit-del{margin-left:0}
}
/* «Опт»: на опте пока ничего — пустой столбец «Состояние» не рисуем (op-nost ставит spPaintList) */
.op-stock.op-nost thead th:last-child,.op-stock.op-nost td.op-st-none{display:none}
/* страница магазина на компьютере: ряд «Записаться · WhatsApp · Телефон · Поделиться» и строка под ним — от колонки
   текста, как «На карте» и «Маршрут» (значок 64 px + промежуток 16 px) */
@media(min-width:701px){
  .sl-head-main > .sl-acts,.sl-head-main > .sl-acts + .tiny{margin-left:80px}
}
/* «Продажи»: пустое «Заканчивается» не забирает промежуток — «Выгрузить для бухгалтера» до правого края */
#sl-low:empty{display:none}
/* «Склад», телефон: «Цены по наценке» и её «?» — во всю ширину последним рядом, подпись не сжимается в три строки */
@media(max-width:700px){
  .wh-bar-q{grid-column:1/-1;order:1}
}
/* шапка с поиском на 1021–1180 px и шапка до 1020 px: «Карта» и «Избранное» значками в рамке, как «Сообщения»,
   а не голым значком без рамки; выбранная — без рамки (полоса снизу, блок audit:S) */
@media(max-width:1180px){
  .hdr-top.has-search .hdr-acts .hdr-map span{display:none}
  .hdr-top.has-search .hdr-acts .hdr-map,.hdr-top.has-search .hdr-acts .hdr-fav{width:var(--h);padding:0}
  .hdr-top.has-search .hdr-acts .hdr-map:not([aria-current]),.hdr-top.has-search .hdr-acts .hdr-fav:not([aria-current]){border-color:var(--line-strong)}
}
@media(max-width:1020px){
  .hdr-acts .hdr-map:not([aria-current]),.hdr-acts .hdr-fav:not([aria-current]){border-color:var(--line-strong)}
}
/* строка чека на 360 px: количество отдельной строкой, ниже «Цена [поле] ₽» и сумма — «₽» не налезает на сумму */
@media(max-width:380px){
  .crow{grid-template-areas:"t t x" "q q q" "p p s"}
  .crow .crow-q{justify-self:start}
}
/* отдельно стоящие ссылки — под палец (§0.8): хлебные крошки, «Показать все», «Все товары», «Все объявления» */
@media(max-width:700px),(pointer:coarse){
  .breadcrumb a,#home-all,.row-between > a.small.green.bold{display:inline-flex;align-items:center;min-height:var(--h)}
  /* «Настройки терминала»: галочки под палец — ТСД и телефон сенсорные */
  .tsd-set .check{min-height:var(--h);align-items:center}
}
/* узкий телефон: название в карточке — до трёх строк, «передние» и «задние» видны */
@media(max-width:420px){
  .pcard .grow > .bold.clamp2{-webkit-line-clamp:3}
}
/* «Выбрать несколько» на телефоне: действия — под кнопкой «Действия» (P.paintBulk). Свёрнутая полоса — одна строка
   и не закрывает отмечаемые строки; раскрытая — все действия сеткой в две колонки. На компьютере кнопки нет */
.o-bulk-more{display:none}
.o-bulk-more > .ic{transition:transform .15s}
.o-bulk-more[aria-expanded="true"] > .ic{transform:rotate(180deg)}
@media(max-width:700px){
  .o-bulk-head{flex-wrap:wrap}
  .o-bulk-more{display:inline-flex;margin-left:auto}
  .o-bulk:not(.open) .o-bulk-acts{display:none}
  .o-bulk.open .o-bulk-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:8px;overflow-x:visible;overflow-y:auto;max-height:50vh;max-height:50dvh}
  .o-bulk.open .o-bulk-acts .btn{width:100%;justify-content:flex-start;height:auto;min-height:var(--h);padding:4px 10px;white-space:normal;line-height:1.2;text-align:left}
  .o-bulk-acts .o-bulk-gap{margin-left:0}
  body.s-bulk-on{padding-bottom:calc(68px + var(--bulk-h,64px) + 8px + env(safe-area-inset-bottom))}
}
/* === /accept:r1 === */

/* === accept:r2 === приёмка выпуска аудита, круг 2: правки по находкам проверки (цвета — только var(--…)) */
/* галочки выбора («Выбрать несколько» на «Складе», «На опте» в «Опте», ячейки) — в подписи .wh-pickhit: на телефоне
   и сенсорном экране цель касания 44 px (§0.8), сама галочка крупнее. Карточка «Склада»: галочка у левого края текста
   карточки; «Опт» (строка «На опте»): у правого, как значения остальных строк */
@media(max-width:700px),(pointer:coarse){
  .wh-pickhit{display:inline-flex;align-items:center;justify-content:center;min-width:var(--h);min-height:var(--h);cursor:pointer}
  .wh-pickcol input{width:22px;height:22px}
  .otable td.wh-pickcol,.otable th.wh-pickcol{width:auto;min-width:var(--h)}
  .otable.table-cards td.wh-pickcol{padding-top:0;padding-bottom:0}
  .table-cards td.wh-pickcol:not([data-label]) .wh-pickhit{margin-left:-11px}
  .table-cards td.wh-pickcol[data-label] .wh-pickhit{margin-right:-11px}
}
/* «Заказы»: «Показать» в плашке «Просрочен N заказ» — ссылкой внутри предложения (button.green), строки не разъезжаются */
#or-note .ai-note button.green{font-weight:600}
/* «Склад», телефон: пустой слот кнопок над списком не даёт промежутка — «Выбрать несколько» от левого края, как фильтры */
#s-mkbc:empty{display:none}
/* форма «Изменить»: «×» у ячейки не сжимается (44 px, §0.8) — сужается поле */
.s-cell-row > .btn-icon{flex:none}
.s-cell-row > .input{flex:1 1 auto;min-width:0}
/* шесть вкладок «Настроек» владельца на телефоне — три ряда по два: каждая подпись одной строкой, ряды ровные;
   на 400 px и уже — без значков */
@media(max-width:540px){
  .profile-tabs.profile-tabs-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:400px){
  .profile-tabs.profile-tabs-6 a > .ic{display:none}
}
/* пять вкладок частника на 641–760 px — одним рядом, подписи целиком (до 640 — сетка 2+3, правила выше) */
@media(min-width:641px) and (max-width:760px){
  .profile-tabs.profile-tabs-5{display:flex;flex-wrap:nowrap;gap:0 4px}
  .profile-tabs-5 > a{flex:1 1 auto;white-space:nowrap;padding:10px 8px;font-size:14px}
  .profile-tabs-5 a > .ic{display:none}
}
/* нижняя панель на 350 px и уже: ширина ячеек — по длине подписи («Избранное», «Сообщения» не режутся),
   короткие («Касса», «Войти») отдают место, но не уже 48 px */
@media(max-width:350px){
  .bottombar .bb-item{flex:1 1 auto;min-width:48px}
}
/* «Выбрать несколько» на телефоне: свёрнутая полоса — одним рядом; «Выбрать все найденные» сжимается первой
   (в две строки), «Выбрано: N» и «Действия» целиком. На 340 px и уже — переносом, как раньше (accept:r1) */
@media(min-width:341px) and (max-width:700px){
  .o-bulk-head{flex-wrap:nowrap}
  .o-bulk-head [data-b="found"]{flex:1 1 0;min-width:0;white-space:normal;height:auto;min-height:var(--h);line-height:1.2;text-align:left;padding:4px 6px}
}
/* название товара в строке «Склада» — ссылка-блок; на телефоне и сенсорном экране цель касания выше строки текста
   (§0.8), обрезку в две строки держит span внутри (padding у самой ссылки открыл бы третью строку) */
.s-title-hit{display:block}
.s-title-hit:hover .s-title{color:var(--g700);text-decoration:underline;text-underline-offset:2px}
@media(max-width:700px),(pointer:coarse){
  .s-title-hit{position:relative;padding:11px 0;margin:-11px 0}
}
/* «Ждут места» и «?» на сенсорном экране: поле касания «?» не заходит на саму кнопку фильтра */
@media(pointer:coarse){
  .s-seg-pair .hint-q{margin-left:8px}
}
/* «Закупочная цена»: на компьютере «?» — в заголовке столбца «Закупка»; второй такой же в сводке над таблицей лишний
   (он нужен на телефоне, где таблица — карточки и заголовков нет) */
@media(min-width:701px){
  #s-summary .hint-q{display:none}
}
/* === /accept:r2 === */

/* === accept:r3 === приёмка выпуска аудита, круг 3: правки по находкам проверки (цвета — только var(--…)) */
/* «Опт»: «Загрузить оптовый прайс» и «Дополнить прайс» ведут к «Прайсу из файла» (tabSupply, to=file) — заголовок
   карточки не уходит под липкую шапку */
#sp-file-card{scroll-margin-top:96px}
/* касса на компьютере: полоса «Оформить продажу» (body.o-pay-off) лежит на блоке оплаты — щелчок по «Получено
   наличными» и Tab к полю докручивают окно так, чтобы поле не пряталось под полосой (65 px и запас) */
@media(min-width:701px){
  html:has(body.o-pay-off){scroll-padding-bottom:80px}
}
@media(max-width:700px){
  /* «Опт», строка товара карточкой: «Оптовая цена · не задана» первой строкой, «Своя цена» и «По общей цене» —
     второй, у правого края; кнопки не уходят за край карточки, таблица не прокручивается вбок */
  .table-cards td.op-wp{flex-wrap:wrap;row-gap:2px}
  .table-cards td.op-wp > .op-wp-acts{flex:1 1 100%;justify-content:flex-end;margin-top:0}
  /* ТСД на телефоне: заголовок «Склад / Мотор» и вкладки по-прежнему скрыты, а «Как это работает» (ответ tsd) —
     у правого края над карточкой скана (раньше пряталась вместе с заголовком) */
  .is-tsd > div:first-child{display:flex;justify-content:flex-end;margin-bottom:8px}
  .is-tsd > div:first-child > div{display:none}
}
/* === /accept:r3 === */

/* === accept:r4 === приёмка выпуска аудита, круг 4: правки по находкам проверки (цвета — только var(--…)) */
/* «Склад», телефон: фильтры — снова три ряда; пара «Ждут места N ?» и «Заканчиваются N» встают в один ряд */
@media(max-width:700px){
  .s-seg-scroll .seg > button[data-f],.s-seg-scroll .s-seg-pair > button[data-f]{padding:0 10px}
}
/* переключатель с ошибкой (частник не выбрал «Новое / Б/у», js: data-err-for) — красная рамка, как у полей рядом */
.seg.bad{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
/* «Добавить ячейки» → «Несколько сразу» на компьютере: «с» и «по» — по ширине слова, рядом со своими полями */
@media(min-width:701px){
  .wh-range-row{justify-content:start}
}
/* шесть вкладок «Настроек» владельца на 541–580 px — тоже три ряда по два: по три в ряд «Страница магазина» ломалась */
@media(max-width:580px){
  .profile-tabs.profile-tabs-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* фокус на названии-ссылке («Склад», «Мои объявления»): зелёная рамка вокруг самого текста, а не системная по строке
   номера детали ниже (у ссылки на телефоне поле касания шире строки) */
.s-title-hit:focus-visible{outline:none}
.s-title-hit:focus-visible .s-title{outline:3px solid var(--g500);outline-offset:2px;border-radius:4px}
@media(max-width:700px),(pointer:coarse){
  /* «Закупки»: галочка «Ставить цену продажи по наценке» — под палец (§0.8), как галочки «Настроек терминала» */
  .op-recv > .check{min-height:var(--h);align-items:center}
  /* сенсорный моноблок шире 700 px: пункты меню магазина и аватар частника в шапке — 44 px (§1.7) */
  .hdr-nav a{height:var(--h)}
  #app-header a[href="#/profile"] > .avatar{width:var(--h);height:var(--h)}
}
/* === /accept:r4 === */

/* === accept:r5 === приёмка выпуска аудита, круг 5: правки по находкам проверки (цвета — только var(--…)) */
/* «Склад», телефон: фильтры переносятся рядами, и ряд с одной кнопкой («Ждут места 2 ?» на 360–375 px) оставлял пустоту
   справа. Сегменты растягиваются по своему ряду — без дыр при любых числах (и на 390 px, когда числа станут трёхзначными).
   Класс .s-seg-scroll — только у фильтра «Склада» */
@media(max-width:700px){
  .s-seg-scroll .seg > *,.s-seg-scroll .s-seg-pair > button[data-f]{flex:1 1 auto}
}
/* «Мой гараж» на телефоне: «Схемы», «Изменить», «Убрать» — кнопки с рамкой; при 4 px между ними две соседние читались
   одной кнопкой, разрезанной надвое. 8 px — как в «Моих объявлениях» и списке сотрудников (accept:r4) */
@media(max-width:560px){
  .garage-sum-acts{gap:8px}
}
/* === /accept:r5 === */

/* === rename === переименования 04.10 (слово владельца) и «Помощь» в шапке магазина (цвета — только var(--…)) */
/* «Помощь» — значок 44 px без подписи перед «Настройками», только на компьютере (на телефоне .hdr-acts и так скрыта,
   а «?» там значит подсказку). Выбранная на #/help — как другие кнопки шапки (.hdr-acts a[aria-current], блок audit:S) */
.hdr-acts .hdr-help{flex:none;width:var(--h);padding:0}
@media(max-width:700px){
  .hdr-help{display:none}
}
/* экраны с полем поиска (поиск, объявление, продавец, карта): значок есть на любой ширине, где поле с ним не уже
   250 px (у владельца на 1200 px и шире — 272 px). Уже — на 1020 px и меньше (в окне программы 900 px поле было бы
   227 px, у администратора 175) и у администратора («Жалобы» в шапке) на 1100 px и меньше (на 1024 px — около 200) */
@media(max-width:1020px){
  .hdr-top.has-search .hdr-help{display:none}
}
@media(max-width:1100px){
  .hdr-top.has-search.has-rep .hdr-help{display:none}
}
/* выбранные «Настройки» — жирнее и были на 3 px шире: «?» слева от них сдвигался при переходе в «Настройки».
   Невидимая строка с тем же словом жирным (data-t, js/app.js) держит ширину подписи одной в обоих состояниях */
.hdr-set > span{text-align:center}
.hdr-set > span::after{content:attr(data-t);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700}
/* администратор магазина («Жалобы» в шапке) без поиска на 701–760 px: с «Помощью» шапка вылезала за край на 14 px —
   пункты меню плотнее, как на экранах с поиском той же ширины (раздел шапки выше) */
@media(min-width:701px) and (max-width:760px){
  .hdr-top.hdr-store.has-rep{gap:8px}
  .hdr-top.hdr-store.has-rep .hdr-nav a{padding:0 7px}
}
/* фильтры «Товаров»: «Не на витрине» длиннее прежнего «Скрытые» на 37 px — в окне программы (900 px) полоса уходила
   за край на 13 px и прятала «Без штрихкода». На 701–1020 px у пунктов поля по 12 px вместо 14 — снова видны все */
@media(min-width:701px) and (max-width:1020px){
  .s-seg-scroll .seg > button[data-f],.s-seg-scroll .s-seg-pair > button[data-f]{padding:0 12px}
}
/* те же фильтры на телефоне 400 px и уже: с «Не на витрине» на 360 px рядов стало пять (2-1-1-1-1) — «Заканчиваются»
   и «Не на витрине» не вставали рядом. Поля по 8 px и число ближе к слову — снова четыре ряда, на 375 px — три */
@media(max-width:400px){
  .s-seg-scroll .seg > button[data-f],.s-seg-scroll .s-seg-pair > button[data-f]{padding:0 8px}
  .s-seg-scroll .o-seg-n{margin-left:2px}
}
/* ряд инструментов «Товаров» на телефоне 400 px и уже: «инвентаризация» одним словом не входит в полкарточки (на 360 px
   вылезала за рамку, на 320 обрезалась) — «Сканер и инвентаризация» во всю ширину первым рядом; «Выгрузить товары» —
   тоже во всю ширину, чтобы под «Папками · Ячейками» не оставалось пустой клетки */
@media(max-width:400px){
  .wh-bar > a[href$="view=tsd"],.wh-bar > #wh-export{grid-column:1/-1}
}
/* === /rename === */