/* ВНИМАНИЕ: ФАЙЛ СОБРАН СКРИПТОМ, РУКАМИ НЕ ПРАВИТЬ.
 *
 * Источник — theme/front-page.php, блок правил выдачи. Он в списке NOT-TOUCH,
 * вынести стили оттуда нельзя, поэтому они скопированы сюда для страницы
 * /part/, которая показывает ту же выдачу теми же классами.
 *
 * Сборка: scripts/sync-sd-css.py. Поменялась сетка выдачи — прогнать скрипт.
 */
/* 11-column grid: photo | brand | article | name | stock | eta | weight | updated | prob | price | order */
/*
 * Колонка ЗАКАЗА раньше была ровно 196px, а её содержимое (степпер, «В корзину»
 * и закладка) занимает 230px. Колонка выровнена по правому краю, поэтому лишние
 * 34px уезжали НЕ вправо, а влево — прямо на цену: у трёхзначных цен минус
 * закрывал третью цифру и «₾», клиент видел «35» вместо «358 ₾»
 * (артикул 8889188877B01, 19.08.2026).
 *
 * Теперь колонка сама подстраивается под содержимое (max-content) с прежним
 * минимумом — если завтра рядом появится ещё одна кнопка, цену снова не закроет.
 * Цена расширена с 92px до 104px: туда должно помещаться «3999 ₾».
 */
.pg-sd-row-grid {
  display: grid;
  grid-template-columns: 56px 92px 116px minmax(0,1fr) 144px 60px 58px 80px 50px 104px 236px;
  align-items: center;
  gap: 0 9px;
  padding: 0 16px;
}

/* Fixed table header */
.pg-sd-thead {
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid rgba(255,255,255,.09);
  border-radius: 12px 12px 0 0;
  background: rgba(16,14,32,.99);
  padding-top: 8px; padding-bottom: 8px;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: .8px;
}
.pg-sd-th { cursor: pointer; user-select: none; transition: color .12s; }
.pg-sd-th:hover { color: rgba(255,255,255,.55); }
.pg-sd-th-active { color: #AFA9EC !important; }
.pg-sd-thead .pg-sd-row-grid > :nth-child(6)  { text-align: center; }
.pg-sd-thead .pg-sd-row-grid > :nth-child(7)  { text-align: center; }
.pg-sd-thead .pg-sd-row-grid > :nth-child(8)  { text-align: center; }
.pg-sd-thead .pg-sd-row-grid > :nth-child(9)  { text-align: center; }
.pg-sd-thead .pg-sd-row-grid > :nth-child(10) { text-align: right; }
.pg-sd-thead .pg-sd-row-grid > :nth-child(11) { text-align: right; }
/*
 * Заголовок последней колонки — ПО ЦЕНТРУ. Правое выравнивание прижимало его к
 * самому краю таблицы, далеко от кнопок, которые он подписывает: между «Заказ» и
 * степпером оставалось под 180px пустоты, и подпись читалась как обрезанная.
 *
 * Ширины хватает с запасом: самый длинный вариант — грузинское «შეკვეთა» 54px
 * при колонке 236px (ru «Заказ» 40px, en «Order» 42px). Правило идёт ПОСЛЕ
 * nth-child(11): специфичность у них одинаковая, решает порядок.
 */
.pg-sd-thead .pg-sd-row-grid > .pg-sd-th-order { text-align: center; }

/* Scrollable body */
.pg-sd-tbody { overflow-x: auto; }
.pg-sd-inner { min-width: 700px; }

/* SKU group */
.pg-sd-group { border-bottom: 1px solid rgba(255,255,255,.05); }
.pg-sd-group:last-child { border-bottom: none; }
.pg-sd-section-hdr { padding: 14px 0 5px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* Data row */
.pg-sd-row {
  min-height: 44px; padding-top: 6px; padding-bottom: 6px;
  transition: background .1s;
}
.pg-sd-row:hover { background: rgba(255,255,255,.04); }
.pg-sd-row + .pg-sd-row { border-top: 1px solid rgba(255,255,255,.04); }

/* Brand */
.pg-sd-col-brand {
  font-size: 12px; font-weight: 800;
  color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-sd-row-sub .pg-sd-col-brand { color: rgba(255,255,255,.12); }

/* Article (SKU) */
.pg-sd-col-art {
  font-size: 14px; font-weight: 700; color: #AFA9EC;
  font-family: monospace; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.pg-sd-row-sub .pg-sd-col-art { color: rgba(175,169,236,.22); font-size: 12.5px; }

/* Name */
.pg-sd-col-name {
  font-size: 14px; color: rgba(255,255,255,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* Photo column */
.pg-sd-col-photo { display: flex; align-items: center; justify-content: center; }
.pg-sd-photo-wrap {
  width: 44px; height: 44px; border-radius: 5px; overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pg-sd-photo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.pg-sd-photo-wrap svg { opacity: .25; }

/* Warehouse description label — plain colored text + flag, no box clipping */
.pg-sd-wh-badge {
  display: block;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.pg-sd-wh-badge.pg-wh-ge { color: #7db9f8; }
.pg-sd-wh-badge.pg-wh-ae { color: #5fd98a; }
.pg-sd-wh-badge.pg-wh-ru { color: #9ca3af; }
.pg-sd-wh-badge.pg-wh-am { color: #f87171; }
.pg-sd-wh-badge.pg-wh-eu { color: #7d9bf8; }
.pg-sd-wh-badge.pg-wh-xx { color: rgba(255,255,255,.45); }

/* Weight + updated + probability columns */
.pg-sd-col-weight { font-size: 12px; color: rgba(255,255,255,.35); text-align: center; white-space: nowrap; }
.pg-sd-col-upd    { font-size: 10.5px; color: rgba(255,255,255,.45); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sd-col-prob   { font-size: 12px; color: rgba(255,255,255,.35); text-align: center; white-space: nowrap; }

/* Stock + warehouse */
.pg-sd-col-stock { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-sd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pg-sd-badge.in::before  { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#22c55e; box-shadow:0 0 5px rgba(34,197,94,.5); flex-shrink:0; }
.pg-sd-badge.out::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.2); flex-shrink:0; }
.pg-sd-badge.in  { color: #4ade80; }
.pg-sd-badge.out { color: rgba(255,255,255,.32); }
.pg-sd-badge.ord::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#fbbf24; flex-shrink:0; }
.pg-sd-badge.ord { color: #fbbf24; }
.pg-sd-analog-badge { font-size:11px; font-weight:600; background:rgba(251,191,36,.12); color:#fbbf24; border:1px solid rgba(251,191,36,.25); border-radius:3px; padding:1px 5px; margin-right:3px; white-space:nowrap; vertical-align:middle; }
.pg-sd-nr-badge { display:inline-flex; align-self:flex-start; align-items:center; font-size:10px; font-weight:600; background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.28); border-radius:3px; padding:1px 5px; margin-top:2px; white-space:nowrap; cursor:help; max-width:100%; }
.pg-nr-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; }
.pg-nr-box { background:var(--pg-surface,#ffffff); color:var(--pg-text,#1d1b2e); border:1px solid var(--pg-border-strong,rgba(0,0,0,.12)); border-radius:14px; max-width:420px; width:100%; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.pg-nr-box h3 { font-size:20px; font-weight:800; margin:0 0 12px; color:var(--pg-text,#1d1b2e); }
.pg-nr-box p { font-size:14px; line-height:1.55; color:var(--pg-text-2,#56546e); margin:0 0 20px; }
.pg-nr-actions { display:flex; gap:10px; justify-content:flex-end; }
.pg-nr-btn { padding:9px 18px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:opacity .15s,background .15s; }
.pg-nr-yes { background:var(--pg-text,#1d1b2e); color:var(--pg-surface,#ffffff); }
.pg-nr-yes:hover { opacity:.88; }
.pg-nr-no { background:var(--pg-fill,rgba(0,0,0,.05)); color:var(--pg-text,#1d1b2e); border-color:var(--pg-border-strong,rgba(0,0,0,.15)); }
.pg-nr-no:hover { background:var(--pg-fill-hover,rgba(0,0,0,.08)); }
.pg-badge-used { font-size:10px; font-weight:700; background:rgba(251,146,60,.15); color:#fb923c; border:1px solid rgba(251,146,60,.3); border-radius:3px; padding:1px 5px; margin-right:3px; white-space:nowrap; vertical-align:middle; }
.pg-sd-no-exact { padding:10px 14px; font-size:12px; color:rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.07); }
.pg-sd-no-exact b { color:#AFA9EC; font-weight:600; }
.pg-sd-wh-name { font-size: 11px; color: rgba(255,255,255,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-sd-qty-sub  { font-size: 11.5px; color: rgba(255,255,255,.3); }

/* ETA */
.pg-sd-col-eta { font-size: 13px; color: rgba(255,255,255,.42); text-align: center; white-space: nowrap; }

/* Price */
.pg-sd-col-price { font-size: 15.5px; font-weight: 700; color: #AFA9EC; text-align: right; white-space: nowrap; }
.pg-sd-ask { font-size: 12px; font-weight: 400; font-style: italic; color: rgba(255,255,255,.32); }

/* Stepper */
.pg-sd-col-order { display: flex; justify-content: flex-end; min-width: 0; }
.pg-sd-stepper { display: flex; align-items: center; gap: 3px; }
.pg-sd-step {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65); border-radius: 5px;
  width: 27px; height: 27px; font-size: 15px; font-weight: 700; line-height: 1;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.pg-sd-step:hover { background: rgba(255,255,255,.15); color: #fff; }
.pg-sd-step-val { width: 26px; text-align: center; font-size: 14px; font-weight: 700; color: #fff; }
.pg-sd-cart-btn {
  background: rgba(101,96,204,.25); border: 1px solid rgba(101,96,204,.4);
  color: #AFA9EC; border-radius: 6px;
  padding: 0 11px; height: 28px; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 95px; /* reserve the success-state width so the button never grows/clips on click */
  transition: background .14s, color .14s, transform .1s;
}
.pg-sd-cart-btn:hover  { background: rgba(101,96,204,.55); color: #fff; }
.pg-sd-cart-btn:active { transform: scale(.95); }
.pg-sd-cart-btn.added  { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); color: #4ade80; }

/* State messages */
.pg-sd-msg { padding: 16px; font-size: 13px; color: rgba(255,255,255,.35); text-align: center; }
/* ⚠️ `:not(.pg-sd-loading-gears)` — чтобы кружок НЕ рисовался там, где уже
   крутятся шестерёнки. С 05.09.2026 в обоих ожиданиях (подбор бренда и блок
   предложений) стоит новый знак, а этот псевдоэлемент остался и давал ВТОРОЙ
   индикатор рядом с первым. */
.pg-sd-loading .pg-sd-msg:not(.pg-sd-loading-gears)::before {
  content: ''; display: inline-block; width: 12px; height: 12px;
  margin-right: 7px; vertical-align: middle;
  border: 2px solid rgba(175,169,236,.2); border-top-color: #AFA9EC;
  border-radius: 50%; animation: pgSDSpin .65s linear infinite;
}
@keyframes pgSDSpin { to { transform: rotate(360deg); } }

/*
 * 901–1200px: таблица влезает только без второстепенных колонок. Прячем ВЕС,
 * ОБНОВЛЁН и ВЕРОЯТНОСТЬ — по ним не принимают решение о покупке, в отличие от
 * склада, срока и цены.
 *
 * Скрываем ПО КЛАССАМ: у ячеек шапки теперь есть свои `pg-sd-th-*`, парные к
 * `pg-sd-col-*` у строк. Порядковые номера (nth-child) для этого не годятся —
 * стоит кому-то вставить в строку ещё одну ячейку, и скрытие поедет.
 */
@media (min-width: 901px) and (max-width: 1200px) {
  .pg-sd-col-weight, .pg-sd-th-weight,
  .pg-sd-col-upd,    .pg-sd-th-upd,
  .pg-sd-col-prob,   .pg-sd-th-prob { display: none; }
  .pg-sd-row-grid {
    grid-template-columns: 56px 92px 116px minmax(0,1fr) 144px 60px 104px 236px;
  }
}

/* Mobile ≤900px: stacked cards.
 *
 * Было ≤640px, и на 768px показывалась 11-колоночная таблица, которая туда не
 * влезает: контейнер ~736px против ~1080px колонок. Грид ужимал колонку заказа
 * обратно до минимума, её содержимое (степпер + «В корзину» + закладка, 230px)
 * снова уезжало влево и закрывало цену. Карточная раскладка на планшете эту
 * проблему снимает целиком — и она уже написана, ничего нового не изобретаем. */
@media (max-width: 900px) {
  .pg-sd-thead { display: none; }
  .pg-sd-inner { min-width: 0; }
  .pg-sd-col-photo { display: none; }
  .pg-sd-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand brand" "art art" "name name" "stock price" "eta weight" "order order";
    grid-template-rows: auto auto auto auto auto auto;
    padding: 10px 14px; gap: 1px 10px;
  }
  .pg-sd-col-brand {
    grid-area: brand;
    font-size: 9px; letter-spacing: .9px;
    color: rgba(255,255,255,.3);
    padding-bottom: 1px;
  }
  .pg-sd-col-art   {
    grid-area: art;
    font-size: 16px; color: #AFA9EC;
    padding-bottom: 1px;
  }
  .pg-sd-col-name  {
    grid-area: name;
    font-size: 13px; color: rgba(255,255,255,.6);
    white-space: normal; line-height: 1.35;
    padding-bottom: 5px;
  }
  .pg-sd-col-stock {
    grid-area: stock;
    flex-direction: column; gap: 1px; align-self: center;
  }
  .pg-sd-col-price {
    grid-area: price;
    align-self: center; font-size: 17px; text-align: right;
  }
  .pg-sd-col-order  { grid-area: order; justify-content: flex-start; padding-top: 6px; }
  .pg-sd-col-eta    { grid-area: eta; text-align: left; font-size: 11px; color: rgba(255,255,255,.38); align-self: center; }
  .pg-sd-col-weight { grid-area: weight; text-align: right; font-size: 11px; color: rgba(255,255,255,.32); align-self: center; }
  .pg-sd-col-prob   { display: none; }
  .pg-sd-col-upd    { display: none; }
  .pg-sd-row-sub .pg-sd-col-brand { display: none; }
  .pg-sd-row-sub .pg-sd-col-art   { display: none; }
  .pg-sd-row-sub .pg-sd-col-name  { display: none; }
  .pg-sd-row-sub {
    grid-template-areas: "stock price" "eta weight" "order order";
    grid-template-rows: auto auto auto;
    padding-top: 4px; padding-bottom: 8px;
  }
}