/* Табличный вид склада в Китае. Общий для china.html и кабинета.
   Токены берём из страницы (--card, --border, --muted, --white, --accent);
   значения в var() на случай, если страница не объявила переменную. */
.cnt-mount { --cnt-card: var(--card, #161820); --cnt-border: var(--border, #252830); --cnt-muted: var(--muted, #9aa0b4);
  --cnt-white: var(--white, #f0f2f7); --cnt-text: var(--text, #c0c4d4); --cnt-accent: var(--accent, #C41A1A);
  font-variant-numeric: tabular-nums; }

.cnt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.cnt-count { font-size: 13.5px; color: var(--cnt-muted); }
.cnt-count b { color: var(--cnt-white); font-weight: 700; }
.cnt-views { display: inline-flex; border: 1px solid var(--cnt-border); border-radius: 8px; overflow: hidden; }
.cnt-view { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: transparent; border: 0;
  color: var(--cnt-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s; }
.cnt-view + .cnt-view { border-left: 1px solid var(--cnt-border); }
.cnt-view svg { width: 14px; height: 14px; fill: currentColor; }
.cnt-view:hover { color: var(--cnt-white); }
.cnt-view.on { background: var(--cnt-white); color: #0a0a0a; }
.cnt-view:focus-visible { outline: 2px solid var(--cnt-accent); outline-offset: -2px; }

/* Таблица растёт вместе со страницей: догруженные строки видно сразу под уже
   показанными. Раньше она жила в окне прокрутки высотой с экран, и строки после
   «Показать ещё» добавлялись вне видимой части — казалось, что ничего не грузится.
   overflow: clip не создаёт своей прокрутки, поэтому шапка столбцов липнет к
   странице — под верхнюю панель сайта (--cnt-sticky-top ставит скрипт). */
.cnt-scroll { border: 1px solid var(--cnt-border); border-radius: 12px; background: var(--cnt-card);
  overflow: clip; scrollbar-color: #3a3e4b var(--cnt-card); }
/* узкий ноутбук: 11 столбцов могут не влезть — разрешаем прокрутку вбок */
@media (min-width: 861px) and (max-width: 1180px) { .cnt-scroll { overflow-x: auto; } }
.cnt-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cnt-scroll::-webkit-scrollbar-thumb { background: #3a3e4b; border-radius: 6px; border: 2px solid var(--cnt-card); }
.cnt-scroll::-webkit-scrollbar-track { background: var(--cnt-card); }
.cnt-mount[data-view="cards"] .cnt-scroll, .cnt-mount[data-view="table"] .cnt-cards { display: none; }

table.cnt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.35; color: var(--cnt-text); }
table.cnt thead th { position: sticky; top: var(--cnt-sticky-top, 0px); z-index: 2; background: #1b1e27; color: var(--cnt-muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-align: left;
  padding: 0 12px; height: 44px; white-space: nowrap; border-bottom: 1px solid var(--cnt-border);
  box-shadow: 0 1px 0 var(--cnt-border); }
table.cnt thead th.cnt-num, table.cnt thead th.cnt-qty { text-align: right; }
.cnt-sort { all: unset; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 12px 0; }
.cnt-sort:hover, .cnt-sort.on { color: var(--cnt-white); }
.cnt-sort:focus-visible { outline: 2px solid var(--cnt-accent); outline-offset: 2px; border-radius: 3px; }
.cnt-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0; transition: opacity .15s; }
.cnt-sort:hover .cnt-arrow { opacity: .45; border-top: 5px solid currentColor; }
th[aria-sort="ascending"] .cnt-arrow { opacity: 1; border-bottom: 5px solid var(--cnt-accent); border-top: 0; }
th[aria-sort="descending"] .cnt-arrow { opacity: 1; border-top: 5px solid var(--cnt-accent); border-bottom: 0; }

table.cnt tbody td { padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; white-space: nowrap; }
table.cnt tbody tr { transition: background .12s; }
table.cnt tbody tr:hover { background: rgba(255,255,255,.035); }
table.cnt tbody tr:hover td { cursor: pointer; }
table.cnt tbody tr:nth-child(2n) { background: rgba(255,255,255,.012); }
table.cnt tbody tr:nth-child(2n):hover { background: rgba(255,255,255,.04); }
.cnt-row--out { color: var(--cnt-muted); }
.cnt-row--out .cnt-thumb img { opacity: .6; }

td.cnt-num, td.cnt-qty { text-align: right; }
td.cnt-qty b { color: #34d399; font-weight: 700; font-size: 14px; }
.cnt-order { font-size: 12px; color: var(--cnt-muted); }
.cnt-art__v { font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace; font-size: 12.5px; color: var(--cnt-white); letter-spacing: .01em; }
td.cnt-name { color: var(--cnt-white); font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
td.cnt-brand { color: var(--cnt-muted); }
td.cnt-color { max-width: 230px; }
.cnt-color__v { display: block; overflow: hidden; text-overflow: ellipsis; }
td.cnt-photo { width: 64px; padding: 4px 8px 4px 12px; }

/* Миниатюра: белая подложка как у фото поставщика, лупа появляется по наведению */
.cnt-thumb { all: unset; position: relative; display: block; width: 48px; height: 48px; border-radius: 7px; overflow: hidden;
  background: #fff; cursor: zoom-in; border: 1px solid var(--cnt-border); }
.cnt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnt-thumb:hover img { transform: scale(1.06); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.cnt-thumb:focus-visible { outline: 2px solid var(--cnt-accent); outline-offset: 2px; }
.cnt-thumb--viz { background: #12141a; padding: 4px; cursor: default; }
.cnt-thumb--viz svg { width: 100%; height: 100%; }

td.cnt-act { width: 1%; padding-right: 12px; }
td.cnt-act .cn-order, td.cnt-act .btn-price { margin: 0; padding: 7px 12px; font-size: 12.5px; width: auto; white-space: nowrap; }

.cnt-empty { padding: 40px 20px; text-align: center; color: var(--cnt-muted); border: 1px dashed var(--cnt-border); border-radius: 12px; }
.cnt-more { display: block; margin: 22px auto 0; padding: 11px 30px; background: transparent; color: var(--cnt-text);
  border: 1px solid var(--cnt-border); border-radius: 9px; cursor: pointer; font: inherit; font-weight: 600; }
.cnt-more:hover { border-color: var(--cnt-muted); color: var(--cnt-white); }
.cnt-more b { color: var(--cnt-white); }
.cnt-loading { display: block; margin: 18px auto 0; text-align: center; font-size: 13px; color: var(--cnt-muted); }

/* Лайтбокс */
.cnt-lb { position: fixed; inset: 0; z-index: 10000; background: rgba(6,7,10,.9); display: none; align-items: center; justify-content: center; padding: 24px; }
.cnt-lb.on { display: flex; animation: cntFade .18s ease-out; }
.cnt-lb figure { margin: 0; max-width: min(900px, 96vw); text-align: center; }
.cnt-lb img { max-width: 100%; max-height: 80vh; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.cnt-lb figcaption { margin-top: 14px; color: #d7dbe6; font-size: 14px; }
.cnt-lb__close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; opacity: .85; }
.cnt-lb__close:hover { opacity: 1; }
@keyframes cntFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cnt-lb.on { animation: none; } .cnt-thumb:hover img { transform: none; } }

/* Блок для телефона внутри ячейки модели — на широком экране не нужен */
.cnt-m { display: none; }

/* Телефон и узкий планшет: та же таблица, но 11 столбцов складываются в 3–4.
   Артикул, размер, ширина, вылет, сверловка, ЦО и цвет уходят строками под модель,
   чтобы дилер видел всё без горизонтальной прокрутки. */
@media (max-width: 860px) {
  .cnt-toolbar { margin-bottom: 10px; }
  .cnt-view { padding: 8px 11px; }
  .cnt-scroll { border-radius: 10px; }
  table.cnt { font-size: 13px; }
  table.cnt th.cnt-art, table.cnt td.cnt-art,
  table.cnt th.cnt-brand, table.cnt td.cnt-brand,
  table.cnt th.cnt-num, table.cnt td.cnt-num,
  table.cnt th.cnt-pcd, table.cnt td.cnt-pcd,
  table.cnt th.cnt-color, table.cnt td.cnt-color { display: none; }
  table.cnt thead th { position: static; height: 38px; padding: 0 8px; }
  table.cnt tbody td { padding: 9px 8px; white-space: normal; vertical-align: top; }
  td.cnt-photo { width: 62px; padding: 9px 4px 9px 10px; }
  .cnt-thumb { width: 52px; height: 52px; }
  td.cnt-name { max-width: none; font-size: 14px; line-height: 1.3; }
  .cnt-m { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-weight: 400; }
  .cnt-m .cnt-art__v { font-size: 12px; color: var(--cnt-muted); }
  .cnt-m__spec { font-size: 12.5px; color: var(--cnt-white); font-variant-numeric: tabular-nums; }
  .cnt-m__col { font-size: 12px; color: var(--cnt-muted); }
  td.cnt-qty { width: 1%; white-space: nowrap; padding-right: 10px; }
  td.cnt-qty b { font-size: 15px; }
  /* кнопка есть в окне подробностей, а в узкой строке она обрезалась */
  table.cnt thead th.cnt-act, td.cnt-act { display: none; }
  table.cnt tbody tr td { cursor: pointer; }
}

/* Окно подробностей */
.cnt-dv { position: fixed; inset: 0; z-index: 10000; background: rgba(6,7,10,.86); display: none;
  align-items: center; justify-content: center; padding: 24px; }
.cnt-dv.on { display: flex; animation: cntFade .18s ease-out; }
.cnt-dv__box { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  width: min(980px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--cnt-card);
  border: 1px solid var(--cnt-border); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.cnt-dv__media { background: #fff; display: flex; align-items: center; justify-content: center; min-height: 360px;
  border-radius: 18px 0 0 18px; overflow: hidden; }
.cnt-dv__media img { width: 100%; height: 100%; max-height: 640px; object-fit: contain; display: block; }
.cnt-dv__viz { width: 78%; aspect-ratio: 1; padding: 10px; background: #12141a; border-radius: 12px; }
.cnt-dv__viz svg { width: 100%; height: 100%; }
.cnt-dv__body { padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 10px; color: var(--cnt-text); }
.cnt-dv__title { margin: 0; padding-right: 36px; font-size: 22px; line-height: 1.25; color: var(--cnt-white); font-weight: 700; }
.cnt-dv__art { font-family: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace; font-size: 13px; color: var(--cnt-muted); }
.cnt-dv__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 8px 0 4px; background: var(--cnt-border);
  border: 1px solid var(--cnt-border); border-radius: 10px; overflow: hidden; }
.cnt-dv__specs div { background: var(--cnt-card); padding: 10px 12px; }
.cnt-dv__specs dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--cnt-muted); margin-bottom: 3px; }
.cnt-dv__specs dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--cnt-white); font-variant-numeric: tabular-nums; }
.cnt-dv__qty { font-size: 14px; color: var(--cnt-muted); }
.cnt-dv__qty.in { color: #34d399; }
.cnt-dv__qty b { font-size: 17px; }
.cnt-dv__act { margin-top: 6px; }
.cnt-dv__act .cn-order, .cnt-dv__act .btn-price { width: 100%; padding: 13px 16px; font-size: 15px; text-align: center; display: block; }
.cnt-dv__note { margin: 4px 0 0; font-size: 12.5px; color: var(--cnt-muted); }
.cnt-dv__close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,11,14,.72); color: #fff; border: 0; font-size: 26px; line-height: 1; cursor: pointer; }
.cnt-dv__close:hover { background: var(--cnt-accent); }
.cnt-dv__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cnt-mount .cnt-cards [data-cn] { cursor: pointer; }
@media (max-width: 760px) {
  .cnt-dv { padding: 0; align-items: flex-end; }
  .cnt-dv__box { grid-template-columns: 1fr; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .cnt-dv__media { min-height: 0; border-radius: 18px 18px 0 0; }
  .cnt-dv__media img { max-height: 46vh; }
  .cnt-dv__body { padding: 18px 16px 22px; }
  .cnt-dv__title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .cnt-dv.on { animation: none; } }

.cnt-dv__note--design { color: #e9c46a; }