/* tg-related.css — блок «Смотрите также» на карточке товара.
   Автономный компонент: значения захардкожены, без зависимости от --tg-* (news-blog.css).
   БЭМ с двойным подчёркиванием (.tg-related__*) не пересекается с блоговским
   .tg-related-* (одинарный дефис). Спека: web-designer, 2026-08-01. */

.tg-related{margin:64px 0}
.tg-related__title{
  font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:32px;line-height:1.2;
  color:#0a0a0a;margin:0 0 24px;letter-spacing:-.005em;
}
.tg-related__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.tg-related__grid li{margin:0}
.tg-related__card{
  display:flex;flex-direction:column;height:100%;
  padding:24px;border:1px solid #e7e8ea;border-radius:16px;background:#ffffff;
  text-decoration:none;color:inherit;
  box-shadow:0 2px 8px rgba(28,31,36,.07);
  transition:box-shadow .25s ease,transform .25s ease;
}
.tg-related__card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-4px);
}
.tg-related__card:focus-visible{
  outline:2px solid #ffce00;outline-offset:3px;
}
.tg-related__card-title{
  display:flex;align-items:flex-start;gap:10px;
  font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:18px;line-height:1.3;
  letter-spacing:-.01em;color:#0a0a0a;margin:0;
}
.tg-related__arrow{
  flex:none;width:8px;height:8px;margin-top:7px;margin-left:auto;
  border-top:2px solid #5b6068;border-right:2px solid #5b6068;
  transform:rotate(45deg);transition:border-color .18s ease,transform .18s ease;
}
.tg-related__card:hover .tg-related__arrow,.tg-related__card:focus-visible .tg-related__arrow{
  border-color:#0a0a0a;transform:rotate(45deg) translate(2px,-2px);
}
.tg-related__card-text{
  margin:10px 0 0;font-family:'Inter',Arial,sans-serif;font-weight:400;font-size:14px;line-height:1.6;
  color:#5b6068;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:600px){.tg-related__grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (min-width:960px){.tg-related__grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media (max-width:599px){.tg-related{margin:48px 0}.tg-related__card{padding:20px}}
@media (prefers-reduced-motion:reduce){.tg-related__card,.tg-related__arrow{transition:none}.tg-related__card:hover{transform:none}}