.c_page {
  --c-accent: #1696EF;
  --c-accent-ink: #0B6BAE;
  --c-accent-soft: #E8F4FE;
  --c-ink: #0F172A;
  --c-ink-2: #334155;
  --c-muted: #64748B;
  --c-line: #E5E9EF;
  --c-line-2: #EFF2F6;
  --c-bg: #f3f6fb;
  --c-card: #FFFFFF;
  --c-bad: #EF4444;
  --c-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);

  font-family: 'Roboto Condensed', sans-serif;
  color: var(--c-ink);
  background: var(--c-bg);
  font-weight: 400;
  letter-spacing: .005em;
  padding: 0px 32px 80px;
  box-sizing: border-box;
  overflow-x: auto;
}

.c_page * {
  box-sizing: border-box;
}

.c_page a {
  color: inherit;
  text-decoration: none;
}

.c_empty {
  text-align: center;
  color: green;
  font-size: 16px;
  font-weight: bold;
  padding: 60px 20px;
  background: #EFE;
  border: 1px solid #DEF;
  border-radius: 4px;
  width: 80%;
  margin: 60px auto;
}

.c_title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 15px;
}

.c_title-row h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size:30px;
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--c-ink);
}

.c_title-row h1 .count {
  color: var(--c-accent);
  font-weight: 500;
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
}

.c_subtitle {
  color: var(--c-muted);
  font-size: 15px;
  margin-top: 8px;
}

.c_toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.c_pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-ink-2);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.c_pill:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.c_pill.active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  box-shadow: 0 4px 12px rgba(22, 150, 239, .25);
}

.c_compare {
  --label-width: 260px;
  --product-min: 250px;
  --product-max: 800px;

  display: grid;
  grid-template-columns: var(--label-width) repeat(var(--cols, 3), minmax(var(--product-min), var(--product-max)));
  gap: 0;
  width: 100%;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--c-shadow);
}

.c_compare.c_compare-compact {
  width: 100%;
  max-width: none;
}

.c_compare.c_compare-compact.c_compare-cols-1 {
  grid-template-columns: var(--label-width) minmax(var(--product-min), var(--product-max));
}

.c_compare.c_compare-compact.c_compare-cols-2 {
  grid-template-columns: var(--label-width) repeat(2, minmax(var(--product-min), var(--product-max)));
}

.c_compare-cols-1 { min-width: calc(var(--label-width) + 250px); }
.c_compare-cols-2 { min-width: calc(var(--label-width) + 500px); }
.c_compare-cols-3 { min-width: calc(var(--label-width) + 750px); }
.c_compare-cols-4 { min-width: calc(var(--label-width) + 1000px); }
.c_compare-cols-5 { min-width: calc(var(--label-width) + 1250px); }
.c_compare-cols-6 { min-width: calc(var(--label-width) + 1500px); }
.c_compare-cols-7 { min-width: calc(var(--label-width) + 1750px); }
.c_compare-cols-8 { min-width: calc(var(--label-width) + 2000px); }

.c_compare .col-label {
  padding: 32px 24px;
  background: #fff;
  display: flex;
  align-items: flex-end;
  border-right: 1px solid var(--c-line);
}

.c_compare .col-label-inner {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-muted);
  font-weight: 600;
}

.c_compare .product {
  padding: 28px 24px 24px;
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  background: #F0FFF0;
  position: relative;
  margin: 0 !important;
}

.c_compare .product:last-child {
  border-right: none;
}

.c_compare .product-image {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--c-line-2);
}

.c_compare .product-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.c_compare .product-image img {
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 800px;
  object-fit: contain;
  padding: 12px;
}

.c_compare .product-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-ink);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 64px;
}

.c_compare .product-title:hover {
  color: var(--c-accent);
}

.c_compare .category-path {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

.c_compare .category-path .sep {
  margin: 0 6px;
  color: #CBD5E1;
}

.c_compare .category-path a {
  color: var(--c-muted);
}

.c_compare .category-path a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

.c_compare .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line-2);
  margin-top: auto;
}

.c_compare .price-row .price {
  font-size: 22px;
  font-weight: 700;
  color: green;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.c_compare .price-row .price .price_decimal {
  font-size: 13px;
  color: var(--c-muted);
  font-weight: 500;
}

.c_compare .price-row .price .price_separator {
  color: var(--c-muted);
  font-weight: 400;
  margin: 0 4px;
}

.c_compare .actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.c_compare .c_btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}

.c_compare .c_btn-primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

.c_compare .c_btn-primary:hover {
  background: var(--c-accent-ink);
  border-color: var(--c-accent-ink);
  color: #fff;
}

.c_compare .c_btn-ghost {
  background: #fff;
  color: var(--c-ink-2);
  border-color: var(--c-line);
}

.c_compare .c_btn-ghost:hover {
  border-color: var(--c-bad);
  color: var(--c-bad);
}

.c_compare .row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border-bottom: 1px solid var(--c-line-2);
}

.c_compare .row:last-child {
  border-bottom: none;
}

.c_compare .row:hover .cell {
  background: #FBFCFE;
}

.c_compare .row.diff .cell {
  background: #F4FAFE;
}

.c_compare .row.diff:hover .cell {
  background: #E5F2FC;
}

.c_compare .row .cell {
  padding: 9px 16px;
  font-size: 14px;
  border-right: 1px solid var(--c-line-2);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  transition: background .15s ease;
}

.c_compare .row .cell:last-child {
  border-right: none;
}

.c_compare .row .cell.spec {
  color: var(--c-ink-2);
  font-weight: 700;
  padding-left: 32px;
  text-align: left;
}

.c_compare .row .cell.value {
  font-weight: 500;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.c_compare .row .cell .dash {
  color: var(--c-muted);
}

.c_sticky-row {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  transform: translateY(-100%);
  transition: transform .25s ease;
  pointer-events: none;
}

.c_sticky-row.show {
  transform: translateY(0);
  pointer-events: auto;
}

.c_sticky-row .label {
  padding: 12px 24px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-muted);
  font-weight: 600;
  border-right: 1px solid var(--c-line-2);
  display: flex;
  align-items: center;
}

.c_sticky-row .mini {
  padding: 12px 20px;
  border-right: 1px solid var(--c-line-2);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
}

.c_sticky-row .mini:last-child {
  border-right: none;
}

.c_sticky-row .mini-img {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--c-line-2);
}

.c_sticky-row .mini-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

@media (max-width: 1100px) {

  .c_compare,
  .c_sticky-row {
    --label-width: 180px;
    grid-template-columns: var(--label-width) repeat(var(--cols, 3), minmax(var(--product-min), var(--product-max)));
  }

  .c_compare.c_compare-compact {
    grid-template-columns: var(--label-width) repeat(var(--cols, 3), minmax(var(--product-min), var(--product-max)));
    width: 100%;
  }

  .c_page {
    padding: 24px 16px 60px;
  }

  .c_title-row h1 {
    font-size: 20px;
  }

  .c_compare .product-title {
    font-size: 14px;
    min-height: 56px;
  }

  .c_compare .price-row .price {
    font-size: 18px;
  }
}