/* SUDBA — стили разделов магазина.
   site.css держит каркас и всё, что повторяется на каждой странице; здесь —
   то, что живёт только внутри каталога, карточки товара, корзины, оформления
   и текстовых разделов. Токены — из ds.css. */

/* ══════════════════════════════════════════════════════════════════════════
   Общее для внутренних страниц
   ══════════════════════════════════════════════════════════════════════════ */

/* Внутренние страницы начинаются сразу под шапкой, поэтому им нужен свой
   отступ: на главной эту роль играет первый экран. */
.page{padding-top:var(--sp-10)}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-body-sm);color:var(--text-third)}
.crumbs a{color:var(--text-second);border-bottom:0}
.crumbs a:hover{color:var(--paper-000)}
.crumbs span{color:var(--text-third)}

.ptitle{margin-top:var(--sp-6);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap}
.ptitle h1{font:var(--type-h1);font-size:var(--fs-display-3);letter-spacing:var(--tr-display);font-weight:var(--w-regular)}
.ptitle__n{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-third)}
.plead{margin-top:var(--sp-5);max-width:var(--max-w-text);color:var(--text-body);font-size:var(--fs-body-lg);line-height:var(--lh-relaxed)}

.hr{border:0;border-top:1px solid var(--border-hairline);margin:var(--sp-16) 0}

/* ══════════════════════════════════════════════════════════════════════════
   Каталог
   ══════════════════════════════════════════════════════════════════════════ */
.filters{
  position:sticky;top:var(--nav-h);z-index:40;
  margin:var(--sp-10) 0 var(--sp-12);
  padding:var(--sp-4) 0;
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  background:var(--bg-page);
  box-shadow:inset 0 -1px 0 var(--border-hairline);
}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;flex:1}
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  height:var(--ctl-h-sm);padding:0 var(--ctl-px-sm);
  border:0;border-radius:var(--r-full);cursor:pointer;
  font-family:var(--font-core);font-size:var(--fs-body-sm);
  color:var(--text-muted);background:var(--fill-ghost);
  box-shadow:inset 0 0 0 1px var(--border-faint);
  transition:color var(--t-control),background var(--t-control),box-shadow var(--t-control);
}
.chip:hover{color:var(--paper-000);background:var(--fill-ghost-hover)}
.chip b{font-family:var(--font-mono);font-weight:var(--w-regular);font-size:var(--fs-mono-sm);color:var(--text-third)}
/* Выбранный фильтр — инверсия в белую заливку. Так в дизайн-системе показано
   активное состояние Chip. */
.chip.is-on{background:var(--paper-000);color:var(--ink-100);box-shadow:none}
/* Активный чип инвертируется в белую заливку: счётчик на ней должен быть
   тёмным, иначе контраст падает до 3.7:1. Роль из дизайн-системы ровно
   про этот случай — текст на бумаге. */
.chip.is-on b{color:var(--text-on-paper-muted)}

.sortbox{display:flex;align-items:center;gap:var(--sp-4);flex:none}

/* Набор фильтров: на широком экране это просто содержимое панели, на узком —
   раскрывающийся блок под кнопкой «Фильтры». */
.fset{display:contents}
/* Кнопка нужна только там, где панель сворачивается. */
.fbtn{display:none}

/* Границы цены. Поля узкие: пять знаков — это уже 999 999 ₽. */
.range{display:inline-flex;align-items:center;gap:var(--sp-2)}
.range__f{width:9ch;height:var(--ctl-h-sm);padding:0 var(--ctl-px-sm);text-align:center;
  font-family:var(--font-mono);font-size:var(--fs-mono-sm)}

/* Что сейчас включено — строкой под панелью, каждый фильтр снимается своим
   крестиком. Раньше при одном включённом фильтре снять его можно было только
   тем же чипом, а про фильтр цены и наличия догадаться было нечем. */
.active{display:flex;flex-wrap:wrap;gap:var(--sp-2);width:100%}
.active:empty{display:none}
.atag{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  height:var(--ctl-h-sm);padding:0 var(--ctl-px-sm);
  border:0;border-radius:var(--r-full);cursor:pointer;
  font:inherit;font-size:var(--fs-body-sm);
  color:var(--text-display);background:rgba(77,138,232,.16);
  box-shadow:inset 0 0 0 1px var(--sapphire-mark);
  transition:background var(--t-control);
}
.atag:hover{background:rgba(77,138,232,.26)}
.atag .ic{color:var(--text-second)}
.atag--all{color:var(--text-muted);background:var(--fill-ghost);box-shadow:inset 0 0 0 1px var(--border-hairline)}
.sortbox .check,.sortbox label{white-space:nowrap}
.sortbox label{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-third)}

.catgrid{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)}
.catcount{margin-bottom:var(--sp-6);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-third)}

/* ══════════════════════════════════════════════════════════════════════════
   Карточка товара: верхний блок
   ══════════════════════════════════════════════════════════════════════════ */
.pd{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:var(--sp-16);margin-top:var(--sp-8)}

/* Кадр — кнопка: по нажатию открывается в полный размер. Выглядеть кнопкой он
   не должен, поэтому от кнопки берём только курсор и рамку фокуса. */
.gal__zoom{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:zoom-in;
}

.gal__main{
  position:relative;border-radius:var(--r-media);overflow:hidden;
  background:var(--ink-050);aspect-ratio:4/3;
}
/* Главный кадр вписываем целиком: приборы сняты в разных пропорциях, и
   обрезка отрезала бы у высоких верх и низ. */
.gal__main img{width:100%;height:100%;object-fit:contain;display:block}
.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:var(--r-full);cursor:pointer;
  background:rgba(10,11,13,.55);color:var(--text-primary);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  box-shadow:inset 0 0 0 1px var(--border-hairline);
  opacity:0;transition:opacity var(--t-control),background var(--t-control);
}
.gal__main:hover .gal__nav,.gal__nav:focus-visible{opacity:1}
.gal__nav--prev{left:var(--sp-4)}
.gal__nav--next{right:var(--sp-4)}
.gal__nav:hover{background:rgba(20,20,24,.8)}
.gal__counter{
  position:absolute;right:var(--sp-4);bottom:var(--sp-4);
  padding:4px 10px;border-radius:var(--r-full);
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-muted);
  background:rgba(10,11,13,.6);box-shadow:inset 0 0 0 1px var(--border-faint);
}
.gal__thumbs{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.gal__thumb{
  width:104px;flex:none;padding:0;border:0;cursor:pointer;
  border-radius:var(--r-sm);overflow:hidden;background:var(--ink-050);
  box-shadow:inset 0 0 0 1px var(--border-faint);
  opacity:.55;transition:opacity var(--t-control),box-shadow var(--t-control);
}
.gal__thumb img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block}
.gal__thumb:hover{opacity:.85}
.gal__thumb.is-on{opacity:1;box-shadow:inset 0 0 0 1px var(--border-strong)}

/* Правая колонка — она же блок покупки. Липкая: длинная страница товара не
   должна заставлять скроллить обратно наверх ради кнопки. */
.buy{position:sticky;top:calc(var(--nav-h) + var(--sp-6));align-self:start}
.buy__kind{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-second)}
.buy__name{margin-top:var(--sp-3);font-family:var(--font-display);font-weight:var(--w-regular);
  font-size:var(--fs-display-3);line-height:var(--lh-display);letter-spacing:var(--tr-display);color:var(--text-display)}
.buy__tag{margin-top:var(--sp-3);color:var(--text-muted)}
.buy__rate{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5)}
.buy__rate a{font-size:var(--fs-body-sm);color:var(--text-second)}

.buy__price{display:flex;align-items:baseline;gap:var(--sp-4);margin-top:var(--sp-8)}
.buy__now{font-family:var(--font-mono);font-size:var(--fs-metric);color:var(--text-display)}
.buy__old{font-family:var(--font-mono);font-size:var(--fs-mono-lg);color:var(--text-third);text-decoration:line-through}
.buy__save{
  padding:3px 9px;border-radius:var(--r-full);
  font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:#CFE6D6;box-shadow:inset 0 0 0 1px rgba(78,209,127,.35);
}

.buy__stock{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);font-size:var(--fs-body-sm);color:var(--text-muted)}
.dot{width:7px;height:7px;border-radius:var(--r-full);flex:none}
.dot--ok{background:var(--state-live);box-shadow:0 0 10px rgba(78,209,127,.6)}
.dot--warn{background:var(--state-warn);box-shadow:0 0 10px rgba(255,176,32,.5)}
.dot--off{background:var(--steel-500)}

.buy__block{margin-top:var(--sp-8)}
.buy__label{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-second);margin-bottom:var(--sp-3);display:block}
.swatches{display:flex;gap:var(--sp-3)}
.swatch{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  height:var(--ctl-h-sm);padding:0 var(--ctl-px-sm) 0 6px;
  border:0;border-radius:var(--r-full);cursor:pointer;
  font-family:var(--font-core);font-size:var(--fs-body-sm);color:var(--text-muted);
  background:var(--fill-ghost);box-shadow:inset 0 0 0 1px var(--border-faint);
}
.swatch i{width:20px;height:20px;border-radius:var(--r-full);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(0,0,0,.4)}
.swatch.is-on{color:var(--ink-100);background:var(--paper-000)}

.buy__actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);align-items:center}
.buy__actions .btn--gel{flex:1}
.buy__fav{
  width:var(--ctl-h);height:var(--ctl-h);flex:none;display:grid;place-items:center;
  border:0;border-radius:var(--r-full);cursor:pointer;
  background:transparent;color:var(--steel-300);
  box-shadow:inset 0 0 0 1px var(--border-hairline);
  transition:color var(--t-control),box-shadow var(--t-control);
}
.buy__fav:hover{color:var(--paper-000);box-shadow:inset 0 0 0 1px var(--border-strong)}
.buy__fav.is-on{color:#FF6B5D}
.buy__fav.is-on svg{fill:currentColor}

.buy__notes{list-style:none;margin:var(--sp-8) 0 0;padding:var(--sp-6) 0 0;display:flex;flex-direction:column;gap:var(--sp-4);
  box-shadow:inset 0 1px 0 var(--border-hairline)}
.buy__notes li{display:flex;gap:var(--sp-4);align-items:flex-start;font-size:var(--fs-body-sm);color:var(--text-muted)}
.buy__notes .ic{flex:none;color:var(--text-second);margin-top:1px}
.buy__notes b{display:block;color:var(--text-primary);font-weight:var(--w-medium);margin-bottom:2px}

/* ══════════════════════════════════════════════════════════════════════════
   Вкладки товара
   ══════════════════════════════════════════════════════════════════════════ */
.tabs{margin-top:var(--sp-24)}
.tabs__bar{
  position:sticky;top:var(--nav-h);z-index:30;
  display:flex;gap:var(--sp-8);overflow-x:auto;
  padding:var(--sp-4) 0;
  background:var(--bg-page);
  box-shadow:inset 0 -1px 0 var(--border-hairline);
  scrollbar-width:none;
}
.tabs__bar::-webkit-scrollbar{display:none}
.tabs__btn{
  position:relative;flex:none;
  border:0;background:none;padding:var(--sp-2) 0;cursor:pointer;
  font-family:var(--font-core);font-size:var(--fs-body);color:var(--text-second);
  white-space:nowrap;transition:color var(--t-control);
}
.tabs__btn:hover{color:var(--text-primary)}
.tabs__btn.is-on{color:var(--text-display)}
/* Активная вкладка — сапфировая линия под ней. В дизайн-системе это ровно
   тот же приём, что у засечки модельного ряда. */
.tabs__btn.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(var(--sp-4) * -1);
  height:2px;background:var(--sapphire-mark);box-shadow:0 0 12px var(--sapphire-mark-glow);
}
.tabs__panel{padding-top:var(--sp-16);display:none}
.tabs__panel.is-on{display:block}

/* Описание */
.prose{max-width:var(--max-w-text)}
.prose p{margin-bottom:var(--sp-5);line-height:var(--lh-relaxed);color:var(--text-body)}
.prose p:last-child{margin-bottom:0}

.frows{margin-top:var(--sp-16);display:grid;gap:var(--sp-10);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.frow{padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--border-hairline)}
.frow h3{font-size:var(--fs-h4);font-weight:var(--w-regular);color:var(--text-display)}
.frow p{margin-top:var(--sp-3);font-size:var(--fs-body-sm);color:var(--text-muted);line-height:var(--lh-body)}

/* Характеристики */
.specs{display:grid;gap:var(--sp-12);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));max-width:1180px}
.specs__g h3{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-second);font-weight:var(--w-medium)}
.specs__t{width:100%;border-collapse:collapse;margin-top:var(--sp-5)}
.specs__t th,.specs__t td{
  text-align:left;padding:var(--sp-4) 0;
  border-bottom:1px solid var(--border-faint);
  font-weight:var(--w-regular);vertical-align:top;
}
.specs__t th{color:var(--text-muted);font-size:var(--fs-body-sm);width:58%}
.specs__t td{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-primary);text-align:right}

.boxlist{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.boxlist li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-body-sm);color:var(--text-body)}
.boxlist .ic{flex:none;color:var(--text-third);margin-top:2px}

/* Инструкция */
.note{
  display:flex;gap:var(--sp-4);align-items:flex-start;
  max-width:var(--max-w-text);padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-card);
  background:var(--surface-card);
  box-shadow:inset 0 0 0 1px var(--border-faint),var(--edge-inset);
  color:var(--text-body);font-size:var(--fs-body-sm);line-height:var(--lh-body);
}
.note .ic{flex:none;color:var(--state-warn);margin-top:2px}

.guide{margin-top:var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-12);max-width:860px}
.guide__s h3{font-size:var(--fs-h3);font-weight:var(--w-regular);color:var(--text-display)}
.steps{list-style:none;counter-reset:s;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-5)}
.steps li{counter-increment:s;display:flex;gap:var(--sp-5);align-items:flex-start;color:var(--text-body);line-height:var(--lh-body)}
/* Номер шага — моноширинный и с ведущим нулём: числа в этом бренде всегда
   набраны как показания прибора. */
.steps li::before{
  content:counter(s,decimal-leading-zero);
  flex:none;width:34px;padding-top:2px;
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-third);
}
.docrow{
  margin-top:var(--sp-10);display:inline-flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-card);
  background:var(--fill-ghost);box-shadow:inset 0 0 0 1px var(--border-faint);
  color:var(--text-muted);font-size:var(--fs-body-sm);
}

/* Видео */
.vids{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.vid{border:0;padding:0;background:none;cursor:pointer;text-align:left;display:flex;flex-direction:column}
.vid__media{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--ink-050);aspect-ratio:4/3}
.vid__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-stage)}
.vid:hover .vid__media img{transform:scale(1.04)}
.vid__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.6));
}
.vid__play i{
  width:56px;height:56px;border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--ink-100);background:var(--paper-000);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.9);
  transition:transform var(--t-control);
}
.vid:hover .vid__play i{transform:scale(1.06)}
.vid__time{
  position:absolute;right:var(--sp-3);bottom:var(--sp-3);
  padding:3px 8px;border-radius:var(--r-xs);
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-primary);
  background:rgba(5,6,8,.72);
}
.vid__t{margin-top:var(--sp-4);font-size:var(--fs-body);color:var(--text-display)}

/* Плеер. Ролики появятся позже — сейчас модалка честно говорит, куда их
   положить, вместо того чтобы притворяться работающей. */
.lightbox{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:var(--gutter)}
.lightbox__scrim{position:absolute;inset:0;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox__box{position:relative;width:min(980px,100%);border-radius:var(--r-modal);overflow:hidden;
  background:var(--ink-100);box-shadow:var(--shadow-modal)}
.lightbox__box video{width:100%;display:block;background:#000}
/* Кадр в полный размер. Ограничение по высоте, а не по ширине: снимки приходят
   в разных пропорциях, и вертикальный кадр иначе уезжает за экран. */
.lightbox__shot{display:block;width:100%;max-height:78vh;object-fit:contain;background:#000}
.lightbox__stub{position:relative;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:var(--sp-10)}
.lightbox__stub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
/* Постер под текстом — только фактура. Без затемнения подпись ложится на
   подсвеченную панель прибора и перестаёт читаться. */
.lightbox__stub::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(5,6,8,.72),rgba(5,6,8,.92))}
.lightbox__stub div{position:relative;max-width:44ch;display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}
.lightbox__stub b{font:var(--type-h3);color:var(--text-display)}
.lightbox__stub p{font-size:var(--fs-body-sm);color:var(--text-muted);line-height:var(--lh-body)}
.lightbox__stub code{font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--steel-200);
  background:var(--surface-well);padding:3px 8px;border-radius:var(--r-xs)}
.lightbox__cap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6)}
.lightbox__cap b{font-size:var(--fs-body);color:var(--text-display);font-weight:var(--w-medium)}

/* Рецепты. Без фотографий: снимков блюд нет, а плашка-заглушка на месте
   картинки выглядела бы хуже, чем честная типографика. */
/* align-items:start — раскрытый рецепт не должен растягивать соседние карточки. */
.recs{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:start}
.rec{
  display:flex;flex-direction:column;
  padding:var(--sp-6);border-radius:var(--r-card);
  background:var(--surface-card);
  box-shadow:inset 0 0 0 1px var(--border-faint),var(--edge-inset);
}
.rec__n{font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-third)}
.rec h3{margin-top:var(--sp-3);font-size:var(--fs-h3);font-weight:var(--w-regular);color:var(--text-display)}
.rec__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.rec__meta span{
  padding:3px 9px;border-radius:var(--r-full);
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-muted);
  background:var(--fill-ghost);box-shadow:inset 0 0 0 1px var(--border-faint);
}
.rec__cut{margin-top:var(--sp-6);padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--border-faint)}
.rec__cut h4{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-second);font-weight:var(--w-medium)}
.rec__ing{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.rec__ing li{font-size:var(--fs-body-sm);color:var(--text-body)}
.rec .steps{margin-top:var(--sp-4)}
.rec .steps li{font-size:var(--fs-body-sm)}
.rec__more{margin-top:var(--sp-5);align-self:flex-start}

/* Отзывы */
.rev{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--sp-16);align-items:start}
/* Ниже липкой полосы вкладок, а не под ней: полоса занимает 72–128 px. */
.rev__sum{position:sticky;top:calc(var(--nav-h) + var(--sp-16))}
.rev__big{font-family:var(--font-mono);font-size:64px;line-height:1;color:var(--text-display)}
.rev__of{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-third)}
.rev__bars{margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.rev__bar{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-third)}
.rev__bar i{flex:1;height:3px;border-radius:2px;background:var(--alpha-line);overflow:hidden}
.rev__bar i b{display:block;height:100%;background:var(--steel-200)}
.rev__list{display:flex;flex-direction:column;gap:var(--sp-8)}
.rev__item{padding-bottom:var(--sp-8);box-shadow:inset 0 -1px 0 var(--border-faint)}
.rev__head{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.rev__who{font-size:var(--fs-body);color:var(--text-display)}
.rev__when{font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-third)}
.rev__mine{padding:2px 8px;border-radius:var(--r-full);font-size:var(--fs-label-sm);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--steel-300);box-shadow:inset 0 0 0 1px var(--border-hairline)}
.rev__text{margin-top:var(--sp-3);color:var(--text-body);line-height:var(--lh-body)}
.rev__form{margin-top:var(--sp-10);padding-top:var(--sp-8);box-shadow:inset 0 1px 0 var(--border-hairline)}
.ratepick{display:flex;gap:var(--sp-1)}
.ratepick button{border:0;background:none;padding:2px;cursor:pointer;color:var(--ink-600)}
.ratepick button.is-on{color:var(--steel-100)}
.ratepick button.is-on svg{fill:currentColor}

/* ══════════════════════════════════════════════════════════════════════════
   Формы
   ══════════════════════════════════════════════════════════════════════════ */
.form{display:flex;flex-direction:column;gap:var(--sp-5)}
.form__row{display:grid;gap:var(--sp-5);grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field>label{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-second)}
.input,.select,.textarea{
  width:100%;height:var(--ctl-h-lg);padding:0 var(--sp-4);
  border:0;border-radius:var(--r-input);outline:none;
  background:var(--surface-well);color:var(--text-primary);
  font-family:var(--font-core);font-size:var(--fs-body);
  box-shadow:var(--well-inset);
  transition:box-shadow var(--t-control);
}
.textarea{height:auto;min-height:104px;padding:var(--sp-4);resize:vertical;line-height:var(--lh-body)}
.input::placeholder,.textarea::placeholder{color:var(--text-third)}
.input:focus,.select:focus,.textarea:focus{box-shadow:var(--well-inset),var(--glow-signal)}
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:var(--sp-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239EA4AA' stroke-width='1.7' 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 var(--sp-4) center;background-size:18px;
}
.field--bad .input,.field--bad .select,.field--bad .textarea{box-shadow:var(--well-inset),0 0 0 1px var(--state-fault)}
.field__err{font-size:var(--fs-body-sm);color:var(--state-fault)}
.field__hint{font-size:var(--fs-body-sm);color:var(--text-third)}

/* Пароль с кнопкой показа. Кнопка лежит поверх поля справа, поле само оставляет
   ей место — иначе точки уезжают под иконку. */
.pass{position:relative}
.pass .input{padding-right:52px}
.pass__eye{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--text-third);
  transition:color var(--t-control);
}
.pass__eye:hover,.pass__eye[aria-pressed="true"]{color:var(--text-display)}

/* Радио-карточка: способ доставки и оплаты. Настоящий input спрятан, но
   остаётся в потоке — на нём держится и клавиатура, и :checked. */
.rcards{display:flex;flex-direction:column;gap:var(--sp-3)}
.rcard{
  position:relative;display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-5);border-radius:var(--r-card);cursor:pointer;
  background:var(--fill-ghost);
  box-shadow:inset 0 0 0 1px var(--border-faint);
  transition:box-shadow var(--t-control),background var(--t-control);
}
.rcard:hover{background:var(--fill-ghost-hover)}
.rcard input{position:absolute;opacity:0;width:0;height:0}
.rcard__mark{
  flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--r-full);
  box-shadow:inset 0 0 0 1px var(--border-strong);
  display:grid;place-items:center;
}
.rcard input:checked ~ .rcard__mark{box-shadow:inset 0 0 0 1px var(--sapphire-mark)}
.rcard input:checked ~ .rcard__mark::after{content:"";width:8px;height:8px;border-radius:var(--r-full);
  background:var(--sapphire-mark);box-shadow:0 0 10px var(--sapphire-mark-glow)}
.rcard:has(input:checked){box-shadow:inset 0 0 0 1px var(--border-strong);background:var(--fill-ghost-hover)}
.rcard input:focus-visible ~ .rcard__mark{outline:1px solid var(--border-focus);outline-offset:3px}
.rcard__t{flex:1;display:flex;flex-direction:column;gap:2px}
.rcard__t b{font-weight:var(--w-medium);color:var(--text-display)}
.rcard__t span{font-size:var(--fs-body-sm);color:var(--text-muted)}
.rcard__p{flex:none;font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-primary)}

.check{display:flex;gap:var(--sp-3);align-items:flex-start;cursor:pointer;font-size:var(--fs-body-sm);color:var(--text-muted)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__mark{
  flex:none;width:18px;height:18px;margin-top:1px;border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 1px var(--border-strong);display:grid;place-items:center;color:transparent;
}
.check input:checked ~ .check__mark{background:var(--paper-000);color:var(--ink-100);box-shadow:none}
.check input:focus-visible ~ .check__mark{outline:1px solid var(--border-focus);outline-offset:3px}
.check a{color:var(--text-primary)}

/* ══════════════════════════════════════════════════════════════════════════
   Корзина и оформление
   ══════════════════════════════════════════════════════════════════════════ */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-16);margin-top:var(--sp-10);align-items:start}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.line{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:var(--sp-6);
  padding:var(--sp-6) 0;box-shadow:inset 0 -1px 0 var(--border-hairline)}
.line:first-child{box-shadow:inset 0 1px 0 var(--border-hairline),inset 0 -1px 0 var(--border-hairline)}
.line__media{border-radius:var(--r-sm);overflow:hidden;background:var(--ink-050);border-bottom:0;display:block}
.line__media img{width:100%;aspect-ratio:4/3;object-fit:contain}
.line__info{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.line__kind{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-second)}
.line__name{font:var(--type-h3);color:var(--text-display);border-bottom:0}
.line__col{font-size:var(--fs-body-sm);color:var(--text-muted)}
.line__ctl{margin-top:auto;display:flex;align-items:center;gap:var(--sp-4);padding-top:var(--sp-4)}
.line__side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);text-align:right}
.line__sum{font-family:var(--font-mono);font-size:var(--fs-mono-lg);color:var(--text-display);white-space:nowrap}
.line__each{font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-third)}

.sum{
  position:sticky;top:calc(var(--nav-h) + var(--sp-6));
  padding:var(--sp-6);border-radius:var(--r-card);
  background:var(--surface-card);
  box-shadow:inset 0 0 0 1px var(--border-faint),var(--edge-inset);
}
.sum h2{font:var(--type-h3);margin-bottom:var(--sp-6)}
.sum__row{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.sum__row b{font-family:var(--font-mono);font-weight:var(--w-regular);color:var(--text-primary)}
.sum__row--save b{color:var(--state-live)}
.sum__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  margin-top:var(--sp-4);padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--border-hairline)}
.sum__total span{color:var(--text-body)}
.sum__total b{font-family:var(--font-mono);font-size:var(--fs-metric);font-weight:var(--w-regular);color:var(--text-display)}
.sum .btn{margin-top:var(--sp-6)}
/* Экономия относительно старой цены: подпись под итогом, а не строка внутри
   расчёта — иначе столбец не сходится. */
.sum__saved{margin-top:var(--sp-3);font-size:var(--fs-body-sm);color:var(--state-live)}
.sum__note{margin-top:var(--sp-4);font-size:var(--fs-body-sm);color:var(--text-third);line-height:var(--lh-body)}

.promo{display:flex;gap:var(--sp-2);margin-top:var(--sp-6);padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--border-hairline)}
.promo .input{height:var(--ctl-h)}
.promo .btn{margin-top:0;flex:none}
.promo__msg{margin-top:var(--sp-3);font-size:var(--fs-body-sm)}
.promo__msg.is-ok{color:var(--state-live)}
.promo__msg.is-bad{color:var(--state-fault)}

.checkout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-16);margin-top:var(--sp-10);align-items:start}
.cstep{margin-bottom:var(--sp-12)}
.cstep__h{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.cstep__n{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-third)}
.cstep__h h2{font:var(--type-h3)}
.miniline{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-3) 0;box-shadow:inset 0 -1px 0 var(--border-faint)}
.miniline img{width:64px;flex:none;border-radius:var(--r-xs);aspect-ratio:4/3;object-fit:contain;background:var(--ink-050)}
.miniline__t{flex:1;min-width:0;font-size:var(--fs-body-sm);color:var(--text-primary)}
.miniline__t span{display:block;font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-third)}
.miniline__p{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-primary);white-space:nowrap}

/* Экран «заказ принят» */
.done{max-width:640px;margin:var(--sp-24) auto var(--sp-32);text-align:center}
.done__mark{width:64px;height:64px;margin:0 auto var(--sp-8);border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--state-live);box-shadow:inset 0 0 0 1px rgba(78,209,127,.4),0 0 40px -12px rgba(78,209,127,.6)}
.done h1{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--fs-display-3);
  letter-spacing:var(--tr-display);color:var(--text-display)}
.done__num{margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-mono-lg);color:var(--steel-200)}
.done__text{margin-top:var(--sp-6);color:var(--text-muted);line-height:var(--lh-relaxed)}
.done__card{margin-top:var(--sp-10);padding:var(--sp-6);border-radius:var(--r-card);text-align:left;
  background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-faint),var(--edge-inset)}
.done__acts{margin-top:var(--sp-10);display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════════════
   Текстовые разделы: бренд и поддержка
   ══════════════════════════════════════════════════════════════════════════ */
.statement{
  font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:var(--fs-statement);line-height:var(--lh-statement);
  letter-spacing:var(--tr-tight);text-transform:uppercase;color:var(--text-display);
  max-width:20ch;
}
.cols{display:grid;gap:var(--sp-16);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
/* Контакты покупателя и комментарий к заказу приходят из формы: там бывает и
   вставленный трек-номер, и длинный адрес одной строкой. */
.cols>div>p,.cols>div>p span{min-width:0;overflow-wrap:anywhere}
.stats{display:grid;gap:var(--sp-10);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--border-hairline)}
.stat__n{font-family:var(--font-mono);font-size:var(--fs-metric);color:var(--text-display)}
.stat__n span{font-size:var(--fs-mono);color:var(--text-second);margin-left:2px}
.stat__t{margin-top:var(--sp-2);font-size:var(--fs-body-sm);color:var(--text-muted)}

.paper{
  background:var(--bg-inverse);color:var(--text-on-paper);
  border-radius:var(--r-media);padding:var(--sp-20) var(--sp-16);
}
.paper h2{color:var(--ink-100)}
.paper p{color:var(--text-on-paper-muted)}
.paper .eyebrow{color:var(--text-on-paper-muted)}

.acc{max-width:860px;border-top:1px solid var(--border-hairline)}
.acc__i{border-bottom:1px solid var(--border-hairline)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  padding:var(--sp-6) 0;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--font-core);font-size:var(--fs-body-lg);color:var(--text-display);
}
.acc__q .ic{flex:none;color:var(--text-second);transition:transform var(--t-control)}
.acc__i.is-open .acc__q .ic{transform:rotate(180deg)}
.acc__a{display:none;padding:0 0 var(--sp-6);max-width:var(--max-w-text);color:var(--text-body);line-height:var(--lh-relaxed)}
.acc__i.is-open .acc__a{display:block}

.contacts{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.ccard{padding:var(--sp-6);border-radius:var(--r-card);background:var(--surface-card);
  box-shadow:inset 0 0 0 1px var(--border-faint),var(--edge-inset)}
.ccard .ic{color:var(--text-second)}
.ccard h3{margin-top:var(--sp-4);font-size:var(--fs-h4);font-weight:var(--w-medium)}
.ccard p{margin-top:var(--sp-2);font-size:var(--fs-body-sm);color:var(--text-muted);line-height:var(--lh-body)}
.ccard a{display:inline-block;margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-display)}

/* Ряд преимуществ под каталогом на главной. */
/* Сетка карточек, которых мало: auto-fit растягивал единственную карточку на
   всю ширину ряда, и «Вы смотрели» с одним товаром выглядело сломанным. */
.grid--few{grid-template-columns:repeat(auto-fill,minmax(260px,320px));justify-content:start}

.usps{display:grid;gap:var(--sp-10);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.usp{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--border-hairline)}
.usp .ic{color:var(--text-second)}
.usp b{font-weight:var(--w-medium);color:var(--text-display)}
.usp p{font-size:var(--fs-body-sm);color:var(--text-muted);line-height:var(--lh-body)}

/* ══════════════════════════════════════════════════════════════════════════
   Узкие экраны
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .pd{grid-template-columns:1fr;gap:var(--sp-12)}
  .buy{position:static}
  .cart,.checkout{grid-template-columns:1fr;gap:var(--sp-12)}
  .sum{position:static}
  .rev{grid-template-columns:1fr;gap:var(--sp-10)}
  .rev__sum{position:static;display:flex;align-items:flex-end;gap:var(--sp-10);flex-wrap:wrap}
  .rev__bars{flex:1;min-width:240px;margin-top:0}
}

@media (max-width:720px){
  /* Цели касания на телефоне: чипы фильтров были 32 в высоту, кнопка «В
     корзину» на плитке — тоже 32, при норме 44. */
  .chip{height:44px;padding:0 var(--sp-4)}
  .chipbtn{padding:13px 16px}
  .page{padding-top:var(--sp-6)}
  .ptitle h1{font-size:var(--fs-h1)}
  /* Полоса фильтров не должна быть выше шапки: два липких блока подряд
     съедают экран телефона. С кнопкой в 44 px это ровно поля по 12. */
  .filters{top:calc(var(--nav-h) - 1px);gap:var(--sp-3);padding:var(--sp-3) 0}
  /* Полный набор фильтров занимал четверть экрана телефона и ехал вместе с
     липкой шапкой. Теперь виден только счётчик активных, набор — по нажатию. */
  .fbtn{
    display:inline-flex;align-items:center;gap:var(--sp-2);
    height:44px;padding:0 var(--sp-4);
    border:0;border-radius:var(--r-full);cursor:pointer;
    font:inherit;font-size:var(--fs-body-sm);font-weight:var(--w-medium);
    color:var(--text-primary);background:var(--fill-ghost);
    box-shadow:inset 0 0 0 1px var(--border-hairline);
  }
  .fbtn b{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-full);
    background:var(--sapphire-mark);color:var(--paper-000);
    font-size:var(--fs-label);font-weight:var(--w-medium);
  }
  .fbtn b[hidden]{display:none}
  .fset{display:none;width:100%;flex-direction:column;gap:var(--sp-4);padding-bottom:var(--sp-3)}
  .fset.is-open{display:flex}
  .sortbox{width:100%;flex-wrap:wrap}
  .sortbox .select{height:var(--ctl-h)}
  .range__f{height:44px}
  .atag{height:44px}
  .tabs{margin-top:var(--sp-20)}
  .tabs__bar{gap:var(--sp-6)}
  .tabs__panel{padding-top:var(--sp-10)}
  .form__row{grid-template-columns:1fr}
  .line{grid-template-columns:96px minmax(0,1fr);gap:var(--sp-4)}
  .line__side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .specs{gap:var(--sp-10)}
  .paper{padding:var(--sp-12) var(--sp-6)}
  .gal__thumb{width:76px}
  .hr{margin:var(--sp-12) 0}
}

/* ══════════════════════════════════════════════════════════════════════════
   Кабинет: заказы, статусы, история
   ══════════════════════════════════════════════════════════════════════════ */

/* Статус — цветом, а не только словом: в списке из двадцати заказов сотрудник
   ищет глазами «что горит», и читать каждую строку он не будет. */
.ostatus{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:4px 10px;border-radius:var(--r-full);
  font-size:var(--fs-label);letter-spacing:.04em;
  white-space:nowrap;
}
.ostatus::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
.ostatus--new{color:var(--state-info);background:rgba(126,169,212,.12)}
.ostatus--confirmed{color:var(--sapphire-mark);background:rgba(77,138,232,.12)}
.ostatus--packing{color:var(--state-warn);background:rgba(255,176,32,.12)}
.ostatus--shipped{color:var(--state-warn);background:rgba(255,176,32,.12)}
.ostatus--delivered{color:var(--state-live);background:rgba(78,209,127,.12)}
.ostatus--cancelled{color:var(--text-second);background:var(--alpha-fill)}
.ostatus--returned{color:var(--state-fault);background:rgba(255,77,61,.12)}

/* Пользовательский текст переносится где угодно: имя, адрес или комментарий из
   трёхсот знаков без пробелов растягивал страницу до 4 296 px при окне 1 440 —
   у сотрудника уезжала колонка с суммами. min-width:0 обязателен: без него
   колонка сетки не даёт содержимому сжиматься, и перенос не срабатывает. */
.otable{display:flex;flex-direction:column;border-top:1px solid var(--border-hairline)}
.orow__n,.orow__sub,.orow__d,.tline__n,.tline__d,.msg__t,.thread__n,.thread__l{
  min-width:0;overflow-wrap:anywhere}
.orow{
  display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-2);
  border-bottom:1px solid var(--border-hairline);
  border-radius:0;color:var(--text-body);
  transition:background var(--t-control),color var(--t-control);
}
a.orow:hover{background:var(--fill-ghost);color:var(--text-display)}
.orow--plain{grid-template-columns:1fr auto auto;pointer-events:none}
.orow__n{font-weight:var(--w-medium);color:var(--text-primary)}
.orow__d{font-size:var(--fs-body-sm);color:var(--text-second);white-space:nowrap}
.orow__p{font-family:var(--font-mono);color:var(--text-display);white-space:nowrap;text-align:right}
.orow__s{justify-self:start}

/* История заказа. Линия слева рисуется границей элемента списка, а не
   отдельным блоком: так она не разъезжается при переносе длинной пометки. */
.tline{list-style:none;margin:0;padding:0}
.tline li{
  position:relative;padding:0 0 var(--sp-5) var(--sp-6);
  border-left:1px solid var(--border-hairline);
  display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;
}
.tline li:last-child{border-left-color:transparent;padding-bottom:0}
.tline li::before{
  content:"";position:absolute;left:-4px;top:6px;
  width:7px;height:7px;border-radius:var(--r-full);
  background:var(--steel-500);
}
.tline__d{font-size:var(--fs-body-sm);color:var(--text-third)}
.tline__n{font-size:var(--fs-body-sm);color:var(--steel-300)}

.empty{padding:var(--sp-16) 0;text-align:center;color:var(--text-second);display:flex;
  flex-direction:column;align-items:center;gap:var(--sp-5)}

@media (max-width:720px){
  .orow{grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4)}
  .orow__d{grid-column:1;font-size:var(--fs-label)}
  .orow__s{grid-column:2;grid-row:1}
  .orow__p{grid-column:2;grid-row:2}
}

/* ══════════════════════════════════════════════════════════════════════════
   Рабочее место сотрудника
   ══════════════════════════════════════════════════════════════════════════ */

/* Плитка показателя. Своя, а не .usp с витрины: там иконка и абзац текста,
   здесь — подпись, крупное число и уточнение под ним. */
.usp__t{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-second)}
.usp__x{font-family:var(--font-mono);font-size:var(--fs-metric);line-height:1.1;color:var(--text-display)}
.usp__n{font-size:var(--fs-body-sm);color:var(--text-third);line-height:var(--lh-body)}

.chipbtn{
  border:0;cursor:pointer;
  padding:8px 14px;border-radius:var(--r-full);
  font:inherit;font-size:var(--fs-body-sm);font-weight:var(--w-medium);
  color:var(--text-muted);background:var(--fill-ghost);
  box-shadow:inset 0 0 0 1px var(--border-hairline);
  transition:color var(--t-control),background var(--t-control),box-shadow var(--t-control);
}
.chipbtn:hover{color:var(--text-display);background:var(--fill-ghost-hover)}
.chipbtn.is-on{
  color:var(--text-display);background:rgba(77,138,232,.16);
  box-shadow:inset 0 0 0 1px var(--sapphire-mark);
}

.orow--admin{grid-template-columns:1fr auto auto auto auto;cursor:pointer}
.orow--admin:hover{background:var(--fill-ghost)}
.orow__sub{display:block;font-size:var(--fs-body-sm);font-weight:var(--w-regular);color:var(--text-third)}
.orow__go{color:var(--text-third);display:flex;align-items:center}

/* Столбики выручки. Без библиотеки: это один ряд значений, и подключать ради
   него график весом в сотню килобайт незачем. Значение — в подсказке, потому
   что подписывать три сотни дней на узком экране всё равно нечитаемо. */
.chart{
  display:flex;align-items:flex-end;gap:2px;
  height:140px;padding:var(--sp-4);
  background:var(--surface-raised);border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--border-hairline);
}
.chart__b{
  flex:1;min-width:2px;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--sapphire-mark),rgba(77,138,232,.25));
  transition:opacity var(--t-control);
}
.chart__b:hover{opacity:.65}

/* ── Таблица рабочего места ──────────────────────────────────────────────
   Настоящая <table>, а не сетка из блоков: у списка заказов появились
   заголовки колонок и сортировка по ним, а заголовок колонки — это <th>, и
   никакая роль в разметке его не заменит. Скринридер читает «Сумма, 129 900 ₽»
   вместо голого числа.

   На узком экране таблица прокручивается внутри своей обёртки. Раскладывать её
   в карточки заманчиво, но display:block ломает табличную семантику ровно там,
   где она и нужна. */
.dtable-wrap{overflow-x:auto;border-top:1px solid var(--border-hairline)}
.dtable{width:100%;border-collapse:collapse;min-width:640px}
.dtable th{
  text-align:left;font-size:var(--fs-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-second);font-weight:var(--w-medium);
  padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--border-hairline);
  white-space:nowrap;
}
.dtable td{
  padding:var(--sp-4) var(--sp-2);border-bottom:1px solid var(--border-hairline);
  color:var(--text-body);vertical-align:middle;
}
.dtable td:last-child,.dtable th:last-child{text-align:right}
.dtable tbody tr{transition:background var(--t-control)}
.dtable tbody tr:hover{background:var(--fill-ghost)}
.dtable tbody tr.is-picked{background:rgba(77,138,232,.10)}
.dtable .cell-n{min-width:0;overflow-wrap:anywhere;font-weight:var(--w-medium);color:var(--text-primary)}
.dtable .cell-d{font-size:var(--fs-body-sm);color:var(--text-second);white-space:nowrap}
.dtable .cell-p{font-family:var(--font-mono);color:var(--text-display);white-space:nowrap}
.dtable .cell-pick{width:36px}
.dtable__go{
  border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;
  text-align:left;width:100%;
}
.dtable__go:hover{color:var(--text-display)}

/* Заголовок-сортировка. Стрелка показывает не «можно сортировать», а текущий
   порядок: без неё непонятно, свежие сверху или старые. */
.dtable__sort{
  border:0;background:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;
  display:inline-flex;align-items:center;gap:4px;
}
.dtable__sort:hover{color:var(--text-display)}
.dtable__sort[aria-sort]{color:var(--text-display)}
.dtable__arrow{font-size:10px;line-height:1}

.pick{width:18px;height:18px;accent-color:var(--sapphire-mark);cursor:pointer}

/* ── Сравнение ──────────────────────────────────────────────────────────
   Та же таблица, что в рабочем месте, только шапка — карточки товаров, а
   различающиеся строки подсвечены: именно они и есть повод выбрать одно, а не
   другое. Колонок не больше трёх, поэтому фиксированная ширина не нужна. */
/* Правое выравнивание последней колонки — правило списка заказов, где справа
   стоит сумма. Здесь последняя колонка это такой же прибор, как и остальные. */
.cmp td:last-child,.cmp th:last-child{text-align:left}
.cmp th[scope="col"]{vertical-align:top;padding:var(--sp-5) var(--sp-3);text-transform:none;
  letter-spacing:normal;white-space:normal}
.cmp th[scope="col"] .btn{margin-top:var(--sp-2);margin-right:var(--sp-2)}
.cmp__card{display:flex;flex-direction:column;gap:var(--sp-2);border-bottom:0;max-width:240px}
.cmp__card img{border-radius:var(--r-media);background:var(--ink-050)}
.cmp__name{font-size:var(--fs-body);font-weight:var(--w-medium);color:var(--text-display)}
.cmp__price{font-size:var(--fs-body-sm);color:var(--text-second)}
.cmp th[scope="row"]{text-transform:none;letter-spacing:normal;color:var(--text-second);
  font-weight:var(--w-regular);white-space:normal;min-width:180px}
.cmp td{color:var(--text-primary)}
.cmp__g th{
  padding-top:var(--sp-6);
  font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-third);
}
/* Подсветка различий — фоном строки, а не цветом текста: цветной текст на
   чёрном пришлось бы проверять на контраст ради подсказки, которая и так
   читается. */
.cmp tr.is-diff td{background:rgba(77,138,232,.08)}
.cmp__none{color:var(--text-third)}

/* Панель массового действия. Всплывает над списком только когда что-то
   отмечено: постоянная полоса внизу отъедала бы экран впустую. */
.bulkbar{
  position:sticky;bottom:var(--sp-4);z-index:5;
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-card);
  background:rgba(20,20,24,.92);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  box-shadow:inset 0 0 0 1px var(--border-hairline),var(--shadow-modal);
}
.bulkbar__n{font-weight:var(--w-medium);color:var(--text-display);margin-right:var(--sp-2)}

/* Панель управления списком: поиск, окно дат, порядок, обновление. */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.toolbar__grow{flex:1;min-width:220px}
.toolbar__note{font-size:var(--fs-body-sm);color:var(--text-third)}
.toolbar label{font-size:var(--fs-body-sm);color:var(--text-second)}
.count{margin-top:var(--sp-4);font-size:var(--fs-body-sm);color:var(--text-second)}
.pager{display:flex;justify-content:center;margin-top:var(--sp-6)}

/* Мелкая типографика рабочего места. Раньше стояла атрибутом style прямо в
   строках, которые собирает скрипт; с политикой содержимого без 'unsafe-inline'
   браузер такие стили не применяет. */
.panel-h{font-size:16px;margin-bottom:12px}
.sec-h{font-size:20px;margin-bottom:16px}
.sec-h--sp{margin:44px 0 8px}
.sub-h{font-size:18px;margin-bottom:12px}
.sub-h--sp{margin:28px 0 12px}
.contact--tight{line-height:1.7}
.lead-19{font-size:19px;color:var(--text-primary)}
.rec-mode{margin-top:8px;font-size:13.5px;color:var(--text-body)}
.cart-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.select--sm{height:var(--ctl-h-sm)}
.panel-h--sp{margin-top:28px}
.ocard__title{font-size:22px}
.contact{line-height:1.8}
/* Комментарий к заказу — тише основного текста, но читаемый: у --steel-400
   контраст на чёрном 4,46:1, чуть ниже порога. */
.contact__note{color:var(--text-third)}
.grow{flex:1;min-width:220px}

/* ── График ─────────────────────────────────────────────────────────────
   Подписи под столбцами: первый, последний и самый высокий. Подписать все —
   нечитаемо, не подписывать ни одного — график без единой цифры, по которому
   ничего не скажешь. */
.chartbox{margin-top:var(--sp-3)}
.chart__b{border:0;padding:0;cursor:pointer}
.chart__b.is-top{background:linear-gradient(180deg,var(--state-live),rgba(78,209,127,.25))}
.chart__b.is-on{outline:1px solid var(--text-display);outline-offset:1px}
.chart__ax{display:flex;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-3);font-size:var(--fs-body-sm);color:var(--text-third)}
.chart__val{margin-top:var(--sp-2);font-size:var(--fs-body-sm);color:var(--text-second);min-height:1.4em}

/* Шесть показателей — это две ровных строки по три, а не пять и один сирота
   на второй строке, как получалось у auto-fit. */
.usps--six{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.usps--six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.usps--six{grid-template-columns:1fr}}

@media (max-width:720px){
  .orow--admin{grid-template-columns:1fr auto}
  .orow__go{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   Переписка
   ══════════════════════════════════════════════════════════════════════════ */

.chat{display:flex;flex-direction:column;height:min(70vh,640px);
  background:var(--surface-raised);border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--border-hairline);overflow:hidden}

.chat__list{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-4)}
.chat__empty{margin:auto;color:var(--text-third);text-align:center}

.msg{align-self:flex-start;max-width:min(560px,82%);
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-4);border-radius:var(--r-md);
  background:var(--surface-card);box-shadow:inset 0 1px 0 var(--border-hairline)}
/* Свои сообщения — справа и в цвете акцента: две стороны переписки должны
   различаться с одного взгляда, а не по подписи. */
.msg--mine{align-self:flex-end;background:linear-gradient(180deg,var(--gel-3),var(--gel-4));
  box-shadow:inset 0 1px 0 var(--gel-rim-l)}
.msg__who{font-size:var(--fs-label);letter-spacing:.04em;color:var(--text-second)}
.msg__t{margin:0;line-height:var(--lh-body);white-space:pre-wrap;word-break:break-word}
.msg__time{font-size:var(--fs-label);color:var(--text-third);align-self:flex-end}
.msg--mine .msg__time{color:rgba(234,240,246,.55)}

.msg__img{display:block;border-radius:var(--r-sm);overflow:hidden;border-bottom:0}
.msg__img img{display:block;max-width:100%;height:auto}
.msg__vid{max-width:100%;border-radius:var(--r-sm)}

/* Кружок. Квадратное видео, обрезанное в круг, — форма, а не оформление:
   так его сразу узнают. */
.msg__circle{width:220px;height:220px;object-fit:cover;border-radius:var(--r-full);
  cursor:pointer;background:#000;box-shadow:0 0 0 1px var(--border-hairline)}

.msg__voice{display:flex;align-items:center;gap:var(--sp-3);min-width:200px}
.msg__play{flex:none;width:34px;height:34px;padding:0;border:0;cursor:pointer;
  border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--text-display);background:var(--fill-ghost-hover)}
.msg__wave{flex:1;height:3px;border-radius:var(--r-full);background:var(--alpha-line-strong)}
.msg__voice.is-on .msg__wave{background:var(--sapphire-mark)}
.msg__dur{font-family:var(--font-mono);font-size:var(--fs-mono-sm);color:var(--text-second)}

.msg__file{display:flex;align-items:center;gap:var(--sp-3);border-bottom:0;color:var(--text-primary)}
.msg__file span{display:flex;flex-direction:column;font-size:var(--fs-body-sm)}
.msg__file span span{font-size:var(--fs-label);color:var(--text-third)}

/* Полоса записи. Появляется над строкой ввода, чтобы кнопки «отправить» и
   «отмена» были рядом с тем, что записывается. */
.chat__rec{display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border-hairline);
  background:var(--surface-well)}
.chat__preview{width:96px;height:96px;object-fit:cover;border-radius:var(--r-full);background:#000}
.chat__preview[hidden]{display:none}
.chat__timer{font-family:var(--font-mono);font-size:var(--fs-mono-lg);color:var(--text-display)}
.chat__timer::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border-radius:var(--r-full);background:var(--state-fault);animation:sudba-pulse 1.2s infinite}

.chat__bar{display:flex;align-items:flex-end;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border-hairline)}
.chat__ic{flex:none;width:38px;height:38px;padding:0;border:0;cursor:pointer;
  border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--steel-300);background:var(--fill-ghost);
  transition:color var(--t-control),background var(--t-control)}
.chat__ic:hover{color:var(--text-display);background:var(--fill-ghost-hover)}
.chat__in{flex:1;resize:none;min-height:38px;max-height:160px;
  padding:9px var(--sp-4);border:0;border-radius:var(--r-lg);
  font:inherit;font-size:var(--fs-body-sm);color:var(--text-primary);
  background:var(--surface-input);box-shadow:var(--well-inset)}
.chat__in:focus{outline:none;box-shadow:var(--well-inset),var(--glow-signal)}

/* Список диалогов у сотрудника. */
.threads{display:flex;flex-direction:column;border-top:1px solid var(--border-hairline);
  max-height:min(70vh,640px);overflow-y:auto}
.thread{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4);
  padding:var(--sp-4);cursor:pointer;text-align:left;border:0;
  border-bottom:1px solid var(--border-hairline);background:transparent;
  font:inherit;color:var(--text-body);transition:background var(--t-control)}
.thread:hover{background:var(--fill-ghost)}
.thread.is-on{background:var(--fill-ghost-hover)}
.thread__n{font-weight:var(--w-medium);color:var(--text-primary)}
.thread__l{grid-column:1;font-size:var(--fs-body-sm);color:var(--text-third);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch}
.thread__t{font-size:var(--fs-label);color:var(--text-third);text-align:right}
.thread__b{justify-self:end;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
  display:grid;place-items:center;font-size:var(--fs-label);
  color:#fff;background:var(--sapphire-mark)}

.chatgrid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:var(--sp-6);align-items:start}
@media (max-width:900px){
  .chatgrid{grid-template-columns:1fr}
  .msg__circle{width:180px;height:180px}
}