/* =========================================
   CARBRIDGE — ЕДИНЫЙ СТИЛЬ КАРТОЧЕК
   ========================================= */

:root {
  --cb-card-bg: #121516;
  --cb-card-border: #292b2d;
  --cb-card-radius: 12px;
  --cb-card-gold: #d6b46e;
  --cb-card-hover: rgba(214,180,110,.55);
}

/* Только фоновые фигуры Zero Block */
.tn-elem.cb-card[data-elem-type="shape"] > .tn-atom {
  background-color: var(--cb-card-bg) !important;
  background-image: none !important;
  border: 1px solid var(--cb-card-border) !important;
  border-radius: var(--cb-card-radius) !important;
  box-sizing: border-box;
  transition: border-color .3s ease;
}

/* Обычные HTML-карточки */
.cb-card:not(.tn-elem) {
  background: var(--cb-card-bg) !important;
  border: 1px solid var(--cb-card-border) !important;
  border-radius: var(--cb-card-radius) !important;
  box-sizing: border-box;
  transition: border-color .3s ease;
}

/* Наведение */
@media (hover: hover) {
  .tn-elem.cb-card[data-elem-type="shape"]:hover > .tn-atom {
    border-color: var(--cb-card-hover) !important;
  }

  .cb-card:not(.tn-elem):hover {
    border-color: var(--cb-card-hover) !important;
  }
}




/* =========================================
   CARBRIDGE — КАРТОЧКИ АВТОМОБИЛЕЙ ST300
   ========================================= */

/* Только карточки каталога, не попапы */
.t-store__card {
  background: var(--cb-card-bg, #121516) !important;

  border-color: var(
    --cb-card-border,
    #292b2d
  ) !important;

  border-radius: var(
    --cb-card-radius,
    12px
  ) !important;

  transition: border-color .3s ease;
}

/* Золотая обводка при наведении */
@media (hover: hover) {
  .t-store__card:hover {
    border-color: var(
      --cb-card-hover,
      rgba(214,180,110,.55)
    ) !important;
  }
}

/* Единый шрифт */
.t-store__card__title,
.t-store__card__descr,
.t-store__card__price-wrapper {
  font-family: 'Inter', sans-serif !important;
}


/* CARBRIDGE — номера карточек этапов */

.tn-elem.cb-card-number > .tn-atom {
  font-family: 'Inter', sans-serif !important;
  font-size: 115px !important;
  font-weight: 200 !important;
  line-height: 1 !important;
  letter-spacing: -5px !important;

  background: linear-gradient(
    180deg,
    #51555b 0%,
    #393c41 55%,
    rgba(30,32,35,0) 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}




/* ==========================================
   CARBRIDGE — АВТОМАТИЧЕСКАЯ НУМЕРАЦИЯ
   ========================================== */

/* Счётчик внутри каждого Zero Block */
.t396 {
  counter-reset: cb-step;
}

/* Нумеруем только нужные фигуры */
.t396 .tn-elem.cb-numbered[data-elem-type="shape"] {
  counter-increment: cb-step;
}

/* Фоновая фигура — контейнер для цифры */
.t396 .tn-elem.cb-numbered[data-elem-type="shape"] > .tn-atom {
  position: relative;
  overflow: hidden !important;
}

/* Автоматическая декоративная цифра */
.t396 .tn-elem.cb-numbered[data-elem-type="shape"] > .tn-atom::after {
  content: counter(cb-step, decimal-leading-zero);

  position: absolute;
  left: -5px;
  bottom: -36px;

  font-family: 'Inter', sans-serif;
  font-size: 120px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -6px;

  background: linear-gradient(
    180deg,
    #51555b 0%,
    #393c41 55%,
    rgba(30,32,35,0) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Адаптация для небольших экранов */
@media screen and (max-width: 640px) {
  .t396 .tn-elem.cb-numbered[data-elem-type="shape"] > .tn-atom::after {
    font-size: 100px;
    bottom: -30px;
    left: -3px;
  }
}





</style>