.t-store {
  --cu:    oklch(0.68 0.145 52);
  --brass: oklch(0.79 0.115 92);
  --bronze:oklch(0.63 0.105 68);

  --bg:   light-dark(oklch(0.97 0.004 60), oklch(0.155 0.008 60));
  --bg-2: light-dark(oklch(0.99 0.003 60), oklch(0.195 0.010 60));
  --bg-3: light-dark(oklch(0.945 0.006 60), oklch(0.235 0.012 60));
  --ink:  light-dark(oklch(0.20 0.010 60), oklch(0.97 0.005 60));
  --ink-2:light-dark(oklch(0.46 0.012 60), oklch(0.72 0.010 60));
  --ink-3:light-dark(oklch(0.62 0.010 60), oklch(0.55 0.010 60));
  --line: light-dark(oklch(0.88 0.008 60), oklch(0.30 0.012 60));

  color-scheme: light dark;
  color: var(--ink);
}

/* Фон секции каталога — тот же тёплый тон, что у соседних блоков,
   плюс мягкое медное свечение, чтобы блок не был белым пятном. */
#rec2870118301 {
  position: relative;
  background: var(--bg);
}
#rec2870118301::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 38% at 82% 8%,  color-mix(in oklch, var(--cu) 16%, transparent), transparent 70%),
    radial-gradient(40% 34% at 10% 92%, color-mix(in oklch, var(--brass) 12%, transparent), transparent 70%);
}
#rec2870118301 > * { position: relative; z-index: 1; }

/* ─────────── ТАБЫ КАТЕГОРИЙ ─────────── */

.t-store__parts-switch-wrapper {
  display: flex; flex-wrap: wrap; gap: .45rem;
  justify-content: center; margin-bottom: 2.4rem;
}
.t-store__parts-switch-btn {
  border: 1px solid var(--line) !important;
  border-radius: 100px !important;
  padding: .55rem 1.05rem !important;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent) !important;
  backdrop-filter: blur(8px);
  font-size: .87rem !important; font-weight: 580 !important;
  letter-spacing: -.01em; color: var(--ink-2) !important;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.t-store__parts-switch-btn:hover {
  color: var(--ink) !important;
  border-color: color-mix(in oklch, var(--cu) 55%, var(--line)) !important;
  transform: translateY(-1px);
}
.t-store__parts-switch-btn.t-active,
.t-store__parts-switch-btn[class*="active"] {
  background: color-mix(in oklch, var(--cu) 18%, var(--bg-2)) !important;
  border-color: color-mix(in oklch, var(--cu) 55%, transparent) !important;
  color: var(--ink) !important;
}

/* ─────────── СЕТКА И КАРТОЧКИ ─────────── */

/* Раскладку колонок оставляем родной сетке Тильды (t-col_4 = 3 в ряд).
   Свой gap её ломал, поэтому расстояние задаём отступами карточек. */
.t-store__grid-cont { gap: 0; }
.t-store__card { margin-bottom: 1rem; }
.t-store__grid-separator { display: none; }
.t-store__card__imgwrapper { display: none !important; }

.t-store__card {
  position: relative;
  border-radius: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  /* ⚠️ Обязательно. Тильда задаёт карточке ровно 360px по content-box, поля
     20+20. Три штуки = 3 × 400 = 1200px, впритык в контейнер 1200px, без
     запаса. Рамка по content-box добавляется снаружи — карточка станет 362px,
     три = 1206px, и третья колонка переносится вниз. Любой будущий border или
     padding здесь тоже требует box-sizing, иначе снова получите две колонки. */
  box-sizing: border-box;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.t-store__card > a,
.t-store__card__wrap_all {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}
.t-store__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklch, var(--cu) 45%, var(--line));
  box-shadow: 0 18px 46px -22px color-mix(in oklch, var(--cu) 55%, transparent);
}

.t-store__card__textwrapper {
  padding: 1.35rem !important;
  display: flex; flex-direction: column; gap: .45rem;
  flex: 1 1 auto; min-height: 0;
  text-align: left !important;
}

.t-store__card__title,
.js-store-prod-name {
  font-size: 1.02rem !important; font-weight: 680 !important;
  letter-spacing: -.02em; line-height: 1.25 !important;
  color: var(--ink) !important; text-wrap: balance;
}
.t-store__card__descr,
.js-store-prod-descr {
  font-size: .83rem !important; line-height: 1.45 !important;
  color: var(--ink-3) !important; text-wrap: pretty;
}

/* ─────────── ЦЕНА ─────────── */

.t-store__card__price-wrapper {
  margin-top: auto !important;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
}
.t-store__card__price-item {
  display: flex !important; align-items: baseline; gap: .15rem;
}
.t-store__card__price-value,
.js-store-prod-price {
  font-size: 1.7rem !important; font-weight: 780 !important;
  letter-spacing: -.045em; line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  color: var(--cu) !important;
}
.t-store__card__price-currency {
  font-size: 1.05rem !important; font-weight: 700 !important;
  color: var(--cu) !important; opacity: .8;
}
/* Пустая «старая цена»: значение пустое, но валюта всё равно рисуется —
   на карточке это выглядит как зачёркнутое «р.» между ценой и «/кг». */
.t-store__card__price_old { display: none !important; }

.t-store__card__price-wrapper::after {
  content: '/кг';
  font-size: .8rem; font-weight: 500; color: var(--ink-3);
  align-self: flex-end; margin-bottom: .18rem;
}

/* Позиции без цены. Тильда ставит обёртке visibility:hidden, а он наследуется
   псевдоэлементом — поэтому возвращаем видимость обёртке, а пустые элементы
   цены убираем совсем, оставляя только надпись. */
.t-store__card[data-noprice="1"] .t-store__card__price-wrapper {
  visibility: visible !important;
}
.t-store__card[data-noprice="1"] .t-store__card__price-wrapper > * {
  display: none !important;
}
.t-store__card[data-noprice="1"] .t-store__card__price-wrapper::after {
  content: 'по запросу';
  font-size: .95rem; font-weight: 620; color: var(--ink-3);
  align-self: baseline; margin-bottom: 0;
}

/* ─────────── ИЛЛЮСТРАЦИЯ МЕТАЛЛА ─────────── */

/* `data-metal` карточке проставляет скрипт проекта по колонке SKU. Отсюда —
   свой знак каждому металлу: фоновая картинка в правом нижнем углу плюс
   лёгкая заливка в цвет металла, чтобы карточка не была пустой заливкой.
   Картинки — инлайновый SVG в data-URI: ни одного внешнего запроса.
   Прозрачность зашита в сам SVG, поэтому одинаково работает в обеих темах. */

.t-store__card {
  background-image:
    var(--se-art, none),
    linear-gradient(150deg,
      color-mix(in oklch, var(--se-metal, transparent) 18%, transparent),
      transparent 62%);
  background-repeat: no-repeat, no-repeat;
  background-position: right -10px bottom -10px, 0 0;
  background-size: 112px 112px, 100% 100%;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s,
              border-color .3s, background-size .3s;
}
.t-store__card:hover { background-size: 124px 124px, 100% 100%; }

/* медь — трубный лом в разрезе */
.t-store__card[data-metal="Cu"] {
  --se-metal: oklch(0.68 0.145 52);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C87137' stroke-opacity='.34' stroke-width='8'%3E%3Ccircle cx='32' cy='36' r='17'/%3E%3Ccircle cx='68' cy='36' r='17'/%3E%3Ccircle cx='50' cy='68' r='17'/%3E%3C/g%3E%3C/svg%3E");
}
/* латунь — стопка листа */
.t-store__card[data-metal="Zn"] {
  --se-metal: oklch(0.79 0.115 92);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23D4B24C'%3E%3Cpath d='M12 64l38-19 38 19-38 19z' fill-opacity='.34'/%3E%3Cpath d='M12 46l38-19 38 19-38 19z' fill-opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
}
/* бронза — чушка */
.t-store__card[data-metal="Sn"] {
  --se-metal: oklch(0.63 0.105 68);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%239C6B3F'%3E%3Cpath d='M18 58h64l-11 30H29z' fill-opacity='.32'/%3E%3Cpath d='M18 58h64l-4 10H22z' fill-opacity='.42'/%3E%3C/g%3E%3C/svg%3E");
}
/* алюминий — профиль */
.t-store__card[data-metal="Al"] {
  --se-metal: oklch(0.82 0.012 250);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 18h18v56h42v18H22z' fill='%23B9C0C7' fill-opacity='.34'/%3E%3C/svg%3E");
}
/* нержавейка — стружка */
.t-store__card[data-metal="Fe"] {
  --se-metal: oklch(0.72 0.020 250);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 74c-2-30 20-50 40-46s24 20 12 30-32 6-26-12 26-14 34 6' fill='none' stroke='%238E99A3' stroke-opacity='.36' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* свинец — аккумулятор */
.t-store__card[data-metal="Pb"] {
  --se-metal: oklch(0.62 0.020 265);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%237E8794' fill-opacity='.3'%3E%3Crect x='16' y='38' width='68' height='42' rx='7'/%3E%3Crect x='30' y='26' width='14' height='12' rx='3'/%3E%3Crect x='58' y='26' width='14' height='12' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}
/* титан — виток стружки */
.t-store__card[data-metal="Ti"] {
  --se-metal: oklch(0.72 0.045 285);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 62c8-26 30-38 46-30s14 30-2 34-30-8-22-24 30-12 38 8' fill='none' stroke='%239E93B8' stroke-opacity='.36' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* победит — твердосплавные пластины */
.t-store__card[data-metal="Ni"] {
  --se-metal: oklch(0.70 0.012 70);
  --se-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23B0A9A0' fill-opacity='.34'%3E%3Cpath d='M50 20l26 46H24z'/%3E%3Crect x='20' y='74' width='26' height='16' rx='4'/%3E%3Crect x='56' y='74' width='26' height='16' rx='4'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .t-store__card:hover { background-size: 132px 132px, 100% 100%; }
}

/* корзина не нужна — это прайс, а не магазин */
.t-store__card__btns-wrapper,
.t-store__card__prod-controls-wrapper,
.t-store__card__mark-wrapper { display: none !important; }

/* «Загрузить ещё» под палитру */
.t-store__load-more-btn {
  border-radius: 100px !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: .85rem 1.9rem !important;
  transition: border-color .18s, background .18s;
}
.t-store__load-more-btn:hover {
  border-color: color-mix(in oklch, var(--cu) 55%, var(--line)) !important;
  background: color-mix(in oklch, var(--cu) 10%, transparent) !important;
}

@media (max-width: 640px) {
  .t-store__card__textwrapper { padding: 1.1rem !important; }
  .t-store__card__price-value { font-size: 1.45rem !important; }
  .t-store__parts-switch-wrapper { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .t-store__parts-switch-wrapper::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .t-store__card, .t-store__parts-switch-btn { transition: none !important; }
}