@charset "UTF-8";
/* 28.09.2026 (TODO #59, часть 2): раздел «Товары» — макет дизайнера Products.dc.html (README «Раздел «Товары»», снимки 34–39),
   принят владельцем с правками DESIGN_46 §15–17. Здесь — только свое для раздела: таблица .pt, строки, особые ячейки, фильтр товаров.
   Меню, кнопки, сегмент, плашка сегмента, флажки, поиск, подсказки, смена таблицы и скелет — страничные (style.css, restyle.css):
   .dd/.menu/.mi (закрытие .closing 0,12 с — app.js hideDd), .seg/.seg-b/.seg-thumb, .chanmenu .cb/.srch/.cm-f, #tip по data-tip,
   .tablewrap.sw-leave/.sw-enter. Имена макета, занятые на странице (.gb, .tg, .dd, .cnt, .sec…), — только внутри #content .pt. */

/* кнопка раздела в сегменте листов: тонкий разделитель перед ней и значок Lucide package */
#tabs .segdiv{width:1px;height:18px;background:#d6d6d0;align-self:center;margin:0 2px;flex-shrink:0}
#tabs #prodtab svg{color:#5a5e65;transition:color .2s}
#tabs #prodtab.active svg{color:#1f4fb8}

/* вторая строка: на «Товарах» элементы листов уходят, приходят свои (body.prod-on — app.js productsOn) */
#prodbar{display:none}
body.prod-on #prodbar{display:contents}
body.prod-on .bar2 > .grp.sheetonly,body.prod-on #spendbtn,body.prod-on #colsbtn,body.prod-on #coltip{display:none}
body.prod-on #yearsel{display:none!important}         /* год — у семей листов; сводка по товарам — по датам периода */
#prodbar .spacer2{flex-grow:1}
/* 13.10.2026 (#109): места под «Таблица / График» больше нет — переключатель отменен (владелец 09.10: «от кнопки той отказываемся»), график
   всегда под таблицей (products.js prodChart); пустой span.slot из index.html убран */
#prodseg .seg-b[disabled]{color:#b3b5b9;cursor:default}
.pd{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.pd.p-wb{background:#a24fd1}.pd.p-oz{background:#2e6bea}.pd.p-ym{background:#f2b705}
.pd.p-all{background:transparent;box-shadow:inset 0 0 0 1.5px #9a9ea5}
#platbtn .pd{margin-left:2px}
#platbtn[disabled]{color:#b3b5b9;cursor:default}
#platmenu .mi .mh2{margin-left:auto;padding-left:16px;font-size:12px;font-weight:400;color:#6f737a}
#platmenu .mi.active .mh2{color:#4a6bb0}
#prodfbtn{max-width:280px}
#prodfbtn .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
#prodfbtn .muted{font-variant-numeric:tabular-nums}
#prodfbtn.flt{background:#eaf0fb;border-color:#c9d6f0;color:#173c8c}
#prodfbtn.flt .muted{color:#4a6bb0}

/* фильтр «Товары» — разметка и стили меню «Каналы» (.chanmenu), свое — чипы склеек по площадкам */
.prodfmenu{width:460px}
.prodfmenu .gl-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#6f737a;font-weight:600;padding:0 2px}
.prodfmenu .gpl{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:8px;padding:8px 2px}
.prodfmenu .gpl + .gpl{border-top:1px solid #ebebe6}
.prodfmenu .ptag{height:26px;align-self:start}
.prodfmenu .gchips{display:flex;flex-wrap:wrap;gap:6px}
.prodfmenu .gchip{height:26px;padding:0 9px;border-radius:13px;border:1px solid #d6d6d0;background:#ffffff;font:inherit;font-size:12px;color:#1c1e22;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:background-color .14s,border-color .14s,color .14s}
.prodfmenu .gchip:hover{background:#f3f3ef}
.prodfmenu .gchip.on{background:#eaf0fb;border-color:#1f4fb8;color:#173c8c;font-weight:500}
.prodfmenu .gchip i{font-style:normal;color:#8a8e95}
.prodfmenu .gnone{font-size:12px;color:#8a8e95;line-height:26px}
.prodfmenu .clist{max-height:360px}
.prodfmenu .row{align-items:center}
.prodfmenu .row .nm{flex:1 1 auto;min-width:0}
.prodfmenu .row .pp{display:flex;gap:3px;flex-shrink:0}
.prodfmenu .cm-f .sel{flex-grow:1}
.ptag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#4a4e55;flex-shrink:0}

/* таблица */
#content .pt{width:max-content;min-width:100%;font-size:13px}
#content .pt .prow{display:grid;grid-template-columns:var(--pcols);background:#ffffff}
#content .pt .prow > div{height:30px;padding:0 8px;display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-variant-numeric:tabular-nums;border-right:1px solid #f0f0ec;border-bottom:1px solid #eeeeea;background:inherit;position:relative;min-width:0}
#content .pt .prow > .nm{position:sticky;left:0;z-index:3;justify-content:flex-start;gap:6px;border-right:1px solid #d6d6d0}
#content .pt .prow > .nm .tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 30.09.2026 (TODO #63): строка под курсором — тем же приемом и цветом, что день в таблице листа (grid.css .gt .r-day:hover > div):
   слой поверх заливки каждой ячейки, а не фон строки. Подсвечиваются товар, склейка, площадка раскрытого товара (.sub) и товар
   раскрытой склейки (.sub.child); «Итого», разделы площадок, шапки и заготовки загрузки — нет. Было: фон строки #f7f9fd только
   у товара и склейки — площадки и товары склейки (у них свой фон #fcfcfb) не подсвечивались, цвет отличался от листа. */
#content .pt .prow.pr:hover > div,#content .pt .prow.grow:hover > div,#content .pt .prow.sub:hover > div{box-shadow:inset 0 0 0 9999px rgba(31,79,184,.045)}
#content .pt .gh{position:sticky;top:0;z-index:6;background:#f7f7f4}
#content .pt .gh > div{height:26px;justify-content:flex-start;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;color:#4a4e55;border-left:2px solid rgba(0,0,0,.14);border-right:0}
#content .pt .gh > div.nm{border-left:0;border-right:1px solid #d6d6d0;color:#6f737a}
/* 30.09.2026: название группы прилипает слева за столбцом товара при прокрутке вбок — тем же приемом, что название блока на листах
   (grid.css .gt .bk-name: sticky внутри ячейки блока, отступы — у подписи, не у ячейки); --pnm — ширина первого столбца (products.js) */
#content .pt .gh > div:not(.nm){padding:0}
#content .pt .gh .bk-name{position:sticky;left:var(--pnm,300px);display:block;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#content .pt .ch{position:sticky;top:26px;z-index:6;background:#f7f7f4}
#content .pt .ch > div{height:44px;white-space:normal;text-align:right;line-height:1.2;font-size:11.5px;font-weight:600;color:#33373d;cursor:pointer;user-select:none}
#content .pt .ch > div:hover,#content .pt .ch > div.sorted{color:#173c8c}
#content .pt .ch > div.nm{cursor:default;color:#33373d}
#content .pt .ch > div .ar{display:inline-flex;margin-right:3px;color:#1f4fb8;flex-shrink:0}
#content .pt .ch > div.gs{border-left:2px solid rgba(0,0,0,.14)}
#content .pt .prow > div.gs{border-left:2px solid #e4e4df}
/* 07.10.2026 (макет ColIcons): значок ручного столбца — Lucide pen-line 12 px, серый полупрозрачный, приклеен к первому слову, при наведении
   не меняется (подпись синеет, значок — нет); было: символ ✎ через ::before */
#content .pt .ch .col-nw{white-space:nowrap}
#content .pt .ch .col-ic{display:inline-block;vertical-align:-2px;margin-right:3px;color:#6f737a;opacity:.5}
/* 15.10.2026 (#135; владелец: «чтобы весь проект был в едином стиле»): подкраска по источнику столбца — цвета ячеек дней на листах (grid.css
   .gt .r-day > .c-hand / .c-formula): ручной ввод — #fff3cd, формула — #eef4fb (текст #33373d). Какие ячейки — products.js / unit.js
   (prodTint, unitTint). Вес правил ниже, чем у .nd (серый «—»), .neg (красное отрицательное), .na (штриховка), .fbslow (красная «мало на
   ФБС»), поля ввода и ошибки сохранения (unit.css) — они остаются поверх подкраски, как ДРР выше порога на листах; слой наведения строки —
   тень, он тоже поверх. */
#content .pt .prow > .c-hand{background:#fff3cd}
#content .pt .prow > .c-formula{color:#33373d}   /* 20.10.2026 (#160 Ф3): без фона, как на листах */
#content .pt .tot{position:sticky;top:70px;z-index:5;background:#f4f4f1;font-weight:600}
#content .pt .tot > div{border-bottom:1px solid #d6d6d0;height:32px}
#content .pt .sec > div{height:28px;background:#fafaf8}
#content .pt .sec > .nm{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#6f737a;font-weight:600}
#content .pt .prow.sub{background:#fcfcfb}
#content .pt .prow.sub > .nm{padding-left:36px;color:#33373d;font-size:12.5px}
#content .pt .prow.sub > div{height:26px;font-size:12.5px;color:#33373d}
#content .pt .prow.child > .nm{padding-left:36px}
#content .pt .tgb{width:20px;height:20px;border:0;background:transparent;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#6f737a;cursor:pointer;flex-shrink:0;padding:0;transition:background-color .14s}
#content .pt .tgb:hover{background:#ebebe6}
#content .pt .tgb:focus-visible{outline:2px solid #1f4fb8;outline-offset:1px}
#content .pt .tgb svg{transition:transform .15s cubic-bezier(.2,.8,.3,1)}
#content .pt .tgb.closed svg{transform:rotate(-90deg)}   /* как стрелка свертки в таблице листа: chevron-down, свернуто — −90° */
#content .pt .tgs{width:20px;flex-shrink:0}
/* 02.10.2026 (#86 а, созвон 02.10: «артикул бы увидеть там»): .part — артикул у названия товара на «Артикулах», «Складе» и у товаров раскрытой
   склейки — вид номера склейки .gno */
#content .pt .gno,#content .pt .gcnt,#content .pt .part{font-size:11.5px;color:#8a8e95;font-weight:400;flex-shrink:0}
#content .pt .dots{display:inline-flex;gap:3px;flex-shrink:0;margin-left:auto;padding-left:6px}
#content .pt .stl-i{display:flex;flex-shrink:0}
/* 01.10.2026 (#59 ч. 5): тот же «?» в ячейке «Показы» — показы загружены не за все дни */
#content .pt .prow > div:not(.nm) > .stl-i{margin-right:4px}
/* 01.10.2026 (владелец): значок сбоя в строке — как «?» неполной суммы на листах (grid.css .gt .pq: цвет, размер, шрифт те же); было — серые часы */
#content .pt .stl-i .pq{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:13px;height:13px;border-radius:50%;background:#d9730d;color:#ffffff;font:700 9.5px/13px 'IBM Plex Sans',system-ui,sans-serif;font-style:normal;pointer-events:none}
/* особые ячейки */
#content .pt .prow > div.nd{color:#b3b6bc}
#content .pt .prow > div.na{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(0,0,0,.05) 5px 6px);color:#8a8e95;font-size:11px;justify-content:center}
/* 29.09.2026 «Склад»: «Хватит» меньше порога — макет .low / .mid; цвета — сайта (restyle.css --rs-bad, .sync.old) */
#content .pt .prow > div.low{color:#a3261c;font-weight:600}
#content .pt .prow > div.mid{color:#8a4b0a;font-weight:500}
/* 05.10.2026 (#86 в): «мало на ФБС» — красная ячейка, как «горячая» ДРР на листах (grid.css .gt .r > .drr-hot; цвета сайта --rs-bad-soft, --rs-bad) */
/* 20.10.2026 (#159): «Стоимость для покупателя» ниже РРЦ — тот же цвет «плохо» (новый не вводим: владелец, «новое оформление не придумывать») */
#content .pt .prow > div.fbslow,#content .pt .prow > div.rrclow{background:#fbeeec;color:#a3261c;font-weight:500}   /* 20.10.2026 (#160 Д1): как ДРР выше порога; было #fde4e1, 600 */
/* 05.10.2026 (#86 б): «Фулфилмент» — у склада пара «ФБС | Остаток» под названием склада: ячейка шапки на два столбца (products.js prodHead,
   .whp; сетка — ширины двух столбцов тела). Шрифт, цвета, линии и выделение при наведении и сортировке — как у подписей столбцов .ch */
#content .pt .ch > div.whp{display:grid;grid-template-rows:18px minmax(0,1fr);padding:0;cursor:default;align-items:stretch;justify-content:stretch}
#content .pt .ch > div.whp:hover{color:#33373d}
#content .pt .ch .whp > .whn{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;padding:0 8px;border-bottom:1px solid #eeeeea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 29.10.2026 (#208): блок склада из трех столбцов («ФБС | Остаток | Расход ФБС в день») — линия справа у каждой подписи, кроме последней (было —
   только у первой: «.whn + span»); межстрочный 1.1 — подпись в две строки («Расход ФБС в день») встает в 26 px под названием склада (при 1.2 — 27,6) */
#content .pt .ch .whp > span[data-sort]{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;cursor:pointer;min-width:0;line-height:1.1}
#content .pt .ch .whp > span[data-sort]:not(:last-child){border-right:1px solid #f0f0ec}
#content .pt .ch .whp > span[data-sort]:hover,#content .pt .ch .whp > span[data-sort].sorted{color:#173c8c}
/* 29.09.2026 «Отзывы и рейтинг»: разброс рейтингов (макет .rng — серым, подсказка по площадкам) */
#content .pt .prow > div.rng{color:#6f737a;cursor:help}
/* раскрытие строк — как недели и месяцы листа (grid.js): обертка .gb, высота в px (полная ↔ 0) 0,24 с, прозрачность не меняется */
#content .pt .gb{overflow:clip;transition:height .24s ease}
#content .pt .gb.closed{height:0;visibility:hidden;transition:height .24s ease,visibility 0s .24s}
/* пусто и загрузка */
/* 22.10.2026: ширина и высота — по видимой части #content (products.js ptEmptyFit), текст — по центру по вертикали и горизонтали */
#content .pempty{position:sticky;left:0;box-sizing:border-box;min-height:220px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#5a5e65;font-size:13px}
#content .pempty svg{color:#b3b6bc}
#content .pempty b{font-size:14px;color:#1c1e22;font-weight:600}
/* скелет загрузки «Товаров», «Юнит-экономики» и «Долей» (prodSkeleton, unitSkeleton, shareSkeleton). 23.10.2026 (README макетов «Загрузка таблицы:
   каркас с бликом» п. 7): размеры полосок — как были, цвет — тот же полупрозрачный, что у полосок каркаса листа (п. 3; один на любом фоне строки,
   было #eeeeea); полоски неподвижные, поверх области ячеек — один слой-блик .glint (grid.css, products.js skelGlint) */
#content .pt .sk{display:block;height:10px;border-radius:4px;background:rgba(28,30,34,.075);width:60%}
/* 23.10.2026 (сведение _07): общий .sk::after полоски листов (grid.css) тут не нужен — полоска скелета раздела — сам элемент */
#content .pt .sk::after{content:none}
/* слой блика скелета разделов — сразу за таблицей скелета (.pt[aria-busy]); координаты в окне ставит skelGlintPlace, поэтому здесь всегда fixed,
   какое бы положение (fixed или absolute — README п. 4 допускает оба) ни выбрал общий .glint в grid.css для листов */
#content .pt[aria-busy] + .glint{position:fixed}
#content .pt .nm .sk{width:70%}
#content .pt .prow > div:not(.nm) .sk{margin-left:auto}
@media (prefers-reduced-motion: reduce){#content .pt .gb,#content .pt .gb.closed,#content .pt .tgb svg,.prodfmenu .gchip,#tabs #prodtab svg{transition:none}}
/* 29.09.2026 (TODO #61): заметка к товару — оранжевый уголок у названия, как у даты с заметкой в таблице листа (grid.css .gt .r > .fc.note::after);
   окно заметок (редактору — всегда, зрителю — если заметки есть) с 02.10.2026 (#83) открывает только карандаш (restyle.css .npen,
   products.js prodPen): у правого края ячейки, перед точками площадок и часами (они остаются у края), далеко от стрелки раскрытия;
   виден при наведении на ячейку названия и при фокусе. Курсора-руки у названия нет — щелчок по нему окно не открывает. */
#content .pt .prow > .nm.pnote::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent #d9730d transparent transparent}
#content .pt .prow > .nm > .npen{margin-left:auto}
#content .pt .prow > .nm > .npen ~ .dots{margin-left:0}
#content .pt .prow > .nm:hover > .npen{opacity:1}
/* окно заметок к товару — с 02.10.2026 (#83) по макету «Заметки»: restyle.css (#pnotedlg), products.js prodNoteOpen */
/* 02.10.2026 (белая карточка у строки склейки): имя товара в строке даты заметки — в одну строку, длинное — многоточием */
.nd-card .nc-d .nc-pn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 06.10.2026 «шапка 06.10» (макет HeaderUnit.dc.html §1): на «Товарах» ↶ ↷ | Показы WB — справа во второй строке, перед местом под
   «Таблица / График» (в разметке они стоят перед «Столбцами» — порядок здесь, #prodbar — display:contents) */
body.prod-on .bar2 > #histctl,body.prod-on .bar2 > #wbfsep,body.prod-on .bar2 > #wbfunbtn{order:1}
/* 07.10.2026 (владелец: «кнопка выгрузки WB смотрится не очень, на других листах там кнопка со столбцами, поэтому на Товарах пусто» → «делай а»):
   «Выгрузки WB» у правого края, как «Столбцы» на листах. 13.10.2026 (#109): «Таблица / График» отменен — места под него нет (правило выше) */
/* 16.10.2026 (#142, владелец: «у нас уже были готовые анимации переключения в шапке… почему бы просто было не взять и применить уже готовое
   решение из шапки?»): переключатели раздела «Доли продуктов по месяцам» — сегмент шапки (.seg/.seg-b, белая плашка .seg-thumb переезжает —
   app.js segThumb, style.css), контейнер — как в окне заметок (#pnotedlg .seg). Вес 1,1,0 перебивает старые .placeholder .seg button
   (вид «Баннеров ВБ»: плашка не переезжала, выбранная — жирнее). Таблица раздела меняется как лист: .tablewrap.sw-leave / .sw-enter (shares.js). */
/* 28.10.2026 (#201): вкладки «Повторных покупателей» (По месяцам / Когорты (LTV) / За период, #rptpick) — то же правило */
#shpick .seg,#rptpick .seg{display:inline-flex;padding:2px;background:#ebebe6;border-radius:7px;gap:2px;position:relative;margin:6px 10px 12px 0;vertical-align:top}
#shpick .seg-b,#rptpick .seg-b{height:28px;padding:0 12px;border:0;background:transparent;border-radius:5px;font-size:13px;font-weight:500;color:#4a4e55}
#shpick .seg-b:hover,#shpick .seg-b.active,#rptpick .seg-b:hover,#rptpick .seg-b.active{color:#1c1e22}
#shpick .seg-b:focus-visible,#rptpick .seg-b:focus-visible{outline:2px solid #1f4fb8;outline-offset:1px}