/* Верх страницы: две зоны рядом — магазин на 70%, сессия Честного Знака на 30%. Живут порознь:
   у каждой свой выход и свой цвет состояния, и погасшая сессия больше не красит карточку кабинета.
   Оттенки — прозрачности системных цветов, новых красок не вводим. */
.sa-top { width: 74%; min-width: 640px; max-width: 100%; margin: 0 auto 10px;
    display: grid; grid-template-columns: 70fr auto 30fr; gap: 8px; align-items: stretch;
    --cz-h: 112px; }   /* высота зоны ЧЗ при выбранном магазине: под неё же её и фиксируем в списке */
.sa-store-zone, .sa-cz { display: flex; flex-direction: column; min-width: 0; padding: 7px 14px 8px;
    border: 1px solid #dee2e6; border-radius: var(--ctr-radius); background: linear-gradient(180deg,#fff,#f3f4f5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(33,37,41,.07), 0 4px 10px rgba(0,0,0,.11);
    transition: background .15s, border-color .15s, box-shadow .15s; }
/* Цвет у зон общий и решается разом: зелёные — когда ИНН сходятся и всё заполнено, жёлтые — когда
   чего-то не хватает или связка не подтверждена. Красная бывает только эта зона и только от токена. */
.sa-store-zone { --store-glass: rgba(206,238,212,.68); --store-accent: #1e9e38; --store-edge: rgba(30,158,56,.5);
    --store-depth: rgba(22,109,40,.16); --store-caret: rgba(235,250,238,.8); --store-caret-edge: rgba(30,158,56,.27);
    background: linear-gradient(180deg,rgba(250,255,251,.98),rgba(30,158,56,.16)); border-color: rgba(30,158,56,.55);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(22,109,40,.08), 0 4px 10px rgba(22,109,40,.14); }
/* Несверенный магазин: зона повторяет тон своей строки в выпадашке (жёлтый/красный вместо зелёного) */
.sa-store-zone.fit-warn { --store-glass: rgba(255,243,205,.68); --store-accent: #ffc107; --store-edge: rgba(217,164,6,.5);
    --store-depth: rgba(138,102,3,.16); --store-caret: rgba(255,252,240,.85); --store-caret-edge: rgba(217,164,6,.3);
    background: linear-gradient(180deg,rgba(255,254,248,.98),rgba(255,193,7,.2)); border-color: rgba(217,164,6,.55);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(138,102,3,.08), 0 4px 10px rgba(138,102,3,.14); }
.sa-store-zone.fit-bad { --store-glass: rgba(248,215,218,.6); --store-accent: #dc3545; --store-edge: rgba(220,53,69,.45);
    --store-depth: rgba(176,42,55,.14); --store-caret: rgba(255,248,249,.85); --store-caret-edge: rgba(220,53,69,.25);
    background: linear-gradient(180deg,rgba(255,251,251,.98),rgba(220,53,69,.13)); border-color: rgba(220,53,69,.5);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(176,42,55,.08), 0 4px 10px rgba(176,42,55,.13); }
/* Демо-магазин: серый, чтобы среди настоящих его нельзя было спутать с рабочим. Ни одна из трёх
   рабочих красок ему не подходит — он не «готов», не «недосверен» и не «сломан», он просто ненастоящий. */
.sa-store-zone.fit-demo { --store-glass: rgba(233,236,239,.72); --store-accent: #6c757d; --store-edge: rgba(108,117,125,.5);
    --store-depth: rgba(52,58,64,.14); --store-caret: rgba(248,249,250,.85); --store-caret-edge: rgba(108,117,125,.28);
    background: linear-gradient(180deg,rgba(252,252,253,.98),rgba(108,117,125,.15)); border-color: rgba(108,117,125,.5);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(52,58,64,.08), 0 4px 10px rgba(52,58,64,.12); }
/* Строка «чего не хватает» на карточке — тем же янтарным, что и подписи fit-warn в выпадашке */
.sa-store-fit { margin-top: 1px; color: #705400; font-size: 13px; font-weight: 650; }
/* Значок на шве: сходятся ли ИНН кабинета и организация Честного Знака. Красный он только сам —
   зоны от него бледнеют, но не краснеют: работать можно, просто коды могут оказаться не вашими. */
.sa-link { align-self: center; display: grid; place-items: center; width: 26px; height: 26px; flex: none;
    border: 1.5px solid rgba(30,158,56,.55); border-radius: 50%; background: #fff; color: #1e9e38;
    font: 800 13px/1 system-ui, sans-serif; cursor: help; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.sa-link.no { border-color: rgba(220,53,69,.5); color: #dc3545; }
/* «Сверять не с чем» — нейтральный серый: это вопрос, а не тревога. Тревогу рядом уже несёт зона. */
.sa-link.unknown { border-color: rgba(108,117,125,.5); color: #6c757d; }
/* Магазин не выбран: слева список кабинетов во всю высоту, а сессия и значок остаются наверху.
   Отступ значка — ровно половина зоны ЧЗ, поэтому он держится её середины без всякой сетки. */
.sa-link.top { align-self: start; margin-top: calc((var(--cz-h) - 26px) / 2); }
/* /chz_cards/ (opts.flow): зоны поровну, между ними крупная стрелка «из маркетплейса в Честный Знак» — ИНН там не сверяются */
.sa-top.sa-top-flow { grid-template-columns: 1fr auto 1fr; gap: 26px; }
.sa-flow { align-self: center; width: 88px; color: #1e9e38; filter: drop-shadow(0 2px 5px rgba(30,158,56,.35)); }
.sa-flow svg { display: block; width: 100%; height: auto; }

/* Шапка зоны: слева подпись, справа кнопки. У ЧЗ подпись стоит по центру, а по краям — отсчёт и выход. */
.sa-zone-h { display: flex; align-items: center; gap: 8px; min-height: 27px; margin-bottom: 2px; }
.sa-z-l { color: #212529; font-size: 15px; font-weight: 850; line-height: 1.2;
    letter-spacing: .2px; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.sa-zone-b { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* Карточка кабинета: слева квадрат маркетплейса, справа три строки данных. Квадрат — чёрный с янтарным,
   фирменная пара продукта: брать бренд-цвет маркетплейса значило бы завести в палитру краску,
   которой больше нигде нет, а различать пока всё равно нечего — только WB. */
.sa-store-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sa-store-main { flex: 1 1 auto; min-width: 0; }
.sa-mp { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: var(--ctr-radius);
    background: #212529; color: #ffc107; font: 800 13px/1 system-ui, sans-serif; letter-spacing: .5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 5px rgba(24,28,33,.24); }
.sa-store-name { display: flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; min-height: 31px;
    margin: 0 auto; padding: 4px 5px 4px 10px; isolation: isolate; position: relative;
    border: 1px solid var(--store-edge); border-radius: var(--ctr-radius); background: var(--store-glass); color: #1a1a1a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 4px 10px var(--store-depth);
    /* без backdrop-filter: за плашкой ровный градиент зоны, размывать нечего, а слой композиции
       лишал текст субпиксельного сглаживания — имя магазина выглядело мыльным */
    font-size: 17px; font-weight: 750; line-height: 1.25;
    transition: background-color .15s, box-shadow .15s, transform .15s; }
.sa-store-name::before { content: ""; position: absolute; z-index: -1; inset: 1px 1px auto; height: 44%;
    border-radius: var(--ctr-radius) var(--ctr-radius) 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
    pointer-events: none; }
.sa-store-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-store-name.sp-trig { margin: 0 auto; padding: 4px 5px 4px 10px; }
/* Демо-магазин списка не открывает: из него только выходят. Плашка остаётся плашкой, но без стрелки
   и без нажатия — правый отступ выравниваем с левым, его держала как раз стрелка. */
.sa-store-name.is-static { cursor: default; padding-right: 10px; }
.sa-store-name.sp-trig:hover { background: color-mix(in srgb, var(--store-glass) 86%, #fff);
    box-shadow: inset 0 1px 0 #fff, 0 5px 12px var(--store-depth); }
.sa-store-name.sp-trig:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 5px var(--store-depth); }
.sa-store-name.sp-trig:focus-visible { outline: 3px solid rgba(255,193,7,.52); outline-offset: 2px; }
.sa-store-name .sp-caret { width: 22px; height: 22px; border-radius: 6px; background: var(--store-caret);
    color: #495057; box-shadow: inset 0 0 0 1px var(--store-caret-edge); text-shadow: none; }
.sa-store-name .sp-caret::before { content: ""; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.sa-store-name.sp-trig:hover .sp-caret { box-shadow: inset 0 0 0 1px var(--store-caret-edge), 0 2px 4px var(--store-depth); }
.sa-store-star { color: #f09030; font-size: 14px; flex: none; text-shadow: 0 1px 1px rgba(24,28,33,.22); }
.sa-store-req { margin-top: 1px; font-size: 13px; color: #495057; line-height: 1.4; }
.sa-store-req b { color: #1a1a1a; font-weight: 650; }
/* Незаполненная строка: знак вопроса объясняет, зачем реквизит вообще нужен.
   Отрицательные поля по вертикали — чтобы кружок не растягивал строку: без них он выше текста и разводит строки. */
.sa-qm { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
    margin: -4px 0 -4px 4px; vertical-align: middle;
    border: 1px solid #b38705; border-radius: 50%; background: #fffdf3; color: #b38705;
    font: 800 10px/1 system-ui, sans-serif; cursor: help; box-shadow: 0 1px 2px rgba(24,28,33,.14); }
/* Третья строка — срок токена. Она же единственное место, где кричит любая беда с ключом:
   отдельной пилюли под состояние ключа больше нет. Слева оставляем место буквенным возможностям:
   длинная ошибка переносится в свободной части строки, а не ложится поверх чипов. */
.sa-store-tok { margin-top: 1px; padding-left: 48px; min-width: 0; overflow-wrap: anywhere;
    font-size: 13px; color: #6c757d; line-height: 1.4; }
.sa-store-tok.bad { color: #b02a37; font-weight: 650; }
.sa-store-tok.bad a { color: #b02a37; }
.sa-store-tok.warn { color: #96690a; }
.sa-store-tok.warn a { color: #96690a; }
.sa-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #6c757d;
    box-shadow: 0 1px 2px rgba(24,28,33,.22); }
.sa-dot.ok { background: #1e9e38; }
.sa-dot.warn { background: #ffc107; }
.sa-dot.bad { background: #dc3545; }

/* Квадратные кнопки зон: обводка называет последствие — жёлтая правит, серая выходит, красная удаляет */
/* Фон — краска своей плитки (--store-glass), насыщенная её же акцентом (--store-accent) в среднем
   на 10% (ховер ~20%), градиентом сверху вниз + белый блик и тень: выпуклая, как остальные кнопки
   продукта; тон зоны не меняется, только сочнее. Ховер приподнимает, клик вдавливает.
   Размеры целые (30 − 2×1 − 16 = 12 → по 6px с каждой стороны): значок центрируется без полупикселей. */
.sa-sq { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; padding: 0;
    border: 1px solid #dee2e6; border-radius: var(--ctr-radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--store-glass, #fff) 94%, var(--store-accent, #6c757d)),
        color-mix(in srgb, var(--store-glass, #fff) 86%, var(--store-accent, #6c757d))); font-size: 14px;
    line-height: 1; color: color-mix(in srgb, var(--store-accent, #6c757d) 55%, #000); cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(24,28,33,.16);
    transition: border-color .12s, color .12s, background .12s, transform .12s, box-shadow .12s; }
.sa-sq:hover { transform: translateY(-1px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--store-glass, #fff) 84%, var(--store-accent, #6c757d)),
        color-mix(in srgb, var(--store-glass, #fff) 76%, var(--store-accent, #6c757d)));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 7px rgba(24,28,33,.22); }
.sa-sq:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.sa-sq svg { width: 16px; height: 16px; display: block; pointer-events: none; }
/* Обводка берёт краску своей зоны: зелёная у сверенного магазина, жёлтая/красная у остальных */
.sa-sq.edit, .sa-sq.exit.cz { border-color: var(--store-edge, #adb5bd); }
.sa-sq.edit:hover, .sa-sq.exit.cz:hover { border-color: var(--store-accent, #868e96); color: #1a1a1a; }
.sa-sq.exit { border-color: #adb5bd; }
.sa-sq.exit:hover { color: #1a1a1a; }
/* Выход со словом: перестаёт быть квадратом, высота та же 30px, чтобы стоять в ряд с шестерёнкой */
.sa-sq.wide { width: auto; gap: 5px; padding: 0 9px 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .1px; }
.sa-sq.del { border-color: #dc3545; color: #b02a37; }
.sa-store-acts { display: flex; gap: 6px; flex: none; margin-left: auto; }
/* Стрелка к шестерёнке: страница включает её, когда чинить надо именно в настройках (не указан ИНН).
   Плавно подплывает к кнопке и гаснет на отходе — тянет взгляд, но не мигает; сама некликабельна. */
.sa-attn { display: flex; align-items: center; height: 30px; flex: none; margin-right: -3px; pointer-events: none;
    color: color-mix(in srgb, var(--store-accent, #6c757d) 60%, #000); animation: sa-attn 1.9s ease-in-out infinite; }
.sa-attn svg { width: 19px; height: 19px; display: block; }
@keyframes sa-attn { 0%, 100% { transform: translateX(-5px); opacity: .3; } 55% { transform: translateX(2px); opacity: 1; } }
/* Шестерёнка в это время дышит ореолом краски своей зоны. На ховере обе анимации гаснут: до кнопки
   дошли — вести больше некуда, и подсветка не спорит с её собственной тенью. */
.sa-sq.edit.attn { animation: sa-attn-halo 1.9s ease-in-out infinite; }
@keyframes sa-attn-halo {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(24,28,33,.16),
        0 0 0 0 color-mix(in srgb, var(--store-accent, #6c757d) 45%, transparent); }
    70% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(24,28,33,.16), 0 0 0 7px transparent; } }
.sa-store-acts:hover .sa-attn, .sa-sq.edit.attn:hover { animation: none; }
.sa-store-acts:hover .sa-attn { transform: translateX(2px); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .sa-attn, .sa-sq.edit.attn { animation: none; }
    .sa-attn { transform: none; opacity: 1; } }

/* Магазин выровнен по центру, как соседняя зона ЧЗ. Подпись шапки уходит из потока и ложится
   поверх строки: кнопки остаются справа, а слово стоит по центру плитки, а не после них.
   Значок WB остаётся слева и тоже выходит из потока, зато строка получает одинаковые поля
   с обеих сторон — иначе «центр» съехал бы вправо ровно на ширину значка с отступом. */
.sa-store-zone .sa-zone-h { position: relative; }
.sa-store-zone .sa-z-l { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.sa-store-row { padding: 0 55px; }
/* Значок висит на самой плитке, а не на строке текста: так он по центру всей зоны, и его не двигают
   ни число строк, ни звезда в углу. left равен боковому полю зоны — значок стоит там же, где стоял. */
.sa-store-zone { position: relative; }
.sa-store-row .sa-mp { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
/* Звезда «открывается по умолчанию» — в углу плитки. Из потока, поэтому на значок не влияет вовсе */
.sa-store-star.corner { position: absolute; top: 7px; left: 9px; font-size: 13px; line-height: 1; }
/* Кликабельная звезда: пустая серая — сделать магазин дефолтным для этой страницы, залитая — снять */
.sa-store-star.tgl { top: 3px; left: 5px; z-index: 2; padding: 2px 4px; border: 0; background: none;
    font-size: 19px; cursor: pointer; transition: transform .12s, color .12s; }
.sa-store-star.tgl:not(.on) { color: #adb5bd; }
.sa-store-star.tgl:hover { transform: scale(1.18); color: #f09030; }
.sa-store-star.tgl:active { transform: scale(1); }
.sa-store-star.tgl:focus-visible { outline: 2px solid #212529; outline-offset: 0; border-radius: 6px; }
.sa-store-main { text-align: center; }
.sa-store-name { justify-content: center; }
/* Чипы карточки — те же sp-cap из store-modal.css, что в редачке и выпадашке */
.sa-store-features { position: absolute; z-index: 2; left: 8px; bottom: 6px; display: flex; gap: 3px; }

/* Зона Честного Знака: подпись по центру шапки, отсчёт слева, выход справа. Вся плитка — кнопка
   к данным сессии, кроме самого выхода: он ловится раньше по data-store и наверх не всплывает. */
.sa-cz { cursor: pointer; text-align: center; min-height: var(--cz-h);
    --store-glass: rgba(206,238,212,.68); --store-accent: #1e9e38; --store-edge: rgba(30,158,56,.55);   /* краска зоны для кнопки выхода (.sa-sq) */
    border-color: rgba(30,158,56,.55); background: linear-gradient(180deg,rgba(250,255,251,.98),rgba(30,158,56,.2));
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(22,109,40,.09), 0 4px 10px rgba(22,109,40,.15); }
.sa-cz.fixed { align-self: start; }
.sa-cz:hover { border-color: rgba(30,158,56,.8); background: linear-gradient(180deg,#fff,rgba(30,158,56,.27));
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(22,109,40,.1), 0 5px 12px rgba(22,109,40,.18); }
/* Шапка зоны ЧЗ — сетка «отсчёт | подпись | выход», а не абсолютно центрованное слово: пока плитке
   хватает ширины, подпись стоит ровно по центру, а на узкой (зона ЧЗ втрое уже магазина) колонки
   раздвигаются, и слово не залезает под кнопку выхода. */
.sa-cz .sa-zone-h { display: grid; grid-template-columns: 1fr auto 1fr; }
.sa-cz .sa-z-l { position: static; transform: none; pointer-events: none; }
.sa-cz .sa-cz-t { justify-self: start; }
.sa-cz .sa-sq.exit { justify-self: end; }
.sa-cz-t { font-size: 11.5px; font-weight: 750; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: .3px; color: #166d28; }
.sa-cz-t.none { color: #8d9a90; }
.sa-cz .sa-zone-b { align-items: center; gap: 1px; }
.sa-cz-n { font-size: 14px; font-weight: 750; color: #1a1a1a; line-height: 1.3;
    display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.sa-cz-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-cz-i { font-size: 13px; color: #4a6b52; line-height: 1.4; }
.sa-cz-mismatch { display: block; margin-top: 1px; color: #b02a37; font-size: 12px; font-weight: 750; line-height: 1.2; }
/* Жёлтый у зоны один на два повода: сессии нет вовсе либо чего-то не хватает — своей товарной группы,
   МОД у магазина, сходства ИНН. Красной эта зона не бывает: подпись жива в любом из этих случаев. */
.sa-cz.off { border-color: #adb5bd; background: linear-gradient(180deg,#fff,#e3e6e8);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(73,80,87,.08), 0 4px 10px rgba(73,80,87,.13); }
.sa-cz.off:hover { border-color: #868e96; background: linear-gradient(180deg,#fff,#d9dde0);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(73,80,87,.1), 0 5px 12px rgba(73,80,87,.16); }
.sa-cz.off .sa-cz-n { color: #495057; margin-bottom: 5px; }
.sa-cz.bad { --store-glass: rgba(248,215,218,.6); --store-accent: #dc3545; --store-edge: rgba(220,53,69,.6);
    border-color: rgba(220,53,69,.65); background: linear-gradient(180deg,rgba(255,249,250,.98),rgba(220,53,69,.22));
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(176,42,55,.1), 0 4px 10px rgba(176,42,55,.16); }
.sa-cz.bad:hover { border-color: rgba(220,53,69,.85); background: linear-gradient(180deg,#fff,rgba(220,53,69,.29));
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(176,42,55,.12), 0 5px 12px rgba(176,42,55,.2); }
.sa-cz.bad .sa-cz-t, .sa-cz.bad .sa-cz-i { color: #b02a37; }
/* Сессия активна, но магазина нет: работать ею пока нельзя — тот же янтарный, что у недосверенного
   магазина. Красной она быть не должна, ничего не сломано; зелёной — тоже, до работы ещё шаг. */
.sa-cz.warn { --store-glass: rgba(255,243,205,.68); --store-accent: #ffc107; --store-edge: rgba(217,164,6,.5);
    --store-depth: rgba(138,102,3,.16);
    border-color: rgba(217,164,6,.55); background: linear-gradient(180deg,rgba(255,254,248,.98),rgba(255,193,7,.2));
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(138,102,3,.08), 0 4px 10px rgba(138,102,3,.14); }
.sa-cz.warn:hover { border-color: rgba(217,164,6,.85); background: linear-gradient(180deg,#fff,rgba(255,193,7,.29));
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(138,102,3,.1), 0 5px 12px rgba(138,102,3,.18); }
.sa-cz.warn .sa-cz-t, .sa-cz.warn .sa-cz-i { color: #705400; }
.sa-cz.warn .sa-dot.ok { background: #ffc107; }

/* Пустое состояние: шаг с Честным Знаком стоит в соседней зоне, здесь остаётся только магазин */
/* Выдуманная сессия демо-магазина. Серая и без ховера: в неё некуда вести, выхода у неё тоже нет —
   настоящая сессия аккаунта в этот момент цела, и гасить её кнопкой из демо было бы враньём. */
.sa-cz.demo, .sa-cz.demo:hover { cursor: default; border-color: rgba(108,117,125,.5);
    background: linear-gradient(180deg,rgba(252,252,253,.98),rgba(108,117,125,.15));
    /* тень тоже перекрываем: у базовой .sa-cz она зелёная, и без этого зона оставалась зелёной по краю */
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(52,58,64,.08), 0 4px 10px rgba(52,58,64,.12);
    --store-glass: rgba(233,236,239,.72); --store-accent: #6c757d; --store-edge: rgba(108,117,125,.5); }
.sa-cz.demo .sa-cz-n, .sa-cz.demo .sa-cz-t, .sa-cz.demo .sa-cz-i { color: #6c757d; }
.sa-cz.demo .sa-dot.ok { background: #adb5bd; }
/* Плитка маркетплейса у демо — серая вместо фирменной чёрно-янтарной. Внутри знак, а не буквы:
   слово «ДЕМО» в квадрате 30px пришлось бы жать до нечитаемого, а имя магазина рядом и так всё говорит */
.sa-mp.demo, .sp-mp.demo { background: #6c757d; color: #f8f9fa; letter-spacing: 0; }
.sa-store-empty { padding: 4px 0 2px; text-align: center; color: #495057; }
/* Две кнопки в пустой зоне столбиком: сверху целевое действие — завести свой магазин, под ним демо.
   Ширину не тянем: каждая по своему тексту, обе по центру зоны. */
.sa-store-empty-acts { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sa-store-empty-h { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 9px; }
.sa-store-empty p { max-width: 540px; margin: 0 auto 12px; font-size: 13px; line-height: 1.5; }
.sa-cz-extra { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 650; }
@media (max-width: 1100px) { .sa-top { width: 100%; min-width: 0; } }
@media (max-width: 900px) { .sa-top { grid-template-columns: 1fr; } .sa-link { justify-self: center; } .sa-link.top { margin-top: 0; }
    .sa-top.sa-top-flow { grid-template-columns: 1fr; gap: 6px; } .sa-flow { justify-self: center; width: 44px; transform: rotate(90deg); } }
/* Телефон: карточка узкая, и чипы возможностей, висевшие в углу плитки, ложились на строку токена,
   а жёлтую строку «чего не хватает» закрывали целиком. Здесь они уходят в поток под карточку,
   и строка токена перестаёт беречь под них место слева. Значок маркетплейса ужимаем — он занимал
   треть свободной ширины, а имени магазина и реквизитам её и так не хватало. */
@media (max-width: 640px) {
    .sa-store-features { position: static; justify-content: center; margin-top: 5px; }
    .sa-store-tok { padding-left: 0; }
    .sa-store-row { padding: 0 44px; }
    .sa-store-row .sa-mp { width: 34px; height: 34px; left: 9px; font-size: 11px; }
    .sa-store-star.tgl { font-size: 17px; }
}