/* Витрина наличия. Дизайн-система wn- (цвета, радиусы, тени и типографика —
   те же, что в CRM basmancrm3). Вёрстка mobile-first. */

:root {
    --wn-primary: #2563eb;
    --wn-primary-hover: #1d4ed8;
    --wn-gradient: linear-gradient(135deg, #3b82f6, #2563eb, #4f46e5);
    --wn-text: #0f172a;
    --wn-muted: #64748b;
    --wn-line: #e2e8f0;
    --wn-card-line: #dbe3ee;
    --wn-bg: #f8fafc;
    --wn-surface: #ffffff;
    --wn-shadow-card: 0 4px 16px rgba(15, 23, 42, 0.05);
    --wn-shadow-medium: 0 8px 24px rgba(15, 23, 42, 0.10);
    --wn-shadow-strong: 0 20px 48px rgba(15, 23, 42, 0.18);
    --wn-shadow-modal: 0 24px 56px rgba(15, 23, 42, 0.25);
}

* { box-sizing: border-box; }
/* .wn-popover и .wn-viewer задают свой display через class-селектор той же
   специфичности, что и встроенное [hidden] { display: none } — при равной
   специфичности выигрывает автор, а не UA-стиль. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--wn-text);
    background: var(--wn-bg);
}

@keyframes wn-fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Общие элементы --- */
.wn-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
    color: var(--wn-text);
    background: var(--wn-surface);
    border: 1px solid var(--wn-line);
    border-radius: 8px;
    transition: all 0.15s ease;
}
.wn-input:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.wn-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem; font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.wn-btn-primary { background: var(--wn-gradient); color: #fff; }
.wn-btn-primary:hover { background: var(--wn-primary-hover); }
.wn-btn-ghost {
    background: var(--wn-surface); color: var(--wn-text); border-color: var(--wn-line);
}
.wn-btn-ghost:hover { border-color: #cbd5e1; box-shadow: var(--wn-shadow-card); }

.wn-badge {
    display: inline-block; padding: 1px 6px;
    font-size: 0.7rem; font-weight: 700; border-radius: 4px;
}
.wn-badge-primary { background: #dbeafe; color: #1d4ed8; }
.wn-badge-soft { background: #f1f5f9; color: var(--wn-muted); }

.wn-link { color: var(--wn-muted); font-size: 0.8rem; text-decoration: none; }
.wn-link:hover { color: var(--wn-primary); }

.wn-icon-btn {
    border: 0; background: transparent; color: var(--wn-muted);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}

.wn-num { text-align: right; }

/* --- Вход --- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
    background: var(--wn-surface); padding: 28px 24px; width: min(360px, 90vw);
    border: 1px solid var(--wn-card-line); border-radius: 18px;
    box-shadow: var(--wn-shadow-modal); text-align: center;
}
.login-card h1 { font-size: 1.18rem; font-weight: 700; margin: 0 0 4px; }
.login-hint { color: var(--wn-muted); margin: 0 0 20px; font-size: 0.84rem; }
.login-code {
    width: 100%; padding: 14px; font-size: 28px; text-align: center; letter-spacing: 8px;
    border: 1px solid var(--wn-line); border-radius: 8px;
}
.login-code:focus {
    outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.login-error { color: #991b1b; background: #fee2e2; border-radius: 4px;
               margin-top: 12px; padding: 6px 10px; font-size: 0.8rem; }
.login-btn {
    margin-top: 16px; width: 100%; padding: 12px; font-size: 0.9rem; font-weight: 600;
    border: 0; border-radius: 10px; background: var(--wn-gradient); color: #fff;
    cursor: pointer; transition: all 0.15s ease;
}

/* --- Шапка --- */
.wn-top {
    position: sticky; top: 0; z-index: 20;
    background: var(--wn-bg); padding: 10px 12px 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.wn-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.wn-brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wn-brand-mark {
    font-size: 1.02rem; font-weight: 800; letter-spacing: 0.06em;
    background: var(--wn-gradient); -webkit-background-clip: text;
    background-clip: text; color: transparent;
}
.wn-brand-sub {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.035em; color: var(--wn-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wn-guest-box { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wn-guest {
    font-size: 0.78rem; font-weight: 600; color: var(--wn-text);
    background: var(--wn-surface); border: 1px solid var(--wn-card-line);
    border-radius: 999px; padding: 3px 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw;
}

/* На широком экране обе части шапки — одна карточка: верхняя со скруглением
   сверху, нижняя снизу. На телефоне они разъезжаются, потому что верхняя
   становится липкой. */
.wn-panel-main { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.wn-panel-extra { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
.wn-panel-extra .wn-chips { margin-top: 0; }
/* Дополнительная часть шапки — вне <header>, поэтому свои отступы. */
.wn-extra { padding: 0 12px; margin-top: -1px; }

/* Карточка с поиском, кнопками и счётчиками — как разделы в CRM */
.wn-panel {
    background: var(--wn-surface); border: 1px solid var(--wn-card-line);
    border-radius: 14px; box-shadow: var(--wn-shadow-card); padding: 12px;
}
.wn-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wn-search-wrap { position: relative; flex: 1; min-width: 200px; }
.wn-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: #94a3b8; pointer-events: none;
}
.wn-search { padding-left: 36px; height: 42px; }
.wn-btn-cart { height: 42px; }
.wn-controls .wn-btn { height: 42px; }
.wn-view-switch {
    display: flex; height: 42px; overflow: hidden;
    border: 1px solid var(--wn-line); border-radius: 10px;
}
.wn-view-btn {
    border: 0; padding: 0 14px; cursor: pointer;
    background: var(--wn-surface); color: var(--wn-muted);
    font-size: 0.8rem; font-weight: 600; transition: all 0.15s ease;
}
.wn-view-btn:hover { color: var(--wn-primary); }
.wn-view-icon { display: none; font-size: 1rem; line-height: 1; }
.wn-view-btn[aria-pressed="true"] { background: var(--wn-gradient); color: #fff; }

.wn-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wn-chip {
    font-size: 0.76rem; font-weight: 600; color: var(--wn-muted);
    background: #f1f5f9; border-radius: 999px; padding: 4px 12px;
}
.wn-chip b { color: var(--wn-text); font-weight: 700; }
.wn-chip-sale { background: #dcfce7; color: #166534; }
.wn-chip-sale b { color: #166534; }
.wn-badge-onprimary { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* --- Фильтры: выпадающее окно поверх списка --- */
.wn-backdrop { position: fixed; inset: 0; z-index: 28; background: rgba(15, 23, 42, 0.35); }
.wn-popover {
    position: fixed; z-index: 30; display: flex; flex-direction: column;
    background: var(--wn-surface);
    border: 1px solid var(--wn-card-line);
    box-shadow: var(--wn-shadow-strong);
    animation: wn-fadeIn 0.15s ease;
}
/* Телефон: панель снизу на всю ширину */
.wn-popover { left: 0; right: 0; bottom: 0; border-radius: 18px 18px 0 0; max-height: 85vh; }
.wn-popover-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--wn-line);
}
.wn-popover-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.035em; color: var(--wn-muted);
}
.wn-popover-body {
    padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
    overflow-y: auto;
}
.wn-popover-foot {
    display: flex; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--wn-line);
}
.wn-popover-foot .wn-btn { flex: 1; justify-content: center; padding: 0.6rem 0.85rem; }
.wn-field {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.035em; color: var(--wn-muted);
}
.wn-field .wn-input { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Select2 под наш стиль: библиотека рисует свои поля, поэтому подгоняем
   высоту, скругления и цвета под остальные элементы витрины. */
.select2-container--default .select2-selection--single {
    height: 40px; border: 1px solid var(--wn-line); border-radius: 8px;
    background: var(--wn-surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px; padding-left: 10px; color: var(--wn-text); font-size: 0.88rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.select2-dropdown {
    border: 1px solid var(--wn-card-line); border-radius: 10px;
    box-shadow: var(--wn-shadow-medium); overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--wn-primary);
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: #dbeafe; color: #1d4ed8;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--wn-line); border-radius: 8px; padding: 6px 8px;
}
/* Список фильтров — окно с фиксированным положением, поэтому выпадашка
   Select2 должна рисоваться поверх него. Заодно сбрасываем «капс» —
   он наследуется от подписи поля и уродует значения. */
.select2-container { z-index: 40; }
.select2-container, .select2-dropdown, .select2-results__option {
    text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* --- Плитка --- */
.wn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
.wn-card {
    background: var(--wn-surface); border: 1px solid var(--wn-card-line);
    border-radius: 14px; overflow: hidden; box-shadow: var(--wn-shadow-card);
    transition: all 0.15s ease;
}
.wn-card:hover { box-shadow: var(--wn-shadow-medium); }
.card-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
              background: #eef2f7; cursor: pointer; }
.card-body { padding: 10px; }
/* ID позиции — то, что гость диктует в заказе, поэтому он должен читаться
   с одного взгляда: синяя плашка моноширинным шрифтом. */
.wn-id {
    display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
    color: #1d4ed8; background: #dbeafe; border-radius: 6px; padding: 2px 8px;
}
.wn-id-sm { font-size: 0.72rem; padding: 1px 6px; margin-right: 6px; }
.card-id { margin-bottom: 6px; }
.card-title {
    font-size: 0.88rem; font-weight: 700; margin: 0 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-sub {
    font-size: 0.78rem; color: var(--wn-muted); margin: 0 0 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-price { font-size: 1.05rem; font-weight: 700; }
.card-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.size { font-size: 0.7rem; font-weight: 600; padding: 2px 7px;
        background: #f1f5f9; color: var(--wn-muted); border-radius: 4px; }

/* Заглушка для позиций, у которых в базе нет ни одной фотографии */
.no-photo {
    display: flex; align-items: center; justify-content: center;
    background: #eef2f7; color: #94a3b8; font-size: 0.72rem; text-align: center;
}
.card-photo.no-photo { width: 100%; aspect-ratio: 3/4; }
.row-photo.no-photo { width: 56px; height: 72px; border-radius: 8px; font-size: 0.62rem; }

/* Фото удалили, пока гость листал витрину: битую иконку браузера прячем и
   рисуем свою плашку фоном прямо на <img>. */
.card-photo.img-broken, .row-photo.img-broken {
    color: transparent;
    background: #eef2f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23eef2f7'/%3E%3Cpath d='M18 44l10-12 8 9 6-7 10 12z' fill='%2394a3b8'/%3E%3Ccircle cx='24' cy='22' r='5' fill='%2394a3b8'/%3E%3C/svg%3E") center/40% no-repeat;
}

.wn-status { text-align: center; padding: 20px; color: var(--wn-muted); font-size: 0.84rem; }

/* --- Таблица --- */
.wn-table-wrap { padding: 12px; overflow-x: auto; }
.wn-table thead th:first-child { border-top-left-radius: 14px; }
.wn-table thead th:last-child { border-top-right-radius: 14px; }
.wn-table {
    width: 100%; border-collapse: collapse; font-size: 0.84rem;
    background: var(--wn-surface); border: 1px solid var(--wn-card-line);
    border-radius: 14px; overflow: hidden; box-shadow: var(--wn-shadow-card);
}
.wn-table th {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.035em; color: var(--wn-muted); background: #f8fafc;
    position: sticky; top: 0; z-index: 5;
}
.wn-table th, .wn-table td {
    padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--wn-line);
    white-space: nowrap;
}
.wn-table th.wn-num, .wn-table td.wn-num { text-align: right; }
.wn-table tbody tr:last-child td { border-bottom: 0; }
.wn-table tbody tr { transition: background 0.15s ease; }
.wn-table tbody tr:hover { background: #f8fafc; }
.td-photo, .th-photo { width: 66px; }
.td-id, .th-id { width: 64px; }
.td-id { font-weight: 700; }
.row-photo {
    width: 56px; height: 72px; object-fit: cover; display: block;
    border-radius: 8px; background: #eef2f7; cursor: pointer;
}
.td-title { white-space: normal; min-width: 180px; font-weight: 700; }
.td-price { font-weight: 700; }
.row-title { display: block; }
.row-meta { display: none; }
/* Бейдж ID внутри названия нужен только на узком экране: на широком
   у ID своя колонка. */
.row-id { display: none; }

/* --- Уровни наценки на выбор --- */
.wn-levels { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wn-levels-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.035em; color: var(--wn-muted);
}
.wn-levels-list { display: flex; gap: 6px; flex-wrap: wrap; }
.wn-level {
    padding: 0.32rem 0.7rem; font-size: 0.8rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--wn-line); border-radius: 999px;
    background: var(--wn-surface); color: var(--wn-muted); transition: all 0.15s ease;
}
.wn-level:hover { border-color: #93c5fd; color: var(--wn-primary); }
.wn-level.is-current { background: var(--wn-gradient); color: #fff; border-color: transparent; }

/* --- Скидка от суммы --- */
.wn-discount {
    margin-top: 8px; padding: 8px 10px; border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #dbeafe;
}
.wn-discount-text {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    font-size: 0.78rem; color: var(--wn-muted);
}
.wn-discount-now { font-weight: 700; color: var(--wn-muted); }
.wn-discount-now.is-on { color: #166534; }
.wn-discount-next { flex: 1; min-width: 0; }
.wn-progress {
    margin-top: 6px; height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden;
}
.wn-progress-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: var(--wn-gradient); transition: width 0.3s ease;
}

/* Цена со скидкой: текущая крупно, «по прайсу» зачёркнутой рядом */
.price-now { color: #166534; }
.price-old {
    margin-left: 6px; color: #94a3b8; font-weight: 600;
    text-decoration: line-through; font-size: 0.82em;
}
.wn-badge-sale { background: #dcfce7; color: #166534; margin-left: 6px; }
.cart-qty-note { margin-left: 8px; color: var(--wn-muted); font-weight: 600; }

/* --- Корзина (выезжает сбоку/снизу) и модалка добавления --- */
.wn-drawer {
    position: fixed; z-index: 32; display: flex; flex-direction: column;
    left: 0; right: 0; bottom: 0; max-height: 88vh;
    background: var(--wn-surface); border: 1px solid var(--wn-card-line);
    border-radius: 18px 18px 0 0; box-shadow: var(--wn-shadow-modal);
    animation: wn-fadeIn 0.15s ease;
}
.wn-drawer-body { padding: 10px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.wn-cart-row {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--wn-line); border-radius: 12px; padding: 8px;
}
.cart-photo { width: 54px; height: 70px; object-fit: cover; border-radius: 8px; background: #eef2f7; flex: none; }
.cart-photo.no-photo { font-size: 0.6rem; }
.cart-info { flex: 1; min-width: 0; }
.cart-title { font-size: 0.86rem; font-weight: 700; }
.cart-meta { font-size: 0.74rem; color: var(--wn-muted); margin-top: 2px; }
.cart-controls { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cart-controls .wn-icon-btn {
    border: 1px solid var(--wn-line); border-radius: 8px; width: 30px; height: 30px;
    font-size: 17px; color: var(--wn-text); background: var(--wn-surface);
}
.cart-qty { min-width: 24px; text-align: center; font-weight: 700; font-size: 0.86rem; }
.cart-del { padding: 0.28rem 0.6rem; font-size: 0.74rem; }
.cart-sum { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.wn-cart-total { margin-left: auto; align-self: center; font-weight: 700; font-size: 0.88rem; }
.wn-empty { color: var(--wn-muted); text-align: center; padding: 24px 0; font-size: 0.86rem; }

.wn-modal {
    position: fixed; z-index: 34; display: flex; flex-direction: column;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(360px, 92vw);
    background: var(--wn-surface); border: 1px solid var(--wn-card-line);
    border-radius: 18px; box-shadow: var(--wn-shadow-modal);
    animation: wn-fadeIn 0.15s ease;
}

.card-add { width: 100%; justify-content: center; margin-top: 10px; }
.td-add, .th-add { width: 44px; }
.row-add { padding: 0.2rem 0.55rem; font-size: 0.95rem; line-height: 1; }

/* --- Карточка товара --- */
.wn-item-modal {
    position: fixed; z-index: 34; display: flex; flex-direction: column;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(880px, 94vw); max-height: 92vh;
    background: var(--wn-surface); border: 1px solid var(--wn-card-line);
    border-radius: 18px; box-shadow: var(--wn-shadow-modal);
    animation: wn-fadeIn 0.15s ease; overflow: hidden;
}
.wn-item-body { display: flex; gap: 18px; padding: 16px; overflow-y: auto; }
.wn-item-gallery { flex: 0 0 42%; min-width: 0; }
.wn-item-photo {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
    border-radius: 14px; background: #eef2f7; cursor: zoom-in;
}
.wn-item-photo.no-photo-img { background: #eef2f7; }
.wn-item-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.wn-item-thumb {
    width: 48px; height: 62px; object-fit: cover; border-radius: 8px; cursor: pointer;
    border: 2px solid transparent; flex: none; background: #eef2f7;
}
.wn-item-thumb.is-current { border-color: var(--wn-primary); }

.wn-item-info { flex: 1; min-width: 0; }
.wn-item-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.wn-item-meta { font-size: 0.8rem; color: var(--wn-muted); margin-bottom: 10px; }
.wn-item-price { font-size: 1.35rem; font-weight: 700; margin-bottom: 16px; }
.wn-item-sizes-head {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.035em; color: var(--wn-muted); margin-bottom: 8px;
}
.wn-item-sizes { display: flex; flex-direction: column; gap: 8px; }
.wn-size-row {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--wn-line); border-radius: 10px; padding: 8px 10px;
}
.wn-size-name { font-weight: 700; font-size: 0.9rem; min-width: 60px; }
.wn-size-stock { flex: 1; font-size: 0.76rem; color: var(--wn-muted); }
.wn-size-qty { display: flex; align-items: center; gap: 6px; }
.wn-size-qty .wn-icon-btn {
    border: 1px solid var(--wn-line); border-radius: 8px; width: 32px; height: 32px;
    font-size: 17px; color: var(--wn-text); background: var(--wn-surface);
}
.size-input { width: 58px; text-align: center; padding: 0.35rem; }
.wn-item-chosen { font-size: 0.84rem; font-weight: 600; color: var(--wn-muted); }
.wn-popover-foot .wn-item-chosen { flex: 1; align-self: center; }
body.modal-open { overflow: hidden; }

@media (max-width: 699px) {
    .wn-item-modal { left: 0; right: 0; bottom: 0; top: auto; transform: none;
                     width: auto; border-radius: 18px 18px 0 0; max-height: 94vh; }
    .wn-item-body { flex-direction: column; gap: 12px; }
    .wn-item-gallery { flex: none; }
    .wn-item-photo { aspect-ratio: 4/3; }
}

/* --- Просмотр фото --- */
body.viewer-open .wn-top { display: none; }
body.viewer-open { overflow: hidden; }
.wn-viewer {
    position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, 0.94);
    display: flex; align-items: center; justify-content: center;
}
.wn-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wn-viewer-btn {
    position: absolute; background: rgba(255, 255, 255, 0.15); color: #fff;
    border: 0; border-radius: 50%; width: 48px; height: 48px; font-size: 26px;
    line-height: 1; cursor: pointer; transition: all 0.15s ease;
}
.wn-viewer-btn:hover { background: rgba(255, 255, 255, 0.28); }
.viewer-close { top: 16px; right: 16px; }
.viewer-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* Короткое всплывающее сообщение */
.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.94); color: #fff; padding: 10px 18px;
    border-radius: 10px; font-size: 0.84rem; z-index: 50; max-width: 90vw;
    text-align: center; box-shadow: var(--wn-shadow-medium);
}

/* --- Телефон: таблица без второстепенных колонок --- */
@media (max-width: 699px) {
    /* Шапка на телефоне остаётся липкой, но при прокрутке сжимается до
       строки действий: счётчики, уровни и полоска скидки прячутся, чтобы
       не съедать экран. Всё это снова появляется, стоит вернуться наверх. */
    /* Липнет только строка действий: логотип с корзиной и поиск с кнопками.
       Счётчики, уровни и полоска скидки уезжают вверх вместе со списком —
       иначе шапка занимала бы треть экрана всё время.
       Сделано на CSS, без слушателя прокрутки: так поведение не зависит от
       того, что именно листает страницу. */
    .wn-top { padding: 8px 10px; }
    .wn-extra { padding: 0 10px; }
    .wn-panel-main { border-radius: 14px; border-bottom: 1px solid var(--wn-card-line); }
    .wn-panel-extra { border-radius: 14px; padding-top: 10px; }
    .wn-panel-extra .wn-chips { margin-top: 0; }
    .wn-panel { padding: 10px; }
    .wn-topbar { margin-bottom: 8px; }
    .wn-brand-mark { font-size: 0.92rem; }
    .wn-brand-sub { display: none; }
    .wn-guest { font-size: 0.72rem; padding: 2px 10px; max-width: 38vw; }

    /* Две понятные строки действий: «найти/отобрать» и «как смотреть/корзина».
       Раньше поиск занимал всю ширину и кнопки расползались на три ряда. */
    .wn-controls { gap: 6px; }
    /* Поиск занимает свою строку целиком, под ним — «Фильтры» и вид.
       Иначе переключатель вида срывался на третью строку и прижимался вправо. */
    .wn-search-wrap { flex: 1 1 100%; min-width: 0; }
    .wn-search { height: 38px; }
    .wn-controls .wn-btn, .wn-view-switch { height: 38px; }
    /* Переключатель вида — значками: два слова занимали полстроки. */
    .wn-view-switch { flex: 0 0 auto; }
    .wn-view-btn { padding: 0 12px; }
    .wn-view-icon { display: inline; }
    .wn-view-text { display: none; }
    #filters-btn { flex: 1 1 auto; justify-content: center; }

    /* Корзина живёт в верхней строке, на месте названия ключа. */
    .wn-btn-cart { height: 32px; padding: 0 12px; font-size: 0.78rem; }
    .wn-guest { display: none; }

    .wn-chips { gap: 6px; margin-top: 8px; }
    .wn-chip { font-size: 0.7rem; padding: 3px 9px; }

    /* Уровни цен уезжают в горизонтальную прокрутку, а не переносятся
       на новую строку — иначе шапка растёт вниз. */
    .wn-levels { gap: 6px; margin-top: 6px; flex-wrap: nowrap; }
    .wn-levels-label { flex: none; font-size: 0.62rem; }
    .wn-levels-list { flex: 1; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .wn-level { flex: none; padding: 0.2rem 0.5rem; font-size: 0.72rem; }

    .wn-discount { margin-top: 8px; padding: 7px 9px; }
    .wn-discount-text { font-size: 0.72rem; }

    /* Шапка в две строки: поиск целиком сверху, кнопки под ним — иначе
       поле поиска сжимается до нечитаемой ширины. */
    .wn-top-row { flex-wrap: wrap; }
    .wn-search { flex: 1 0 100%; }
    .wn-view-switch { margin-left: auto; }

    .wn-table .th-brand, .wn-table .td-brand,
    .wn-table .th-color, .wn-table .td-color,
    .wn-table .th-article, .wn-table .td-article,
    .wn-table .th-sizes, .wn-table .td-sizes,
    .wn-table .th-id, .wn-table .td-id,
    .wn-table .th-add, .wn-table .td-add,
    .wn-table .th-qty, .wn-table .td-qty { display: none; }
    /* Фиксированная раскладка: фото и цена получают свою ширину, всё
       остальное отдаётся названию. Без неё длинная строка под названием
       растягивала таблицу и выдавливала цену за край экрана. */
    .wn-table { table-layout: fixed; width: 100%; }
    .wn-table th, .wn-table td { padding: 8px 6px; }
    .td-photo, .th-photo { width: 62px; }
    .td-price, .wn-table th.wn-num { width: 86px; }
    .td-title { min-width: 0; font-size: 0.8rem; overflow: hidden; }
    .row-title { white-space: normal; }
    .row-id { display: inline-block; margin-bottom: 4px; }
    .row-meta { display: block; margin-top: 2px; font-size: 0.7rem;
                color: var(--wn-muted); font-weight: 400;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wn-table-wrap { overflow-x: visible; padding: 10px; }
}

@media (min-width: 700px) {
    .wn-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; }
    .wn-table-wrap { padding: 16px; }
}

@media (min-width: 1000px) {
    .wn-grid { grid-template-columns: repeat(4, 1fr); }
    /* На широком экране фильтры — карточка под кнопкой, а не панель снизу.
       Позицию по горизонтали проставляет скрипт, чтобы окно вставало под
       самой кнопкой. */
    .wn-popover {
        top: 64px; bottom: auto; left: auto; right: auto;
        width: 320px; border-radius: 14px; max-height: 70vh;
    }
    .wn-backdrop { background: rgba(15, 23, 42, 0.18); }
}