/*
   Витрина единого каталога.

   Оформление намеренно скупое: это рабочий инструмент, в который менеджер
   смотрит весь день, а не витрина магазина. Поэтому плотная сетка, читаемые
   числа и никаких украшений, отвлекающих от товара.
*/

:root {
    color-scheme: light dark;

    --ink: #16181d;
    --ink-soft: #5b6270;
    --ink-faint: #8a919e;

    --paper: #ffffff;
    --surface: #f6f7f9;
    --surface-raised: #ffffff;

    --line: #e2e5ea;
    --line-strong: #cdd2da;

    /* Жёлтый достался от COPYPASTE. Здесь он приглушён до янтарного: на белом
       фоне чистый жёлтый не читается, а подписи рядом с ним слепнут. */
    --accent: #b26a00;
    --accent-soft: #fdf3e0;

    --ok: #14743d;
    --ok-soft: #e8f5ed;
    --none: #8a919e;
    --warn: #a33a1f;

    --radius: 8px;
    --shadow: 0 1px 2px rgb(20 24 33 / 6%), 0 4px 12px rgb(20 24 33 / 4%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8eaef;
        --ink-soft: #a2aab8;
        --ink-faint: #7b8494;

        --paper: #14161a;
        --surface: #191c21;
        --surface-raised: #1e2228;

        --line: #2a2f37;
        --line-strong: #3a414b;

        --accent: #f0b429;
        --accent-soft: #2c2411;

        --ok: #5bc98a;
        --ok-soft: #16281e;

        --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 20%);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-wrap: balance;
}

h1 {
    font-size: 1.5rem;
}

h1:focus {
    outline: none;
}

h2 {
    font-size: 1.15rem;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Числа в столбце должны выстраиваться друг под друга, иначе их не сравнить. */
.num {
    font-variant-numeric: tabular-nums;
}

/* ── каркас ─────────────────────────────────────────────────────────────── */

.top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.top-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.brand small {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.top nav {
    display: flex;
    gap: 4px;
}

.top nav a {
    padding: 6px 12px;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-weight: 500;
}

.top nav a:hover {
    background: var(--surface);
    color: var(--ink);
}

.top nav a.active {
    background: var(--accent-soft);
    color: var(--accent);
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.muted {
    color: var(--ink-soft);
}

/* Число, на которое надо посмотреть: снимки, которые не забрались, ошибка
   передачи. Не красная тревога, но и не серая строка среди прочих. */
.warn {
    color: var(--warn);
}

.faint {
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.deploy-alert {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--accent);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    font-size: 0.9rem;
}

/* ── карточки и таблицы ─────────────────────────────────────────────────── */

.card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-body {
    padding: 18px;
}

.scroll-x {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th {
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--surface);
}

.right {
    text-align: right;
}

/* ── формы ──────────────────────────────────────────────────────────────── */

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

input[type=search], select {
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 8px 12px;
    min-width: 0;
}

input[type=search] {
    flex: 1 1 260px;
}

input[type=search]:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
}

button {
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    padding: 8px 16px;
}

button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

button:disabled {
    opacity: 0.45;
    cursor: default;
}

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}

button.primary:hover:not(:disabled) {
    color: var(--paper);
    filter: brightness(1.08);
}

a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 8px 16px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 550;
    text-decoration: none;
}

a.button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

a.button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}

/* ── сетка товаров ──────────────────────────────────────────────────────── */

.goods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.good {
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.good:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.good-photo {
    aspect-ratio: 1;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.good-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.good-photo .none {
    color: var(--ink-faint);
    font-size: 0.78rem;
}

.good-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.good-name {
    font-weight: 550;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.good-price {
    margin-top: auto;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* ── мелочи ─────────────────────────────────────────────────────────────── */

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 550;
    white-space: nowrap;
    background: var(--surface);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

.tag.in {
    background: var(--ok-soft);
    color: var(--ok);
    border-color: transparent;
}

.tag.out {
    color: var(--none);
}

.color-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
    vertical-align: -2px;
    margin-right: 6px;
}

.empty {
    padding: 56px 20px;
    text-align: center;
    color: var(--ink-soft);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 4px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 24px;
    align-items: stretch;
}

.deploy-card {
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.deploy-card.warn {
    color: inherit;
    border-color: var(--accent);
}

.deploy-card.warn .deploy-facts strong,
.deploy-card.warn .deploy-image {
    color: var(--warn);
}

.deploy-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.deploy-facts div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.deploy-facts strong {
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-weight: 600;
}

.deploy-facts small {
    color: inherit;
    font-size: 0.78rem;
}

.deploy-image {
    overflow: hidden;
    padding: 0 18px 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .deploy-facts {
        grid-template-columns: 1fr;
    }
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat b {
    font-size: 1.35rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.gallery {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.shot {
    width: 84px;
    height: 84px;
    padding: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shot:hover {
    border-color: var(--line-strong);
}

.shot.rest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
}

/* Открытый снимок обводится: без этого в ряду одинаковых миниатюр
   непонятно, какая из них сейчас наверху. */
.shot.on {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Стрелки и счётчик живут поверх снимка. */
.two-col .good-photo {
    position: relative;
}

.flip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 46px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.flip:hover {
    color: var(--ink);
    border-color: var(--line-strong);
}

.flip.back {
    left: 8px;
}

.flip.next {
    right: 8px;
}

.shot-count {
    position: absolute;
    right: 10px;
    bottom: 8px;
    padding: 2px 7px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border-radius: 999px;
}

.two-col {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 760px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

.props {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    font-size: 0.9rem;
    margin: 0;
}

.props dt {
    color: var(--ink-faint);
}

.props dd {
    margin: 0;
}

/* ── служебное от шаблона Blazor ────────────────────────────────────────── */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: #b32121;
    color: #fff;
    box-shadow: 0 -1px 6px rgb(0 0 0 / 25%);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: #fff;
}

    .blazor-error-boundary::after {
        content: "Произошла ошибка."
    }

.stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.description {
    margin: 16px 0 0;
}

/* ── плитка: цвет выбирается не открывая карточку ───────────────────────── */

/* Прямоугольная, а не квадратная: у сувенирки снимок почти всегда вертикальный,
   и в квадрате товар оказывается мелким посреди пустого поля. */
.good-photo {
    aspect-ratio: 4 / 5;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.chip {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 5px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chip:hover {
    border-color: var(--ink-soft);
}

/* Выбранный обводится снаружи, а не меняет заливку: заливка — это сам цвет,
   и подсветить его собой невозможно. */
.chip.on {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.chip-text {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 1;
}

.chip.more {
    width: auto;
    min-width: 22px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-soft);
}

/* ── сопоставление разделов ─────────────────────────────────────────────── */

.mapping {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .mapping {
        grid-template-columns: 1fr;
    }
}

.tree {
    max-height: 70vh;
    overflow-y: auto;
}

.tree-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 14px;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    text-align: left;
    font-weight: 400;
}

.tree-row:hover:not(:disabled) {
    background: var(--surface);
    color: var(--ink);
}

.tree-row.on {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scroll-y {
    max-height: 70vh;
    overflow-y: auto;
}

tbody tr.picked {
    background: var(--accent-soft);
}

.notice {
    border-bottom: 1px solid var(--line);
    color: var(--ok);
    font-weight: 550;
}

/* ── витрина: дерево слева, товары справа ───────────────────────────────── */

.shop {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* Дерево прилипает: спускаясь по длинному списку товаров, покупатель не должен
   возвращаться наверх, чтобы сменить раздел. */
.side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.shop-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

@media (max-width: 900px) {
    .shop {
        grid-template-columns: 1fr;
    }

    .side {
        position: static;
        max-height: none;
    }
}

.side .card-head {
    padding: 11px 14px;
}

.side h2 {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.side .tree {
    max-height: none;
    padding: 6px 0 10px;
}

.branch-kids {
    /* Черта вместо отступа: с ней видно, где кончается ветка. */
    margin-left: 19px;
    border-left: 1px solid var(--line);
}

.side .tree-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px 0 4px;
    border: none;
    border-radius: 0;
    background: none;
}

.side .tree-row.on {
    background: var(--accent-soft);
}

.side .tree-row.on .tree-name {
    color: var(--accent);
    font-weight: 650;
}

.twist {
    flex: none;
    width: 18px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink-faint);
    font-size: 0.9rem;
    line-height: 1;
}

.twist:hover:not(:disabled) {
    color: var(--ink);
    border: none;
}

.side .tree-name {
    flex: 1;
    min-width: 0;
    padding: 5px 2px;
    border: none;
    background: none;
    text-align: left;
    font-weight: 400;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side .tree-name:hover {
    color: var(--accent);
    border: none;
}

/* ── цвет ───────────────────────────────────────────────────────────────── */

.palette {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.swatch {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    font-weight: 400;
    font-size: 0.88rem;
    text-align: left;
}

.swatch:hover:not(:disabled) {
    background: var(--surface);
    color: var(--ink);
    border: none;
}

.swatch.on {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.swatch-dot {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
}

.swatch-name {
    flex: 1;
}

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* В колонке фильтров галочка занимает всю ширину, а счётчик прижимается
   вправо — иначе числа встают лесенкой по длине названий городов. */
.stack-sm .check {
    display: flex;
    width: 100%;
}

.stack-sm .check .num {
    margin-left: auto;
}

/* ── выбранные условия ──────────────────────────────────────────────────── */

.chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid var(--line);
}

.picked-chip {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 550;
}

.picked-chip:hover {
    filter: brightness(0.97);
}

.link {
    padding: 0;
    border: none;
    background: none;
    color: var(--ink-faint);
    font-size: 0.8rem;
    font-weight: 400;
    text-decoration: underline;
}

.link:hover {
    color: var(--accent);
    border: none;
}

/* Прозрачный нечем залить — рисуем шашечку, как это принято в графических
   редакторах: сразу понятно, что цвета нет вовсе. */
.swatch-dot.checker,
.color-dot.checker,
.chip.checker {
    background-image:
        linear-gradient(45deg, var(--line-strong) 25%, transparent 25%),
        linear-gradient(-45deg, var(--line-strong) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--line-strong) 75%),
        linear-gradient(-45deg, transparent 75%, var(--line-strong) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    background-color: var(--paper);
}

/* Цвет не назван и не угадывается — квадрат остаётся, но перечёркнут:
   пустое место в ряду читалось бы как «здесь ничего нет». */
.swatch-dot.unknown,
.color-dot.unknown,
.chip.unknown {
    background-color: var(--paper);
    background-image: linear-gradient(
        135deg,
        transparent calc(50% - 1px),
        var(--line-strong) calc(50% - 1px),
        var(--line-strong) calc(50% + 1px),
        transparent calc(50% + 1px));
}

/* ── карточка панелью поверх каталога ───────────────────────────────────── */

/* Затемнение служит и кнопкой «закрыть»: нажатие мимо панели — самый быстрый
   способ вернуться к списку, и его ищут раньше, чем крестик. */
/* Пока панель открыта, страница под ней не прокручивается. Полоса прокрутки
   при этом остаётся на месте: без этого содержимое дёргается вбок на её
   ширину в тот момент, когда панель открывается. */
body.locked {
    overflow: hidden;
}

html {
    scrollbar-gutter: stable;
}

.sheet-back {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 20, 0.38);
    z-index: 40;
}

.sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(1120px, 94vw);
    z-index: 41;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-left: 1px solid var(--line-strong);
    box-shadow: -18px 0 48px rgba(15, 17, 20, 0.18);
    animation: sheet-in 0.16s ease-out;
}

/* Панель выезжает, а не появляется: так видно, что список никуда не делся
   и лежит под ней. */
@keyframes sheet-in {
    from { transform: translateX(24px); opacity: 0.2; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sheet { animation: none; }
}

.sheet-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.sheet-head strong {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

/* Внутри панели место уже, чем на странице: колонка со свойствами прижимается
   к снимкам, и в узкой панели они встают друг под друга. */
@media (max-width: 1100px) {
    .sheet .two-col {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── сколько показывать на странице ─────────────────────────────────────── */

.per-page {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 14px;
}

.per-page .link {
    padding: 1px 6px;
    border-radius: 5px;
}

.per-page .link.on {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* ── цена и порядок в строке условий ────────────────────────────────────── */

.price-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.price-input {
    width: 78px;
    padding: 6px 8px;
    font-variant-numeric: tabular-nums;
}

/* Стрелки счётчика убираем: они занимают половину узкого поля, а цену
   всё равно вводят с клавиатуры. */
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-input {
    -moz-appearance: textfield;
}

.sort-select {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.sort-select:hover {
    border-color: var(--line-strong);
}

/* ── корзина и позиции КП ──────────────────────────────────────────────── */

.cart-count {
    margin-left: 4px;
    padding: 0 6px;
    color: inherit;
}

.cart-plus {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.1rem;
}

.good-cart {
    width: 100%;
    margin-top: 4px;
}

.cart-table {
    min-width: 1220px;
}

.cart-product {
    min-width: 300px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cart-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink-faint);
    font-size: 0.68rem;
}

.cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-product-info {
    flex: 1;
}

.cart-name-row,
.cart-quantity {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-name,
.cart-comment {
    width: 100%;
}

.cart-product-link {
    flex: 0 0 auto;
    font-size: 0.75rem;
    white-space: nowrap;
}

.cart-comment {
    margin-top: 6px;
}

.cart input[type=number],
.cart input[type=text],
.cart-summary input[type=number] {
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 6px 8px;
}

.cart-number {
    width: 76px;
}

.cart-unit {
    width: 82px;
}

.cart-money {
    width: 104px;
}

.cart-percent {
    width: 82px;
}

.cart-remove {
    padding: 4px 6px;
    font-size: 1rem;
}

.cart-line-actions {
    white-space: nowrap;
}

.application-row > td {
    padding: 0 14px 12px 82px;
    background: var(--surface);
}

.application-row:hover,
.application-row:hover > td {
    background: var(--surface);
}

.applications {
    margin-bottom: 8px;
    border-left: 2px solid var(--line-strong);
}

.applications table {
    min-width: 820px;
}

.applications th,
.applications td {
    padding: 7px 9px;
}

.applications input[type=text] {
    width: 150px;
}

.add-application {
    margin-left: 10px;
}

.cart-summary-body {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 420px);
    gap: 32px;
    align-items: start;
}

.cart-tax {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.quote-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cart-tax label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-totals {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 18px;
}

.cart-totals dt,
.cart-totals dd {
    margin: 0;
}

.cart-totals dd {
    text-align: right;
}

.cart-totals dt:last-of-type,
.cart-totals dd:last-of-type {
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 1.05rem;
}

@media (max-width: 760px) {
    .cart-summary-body {
        grid-template-columns: 1fr;
    }

    .application-row > td {
        padding-left: 14px;
    }
}

/* ── выставленные КП ──────────────────────────────────────────────────── */

.quote-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.quote-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quote-lines {
    min-width: 760px;
}

.quote-catalog {
    width: 120px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    vertical-align: top;
}

.quote-catalog .link {
    font-size: 0.75rem;
}

.quote-application td {
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--surface);
    color: var(--ink-faint);
    font-size: 0.82rem;
}

.quote-total-card {
    align-self: flex-end;
    width: min(100%, 460px);
}

.quotes-table {
    min-width: 820px;
}

.quotes-table .clickable {
    cursor: pointer;
}

@media (max-width: 760px) {
    .quote-parties {
        grid-template-columns: 1fr;
    }
}

/* ── компании и реквизиты КП ───────────────────────────────────────────── */

.companies-table .clickable {
    cursor: pointer;
}

.companies-table .clickable:hover {
    background: var(--surface);
}

.supplier-list {
    display: grid;
    gap: 16px;
}

.supplier-feed-count {
    margin-bottom: 14px;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.supplier-example {
    overflow-wrap: anywhere;
}

.company-editor,
.supplier-editor,
.requisites {
    min-width: 0;
}

.form-section + .form-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.form-section h2,
.form-section h3 {
    margin: 0 0 14px;
    font-size: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-wide {
    grid-column: 1 / -1;
}

.field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.company-editor input:not([type=file]),
.company-editor textarea,
.company-editor select,
.supplier-editor input,
.requisites input,
.requisites textarea,
.requisites select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 8px 10px;
}

.company-editor textarea,
.requisites textarea {
    resize: vertical;
}

.lookup-action,
.lookup-field,
.editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lookup-action {
    align-self: end;
}

.lookup-field input {
    flex: 1 1 180px;
}

.lookup-field button {
    flex: 0 0 auto;
}

.company-logo {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.company-logo img {
    display: block;
    max-width: 280px;
    max-height: 140px;
    object-fit: contain;
}

.editor-actions {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.requisites-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
}

.requisites-column {
    min-width: 0;
}

@media (max-width: 760px) {
    .form-grid,
    .requisites-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-wide {
        grid-column: auto;
    }

    .lookup-field {
        align-items: stretch;
        flex-direction: column;
    }
}