/* ---------- Шаг 3: карточка товара (макет 2d) ---------- */
.cardbar, .chipsbar, .cardhead { display: flex; align-items: center; gap: 14px; }
.cardbar { margin-bottom: 20px; }
.spacer { flex: 1; }
.small { font-size: 12px; }
.seg { display: flex; align-items: center; gap: 4px; background: var(--card);
       border-radius: var(--r-pill); padding: 4px;
       box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.seg button { border: none; background: none; box-shadow: none; padding: 7px 16px;
              border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted); }
.seg button:hover { color: var(--text); background: none; }
.seg button.on { background: var(--accent-grad); color: var(--accent-ink); font-weight: 600; }

/* Выбор даты замеров — тем же пилюльным силуэтом, что и переключатели рядом,
   и со своим календарём: системный в Chrome белый и рвёт тёмную страницу. */
.datepick { position: relative; flex: none; }
.datebtn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px;
           border: none; border-radius: var(--r-pill); background: var(--card);
           color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
           box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); cursor: pointer; }
.datebtn:hover { background: var(--card-hover); }
.datebtn svg { color: var(--muted); }
.datebtn.open { box-shadow: inset 0 0 0 1px var(--accent); }
.datebtn.open svg { color: var(--accent); }

.datemenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
            width: 252px; padding: 14px; background: var(--surface);
            border: 1px solid var(--line); border-radius: var(--r-block);
            box-shadow: var(--sh-modal); }
.calhead { display: flex; align-items: center; justify-content: space-between;
           margin-bottom: 10px; }
.calmonth { font-size: 13px; font-weight: 600; color: var(--text); }
.calnav { display: flex; gap: 4px; }
.calstep { width: 26px; height: 26px; padding: 0; border: none; border-radius: 8px;
           background: none; color: var(--muted); font-size: 16px; line-height: 1;
           box-shadow: none; cursor: pointer; }
.calstep:hover { background: var(--card-hover); color: var(--text); }
.calstep:disabled { color: var(--disabled); background: none; cursor: default; opacity: .5; }
.calweek, .calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calweek span { text-align: center; font-size: 11px; color: var(--muted-2); padding: 4px 0; }
.calday { height: 30px; padding: 0; border: none; border-radius: 9px; background: none;
          color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500;
          box-shadow: none; cursor: pointer; }
.calday:hover { background: var(--card-hover); color: var(--text); }
.calday.empty { pointer-events: none; }
.calday:disabled { color: var(--disabled); background: none; cursor: default; }
.calday.on { background: var(--accent-grad); color: var(--accent-ink); font-weight: 600; }
.calfoot { display: flex; justify-content: flex-end; margin-top: 10px;
           border-top: 1px solid var(--line); padding-top: 10px; }
.callink { border: none; background: none; box-shadow: none; padding: 4px 8px;
           border-radius: 8px; color: var(--accent); font: inherit; font-size: 12px;
           font-weight: 600; cursor: pointer; }
.callink:hover { background: var(--accent-soft); }

.chipsbar { align-items: flex-start; margin-bottom: 12px; }
.chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
         padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-block);
         background: var(--card); min-height: 52px; }
/* Чип запроса — подложкой акцента, а не заливкой: залитых чипов в строке
   бывает десяток, сплошная мятная лента забивает саму матрицу. */
.chip { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px;
        border-radius: var(--r-pill); background: var(--accent-soft);
        color: var(--accent); font-size: 13px; }
.chip i { color: var(--muted); cursor: pointer; font-size: 12px; font-style: normal; }
.chip i:hover { color: var(--up); }
.chip-hint { padding: 7px 12px; font-size: 13px; color: var(--muted-2); }
.chipsbar .primary { padding: 15px 22px; border-radius: 16px; flex: none; }

/* Шапка товара — одна строка: под ней теперь живут вкладки метрик, и высокий
   блок отжимал таблицу за нижний край экрана. */
.cardhead { display: flex; align-items: center; gap: 16px; background: var(--card);
            border-radius: 20px; padding: 14px 18px; margin-bottom: 14px; }
.cardhead .thumb, .cardhead .thumb img { width: 48px; height: 48px; border-radius: 12px; }
.cardtitle { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.cardhead .sku { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
/* Город плашки — под названием товара: карточка открыта по одному городу, и
   перепутать его с соседним нельзя. Пока город один, это подпись; когда их
   несколько, те же пилюли, что и у остальных переключателей карточки. */
.cardhead .cityseg { margin-top: 6px; padding: 3px; align-self: flex-start; }
.cardhead .cityseg button { padding: 5px 12px; font-size: 12px; }
.citytag { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.cardhead .pcell { display: flex; flex-direction: column; align-items: flex-start; }
.cardstats { display: flex; align-items: center; gap: 22px; }
.cstat { background: none; padding: 0; min-width: 0; display: flex;
         flex-direction: column; align-items: flex-end; }
.cstat.accent { background: var(--accent-soft); border-radius: 12px; padding: 6px 14px;
                min-width: 0; }
.cstat .l { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.cstat.accent .l { color: var(--accent); }
.cstat.accent .v { color: var(--accent); }
.cstat .v { font-size: 20px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* Выбор столбца — та же капсула, что у магазина в шапке, только мельче:
   нативный select открывается системным окном и рвёт вёрстку таблицы. */
.metricpicker { position: relative; flex: none; }
.metricbtn { display: inline-flex; align-items: center; gap: 8px; height: 30px;
             padding: 0 12px; border: 1px solid var(--line-strong);
             border-radius: var(--r-pill); background: var(--card); color: var(--text);
             font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
             box-shadow: none; }
.metricbtn svg { transition: transform 160ms ease; }
.metricbtn.open svg { transform: rotate(180deg); }
.metricmenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%;
              padding: 5px; background: var(--surface); border: 1px solid var(--line);
              border-radius: 14px; box-shadow: var(--sh-modal);
              z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.metricitem { display: block; width: 100%; text-align: left; white-space: nowrap;
              padding: 7px 12px; border: none; border-radius: 9px; background: none;
              font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
              cursor: pointer; box-shadow: none; }
.metricitem:hover { background: var(--card-hover); }
.metricitem.on { background: var(--accent-soft); color: var(--accent); }

/* Ряд метрик: все таблицы на виду, а чипы задают их порядок сверху вниз.
   Активной метрики нет — переключать нечего, поэтому и подсветки нет. */
.mtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
         padding: 0 2px 14px; }
.mtab { display: inline-flex; align-items: center; gap: 8px; height: 34px;
        padding: 0 18px; border: 0; border-radius: var(--r-pill);
        background: var(--card); color: var(--text-2); font: inherit;
        font-size: 13px; font-weight: 500; cursor: pointer;
        transition: background 140ms ease, color 140ms ease; }
.mtab:hover { color: var(--text); }
.mtab .tabdel { font-size: 10px; font-style: normal; opacity: 0;
                transition: opacity 140ms ease; }
.mtab:hover .tabdel { opacity: .6; }
.mtab .tabdel:hover { opacity: 1; }
.mtab.dragging { opacity: .45; }
.mtab:hover { background: var(--card-hover); }
.mtab.dropover { box-shadow: inset 3px 0 0 0 var(--accent); }
.metricbtn.addtab { height: 34px; border-style: dashed; border-color: var(--line-strong);
                    background: none; color: var(--muted); font-weight: 500; }
.metricbtn.addtab:hover { border-color: var(--accent); color: var(--text); }
/* Соседние товары — стрелками, не возвращаясь в список. */
.navbtn { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong);
          border-radius: 50%; background: var(--card); color: var(--text);
          font-size: 15px; line-height: 1; cursor: pointer; box-shadow: none; }
.navbtn:hover:not([disabled]) { background: var(--accent-grad); color: var(--accent-ink);
                                border-color: transparent; }
.navbtn[disabled] { opacity: .35; cursor: not-allowed; }

/* Матрица: левая часть фиксирована, правая прокручивается. Высоты строк и
   зазоры совпадают с точностью до пикселя, иначе половинки разъедутся. */
.matrix { background: var(--surface); border-radius: var(--r-block); padding: 20px 0; }
.matrix + .matrix { margin-top: 14px; }
.mcaption { font-size: 13px; font-weight: 600; color: var(--text);
            padding: 0 22px 14px; }
.matrixbody { display: flex; align-items: stretch; padding: 0 0 6px 22px; }
.mleft { flex: none; font-variant-numeric: tabular-nums; }
.mhead, .mrow { display: grid; grid-template-columns: 250px 92px 96px; align-items: center; }
.mhead { height: 34px; font-size: 11px; font-weight: 500; color: var(--muted-2); }
.mhead .q { padding-left: 14px; }
.mhead .c, .mrow .c { text-align: center; }
.mrow { height: 50px; margin-top: 5px; background: var(--card);
        border-radius: var(--r-row) 0 0 var(--r-row); font-size: 13px; }
.mrow .q { padding-left: 14px; padding-right: 10px; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
/* Тень на стыке половинок: на тёмном она работает от чёрного, а не от серого. */
.mright { flex: 1; min-width: 0; overflow-x: auto;
          box-shadow: inset 14px 0 12px -12px rgba(0,0,0,.55); }
.mgrid { display: grid; }
.mtime { height: 34px; padding: 0 8px; text-align: center; display: flex;
         flex-direction: column; justify-content: center; gap: 1px;
         font-size: 11px; font-weight: 500; color: var(--muted-2); line-height: 1.15; }
.mtime .mdate { font-size: 9.5px; color: var(--disabled); letter-spacing: .02em; }
.mcell { height: 50px; margin-top: 5px; display: flex; align-items: center; justify-content: center;
         font-size: 13px; text-align: center; border-radius: 10px; }
/* Текстовые столбцы («Продвигается», «2-3 дня») получают колонку пошире и
   никогда не рвут слово посередине: «Продвигает/ся» читалось как поломка.
   Что всё же не влезло — обрезается многоточием, целое остаётся в подсказке. */
.mcell.text { background: var(--card); font-size: 13px; padding: 0 5px; overflow: hidden;
              white-space: nowrap; text-overflow: ellipsis; display: block;
              line-height: 50px; }
.mcell.top { background: var(--heat-top); }
.mcell.mid { background: var(--heat-mid); }
.mcell.low { background: var(--heat-low); }
/* «н/д» — провал темнее подложки: замер, которого нет, не должен выглядеть
   как ещё одна плашка со значением. */
.mcell.nd { background: var(--bg); color: var(--disabled); }
/* Ячейки — отдельные плашки, как строки слева: сплошная лента цвета читалась
   как один блок, и было не видно, где кончается замер. */
.mgrid { column-gap: 4px; }