/* ═══════════════════════════════════════════════════════════════════════════
   Карточки товаров — «алюминиевая пластина с объёмной гравировкой» (оператор 09.10.2026).
   Всё начинается с .plates-metal (класс на <body>, ставит inc/plates.php) и действует только
   на новую разметку .product-card--plate. Выключатель для всех — MBCAR_PLATES_DEFAULT
   в inc/plates.php; посмотреть прежний вид — ссылка ?plashki=0.

   Скорость (каталог листают с телефона): металл — только градиенты, без картинок и шума;
   рельеф букв — text-shadow в два слоя; размытия подложки и will-change на пластине нет;
   блик при прокрутке двигает assets/js/plates.js одной переменной --pl-sy и только у видимых пластин.
   ═══════════════════════════════════════════════════════════════════════════ */

.plates-metal .product-card--plate {
  --pl-strip: 30px;            /* кромки сверху и снизу: марка и наличие */
  --pl-pad: 14px;
  --pl-rad: 16px;
  --pl-ink: #2e3338;
  --pl-sub: #393e44;
  --pl-price: #1e2226;
  --pl-edge-l: rgba(255, 255, 255, .95);
  --pl-edge-d: rgba(0, 0, 0, .38);
  --pl-line-d: rgba(0, 0, 0, .22);
  --pl-line-l: rgba(255, 255, 255, .75);
  --pl-acc: #3B82F6;           /* акцент сайта (--c-accent), пластина светлая в обеих темах */
  --pl-acc-hi: #63A0FF;
  --pl-acc-lo: #1F5FD0;
  /* «вдавлено»: светлая фаска снизу-справа, тёмная сверху-слева */
  --pl-deboss: 1px 1px 0 #ffffff, -1px -1px 0 rgba(0, 0, 0, .30);
  --pl-bevel: 0 0 0 1px #4a4f55, inset 0 0 0 1px #ffffff, inset 2px 2px 1px #ffffff,
              inset 3px 3px 5px rgba(255, 255, 255, .75), inset -2px -2px 3px rgba(0, 0, 0, .40),
              inset 0 0 0 5px rgba(255, 255, 255, .26), inset 0 0 0 6px rgba(0, 0, 0, .16);
  --pl-drop: 0 12px 24px -8px rgba(15, 23, 42, .55), 0 3px 7px rgba(15, 23, 42, .30);
  --pl-sy: 0;                  /* сдвиг блика при прокрутке: −1…1 */
  --pl-font: 'Segoe UI', 'Helvetica Neue', Arial, Roboto, system-ui, sans-serif;
  --pl-mono: ui-monospace, 'Cascadia Mono', 'Consolas', 'Roboto Mono', 'DejaVu Sans Mono', monospace;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pl-strip) var(--pl-pad);
  border: 0;
  border-radius: var(--pl-rad);
  color: var(--pl-ink);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(52, 58, 66, .50), transparent 58%),
    radial-gradient(100% 70% at 100% 100%, rgba(52, 58, 66, .44), transparent 60%),
    radial-gradient(80% 55% at 0% 100%, rgba(52, 58, 66, .16), transparent 60%),
    conic-gradient(from 205deg at 28% 18%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 7%, rgba(0, 0, 0, .10) 18%, rgba(255, 255, 255, .30) 31%, rgba(0, 0, 0, .12) 47%, rgba(255, 255, 255, .34) 61%, rgba(0, 0, 0, .08) 79%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(128deg, #c3c7cc 0%, #e6e8eb 13%, #ffffff 25%, #eef0f2 35%, #c9cdd1 53%, #e0e3e6 70%, #b7bcc1 100%);
  background-color: #d5d8dc;
  box-shadow: var(--pl-bevel), var(--pl-drop);
  transition: transform .2s ease;
}
html[data-theme="dark"] .plates-metal .product-card--plate {
  --pl-drop: 0 14px 26px -10px rgba(0, 0, 0, .75), 0 2px 5px rgba(0, 0, 0, .5);
}
.plates-metal .product-card--plate:hover { box-shadow: var(--pl-bevel), var(--pl-drop); }

/* блик: узкая почти белая полоса и вторая слабее; лежит над металлом, под текстом и фото */
.plates-metal .product-card--plate::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -100%;
  width: 300%;
  z-index: -1;
  pointer-events: none;
  opacity: .78;
  background: linear-gradient(118deg, transparent 43.5%, rgba(255, 255, 255, .45) 46.4%, #ffffff 47.8%, rgba(255, 255, 255, .35) 49.2%, transparent 50.6%, rgba(255, 255, 255, .6) 52.2%, transparent 54%);
  transform: translateX(calc(-7% + var(--pl-sy) * 8%));
}
/* ПК: пластина приподнимается, блик пробегает при наведении */
@media (hover: hover) and (pointer: fine) {
  .plates-metal .product-card--plate:hover { transform: translateY(-2px); }
  .plates-metal .product-card--plate::after { transition: transform .5s ease; }
  .plates-metal .product-card--plate:hover::after { transform: translateX(13%); transition: transform .9s ease; }
}

/* ── винты с прямым шлицем по углам ── */
.plates-metal .plate-screw {
  position: absolute;
  z-index: 3;
  width: 15px; height: 15px;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(var(--a, 35deg), transparent 40%, rgba(255, 255, 255, .7) 40% 44%, #2a2e33 44% 58%, transparent 58%),
    radial-gradient(circle at 30% 26%, #ffffff 0 16%, #e3e6e9 28%, #989da4 72%, #6a6f76 100%);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .6), 0 0 0 1.5px rgba(0, 0, 0, .17), inset 1px 1px 1px rgba(255, 255, 255, .9), inset -1px -1px 1px rgba(0, 0, 0, .35);
}
.plates-metal .plate-screw:nth-child(1) { left: 8px;  top: 8px;    --a: 35deg; }
.plates-metal .plate-screw:nth-child(2) { right: 8px; top: 8px;    --a: 110deg; }
.plates-metal .plate-screw:nth-child(3) { left: 8px;  bottom: 8px; --a: 75deg; }
.plates-metal .plate-screw:nth-child(4) { right: 8px; bottom: 8px; --a: 160deg; }

/* ── кромки: марка сверху, наличие снизу ── */
.plates-metal .plate-strip {
  position: absolute;
  left: 30px; right: 30px;
  height: var(--pl-strip);
  line-height: var(--pl-strip);
  margin: 0;
  text-align: center;
  font-family: var(--pl-font);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pl-sub);
  white-space: nowrap;
  overflow: hidden;
}
.plates-metal .plate-strip--top { top: 0; }
.plates-metal .plate-strip--bottom { bottom: 0; }
.plates-metal .plate-strip--bottom::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: .7em;
  border-radius: 50%;
  vertical-align: .02em;
  background: radial-gradient(circle at 35% 30%, #9dffb8, #1faa4f 60%, #0b6a2c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .8);
}
.plates-metal .plate-strip--order::before { background: radial-gradient(circle at 35% 30%, #ffe0a8, #e08a1e 60%, #8a4d06); }

/* ── фото в утопленном окне; деталь вписана целиком ── */
.plates-metal .product-card--plate .product-card__media {
  position: relative;
  display: block;
  flex: none;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #d9dcdf;
  box-shadow: 1px 1px 0 var(--pl-edge-l), -1px -1px 0 var(--pl-edge-d);
}
.plates-metal .product-card--plate .product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 2px 3px 7px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.plates-metal .product-card--plate .product-card__img,
.plates-metal .product-card--plate:hover .product-card__img {
  display: block;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain;
  border-radius: 0;
  transform: none;
  transition: none;
}
.plates-metal .product-card--plate .product-card__badge { top: 8px; left: 8px; z-index: 2; }
.plates-metal .product-card--plate .product-card__fav {
  top: 7px; right: 7px;
  z-index: 2;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: #ffffff;
  background: rgba(12, 14, 18, .55);
}
.plates-metal .product-card--plate .product-card__fav:hover { color: #ff8a8a; }
.plates-metal .product-card--plate .product-card__fav--active { background: #FEE2E2; color: #DC2626; }

/* ── надписи ── */
.plates-metal .product-card--plate .product-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plates-metal .product-card--plate .plate-link { display: block; color: inherit; text-decoration: none; }
/* название детали — крупная объёмная гравировка, обычный регистр */
.plates-metal .product-card--plate .product-card__title,
.plates-metal .product-card--plate:hover .product-card__title {
  margin: 12px 0 0;
  min-height: 2.48em;
  font-family: var(--pl-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: .01em;
  color: var(--pl-ink);
  text-shadow: var(--pl-deboss);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
          hyphens: auto;
  transition: none;
}
.plates-metal .product-card--plate .plate-link:hover .product-card__title { color: #14171a; }
.plates-metal .product-card--plate .plate-link:focus-visible { outline: 2px solid var(--pl-acc-lo); outline-offset: 2px; border-radius: 4px; }
/* модель и кузов — чёткий тёмный текст без рельефа */
.plates-metal .product-card--plate .product-card__model {
  margin: 5px 0 0;
  min-height: 2.6em;
  font-family: var(--pl-font);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pl-sub);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}
.plates-metal .product-card--plate .plate-nw { white-space: nowrap; }
.plates-metal .product-card--plate .plate-rows { margin: 9px 0 0; }
.plates-metal .product-card--plate .plate-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid var(--pl-line-d);
  box-shadow: inset 0 1px 0 var(--pl-line-l);
}
.plates-metal .product-card--plate .plate-row__k {
  flex: none;
  width: 38px;
  font-family: var(--pl-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-sub);
}
.plates-metal .product-card--plate .plate-row__v {
  min-width: 0;
  margin: 0;
  font-family: var(--pl-mono);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pl-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

/* ── цена и кнопка ── */
.plates-metal .product-card--plate .product-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--pl-line-d);
  box-shadow: inset 0 1px 0 var(--pl-line-l);
}
.plates-metal .product-card--plate .product-card__price {
  flex: none;
  font-family: var(--pl-font);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--pl-price);
  text-shadow: var(--pl-deboss);
}
.plates-metal .product-card--plate .product-card__price--long { font-size: 24px; }
.plates-metal .product-card--plate .product-card__price--ask { font-size: 18px; }
.plates-metal .product-card--plate .plate-rub { font-weight: 600; font-size: .78em; }
.plates-metal .product-card--plate .plate-prices { flex: none; }
.plates-metal .product-card--plate .product-card__old-price { color: var(--pl-sub); font-family: var(--pl-font); font-weight: 600; }

/* кнопка — эмалевая вставка в цвет акцента сайта, утопленная в металл */
.plates-metal .product-card--plate .btn.btn-add {
  flex: 1 0 auto;
  width: auto;
  height: auto;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 9px;
  font-family: var(--pl-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, var(--pl-acc-hi) 0%, var(--pl-acc) 45%, var(--pl-acc-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(0, 0, 0, .3), 0 1px 0 var(--pl-edge-l), 0 -1px 0 var(--pl-edge-d);
  transition: filter .15s;
}
.plates-metal .product-card--plate .btn.btn-add:hover {
  border-color: rgba(0, 0, 0, .55);
  color: #ffffff;
  background: linear-gradient(180deg, var(--pl-acc-hi) 0%, var(--pl-acc) 45%, var(--pl-acc-lo) 100%);
  filter: brightness(1.08);
}
.plates-metal .product-card--plate .btn.btn-add:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 var(--pl-edge-l); }
.plates-metal .product-card--plate .btn.btn-add[disabled] {
  background: linear-gradient(180deg, #a9afb6 0%, #8d939a 100%);
  filter: none;
  cursor: default;
}
/* товар уже в корзине: зелёный счётчик темы, только в размер кнопки пластины */
.plates-metal .product-card--plate .btn.btn-add.btn--cart-ctrl {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 9px !important;
  text-shadow: none;
  letter-spacing: .02em;
  text-transform: none;
  filter: none;
}

/* ── вид «списком» (переключатель в разделе): фото слева, надписи, цена с кнопкой справа ── */
@media (min-width: 561px) {
  .plates-metal .products-grid-3--list .product-card--plate {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) minmax(150px, auto);
    column-gap: 18px;
    align-items: center;
  }
  .plates-metal .products-grid-3--list .product-card--plate .product-card__media { width: auto; min-width: 0; border-radius: 10px; }
  .plates-metal .products-grid-3--list .product-card--plate .product-card__body { padding: 0; justify-content: center; }
  .plates-metal .products-grid-3--list .product-card--plate .product-card__title { margin-top: 0; min-height: 0; }
  .plates-metal .products-grid-3--list .product-card--plate .product-card__model { min-height: 0; }
  .plates-metal .products-grid-3--list .product-card--plate .product-card__footer {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center;
    margin: 0; padding: 0; border-top: 0; box-shadow: none; min-width: 0;
  }
}
@media (max-width: 560px) {
  .plates-metal .products-grid-3--list .product-card--plate .product-card__media { width: auto; min-width: 0; border-radius: 10px; }
  .plates-metal .products-grid-3--list .product-card--plate .product-card__body { padding: 0; }
  .plates-metal .products-grid-3--list .product-card--plate .product-card__footer {
    align-items: center; padding: 10px 0 0; border-top: 1px solid var(--pl-line-d);
  }
}

/* ── Телефон: пластины по две в ряд ── */
@media (max-width: 639px) {
  .plates-metal .products-grid-3:has(> .product-card--plate),
  .plates-metal .catalog-section__grid-3:has(> .product-card--plate),
  .plates-metal .catalog-section__grid-4:has(> .product-card--plate),
  .plates-metal .related-grid-4:has(> .product-card--plate),
  .plates-metal .favorites-grid:has(> .product-card--plate) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .plates-metal .product-card--plate { --pl-strip: 24px; --pl-pad: 10px; --pl-rad: 12px; }
  .plates-metal .plate-screw { width: 11px; height: 11px; }
  .plates-metal .plate-screw:nth-child(1), .plates-metal .plate-screw:nth-child(3) { left: 6px; }
  .plates-metal .plate-screw:nth-child(2), .plates-metal .plate-screw:nth-child(4) { right: 6px; }
  .plates-metal .plate-screw:nth-child(1), .plates-metal .plate-screw:nth-child(2) { top: 6px; }
  .plates-metal .plate-screw:nth-child(3), .plates-metal .plate-screw:nth-child(4) { bottom: 6px; }
  .plates-metal .plate-strip { left: 20px; right: 20px; font-size: 8.5px; letter-spacing: .2em; }
  .plates-metal .product-card--plate .product-card__media { border-radius: 9px; }
  .plates-metal .product-card--plate .product-card__fav { width: 28px; height: 28px; top: 5px; right: 5px; font-size: 13px; }
  .plates-metal .product-card--plate .product-card__badge { top: 6px; left: 6px; font-size: 10px; padding: 2px 7px; }
  .plates-metal .product-card--plate .product-card__title,
  .plates-metal .product-card--plate:hover .product-card__title { margin-top: 10px; font-size: 15.5px; }
  .plates-metal .product-card--plate .product-card__model { font-size: 12px; }
  .plates-metal .product-card--plate .plate-row { padding: 6px 0; gap: 6px; }
  .plates-metal .product-card--plate .plate-row__k { width: 32px; letter-spacing: .1em; }
  .plates-metal .product-card--plate .plate-row__v { font-size: 13px; letter-spacing: .03em; }
  .plates-metal .product-card--plate .product-card__footer { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .plates-metal .product-card--plate .product-card__price { font-size: min(27px, 6.9vw); }
  .plates-metal .product-card--plate .product-card__price--long { font-size: min(21px, 5.5vw); }
  .plates-metal .product-card--plate .btn.btn-add { width: 100%; min-height: 40px; padding: 10px 6px; }
  .plates-metal .product-card--plate .btn.btn-add.btn--cart-ctrl { height: 40px !important; min-height: 40px !important; min-width: 0; }
  /* в списке на телефоне пластина одна в ряд — цена и кнопка рядом */
  .plates-metal .products-grid-3--list .product-card--plate .product-card__footer { flex-direction: row; }
  .plates-metal .products-grid-3--list .product-card--plate .btn.btn-add { width: auto; }
}

/* ── «Рекомендуемые товары» на странице товара: блок стоит вне общей колонки и был прижат к краям
      экрана — пластинам даём те же поля, что у остальной страницы ── */
.plates-metal .related-products:not(.container .related-products) {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  padding-bottom: var(--sp-12);
}

/* ── «уменьшить движение»: без пробегающего блика и подъёма ── */
@media (prefers-reduced-motion: reduce) {
  .plates-metal .product-card--plate,
  .plates-metal .product-card--plate::after,
  .plates-metal .product-card--plate:hover::after { transition: none; }
  .plates-metal .product-card--plate:hover { transform: none; }
  .plates-metal .product-card--plate::after,
  .plates-metal .product-card--plate:hover::after { transform: translateX(-7%); }
}
@media print {
  .plates-metal .product-card--plate { box-shadow: 0 0 0 1px #4a4f55; }
  .plates-metal .product-card--plate::after { display: none; }
}

/* ══ Наведение мышки (оператор 09.10): видно, что карточка «живая» и куда можно нажать ══
   Карточка приподнимается и получает синюю рамку; фото и название — ссылки на страницу детали,
   под мышкой фото приближается, название синеет и подчёркивается. Только ПК с мышкой. */
.plates-metal .product-card--plate .plate-photo { display: block; width: 100%; height: 100%; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .plates-metal .product-card--plate { transition: transform .2s ease, box-shadow .2s ease; }
  .plates-metal .product-card--plate:hover {
    z-index: 2;
    box-shadow: var(--pl-bevel), 0 0 0 3px var(--pl-acc), 0 26px 38px -14px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .28);
  }
  /* фото: синяя рамка окна и лёгкое приближение */
  .plates-metal .product-card--plate .product-card__media { transition: box-shadow .18s ease; }
  .plates-metal .product-card--plate .product-card__media:has(.plate-photo:hover) {
    box-shadow: 0 0 0 3px var(--pl-acc), 1px 1px 0 var(--pl-edge-l), -1px -1px 0 var(--pl-edge-d);
  }
  .plates-metal .product-card--plate .plate-photo .product-card__img { transition: transform .25s ease; }
  /* название: синее, подчёркнутое */
  .plates-metal .product-card--plate .plate-link { border-radius: 6px; transition: transform .18s ease; transform-origin: left center; }
  .plates-metal .product-card--plate .plate-link:hover .product-card__title {
    color: var(--pl-acc-lo);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
}
/* движение — только тем, кто его не отключил */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plates-metal .product-card--plate:hover { transform: translateY(-6px) scale(1.02); }
  .plates-metal .product-card--plate .plate-photo:hover .product-card__img { transform: scale(1.08); }
  .plates-metal .product-card--plate .plate-link:hover { transform: scale(1.03); }
}

/* ══ Тёмная тема: пластина тёмная, «воронёная», но такая же блестящая (оператор 09.10) ══
   Меняются только переменные и металл; разметка, блик и винты — те же. */
html[data-theme="dark"] .plates-metal .product-card--plate {
  --pl-ink: #f1f3f5;
  --pl-sub: #d3d8de;
  --pl-price: #ffffff;
  --pl-edge-l: rgba(255, 255, 255, .30);
  --pl-edge-d: rgba(0, 0, 0, .75);
  --pl-line-d: rgba(0, 0, 0, .60);
  --pl-line-l: rgba(255, 255, 255, .17);
  --pl-deboss: 1px 1px 0 rgba(255, 255, 255, .20), -1px -1px 0 rgba(0, 0, 0, .80);
  --pl-bevel: 0 0 0 1px #0b0d10, inset 0 0 0 1px rgba(255, 255, 255, .60), inset 2px 2px 1px rgba(255, 255, 255, .40),
              inset 3px 3px 5px rgba(255, 255, 255, .20), inset -2px -2px 3px rgba(0, 0, 0, .65),
              inset 0 0 0 5px rgba(255, 255, 255, .07), inset 0 0 0 6px rgba(0, 0, 0, .40);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(0, 0, 0, .55), transparent 58%),
    radial-gradient(100% 70% at 100% 100%, rgba(0, 0, 0, .50), transparent 60%),
    radial-gradient(80% 55% at 0% 100%, rgba(0, 0, 0, .25), transparent 60%),
    conic-gradient(from 205deg at 28% 18%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 7%, rgba(0, 0, 0, .22) 18%, rgba(255, 255, 255, .18) 31%, rgba(0, 0, 0, .24) 47%, rgba(255, 255, 255, .20) 61%, rgba(0, 0, 0, .18) 79%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(128deg, #23272c 0%, #474d55 13%, #8a929c 25%, #565c64 35%, #2b3036 53%, #444a52 70%, #1c1f23 100%);
  background-color: #363b42;
}
/* блик на тёмном металле — уже и мягче, чтобы не слепил текст */
html[data-theme="dark"] .plates-metal .product-card--plate::after { opacity: .42; }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .plates-metal .product-card--plate .plate-link:hover .product-card__title { color: #9cc4ff; }
}

/* ══ «Популярные категории» на главной — те же пластины (оператор 09.10): в светлой теме светлый
      алюминий, в тёмной — тёмный «воронёный» металл, как у карточек деталей. Раскладка плитки
      прежняя (надписи сверху, картинка снизу), меняются металл, винты, блик и гравировка. ══ */
.plates-metal .category-card {
  --pl-ink: #2e3338;
  --pl-sub: #393e44;
  --pl-price: #1e2226;
  --pl-acc: #3B82F6;
  --pl-acc-lo: #1F5FD0;
  --pl-deboss: 1px 1px 0 #ffffff, -1px -1px 0 rgba(0, 0, 0, .30);
  --pl-bevel: 0 0 0 1px #4a4f55, inset 0 0 0 1px #ffffff, inset 2px 2px 1px #ffffff,
              inset 3px 3px 5px rgba(255, 255, 255, .75), inset -2px -2px 3px rgba(0, 0, 0, .40),
              inset 0 0 0 5px rgba(255, 255, 255, .26), inset 0 0 0 6px rgba(0, 0, 0, .16);
  --pl-drop: 0 12px 24px -8px rgba(15, 23, 42, .55), 0 3px 7px rgba(15, 23, 42, .30);
  --pl-font: 'Segoe UI', 'Helvetica Neue', Arial, Roboto, system-ui, sans-serif;
  isolation: isolate;
  border: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(52, 58, 66, .50), transparent 58%),
    radial-gradient(100% 70% at 100% 100%, rgba(52, 58, 66, .44), transparent 60%),
    radial-gradient(80% 55% at 0% 100%, rgba(52, 58, 66, .16), transparent 60%),
    conic-gradient(from 205deg at 28% 18%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 7%, rgba(0, 0, 0, .10) 18%, rgba(255, 255, 255, .30) 31%, rgba(0, 0, 0, .12) 47%, rgba(255, 255, 255, .34) 61%, rgba(0, 0, 0, .08) 79%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(128deg, #c3c7cc 0%, #e6e8eb 13%, #ffffff 25%, #eef0f2 35%, #c9cdd1 53%, #e0e3e6 70%, #b7bcc1 100%);
  background-color: #d5d8dc;
  box-shadow: var(--pl-bevel), var(--pl-drop);
  transition: transform .2s ease, box-shadow .2s ease;
}
.plates-metal .category-card:hover { box-shadow: var(--pl-bevel), var(--pl-drop); }
.plates-metal .category-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -100%;
  width: 300%;
  z-index: -1;
  pointer-events: none;
  opacity: .78;
  background: linear-gradient(118deg, transparent 43.5%, rgba(255, 255, 255, .45) 46.4%, #ffffff 47.8%, rgba(255, 255, 255, .35) 49.2%, transparent 50.6%, rgba(255, 255, 255, .6) 52.2%, transparent 54%);
  transform: translateX(-7%);
}
.plates-metal .category-card__info { top: 30px; left: 26px; right: 26px; }
.plates-metal .category-card__name,
.plates-metal .category-card:hover .category-card__name {
  font-family: var(--pl-font);
  color: var(--pl-ink);
  text-shadow: var(--pl-deboss);
}
.plates-metal .category-card__desc { font-family: var(--pl-font); font-weight: 700; color: var(--pl-sub); }
.plates-metal .category-card__price { font-family: var(--pl-font); font-weight: 800; color: var(--pl-price); text-shadow: var(--pl-deboss); }
.plates-metal .category-card__img { padding-bottom: 26px; }
@media (hover: hover) and (pointer: fine) {
  .plates-metal .category-card::after { transition: transform .5s ease; }
  .plates-metal .category-card:hover::after { transform: translateX(13%); transition: transform .9s ease; }
  .plates-metal .category-card:hover {
    z-index: 2;
    box-shadow: var(--pl-bevel), 0 0 0 3px var(--pl-acc), 0 26px 38px -14px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .28);
  }
  .plates-metal .category-card:hover .category-card__name { color: var(--pl-acc-lo); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plates-metal .category-card:hover { transform: translateY(-6px) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .plates-metal .category-card, .plates-metal .category-card::after, .plates-metal .category-card:hover::after { transition: none; }
  .plates-metal .category-card:hover::after { transform: translateX(-7%); }
}
@media (max-width: 639px) {
  .plates-metal .category-card__info { top: 20px; left: 14px; right: 14px; }
  .plates-metal .category-card__img { padding-bottom: 18px; }
}
html[data-theme="dark"] .plates-metal .category-card {
  --pl-ink: #f1f3f5;
  --pl-sub: #d3d8de;
  --pl-price: #ffffff;
  --pl-deboss: 1px 1px 0 rgba(255, 255, 255, .20), -1px -1px 0 rgba(0, 0, 0, .80);
  --pl-bevel: 0 0 0 1px #0b0d10, inset 0 0 0 1px rgba(255, 255, 255, .60), inset 2px 2px 1px rgba(255, 255, 255, .40),
              inset 3px 3px 5px rgba(255, 255, 255, .20), inset -2px -2px 3px rgba(0, 0, 0, .65),
              inset 0 0 0 5px rgba(255, 255, 255, .07), inset 0 0 0 6px rgba(0, 0, 0, .40);
  --pl-drop: 0 14px 26px -10px rgba(0, 0, 0, .75), 0 2px 5px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(0, 0, 0, .55), transparent 58%),
    radial-gradient(100% 70% at 100% 100%, rgba(0, 0, 0, .50), transparent 60%),
    radial-gradient(80% 55% at 0% 100%, rgba(0, 0, 0, .25), transparent 60%),
    conic-gradient(from 205deg at 28% 18%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 7%, rgba(0, 0, 0, .22) 18%, rgba(255, 255, 255, .18) 31%, rgba(0, 0, 0, .24) 47%, rgba(255, 255, 255, .20) 61%, rgba(0, 0, 0, .18) 79%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(128deg, #23272c 0%, #474d55 13%, #8a929c 25%, #565c64 35%, #2b3036 53%, #444a52 70%, #1c1f23 100%);
  background-color: #363b42;
}
/* Зарисовка детали карандашом вместо картинки (оператор 09.10): рисунок — трафарет, цвет штриха от темы. */
.plates-metal .category-card__img .cat-sketch {
  display: block;
  width: 100%; height: 100%;
  background-color: #262b32;
  -webkit-mask: var(--m) center bottom / contain no-repeat;
          mask: var(--m) center bottom / contain no-repeat;
  transition: transform .35s ease;
}
html[data-theme="dark"] .plates-metal .category-card__img .cat-sketch { background-color: #C2C7D0; }
/* зарисовке — место пониже: у раздела с описанием в две строки она наезжала на цену */
.plates-metal .category-card__img:has(.cat-sketch) { height: 54%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plates-metal .category-card:hover .cat-sketch { transform: scale(1.05); }
}

/* Те же зарисовки в выпадающих меню шапки («Каталог», «Двигатели»): окошко картинки — маленькая
   пластина (светлый алюминий / тёмный металл), прежние картинки от нейросети больше не показываем. */
.plates-metal .nav__dropdown-img:has(.cat-sketch) {
  padding: 10px;
  background: linear-gradient(128deg, #c3c7cc 0%, #e6e8eb 13%, #ffffff 25%, #eef0f2 35%, #c9cdd1 53%, #e0e3e6 70%, #b7bcc1 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22), inset 1px 1px 0 1px rgba(255, 255, 255, .8);
}
html[data-theme="dark"] .plates-metal .nav__dropdown-img:has(.cat-sketch) {
  background: linear-gradient(128deg, #23272c 0%, #3a4047 13%, #555c65 25%, #434950 35%, #2b3036 53%, #3a4047 70%, #1c1f23 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 1px 1px 0 1px rgba(255, 255, 255, .14);
}
.plates-metal .nav__dropdown-img .cat-sketch {
  display: block;
  width: 100%; height: 100%;
  background-color: #262b32;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transition: transform .35s ease;
}
html[data-theme="dark"] .plates-metal .nav__dropdown-img .cat-sketch { background-color: #C2C7D0; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plates-metal .nav__dropdown-card:hover .cat-sketch { transform: scale(1.05); }
}

/* Блик у плиток категорий слабее, чем у карточек деталей (оператор 09.10: «слишком яркий блик»):
   плитка большая и почти пустая, яркая полоса на ней спорит с надписью и картинкой. */
.plates-metal .category-card::after { opacity: .40; }
html[data-theme="dark"] .plates-metal .category-card::after { opacity: .13; }
html[data-theme="dark"] .plates-metal .category-card {
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(0, 0, 0, .55), transparent 58%),
    radial-gradient(100% 70% at 100% 100%, rgba(0, 0, 0, .50), transparent 60%),
    radial-gradient(80% 55% at 0% 100%, rgba(0, 0, 0, .25), transparent 60%),
    conic-gradient(from 205deg at 28% 18%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .10) 7%, rgba(0, 0, 0, .18) 18%, rgba(255, 255, 255, .07) 31%, rgba(0, 0, 0, .20) 47%, rgba(255, 255, 255, .08) 61%, rgba(0, 0, 0, .15) 79%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(128deg, #23272c 0%, #3a4047 13%, #555c65 25%, #434950 35%, #2b3036 53%, #3a4047 70%, #1c1f23 100%);
  background-color: #363b42;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .plates-metal .category-card:hover .category-card__name { color: #9cc4ff; }
}

/* ══ Приглушённые цвета пластин (оператор 09.10.2026) — пара к блоку в конце theme.css. ══ */
html[data-theme="dark"] .plates-metal .product-card--plate,
html[data-theme="dark"] .plates-metal .category-card {
  --pl-ink: #D2D6DD; --pl-sub: #B4BAC4; --pl-price: #DDE0E6;
  --pl-acc: #5878AD; --pl-acc-hi: #6F8DBE; --pl-acc-lo: #3F5C8C;
}
html:not([data-theme="dark"]) .plates-metal .product-card--plate,
html:not([data-theme="dark"]) .plates-metal .category-card {
  --pl-acc: #4A72BC; --pl-acc-hi: #6489CB; --pl-acc-lo: #35589C;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(52, 58, 66, .46), transparent 58%),
    radial-gradient(100% 70% at 100% 100%, rgba(52, 58, 66, .40), transparent 60%),
    radial-gradient(80% 55% at 0% 100%, rgba(52, 58, 66, .16), transparent 60%),
    conic-gradient(from 205deg at 28% 18%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 7%, rgba(0, 0, 0, .10) 18%, rgba(255, 255, 255, .16) 31%, rgba(0, 0, 0, .12) 47%, rgba(255, 255, 255, .18) 61%, rgba(0, 0, 0, .08) 79%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(128deg, #b7bbc0 0%, #d3d6da 13%, #e6e8eb 25%, #d9dce0 35%, #bcc0c5 53%, #cfd2d6 70%, #abb0b6 100%);
}
html:not([data-theme="dark"]) .plates-metal .product-card--plate::after,
html:not([data-theme="dark"]) .plates-metal .category-card::after { opacity: .28; }