.mp-table {
  margin: 40px 0;
}

.mp-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 42px;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
}

.mp-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: #666;
  opacity: 1;
}


/* .mp-grid-wrap {
  overflow-x: auto;
  border-radius: 6px;
}

.mp-grid {
  text-align: center;
  display: grid;
  grid-template-columns: 145px 145px repeat(var(--mp-cols), minmax(72px, 1fr));
  gap: 1px;
  overflow: visible;
  background: #d7d7d7;
  border-radius: 6px;
  min-width: max-content;
}

.mp-col {
  padding: 14px 8px;
  background: #f4f4f4;
  font-size: 14px;
  line-height: 1.15;
  white-space: normal;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.mp-head {
  font-weight: 700;
  background: #42CC55;
  color: #fff;
}

.mp-row-label {
  font-weight: 700;
  background: #ececec;
}

.mp-row-density {
  background: #efefef;
  color: #333;
}

.mp-cell {
  background: #f6f6f6;
}

.mp-cell .mp-price {
  font-variant-numeric: tabular-nums;
}

Липкие первые 2 колонки
.mp-sticky-left {
  position: sticky;
  left: 0;
  z-index: 3;
}

.mp-sticky-left-2 {
  position: sticky;
  left: 145px;
  z-index: 3;
}

.mp-head.mp-sticky-left,
.mp-head.mp-sticky-left-2 {
  z-index: 5;
  background: #42CC55;
  color: #fff;
}

hover / active состояния для JS
.mp-col.is-hover-row,
.mp-col.is-hover-col {
  background: #e7e7e7;
}

.mp-head.is-hover-col {
  background: #36b84a;
  color: #fff;
}

.mp-cell.is-active {
  background: #C9C9C9;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
}

.mp-row-label.is-hover-row,
.mp-row-density.is-hover-row {
  background: #e2e2e2;
}

лёгкий hover даже без JS
.mp-cell:hover {
  background: #C9C9C9;
}

.mp-row-even {
  background: #ffffff;
}

.mp-row-odd {
  background: #f2f2f2;
}
 */

.mp-grid-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  padding-bottom: 4px;
}

.mp-grid {
  text-align: center;
  display: grid;
  grid-template-columns: 145px 145px repeat(var(--mp-cols), minmax(72px, 1fr));
  gap: 1px;
  background: #d9d9d9;
  min-width: max-content;
}

.mp-col {
  padding: 12px 8px;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.15;
  white-space: normal;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
  border: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.mp-head {
  font-weight: 700;
  background: #42CC55;
  color: #fff;
}

.mp-head:first-child {
  border-top-left-radius: 8px;
}

.mp-head:last-of-type {
  border-top-right-radius: 8px;
}

/* внутри таблицы всё белое по умолчанию */
.mp-row-label,
.mp-row-density,
.mp-cell,
.mp-row-even,
.mp-row-odd {
  background: #ffffff;
}

.mp-row-label {
  font-weight: 700;
}

.mp-row-density {
  color: #333;
}

.mp-cell .mp-price {
  font-variant-numeric: tabular-nums;
}

/* липкие колонки */
.mp-sticky-left {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
}

.mp-sticky-left-2 {
  position: sticky;
  left: 145px;
  z-index: 3;
  background: #fff;
}

.mp-head.mp-sticky-left,
.mp-head.mp-sticky-left-2 {
  z-index: 5;
  background: #42CC55;
  color: #fff;
}

/* hover / active */
.mp-col.is-hover-row,
.mp-col.is-hover-col {
  background: #f3f3f3;
}

.mp-head.is-hover-col {
  background: #36b84a;
  color: #fff;
}

.mp-cell.is-active {
  background: #d7d7d7;
}

.mp-row-label.is-hover-row,
.mp-row-density.is-hover-row {
  background: #f3f3f3;
}

/* лёгкий hover даже без JS */
.mp-cell:hover {
  background: #e9e9e9;
}




/* планшеты */
@media (max-width: 992px) {
  .mp-title {
    font-size: 32px;
  }

  .mp-grid {
    grid-template-columns: 120px 120px repeat(var(--mp-cols), minmax(68px, 1fr));
  }

  .mp-sticky-left-2 {
    left: 120px;
  }

  .mp-col {
    padding: 12px 6px;
    font-size: 13px;
  }
}

/* мобилка */
@media (max-width: 768px) {
  .mp-table {
    margin: 28px 0;
  }

  .mp-title {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1;
    text-transform: none;
  }

  .mp-grid {
    /* grid-template-columns: 86px 78px repeat(var(--mp-cols), minmax(62px, 1fr)); */
     grid-template-columns: 92px 92px repeat(var(--mp-cols), 54px);
    border-radius: 8px;
  }

  .mp-col {
    padding: 5px 4px;
    font-size: 14px;
    line-height: 1.05;
  }

  .mp-sticky-left {
    position: sticky;
    left: 0;
    z-index: 20;
  }

  .mp-sticky-left-2 {
    position: sticky;
    /* left: 86px; */
     left: 92px;
    z-index: 20;
  }

  .mp-head.mp-sticky-left,
  .mp-head.mp-sticky-left-2 {
    z-index: 30;
  }

  .mp-row-label {
    z-index: 21;
  }

  .mp-note {
    font-size: 11px;
    margin-top: 8px;
  }
 
  .mp-col {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
}

/* @media (max-width: 768px) {
  .mp-table {
    margin: 28px 0;
  }

  .mp-title {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1;
    text-transform: none;
  }

.mp-grid {
  grid-template-columns: 88px 82px repeat(var(--mp-cols), minmax(64px, 1fr));
}

.mp-col {
  padding: 6px 4px;
  font-size: 14px;
  line-height: 1.08;
}

.mp-sticky-left-2 {
  left: 88px;
}

.mp-grid {
  grid-template-columns: 100px 100px repeat(var(--mp-cols), minmax(66px, 1fr));
  grid-template-columns: 88px 88px repeat(var(--mp-cols), minmax(58px, 1fr));
  border-radius: 6px;
}

.mp-col {
padding: 6px 4px;
font-size: 11px;
line-height: 1.05;
}

.mp-sticky-left {
  position: sticky;
  left: 0;
  z-index: 20;
}

.mp-sticky-left-2 {
  position: sticky;
  left: 88px;
  z-index: 20;
}

  .mp-head.mp-sticky-left,
  .mp-head.mp-sticky-left-2 {
    z-index: 30;
  }

  .mp-row-label {
    z-index: 21;
  }

  .mp-note {
    font-size: 11px;
    margin-top: 8px;
  }
} */